COMM 260, Principles of Internet Web-Based Design/COMM 750, Web Studies/Digital Media

Instructor: Ross Collins

Basic HTML Exercise Two
You'll be using the following new basic tags described below. Your final exercise should look like the illustration at right.

<!--comment-->
This tag allows you to make comments in HTML code that the browser won't display. It's also used for JavaScript-related applications.

<body bgcolor="#?"><body>
This changes the color of your background. Replace the ? with a color based on the RGB hexidecimal system, two numbers or letters for each color. Try a random set of six numbers to see what happens. Or choose from the color picker at this WWW tutorial web site.

<font face="?" size="?"></font>
This specifies the body text font. Fonts designed specifically for the web include arial for sans serif, and georgia for serif. Because the font won't render unless it's resident on a user's machine, include alternatives, such as <font face="arial, helvetica, sans-serif"> Size in HTML may be numbers 1 through 6, or may be indicated as relative sizes. This means you accept the default size set up by a user's browser, and indicate sizes relative to that choice, using plus or minus, such as "-1." Some webmasters recommend using relative sizes.

<h3></h3>
A smaller headline. h1 is largest; h6 is smallest. H3 is about the size of text.

<center></center>
Centers the text between the tag pair.

<hr size="?">
Horizontal rule across the page, size in pixels.

Note: strict html (XHML) requires all tags include closing tag. So in the above tag add </hr > to close. Note there's a space after "r" and before the closing bracket.

<p></p> or <br></br>
The first starts a new paragraph with a space; the second breaks the line, but includes no space. By the way, if you want to space out text, the space bar won't work. you need to include the code &nbsp; for EACH extra space.

<i></i> or <em></em>
Italic type between tag pair.

<b></b> or <strong></strong>
Boldface type between tag pair.

Okay, time to begin coding.

  1. Open a New Text Wrangler, BBEdit, TextEdit, Notepad, or other basic text editing software. Word won't work unless saved as ASCII text, an onerous task.
  2. Begin with html tag, head tag, and title tag. Title: Winston Churchill. The title appears on the top bar of the web browser window.
  3. Within the comment tag write something like My wonderful basic HTML coding. Comments do not appear in the browser window.
  4. Close head tag, open body tag, include background color.
  5. Body background color: #FFCCFF. Or your own choice. Note: color attribute must be within quote marks. Remember that you can choose a hexadecimal color from the W3 Consortium color index.
  6. Choose a header size h3, and center header.
  7. Choose a font, arial, verdana, or another sans serif. You may choose a generic sans serif, but HTML requires a hyphen in color attributes, so "sans-serif."
  8. Write header: Churchill on Learning. Close font, header, and center tag pairs.
  9. Add a horizontal rule, size about 4 pixels (<hr size="4">)
  10. Start a new paragraph (<p>) Note that each time you start a new paragraph, you must repeat the font attributes.
  11. Designate the font: arial, verdana, or another, sans serif. size: -1. The minus or plus sign next to a number indicates a relative font, that is, relative to the text attribute of the entire document. In this case, no body text size was indicated, so it will be relative to the browser defaults of the user. Note: size attribute must be within quote marks.
  12. Go to class web site resources page. Drag over and Copy the Winston Churchill quote at bottom of page.
  13. Return to HTML code. Paste quote.
  14. Close font tag. use page break tag (<br>) to start a new line without leaving space in between.
  15. Open new font tag, arial, size: -2. This makes the byline (signature) smaller than the quote.
  16. Drag and Cut the byline beginning --Sir Winston Churchill..., Paste inside these tags.
  17. Close all tags (except line break) in order of opening; last opened is first to close, so italic, font, body, html.
  18. Save as churchill.htm. Be sure to include the htm or html file extension.
  19. Open browser to check it out. Problems? Debug: All tag pairs closed? All brackets included? All quotes closed? When okay, print web page (NOT the code) for grading.
  20. Now wasn't that easy-peasy!