ch53.htm

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

<PRE><FONT COLOR="#0066FF">&lt;A HREF=&quot;c:\html\home\home.htm&quot;&gt;

&lt;A HREF=&quot;\usr\tparker\html_source\home.html&quot;&gt;

</FONT></PRE>

<P>Relative path references are from the current location and can use valid directory

movement commands. These are valid examples of relative paths in a link:</P>

<PRE><FONT COLOR="#0066FF">&lt;A HREF=&quot;..\home.htm&quot;&gt;

&lt;A HREF=&quot;../../html_source/home.html&quot;&gt;

</FONT></PRE>

<P>A link to another URL is much the same as a link to a document, except that you

give the URL after <TT>HREF</TT>. For example, this is a link to the Yahoo! home

page:</P>

<PRE><FONT COLOR="#0066FF">&lt;A HREF=&quot;http://www.yahoo.com&quot;&gt;Go to Yahoo!&lt;/A&gt;

</FONT></PRE>

<P>You can have as many links in your documents as you want. It helps to make the

link description as useful as possible so that users don't end up at pages or sites

they didn't want to access. If you are linking to other sites, you should occasionally

check to make sure that the link is still valid. A lot of home pages change location

or drop off the Web as time goes by, so verify links to avoid annoyed users.

<H3 ALIGN="CENTER"><A NAME="Heading15<FONT COLOR="#000077">Lists</FONT></H3>

<P>HTML lets you use a few different formats of lists, such as ordered, numbered,

labeled, and bulleted. The lists are surrounded by tags such as <TT>&lt;OL&gt;</TT>

and <TT>&lt;/OL&gt;</TT> (for ordered list) or <TT>&lt;MENU&gt;</TT> and <TT>&lt;/MENU&gt;</TT>

(for menus). Each item in the list has its own tag, <TT>&lt;LI&gt;</TT> or something

similar, to separate it from other items. A few special types of list tags are for

handling glossaries and similar purposes, but we'll ignore them in this HTML overview.</P>

<P>Here's an example of a simple list using the <TT>&lt;UL&gt;</TT> tags for unordered

lists:</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 a list of some books I have written. &lt;/H1&gt;

Here are the books I wrote on last summer's vacation.

&lt;UL&gt;

&lt;LI&gt; Mosquitos Bug me

&lt;LI&gt; Fun with Bears

&lt;LI&gt; What to eat when you have no food

&lt;LI&gt; Why is it raining on my vacation?

&lt;LI&gt; Getting lost in three easy lessons

&lt;/LI&gt;

&lt;/UL&gt;

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<P>An unordered list is like a normal list, except that it has bullets and is not

marked by any special numbering scheme. This code is shown in a browser in Figure

53.7, in which you can see the way the bullets line up and the list is presented.

<H6></H6>

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

53.7.</FONT></A><FONT COLOR="#000077"><I> </I></FONT><I>An unordered list in HTML.</I></P>

<P>The same code could be written with <TT>&lt;OL&gt;</TT> and <TT>&lt;/OL&gt;</TT>

tags for an ordered list. An ordered list has numbers in front of the items, as shown

in Figure 53.8. This is the same code as shown previously, except that we changed

the <TT>&lt;UL&gt;</TT> tags to <TT>&lt;OL&gt;</TT> tags.

<H6></H6>

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

53.8.</FONT></A><FONT COLOR="#000077"> </FONT><I>An ordered list uses numbers rather

than bullets.</I>

<H3 ALIGN="CENTER"><A NAME="Heading18<FONT COLOR="#000077">Changing Character

Appearances</FONT></H3>

<P>Character tags can be used to change the appearance of text on the screen. There

are a few character tags in HTML, including styles (such as italics and boldface)

and logical (which indicate emphasis, code, or other types of text). Forcing character

type changes with style tags is not usually a good idea because different browsers

might not present the text the way you want to. You can use them, however, if you

know that your server will be used only with a particular type of browser and if

you know how the text will look on that browser.</P>

<P>Logical tags are a much better choice because browsers can implement them across

platforms. They let the individual browser decide how italics, for example, will

look. For that reason, we'll concentrate on logical tags; you should use them when

you can. Eight logical tags are in general use:



<UL>

	<LI><TT>&lt;CITE&gt;</TT> a citation

	<P>

	<LI><TT>&lt;CODE&gt;</TT> code sample (Courier font)

	<P>

	<LI><TT>&lt;DFN&gt;</TT> a definition

	<P>

	<LI><TT>&lt;EM&gt;</TT> emphasis, usually italics

	<P>

	<LI><TT>&lt;KBD&gt;</TT> keyboard input to be typed by the user

	<P>

	<LI><TT>&lt;SAMP&gt;</TT> sample text, much like <TT>&lt;CODE&gt;</TT>

	<P>

	<LI><TT>&lt;STRONG&gt;</TT> strong emphasis, usually boldface

	<P>

	<LI><TT>&lt;VAR&gt;</TT> a variable name to be displayed as italics or underlined

	(usually in code)

