|
|
|
Now that you have made a simple HTML page and formatted some paragraphs of text, we are ready to discuss specific HTML coding practices and other technical issues.
As you may have discovered already, HTML does not recognize ordinary carriage returns as line breaks for text.
Example:
<p>Hi There. That was a line of text. And this is a line of text.</p>
Here is how the above code would display in a web browser window:
Hi There. That was a line of text. And this is a line of text.
You can see clearly that the carriage returns that I have placed into the HTML are ignored by the web browser. Anywhere that I want a line break to occur, I must insert a BR tag, as in the following example:
<p>Hi There.<br /> That was a line of text.<br /> And this is a line of text.</p>
Here is that code displayed:
Hi There.
That was a line of text.
And this is a line of text.
Ordinary carriage returns are considered to be "white space". White space is a traditional programming term, used to describe anything which generates blank areas in code. White space includes spaces, carriage returns, tabs, non-breaking-space characters, and anything else which is space-like, carriage-return-like, or tab-like. White space has traditionally been used to break up code into clearer, more easily proof-readable constructions.
Look at these two examples:
Example (no white space):
<p>Here is a paragraph of text.</p><p>And another paragraph of text.</p><p>And yet another paragraph of text.</p>
Example (using white space):
<p>Here is a paragraph of text.</p> <p>And another paragraph of text.</p> <p>And yet another paragraph of text.</p>
Both examples display identically in a web browser window. But doesn't the second example, using white space, look more like three separate paragraphs than the first example does? White space is used to help clarify structure in code, in that and many other ways.
Multiple spaces are not displayed as you might expect. Web browsers take all spaces sitting in a row, and display them as ONE space.
Example:
<p>Here is some space in the code.</p>
Here is how this example displays in a browser:
Here is some space in the code.
Often, spaces and tabs are used to indent tags; this is done to clarify code structure.
Example:
<head>
<title>Example Page</title>
</head>
Example:
<p>Here is a
<b>bold</b>
word</p>
Here is the above example, displayed (notice how the indents (and other white space) disappear?):
Here is a bold word
Indented tags, although HTML4 and XHTML standards-compliant, do not always operate correctly in all versions of currently-supported web browsers. In fact, white space of this sort must be used with extreme caution.
Indented HTML tags are extremely common in the professional web-publishing world, especially in tables; unfortunately, table tags are particularly susceptible to display irregularities and unexplainable, random artifacts when indented, problems which disappear when indenting is removed. In the future, web programmers will safely be able to indent tags. Until that time, it is imperative that NO HTML tags be indented; this will save you countless hours of frustrating debugging and re-coding. Plus, indented HTML tags can substantially increase the "weight" of an HTML page, doubling or even tripling the file size. Therefore, indented HTML tags are forbidden in all exercises and projects submitted for this course.
Again, do not indent tags using spaces or the tab key in your HTML. The following syntax, although standards-compliant, is incorrect:
<html>
<head>
<title>Hi There</title>
</head>
<body>
<p>I am a paragraph of text.</p>
</body>
</html>
Corrected Code:
<html> <head> <title>Hi There</title> </head> <body> <p>I am a paragraph of text.</p> </body> </html>
Carriage returns may be used relatively freely, so long as they separate lines of code or HTML-encoded elements on a page, and do not come inside the brackets (< >) of a tag.
Space characters should be used deliberately, with caution. Extra spaces and tabs, improperly or sloppily placed on an HTML page, can cause display irregularities, so use only those spaces or tabs which are absolutely necessary.
Note: a tab character in HTML is a simulation; it is really 4-5 spaces, combined together.
Note: BBEdit and HomeSite both generate HTML page templates which indent certain tags; please eliminate all such indenting on a page, so that all tags are flush left. Better yet, for the duration of this class, please type out ALL tags, including the basic HTML, HEAD, TITLE, and BODY tags, yourself, by hand; if you hand-code everything, you will more easily learn and remember the basic HTML tags.
Use white space carefully; do not use more spaces than you need. Take a look at the following examples of sloppy coding practice, taken from actual student work:
<b >bold text< /b> (not permissible) < b >bold text< / b > (not permissible)
Extra, random space in tags, as in the examples above, is considered to be poor coding practice, and may lead to malfunctioning HTML on older browsers.
Single spaces may be added to HTML tags when adding ATTRIBUTES, or when following XHTML-specific practices inside BR or other insertion tags (as seen earlier); we will discuss ATTRIBUTES in the next module.
Beware of inserting extra spaces, not only inside of the tags themselves, but AROUND the tags as well. The following example exhibits sloppy coding practice:
This is some <b> bold </b> text that I have typed. <br />
Here is the corrected example:
This is some <b>bold</b> text that I have typed.<br />
Placing extra spaces around tags will create formatting and artifact problems with many HTML tags; avoid the habit now.
Carriage returns, as mentioned earlier, may be placed into your HTML relatively freely. However, they may not occur within the < > brackets of an HTML tag, as this is illegal in older web browsers.
Here is an incorrect example of carriage returns used as white space:
< p > Here is my paragraph of text. Blah blah and all that. < /p >
In earlier versions of HTML, the P (paragraph) tag was used in a similar manner to the BR (break) tag, namely, as a means of creating a specialized line break, one which created more space than the BR tag alone. In fact, in "HTML and XHTML: The Definitive Guide", you will see many examples of the P tag used as a line break substitute; this is outdated practice, and MUST be avoided. The P (paragraph) tag may only be used to mark paragraphs of text, using opening and closing tags; this must be done in order to support CSS and other new standards.
Bad Example:
This is an incorrectly formatted paragraph.<p>
Good Example:
<p>This is a correctly formatted paragraph.</p>
Remember: Always open and close the P tag around your text!
HTML4 is a case-insensitive language, which means that you may use either upper-case or lower-case characters in tag names.
For instance, <br> is the same as <BR> as far as HTML4 is concerned.
XHTML is a case-sensitive language, with an all-lower-case tag syntax.
In XHTML, there is only one acceptable way to code the BR tag: <br />
Current web browsers will accept non-standards-compliant code, but not for many more years; save yourself trouble down the line, and follow XHTML-compliant coding practices now.
The following examples are incorrect, even though they would display correctly in current web browsers:
<P>Here is a paragraph of text.</P> <p>Here is a paragraph of text.</P>
Again, you must adopt an XHTML-compliant, all lower-case tag syntax.
Corrected example:
<p>Here is a paragraph of text.</p>
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.