Html Tutorial

Document Head

The document head describes the page contents on an internet site list. Nothing in the head will appear on the page! To begin the page, type <html> at the top of the page, and on the next line, type <head> Next, type <title> and then the page title and any description of the page, followed by </title> and </head>. Essentially, </> is used to close any html command given.

Document Body

The body of the web page contains all of the material seen on the page itself. Begin the body with the command <body>. Within the body tag, include information like background color, text color, link color, and background textures or pictures, should you decide to include them (again, this is not a good idea unless you have a fast connection speed). For example, typing

</p> </body> <body bgcolor="ffffff" text="ff0000" link="0000bb">

creates a page with a white background, red text, and blue links.

Start each paragraph with the tag <p>, then begin typing. Creating headlines is easy. To denote the size and importance of a headline, tag the headlines "h1", "h2", "h3", et cetera. Within the headline tag, you can choose the alignment of the headline; the default alignment is left, but you can also choose right, center, or justified. For example, type

</p> <h2 align="center"> to get a size h2 centered headline, and end the centered command with </align>. Denote the style of the headline by using <strong> or <em> (emphasis) instead of <bold> or<italics>. In fact, use "strong" or "em" in front of any word you wish to be embellished - after the headline or word, remove the style command by typing </strong> or </em>. For example, type </h2> <h2 align="right"><em> Llamas </em></align></h2>

to get a size h2, right justified, italicized headline reading "Llamas".

If you want to skip a line, the tag is <br>, for line break. If you want a horizontal line across the page, type <hr> for horizontal rule. This tag may be embellished to delineate the line thickness in pixels, how far across the page the line extends, and the alignment of the line. Another example coming:

<hr=4 width="75%" align="center"> produces a horizontal line four pixels high that is centered and covers 75% of the page width.

Lists can be of three types: definition lists <dl>, ordered lists <ol>, and unnumbered lists <ul>. A definition list sets up a listing of terms and their definitions. The listed terms are tagged <dt>, and their definitions are tagged <dd>. End the list by typing <dl>. Ordered lists and unnumbered lists differ in that ordered lists have numbered items, and unnumbered lists have bulleted items. In both cases, items are tagged < li> (for line item), and each list is ended with either </ol> or </ul>. Here are examples of first a definition list, then an ordered list and an unnumbered list:

</p> <h3> Definitions of Fruits</h3> <dl> <dt>apple </dt> <dd> a red fruit found in the Garden of Eden </dd> <dt>orange </dt> <dd> an orange citrus fruit that sponsors a college football bowl game </dd> <dt> banana<dd) a yellow fruit favored by some gorillas </dl> </dt> <dd><h3> Most popular fruits</h3> <ol> <li>apple </li> <li>orange </li> <li>banana </li> </ol> <h3> Fruits used in Fruit Salad</h3> <ul> <li>apples </li> <li>oranges </li> <li>bananas </li> </ul>

Links provide the connection between your homepage and its subpages, or even to other websites. The link command is <a href="link"> linked words </a>, where link is the file, web site, or email address the link will connect to, and linked words are the text that will be highlighted as the link connection. For example,

<a href="index.htm"> Return to homepage </a> is the command at the bottom of the page where "Return to homepage" is the link to this site's homepage, which is a file called "bertrand.html". To link to another web site entirely, type the full website name (called a URL, universal resource locator). To link to the Llama Web homepage to learn about llamas, type <a href="http://www/webcom.com/~degraham"> Llama Web Page </a> and your page will have "Llama Web Page" highlighted as a link. Another useful link is the "mailto" command, with which a website visitor can email the address listed by simply clicking on it. To execute this command, type mailto:email address inside of the href quotation marks instead of a link name. For example, to email John Smith at Harvard from your web page, type <a href="mailto:jsmith@harvard.edu"> John Smith </a> and "John Smith" will appear highlighted as though it were a link.

Part of the web's appeal is the ability to transmit pictures, sounds, and even video clips in addition to text. Unfortunately, these files should only be used with high speed connections - otherwise, visitors will spend three hours downloading your site simply because of the memory required to support the image and audio files. Should you decide to use any of these, however, the commands are simple. For an image, the tag is <IMG SRC="picture.file">, where "picture.file" is the name of the image with its extension. Most extensions will be either .jpeg or .gif. Also, within the image source tag, you may include height and width measurements in pixels (the default size is the size of the original picture). For example,

<img src="Africa.jpeg" height="100" width="90" align="center" alt="Africa"> will produce the African Map image 100 pixels high and 90 pixels wide, aligned in the center of the page. Images can also be aligned to the TOP (the top of the image will be aligned with the first line of text), or by default to the bottom of the text they are next to. Images can be used as a background by typing <background="filename.gif"> inside the body tag at the top of the page. With all of your images, include the "ALT" command inside the image source tag; this is imperative as visitors whose internet capabilities do not support graphics will appreciate the label for the picture that will not appear on their screens. Whatever you write after "ALT=" will be the label that appears in place of the graphic.

A sound file is used just like a link. For example,

<a href="llamas.aud">Llamas</a> will play a llama sound when "Llamas" is clicked. If you wish to attach a sound file to an image, substitute <IMG SRC="llamas.gif"align=center>> for "Llamas" in the sound tag to hear a llama sound when the llama picture is clicked.

With this introduction to html, you should have a fairly broad spectrum of commands to create a page specifically tailored to your ideas and capabilities.

Return to homepage