MAT 125: Demos for Exercises

Exercise 1 Demo: Part C : Using the Group Element

Group Elements can contain several Block Elements. You can use them to break your page content into "groups" of content. You can add styles or attributes to the opening group element and all the content will pick up those styles. Or they will use the default styling if the group element has one.

Here is an example of how you could use the block elements. Add the example of your own content to your index page.

<!DOCTYPE html>

<html>
<head>
<title>
My First Web Page </title>
</head>

<body>

This part of the demo covers using the DIV element to group your content. Enclose content you want grouped inside a pair of these tags and see what you can make happen. It can be a single piece of content, a paragraph or whole sections of your page.

The div element is the most often used group element. We can add attributes to the opening tag and all the content will pick up the style of the attribute. In my example I used the align attribute with the value of right, so all the content inside the DIV aligned to the right.

<div align="right">

<h3>Using the DIV element </h3>

<p>We added an attribute to our DIV element telling it we want all our content aligned to the right. It will take the whole group or content we choose and do just that. Make it go to the right of our page. </p>

<p>We can group as much content as we want with this tag. Even add in pictures. But that comes later. Be sure to try different alignments and different groups when you use your div tags. </p>

</div>


Always close your HTML documents correctly, using the tags below.

Remember, no content is ever included after you close these tags!!!!

</body>

</html>


Give the browser some more instructions. Go to Part D of Demo 1.