DIV Tags, Division Tags, Tables, Layout, Masthhead, Semantic Layout, ID Attribute

1. Create divisions in a web page
Information and CommunicationTechnology – 8

2. Objectives
•Understand <div> tags and the new HTML semantic
tags in breaking a page into sections;
•Learn to place the division in a specified location within
your page; and
•Create a division-based layout to your web page.

3. GoodWeb Design Basics
HTML provides you a lot of ways to layout your page better.This lesson will
teach you how to use the <div> tag effectively.
We will also learn the HTML5 new elements to make appropriate and
meaningful divisions to your page.

5. Good Web Design Basics
The basic idea behind good web design is to partition your web page into various sections and
columns to give it a professional appeal and to make it more user-friendly.
• Creating a template that you can use on all your web pages to render a familiar look every time
a visitor goes to a different part of your site.
• Creating a header section that runs across the top of your page in order to designate a
prominent place your website’s logo, slogan, graphic, etc.
• Creating multiple columns that are clearly divided your webpage into various logical sections
such as:
• Menu Column – should contain a list of links to other pages on your website.
• Main Content Column –holds that text you are currently reading.This column should render the
main text and graphics which defines what your web page is about.
• Creating a footer section to hold copy right information and important links.This help to create visual
ending to your web page and provide other important sections or link.

6. Advantages of Division-based Lay-out
• The most popular way of structuring a web page is by creating
tables.This method of partitioning a web page has become
obsolete.
• Web designers today are geared towards a more appealing wat
of separating content into sections which is called the division-
based layout.
• A division-based layout defines the area of page with <div> tags.
Each part of the page you want to format separately should b a
division.

7. Table vs DIVs
• Most websites have put their content in multiple columns.
• Multiple columns can be created by using <div> or <table> elements.
• Even though it is possible to create nice layouts with HTML tables, tables
were designed for presenting tabular data - NOT as a layout tool!
• The div element is used for grouping HTML elements and for creating rows
and columns with the help of CSS.
Table div

9. Advantages of the Division-based Layout
• You can place layout styles externally, and then make the style changes
to many pages at once simply by modifying the style sheet.
• It reduces the number of lines of code needed to produce a page.
What is <div> tag?
• The <div> tag is used to establish separate divisions or areas of your
page.
• The <div> tag is used to group block-elements to format them with CSS.

10. Masthead/header andTop
Navigation
Web Content body (can
still be divided into sub
section)
Bottom Navigation and
Copy Right Notice

11. If you layout the web page using <div> tags,
you can break thus page into general parts:
the masthead/header or the top navigator
bar, the content body text, the bottom
navigation bar, and the copyright notices.
Masthead is used as the title of a
newspaper or periodical as it appears
across the first page, front cover, or title
page issue.
On a website masthead represents the
graphic image or text title on the top of
the web page.

12. The id attribute
• The id attribute can be used with any tag element. When used along with the <div>
tag, it will identify and define an area of your page.
• Things to remember:
• As a unique identifier, the id’s value should only be used once on your page.
• Start the id value with a letter followed by any of these: letters, number digits (1-
9), dashes (-) and underscore ( _ ). Don’t use space or special characters.
• The value is case-sensitive.
<div id= “title”> is different from <div id= “Title”>
Syntax:
<div id =“masthead”> . . . . . . . </div>
<div id =“top-navigation”> . . . . . . . </div>
<div id =“web-contentbody”> . . . . . . . </div>
<div id =“bottom-navigation”> . . . . . . . </div>
<div id =“copyright-section”> . . . . . . . </div>

13. Creating Division to your Page
The output does not show a layout.You
can clearly see how your page is
divided into different sections.

14. Page Layout with <div>Tags
• Putting a style in the <div> tag will allow you to set the
appearance or how your division of your web page behaves on
the screen.You can put various style such as the following:
• Border
• Background
• Margin
• Width
• Height

15. Web Layouting with <div>Tag Styles
The <div> tag is general-purpose tag.
Though, without the id attribute of each
<div> tag, it’s hard to tell what section of
document each <div>.

16. The HTML5 Approach
• You have learned in Lesson 4 the new Semantic tag that HTML5 offers. It
provides a set of tags that clearly defines blocks of content that make up
• your webpage.
• Header –This is your web titles, taglines, logo, etc.
• Section –This is meant to identify substantial portions of content on the webpage.
• Article –This identifies major segments of content within a web page.
• Aside –This tag can be used in two different contexts.
• Footer –This is for the copyright section; it can include navigational links, or contact
information.
• Nav – this is intended for navigational links.

17. Set <aside>
• The <aside> tag is a new element for HTML5.The context of this element is whether to use it inside or
outside the <article> element.
• You can use the <aside> tag inside the <article> element or
• You can use it outside the <article> element.
<aside> element being used as a pull-quote inside
the article.
Syntax:
<article>.
.
.
<aside>
.
.
<article>
Syntax:
<body>
<section>
<aside>. . . </aside>
<article>. . .</article>
</section>
</body>
<aside> being used outside the article.This can be
placed as another division to your page.

18. Positioning a Division
• If you insert an additional <aside> division to your web page layout, and place your division beside
another either to the right or left, you can easily use the float style rule.
Positioning Style - if you want to place a division on a specific spot of your page, you can use the
position style rule.
There areThree possible values for a position style rule:
1. Static - An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page.
2. Absolute value – position:absolute ;This value specifies a fixed position with the respect to its
parent element or tag. Usually, the <body> tag as the parent element.
3. Relative value – position: relative,This value is compensated from the element’s natural
position.Other elements on the page are not affected, even if the new position cause overlap.
4. Fixed value - position:fixed;This value specifies a fixed position within the browser window that
doesn’t change even when the display is scrolled up or down.

21. Position Style
• You must use each of these values in combination with top, right, bottom,
and /or left style rule that specifies the location to which the position style
rules refers.
Example:
To position a section at exactly 100px from the top of the page and
200px from the left side, the syntax should be:
<section style=“top:100px;left:200px;position:absolute”>

22. Horizontal Lines
• Horizontal Lines can be useful as a visual dividers between sections of text in
a web page.
• You can add a horizontal line after your header then add another horizontal
line before your footer.This will clearly show your division in your web page.
• You can simply add the horizontal line <hr> (horizontal rule) tag where you
want the line to appear.