<< .. Go to : : Home : : Exercise 1 : : Demo 1A : : Demo 1B : : Demo 1C : : Demo 1D : : Demo 1E : : TAGS : : All Class Demos .. >>

Exercise 1 Demo: Part B : Block Elements

This is the HTML code you will need for Part B of Exercise 1.

Block Elements start a new line, with a space above and below them. They control whole sections, or blocks of your page. These elements include the P tag or paragraph element and the Heading elements from H1 - H6.

<!DOCTYPE html>

My First Web Page </title>


Welcome to my page

That is a heading starting with the <h1> opening tag and ending with the </h1> closing tag.

<h2> This is using the h2 Tag </h2>

<h3> Be sure to try the other Heading tags from h3 - h6 </h3>

What if you want to make paragraphs in your text? Use the <p> </p> tag. The <p> tag and the h tags are Block Elements. They automatically have space (margin and padding) around themselves. The space is the same as two hits on the return/enter key on the keyboard.

Most Elements in HTML require a closing tag. To be compliant we will use a </p> tag.

Time to put in some content that you want to display in your first web page. Type in several sentences.

Insert another <p> tag between your sentences. Be sure to add a closing </p> tag at the end of each paragraph.


Have you noticed that the text you have added automatically aligns to the left? This is the default position. What if you want your text to go to the right? Add an Attribute. Attributes modify elements by giving more information.

Attributes are only contained in the opening tag, never in the closing tag. They come after the element, in the tag. You can use more than one attribute in an element. Be sure to separate them with a space.

HTML tag with attributes


<p align="right">
We just need to tell the <p> tag where to align by using the align="right" attribute. Your code will still be aligned to the left but your text will be aligned to the right on your web page.

An HTML tag attribute includes a property and a value. </p>


The <p align="center"> attribute value works the same way.
Make sure you use the = and the " " marks.
All attribute values must be inside quote marks.

When you use the closing </p> tag it does NOT need the attribute. Attributes are only used in the opening tags.

<h3 align="right"> You can make a heading align to the right just as easily.</h3>

<h4 align="center"> Try a centered heading. </h4>

<h5> As the heading numbers get bigger the size gets smaller. </h5>
<h6>Now we are really getting tiny. </h6>


Go to Part C of Demo 1.

Back to Part A of Demo 1.

Go back to the Exercise 1 page.

© Claudia Faulk. Created in 2008. Updated 6.18