A good way to learn is to look at how other people have coded their html pages. To do this, click on the "View" menu and then on "Source". You will find yourself developing a critical eye as many pages look rather a mess under the hood!
This page will teach you how to:
Every HTML document needs a title. Here is what you need to type:
<title>My first HTML document</title>
The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document. Most browsers show the title in the window caption bar.
In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.
Here is how to add an important heading:
<h1>An important heading</h1>
and here is a slightly less important heading:
<h2>A slightly less important heading</h2>
Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
You can emphasize one or more words with the <em> tag, for instance:
This is a really <em>interesting</em> topic!
The simple way to add an image is using the <img> tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.
<img src="peter.jpg" width="200" height="150">
The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:
<img src="peter.jpg" width="200" height="150"
alt="My friend Peter">
Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.
Links are defined with the <a> tag. Lets define a link to the page defined in the file "peter.html":
This a link to <a href="peter.html">Peter's page</a>.
The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.
To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:
This is a link to <a href="http://www.w3.org/">W3C</a>.
You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:
<a href="/"><img src="logo.gif" alt="home page"></a>
HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:
<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>
Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:
<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>
Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.
The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:
<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>
The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. You can also make use of paragraphs and headings etc. for longer list items.