Table of
Contents

Writing HTML Source Code

When writing HTML it is important to remember that the browser will ignore all line breaks, hard returns and spaces larger than one. If you would like to try it on your template, below the H1 line type something like "hello" and then press the space bar ten times and then type "world". Then hit enter for a hard return and type "this is on the same line". This is helpful for writing HTML code, because you may feel free to indent, skip lines, and seperate the code however you feel, without affecting the final look of your document. You may also use comment tags. A comment is used to explain an item or to insert text that will not be seen by the browser. A comment starts with <!-- and ends with -->

<!--Put any comment you like here and the browser will ignore it and will not display it-->

Paragraph and Line Break Tags

When writing text the P and BR tags become very useful. When typing the text content of your document in the notepad it is necessary to turn on the word wrap function. (do so by clicking "view" "word wrap" from the notepad toolbar). When the browser reads an HTML document it will fit the lines to the window they are displayed in. Unless otherwise instructed, will display a line of text the length of the window and return to the next lower line. The P tag or paragraph tag is used to seperate blocks of thought. It will generally insert a blank line space prior to it. The BR tag, on the other hand will break the line of text and start again on the next line down. Try the example

Below the H1 tag insert this text:

<P>The bat is a nocturnal mammal. Some people believe that a bat is blind and has no eyes. This is a false assumption, however. A bat does indeed have eyes, although it uses radar to navigate in the darkness.</P>
<P>A bat's radar is so accurate that it can fly through the blades of a running fan without getting hurt. This is quite an amazing feat.</P>

Now try this example of the BR tag after the line above

Roses are red<BR>
Violets are purple<BR>
Sugar is sweet<BR>
And so is maple surple<BR>

Now a couple of things to remember about our newly aquired tags. First of all notice that the P tag is a container which means that it contains text within an open and close tag. Most browsers will be able to figure out where the paragraph stops without the </P>, but it is a good idea to include it anyway. The BR tag is a stand alone tag which means that it cannot contain text but will create a line break wherever it is entered.

Another thing to note here is to avoid using the P tag to insert extra blank lines. Most browers will ignore an open and close P tag that is void of content. An option that you may consider to enter a blank line is preformatted text. Preformatted text falls inside the <PRE> and </PRE> tags and is displayed just as it is typed. The PRE acts as a new paragraph so it will leave a blank line before and after it and is normally displayed in monospaced teletype font. The preformatted text is usefull for creating colums that need to line up on top of eachother. Try this:

<pre>This is preformatted text          This is ten spaces
This is with a hard return

This line has a blank line before it</pre>

<pre>     and this line starts with a tab indent</pre>

Another way to insert a blank line is by using it's special character code.

HTML Breakdown

The HTML tag may have several parts. There may be a tag, which we have already learned, and a tag may have an attribute which in turn may have a value. The anatamy will look like this: <TAG ATTRIBUTE="value">Text content, image or multimedia</TAG>

The tag, as you know suggests to the browser how to display the content. An attribute will suggest to a browser different ways to display a tag, and a value describes different ways to display the attribute. Try the following example.

<P ALIGN="center">This text will be centered in the display window</p>
<P><FONT color="red">This text will be red</FONT></P>

The result should look like this:

This text will be centered in the display window

This text will be red

Notice that the FONT tag is nested inside the P tag. This means that whatever open tag comes first, the corresponding end tag must come last. The tag that appears second, the corresponding end tag must come second to last and so on. Nesting tags inside of eachother is the HTML standard and you will be doing yourself a favor to do so. Also notice the use of quotes. Most browsers do not require the quotes, but it is a good idea to include them. Including one quote without the other can be disasterous to a web page.

Another thing to note here is that the FONT tag has been deprecated by the W3C (World Wide Web Consortium-The people who decide what standards should be used) which means that they plan to do away with it altogether sometime in the future. The reason is because of the advent of cascading style sheets (CSS) which may be used to create the same effect. That being said, the FONT is much too popular and is on so many existing web sites that it doesn't seem likely to dissapear any time soon. The FONT tag is easier to learn and CSS is not supported by most browsers so feel free to use it. However, if you plan to keep publishing web pages, it may be a good idea to start learning CSS, because sometime in the future you may have to start using both.

For more on Style Sheets go to: http://www.w3.org/Style/

Continue Tutorial