This tutorial will show you how to learn how to create a simple Html5 website using Html5 code and CSS from scratch.
Watch the demo and download! Here!
HTML5 is a W3C specification that defines the fifth major revision of Hypertext Markup Language (HTML). One of the major changes in HTML5 has to do with the way HTML approaches web applications. Other new features in HTML5 include specific functions for embedding graphics, audio, video, and interactive documents. It is completely open and controlled by a standards committee, of which Apple is a member. Also, HTML5 website maintenance is as easy as can be. HTML5 introduces a host of new attributes, input types, new features, easy options, and other elements to your markup toolkit.
Step 1: This is the layout of Simple layout that we’re going to build using HTML5.
Step 2: First create the following files and folders * 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 make sure to start the Html5 website with before any other HTML code, so the browser knows what type of document to expect.
The document type for HTML5 is very simple than previous versions of HTML. The tag does not have an end tag.
Step 4: Therefore, the basic structure of a simple basic Html5 website is
Step 5: Html5 uses the new sectional and structural semantic elements as
*
(i.e. instead of
): Specifies a header for a document or section.
*
(i.e. instead of
): represents a section of a page that links to other pages or parts within the page: a section with navigation links.
*
– Used to represent an article that is stand-alone/independent content on the site.
*
– Represents a generic section of a document. And also a thematic grouping of content, typically with a header. It can be nested within sections, articles, or asides.
*
– Represents a section of a page that contains not the main content of the page, but some content that is indirectly related to the main content.
Step 6: The image below is the outline of parts of our HTML web page.
Now define the basic basic structure of the HTML web page using the new structural elements specified in Step 5. Here is a simple example of code that uses these elements.
The tag includes the entire structure of the main page.
Step 7: Have a rough structure of all elements in the html layout, so it’s easy to code the css. We need to start with the basic structure of the page. In this case, we’ll use dummy content to create the two-column website.
Step 8: We can wrap all the tags inside the tag slices using the “wrapper” tag to center the content in the browser. – Used to declare the charset
– Wrapper tag includes closing ‘content’ div tag
– The footer tag includes the closing ‘content’ div tag
Step 9: Let’s first start styling for the page element container, header, and navigation in the slice. Then for the main content section with a featured article with sections, a sidebar, and finally a footer.
Step 10: The CSS rules are coded and stored in an external file, called ” style.css” separately. And also linked to the style inside the main tag to reuse the CSS code across many pages.
Step 11: The wrapper holds the page together, so we can wrap and constrain the full width of the page at 900px and the center of the browser.It’s a div, so we need to use the “#” symbol before the code in the CSS style sheet.
Also, always remember that “margins ” will include the space outside the box and “paddings” will include the space inside the box.
Note: margin:10px 7px 0 auto; – Here the first value is for the top of the box (i.e. 10px), the second value is for the right part of the box (i.e. 7px), the third value is for the bottom of the box (i.e. 0px), and the fourth value is for the left part of the box (ie auto),
#wrapper{ background-color:#333; float: inherit; width: 900px; relative position; – To define the position of some browsers margin:0 auto 0 auto; – margin-right/left is set to automatic, which means that the content will always be centered within the browser. }
Step 12: Next, we set the height of the header area to 100px and the width to 875px. The actual width of the header is 900px, but here we’ve given the box space via padding and adjusted those spaces in width. All content and images will be left-aligned 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; – Renders font size padding: 50px 0 5px 25px; colour:#FC0; – Represents the color of the text }
Step 13: Now we have to design the rest of the elements in a similar way to “Step 12” but the Label structure is set up differently with some position and layout changes. The css code we have used for our website page is below
article{ float:left; width: 650px; background color:#333; font family: Arial, Helvetica, sans-serif; font style:normal; font size: 12px; line height: 21px; colour:#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; colour:#CCC; padding: 25px 15px 10px 15px; line height: 16px; – To increase the readability of the content, you can increase the overall line height of the text to 16px. }
#footer{ clear: both; width: 875px; height: 30px; backgroundcolor:#FC0; font family: Arial, Helvetica, sans-serif; font weight: normal; font size: 12px; colour:#333; padding:20px 0 0 25px; }
The “clear:both” tag ensures that the footer actually displays below the main article; explicitly tells the browser that floating elements are not allowed on both sides of the footer.
Step 14: The hgroup tag is specified with the font type “Arial” and 21px line height. To increase readability, you can increase the overall line height of the text to 21 pixels.
h1,h2,h3{ font-family:Arial, Helvetica, sans-serif; line height: 21px; }
Step 15: The ‘link tag’ or ‘hyperlink tag’ in the rollover should change the font color or size etc. Here I am going to change the color of the navigation/hyperlink text on rollover and set the text decoration to underline.The code can be seen below
nav a{ color:#000; text-decoration: none; }
nav a:hover{ color:#919191; text decoration: underline; }
a{ color:#FC0; text-decoration: none; }
a:hover{ decoration-text:underline; }
Step 16: We can add class and ID attributes to the tags. So if you want to style a section separately, just add a class or id to the tag and you can apply styling for that. I have defined a class for the images (ie
) that represents 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; – Image border is added with 5px padding and to move it away from images. }
Step 17: That’s it! This is how we have created the html5 page now.
Step 18: View the demo and download it here!
I hope that you have learned how to create a simple Html5 website. Share your thoughts in the comments.
