HTML Semantic Responsive Layout

0 360

New Semantic tags Responsive Layout Elements responsive web

in this tutorial, we will learn about New Semantic tags Responsive Layout Elements responsive web 

HTML Layout

A website can have multiple columns to show content, for designing website numbers of principle and elements used to get desired results, in another word we can say by using tags and graphics we can achieve our required result to get a useful website.

Web development

HTML
CSS
Java Script
Bootstrap
Jquery

HTML

HTML (hyper text markup language) is a markup language to create a website.

© 2015 Exception bound All Rights Reserved Contact us Terms and conditions

 

HTML website layout with Elements

we can use <div> Elements to make a layout of a html site,<div> Elements make it easy to positioning content in CSS, it is old method to make a layout but in HTML 5 new semantic tags/elements are introduced they are block level elements and mostly used to structure html web page.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML website layout with <div> Elements</title>

<style>
.header{ 
background-color:#666; 
color:white;
padding:15px;

}
h1{
background-color:#666;
color:white;
text-align:center;
margin-top:15px;
}
.nav{
background-color:#F9F9F9;
height:300px;
width:150px;
float:left;
padding:15px;
line-height:30px;
}
.article{
background-color:#ffffff;
width:350px;
float:left;
padding:10px;
}
.footer{
background-color:#767676;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>

<div class="header"> 
<h1>Web development </h1> 
</div>
<div class="nav"> 
HTML
CSS
Java Script
Bootstrap
Jquery
</div> 
<div class="article">
<h2>HTML</h2>
<p>
HTML (hyper text markup language) is a markup language to create a website, A markup language is a set of notations that specifies how the content should look in the browser.HTML derived form of a Standard Generalized Markup Language (SGML), which is the mother language of HTML. 
</p>
</div>
<div class="footer">
© 2015 Exception bound All Rights Reserved
<span style="float:left;">Contact us</span>
<span style="float:right;">Terms and conditions</span>
</div>

</body>
</html>

HTML website layout with HTML 5

In HTML 5 new semantic tags/elements are introduced they are block level elements and mostly used to structure html web page .

New Semantic tags Responsive Layout Elements responsive web

HTML 5 new semantic tags/elements

header

Header elements will define the header of our website, we can be used either at the top of document or at the top of section, most of the website currently using single heard at the top of page called masthead, but no matter we can have multiple headers in our html web page.to group an introductory content or a set of navigational links header element used as a container.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML website layout with HTML5 semantic tags/elements</title>

<style>
header{ 
background-color:#666; 
color:white;
padding:15px;

}
</style>
</head>
<body>

<header> 
<h1>Web development </h1> 
</header>

</body>
</html>

nav(navigation)

nav elements often used for navigation links/menu to jump on other linked web pages or website. nav play a most important role in a website.in other words, it allows a user to navigate through webpage and website.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML website layout with HTML5 semantic tags/elements</title>

<style>
nav{
background-color:#F9F9F9;
height:300px;
width:150px;
float:left;
padding:15px;
line-height:30px;
}
</style>
</head>
<body>

<nav> 
HTML
CSS
Java Script
Bootstrap
Jquery
</nav> 

</body>
</html>

section

It is the main information bar that contains the most important information of the document. The section element represents a section of our web document, section elements similar to a div element tag but section element has more semantic meaning. In other words, section element is more meaningful as the content inside the section tags should be related.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML website layout with HTML5 semantic tags/elements</title>

<style>
section{
background-color:#ffffff;
width:350px;
float:left;
padding:10px;
}
</style>
</head>
<body>

<section>
<h2>HTML</h2>
<p>
HTML (hyper text markup language) is a markup language to create a website, A markup language is a set of notations that specifies how the content should look in the browser.HTML derived form of a Standard Generalized Markup Language (SGML), which is the mother language of HTML. 
</p>
</section>

</body>
</html>

article

The article element represents a section of content that is independent of a Web page or site content, possible sources of the article should be Blog post News story Comment Review Forum post.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML website layout with HTML5 semantic tags/elements</title>

article{
background-color:#ffffff;
width:350px;
float:left;
padding:10px;
}
</style>
</head>
<body>

<article>
<h2>HTML</h2>
<p>
HTML (hyper text markup language) is a markup language to create a website, A markup language is a set of notations that specifies how the content should look in the browser.HTML derived form of a Standard Generalized Markup Language (SGML), which is the mother language of HTML. 
</p>
</article>

</body>
</html>

aside

aside elements represent the content which is related to the main text of the web document .it is not important to have an aside aligned to the right, top, or left side of the webpage it can be in the middle, top, or at the bottom.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML website layout with HTML5 semantic tags/elements</title>
</head>
<body>

<aside> 
<h1>HTML</h1>
<p>
HTML (hyper text markup language) is a markup language to create a website, A markup language is a set of notations that specifies how the content should look in the browser.HTML derived form of a Standard Generalized Markup Language (SGML), which is the mother language of HTML.
</p>
</aside>

</body>
</html>

footer

A footer has information related to the web document. The footer is similar like to the header but mostly developer representing footer at the bottom of the web page, there can be multiple footers in an html 5 document. A footer can represent content such as author information copyright information about policy etc.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML website layout with HTML5 semantic tags/elements</title>

<style>
footer{
background-color:#767676;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>

<footer>
© 2015 Exception bound All Rights Reserved
<span style="float:left;">Contact us</span>
<span style="float:right;">Terms and conditions</span>
</footer>

</body>
</html>

HTML Responsive

What is Responsive Website design?

New Semantic tags Responsive Layout Elements responsive web

A responsive website is that which can be deliver web pages in various screens sizes like mobile tablets and PC or laptop, now a days in market different type mobiles tablet available with different screen sizes resolutions and in pixels, to make a website responsive there are various methods can be used, to make a responsive website there are many frameworks available on the internet like foundation, bootstrap etc.

How to make responsive website with bootstrap

<!DOCTYPE html>
<html>
<head>
<title>How to make responsive website with bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>How to make responsive website with bootstrap </h1>
<p>Resize this responsive page to see the result in responsive </p> 
</div>
<div class="row">

<div class="col-sm-4">
<h3>Lorem Ipsum 1 </h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>

<div class="col-sm-4">
<h3>Lorem Ipsum 2 </h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<p>Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
</div>

<div class="col-sm-4">
<h3>Lorem Ipsum 3 </h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, </p>
<p> making it over 2000 years old. Richard McClintock, </p>
</div>
</div>
</div>

</body>
</html>

How to make responsive website yourself

<!DOCTYPEhtml>
<html>
<head>
<title>How to make responsive website yourself</title>

<style>
.header{ 
background-color:#666; 
color:white;
padding:15px;

}
h1{
background-color:#666;
color:white;
text-align:center;
margin-top:15px;
}
.nav{
background-color:#F9F9F9;
height:300px;
width:150px;
float:left;
padding:15px;
line-height:30px;
}
.article{
background-color:#ffffff;
width:350px;
float:left;
padding:10px;
}
.footer{
background-color:#767676;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>

<div class="header"> 
<h1>Web development </h1> 
</div>
<div class="nav"> 
HTML
CSS
Java Script
Bootstrap
Jquery
</div> 
<div class="article">
<h2>HTML</h2>
<p>
HTML (hyper text markup language) is a markup language to create a website, A markup language is a set of notations that specifies how the content should look in the browser.HTML derived form of a Standard Generalized Markup Language (SGML), which is the mother language of HTML. 
</p>
</div>
<div class="footer">
© 2015 Exception bound All Rights Reserved
<span style="float:left;">Contact us</span>
<span style="float:right;">Terms and conditions</span>
</div>

</body>
</html>

Comments

comments

Leave A Reply

Your email address will not be published.