tag but many of you guys never have a usuful look on it. As i know div tag is the backbone of a consistent css used website.
Basically div is a section you can say which separate the sections in a webpage. But div not only separate the contents but it also provides the different formating for each section.
Div and Web Design.
Introduction
If you develop web
applications then surely you know about the Div tag but many of you
guys never have a usuful look on it. As i know
div tag is the backbone of a consistent css used website.
Basically div is a section
you can say which separate the sections in a webpage. But div not only separate
the contents but it also provides the different formating for each section.
If you are using Cascading
Style Sheet for formating your website then you can use these css by including
its id in div tag. Every div tag contains a unique attribute name for id. Div
make the webpage design sections like if you are using css for creating a side
menu list then you can define a div as the setting its properties to left or
right, that means by using div tag you can group the large html contents.
From my
side: I like the div tag because it separte my web page contents which are
handy to format and looks always cool.
Now we will talk about the attributes of div tag
As we discussed in the intro,
that div tag contains an id
attribute.
ID:
ID attribute always contains a unique
name as the name suggests id.Eg:
<div id="content"
align="left"
bgcolor="white">
Content
goes here.
Explanation
Here you can see that we used properties like aligh and
bgcolor so here we have formated this div tag means a separate section not the
full webpage.
ID For CSS:
If you
are creating a CSS like then you can use ID attribute for div tag. Like if you
require to create many headings for your webpage with different styles then, a
single style will not enough.
CSS:
body
{
background-color:Silver;
}
div#head1
{
background-color:Maroon;
font-family:Comic Sans MS;
font-size:medium;
}
div#head2
{
background-color:Blue;
font-family:Book Antiqua;
font-size:medium;
}
Now you can use these in your aspx page. Like.
.aspx:
<div
id="head1">
This is heading one.
div>
<div id="head2">
This is heading two.
div>
ALIGN:
As we have used this property in
our previous example.
But even take an example of google.com notice that there are
some links on the right top when you resize the page they even appear in that
resized window.
Different alignments are:
left:
center:
right:
justify:
Example:
<div id="menu" align="right" >
<a href="login.aspx">Logina> |
<a href="register.aspx">Registera>
div>
Output goes
like this.
Just notice
the red box there are two links which we have created before when you resize
your window as it is already these links will also resize to be visible in the
webpage.
STYLE:
As the name suggests style tag is used to format the div tag.
Like setting it's background color, font etc.
Example :
<div id="content"
style="border: 3px inset Red; background-color:Silver; ">
<h3>Contenth3>
<p>This is a
formated div tag by using its style attribute.
you can define anything here like controls or which you want
in your webpage.p>
div>
Here the part of code which you have to notice is underlined.
First we use style then its properties like background-color:silver
etc.
When you type a keyword then AI will open to help you
ahead.JUST TRY.
OutPut:
DIR
Specifies
the text direction for the content in an element.
rtl: for right side.
ltr : for left side.
Example:
<div dir="rtl">
This is a example of dir attribute of div.
div>
Try this line of code, and this line will appear in the right
side of the web page.
TITLE:
Title tag is used to give the more information
to the div tag
In the browser,
you can say it a tooltip for another controls.
Example:
<div dir="rtl" title="this is right
side">