Creating a website with HTML (based on HTML 4.01)

HTML can be created in a variety of ways:

Notepad (for Windows look under Start-Program- Accessories). Save the file as a Text File. Name the file xxx.html or as xxx.htm if using an older windows 3.x system)
SimpleText or TeachText (for Macs) or Pico or vi (for UNIX)
Using a word processing package (save as a plain text file or ASCII file)
In a HTML editor (Netscape Composer, Front Page, Adobe PageMill, Hot Metal, Dreamweaver)

HTML has a basic structure that uses makeup tags. Using angle brackets creates tags < >. Some tags will need an end tag </ > with a forward

Most HTML documents usually have the following source code:

<HTML>	This tag makes it an HTML document
<HEAD>	Labels or describes the document.
<TITLE> The title of your first HTML document </TITLE>	The title will be shown in the title bar of the Web browser and in bookmarks.
</HEAD>	Closes the head tag
<BODY> Here is where your content goes. </BODY>	Content inside the body tags is displayed on the page that reader sees or hears.
</HTML>	This tag ends the HTML document

1. Note that some tags are paired in that they have a starting tag <HTML> and an ending tag with a forward slash before the tag </HTML>.

2. Some tags only need a starting tag. <P> for paragraphs is an example of this.

3. Tags are nested. <HTML> <HEAD>……</HEAD> </HTML> is correct.

<HTML> <HEAD>……</HTML> </HEAD> is incorrect.

4. Some opening tags can include tag attributes (size, alignment) that provides additional information.

Viewing the document

1. Save it as a text file (xxx.html) (Remember where you saved the file).

2. Open your Web browser (example Netscape Navigator: Programs- Netscape Communicator- Netscape Navigator-File-Open Page-Choose File-Open)

3. You can switch between your HTLM doc and the Web Browser by holding down the ALT key while tapping the TAB key. Once you are back at the browser you can hit the RELOAD or REFRESH key to see any changes you have made to the HTML doc.

HERE ARE SOME Common TAGS

<HTML>

Begins an HTML document

Not visible in the browser. (NV)

<HEAD> The head is used for the title, meta tags that help search engines, css, and many scripting languages like JavaScript.

Labels page header.

<TITLE> Your Title </TITLE> Very important the title will show up on the search engines like Google and Yahoo. Try looking up movies, news, or sports and see how others have written their title.

Your title should be brief yet descriptive.

<META NAME= "keywords" Content ="HTML,tags, webpage creation, tags.">

Meta tags help search engines index or search the webpage.

List up to 20 keywods that would help index the page or website.

<META NAME= "description" Content = " This document provides instruction on HTML.">

This metatag explains the topic or purpose or the page. This is the meta tag that is used most often.

</HEAD>

closes the head tag

<BODY the obsolete BGCOLOR= "#FFFFCC"> You can now do this in CSS by placing this code in between the head tags like this:

<head>

You can change the background color of the page from white to another color. This code would create a light yellow background. You can try one of the sixteen named colors.

The Sixteen Named Colors with Hexadecimal
aqua #00FFFF	#black # 000000000000	blue #0000FF	fuchsia #FF00FF
gray #808080	green #008000	lime #00FF00	maroon #800000
navy #000080	olive #808000	purple #800080	red #FF0000
silver #C0C0C0	teal #008080	white #FFFFFF	yellow #FFFF00

Or use this color chart for other colors.

This is the first paragraph.<P>

Here is another paragraph<P>

<P align = left> Paragraph left. </P>

<P align = center> Paragraph center </P>

<P align = right> Paragraph right</P>

The <P> tag creates a paragraph by creating a full line space.

Paragraphs can be aligned to the left, right or center.

Name <br>
Address <br>
Phone<br>

The <br> or break tag makes a line break

<H1>

Largest

</H1>

<H2> Very Large Heading</H2>

<H6> Very small heading </H6>

Headings come in 6 sizes. Heading 1is the largest. Heading 6 is the smallest.

<B> Bold face text </B> This code is being depreciated or replaced <strong> XXX </strong> and by <em> emphasis </em> that can be used in both visual and aural devices. Css can now used for this function.

Bold text

<I> Italic </I>

Italic text

<BLOCKQUOTE> quotation goes here </BLOCKQUOTE>

Used for longer quotations so that the type is indented

<PRE> Keeps spacing already present </Pre>

Preformatted Text

<FONT FACE = Ariel>Ariel </FONT> this style is being replaced by using css:

<head>

</head>

and then in the body:

<body>

<p class="style5">HELLO in Ariel and pastel green in css</p>

</body>

Ariel

Other fonts are Verdana, New Times Roman, Courier New. If the readers browser does not support a certain font it will select a default font.

HELLO in Ariel and pastel green in css

<UL> creates an unordered list

<LI> a bulleted item

<LI TYPE = circle> another item

<LI TYPE = square> yet another item

</UL>

The beginning tag to start a list

a bulleted item
another item

Bulleted items can also use squares

yet another item

Unordered list closing tag

<OL> Ordered list (numbered)

<LI>first item

<LI>second item

<LI TYPE = A> Uses capital letters

<LI TYPE = I> Uses Roman Numerals

<LI TYPE= a> Uses lower case letters

</OL>

Ordered lists have numbered

first item
second item

Ordered lists can also use other attributes

uses capital letters
uses capital letters

Another attributes are possible such as using
Roman numerals or lower case letters.

This tag ends the ordered list

<DIV> creates a container or division that other items can be placed into </DIV> a div can be used to apply color, use a border, apply a font, or many other applications. Here is an example:

<div style="color:#00FFFF; border: solid;">
<h4>This is a header</h4>
<p>This is an example of a div tag.</p>
</div>