Creating a Home Page

NetWorking With Linux OS

Home About this page Info Tools

Creating a Homepage

Creating a simple homepage: More formatting commands Logical styles: Physical styles Lists Unnumbered and numbered Lists Description lists Other commands Clickable images/image maps For more information

About the World Wide Web (WWW)

The World Wide Web (otherwise known as WWW or "the Web") is a network of hypertext documents linked to each other across the Internet. These documents are written in a special language known as HyperText Markup Language (HTML). This is a set of commands that tells a specific browser, such as Mosaic or Netscape, how to display a document. The document itself is only text, but may contain references to graphic files and links to other documents, FTP sites, gopher sites, or other WWW servers.

Apache web server is a free web server that is preinstalled in Slackware distribution. What you need is just to create an index.html file in your /var/lib/httpd/htdocs/ directory.

Creating a simple home page:

Create a title for your home page with the following line added to your index.html file:

Notice that commands all start with the < symbol and end with the > symbol (tag symbol). Also, the commands are not case sensitive, i.e. the command <title> and the command <TITLE> are equivalent. To end a command, the / symbol is inserted before the command (i.e. </TITLE> marks the ending of your title).

Now add the following line to your index.html file:

<h1>This is a level-1 heading</h1>

Save your document now, select Open URL from Netscape, and open your document. The URL that you should use is http://localhost/index.html. You should see the title of your home page at the very top of the window. The line This is a level-1 heading should be in large letters across the top of the page. If the changes did not affect your page, then select the Reload option from the View menu in Netscape. HTML supports six levels of text size. This is controlled by the <h#> command. Valid choices are <h1> (the largest text size) through <h6> (the smallest text size).

Go back to your text source, and enter the following:

<h3> This is my very first home page.

I am a newbie.<br>

Hello World! </h3>

Then save your file again and select Reload from your WWW browser. Notice that the first two additions appear on the same line, while Hello World! appears on its own line. This is because HTML displays a new line until it reaches the end of the current line, sees the break, <br>, command, or sees the end of paragraph, <p>, command. The end of paragraph command, <p>, should only be used with text paragraphs, not within headers.

Note that HTML "crunches" blank space. In other words, all text is single-spaced no matter how many blank spaces are between words. If you have text where you want to preserve the spacing, or text that is already formatted correctly, use the <pre> command. For example, this table will be displayed as shown:

<pre>
AGE	AVERAGE HEIGHT
5 years	7 meters
10 years	9 meters
</pre>

Now let's insert a picture. Netscape can display GIF and JPG files.

Add the following line to your index.html file:

Again, go to your browser and select Reload. This will display the graphic in your document, and place the phrase Look at me! next to the graphic. You can also try the line

which will display the text aligned with the top of the graphic instead of the bottom. The option ALIGN=middle will display the text aligned with the center of the image. The alt="Alternate Text" says that if the WWW browser cannot display graphics, insert the alternate text instead.

Another way to insert a graphic is to have the picture open as a separate document when the link is activated. Opening an image as a separate document speeds up document loading because the server does not need to load the image file (image files are often very large) unless you want to see the picture. To do this, delete the above line, and replace it with the line:

Clicking on the link causes an external viewer, such as vi or JPEG View, to open and display your graphic. The exact external viewer user varies with each platform, however most will handle GIF, TIFF, and JPEG formats. The <A HREF=... > command creates the link to the external image. The complete syntax for the <A> command is:

<A HREF="scheme://host.domain[:port]/path/filename">Clickable Text</A>

where scheme is one of the following:

file	for files and anonymous ftp sites
http	another World Wide Web server
gopher	a Gopher server
WAIS	a WAIS server
news	a link to a newsgroup
telnet	telnet to another machine

This command creates a link to the named file or server. This link will be travelled whenever the text inserted in the Clickable Text section is selected.

For example, insert the line:

<A HREF="http://www.linux.org/">Go to the Linux organization</A>

You can also link to a specific section within a single document, or to a specific section in a different document. Do this by creating a named anchor. For example, the line

This is the <A NAME="mylink"> place that I want to link to. </a>

creates the named anchor mylink. To link to a named anchor, include the anchor name prefixed by a hash mark # in your <A HREF> definition. For example, to jump to the above anchor, use the command:

Look at the <A HREF="document.html#mylink"><link></a>

