Add Common HTML Tags to Your Simple Web Page

Preliminaries

Routine. Okay, now you should know the routine of working on your web pages on your own computer and then uploading them to your home page for this course. You should know how to view the source of web pages and how to select that source and copy it to your own web pages. If not, just holler! (It takes some getting used to.)

Writing practice. For this web page, create several same-level headings and make them parallel in phrasing (opens in a separate browser).

Web page task

  1. Take a look at this video on HTML tags and the tagging for this unit (opens in a separate browser).
  2. Remember to add some identifying part of your name to the front of the file names you plan to upload to your home page area or send by attachment to McMurrey's e-mail.
  3. If you didn't do so in the previous unit, add some paragraphs to your web page. Enclose them with in the <p> and </p> tags.
  4. Experiment with the <br> tags within a paragraph. They create a line break but not a full paragraph break.
  5. Add some lower-level headings, specifically, <h2> and <h3>. Don't forget to close those heading tags!
  6. Add a reminder to yourself (comment) that regular viewers of your web page will not be able to see:<!-- Note to myself -->
  7. Put your cursor in front of a word and make that word (or words) italics by enclosing it (or them) with <i> tags. XHTML purists prefer <em> tags.
  8. Do the same for some other word or words but use <b> tags to make the word or words bold. XHTML purists prefer <strong> tags.
  9. Create a bulleted (unordered) list: add three lines of text each enclosed in <li> and </li> tags. Then above the first line, add <ul> and below the last line add <ul>.
  10. To create a numbered list, copy the 5 lines you enter for the bulleted list above, paste them elsewhere on your web page and change both the ul tags to ol tags.
    You'll come back to lists and do some tricky stuff when we get into CSS.
  11. For our last trick, you'll add the display of a graphic image to your web page. Find a relatively small .gif, .jpg, .jpeg, or .png file on your computer, and copy it to the same folder containing your HTML file. Add this tag to your HTML page and substitute your_image.ext with the exact name of your image along with its exact extension (for example, evolution.jpg):
    <p>
    <img src="x" />
    </p>
  12. Do a refresh to see how your page has changed, then send your HTML file and image file to McMurrey's e-mail.

Related Information



Maintained by davidm@austincc.edu.