Div Tag Tutorial

Define sections in your webpage

<div> </div>

Define sections in your webpage

<div> </div>

Make your text

Today, I’ll show you a way to use
div tags to format your text on
your webpage

It’s adaptive, compatible with HTML5
and works with all major browsers

Outside Box

All your web page
content goes here!
And put another
one inside it!

Outside Box
Inside Box

All your web page
content goes here!
And put another
one inside it!

Outside Box
Inside Box

All your web page
content goes here!

Outside Box
Inside Box

By the end, our page
will look like this.

Now for the code!

The code to type
will go in here

The code to type
will go in here

You will need a basic text
editor to make this code
(such as Notepad)

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

Set the language to <!DOCTYPE html>
HTML 5 <html>
<head>
The start of the This is the head section.
webpage Text here will not be
</head>
shown in the page
<body>

</body> This is the body section.
All your content will go
</html>
here

The end of the
webpage

<head>
<title> Our amazing
webpage </title>

</head>

Using the title tag, we set the title in the window.

<head>
<title> Our amazing
webpage </title>
<link
</head>

We need to use the <link> tag to point our HTML
page to our style sheet (CSS file).
The style sheet will configure what our webpage will
look like.

<head>
<title> Our amazing
webpage </title>
<link rel=“stylesheet”
</head>

The link tag is ready to take a style sheet.

<head>
<title> Our amazing
webpage </title>
type=“text/css”
</head>

The link tag is expecting a text/css style sheet.

<head>
<title> Our amazing
webpage </title>
type=“text/css”
href=“divs.css” />
</head>

With the href parameter, we tell the link tag
that the css file is called “divs.css”.

<head>
<title> Our amazing
webpage </title>
type=“text/css”
href=“divs.css” />
</head>

<body>
<div

</body>

Here’s our famous div tag!

<body>
<div id=“outerBox”>

</div>
</body>

We give this div a unique name or id. This
first one is the outerBox.

Make sure you type this exactly with the
same casing (it’s important later).

<body>
Don’t forget to close the <div id=“outerBox”>
div tag too.
</div>
</body>



<body>
<div
id=“innerBox”>

</div>
</div>
</body>
And here’s our inner box!

This is the box that will stay white while the
outside gets coloured.

<body>
<div
id=“innerBox”>

</div>
</div>
</body>

Now we have our box (div)…

<body>
<div
id=“innerBox”>

</div>
</div>
</body>

…in a box (div)!

<body>
<div
id=“innerBox”>

</div>
</div>
All our web page text is going to go in the
white box and should be pasted here.
</body>

<body>
<div
id=“innerBox”>
<p> Text here
</p>
</div>
Wrap each paragraph in <p> </p> tags to
format your text and prepare for styling.
</div>
</body>

<body>
<div
id=“innerBox”>
<p> Text here
</p>
</div>
</div>
For our real page, I’ll be using two paragraphs
</body>
generated from this site:
http://www.lipsum.com/

<body>
Go ahead and <div your
save
id=“innerBox”>
page to your desktop as
<p> Text here
“index.html” </p>
</div>
</div>
</body>

div
{

}

Here, we specify the tag to be styled.

div
{

}

And we put our properties for the tag in
between the braces { }.

div
{
border-radius: 25px;
}
This property sets the radius for
rounded corners.

div
{
}
rounded corners.

Then we specify the radius size after the
colon. We have set this to 25px (25 pixels).

Don’t forget the semicolon at
the end!
div
{
}
rounded corners.

Then we specify the radius size after the
colon. We have set this to 25px (25 pixels).

div
{
}

Now all the div tags in our webpage will
have rounded corners by default.

p
{

}

This tag, and subsequent ones, is placed
further down the file underneath one
another.

p
{
font-family: Arial;
}

Our first property is setting the font
to Arial.

p
{
font-family: Arial;
font-size: 90%;
}

Next we set a font size. We use a
percentage so that the text can be
resized by the browser.

p
{
font-family: Arial;
font-size: 90%;
text-align: left;
}

Finally, we set the alignment to
the left to make it easier to read
in our box.

p
{
font-family: Arial;
font-size: 90%;
text-align: left;
}

#outerBox
{

}
WAIT!
HANG ON!

#outerBox
{

}

outerBox isn’t a tag style you
say?

#outerBox
{

}

Well, you would be right..

#outerBox
{

}

Well, you would be right..

..this is an ID style. 

#outerBox
{

}

The little hash here indicates that
this style will apply to any tags with
the ID “outerBox”.

Remember that we gave our outer div tag the
ID “outerBox” back in our HTML page?

This is what the CSS file is looking to style.
<body>

</div>
</body>




<body>

</div>
The nice thing about CSS is that the styles cascade.
</body>
This means that our outerBox will receive the properties
for both the outerBox and the divunique name or id. This
We give this div a tag.



<body>