Note that you only need the document.html specification if your named anchor is in another document. Omit the document name if the link is within the same file.

Also notice the &lt and the &gt commands in the above command. These two commands place < and > symbols around the word link. It is not possible to directly display these two symbols because the web browser would normally interpret anything in between as a command. The ampersand & and double quote " symbols also have special meanings in HTML, and therefore cannot be directly entered as text. For example, the following line

<pre>

< > & "

</pre>

would display the following:

< > & "

Unlike other HTML tags, the & commands ARE case sensitive. i.e. < is not the same as &LT;

To get a complete list of escape characters and special characters, select Open URL under the File menu, and enter http://www.w3.org/hypertext/WWW/MarkUp/Entities.html. This will cause your browser to open the Entities page at www.w3.org.

More formatting commands

There are two sets of formatting commands used in HTML. Logical styles format text according to meaning, while Physical styles force a certain format. For example, the <EM> tag says that the following words should be emphasized, and allows the local WWW client to figure out how to display the text. This is a logical style. The <B> tag says that the following words should be in bold text. This is a physical style. The advantages of using logical styles is that it allows the end user to choose an individual set of styles that he/she prefers. For example, one person may want the <EM> style to be set to bold text, while another person may prefer the emphasis style to be displayed in red italics. Logical styles allow for this customization.

To use these styles, start with <tag>, where tag is the desired style. Enter the text to be tagged, and end with </tag>.

Logical styles:

<ADDRESS>	Specifies the author of a document and provide an email address
<BLOCKQUOTE>	Used to include a quotation in a separate indented block.
<DFN>	Used for a word being defined
<EM>	Emphasis
<CITE>	A citation. (for book titles,films, magazines, etc.)
<CODE>	For sections of computer code
<KBD>	For user keyboard entry (what you want the user to type)
<SAMP>	For computer status messages (error messages,etc.)
<STRONG>	For strong emphasis
<VAR>	A variable (i.e. name_of_file)

Physical styles

<B>	Bold text
<I>	Italic text
<TT>	Typewriter text (fixed-width font)

Note that some browsers support nested format tags (i.e. <b><i> my text </b></i>) but some browsers only use the innermost tag. Avoid nesting tags if possible.

Lists

The HTML language supports unnumbered, numbered, and description lists. The way these lists are displayed varies with the individual WWW browser. Each item in any of the lists can be arbitrarily long, and can contain multiple paragraphs. Lists also can be nested, although some browsers do not display successive indentation of nested lists.

Unnumbered and numbered Lists

To create an unnumbered list or a numbered list (otherwise known as ordered list):

Start with the <UL> tag for an unnumbered list, and the <OL> tag for a numbered list.

Use the <LI> tag before each list item and the </a> tag following each list item.

Close the list with the </UL> or </OL> tag.

The following example creates an unnumbered list with two items, leading to the NCSA Mosaic home page and the U-M software archives:

<H3> Here are some network resources to explore: </H3>

<UL>

<LI> <a href="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html">The NCSA Mosaic home page</a>

<LI> The U-M <a href="/afs/umich.edu/group/itd/archive/">ARCHIVE</a>

</UL>

Description lists

A description list is a list of titles, each with an attached description. To create a description list:

Start the list with the <DL> tag.

Use the <DT> tag to mark the description title.

Use the <DD> command to enter the description of the title.

End the list with the </DL> command.

The following example:

<DL>

<DT> This would be the first item in the list

<DD> A short (or long) description of the first item.

<DT> This would be the second item in the list

<DD> A description of the second item.

</DL>

would create a list that looks like:

This would be the first item in the list

A short (or long) description of the first item.

This would be the second item in the list

A description of the second item.

Other commands

<BR>	The break command goes to a new line.
<P>	The end of paragraph command goes to the next paragraph.
<HR>	Produces a horizontal rule line across the browser window.
<LISTING>	Used for listing code segments. Tags are displayed as-is, and not processed. The text is also displayed in a fixed-width font.
<! text..... >	Anything inside here is a comment and is not displayed.

Clickable images/image maps

It is possible to make images you put into your home page clickable. For example, you can create a single image with several areas designated as a "hot spot" which will take you to another link on the map. To do this, first create your image. Then, create a map file (usually given the same filename as the image, but with a .map extension). Once the map is created, you will need to insert the image and reference into the home page, like this: