Sections
in HTML document scope.jpg)
.jpg)
-
Every HTML document scope comprises of 2 major
sections
o Head
Section
o Body
Section
Head Section:
-
Head section comprises of content, which is intended
to load into memory when page is requested by client.
-
The content from memory of browser can be
accessed by page or browser when ever required.
-
Typically head section is defined with <head>
</head>
-
It comprises of contents like
o
Title
o
Link
o
Meta
o
Script
o
Style
Title Element:
-
It comprises of title, which is displayed in the
browser title bar.
-
The title is also used in bookmarking the page.
<html lang="en-IN">
<head>
<title>Amazon Shopping</title>
</head>
</html>
Link Element:
-
It is used to link external files to your web
page.
-
External files include short cut icons,
stylesheets etc.
Ex: Link Shortcut Icon to Web Page [Favicon]
-
Favicon must be an “icon” file with extension “.ico”
-
Size of icon is between 16x16 pixels and 32x32
pixels
-
Create a new folder by name “Icons” in your
project.
-
Add a new file into “Icons” folder by name “favicon.ico”
-
Right Click on Icons folder and “Reveal in
Explorer”
-
Right Click on “icon file” and select “Open with
Paint”
-
Set the page size 32 x 32 pixels
-
Design your icon
-
Save
-
Go to your web page and link the icon file
<html lang="en-IN">
<head>
<title>Amazon Shopping</title>
<link rel="shortcut icon" href="Icons/favicon.ico">
</head>
</html>
Note: Never use physical path
directly in web development.
FAQ: When to use “\” back slash “/” forward
slash?
-
Virtual Path: “/” forward slash “Icons/favicon.ico”
-
Physical Path: “\” back slash “C:\Icons\Favicon.ico”
Meta in Head Section
-
The terms meta refers to “Meta Data”.
-
Meta Data contains information about your page,
which is provided to SEO [Search Engine Optimization] to make the page more SEO
friendly.
-
Meta is one of the options used in SEO. It
Is not only the option for SEO.
- Meta is also used for Responsive Pages. It is not only the options for Responsive.
<!--Document declaration-->
<!DOCTYPE html>
<!--Document Scope-->
<html lang="en-IN">
<head>
<title>Amazon Shopping</title>
<link rel="shortcut icon" href="../Icons/favicon.ico">
<meta charset="utf-8">
<meta name="keywords" content="Best Software Traning, Best IT Training, in Hyd, Chennai, US">
<meta name="description" content="something about your website..">
<meta name="author" content="Author Name for Blog">
<meta http-equiv="refresh" content="4">
</head>
</html>
Body Section
-
It comprises of content to display in browser
workspace.
-
The body section is configured by using “<body>”
element.
Syntax:
<body>
Some content
</body>
-
Body tag comprises following attributes
|
Attribute |
Description |
|
bgcolor |
It
sets a background color for page. |
|
text |
It
sets color for text in page. [Foreground color] Ex: <body bgcolor="red" text="yellow"> Welcome to Amazon
Shopping </body> |
|
background |
It
sets a background image for body section. Ex: <body
background="../Images/banner3.jpg"
text="white"> Welcome to Amazon
Shopping </body> |
|
alink
|
It
defines color for active link. |
|
vlink |
It
defined color for visited link. Ex: <body
vlink="green" alink="red"> <a
href="home.html">Home</a> <a
href="http://www.amazon.in">Amazon</a> </body> |
|
leftmargin |
Sets
the space between the content and browser window. Ex: <body
leftmargin="50" rightmargin="50" topmargin="50"
bottommargin="20"> Some paragraph.. </body> |
|
rightmargin
|
|
|
topmargin
|
|
|
bottommargin
|
|
|
align
|
It
aligns the entire body content to left, center, right or justify Ex: <body
align=”justify”> </body> |
Semantics of HTML Body
-
Semantic elements are the elements used for a
generic purpose.
-
HTML 5 body section introduced new semantics
that can make body content more SEO friendly.
-
HTML 5 body section related semantic elements
are container elements.
-
A container comprises of content like text,
headings, tables, pictures etc.
|
aside |
It
is a container used to define content, which is not relative to current
website. |
|
article |
It
is a container used to define content, which is relative to the current
website and which summarizes the topics. |
|
dialog |
It
is a container, which can popup and allow interactions with page. |
|
figure |
It
is used to encapsulate any image with caption. |
|
figcaption |
It
is used to define a caption for image. |
|
header |
It
defines the content to display at the top margin of page. |
|
footer |
It
defines the content to display at the bottom margin of page. |
|
section |
It
defines the content between header and footer. |
|
main |
It
defines the main content in section. |
|
nav |
It
defines the navigation area. |
|
menu |
It
defines the items used for navigation. |
|
div |
It
is a container used for division of content in page. |
|
span |
It
is a container used to span with existing content. |
<!DOCTYPE html>
<html>
<head>
<title>Layout Design</title>
<style>
header
{
background-color: maroon;
color:white;
text-align: center;
font-size: 24px;
border-radius: 30px;
}
footer
{
background-color: maroon;
color:white;
text-align: center;
font-style: italic;
border-radius: 30px;
}
section {
height: 500px;
}
main {
text-align: center;
}
menu div
{
width: 200px;
background-color:maroon;
color:white;
text-align: center;
font-size: 23px;
margin-top: 20px;
padding: 10px;
border-radius: 30px;
}
menu div:hover {
background-color: black;
color:white;
cursor: grab;
}
main {
font-size: 23px;
}
main span {
background-color: yellow;
color:red;
font-size: 32px;
font-weight: bold;
}
aside {
float:right;
height: 40px;
width: 100px;
border:2px solid maroon;
font-size: 20px;
}
article {
text-align: center;
margin-top: 100px;
margin-left: 600px;
position: absolute;
border:2px dotted maroon;
padding: 20px;
border-radius: 20px;
background-color: lightgreen;
}
</style>
</head>
<body>
<header>
Amazon Shopping
</header>
<section>
<aside>
ads here..
</aside>
<article>
<div>DEC Sale 70%</div>
<div>Latest Updates</div>
<div>News..</div>
</article>
<nav>
<menu>
<div>Home</div>
<div>Electronics</div>
<div>Footwear</div>
<div>Fashion</div>
</menu>
</nav>
<main>
Year End Sale. <span>Amazon offers 50% OFF</span>. Ends on DEC - 30.
<figure>
your image
<figcaption>Fig:1</figcaption>
</figure>
</main>
<dialog open>
Chat with HR
</dialog>
</section>
<footer>
<div>© copyright 2020 Amazon</div>
<div>Electronics | Footwear | Fashion | Support</div>
</footer>
</body>
</html>Note: Don't worry about the style tag or css properties. We'll learn them in CSS chapter. For Now, just observe the structure of the body section.OUTPUT: