...a tutorial for creating web pages

XII. Address Footers and E-Mail Links

Objectives

• Insert a stylized footer at the bottom of a page
• Create a hypertext link that will send an e-mail message

Lesson

A worthwhile feature of web pages is a "footer" at the bottom of a page that provides information about the author and the document, maybe the last date it was modified, as well as a means to send the author a message by e-mail. This is the place for the address tag which just stylizes a block of text in italic and offsets it to a new line.

It is a good idea to make footers brief, informative, and consistent between your different web pages. Some useful information to include is:

• Title or subject of the current page
• Date it was created/updated
• Copyright if appropriate (or even meaningful?)
• Name and e-mail for the web page author
• Name and hypertext link to affiliation/organization

As examples, see the footers at the bottom of every web page on the F&CBP site. In composing your own style, take a look at other web pages for ideas. Look at what purpose they serve and information they contain. Imitation still is a very high form of flattery!

NOTE: All other HTML inside the address tag is legal, so you may modify it with bold tags, line breaks, and a hypertext link tag:

Now, suppose someone was reading your page and wanted to send you a comment on how nice your page looked. They would have to write down your e-mail address, launch another program, and send you a message. Wouldn't it be great if you could send email from your Web browser? Well, most web browsers now can!

The way to do this is to create a hypertext link with the mailto link in the URL (see lesson 9b for a refresher). Create an email hypertext link like this:

When the text send an e-mail to Alan is clicked, the web browser will bring up a screen where you can compose a message and send it to me. What's more, you can also insert a default subject line for the e-mail message:

But wait, there is more you can do by adding on to the mailto link. If you wanted to send the same message to more than one address, say the President and Vice-President, you just put the email addresses separated by commas (note that in your HTML code this should be one long line, it is broken up here so it displays better here):

Let's say the Vice-President should only be carbon copied

And lastly, you can try and insert a default message using the syntax body= and the text that should be placed in the body part of the email message window:

So who is this Alan Levine guy? Well, he is the one you have to thank for this tutorial. Although this tutorial has been heavily revised to make it more current, it was originally developed by Alan Levine, an instructional technologist at the Maricopa Community Colleges in Phoenix, Arizona.

Now, return to our Favorite Cars example. Note that you can have any text (or graphic) act as the hypertext link.

Now it is time to add a footer to your HTML file. For this example, we assume you are "John Doe" a staff writer for Favorite Cars.com (feel free to put your own information in place of what is below):

1. Open the HTML file, index.html in your text editor.
2. At the bottom of the document (but above the </body></html> tags), add the following:
<center>
<address>
<b>Favorite Cars</b><br>
Last Updated April, 29 2015<br>
Authored by: John Doe<br>
<a href="mailto:john.doe@mymail.Favorite Cars.com, ?subject=hi from lesson 12&cc=Danforth-Warden@TSP_DOC.ga &body=Hi there, I think this student deserves a dinner at your place. He's been working hard at it and I think he's getting it.">
(John Doe@mymail.Favorite Cars.com)</a><br>
<a href="http://www.Favorite%20Cars.com/">Favorite Cars.Com</a><br>
</address>
</center><br>


NOTE: You are using the <center>...</center> tag to center the footer on the bottom of the page. Also note that you should remember inserting a break tag (<br/>) at the bottom of the page to insure that the whole address line will be visible. There can be instances were the last line of a page may be only partially visible at the bottom of a page because the browser will end the page after the last line of characters. Therefore, add a break or use the paragraph tag (<p>...</p>) to insure a space before the end of the page.

3. Save and Reload the HTML file.

XIII. You Can Blockquote Me on That!

Objectives

• Insert a block of text that is indented from the body text
• Apply style tags within blockquote text

Lesson

In traditional writing, quotations of three or more sentences are set off from the main text as an indented block of text. HTML also includes this capability via the <blockquote>...</blockquote> tag:

Example

Blockquote Tag

<blockquote>
"This is a long quotation from a very famous person. Since it is so long and interesting, it should really be set off from the rest of the text. This indicates clearly that the quote is from someone other than the writer."
</blockquote>

Sample Result

---

NOTE: You can apply any and all HTML you have learned so far inside of the <blockquote> tags, such as in the following example:

Blockquote Tag II

<blockquote>
<h2>A Manifesto</h2>
This is a <b>long</b> quotation from a <a href="http://www.mcli.dist.maricopa.edu/alan/"> very famous person</a>.
Since it is so long and interesting, it should really be <pre> set off</pre>
from the rest of the text. <p>
<I>This indicates</I>:
<ul>
<li>clearly that
<li>the quote is from
<li>someone other than the writer.
</ul>
</blockquote>

