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.


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

Evaluation

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