Manuscript for HTML Tutorial #16

Listed below is the manuscript of all textual instructions used in HTML Tutorial #16 - Setting the Alignment of Content on a Web Page. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #16 - Setting the Alignment of Content on a Web Page

Lesson #16: Alignment. Click the play button to begin the tutorial.
In our example web page, we have yet to specify any alignment.
So, all of the text has defaulted to the left.
Although, we could align our text to the center or right side of the page.
Let’s see how to do this.
Now, the two sentences (headlines) that we want centered are inside of this paragraph container.
So all we need to do is change the alignment property of this paragraph.
However, we don’t want to change the property of all our paragraphs, just this one.
So, we’ll assign this paragraph to a special class, by including the class attribute in its opening tag.
The value will be whatever name we want to give to this new class.
Let’s assign a different class to our copyright notice, so we can align it to the right.
Problem is this sentence is not inside a paragraph container.
We can either put <p> tags around it, or we can place it inside of a generic block-level container.
The div element, which is short for division, can be used for grouping items into a generic block-level container.
Of course, since it’s a container, we’ll need a closing tag.
Now we can assign a class to this division.
OK, let’s save this document, and then pull up our style sheet.
So far in our style sheet we’ve only used the body element as a selector.
But we can also use a class as a selector.
Here we have entered the headlines class that we gave to that paragraph.
When using class as a selector, it needs to be preceded by a period.
Now we can declare the alignment for all elements that have a class of headlines.
Let’s also enter a right aligned rule for the class of copyright.
Time to see how it looks.
Since the paragraph that holds these sentences has a class of headlines, and since the alignment of that class has been set to center, these sentences have become centered.
Since the division that holds this sentence has a class of copyright, and since the alignment of that class has been set to right, this sentence is aligned to the right.
Practice aligning your text, and then meet us in Lesson #17.

<<<Tutorial #15

Tutorial #17>>>