Let's add a blockquote to the introduction of our Favorite Cars Web page. We will use blockquote from the Italian industrialist Ferruccio Lamborghini, founder of Lamborghini Motors.

1. Open the HTML file, index.html in your text editor.
2. Under the <h1>Favorite Cars</h1> heading, add the following:
<blockquote>
<b><I> "I would rather ride on the back of a mangy ass than drive a Ferrari." </I></b><br>
-- Ferruccio Lamborghini, during an argument with Enzo Ferrari
</blockquote>


NOTE: See how we have used a combination of the bold and italic style tags (see Lesson 6) to highlight the quote. The citation is forced to a new line with the <br> tag (see Lesson 5). See also how the <blockquote> tag forces a paragraph break above and below the block of text.

3. Save and Reload the HTML file.

XIV. Lumping vs. Splitting

Up to now you've made a single web page! But, now, my HTML-literate friend, it is time to transform your ordinary long-scrolling "page" into a logically connected "web" of information.

Objectives

• Transform a single web page to a series of linked pages
• Create a template for multiple web pages
• Build navigational features for connecting multiple web pages

Lesson

Are you a lumper or a splitter? Neither? Both?

For organizing information, sometimes it's better to "lump" things together; other times it is better to "split" them apart. Scrolling through long web pages is often tedious. Long, single web pages are less efficient when compare to a series of smaller pages. In many cases, you can identify logical points to "split" information into multiple web-pages. However, there is no magical formula, and opinions will vary. You should strike a balance between pages with breaks that parallel the content yet avoid forcing the reader to click through too many screens of options and sub-options before getting to the desired information. It also becomes important to build in hypertext links that help the reader navigate your information web as well as providing visual clues about their location within the web.

So far you have built one web page with a link to a shorter page. In lesson 9d you created a list of links that works as a table of contents by connecting them to named anchors for the different sections of the Favorite Cars Web lesson. These same divisions might be sensible breakpoints for splitting the single long page into sub-pages.

Up to now you have created a directory called HTML 101 that contains our two HTML files (index.html, the lesson, and camaro.html, a second web page). You also should have a second folder called "images" that contains your graphic image files. Contained within it there should be another folder named "thumbs", which contains the thumbnail images. Below is a representation of a traditional directory structure:

We will now split the single Favorite Cars Web file into a series of web pages, linked as shown in this schematic diagram. The entry point is a main index/cover page, index.html that has links that point to each of the other parts of our lesson:

• Introduction-[intro.html]
• Terminology-[term.html]
• Import Cars-[import]
• Domestic Cars-[domestic.html]
• International market-[inter.html]
• Research Project-[proj.html]

Each part of the lesson will link back to the index as well as to the preceding and following pages. Also note the two-way link between the import.html and domestic.html pages and their subordinates.

NOTE: To complete this lesson, you will have to create quite a few new files and do a fair amount of copy/pasting from the files you have been working on. Be sure that you are comfortable jumping around between the different application and document windows on your computer.

