Blocks of HTML

When you use a Word Perfect, and put on Reveal Code, you can see that the program has blocked your document into various parts, eg. headings, paragraphs, lists, etc. When you create and HTML document, you must supply the blocks yourself. This is not difficult.

What is HTML made up of? HTML is made up of elements and attributes of those elements. An example of an element is IMG, for image. An example of an attribute for the IMG element is SRC, which is the source of the image or the image name, eg. <img src="foo.png" alt="Foo">. All attributes must have a value, even if, in the case of an image that is for decoration only, the value is null.

Required Elements

There are certain elements that a document needs in order for the browser to render it.

HTML
This element tells the browser to start rendering HTML. The language attribute should be included, eg: lang="en" which tells the browser it is English.
<HTML lang="en">
HEAD

This element stores all the elements that are not rendered on the screen.

<head>

In the HEAD elements, are:

LINK

This element is used to link the current page with other documents. This is not a hyperlink, but rather a way for the current document to link to others such as stylesheets, favicons, etc.

<link type="text/css" rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
META

The META element contains information about the document. This element is also partially read by some search engines. Additionally, the some user agents may need it for the character set information if the server does not send the information when the document is requested.

<meta name="description" content="Short sentence describing the page">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

There are other uses as well, but I will not go into them here. Google is your friend.

SCRIPT

This can either be an external javascript, or can be inline. An external javascript is preferable because it can be cached, and because it does not cause as much document bloat. The syntax is:

<script type="text/javascript">
 some function
</script>

or

<script type="text/javascript" src="script.js"></script>
STYLE

This element is used for page level CSS. Page level style overrides styles defined in an external stylesheet. Frequently, when I am working on a layout, I will use this until I like it, then I copy all the definitions to an external stylesheet. The type attribute of text/css is required in the element.

<style type="text/css">
h1 {font-size:130%;}
</style>
TITLE

Probably the most important element of all. This is the element that renders the title of the document in the browser's title bar. The title element should reflect the content of the page.

<title>Start Learning HTML the Right Way</title>
BODY
The body element is what the browser renders. The rest of the elements go into the BODY.