2Fast2BCn
New member
- Joined
- May 27, 2016
- Messages
- 10
- Points
- 0
Perhaps you will wonder why you should use HTML5 for your websites or blogs. Actually there are many reasons, but the most important reason is you have to work with the international standards in the field of web design. That HTML5 is not only a technology of the future, but also more web deveopers are developing it. If you do not equip yourself with the basic knowledge of HTML5, you will be left behind and difficult to compete with other web designers.
According to me, the best way to learn something new, that is doing with the simplest applications. And in this thread, I will be with you to manually make a simple page made of HTML5. The paragraph you refer to the following html:
How do you see, not much different than HTML4 version right? But if you'll notice the appearance of the new tags like header, nav, section and footer. We all understand the significance of how the tag works:
- The <header> tag is used to specify the title of the article or a catalog, you can use the <header> in the same text.
- The <nav>: This tag is used to contain the main menu of the website.
- tag <section>: This tag defines the partition in a web page, you will notice in the above html snippet, this tag is used to divide the contents to the left and right of the web page.
- The <footer>: Based on the name tags, we also know what it's doing tasks, this tag can also be used multiple times in your site.
To complete the site that we created above should be extended to the following CSS:
The above is just a very simple example of building web using HTML5, it will give you a first look at HTML5. So if you want to learn advanced techniques, you need to learn and read more.
Good luck!
According to me, the best way to learn something new, that is doing with the simplest applications. And in this thread, I will be with you to manually make a simple page made of HTML5. The paragraph you refer to the following html:
Code:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Our First HTML5 Page</title>
<meta name="description" content="Welcome to my basic template.">
<link rel="stylesheet" href="css/style.css?v=1">
</head>
<body>
<div id="wrapper">
<header>
<h1>Welcome, one and all!</h1>
<nav>
<ul>
<li><a rel="external" href="#">Home</a></li>
<li><a rel="external" href="#">About us</a></li>
<li><a rel="external" href="#">Contacts</a></li>
</ul>
</nav>
</header>
<div id="core">
<section id="left">
<p>some content here.</p>
</section>
<section id="right">
<p>but some here as well!</p>
</section>
</div>
<footer>
<p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
</footer>
</div>
</body>
</html>- The <header> tag is used to specify the title of the article or a catalog, you can use the <header> in the same text.
- The <nav>: This tag is used to contain the main menu of the website.
- tag <section>: This tag defines the partition in a web page, you will notice in the above html snippet, this tag is used to divide the contents to the left and right of the web page.
- The <footer>: Based on the name tags, we also know what it's doing tasks, this tag can also be used multiple times in your site.
To complete the site that we created above should be extended to the following CSS:
Code:
nav {
display: block;
margin-bottom: 10px;
}
nav ul {
list-style: none;
font-size: 14px;
}
nav ul li {
display: inline;
}
nav ul li a {
display: block;
float: left;
padding: 3px 6px;
color: #575c7d;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
background: #deff90;
color: #485e0f;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 0;
text-decoration: none;
}
/* page core */
div#core {
display: block;
clear: both;
margin-bottom: 20px;
}
section#left {
width: 550px;
float: left;
margin: 0 15px;
}
section#right {
float: left;
width: 300px;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}Good luck!
