http://xdesigns.net/2013/06/how-to-create-website-html5/
This tutorial will show you how to Learn how to create a simple Html5 website using Html5 & CSS code from the scratch.
This tutorial will show you how to Learn how to create a simple Html5 website using Html5 & CSS code from the scratch.
HTML5 is a W3C specification that defines the fifth major revision of the Hypertext Markup Language (HTML). One of the major changes in HTML5 is in respect to how HTML addresses Web applications. Other new features in HTML5 include specific functions for embedding graphics, audio, video, and interactive documents. It’s completely open and controlled by a standards committee, of which Apple is a member. HTML5 introduces a number of new attributes, input types, new features, easy option and other elements for your markup toolkit.
Step 1 : This is the simple design layout that we are going to build using HTML5.
Step 2 : First create the below files and folder
* index.html (File) - Here we will build the basic html5 website.
* style.css (File) - Where to define styles against any HTML element.
* images (Folder) - Used to store images used in the basic html5 website.
* index.html (File) - Here we will build the basic html5 website.
* style.css (File) - Where to define styles against any HTML element.
* images (Folder) - Used to store images used in the basic html5 website.
Step 3 : Always ensure to start the Html5 website with <!doctype html> before any other HTML code, so that the browser knows what type of document to expect.
The doctype for HTML5 is very simple than the previous versions of HTML. The <!DOCTYPE> tag does not have an end tag.
Step 4 : Hence the skeleton structure of a simple basic Html5 website is
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
Step 5 : Html5 uses the new sectional and structural semantic elements such as
* <header></header> (i.e, instead of <div id =”header”></div>) - Specifies a header for a document or section.
* <nav></nav> (i.e, instead of <div id =”menu”></div>) - Represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
* <article></article> - Used to represent an article that is independent/self-contained content on the site.
* <section></section> – Represents a generic section of a document. And also a thematic grouping of content, typically with a heading. It can be nested inside sections, articles, or asides.
* <aside></aside> - Represents a section of a page containing not the main content of the page but some content which is indirectly related to the main content.
* <hgroup> (i.e, <h1> to <h6>) - Represents the heading of a section, which consists of all the <h1> to <h6> element children of the hgroup element. The element indicate subheadings or subtitles.
* <div id=”footer”></div> - The ending elements.
* <a href> - The ‘link tag’ or the ‘hyperlink tag’. This makes text ‘hyper’ so that when we click on it we can load another page or activate/call some JavaScript.
Step 6 : The image below is the outline of the parts of our HTML webpage.
Now define the basic skeleton structure of the HTML webpage using the new structural elements specified in Step 5. Here is a simple example of some code that uses these elements.
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
The <body> tag includes all the main page’s structure.
<!doctype html>
<html>
<head>
</head>
<body>
<header></header>
<h1></h1>
<nav></nav>
<article>
<section></section>
<section></section>
<section></section>
</article>
<aside></aside>
<div id=”footer” ></div>
</body>
</html>
<html>
<head>
</head>
<body>
<header></header>
<h1></h1>
<nav></nav>
<article>
<section></section>
<section></section>
<section></section>
</article>
<aside></aside>
<div id=”footer” ></div>
</body>
</html>
Step 7 : Have a rough structure of all the element in the html layout, so that it will be easy to code the css. We need to start with the basic page structure. In this case we will use some dummy content to create the two column website.
Step 8 : We can wrap all the tags inside the divisions of the <body> tag using the “wrapper” tag for centering the content in the browser.
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″> – Used to declare the charset
</head>
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″> – Used to declare the charset
</head>
<body>
<div id=”wrapper” > – The wrapper tag includes the closing ‘content’ div tag
<header><h1></h1></header>
<nav>
<a href=”#”>Home</a>
<a href=”#”>About Us</a>
<a href=”#”>Services</a>
<a href=”#”>Contact</a>
</nav>
<article>
<section id=”article1″><h2></h2></section>
<section id=”article2″></section>
<section id=”article3″></section>
</article>
<aside></aside>
<div id=”footer” ></div> – The footer tag includes the closing ‘content’ div tag
</div>
</body>
</html>
<div id=”wrapper” > – The wrapper tag includes the closing ‘content’ div tag
<header><h1></h1></header>
<nav>
<a href=”#”>Home</a>
<a href=”#”>About Us</a>
<a href=”#”>Services</a>
<a href=”#”>Contact</a>
</nav>
<article>
<section id=”article1″><h2></h2></section>
<section id=”article2″></section>
<section id=”article3″></section>
</article>
<aside></aside>
<div id=”footer” ></div> – The footer tag includes the closing ‘content’ div tag
</div>
</body>
</html>
Step 9 : Let’s first start styling for the page element wrapper, header and navigation in the division. Then for the main content section with a featured article with sections, a sidebar and finally a footer.
Step 10 : CSS rules are coded and stored in an external file, named “style.css” separately. And also linked to the style inside the head tag to reuse the CSS code on many pages.
<link href=”style.css” rel=”stylesheet” type=”text/css” />
Step 11 : The wrapper is holding the page togather. Hence we can wrap and restrict the overall page width to 900px and center of the browser. It’s a division so we have to use the symbol “#” before the code in the CSS style sheet.
In addition, always remember “margins” will include the spacing outside the box and “paddings” will include the spacing inside the box.
Note : margin:10px 7px 0 auto; – Here the first value is for the Top portion of the box(i.e, 10px), second value is for Right portion of the box(i.e, 7px), third value is for the Bottom portion of the box(i.e, 0px) and the fourth value is for the Left portion of the box(i.e, auto),
#wrapper{
background-color:#333;
float:inherit;
width:900px;
position:relative; - To define the position for some browsers
margin:0 auto 0 auto; - margin-right/left is set to auto meaning the content will always be centered inside the browser.
}
background-color:#333;
float:inherit;
width:900px;
position:relative; - To define the position for some browsers
margin:0 auto 0 auto; - margin-right/left is set to auto meaning the content will always be centered inside the browser.
}
Step 12 : Next, we set the height of the header area to 100px and width to 875px.The actual width of the header is 900px, but here we have given spacing to the box through padding and adjusted those space in the width. All the content & images will be aligned left with float:left.
header{
float:left;
width:875px;
height:100px;
background-color:#333; – Represents the background color
font-family:Arial, Helvetica, sans-serif; - Represents the font type
font-style:normal;
font-size:30px; – Represents the font size
padding:50px 0 5px 25px;
color:#FC0; – Represents the text color
}
float:left;
width:875px;
height:100px;
background-color:#333; – Represents the background color
font-family:Arial, Helvetica, sans-serif; - Represents the font type
font-style:normal;
font-size:30px; – Represents the font size
padding:50px 0 5px 25px;
color:#FC0; – Represents the text color
}
Step 13 : Now we have to style the rest of the elements similar to “Step 12″ but the structure of the tags is set up differently with some position and arrangement changes. The css code which we have used for our website page is below
nav
{
float:left;
width:875px;
height:30px;
background-color:#FC0;
font-family:Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size:12px;
color:#333;
padding:17px 0 3px 25px;
}
{
float:left;
width:875px;
height:30px;
background-color:#FC0;
font-family:Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size:12px;
color:#333;
padding:17px 0 3px 25px;
}
article{
float:left;
width:650px;
background-color:#333;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
line-height:21px;
color:#CCC;
padding:25px 25px 5px 25px;
}
float:left;
width:650px;
background-color:#333;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
line-height:21px;
color:#CCC;
padding:25px 25px 5px 25px;
}
aside{
float:left;
width:170px;
background-color:#666;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
color:#CCC;
padding:25px 15px 10px 15px;
line-height:16px; - To increase readability of the content, you can increase the overall line-height of text to 16px.
}
float:left;
width:170px;
background-color:#666;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
color:#CCC;
padding:25px 15px 10px 15px;
line-height:16px; - To increase readability of the content, you can increase the overall line-height of text to 16px.
}
#footer
{
clear:both;
width:875px;
height:30px;
background-color:#FC0;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
color:#333;
padding:20px 0 0 25px;
}
{
clear:both;
width:875px;
height:30px;
background-color:#FC0;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
color:#333;
padding:20px 0 0 25px;
}
The “clear:both” tag make sure that the footer actually is displayed below the main article; it explictly tells the browser that no floating elements are allowed on both sides of the footer.
Step 14 : The hgroup tag is specified with the font type “Arial” and line height of 21px. To increase readability, you can increase the overall line-height of text to 21px.
h1,h2,h3{
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
}
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
}
Step 15 : The ‘link tag’ or the ‘hyperlink tag’ on rollover it should change the color or font size, etc. Here I am going to change the color of the navigation/hyperlink text in rollover and define the text-decoration with underline. The code can be seen below
nav a{
color:#000;
text-decoration:none;
}
color:#000;
text-decoration:none;
}
nav a:hover{
color:#919191;
text-decoration:underline;
}
color:#919191;
text-decoration:underline;
}
a{
color:#FC0;
text-decoration:none;
}
color:#FC0;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
text-decoration:underline;
}
Step 16 : We can add class and ID attributes to the tags. So, if you wanted to style a section separately, then simply add a class or ID to the tag and you can apply the style for that. I have defined a class for the images(i.e, <div class=”t_images”>) which is to represent the images in 3 rows and 2 columns. I have coded the css as below
.t_images
{
float: left;
width: 155px;
border: 1px solid #999; - Add a thin border with the color #999 to the div.
margin: 0 15px 25px 15px;
padding: 5px; - The border of the image is added with 5px padding and to move it away from the images.
}
{
float: left;
width: 155px;
border: 1px solid #999; - Add a thin border with the color #999 to the div.
margin: 0 15px 25px 15px;
padding: 5px; - The border of the image is added with 5px padding and to move it away from the images.
}
Step 17 : That’s it! so here’s what we have created the html5 page looks like now.
