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 paragraph tag, the DIV tag, heading tags, blockquotes, preformatted tag, nobreak tag, and the address tag.
<html>
My First Web Page Part B
<head>
<title> </title>
</head>
<body>
Welcome to my page
That is a heading starting with the <h1> opening tag and ending with the </h1> closing tag.
<h2> Try the H2 Tag </h2>
<p>
What if you want to make paragraphs in your text? Use the <p> </p> tag. Start with a <p> tag to keep the text from beginning at the absolute top of the page. The <p> tag is the same as two hits on the return/enter key on the keyboard.
</p>
<p>
XHTML requires a closing tag. Most web pages created before 2001 don't use them, but to be XHTML compliant we will use a </p> tag. To be really correct, XHTML requires that our tags be typed in lower case.
</p>
Time to put in some content that you want to display in your first web page. Type in several sentences.
<p>
Insert another <p> tag between your sentences. Be sure to add a closing </p> tag at the end of each paragraph.
</p>
Attributes
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 seperate them with a space.
<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. </p>
<p>
An HTML tag attrbute 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 to be XHTML compliant.
</p>
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>
Another way to align text is to use the <div> tag.
<div align="right">
The results look similar to the <p> tag, but the <div> tag will have more function later on, such as block formatting. We will look at it again in future lessons.
Div tags are often used as "containers". They can hold whole groups of paragraphs, a banner, your navigation, images, etc. So if you wanted this whole page aligned to the right - you could have it nested inside a set of div tags. Be sure to use the closing </div> tag as well.
</div>
</body>
</html>
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 1.10