)
Figure 53.1. A simple example of HTML code.
| Previous | Table of Contents | Next |
HTML code is pretty straightforward, as you will see. For the most part it consists of a bunch of “tags” which describe the beginning and ending of a structure element (such as a heading, paragraph, picture, table, and so on). For each element, there should be a beginning and ending tag. A sample HTML page is shown in Figure 53.1. Don’t worry about understanding it all now, as you will see this code built up in this chapter. For now, you need only see that there are beginning and ending tags around each element in the structure. (All of the screen shots used in this chapter are taken from either a Windows 95 or Windows 3.11 machine accessing the Linux server on which we are writing the HTML code through an Ethernet network. The browser is NCSA’s Mosaic.)
Figure 53.1. A simple example of HTML code.
A couple of important things to know about tags as we get started: They are case insensitive (so you don’t have to be careful about matching case) and they are almost always paired into beginning and ending tags. The most common errors on Web pages are mismatched or unterminated tags. In many cases, the Web page will appear OK, but there may be severe formatting problems. A quick scan of your HTML code will help solve these types of problems.
Tip:
Not all HTML tags have a beginning and ending tag. A few are single ended, meaning they usually have just a beginning. Some others are called containers, because they hold extra information. These are not always tagged at both ends.
Tags are written in angle brackets. These brackets signal to the browser that an HTML instruction is enclosed. A sample HTML code element looks like this:
<start_tag_name> text text text <end_tag_name>
where <start_tag_name> and <end_tag_name> are the starting and ending tags for the text in the middle. The type of tag describes how the text will look. For example, if they are heading tags, the text will appear larger than normal body text and may be bolded or highlighted in some way.
How do you write HTML code? There are several ways to do it. The easiest is to use any ASCII editor. Make sure you don’t save HTML documents in a proprietary format like Word documents, as a Web browser can’t understand anything but ASCII. Some specialized HTML editors are available which feature pull-down lists of tags and preview screens. These can be handy when you are working with very large Web pages, but for most people a simple editor is more than enough to get started with.
An HTML document usually begins with an instruction that identifies the document as HTML. This is a tag called <HTML> and is used by the browser to indicate the start of HTML instructions. Here’s a sample chunk of code from a Web page:
<HTML> <HEAD> <TITLE> This is my Web Page! Welcome! </TITLE></HEAD> <BODY> <H1> This is the first heading on my page. </H1> This is a bunch of text that is written on my home page. I hope you like it. </BODY> </HTML>
You can see that the first and last tags, <HTML> and </HTML>, mark the start and end of the HTML code. The slash in the second tag means the end of the structure element. These tags should be at the start and end of each HTML document you write. The <HEAD> and </HEAD> tags mark a prologue to the file and are often used for the title and key words that show up under Web search tools. There are only a few tags that are allowed inside <HEAD> tags. <TITLE> and </TITLE> give the title of the document. The <BODY> and </BODY> tags mark the start and end of the document’s main body. The<H1> and</H1> tags are for a heading on the page.
This code can be read by any browser and is shown in Figure 53.2. As you can see, the title material is not displayed on the page itself, only the material between the body tags. The title is used at the top of the browser to show the page you are logged into. This acts as an identifier.
)
Figure 53.2. The sample HTML code displayed under Internet Explorer.
The format of the code shown above is line-by-line, but this is just for readability. You can write everything on one long line, if you want, as HTML ignores whitespace unless told otherwise. However, for debugging and rereading purposes, it is handy to keep the code cleanly organized.
Here are a few more comments about the tags we’ve used. The <TITLE> tag always goes inside the header tags (<HEAD> and </HEAD>) to describe the contents of the page. You should have only a single title for your page. There can’t be other tags inside the head tags. It is useful to pick a short, descriptive title for your documents so others who see it will know what they are accessing.
The <BODY> and </BODY> tags are used to enclose the main contents of your Web page, and there will probably be only one pair of them. All text and contents (links, graphics, tables, and so on) are enclosed between body tags.
There are several levels of heading tags, each of which is like a subheading of the one higher up. The heading we used in the code above is <H1>, which is the highest heading level. You can structure your document with many heading levels, if you want. For example, you could write this bit of code:
<HTML> <HEAD> <TITLE> This is my Web Page! Welcome! </TITLE></HEAD> <BODY> <H1> This is an H1. </H1> This is a bunch of text. <H2> This is an H2 </H2> This is more text. <H3> This is an H3 </H3> This is text about the H3 heading. <H3> This is another H3 </H3> Here’s more text about the H3 heading. <H2> This is yet another H2 </H2> Text to do with H2 goes here. </BODY> </HTML>
This code is shown in a browser in Figure 53.3. As you can see, the levels of heading are slightly different, with the higher headings (lower numbers) more distinctive and bolder. This lets you separate your pages into logical categories, with a heading or subheading for each. You can use these headings just as we do when writing a book: H1s can contain H2s, H3s go below H2s, and so on. There are no rules about mixing headings (you could use only H3s, for example), but common sense usually dictates how to structure your page.
)
Figure 53.3. Headings with different tags have different appearances.
| Previous | Table of Contents | Next |
){kind=link}
){kind=link}
){kind=link}