</div>
The nice thing about CSS is that the styles cascade.
</body>
This means that our outerBox will receive the properties
for both the outerBox and the divunique name or id. This
We give this div a tag.


…told you this was important!

#outerBox
{

}
Let’s give the outerBox some
properties

#outerBox
{
background-color:
#086CA2;
}
This property sets the div colour using
the same colour from our design
before! This is a nice blue.

Make sure you spell colour
without the “u” here.
#outerBox
Potential migraine {
averted!
background-color:
#086CA2;
}
This property sets the div colour using
the same colour from our design
before! This is a nice blue.

#outerBox
{
background-color:
#086CA2;
padding: 8px;
}

Padding is the space between the border of
the box and the content inside. This makes
an 8 pixel border for our innerBox later.

#outerBox
{
background-color:
#086CA2;
padding: 8px;
min-width: 500px;
max-width: 500px;
}
These two properties set the minimum and maximum
width respectively. The box is set to be only 500 pixels
wide and won’t expand when the window is resized.
This greatly helps readability.

#outerBox
{
background-color:
#086CA2;
padding: 8px;
min-width: 500px;
max-width: 500px;
position: absolute;
}
Setting the position to be absolute allows our box to
be “floating”. This just means we can position it
where we want on the screen without limitations.

(Think rubber duck on water in a bathtub).

#outerBox
{
background-color:
Finally, the left and right properties set the
position to be 30%#086CA2; edge on
away from the
both sides. This centers ourpadding: 8px;
box in the middle
of the window.
min-width: 500px;
max-width: 500px;
position: absolute;
left: 30%;
right: 30%;
}

#outerBox
{
background-color:
#086CA2;
padding: 8px;
min-width: 500px;
max-width: 500px;
position: absolute;
left: 30%;
right: 30%;
}

#innerBox
{

}

As you’ve probably guessed, this style is for the
innerBox in our dual-box design.

The style will be different since this box will have
our text. However, it will still retain the rounded
corners common to all div tags from before.

#innerBox
{
background-colour:
#FFFFFF;
}

In the same way as
before, we set the
background. FFFFFF is white.

#innerBox
{
background-colour:
#FFFFFF;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
}
Like before we set the padding.

This time, we specify the padding on
each side of the box; this is done to
optimize the text layout.

#innerBox
{
We also set a margin.
background-colour:
#FFFFFF;
This helps with the positioning of the box itself
padding-left: 20px;
instead of the content inside. Combined with
padding-top: 5px;
the padding of the outerBox it allows for better
positioning. padding-bottom: 5px;
margin: 5px;
}

#innerBox
{
We give the box a little transparency so that a tiny bit
background-colour:
of the blue comes through the box. If the white is too
#FFFFFF;
strong it can actually hurt your eyes.
padding-left: 20px;
At the same time, the white must be kept for the 5px;
padding-top:
readability of the text. 0.96 is a good compromise.
margin: 5px;
opacity: 0.96;
}

#innerBox
{
background-colour:
#FFFFFF;
Finally, this last property sets
padding-left: 20px;
the line spacing to 1.5 for
optimum readability.padding-top: 5px;
margin: 5px;
opacity: 0.96;
line-height: 1.5
}

#innerBox
{
background-colour:
#FFFFFF;
padding-left: 20px;
padding-top: 5px;
margin: 5px;
opacity: 0.96;
line-height: 1.5
}

#innerBox
{
Go ahead and save your
background-colour:
page to your desktop as
#FFFFFF;
“divs.css”
padding-left: 20px;
padding-top: 5px;
(remember,padding-bottom: 5px;
that’s what the
HTML page is expecting) 20px;
padding-right:
margin: 5px;
opacity: 0.96;
line-height: 1.5
}

So now that we’ve written our code, we
should test it to make sure it works the way
we think it will.

we think it will.

For webpages, this means opening the page
in all the major browsers to see what it looks
like.

we think it will.

like.

These are the browsers to test in:

Chrome Firefox Safari Internet Explorer Opera

we think it will.

like.

Each one sure likes their
These are the browsers to test in:
circles….

Chrome Firefox Safari Internet Explorer Opera

Chrome is a key browser to
test for; it is a major player in
desktop browsing.

Chrome is a key browser to
test for; it is a major player in
desktop browsing.

Google keeps this browser
very up-to-date, so we should
expect a good result.

That looks pretty good!

Our border displayed well and
is a good colour against the
white of the page.

That looks pretty good!

Our border displayed well and
is a good colour against the
white of the page.

The text is nice and readable too.

The placeholder text gives us an idea of how
paragraphs will appear; in this case they look
well spaced out and easy on the eyes.

This browser has a reputation for its
compatibility issues, yet is still a
common browser due to being the
default browser on Windows systems.

This browser has a reputation for its
compatibility issues, yet is still a
common browser due to being the
default browser on Windows systems.

