ch53.htm

linux-unix130.linux.and.unix.ebooks130 linux and unix ebookslinuxLearning Linux - Collection of 12 E

the document as HTML. This is a tag called <TT>&lt;HTML&gt;</TT> that is used by

the browser to indicate the start of HTML instructions. Here's a sample chunk of

code from a Web page:</P>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt; This is my Web Page! Welcome! &lt;/TITLE&gt;&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt; This is the first heading on my page. &lt;/H1&gt;

This is a bunch of text that is written on my home page.  I hope you like it.

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<P>You can see that the first and last tags, <TT>&lt;HTML&gt;</TT> and <TT>&lt;/HTML&gt;</TT>,

mark the start and end of the HTML code. The slash in the second tag indicates the

end of the structure element. These tags should be at the start and end of each HTML

document you write. The <TT>&lt;HEAD&gt;</TT> and <TT>&lt;/HEAD&gt;</TT> tags mark

a prologue to the file and are often used for just the title and key words. Only

a few tags are allowed inside <TT>&lt;HEAD&gt;</TT> tags. One of them is the <TT>&lt;TITLE&gt;</TT>

and <TT>&lt;/TITLE&gt;</TT> pair, which gives the title of the document. The <TT>&lt;BODY&gt;</TT>

and <TT>&lt;/BODY&gt;</TT> tags mark the start and end of the document's main body.

The <TT>&lt;H1&gt;</TT> and <TT>&lt;/H1&gt;</TT> tags are for a heading on the page.</P>

<P>This code can be read by any browser. The result 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 is shown. The title is used at the top of the browser to show

the page you are logged into. This acts as an identifier.

<H6></H6>

<P><A NAME="Heading8<A HREF="../art/53/53lnx02.jpg"><FONT COLOR="#000077">FIGURE

53.2.</FONT></A><FONT COLOR="#000077"> </FONT><I>The sample HTML code displayed under

Mosaic.</I></P>

<P>The format of the code shown previously is line-by-line, but it is handled this

way just for readability. You can write everything on one long line, if you want,

because HTML ignores whitespace unless told otherwise. For debugging and rereading

purposes, however, it is helpful to keep the code cleanly organized.</P>

<P>A few other comments about the tags we've used. The <TT>&lt;TITLE&gt;</TT> tag

always goes inside the header tags (<TT>&lt;HEAD&gt;</TT> and <TT>&lt;/HEAD&gt;</TT>)

to describe the contents of the page. You should have only a single title for your

page. You can't have other tags inside the head tags. It is useful to pick a short,

descriptive title for your documents so that others who see it will know what they

are accessing.</P>

<P>The <TT>&lt;BODY&gt;</TT> and <TT>&lt;/BODY&gt;</TT> tags are used to enclose

the main contents of your Web page, and you will probably have only one pair of them.

All text and contents (links, graphics, tables, and so on) are enclosed between body

tags.</P>

<P>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 shown previously is <TT>&lt;H1&gt;</TT>,

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:</P>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt; This is my Web Page! Welcome! &lt;/TITLE&gt;&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt; This is an H1. &lt;/H1&gt;

This is a bunch of text.

&lt;H2&gt; This is an H2 &lt;/H2&gt;

This is more text.

&lt;H3&gt; This is an H3 &lt;/H3&gt;

This is text about the H3 heading.

&lt;H3&gt; This is another H3 &lt;/H3&gt;

Here's more text about the H3 heading.

&lt;H2&gt; This is yet another H2 &lt;/H2&gt;

Text to do with H2 goes here.

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<P>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 difference lets you separate your pages into logical categories,

with a heading or subheading for each category. 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.

<H6></H6>

<P><A NAME="Heading9<A HREF="../art/53/53lnx03.jpg"><FONT COLOR="#000077">FIGURE

53.3.</FONT></A><FONT COLOR="#000077"> </FONT><I>Headings with different tags have

different appearances.</I></P>

<P>What about paragraphs? You can handle paragraphs in several ways, and the rules

have changed with each version of HTML. The easiest approach, though, is to use the

<TT>&lt;P&gt;</TT> and <TT>&lt;/P&gt;</TT> tags to mark each individual paragraph.

For example, this code uses three paragraph tag pairs:</P>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt; This is my Web Page! Welcome! &lt;/TITLE&gt;&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt; This is an H1. &lt;/H1&gt;

&lt;P&gt; This is the first paragraph.  It is a really interesting paragraph and

should be read several times because of its content. &lt;/P&gt;

&lt;P&gt; Another paragraph.  It's not quite as exciting as the first, but then

it's hard to write really exciting paragraphs this late at night. &lt;/P&gt;

&lt;P&gt; The closing paragraph has to be strong to make you feel good.  Oh well,

we can't always meet your expectations, can we? &lt;/P&gt;

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<P>The appearance of this code in the browser is shown in Figure 53.4. Note how each

paragraph is distinct and has some whitespace between it and the next paragraph.

What happens if you leave out the <TT>&lt;P&gt;</TT> and <TT>&lt;/P&gt;</TT> tags?

