12. Address Footers and E-Mail Links

Hey! Look at that, you've created a web page -- Now autograph it with a footer! Let people on the web send you an e-mail message right from your very web page!

A worthwhile feature of web pages is a "footer" at the bottom of a page. It provides us information about the author and the document, maybe there's the date it was last modified, as well as a means to send the author of the page or site a message by e-mail.

This is the place for use of the address tag which just stylizes a block of text in italic and offsets it onto 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:

• 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 in this tutorial. In composing your own style, take a look at other web pages for ideas. Imitation still is a very high form of flattery!

The HTML format for the address tag looks like:

   <address>
     Details Details Details Details Details 
     Details Details Details Details Details 
   </address>
			

All other HTML inside the address tagable so we can modify it with bold tags, line breaks, and a hypertext link tag:

HTML

<address> <b>Page Title</b><br /> Last Updated December, 2004<br /> Web Page by Chris Bland (chris@eazyhtml.com) <br /> <a href="http://www.eazyhtml.com/"> Eazy HTML</a><br /> </address>

Result

Page Title Last Updated December, 2004 Web Page by Chris Bland (chris@eazyhtml.com) Eazy HTML

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

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

<a href="mailto:chris@eazyhtml.com">send an e-mail to Chris</a>

When the text send an e-mail to Chris is clicked by the user, the web browser will open the mail client on screen where you can write a message and send it to me. What's more, you can also insert a default subject line for the e-mail message if you want, (NOTE: this may not work on all browsers):

   	<a href="mailto:chris@eazyhtml.com
   	?subject=Greetings from lesson 12 at EazyHTML">
   	send an e-mail to Chris</a>
			

TRY IT HERE,

NOW there is a lot more you can do by adding on to the mailto link. If you wanted to have the same message sent to more than one address, say the Prime Minister and the Deputy-Prime Minister, you would simply put the email addresses in separated by commas. (Note that in your HTML code this should be all one long line, I have broken it up so it displays better here):

	<a href="mailto:chris@eazyhtml.com,
	pm@parlimenthouse.gov.au,deputy-pm@parlimenthouse.gov.au
	?subject=Greetings from lesson 12 at EazyHTML">
	send an e-mail to Chris, the Prime Minister, and the 
	Deputy-Prime Minister</a>

OK, Let's say the Deputy-Prime Minister should only be carbon copied ("cc:") on this message. We can do this by adding another small string after the subject using cc= and then the email address. Note that the Subject= string and the cc= string are separated by a &:

	<a href="mailto:chris@eazyhtml.com,
	pm@parlimenthouse.gov.au,?subject=Greetings from lesson 
	12 at EazyHTML &cc=deputy-pm@parlimenthouse.gov.au">
	send an e-mail to Chris, the Prime Minister, and cc: the 
	Deputy-Prime Minister</a>

AND what's more, if you want a default message in the body as well then you add this extra bit into your code:

	<a href="mailto:chris@eazyhtml.com,
	pm@parlimenthouse.gov.au,?subject=Greetings from lesson 
	12 at EazyHTML &cc=deputy-pm@parlimenthouse.gov.au">
	&body=Thanks for teaching me how to do this Chris,
	send an e-mail to Chris, the Prime Minister, and cc: the 
	Deputy-Prime Minister</a>

NOW, let's go to our Space Tours Web Page example. Remember that you can have any text (or graphic) act as the hypertext mailto: link. So in the previous example, we would modify the HTML to have the internet address create the link for e-mail.

Its is time to add a footer to your HTML file

1. Open the HTML file, index.htm in your text editor.
2. At the bottom of your document (but above the </body></html> tags), add the following:

   
   <hr />
    <address>
     <b>EazyHTML 12. Address Footers and E-Mail Links</b><br />
     created by Chris Bland, <a href="mailto:chris@eazyhtml.com">
     chris@eazyhtml.com</a><br />
     Eazy HTML, <a href="http://www.eazyhtml.com/">Eazy HTML</a>
     <p><tt>last modified: December 13, 2004</tt></p>
    </address>
   <p><tt>URL: http://www.eazyhtml.com/pages/lesson12.htm</tt></p>
     

   NOTE: We've used several HTML tags that have been covered in previous lessons. Also note the extra <p> tags at the bottom; this makes sure the last line of text is always visible.

3. Save and Reload your work.

CHECK YOUR WORK
Here is an EXAMPLE of what your document should appear like, you can close the window once you have compared your work.

Practice
In your own HTML document, you may want to add your own footers and information/references using the address tag format.

Top of page | Previous Lesson| Lessons Index | Next Lesson