Exercise One

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. Watch the Video Lectures linked on the Video Page. Review DEMO pages as needed.

Exercise Requirements

Watch: the step by step Videos Lectures for Exercise 1.
Read: Chapter 5 in the book for more information on creating a basic HTML page.
Folder Name: Ex1
Page Name: index.html
Number of Pages or Documents Required for Exercise One: One
Possible Points: 20 + 5 points for correctly loading your file to the server

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 or Tags for Exercise One
The first five basic elements or tags are used on every HTML page. They form the skeleton of each page.

!DOCTYPE html

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>

html

This tag comes after the Doctype and contains the rest of the page content.
Here is the opening version and closing version of the tag:

The content goes in between the opening and closing tags.

head

The head tag comes right after the opening html tag.

I like to think of the head as the thinking part of the page. We will add more content up in that area later.

title

The title tags are inside the head tags

This content that you place between the opening and closing title tags shows up in the tab at the top of your browser window. Short and simple is best. No styling here. Take a look at the one I used for this page - it should be showing in the tab up above.

body

The opening body tag comes right after the closing head tag.

The content in between the opening and closing body tags should be what is shown in your browser window.
The closing body tag should be at the bottom of your document right before the closing html tag.

HTML Text Formatting Elements
The Block Elements. These elements start a new line, with a space above and below them. They format the text content that is between their opening and closing tags.

The H Elements
h1
h2
h3
h4
h5
h6

attribute:
align

Value options:
left
center
right

The h elements are used for headlines or subheads in your documents. By default they are a bold font. The bigger the number, the smaller the font size. The h1 element is the largest. The h6 is the smallest. Here is an example of the h1 element.

For the exercise try all of the h tags from h1 to h6. Be sure you close with the same size of one you open with.
The attributes and values only go inside the opening part of the tag. Try the different align options on some of them as well. Be sure to use the = sign and the inch marks for "quote marks".

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

The P Element
p

attribute:
align

Value options:
left
center
right

The p element is used for paragraph content. By default they have a normal font weight. Here is an example of the p element opening and closing tags.

For the exercise try the p tag with the align attribute and the different values on some of your paragraph content.

EXAMPLE:
<p align="right"> This is a p tag aligned to the right. All the text in my paragraph would be aligned to the right side of my browser window. I would write several sentences of content here. </p>

The Grouping Element
div

attribute:
align

Value options:
left
center
right

The div element can be used to contain several block elements, like some headlines and paragraphs of content. Later we can add images inside it as well as text.
You can use divs to divide your page into "groups" of content.

You can use the align attribute and the different values on the div and all the other elements (and content) inside it will pick up the values you give it.

EXAMPLE:
<div align="center">
</h3> Here's an h3 headline.</h3>
<p> I'm adding in some paragraph content.... etc. All the content inside the opening and closing div tags will be centered... </p>
</div>

HTML Inline or Style Elements
These elements can be used to add style to text.

The html Style Elements
em
strong

These Elements do not start a new line. They are physical style tags. Style elements DO NOT contain block elements. Add the style elements inside the block elements.
These tags are mostly being replaced by CSS styles, but that comes in Ex2...

The em tag is used to create italic text

The strong tag is used to make text bolder.
Add either of these to specific sections of a paragraph to make the text stand out.

EXAMPLE:
<p> I have a black dog. Her name is <strong>Darby</strong>. She is a medium sized dog. She is very <em>sweet</em> </p>.

I have a black dog. Her name is Darby. She is a medium sized dog. She is very sweet.

The Empty Elements
Empty Elements DO NOT need closing tags. All the information they need to tell the browser is contained within the opening tag. They do not contain content, they just give directions to the browser.

The Comment Element
!-- --

Use this element to write yourself a note in your coding. Or leave a note for someone else working on a website with you. You can use the comment tags to comment out content you don't want to show, but aren't ready to delete yet.
When you write a comment, you can only see it in the coding. It does not show in the browser window unless you write it incorrectly.

EXAMPLE:

The Line Break Element
br

Use the br or break element to add extra space between lines of text. When you use an h or p tag, they only add a set amount of space before the next one starts. With a br tag you can have a single return like I show in the example. Using two will give you the same space a p or h tag gives you. But you can add more to create more space between content. Test it out!
Remember though, it does not need a closing tag.

<br>

EXAMPLE:
<p>123 Main Street <br>
City, State 00000</p>

123 Main Street
City, State 00000

The Horizontal Rule
hr

attribute:
align

Value options:
left
center
right

attribute:
size

Value by pixel amount (example)
10px

attribute:
width

Value by pixel or percentage (examples)
90%
or 500px

attribute:
color

Value by hex code or color name (examples)
#790321
or color name tomato

Use the hr or horizontal rule element to add a line between content.
By default the horizontal rule is centered, is gray and goes across the whole space. Remember though, it does not need a closing tag.
See the first example.

<hr>

Use the various attributes and values to make the horizontal rule much more interesting. You can change the alignment, the thickness (by pixel amount), the width (by pixel amount or percentage), and the color (by using a hex code or an approved color name).
For your exercise, make at least 5 hr tags. Use different alignments, widths, colors, and sizes.

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

EXAMPLE 2:
<hr align="left" size="10px" width="250px" color="#455899">

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

MAT 125: Exercises & Projects

Exercise 1: Basic HTML Elements and Text Styles

Exercise Requirements

The Elements or Tags for Exercise One
The first five basic elements or tags are used on every HTML page. They form the skeleton of each page.

HTML Text Formatting Elements
The Block Elements. These elements start a new line, with a space above and below them. They format the text content that is between their opening and closing tags.

HTML Inline or Style Elements
These elements can be used to add style to text.

The Empty Elements
Empty Elements DO NOT need closing tags. All the information they need to tell the browser is contained within the opening tag. They do not contain content, they just give directions to the browser.

Evaluation

Exercise 1: Basic HTML Elements and Text Styles

Exercise Requirements

The Elements or Tags for Exercise One The first five basic elements or tags are used on every HTML page. They form the skeleton of each page.

HTML Text Formatting Elements The Block Elements. These elements start a new line, with a space above and below them. They format the text content that is between their opening and closing tags.

HTML Inline or Style Elements These elements can be used to add style to text.

The Empty Elements Empty Elements DO NOT need closing tags. All the information they need to tell the browser is contained within the opening tag. They do not contain content, they just give directions to the browser.

Evaluation

The Elements or Tags for Exercise One
The first five basic elements or tags are used on every HTML page. They form the skeleton of each page.

HTML Text Formatting Elements
The Block Elements. These elements start a new line, with a space above and below them. They format the text content that is between their opening and closing tags.

HTML Inline or Style Elements
These elements can be used to add style to text.

The Empty Elements
Empty Elements DO NOT need closing tags. All the information they need to tell the browser is contained within the opening tag. They do not contain content, they just give directions to the browser.