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 Canvas. Review DEMO & VIDEO pages as needed.


Exercise Requirements

Read the 2 lectures sent via email. They are also available on the 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 for Exercise One...

  1. Use the 5 Basic Elements (tags) correctly. They are on EVERY HTML page.
    DOCTYPE, html, head, title, body
  2. Use each of the 6 H tag sizes at least one time. From 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. (P Tags - paragraphs and H Tags - 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 with your alignments!

Review the Exercise 1 Demo and Video pages for more information on using basic HTML Elements. I also have an example of Exercise 1 that I have created.

Possible 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
Save your file in the Ex1 Folder that you made.

The ELEMENTS

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 in between the opening and closing tags.

The H elements are for Headers or creating headlines in your content. They there are 6 sizes ranging from H1 to H6, making large to small headlines.Try them all.

<h?> </h?> h1, h2, h3, h4, h5, h6

Try them with the align attribute

align="left" "center" or "right"

EXAMPLE:
<h1 align="center"> This is an H1 tag aligned to the center. </h1>

The P element is used for paragraph text.

<p> </p>

Try the p tag with the align attribute

align="left" "center" or "right"

EXAMPLE:
<p align="right"> This is a p tag aligned to the right. I would write a whole paragraph here... </p>

- The Grouping Element

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

<div> </div>

Try the div tag with the align attribute to align all the content inside it

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. Be sure to remember it does not need a closing tag.

<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.
The hr tag doesn't need a closing tag either.

<hr>

Try all these different attributes and values with the hr tag

align="left" "center" or "right"
size="?" pixel height
width="?" pixel length or percent
color="?" #xxxxxx (hex code) or color name

EXAMPLE:
<hr align="right" size="25px" width="75%" color="red">


Exercise One Grading Rubric
Item/Points 1-2 3-4 5
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond

Evaluation

This exercise is worth 20 points.

Coding (5)
Functionality (5)
Meeting project requirements (5)
Your effort (5)