This website is constructed to be viewed by students using the school's high-speed wireless network and for off-site users with something close to a DSL connection to the Internet. It is not constructed for small display devices. There actually is a website being developed for that purpose.

There are many programs today that will build web pages for you using templates. All you have to do is select the template, type in the text and add pictures, then "publish" and the software does the rest. These programs are fine, but you are limited to the templates available with the software.

Schools introducing students to "information technology" should expose them to the basic tags of hypertext markup language (HTML). HTML is not a program language. The "tags" are codes enclosed in brackets < >. They tell the browser how to display the information on the computer screen. Most tags have a beginning, < >, and an end, < / >.

Trends in web page construction are always evolving. This page does not cover everything, certainly not the complex use of scripts. But all the tags needed to construct basic webpages are explained on the page.

NOTE: Tags displayed on this page have a space after the < at the beginning of the tag. The space has been added to keep the browser from identifying them as a display command for the page. These spaces would not be used in the tages to build a web page.

All web pages begin with a set of standard outline tags.

< html>
< head>
< title> < /title>
< /head>
< body bgcolor="#FFFFFF">
 
< /body>
< /html>

The page background above would be white. If you want another color, change the FFFFFF to something else.

• Type the title of the page between this pair of tags in the outline < title> < /title>.
• This short title will show in the title bar at the very top of the browser window.
• While a title is not required, do not skip this part. Well constructed webpages will always be titled.

• All the information displayed on a page is between the "body" tags in the outline.
• The information is typed, or can copied and pasted onto the page.
• The "begin body" tag for this webpage looks like this: < body bgcolor="#ffffff" text="#000000" link="#ff0000" alink="#ffffff" vlink="#bf0000">
• If the tag is left as < body>, the browser will use its own defalt settings for these things. Most webpage builders want to modify at least some of these color characteristics:
  • bgcolor - the background color of the page.
  • text - the color of the text on the page.
  • link - the color of links on the page.
  • alink - the color of the link as it is clicked.
  • vlink - the color of the link after it has been clicked.

< p>
This tag tells the browser to skip a line on the page. It does not require an end tag.

< br>
This tag tells the browser to stop the current line and begin a new one. It does not require an end tag.

< center> < /center>
Anything between this pair of tags will be centered on the page.

< b> < /b>
Anything between this pair of tags will be displayed as bold text.

< i> < /i>
Anything between this pair of tags will be displayed in italic print.

• There are several ways to change font size.
• The simplest is this tag: < font size="+1"> < /font>
  • This uses the default font setting of the browser and adds or subtracts from that size.
  • Anything between this pair of tags will be displayed in the font size indicated.
  • The numbers can be increases up to 5 to make larger font.
  • The plus sign can be changed to a minus sign to make the font smaller.

• < font color="#000000"> < /font>
• Text between this pair of tags will be shown in the specified color.
• Font size and color can be combined in one pair of tags like this:
  < font size="+1" color="#ffffff"> < /font>
• Color is indicated by the six letters or numbers after the # sign. This is known as "hexadecimal color code".
• See a chart of the hexadecimal colors.

• The page background is controlled inside the "body" tag. < body bgcolor="#ffffff">.
• You can specify any color by a combination of six letters or numbers.
• Hint: not all browsers display colors the same. There are some combinations of colors that just do not work well together.

• This combination of tags defines the ordered list:

  < ol>
  < li>
  < /ol>

• The < ol> < /ol> pair begins and stops the list.
• The < li> tag places a number in front of a line of text.
• Each time you use the < li> tag, a new line begins and the number increases.
• Numbers are the "default", but you can make the browser display letters by adding this to the tag. < ol type=a> or < ol type=A>

• This combination of tags defines the unordered list.

  < ul>
  < li>
  < /ul>

• The < ul> < /ul> pair begins and stops the list.
• The < li> tag places a large dot in front of a line of text.
• Each time you use the < li> tag, a new line begins.

< hr>
This tag tells the browser to display a line across the page at that point. It does not require an end tag. If you do not want the line to go all the way across the page, you can add: < hr width=50%> - Change the percentage as needed.

• < a href="URL here"> < /a>
• This pair of tags defines the link. Anything between the pair will show as a link on your webpage.
• The internet address of the linked page goes between the quotation marks in the tag.
• It is possible to make a link to jump from one part of a single page to another.
  • Make the link with: < a href="#key word here"> < /a >
  • Put this tag where you want the link to jump to: < a name="key word here">
  • The same key word goes between the quotation marks in this set of tags.

• < img src="file name here" >
• This is the basic tag used to put a picture on the page.
• The name of the picture file goes between the quotation marks in the tag.
• The location of the picture on the page can be controlled by adding one of the following between the "img" and the "src":
  • align=right - This moves the picture all the way to the right, allowing type to begin at the left of the page and wrap around the picture.
  • align=left - This moves the picture all the way to the right, allowing type to begin on the right of the picture and wrap around it.
  • align=middle - This will allow you to put a line of type centered at the side of the picture.

• The basic table outline is:

  < table>
  < tr>
  < td> < /td>
  < /tr>
  < /table>

• Tables can be simple, or very complex. The best way to understand a table is to look at the "page source" for some. The tags in the table below will get you started.

  Each of the tags above does the following:
  < table>	Starts the table.
  < tr>	Begins a horizontal row.
  < td> < /td>	Divides the row into columns. Add as many of this pair as you need. This row has 2 columns.
  < /tr>	Ends the horizontal row. If you need more horizontal rows, start with another < tr>. This table has 6 horizontal rows.
  < /table>	ends the table

• To view the tags used to make this table, click on "view" on the browser toolbar. Then select "page source". You are looking at all the tags used to make this page.
  • To see the table tags, scroll down the page until you see TABLE BEGINS HERE.
  • The colored margins of this page are made using a table within a table. Look at the top of the "page source" to see how this is done.
• Many of the Howe Public Schools web pages are controlled by tables, sometimes with tables inside of tables.

An HTML cheat sheet from Netlingo