Document-Level Tags

Take a look at the source of the Hello World web page to get see a short demo of the <html>, <head>, <body>, and <comment> tags.

Formatting Text

Headers

These tags are used to mark sections of a document. For example: 

	<h1>Level 1 Header</h1>
	<h2>Level 2 Header</h2>
	<h3>Level 3 Header</h3>
	<h4>Level 4 Header</h4>
	<h5>Level 5 Header</h5>
	<h6>Level 6 Header</h6>

produces ...

Level 1 Header

Level 2 Header

Level 3 Header

Level 4 Header

Level 5 Header
Level 6 Header

Paragraph Formatting

To mark off a paragraph use the <p> tag: 

		<p>The									 spacing

		within the p tag is							basically
		ignored by the browswer.
		</p>

The spacing within the p tag is basically ignored by the browswer. 

		<blockquote>
		The blockquote tag is nice for formatting long quotations that will
		be indented from the right and left margins automatically.
		The blockquote tag is nice for formatting long quotations that will
		be indented from the right and left margins automatically.
		The blockquote tag is nice for formatting long quotations that will
		be indented from the right and left margins automatically.
		</blockquote>

The blockquote tag is nice for formatting long quotations that will be indented from the right and left margins automatically. The blockquote tag is nice for formatting long quotations that will be indented from the right and left margins automatically. The blockquote tag is nice for formatting long quotations that will be indented from the right and left margins automatically.

The <br> tag is used to insert some blank lines into the document. Notice, in the example below the xHTML-compliant method for encoding the opening and closing tag markers in a single tag. 

		Here is some text.
		<br />
		<br />
		<br />
		Here is some more text.

Here is some text.


Here is some more text.

Occasionally you may need/want to insert multiple spaces between words. This can be done using the sequence &nbsp; (NOTE: the semicolon is part of the sequence). 

		I need spaces between this &nbsp;&nbsp;&nbsp;&nbsp; that.

I need spaces between this     that. An alternative is to use the <pre> tag which will let you format your text however you want. 

		<pre>
		The									 spacing

		within the pre tag is							<em>not</em>
		ignored by the browswer.
		</pre>
	
		The									 spacing

		within the pre tag is							not
		ignored by the browswer.

The <hr /> tag is used to display horizontal lines throughout this document.

Text Styles

Consdering the following encoding: 

		It is of <strong>utmost importance</strong> that you
		understand what I am demonstrating.	<em>Don't miss it!</em>

It is of utmost importance that you understand what I am demonstrating. Don't miss it!

Lists

Unordered Lists

To create a bulleted list use the <ul> and <li> tags. Notice that lists can be nested. 

	<ul>
		<li>map</li>
		<li>suitcase</li>
		<li>snacks</li>
		<li>
			<ul>
				<li>cookies</li>
				<li>cake</li>
				<li>water</li>
			</ul>
		</li>
		<li>mp3 player</li>
	</ul>

Ordered Lists

Ordered lists work just like unordered lists except that instead of using bullets, the browswer uses numbers to label list items. Also observe that ordered lists and unordered lists can be combined: 

	<ol>
		<li>map</li>
		<li>suitcase</li>
		<li>snacks</li>
		<li>
			<ul>
				<li>cookies</li>
				<li>cake</li>
				<li>water</li>
			</ul>
		</li>
		<li>mp3 player</li>
	</ol>
  1. map
  2. suitcase
  3. snacks
  5. mp3 player

Links

Links are created using the anchor tag. References can be absolute or relative. In the example below the first link is absolute and the second links is relative. This tag makes use of an attribute named "href". Consider: 

		You might want to view <a href="http://www.hsutx.edu">HSU's website</a>,
		or if you are really board you can look at the
		<a href="helloworld.html">"Hello, World"</a> document.

You might want to view HSU's website, or if you are really board you can look at the "Hello, World" document.

Images

Pictures can be displayed on a web page by using the <img> tag. This tag supports a variety of attributes, one of which is used to identify the location and name of the picture to be displayed. The references to the picture name can be absolute or relative: 

	Here is a picture I like from another website:
	<img src="http://www.hsutx.edu/faculty/images/1103.jpg" />
	But this is even a better one:
	<img src="terry_sergeant.jpg" alt="Truly dazzling photo" border="0" />
	Let's make that a bit smaller!
	<img src="terry_sergeant.jpg" alt="Truly dazzling photo #2" width="120"
	border="3" />

Here is a picture I like from another website: TBO But this is even a better one: Truly dazzling photo Let's make that a bit smaller! Truly dazzling photo #2

If you want to make a picture to be a link then simply put the img tag inside of an anchor tag: 

	Click on the picture to visit that guy's website:
	<a href="http://josephus.hsutx.edu/"><img src="terry_sergeant.jpg" width="120"/></a>

Click on the picture to visit that guy's website: TWS Again