CREATE DIVISIONS

IN A WEB PAGE
Made by: Jhon Rafael,Jhon Rafael, and
Jhon Rafael A. Bernardo
 IN THIS LESSON YOU
SHOULD BE ABLE TO:
• Understand <div> tags and new HTML5 semantic
tags in breaking a page into secton;
• Learm to plate the division in a specified location
within your page; and
• Create a division-based layeout to your web age
• HTML provide you a lot of ways to layeout your
page letter. This lesson will teach you how to use
the <div> tag effectively. In addition, you will also
learn html 5 new elements to make appropriate
and meaningful divisions to your web page
 GOOD WEB DESIGN BASICS
• Creating multiple columns that clearly divide your webpage into various
logical.
A menu column-should contain a list of links to other pages to your website.
This will help your visitors get around regardless of what page they are in.
A main content column(holds the text you are currently reading)- this
column should render the main text and graphics which defines what your
webpage is about. This should be kept narrow enough to facilitate easy
reading. A computer is typically mush wider than a page in a book or a
column in a newspaper or magazine. A lot of text spanning across the entire
screen quickly becomes tiresome to read an comprehend.
 THINKING DIVISION
• The most poplar of reading a web page is by constructing tables . You
will learn about tables and how to organize your webpage in chapter 4.
this method of partitioning a web page have become obsolete. Web
designers today are geared towards a more appealing way of separating
contents into sections which is called the division-based layout.
• A division-based layout defines the area of a page with <div> tags. Each
part of the page you want to format separately should be a division
 ADVANTAGES OF A
DIVISON-BASED LAYOUT
1.You can place layout styles externally, and
then make style changes to many pages at
once simply modifying the style sheet.
2.It reduces the number of lines of codes
needed to produce a page
 WHAT IS DIV TAG?
The <div> tag is used to
establish separate divisions or
areas of your webpages
 WHAT IS A MAST HEAD?
• A masthead is used s the title of a newspaper or periodical as it
appears across the first page, front cover, or title page of each
issue. On the internet, a masthead is a graphic image or text
title at the top of the web page that identifies the website or
particular sections, of the site. Aside from the title of the
website, it includes other elements such as image, text, and
navigational links
 THE ID ATTRIBUTE
• The id attribute can be used with any tag element. When used along with the <div>
tag. It will indentify and define an area of your page
• The truth of id’s:
1. As a unique identifier, the id’s value should be only be used once on your
webpage.
2. The value is case sensitive
<div>=“title”> is different from <div id= “title”>
3. Start id value with a letter followed by any of these: letters,number digits(1-9),
dashes(-), and underscore(_). Don’t use spaces or any other special characters