HTML5 and CSS3 Fundamentals – Arranging the Page

How to Arrange HTML Elements on a Web Page

In this class, we will continue with HTML page layouts. But this time round, we’ll focus on how you can arrange the elements your page. By the end of the class, you will understand how to arrange elements in your page. So, let’s dive in and start learning the basics of HTML page layouts.

Why is arranging elements best for your web page? Good question. Well, make no mistake: arranging the elements on your web page will help you to improve the page structure. This is essential because it helps you come up with a good website that looks professional.

I’m sure that we all love our work to be professional. That’s why it’s absolutely necessary that you grasp the concept behind arranging elements on your web page. So, let’s dive in and learn how you can arrange the elements in your web page.

Basics of Arranging Elements

To arrange elements in your web page, you’ll have use to the <DIV> tag and CSS. In our previous class, we learnt that the <DIV> tag specifies the division or a section of an HTML page. Well, we shall continue using this important tag in HTML, together with CSS to arrange HTML elements in a web page.

We will begin with margins and paddings in web pages. A margin on a web page is the space that’s outside of the elements in your web page while a padding is the space that’s around the elements of the text to the border of your web page. How you specify the margins and padding determines how you will arrange the elements in your web page.

The example below illustrates how you can specify the margin and padding settings for your page that has been divided into two sections using block1 and block2 as the ID property of the <DIV> tag.


DIV {

Width: 40px;

Height: 40px;

}

#block1 {

Margin: 20px;

Padding: 15px;

Background-color: red;

}

#block2 {

Margin: 15px;

Padding: 15px;

Background-color: green;

</STYLE>

In the above example, the margin will be uniform for both the left, the right, bottom and top margins. Similarly, the padding spacing will have a uniform spacing both the left, the right, bottom and top. The example below shows how you can specify different setting for both the left, the right, bottom and top margins:


#block1 {

Margin: 40px, 30px, 20px, 10px;

Padding: 30px, 25px, 20px, 15px;

Background-color: red;

}

Images can also be arranged in your document by use of the <DIV> tags and CSS. There are two types of images in HTML, namely: the aligned images and floating images. While aligned images are those images that positions the images using the left, center and right formats, the floated images are those images that wrap around the text.

The example below shows how images can be floated horizontally.


<IMG style="float: right; margin: 2px 3px 15px 25px;" src="/support/image/your-image.jpeg" width="150" />

What about overlapping elements?

Overlapping elements in your HTML page can be set by the z-index property. The z-index property is used to define the stack order of that element which is overlapped. Such an element can be placed in front of others or behind the others. The example below shows how the z-index property can be used to specify the positioning of overlapping elements:


IMG {

position: relative;

left: 1.5px;

top: 1px;

z-index: -2;

}

We can also use the float property in CSS to arrange images on a web page. This property can help you wrap around your images in your web page. For instance, the HTML code below illustrates how you can achieve this.


IMG {

float: left;

margin: 10px,20px 10px 15px;

}

So, there you have it. Stick to the use of <DIV> tag and CSS when arranging elements—whether images, margins, paragraphs—on your web page and you’ll be on your way to becoming a professional website developer. Isn’t that your dream? Well, in our next class, we critically examine how you can position your elements in a web page.

Online Technology Courses Stone River eLearning
GET YOUR FREE HTML5 & CSS3 EBOOK!

Comments