TECHiE TALKS » HTML http://www.icpep.org Just another techie stuff Fri, 23 Jul 2010 04:53:01 +0000 en hourly 1 http://wordpress.org/?v=3.0 Easiest HTML Conceptualized http://www.icpep.org/html-conceptualized/ http://www.icpep.org/html-conceptualized/#comments Thu, 11 Dec 2008 04:33:16 +0000 paparts http://icpep.org/?p=91 HTML files consist of ordinary text with the addition of what are called tags. Tags, which represent the markup of the text, are special codes surrounded by pointy brackets. Most of the tags come in pairs and specify what is to be done with what is in between the starting and the ending tag. For example, an HTML document begins with <html> and ends with </html>. All pairs of tags have that same form: the ending tag has a slash followed by the name of the starting tag. Some tags just have one constant value, such as html; others contain what are called attributes, extra information contained in the starting tag, which we will show later. A browser is a program that knows how to interpret HTML and use the standardized communication protocols of the Internet to request documents from other computers connected to the Web. The most common browsers are the different versions of Microsoft Internet Explorer, Netscape, and Opera.

tag(s)
What a browser Does
<h1> … </h1> Makes the text in between big and, possibly, bold as appropriate for a header. The exact appearance is up to the browser
<h2> … </h2> Makes the text prominent in some way, but less than for an h1
<i> … </i> Makes the text italic
<b> … </b> Makes the text bold
<img src=”bird.gif“> Sends a request for a file called bird.gif and displays the image. Here, src is an example of an attribute with value “bird.gif”. The two main file formats for image files for the Web are gif and jpg.
<p> … </p> Displays the in-between material as a distinct paragraph. The exact spacing is up to the browser
<br> Produces a line break.
<a href=”nextpage.html”> Continue </a> This is the coding for a hyperlink. The in-between text, Continue, in this example, is displayed, with the common default format being in blue and underlined. If the person at the computer uses the mouse to click on Continue (also called the hypertext), the browser will put in a request for the file nextpage.html at the same folder as the current document and then interpret and display nextpage.html
<table> <tr> <td> … </td> <td> … </td> </tr> <tr> … </tr> </table> These are tags associated with tables. Tables contain rows, which contain table data (a way to remember the term td). Tables are useful for general layout and for displaying information in rows and columns

The line break and the paragraph and tags are easy to omit, both in writing regular HTML and in PHP and ASP code to produce HTML. The browsers generally ignore what is referred to as white space. Therefore, if you want the text to go to a new line, you must include explicitly a tag to force that to happen. Similarly, white space along a line, such as this will be ignored. A special character, written as will force a space. The table tags often are used to lay out text and images on the screen, not just for things like tables of numbers. Later, you will work on examples in which each record from a database will generate a row of a table, including images, buttons, and hyperlinks. HTML has other tags! You can learn about them by using the View Source option in the browsers and by looking at references. You also can investigate Cascading Style Sheets (CSS), an addition to HTML for more elaborate formatting. The tags described here are the basics that you will use in your PHP and ASP scripting. Another description of the process is the following: You, the person using the client computer, invoke a browser such as the latest version of Netscape. You enter in a location on the Web in the form of a URL. The browser sends a request for that particular file to the server computer, the computer described by the URL. As part of the process of interpreting the file, the browser might request other files, such as all the image files mentioned in the src attribute of img tags. If the document had any hyperlinks, coded using tags, then if and when you click on one, the process repeats. However, this time, the browser sends a request for the particular file indicated by the href attribute of the tag. An important feature of how browsers work is, to put it in anthropomorphic terms, they do not complain. That is, if your HTML file has errors, such as incorrectly formatted tags, missing ending tags, improper nesting or mis-spelling of filenames, the browser will display something and give no indication of the existence or the location of errors. You will need to check out the display to see if it is what you intended. This is different from working in programming languages such as C++ or Java when minor syntactic errors in notation prevent you from proceeding beyond compilation, many errors are detected during runtime, and special functions are provided for debugging, getting the errors out of your application. If you have had such experiences, you will come to miss them when working with HTML. Read on for suggestions on how to debug HTML.

Did find the post very useful? Maybe you want to buy me a glass of beer!

]]> http://www.icpep.org/html-conceptualized/feed/ 0 (X)HTML DOCTYPE http://www.icpep.org/xhtml-doctype/ http://www.icpep.org/xhtml-doctype/#comments Fri, 05 Dec 2008 02:59:51 +0000 paparts http://icpep.org/?p=67

Declare a DOCTYPE. The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup. There are three main DOCTYPEs that let the browser know what kind of markup it is dealing with:

Strict:

All markup is XHTML-compliant.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Transitional:

This states that the markup is a mix of XHTML and deprecated HTML. Many well-established sites are currently using this one, so their old HTML code can exist happily in the document alongside the XHTML they are now adding.

Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Frameset:

This is the same as transitional but in this case frames, which are deprecated under XHTML, are OK, too.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

It is important to specify a DOCTYPE. Browsers that don’t see a DOCTYPE in the markup assume that the site page was coded for browsers developed long before Web standards. My recommendation is that if you are building a site from scratch, and can therefore avoid deprecated or abandoned tag attributes, such as FONT and COLOR, use the XHTML Strict DOCTYPE listed previously.
When encountering a page without a DOCTYPE, many browsers go into what is known as Quirks mode, a backwards-compatibility feature supported by Mozilla, Internet Explorer 6 for Windows, and Internet Explorer 5 for Macintosh.
In Quirks mode, the browser functions as if it has no knowledge of the modern DOM (document object model) and pretends it has never heard of Web standards. This ability to switch modes depending on the DOCTYPE, or lack thereof, enables browsers to do the best possible job of interpreting the code of both standards- compliant and noncompliant sites.
Note that for some weird reason, the DOCTYPE tag does not need to be closed with a slash and DOCTYPE is always in caps.

Did find the post very useful? Maybe you want to buy me a glass of beer!

]]> http://www.icpep.org/xhtml-doctype/feed/ 0