This is what the skeleton of an HTML webpage/document looks like:
<HTML>
<HEAD>
<TITLE>page
title goes here</TITLE>
</HEAD>
<BODY>
page
content goes here
</BODY>
</HTML>
The entire HTML document is enclosed in <HTML></HTML> tags. The head of the document, enclosed in <HEAD></HEAD> tags, contains information about the document that is not printed on the page, like the title. The title of the document, usually displayed in the browser window’s title bar, is enclosed between <TITLE></TITLE> tags. Title tags can only go inside the head of the document. The body of the document (what you see printed displayed by the browser) is enclosed in <BODY></BODY> tags. The beginning <BODY> tag can contain two useful attributes, BACKGROUND to define a background image, and BGCOLOR to define a background color:
<BODY BACKGROUND="bg.gif"> or
<BODY BGCOLOR="black">
The browser uses tags to determine how it should structure the content--things like headings, lists, tables, frames, forms. Although there are tags that change the style of a document (fonts, colors, spacing, etc.), you can now use Cascading Stylesheets to more powerfully control how your webpage looks, without using a thousand <FONT> tags. You should use HTML to define things in your webpage and use CSS to define how things should look in your webpage.
Most all tags have end tags, with a few exceptions, including <P> for paragraphs, <IMG> for images, and <BR> for line breaks.
Links (also known as anchors, hence the “a”) look like this:
<A
HREF="http://www.unc.edu/">goto unc.edu</A>
HREF (or hypertext reference) is an attribute of the anchor tag that defines what website the text in between the anchor tags should link to.
Anchors can also be used to name a place in a document, particularly a long document, so that you can link to a specific point in that document. For example, the following named anchor:
<A
NAME="section7">SECTION 7</A>
can be linked to like this:
<A
HREF="mydocument.html#section7">Goto Section 7 in my document</A>
or if that link above was in the same document as the named anchor, such as with a table of contents at the top of a long document, that named anchor can be linked to like this:
<A
HREF="#section7">Goto Section 7 Below</A>
Other useful attributes links include TITLE, which browsers use to display “tooltips” when the cursor hovers over the link:
<A
HREF="http://www.unc.edu/" TITLE="Click to goto UNC’s
homepage">UNC</A>
And TARGET, which you can use with frames or to open a link in a new window, as in:
<A
HREF="http://www.unc.edu/" TARGET="_blank">Open UNC in a
new window</A>
The <IMG> tag, an enchancement added by Netscape in the early days, helped cause an explosion of popularity in the web because it meant anyone could create a magazine-like document and post pictures of themselves, their families, and children doing silly things. The <IMG> tag looks like this:
<IMG SRC="funnyface.jpg"
ALT="A picture of me being stupid">
The SRC attributes defined the source of the image, the ALT text is displayed in text only browsers and as a “tooltip” when the cursor hovers over the image. Other interesting attributes include ALIGN, which defines how text wraps around the image, BORDER which needs to be set to zero when the image is a link, as in:
<A
HREF="index.html"><IMG SRC="go-home_button.jpg"
BORDER="0"></A>
Finally, HEIGHT and WIDTH can be used to scale or distort an image. Even if the you don’t want to scale the image up or down, it helps the browser lay out the page if it know in advance the size of the images.
<IMG SRC="funnyface.jpg"
ALT="A picture of me being stupid" HEIGHT="50"
WIDTH="10">