HTML Tutorial

This page gives a basic introduction and a few aids for creating HTML pages, pages created in the hypertext markup language that renders them published texts in Internet browsers like the one you're using to read this. At the bottom of this page is a color chart for help in choosing the colors of page or table-cell backgrounds, lines of text, or other components. This is an ongoing project; if you find it useful, please let us know. If you would like to see units on particular topics, please feel free to request them. I'm learning as I go, so may not be able to fill all requests, and it may take a while for some of them. Also feel free to request clarification if you like.

Basic structure

These headers and footers can be entered (typed) in a plain ASCII editing program like Notepad, and read in a web browser like Internet Explorer or Netscape. If there's a browser on your computer, you can read html (hypertext markup language) code from any source, including your own hard disk or floppy; it doesn't have to come from the web or Internet. For example, your "web address" can be a file like a:\sampletext.htm. Your browser can also display any image in "gif" (pronounced like gift without the "t") or "jpg" (pronounced J-peg) using an "address" like a:\sample.gif or c:\images\sample.jpg. In between these page headers and footers can go a wide variety of texts, images, and multi-media content. Our purpose here is to introduce some of the most basic of these and to give reminders of some of the often-used layout tools. Here are the most common headers and text formats.

This hypertext markup in ASCII mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm	renders this in the browser mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<P>This is the basic paragraph opening and closing HTLM code.</p> <P>When you use the closing code </p> the browser puts a line space between your paragraphs.</p>	This is the basic paragraph opening and closing HTLM code. When you use the closing code </p> the browser puts a line space between your paragraphs.
<P>To keep blocks of text together (without the extra line space) use <br> instead of </p><br> <P>To keep blocks of text together (without the extra line space) use <br> instead of </p><br>	To keep blocks of text together (without the extra line space) use <br> instead of </p> To keep blocks of text together (without the extra line space) use <br> instead of </p>
<hr>renders a horizontal rule
<hr width=80%> This allows you to control the width of the horizontal rule, using any percentage.
<hr width=70% color="FF0000"> This allows you to control the color (FF0000 is red), in Explorer only.
<H1>Heading 1</H1>	Heading 1
<H2>Heading 2</H2>	Heading 2
<H3>Heading 3</H3>	Heading 3
<H4>Heading 2</H4>	Heading 4
<H5>Heading 5</H5>	Heading 5
<H6>Heading 6</H6>	Heading 6
<b>makes any text bold</b> <i>makes any text italic</i> <b><i>bold italic text</i></b> Note that some earlier browsers require that ending markup be made in reverse order from opening markup, thus <b><i></i></b>.	makes any text bold makes any text italic bold italic text
<blockquote>This code enables you to indent text from left and right, making it more readable than if it goes all the way to your browser's outside margins.</blockquote>	This code enables you to indent text from left and right, making it more readable than if it goes all the way to your browser's outside margins.
<blockquote><blockquote>You can create "indents within indents" by using additional <blockquotes>. </blockquote></blockquote>	You can create "indents within indents" by using additional <blockquotes>.
<ul>This code indents text from the left, but doesn't indent from the right.</ul> <ul><li>Add <li>and the program puts a bullet at the beginning of each paragraph thus coded.	This code indents text from the left, but doesn't indent from the right. Add <li>and the program puts a bullet at the beginning of each paragraph thus coded.
<ol><li>This code indents and numbers paragraphs. <li>This code indents and numbers paragraphs. The html automatically adds the numbers; don't type them. <li>At the end, type </li></ol>	This code indents and numbers paragraphs. This code indents and numbers paragraphs. The html automatically adds the numbers; don't type them. At the end, type </li></ol>
To return to the original indentation levels, you need the same number of </blockquote>'s or </ul>'s at the end as you have inserted <blockquote>'s or <ul>'s in the body thus far. Most html codes open with <> and end with </>. However, later versions of the program can read some examples of either one as standing for both. For example, you can create a paragraph with either <P> at the beginning of </p> at the end; you don't need both in current versions of html.
<P align="right">This code aligns your paragraph to the right. <P align="center">This code centers your paragraph. <center>This code will also center any text.</center> <>This code displays a dash (used in typeset text instead of two hyphens) < >This code creates a non-breaking space, handy for indenting second lines of text (hanging indents); also for forcing type to any particular location.	This code aligns your paragraph to the right. This code centers your paragraph. This code will also center any text. —This code displays a dash (used in typeset text instead of two hyphens) This code creates a non-breaking space, handy for indenting second lines of text (hanging indents); also for forcing type to any particular location.
Working with images (photos and graphic art)
To insert an image so as to be "wrapped around" by a paragraph, without using a table layout, use this html code string: <img src="sample.gif" align="left">This puts an image entitled "sample.gif" at the left side of your paragraph, at the beginning. The text wraps around it to the left. <img src="sample.gif" align="right">This puts an image entitled "sample.gif" at the right side of your paragraph, at the beginning. The text wraps around it to the right. Putting the code in the middle of the paragraph can make it <img src="sample.gif" align="left">wrap top and bottom around either left or right side, as you designate. This shows the text wrapping around both top and bottom. This shows the text wrapping around both top and bottom. Sizing your images. It's always a good idea to include the size of your images. This way the browsers of those visiting your page know how much space to leave for the images, and can load the text around those spaces, making the loading appear to occur faster. This is the html string with the size of the sample gif included: <img src="sample.gif" align="left" width="28" height="30"> Putting margins on images. To avoid having your text come all the way to the very border of your image, add a space element to the string, hspace for horizontal, vspace for vertical: <img src="sample.gif" align="left" width="28" height="30" hspace="5" vspace="5"> "5" as used here indicates five pixels, a unit of measurement used in screen monitors.	To insert an image so as to be "wrapped around" by a paragraph, without using a table layout, using this html code string renders it thus: This puts an image entitled "sample.gif" at the left side of your paragraph, at the beginning. The text wraps around it to the left. This puts an image entitled "sample.gif" at the right side of your paragraph, at the beginning. The text wraps around it to the right. Putting the code in the middle of the paragraph can make it wrap top and bottom around either left or right side, as you designate. This shows the text wrapping around both top and bottom. This shows the text wrapping around both top and bottom. Sizing your images. It's always a good idea to include the size of your images. This way the browsers of those visiting your page know how much space to leave for the images, and can load the text around those spaces, making the loading appear to occur faster. This is the html string with the size of the sample gif included: <img src="sample.gif" align="left" width="28" height="30"> Putting margins on images. To avoid having your text come all the way to the very border of your image, add a space element to the string, hspace for horizontal, vspace for vertical. In this case no "vspace" is required as the image is smaller than two lines of text. Note the improvement created by the "hspace," however. "5" as used here indicates five pixels, a unit of measurement used in screen monitors.

Basic structure

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Working with images (photos and graphic art)

Some color codes