HTML Exercise Three

COMM 260, Principles of Internet Web-Based Design
Instructor: Ross Collins

HTML Exercise Three: the URLjig

This creates a web document to store your favorite web sites. It's like a browser's "Favorites" or "Bookmarks" feature, but more flexible--you can customize it to match whatever filing system you like best, and include your own comments about web sites, or add memory jogs for passwords or user names you might need to enter a site. You can save this on a disk, take it to whatever computer you're working on--and your whole library of bookmarks is right there! It's also good basic HTML practice.

Before you begin, take a look at this sample web page illustration based on the HTML we cover below.

Note: HTML is not case-sensitive, so you can write code in upper or lower case. Modern standards related to development of XML, a more precise version of HTML, ask you to code in lower case, however.

Here are the steps:

1. On the desktop or student folder create a new folder with your name. You'll be placing all your HTML files into this folder. In our case, that consists of only two, but it's good practice.

2. From the class web site, download this practice "URLjig photo" to your own file. (On the Mac, Control-Click on photo, choose Save As.) This will give you the opportunity to practice HTML image links.

3. In BBEdit (or other basic text editor) open a new document, and begin your HTML coding with the <html> </html> tag pair. All your code will go between that. Save this in your folder named something like myfavorites.htm. Note you must have htm or html as the file extension (after the period).

4. In the <head> section, add a <title> (be sure to close title tag).

5. Close the head tag pair, open <body>.

I'm going to set this page up by date. That might not best reflect your search needs, however. Note you can set it up alphabetically, by topic area, or whatever way you'd like to categorize your information.

6. Change the font for the entire web page. Note: choosing the tag changes only a section; you have to do it again after a new paragraph. To change all the text: <basefont face="georgia, times, serif"> Or choose another set of fonts, although these are pretty standard serif fonts on most computers. Georgia is designed for the net.

7. For your section heads (in my case, dates), choose larger or boldface, such as: <center> The plus or minus sign before the number set a relative size based on browser default.

8. Type: September, and current year.

9. Close tags: </center>

10. Add the photo, for kicks: <img src="books.jpg">

You'll probably have to deal with this image. First, always provide alt (alternative) text; some people turn off image transfer on their browsers. Visually handicapped people may use text readers. Without alt text the reader won't understand the image:

11. Still your image isn't really looking right? Try a flush right <img src="books.jpg" align=right alt="photo of books.">

Note you can also choose to change your image size (in pixels). Try this: <img src="books.jpg" align=right alt="Photo of books." width=125 height=200> To avoid distorting the images the changes need to be proportional to the original. The <img> tag does not need to be closed.

12. For a new font size, choose

13. Make your URLs into a list. You might want a Definition List <dl>, that is, one with your URL and your comments indented, like this. (To see the code for this, check out this sample page's source code) using the View Source command from Edit pulldown menu. (Note: I didn't include the image tag.) Or you might want a numbered (ordered) or bulleted (unordered) list. For an Ordered List, use the <ol> tag pair. For a Bulleted List, substitute the <ul> pair, as noted below.

<ul> This sets up the list. Now for each bulleted entry:

<li> (When you're done:</ul>)

14. For the first list entry, type (or copy and paste) this: Here's a good way to keep up with the day's current events.

15. Now you're ready to make the first link tag: <a href="http://news.google.com/"> Google's news site.</a>
Note this hyperlink tag stands for "Anchor HyperREFerence." It will usually appear underlined in blue. Visited links will usually appear underlined in red. To create an e-mail link, that is, a link that brings up an e-mail window, use this hypertext tag pair: <a href="mailto:?"></a> with the question mark replaced by the e-mail address. Remember: You have to type in some text between the <a href > and </a> tag pair to make a visible link.

16. Type <li> and another link or two. When you're done: </ul> The tag will give you space between lines.

17. When you're finished with the page, close tag pairs: </body></html>

18. Make sure everything renders correctly in a web browser. Hand in printed web page (NOT code) for grading. Nice job; you're an official "html slinger!"