Slightly More Involved HTML Coding

Comments

Look at the source code for this paragraph, and note the comments that follow it. A comment is text that you include in the source code without having it display when you look at the page with a browser.

  1. Put a comment into the source code for this page. What happens?

  2. Now remove the --> from your comment. What happens?


Lists!

Now suppose we want a list of animals. Check out the source code for the ordered list below. <OL> and </OL> go on the outside, and <LI>, which stands for List Item, marks off each point. The use of the <OL> tag formats the items automatically.

FUN ANIMALS
  1. moose
  2. kudu
  3. elk
  1. Add a few more animals to the list using the <LI> and </LI> tags.

  2. Change the OL and /OL to UL and /UL. What happens?


Links

By far the most useful part of HTML coding is making links. The link tag or anchor tag is the letter A but you also need to mention where the link should take you, so you need to add a attribute HREF and then set it equal to the destination. All together it looks like this, supposing the destination is www.google.com:

<A HREF="http://www.google.com">Everything here will be underlined in blue and clickable</A>
Everything here will be underlined in blue and clickable

Some things to notice are that you only need to close the A, not the HREF. Also don't forget the space between the two and make sure to close the quotation marks. Another common mistake is to forget the "http://" part. When you don't include that in the destination, the computer assumes that whatever anchor you give it is in the current directory. This can be convenient. For example, if the page you are working on is located at http://prism.mathcs.carleton.edu/yourname/moose.html (possibly ficticious), and you want to make a link to http://prism.carleton.edu/yourname/emu.html, your anchor link would merely be:

<A HREF="emu.html">Emu info</A>
Emu info

But if you forget the "http://" part when you really should have it, you can get links looking like this in your browser:

http://prism.mathcs.carleton.edu/yourname/prism.mathcs.carleton.edu/faculty/jondich/cs107/emu.html

Links can be stuck anywhere, such as in lists, in titles, with online graphics, even in an email document or an instant message. It's definitely a tag that comes in handy.

Insert a link into your page, linking it to your previous page. Use the short-hand method. Make another link that links to something on a different site, where you have to give the full address.

Another version of the anchor tag is the mailto tag. Unfortunately it only works when the internet browser you are using is connected with an email address so there is a place from which the mail is being sent. So AOL works well with these, but Netscape Navigator and Mulberry don't. Here's the format to send email to Mike Tie (mtie@carleton.edu) for example:

<A HREF="mailto:mtie@carleton.edu">Email Mike</A>

Email Mike

Add a mailto link with your email address. Try it, see what happens if your browser is properly connected to email.




Previous lab

Lab written by Michelle Phillips and Jeff Ondich. Minor revisions made by Dave Musicant.