Below is a very basic HTML page containing most of the common elements.
You'll want to study the code that made it. Use your web browser's "View Source" option.

An HTML document is designated with the <HTML> tag.

Inside the document, there is a <HEAD> section which contains information about the document.

Next comes the <BODY> section where the code to display the document is placed.

Invisible comments can be embedded inside <!-- comment goes here -->

H1 Heading (The HTML code for a heading is <H1>heading text</H1> or, for smaller text, <H2> or <H3>)

This is a paragraph. The code for a paragraph of text is enclosed in <p>paragraph text</p>

Below it is a "horizontal rule." <HR/>


H2 Heading

Next we will make an ordered and unordered list. Ordered (numbered) lists use the <OL> tag, whereas unordered lists use <UL>. Items in the list use the List Item open and close tags <LI>list item</LI>

You can make a nested list with sub-items by putting another <OL><LI>sub-item</LI></OL> inside an existing list.

  1. Ordered List Item 1
  2. Ordered List Item 2
    1. sub-item
    2. sub-item
  3. Ordered List Item 3

Anything enclosed in <center>content</center> tags will be centered.

Tables rows are designated with open <TR> and close </TR> tags for each row of the table.

Header rows use <HR>Column 1 Header</HR> inside the table row tags.

Table data cells use the open <TD> and close </TD> tags.

Table Heading 1 Table Heading 2 Table Heading 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 3, Column 3

Hyperlink to a website: Northern Arizona University and the code looks like this:

<a href="http://www.nau.edu" target="_blank">Northern Arizona University</a>

The target="_blank" tag is optional and causes the clicked link to open in a new tab or window.


Saint Tropez

Code for the image: <img src="images/saint_tropez.jpg" style="width:50%; border:1px solid silver; padding:2px;" alt="Saint Tropez">

Style tags are optional. ALT tag provides a text description of the graphic.

Link to another page within the website...

I used BbEdit, a free tool for the Mac, to create this page.