MAT 125: Web Design 1: Fundamentals : EXERCISES

<< .. Go to .. Home .. Class Demos .. Next Exercise .. >>

Exercise 1:
Basic HTML Elements and Text Styles


In this Exercise we will use the most fundamental HTML elements to create a simple web page.

Basic HTML Elements

The Basic HTML Elements are the building blocks of every html web page.

  • <html> </html>
  • <head> </head>
  • <title> </title>
  • <body> </body>

HTML Text Style Elements

- Block Elements

These elements start a new line, with space above and below them.

  • <p> </p>
    • align="?" : left; center; right
  • <div> </div>
    • align="?" : left; center; right
  • <h?> </h?> 1, 2, 3, 4, 5, 6
    • align="?" : left; center; right
  • <blockquote> </blockquote>
  • <pre> </pre>
  • <nobr> </nobr>
  • <address> </address>

- Inline Elements

These elements add style to the text. They do not start a new line. They are physical style tags.

  • <em> </em>
  • <strong> </strong>
  • <code> </code>
  • <big> </big>
  • <small> </small>
  • <sub> </sub>
  • <sup> </sup>
  • <tt> </tt>
  • <!--Commenting code-->

- Empty Elements

Empty Elements do not have a closing tag.
In XHTML they are self-closing.

  • <br />
  • <hr />
    • align="?" : left, right, center
    • size="?" : pixel height
    • width="?" : pixel length or percent
    • noshade="noshade"
    • color="?" : #xxxxxx or color name

Exercise Requirements

  • You MUST use every element and attribute at least one time
  • Make at least FIVE horizontal rules with different alignments, sizes, widths and colors
  • Save your documents as "YourLastNameE1.html" e.g. faulkE1.html
  • Content - write a description of what each tag is and what each tag does or use your own content. Other suggested ideas for content are poems (or lyrics from songs - non-offensive only), interesting facts, tell me about something you are interested in, make up a story... be as creative as you want.

Design Process and Final Presentation

  • Create one HTML document in a text program (Notepad or TextEdit). Save your document as "YourLastNameE1.html" Place it in in a folder titled YourLastNameE1
  • Write your text and format it by using all the tags and attributes
  • Review your work in a browser before uploading to the server
  • Upload your HTML document to the school server and view it in a browser

Evaluation

This exercise is worth 15 points.

  • Coding (3)
  • Functionality (3)
  • Meeting project requirements (3)
  • Your effort (3)
  • Meeting deadlines (3)

Due Date

Text Reference

  • Chapter 4: pg 51-68
  • Chapter 5: pg 71-82
  • Review Lecture in Course Content on Blackboard

Online Demos

Useful Links

List of HTML Color Names

Exercise One Elements Defined

A page of tag/element descriptions for Exercise One

 

<< .. Go to .. Home .. Class Demos .. Next Exercise .. >>