</UL>



<P>The following code shows an example of the use of some of these styles, and the

resultant Web page is shown in Figure 53.9.</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 a sample entry that should be &lt;EM&gt; emphasized using EM&lt;/EM&gt; and with

the &lt;STRONG&gt; use of Strong &lt;/STRONG&gt; emphasis.

&lt;/P&gt;

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<P>As you can see, this browser (Mosaic) interprets the <TT>&lt;EM&gt;</TT> tag to

be italics and the <TT>&lt;STRONG&gt;</TT> tag to be bold. Most browsers perform

this conversion, but other tags might look different with other browsers.</P>

<P>If you want to force character tags, you can do so with <TT>&lt;B&gt;</TT> and

<TT>&lt;/B&gt;</TT> for boldface, <TT>&lt;I&gt;</TT> and <TT>&lt;/I&gt;</TT> for

italics, and <TT>&lt;TT&gt;</TT> and <TT>&lt;/TT&gt;</TT> for typewriter monospaced

font (code).

<H6></H6>

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

53.9.</FONT></A><FONT COLOR="#000077"> </FONT><I>The use of logical character tags

changes the way text appears.</I>

<H3 ALIGN="CENTER"><A NAME="Heading20<FONT COLOR="#000077">A Few Other Tags</FONT></H3>

<H3 ALIGN="CENTER"><FONT COLOR="#000077"></FONT></H3>

<P>To wrap up, a few other tags are useful in general Web page production. The first

is the <TT>&lt;PRE&gt;</TT> tag, which means the contents between the tags are preformatted

and should be left alone. Between the <TT>&lt;PRE&gt;</TT> and the <TT>&lt;/PRE&gt;</TT>,

whitespace is important. Use of the <TT>&lt;PRE&gt;</TT> tag lets you preformat tables

or other content exactly as you want it (subject to wrapping rules in the browser).

For example, the following code has a <TT>PRE</TT> section in it:</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 a sample entry that should be &lt;EM&gt; emphasized using EM&lt;/EM&gt; and with

the &lt;STRONG&gt; use of Strong &lt;/STRONG&gt; emphasis. &lt;/P&gt;

&lt;PRE&gt;

This is preformatted

     text that should appear

                     exactly like this in the Browser

&lt;/PRE&gt;



&lt;/BODY&gt;



&lt;/HTML&gt;

</FONT></PRE>

<P>As you can see in Figure 53.10, the spacing of the <TT>PRE</TT> material is retained,

and even the text font is the same as the source (Courier).

<H6></H6>

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

53.10.</FONT></A><FONT COLOR="#000077"> </FONT><I>The <TT>PRE</TT> tags let you preformat

text.</I></P>

<P>Another tag that is handy is simple. The <TT>&lt;HR&gt;</TT> tag creates a horizontal

rule across the page. For example, the preceding code can be enhanced with a couple

of <TT>&lt;HR&gt;</TT> tags like this:</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 a sample entry that should be &lt;EM&gt; emphasized using EM&lt;/EM&gt; and with

the &lt;STRONG&gt; use of Strong &lt;/STRONG&gt; emphasis. &lt;/P&gt;

&lt;HR&gt;

&lt;PRE&gt;

This is preformatted

    text that should appear

            exactly like this in the Browser

&lt;/PRE&gt; &lt;HR&gt;

&lt;/P&gt;

&lt;/BODY&gt;

&lt;/HTML&gt;

</FONT></PRE>

<P>As you can see in Figure 53.11, two horizontal rules now appear on the page. The

exact appearance of the rule might change with browsers, but the overall effect is

to put a divider on the page.

<H6></H6>

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

53.11.</FONT></A><FONT COLOR="#000077"><I> </I></FONT><I>Use <TT>&lt;HR&gt;</TT>

to draw horizontal rules across the page.</I>

<H3 ALIGN="CENTER"><A NAME="Heading23<FONT COLOR="#000077">Summary</FONT></H3>

<H3 ALIGN="CENTER"><FONT COLOR="#000077"></FONT></H3>

<P>Many more HTML tags are available to you, but they are used for special items

such as tables, graphics, and other add-ins. As we mentioned at the start, this chapter

is designed to just give you a quick introduction to HTML, not to teach you everything

there is to know. As you have seen, though, HTML is a fairly simple language to work

with, and you should have a lot of fun designing your own Web pages.









</td>
</tr>
</table>
<!-- begin footer information -->


</body></html>