MAT 125: Web Design 1: Fundamentals : EXERCISES

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. Use ALL of these tags and attributes to create your homework. Follow the Exercise One Assignment Instructions on BlackBoard. Review DEMO & VIDEO pages as needed.

Exercise Requirements

Read the 2 lectures sent via email and on Assignments page
Skim through Chapters 1, 2,3 for an overview of the web and using HTML.
Read in the Book Chapter 5 for more information on creating a basic HTML page.

Number of Pages Required for Exercise: 1

Use all these...

  1. Use the 5 Basic Elements (tags) correctly. They are on EVERY HTML page.
    DOCTYPE, html, head, title, body
  2. Use each H tag size at least one time. H1 - H6 .
    Use all the align attribute variables: left, center, right
  3. Write 2-3 paragraphs using the p tag.
    Use all the align attribute variables: left, center, right
  4. Use the div tag as a Grouping Element with content styled with Blocking Elements inside. (paragraphs and headlines)
  5. Try the HTML inline style elements em & strong
  6. Use the br tag to add line breaks.
  7. Create 5 or more hr (Horizontal Rules) using all the hr attributes and values
  8. The more you write/experiment, the better you will understand HTML.

DO NOT center all page content to make the page look "pretty". EXPERIMENT!

Review the Exercise 1 Demo and Video pages for more information on using basic HTML Elements.

Points: 15

Prep Work

Name your folder: Ex1
If you are on a PC, use NotePad to write your code.
If you are on a MAC, use TextEdit to write your code.

Name your First HTML Page: index.html

The DocType

Put this at the top of every HTML page you write. This tells the browser you are using HTML5 to code your document. [Document Type]

<!DOCTYPE html>

Basic HTML Elements (tags)

The Basic HTML Elements are the building blocks of every html web page. Below are their opening and closing states. Use them on every web page you create.

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

HTML Text Formatting Elements

- Block Elements

These elements start a new line, with space above and below them.
These tags are shown with their attributes.
Attributes are used in the opening tag only.
The tags will style the content that is inbetween the opening and closing tags.

The H elements are for Headers or creating headlines in your content. They range in sizes from H1 to H6, making large to small headlines

  • <h?> </h?> h1, h2, h3, h4, h5, h6
    • align="left", "center", or "right"

The P element is used for paragraphs.

  • <p> </p>
    • align="left", "center", or "right"

- Grouping Element

The DIV elementThis Element can contain several Block Elements. You can use DIVs to break your page content into "groups" of content

  • <div> </div>
    • align="left", "center", or "right"

- HTML Inline or Style Elements

These Elements add style to the text. They do not start a new line. They are physical style tags.
Style elements DO NOT contain block elements.
Add style elements to content inside of block elements.

  • <em> </em>
  • <strong> </strong>

- Empty Elements

Empty Elements do not have a closing tag.
They do not contain content, they give a direction.

The Comment Element
Use this element to write comments to yourself about the work you are doing in the web page. It only shows in the code.

  • <!-- Write your Comment Here -->

The BR or Break Element - use to add space between lines
The br element makes a break in the line of text. Using more br tags adds more space. Try adding one, then try adding several.

  • <br>

The HR or Horizontal Rule - use to add a line between content

The hr element adds a Horizontal Rule which you can add style to by adding the attributes and values

  • <hr>
    • align="left", "center", or "right"
    • size="?" : pixel height
    • width="?" : pixel length or percent
    • color="?" : #xxxxxx (hex code) or color name

Exercise One Grading Rubric
Item/Points 1 2 3
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Deadline More than one class late 1 Class Late On Time


This exercise is worth 15 points.

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

Useful Links

List of HTML Color Names

Exercise One Elements Defined

A page of tag/element descriptions for Exercise One