(Try to keep the URL's from getting too long, but also not shrinking them too short that they are cryptic). The first thing we will do is create the new index.html file, which will be the "cover" page for the Favorite Cars Web lesson:

1. First make a copy of the index.html file you have been working on and name it old.html or something like that. This is a very good habit when you start making major changes to your web pages!
2. Now open the original version of the index.html file in your text editor. This is our lesson that we have been working on to this point.
3. You are going to use the picture, the opening text/quotation, and the table of contents as the content for our title page. To do this, you will remove the sections that will be "split" out to other web pages. Delete the sections from Introduction to References, that is everything between:
<hr>
<h2><a name="intro" id="intro">Introduction</a></h2>
People everywhere are fascinated by exotic, sporty and luxurious cars they most likely cannot even afford. This fascination is driven by a combination of exorbitant cost, beauty of the design, rarity, brand recognition.
:
and
:
<center>
<address> <b>Favorite Cars</b><br> Last Updated April, 29 2015<br> Authored by: John Doe<br> <a href="mailto:John%20Doe@mymail.Favorite%20Cars.com">(John Doe@mymail.Favorite Cars.com)</a><br> <a href="http://www.Favorite%20Cars.com/">Favorite Cars.Com</a><br>
</address>
</center><br>
You may want to compare your HTML file to the sample to see how it should look at this point.
4. Now look at the section labeled "In this Lesson..." In our previous work, we used hypertext links to jump to a named anchor
   (e.g. <a name="term">..</a>)
   in the same document (see lesson 9a). Now we will modify these anchor links so that each jumps to another web page (which we will create below).

Compare your HTML file to this sample to see it should look at this point. NOTE: Be sure you understand the difference between a link written as:

The next thing we will have to do is create the individual files for the other parts of our lesson. It will be easier if we first create a template file that we can modify for each of the different pages.

1. In your text editor, create a new file called template.html
2. In this file, put the following HTML

HTML	Notes
<html> <head> <title>XXXXXXXX</title> </head> <body>	HEAD: In the head portion of each document, XXXXXXXX is the name of that section
<h4>Favorite Cars - <a href="index.html">INDEX</a> -- <a href="xxxx.html">BACK</a> -- <a href="xxxx.html">NEXT</a></h4>	NAVIGATION: At the top of each page we use a small header (<h4>..</h4>) to create navigation links. Index points back to the main cover page. Next and back link to the following and preceding pages. You will have to fill in the appropriate file name in for xxxx.html. Notice how this provides a common visual clue to each of our web pages.
<h2>XXXXXXXX</h2> : :	HEADER: Use a header 2 to put a title for that page.
<center> <address> <b>Favorite Cars</b><br> Last Updated April, 29 2015<br> Authored by: John Doe<br> <a href="mailto:John%20Doe@mymail.Favorite%20Cars.com">(John Doe@mymail.Favorite Cars.com)</a><br> <a href="http://www.Favorite%20Cars.com/">Favorite Cars.Com</a><br> </address> </center><br>	ADDRESS FOOTER: Note how the footer is now set up to indicate the name of the Web Site. It accompanies the author information, mailto link and link to the homepage (in this case the domain name).

3. Compare your progress with this sample of what your page should look like.
4. Now you should make 6 copies of the template file and make the appropriate changes to the template:

File Name	Section	Notes
intro.html	Introduction	As this is the first section, remove the line from the navigation section: <a href="xxxx.html">back</a>
term.html	Terminology
domestic.html	Domestic Cars
import.html	Import Cars
inter.html	International Market
project.html	Research Project	As this is the last section, remove the line from the navigation section: <a href="xxxx.html">next</a>

5. Now, open the old index.html file (that we re-named old.html) in your text editor. For each of the new files, you will have to copy the HTML that was underneath that section's <h2>...</h2> header and paste it into the new files you created in the previous step.

NOTE: The pages for Domestic Cars and Import Cars both include sub-sections that have <h3>...</h3> headers.

6. Finally, you will have to modify the link in the camaro.html file. Previously, it returned to a named anchor in the main lesson (the section for Domestic Cars) where now it should link to the domestic.html file. Open the camaro.html file in your text editor and edit the line to read:
<a href="domestic.html"><img src="images/left.gif" alt="** ">Return to <i>Favorite Cars</i></a>


Check Your Work

Compare your camaro.html page with this sample of how it should appear. Check all of the links to make sure that they are correct! If your pages are different from the sample or the hypertext\hypergraphic links do not work correctly, review the text you entered in the text editor. In this lesson you have created quite a few files and it is would have been very easy to make typographical errors. This is the first real test of whether or not you are paying attention to details and grasping the concept of what you are working on.

Review

Review topics for this lesson:

1. What are some advantages of short, multiple web pages over a single, long web page?
2. What would have happened if you would not have modified the hypertext link in the camaro.html file?
3. What were the navigational features we added to our lesson?

More Information

Stylistically, your web pages are more readable if the hypertext links are integrated into the text of the content. This becomes more important as you create more web pages that have hypertext to link them together. Compare the following examples :

Example

"Click Here" Links



"Integrated" Hypertext Links






The "Click here..." hypertext not only disrupts the flow of the text, but the link text "here" is not related to the intended item. As a suggestion, avoid writing any lines like "click here to return to the home page". Instead, write a clean link, e.g.
<a href="home.html">Home Page</a> --
the clicking is inherent in the use of the web browser. Make the content readable and choose the link words to clearly indicate that the link leads to something related.

Independent Practice

Take a look at the web page you are developing. Is it getting very long? Is there a logical division where you could "split" the page? Set up a cover/page index to your web pages and design appropriate links for navigating between them. Then design a template for your "sub-pages."

Now ask some friends/colleagues to view your pages. Do they prefer the "split" pages or the "lumped" one? Could they easily negotiate their way through your information?