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.
My First Web Page
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
<h3> Be sure to try the other Heading tags from h3 - h6
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.
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 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.
<h4 align="center"> Try a centered heading.
<h5> As the heading numbers get bigger the size gets smaller.
<h6>Now we are really getting tiny.
© Claudia Faulk. Created in 2008. Updated 6.18