Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Premium
Register
Login
How To Create Layout In HTML5
Ajay Malik
Jul 01, 2016
9.5k
0
9
WhatsApp
In this article, you will learn how to create layout in HTML5 and CSS3.
my.rar
HTML5 has new attractive tags to create a layout in an easy and simple way. These tags are listed below:
<header>: used to define a header section in HTML doc.
<nav>: used to define a navigation bar in HTML doc.
<section>: used to define a section in HTML doc.
<article>: used to define an independent self contained article in HTML doc.
<aside>: used to define a content aside from the content like a sidebar in HTML doc.
<footer>: used to define a footer for a document or a section in HTML doc.
<details>: used to define additional details in HTML doc.
<summary>: used to define a heading for the <details> element in HTML doc.
Now, start creating a layout, step by step.
Here, I am using Notepad to write HTML code but if you want to use the HTML editor, it's up to you.
Step 1:
Open Notepad and save the file with .html extension (shown in the image below):
After clicking on the save button, the file is saved as an HTML document
Step 2:
Open HTML (index) file,
After opening the file, we write our HTML code here.
Html code
<!DOCTYPE html
>
<
html
>
<
head
>
<
title
>
my layout
</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"my.css"
>
</
head
>
<
body
>
<
header
id
=
"header"
>
<
h1
>
c# corner
</
h1
>
</
header
>
<
nav
id
=
"nav"
>
<
ul
>
<
li
>
<
a
href
=
"#"
>
Home
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
About
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
Article
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
Contact
</
a
>
</
li
>
</
ul
>
</
nav
>
<
aside
id
=
"side"
>
<
h1
>
news
</
h1
>
<
a
href
=
"#"
>
<
p
>
creating html website
</
p
>
</
a
>
<
a
href
=
"#"
>
<
p
>
learn css
</
p
>
</
a
>
<
a
href
=
"#"
>
learn c#
</
a
>
</
aside
>
<
article
id
=
"article"
>
<
h1
>
Lorem ipsum
</
h1
>
<
p
>
Lorem ipsum dolor sit amet, mei cu dolor tamquam impedit. Congue partiendo cu sed, quo eu ipsum offendit. Ad mei nulla patrioque torquatos, adhuc recusabo eum in. Omnium scriptorem ad nec, vidit iracundia vim in.
</
p
>
<
p
>
Stet epicuri an eum, tempor utroque fierent mei ei. Mei veri indoctum splendide id, eum eu scaevola efficiendi neglegentur. Per no aliquando instructior. Has tempor admodum quaerendum ei.
</
p
>
<
p
>
No latine detraxit praesent duo, porro soleat copiosae ne cum. Labitur nostrud et pro, mel ut dolor vidisse. Ad liber oporteat qui, te est sumo integre commune, ne sed dico nihil. Ex vel commodo equidem reformidans, sit in elitr repudiandae, ne est tritani suavitate. Ei augue audiam vivendo vim. Vim ut facer instructior, partiendo qualisque ad est. Nam eu autem illud iriure, eleifend praesent expetendis in nam, mutat commune ius ea.
</
p
>
<
p
>
Ei eos enim exerci persequeris. Ea est veri omnium probatus, scripta sensibus eu ius, no pri semper maluisset cotidieque. Cum mollis phaedrum concludaturque ne, ad aliquid detraxit mel. Ad nam habeo apeirian, an eleifend evertitur intellegam per. At albucius offendit cum.
</
p
>
<
p
>
Ea usu atqui choro tation. Ei eius salutandi adversarium vis, mentitum accommodare ullamcorper nec ei. Alterum invenire suavitate usu ei, eam invenire efficiantur at. Ex cum tale prodesset, ius ad minim timeam adipiscing. Eu appetere invenire mediocritatem est. His nibh mazim neglegentur ad, qui assum consul qualisque et.
</
p
>
</
article
>
<
footer
id
=
"footer"
>
copyright @c# corner
</
footer
>
</
body
>
</
html
>
I have provided ID in HTML tags for styling. Open index.htm in the Web Browser.
Our Webpage looks as shown in the image below:
Our Web page is not looking good. In the next step we are going to change our Webpage view, using CSS.
Step 3:
Open new file in Notepad and save with .css extension (shown in the image, given below):
Open my.css file in Notepad and write the code.
Css code
#header
{
color
:
#247BA0
;
text-align
:
center
;
font-size
:
20px
;
}
#nav
{
background-color
:
#FF1654
;
padding
:
5px
;
}
ul{
list-style-type
:
none
;
}
li a {
color
:
#F1FAEE
;
font-size
:
30px
;
column-
width
:
5%
;
}
li
{
display
:
inline
;
padding-left
:
2px
;
column-
width
:
20px
;
}
a{
text-decoration
:
none
;
margin-left
:
20px
}
li a:hover{
background-color
:
#F3FFBD
;
color
:
#FF1654
;
padding
:
1%
;
}
#side
{
text-align
:
center
;
float
:
right
;
width
:
15%
;
padding-bottom
:
79%
;
background-color
:
#F1FAEE
;
}
#articl
e{
background-color
:
#EEF5DB
;
padding
:
10px
;
padding-bottom
:
75%
;
}
#footer
{
background-color
:
#C7EFCF
;
text-align
:
center
;
padding-bottom
:
5%
;
font-size
:
20px
;
}
Save file and run HTML file in web browser
Our webpage is looking better(shown in picture),
Now, learn the attributes in my.css file, shown below:
#header
{
color
:
#247BA0
;
text-align
:
center
;
font-size
:
20px
;
#header
is id used in <header> for styling.
color
- is to set text color.
text-aling
is used to aline text or show text in center.
font-size
to set font size.
#nav
{
background-color
:
#FF1654
;
padding
:
5px
;
}
#nav is id of <nav>.
Background-color is used to set the background color of our navigation bar.
Padding is used to expand our navigation bar.
ul{
list-style-type
:
none
;
}
Here, we remove dot from the list element,
li a:hover{
background-color
:
#F3FFBD
;
color
:
#FF1654
;
padding
:
1%
;
}
Hover is used for the navigation bar hover.
CSS3
Html5
Layout in Html5
Web Development
Recommended Free Ebook
Grid structure in css
Download Now!
Next Recommended Readings