Because browsers ignore whitespace, including carriage returns, the text is run together

as shown in Figure 53.5. So you should use <TT>&lt;P&gt;</TT> and <TT>&lt;/P&gt;</TT>

tags to separate paragraphs on your page. Remember that putting lots of blank lines

between paragraphs in your HTML code doesn't matter. Browsers will ignore them and

run everything together.

<H6></H6>

<P><A NAME="Heading10<A HREF="../art/53/53lnx04.jpg"><FONT COLOR="#000077">FIGURE

53.4.</FONT></A><FONT COLOR="#000077"> </FONT><I>The use of paragraph tags separates

text into discrete chunks with whitespace between them.</I>



<DL>

	<DT></DT>

</DL>





<DL>

	<DD>

<HR>

<A NAME="Heading11<FONT COLOR="#000077"><B>NOTE:</B> </FONT>Strictly speaking,

	you don't need <TT>&lt;/P&gt;</TT> tags to indicate the end of a paragraph because

	another <TT>&lt;P&gt;</TT> would indicate the start of a new one. The <TT>&lt;P&gt;</TT>

	tag is one example of an open-ended tag, one that doesn't need a closure. It is good

	programming practice, however, to close the pairs. 

<HR>



</DL>



<H6></H6>

<P><A NAME="Heading12<A HREF="../art/53/53lnx05.jpg"><FONT COLOR="#000077">FIGURE

53.5.</FONT></A><FONT COLOR="#000077"> </FONT><I>Without paragraph tags, all the

text is run together.</I></P>

<P>What about comments in HTML code? You might want to embed some comments to yourself

about who wrote the code, what it does, when you did it, and so on. The way to write

a comment into HTML code is like this:</P>

<PRE><FONT COLOR="#0066FF">&lt;! - This is a comment -&gt;

</FONT></PRE>

<P>The comment has angle brackets around it, an exclamation mark as the first character,

and dashes before and after the comment text. Here's an example of some HTML code

with comments in it:</P>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;

&lt;!- Written 12/12/95 by TJP, v 1.23-&gt;

&lt;HEAD&gt;

&lt;TITLE&gt; This is my Web Page! Welcome! &lt;/TITLE&gt;&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt; This is an H1. &lt;/H1&gt;

&lt;!- This section is about the important first para tag -&gt;

&lt;P&gt; This is the first paragraph. &lt;/P&gt;

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<H3 ALIGN="CENTER"><A NAME="Heading13<FONT COLOR="#000077">Links</FONT></H3>

<P>Links to other places and documents are an important part of the World Wide Web.

Links are quite easy to write in HTML. They begin with the link tag <TT>&lt;A&gt;</TT>

and end with <TT>&lt;/A&gt;</TT>. This is an example of an anchor tag, so named because

it creates an anchor for links in your document.</P>

<P>The <TT>&lt;A&gt;</TT> tag is different from the tags we've seen so far in that

it has some more text inside the angle brackets. Here's a sample link in a document:</P>

<PRE><FONT COLOR="#0066FF">&lt;A HREF=&quot;page_2.html&quot;&gt;Go to Page 2&lt;/A&gt;

</FONT></PRE>

<P>In this example, the text between the two tags is what is displayed on-screen,

so the user would see the text &quot;Go to Page 2&quot; underlined and usually in

another color to indicate that it is a link. If the user clicks on the link, the

<TT>HREF</TT> reference in the <TT>&lt;A&gt;</TT> tag is read and the document <TT>page_2.html</TT>

is read in to the browser. <TT>HREF</TT>, meaning hypertext reference, gives the

name of a file or a URL that the link points to.</P>

<P>You can use links either in the body of text or as a separate item on a menu,

for example. The following code shows a link in a paragraph and one on a line by

itself:</P>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt; This is my Web Page! Welcome! &lt;/TITLE&gt;&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt; This is the first heading on my page. &lt;/H1&gt;

&lt;P&gt;This is a bunch of text that is written on my home page.  I hope you like it. 

If you would like to know more about me, choose &lt;A HREF=&quot;about_me.html&quot;&gt;Tell

me more about You&lt;/A&gt; and I'll tout my virtues for you. &lt;/P&gt;

&lt;P&gt;&lt;A HREF=&quot;biblio.html&quot;&gt;See Bibliography&lt;/A&gt;

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<P>When displayed in a browser, this code looks as shown in Figure 53.6. Each link

is underlined in the text to show that it is a link. (Some browsers change the color

of the link text, and others do different things as well.)

<H6></H6>

<P><A NAME="Heading14<A HREF="../art/53/53lnx06.jpg"><FONT COLOR="#000077">FIGURE

53.6.</FONT></A><FONT COLOR="#000077"> </FONT><I>A document with two links in it.</I></P>

<P>When you are specifying a link to a filename, you must be sure to specify the

filename properly. You can give either relative or absolute paths. Absolute simply

means you give the full pathname, whereas relative means you specify from the current

document's location. For example, these are absolute pathnames (the first in DOS

format, the second in Linux format) in a link:</P>