|
|
Index:
HTML stands for HyperText Markup Language, the language of the World Wide Web. When you code in HTML, you must enclose commands in less than (<) and greater than (>) signs that tell the browser how you want the text formatted. These are called tags.You also have the option of including graphics (pictures) in your HTML documents.
There are several versions of HTML. The one that is used most widely is HTML 2. This can be interpreted by almost all browsers. The newest version is HTML 3. This can only be interpreted by Netscape Navigator and Microsoft Internet Explorer.
There is a basic format that is required in an HTML document. The necessary coding is as follows:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
(The document goes here)
</BODY>
</HTML>
Basic TagsTags are elements that tell your browser how to format the text that is enclosed. One of the most important things to remember is that all tags are enclosed in less-than and greater-than signs (< and >). There is always a beginning and ending tag, and all ending tags have a slash (/) after the less than sign but before the tag name (</HTML>). The only exceptions to this are the IMAGE tag, the BR tag, and the P tag.
The first tag in an HTML document is always the HTML tag. This tag tells the browser that the document is an HTML document and that there are other tags coming up that it has to use to format the document.
The next tag is the HEAD tag. This goes after the HTML tag. This is the Header tag. Several things can go in between the starting and ending HEAD tags but the main tag is the TITLE tag:
<HEAD>
<TITLE>Title goes here</TITLE>
</HEAD>
The TITLE appears at the very top of your web browser window (in the title bar). It's best to make the title brief and descriptive.
The next tag you will learn is the BODY tag. This tells the browser where the main part of the document is. There are many attributes to the BODY tag. Attributes are commands that tell the browser even more about how the document should be formatted, and they are typed in between the < and > in the starting tag. The syntax of the body tag is shown below:
<BODY BACKGROUND = "URL" or BGCOLOR = "HEX # or COLOR" LINK = "HEX # or COLOR" VLINK = "HEX # or COLOR" ALINK = "HEX # or COLOR" TEXT = "HEX # or COLOR">
(The Document goes here)
</BODY>Next, we have the BACKGROUND attribute. This tells the browser what the background picture should be. Or, if you just want the background to be a specific color, you use the BGCOLOR attribute. I won't try to explain HEX numbers here, but you can use a color's name (red, blue, powderblue, aquamarine, etc.) to specify a color. The LINK, VLINK, and ALINK attributes specify what colors should be used for links, links that the user has been to, and links that the user is clicking on (the 'user' is the person viewing the web page).
</BODY> tells the browser where the main section of the document ends.
There are two more tags you must learn to write HTML. If you had looked at my source code for this page, you would have seen a bunch of <P> and <BR> tags. These tell the browser when to insert line breaks and double line breaks (between paragraphs) into the HTML document. This is because the browser ignores any carriage returns you put into the source document. In other words, any time you press Enter, it doesn't show up on the web page. A BR tag just goes to the next line, while a P tag skips a line.
There are many ways you can format text. If you want to vary the size of text, you can use the H tag. This is called the Header tag. You can specify the size of the header with a number from 1 to 6, with 1 being the largest and 6 being the smallest. Example:
H1 header
H2 header
H3 header
.
.
.
This is an H6 header
If you look at my source code, you'll notice that no P or BR tags are required after a header, though they still began on different lines. This is because the closing header tag tells the browser to insert a line break after it. Another way you can make text large is to use the FONT tag. Following is usage of the FONT tag:<FONT SIZE = # COLOR = hex # or color name FACE = "font name(s)"> (Text to be formatted goes here.) </FONT>
SIZE can be any number. The default font size for an HTML document is 3. You can also tell the browser to use a smaller font or a larger than default font. Example:
<FONT SIZE = -/+# or #>
COLOR is the same as in the BGCOLOR, LINK, or TEXT attributes.
You can format text to be bold, italic, or underlined. To make text bold, use <B>Text</B>. For italic text, use <I>Text</I>.
Inline images are graphics (pictures) that are in an HTML document. Here is the basic HTML coding to insert images:
<IMG SRC = "filename.ext">
Filename.ext is the name of the image (ex: image.gif). The IMG tag tells the browser that you want to put an image into the document. The SRC tag specifies the location of the picture. If the picture is not in your directory, give the full URL, such as http://www.domain.com/image.gif. There are other attributes to the IMG tag:
<IMG SRC = "filename.ext" ALT="__" LENGTH = x WIDTH = x ALIGN = alignment HSPACE = x VSPACE = x BORDER = x>
Looks like a lot doesn't it! But it's really quite simple. You've already learned what IMG and SRC are. ALT specifies what people with text-based browsers (such as Lynx on UNIX systems) or with images disabled will see. You can put whatever you want here. LENGTH and WIDTH tell the browser to leave a space the specified length and width for the picture. This is measured in pixels. ALIGN has several attributes: left, right, top, and bottom.
This is how the image will be placed relating to the text that it is placed next to. VSPACE and HSPACE put the specified amount of space either on top & bottom or left & right of the image, according to which you put. You can also specify both. Both are measured in pixels. If the image is a hyperlink (which is explained later), you can specify what size border the image should have, or none at all. Here's an example:
<IMG SRC = "kiss.gif" ALT = "Kiss" LENGTH = 88 WIDTH = 31 ALIGN = left HSPACE = 5 VSPACE = 5 BORDER = 0>
Here's what it looks like viewed in a browser:
It isn't necessary to use all the above attributes and they don't have to appear in any specific order.
Hyperlinks are the easiest part of HTML. To make a link (the underlined text that you click on to go to another page), the coding is as follows:
<A HREF = "http://www.site.com/page.html">Name of link</A>
Helpful Links
Robyn's Road To Web Page Builder Resources
Free Screensavers, Animated Gifs, Backgrounds
Visit these sites for some serious design information:
Introduction to HTML and Web Design
Back to Main Page