If the page can look good here, we
have written some very strong code
that should work for just about
anyone.

And it does!

Thankfully, div tags and their styles are
part of basic html, so compatibility
shouldn’t be an issue.

Another key browser, known for its large
open source base as well as an
enormous extension library.

Like a grandparent, Opera has been
around for ages but, whilst innovating
some key ideas used today, it has taken
some time to catch up in many other
areas.

As expected, a good result
from Opera here.

A decent browser for Apple’s OS’s, but
recently Windows support has been
dropped in light of Apple’s litigation
against many major IT companies.

Testing has proven well
here too.

Testing has gone really well!

All of the major browsers support
our page and it’s readable on each.



Now we check that our code is
valid.



Now we check that our code is
valid.

“But what’s the difference between valid
code and working code?” you ask?

Working code is fairly self explanitory;
this is code that displays properly in the browser.

Working code is fairly self explanitory;
this is code that displays properly in the browser.

Valid code is code that follows a predefined standard.

For HTML, we adhere to version 5; CSS to version 3.

So obviously, we want to have valid code.


We can test our code by pasting our code
into the following websites:


We can test our code by pasting our code
into the following websites:

CSS
HTML
http://jigsaw.w3
http://validator.
.org/css-
w3.org/
validator/

There’s one final thing we need
to consider: accessibility.


We want our website to cater to
everyone, including people with
visual/audio impairments.


We want our website to cater to
everyone, including people with
visual/audio impairments.

Thankfully, this concept has been standardised
already with the
Web Content Accessibility Guidelines (WCAG).

There are many criteria in this
document, and not all of it will
be relevant to our div tags.


I will pick and choose the guidelines
relevant for our element and explain
how we meet the highest rating: AAA


I will pick and choose the guidelines
relevant for our element and explain
how we meet the highest rating: AAA

You can follow along with me from here:

http://www.w3.org/TR/WCAG/

(A) 1.3.1: Create content that can be
presented in different ways without
losing information or structure.


• By keeping the text black on a white background, our
key content is always readable and no content will be
lost.


• By keeping the text black on a white background, our
key content is always readable and no content will be
lost.
• The border can be recoloured to present the content
differently

(AA) 1.4.3: The visual presentation of
text and images of text has a contrast
ratio of at least 4.5:1.

(AA) 1.4.3: The visual presentation of
ratio of at least 4.5:1.

• Black text on white backgrounds far exceeds this
contrast, so the text is very visible.

(AA) 1.4.4: Except for captions and
images of text, text can be resized
without assistive technology up to 200
percent without loss of content or
functionality.

(AA) 1.4.4: Except for captions and
images of text, text can be resized
without assistive technology up to 200
percent without loss of content or
functionality.

• By having our text size as a percentage, the text can
be resized by the Zoom options in the menu.

(AAA) 1.4.6: The visual presentation of
ratio of at least 7:1.

(AAA) 1.4.6: The visual presentation of
ratio of at least 7:1.

• Again, having black text on a white background is the
best contrast ratio possible.

(AAA) 1.4.8: Visual Presentation which includes user
selectable foreground and background colors, text
width under 80 characters, unjustified text, line
spacing of 1.5, paragraph spacing at least 1.5 times
larger than line spacing, resizeable text up to 200%.


• User selectable colours means that the basic
elements of the text need to be modifiable to meet
people’s needs. Our text is very basic and can be
modified with custom CSS accessibility scripts.


• We specified a specific width for our div boxes; this
keeps the text width below 80 characters.


• Text is left-aligned and not justified


• Line and paragraph spacing has been specified.


• Line and paragraph spacing has been specified.
• Text size is a percentage, allowing zooming.

(A) 2.3.1: Web pages do not contain
anything that flashes more than three
times in any one second period, or the
flash is below the general flash and red
flash thresholds.

(A) 2.3.1: Web pages do not contain
times in any one second period, or the
flash is below the general flash and red
flash thresholds.

• No crazy flashing crap for us.
(We didn’t build an ad page, we built a website)

(AAA) 2.3.2: Web pages do not contain
times in any one second period.


• Déjà vu huh? This criteria is a AAA rating this time.


• Déjà vu huh? This criteria is a AAA rating this time.
• We still have no flashes whatsoever.

(A) 4.1.1: Follow HTML/CSS standards
(is the summary, the explanation is
laborious and unnecessarily long)

(A) 4.1.1: Follow HTML/CSS standards
(is the summary, the explanation is
laborious and unnecessarily long)

• Remember our validation just before? We already
meet these requirements by passing those tests.

And that’s it! That covers all the
WCAG guidelines for our page

And that’s it! That covers all the
WCAG guidelines for our page

Hopefully you had fun creating
your own text boxes that you can
use in your own webpages

Div Tag Tutorial

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Div Tag Tutorial

Similar to Div Tag Tutorial (20)

Div Tag Tutorial