HTML 101: A Tutorial

An Example HTML page

This is an example HTML page. HyperText Markup Language (HTML) is the standard language for creating Web pages.

HTML Page Structure

A typical Web page has a <head> section with information that doesn't show up on the page proper, and a <body> section that holds the text, links and images that show up on the web page.

Tags

A typical HTML tag is surrounded by angled brackets and has a tag name, such as <p> which denotes a paragraph. Many (but not all) tags also have an end tag; for instance, a paragraph is ended with a </p> tag.

A nice characteristic of web pages is that you can view the source text of most web pages in your browser. If you want to see how somebody made their own web page, you can go to the browser's menu, select "/View/Page Source" and a popup window will show you the HTML code for that web page.

Another nice aspect of HTML is that it is relatively immune to coding syntax errors. If you put in an illegal HTML tag, or miss one you're supposed to have, the web browser will usually still accept the rest of your page. Most other computer languages will not accept any syntax errors and will fail in compiling or crash your computer when you try to run it, so HTML is much easier for novices to learn programming. For instance, I will put in an <illegal> tag here, , and the browser doesn't care. Look for <illegal> in the source code. I will also end this paragraph without an end of paragraph </p> tag, and the browser will still not complain, even though it is not proper HTML nowadays.

Headers

You can create Section Headers within a page

You have 5 sizes of Headers, <h1> through <h5>

You can create italized or boldface type with simple <i>...</i> and <b>...</b> tags.You can cause a line break within a paragraph using the <br> tag, for example;
You can create blockquotes for special reference sections:

Use blockquote to set off large chunks of material quoted from external sources, publications, or other materials. When you quote from an external source (more than one line long), use <blockquote> to offset text from both the left and right margins. Always attribute your sources. (“HTML for Dummies”, 3rd Edition)

Images

Create images on your web page with the <img> tag. For example, here is the maple leaf broadside, created with code
<img src="maple_s.jpg">, which give you -

Hyperlinks

Perhaps the main reason for HTML is to allow the creation of hyperlinks to other pages. Coding gets a little more involved here. An example; suppose I have another page I want to link to. I use an anchor tag that references to that link and provide some text that acts as a label to that link (such as the notorious and totally useless "Click Me" - - never use that). Here is a more properly labelled link: find out more about my cooking prowess on another web page. The HTML code looks like this:

<a href="cooking.html">cooking prowess</a>

Beware the Dead Link. There is no file here by that name, and if you click on that link, you'll get a "404 - No File Found" error message from the HTML file server. If you think you have a file there, be sure you've got it spelled right and you're pointing to the correct directory.

Layout

To get more serious about page layout, you will eventually be using:

but you have enough to start with here.

That's HTML in a nutshell. Have Fun!