25 – Create website using div tags

Subscribeto download completed files

ALL ACCESS:$12 per Month + Cancel anytimeSign Up

Div tags (a.k.a Divider Tags) Allow you to define divisions in a web page. They are sized and styled using your Cascading Style Sheets (CSS). This way the HTML or Source Code is left clean and easily read by search engines (Google). Using Div Tag for the layout is an alternative for Tables. Tables can be very heavy on code and Google isnt a fan of them.

File New Blank HTML Create

Add the Page Title Vintage Camper Rentals

File Save vintage-homepage.html

Lets insert the overall container for the site to sit in

Note: indicates an ID. So to style any DIV tags using an ID you must have a in front of it.

In the properties panel choose a width of 800px

Note: This is just place holder text.

Make sure you have the vintage.css selected from the source panel. Click the + button in the Selector panel.

Make the width 800px and the height 127px.

Choose a blue for the background colour.

Make sure you have the vintage.css selected from the source panel. Click the + button in the Selector panel.

Make the width 800px and the height 37px.

Choose a yellow for the background colour.

Make sure you have the vintage.css selected from the source panel. Click the + button in the Selector panel.

Make the width 549px and the height 350px.

Choose a pink for the background colour.

Make sure you have the vintage.css selected from the source panel. Click the + button in the Selector panel.

Make the width 251px and the height 350px.

Choose a green for the background colour.

Note: The Div tags will naturally try to stack one after each other. To get them aligned correctly well need to use a function called float.

ALL ACCESS:$12 per Month + Cancel anytimeSign Up