Basic HTML Code & Tags
HTML is a special language for Web documents (pages) that Web browsers
use to display the document with proper headings, paragraphs, links (references
to other pages), images, etc.
A tag is a basic HTML element of a Web document or "page"
(tag variables are shown in italics). A tag called HTML surrounds the
whole document. This surrounds two sub-sections, HEAD and BODY, which
are required. Within the HEAD section, TITLE is required. Below is the
minimum framework required to create a Web page.
<HTML>
<HEAD> ...contents of head section...
</HEAD>
<TITLE> The page title goes here.</TITLE>
</HEAD>
<BODY> ...visible information (text, images)... </BODY>
</HTML>
Type this into a simple text editor like Notepad, save it with a name
that ends with ".htm". Open it in a web browser - and you have
your first web page!
This is what a search robot expects to see. A common HTML problem
is duplication of the tags - particularly the <BODY> and <HTML>
tags. Once the search robot sees a closing </BODY> tag or closing
</HTML> tag, it thinks it has come to the end of the page and will
look no further. Check the source code for pages or check for errors using
an HTML validator. The most popular service is found at http://validator.w3.org/.
Document Type Declaration
A DTD (Document Type Declaration) should be the first line of a Web
document. To use the W3C HTML
4.0 Recommendation, start your document with the correct DTD as the
first line. If you have mixed HTML 4 with older HTML styles, use this
DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
HEAD Section:
- <HEAD> ... </HEAD> surrounds
tags that define information for the rest of the document.
- <TITLE> title text </TITLE>
(required tag) The title text is displayed in the browser top
bar - the only part of the HEAD section that is normally visible.
- <META NAME="Meta-type" CONTENT="description">
provides information for the web page. Some META tags like DESCRIPTION,
KEYWORDS and NEW are used by search services.
BODY Section:
- <BODY> ... </BODY> -
surrounds the following tags and text that are displayed by the Web
browser.
- <H1>Heading #1</H1>,
<H2>Heading #2</H2>
... <H6>Heading #6</H6>
Heading tags H1-H6 are generally used for major divisions of the page.
The largest is H1 and smallest is H6. This saves you specifying text
sizes. Your page will be displayed correctly in most browsers if you
use H1 as the highest level of heading, H2 as the next highest, and
so forth in order. You should not skip heading levels. i.e. H3 should
not appear after an H1.
- <P> Paragraph of text </P>
- Paragraph tag identifies a block of text, which is separated
by white space from the preceding element.
- <A HREF="url">hot
link text<A> - Hot links define the
location (url) of the page to go to when that link (link text) is selected.
URLs may be relative filenames or full HTTP addresses (e.g. http://www.google.ca).
- <IMG SRC="filename" WIDTH=www
HEIGHT=hhh ALT="text">
- Inline images define the file location (file), size (WIDTH, HEIGHT),
and, most important of all, the text (ALT) that is displayed in text-based
browsers and browsers with graphics turned off.
- <!-- comment --> -
Comment lines can be inserted between elements. The comment is not displayed
in the browser.
- <HR> - Horizontal rule displays a divider
line between elements
- <BR> - Line break creates white space
between elements. (Note: no closing tag)
- <PRE> text </PRE>
- Preformatted text can be displayed without further formatting.
Note that long lines will cause text to disappear off the right side
of the screen. Convert these sections to HTML if possible.
There are many more HTML tags for things like tables, fonts, background
colours, just to name a few. Refer to the HTML reference for online help
and testing services.
|