2 Aug

Basic HTML5 CSS3 design from scratch

Basic HTML5 CSS3 design
Share Button

 

Build HTML5 CSS3 design from scratch

This tutorial is meant for beginners in html5 and css3. Here, we’ll create a simple html5 css3 layout from the scratch. You may use any editor of your choice but do not use any word processor like Microsoft Word, which makes the file unreadable by browsers. Any plain text file, notepad will be good to start.  Below is the basic html5 template to start your code. Create an index.html file and place the below code into that. Template

<!DOCTYPE html>

<html>

<head>

    <meta charset=”UTF-8″>

    <title>Untitled Document</title>

</head>

<body>

</body>

</html>

Doctype declaration tells the browser html version of  the page. <meta> tag specifies the character encoding of our page. If we want to use Unicode characters, we need to include this at the top. Every html page have <h1> tag. Paragraph is marked up with <p> element. Header contains navigation with links and banner.

 

So, below is the layout which we are going to design in this tutorial.

2basic

This is a very simple design, so first let’s frame it in a pen and paper. Image   To keep it simple and short, I have included the stylesheet in the html document itself inside <head> tag, but as more and more styling required for the page, it’s better to write in an external stylesheet.

html5 ouline

1.  Creating the head – Doctype, Meta Tags and Styles

 2. Creating the Body

As per the outline provided above, we can add everything on left hand side in an article. The <article> tag helps describe that content. We can further add section in an article. Right hand side of the document is a good place to show related links, glossary etc. This can be done with<aside> tag.

Navigation is vital to the success of a website. Let’s add a navigation section to our document’s header. We’ll add links to the blog’s home page.

 

Article The <article> tag is the perfect element to describe the actual content of a web page. With so many elements on a page, including headers, footers, navigational elements, advertisements, widgets, and social-media sharing buttons, it might be easy to forget that people come to a site because they’re interested in the content you’re providing. The <article> tag helps to describe that content.

Once the html part is ready, can go ahead and styles to the document. We add a little margin to the right side of each <li> so we get space between each menu entry.

 

The overall code looks as below.

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Travel blog</title>
    <style>
 body {
background: #F0F0E0;
color: #403880;
font-family: sans-serif;
}
h1,
 {
color: navy;
font: 1.375em “Arial Black”, Arial, sans-serif;
/* letter-spacing: .4em;
text-align: center;*/
}
h1 {
text-transform: uppercase;
}
h2 {
font-size: 1.15em;
font-variant: small-caps;
}
nav ul
{
        list-style:none;
}
nav ul li
{
        display:block;
        float:left;
        padding:3px 15px;
}
nav ul li a
{
        font-family: ‘Open Sans’, sans-serif;
        text-transform:uppercase;
        transition: all .25s ease;
        text-decoration: underline;
        font-size: 18px;
        font-weight: bold;
        color:#006000
}
nav ul li a:hover
{
        color:#E56038;
}
p {
font-size: .875em;
line-height: 1.6;
text-align: justify;
    margin: 0;
/*text-indent: 1.5em;*/
}
em {
font-weight: bold;
}
body {
width: 820px;
margin: 0 auto;
}
/* Article */
article, aside {
float: left;
}
article {
width: 570px;
}
article p img {
float: left;
margin-right: none;
}
/* Sidebar */
aside {
background: #006000;
    color: #FFFFE0;
margin-left: 20px;
margin-top: 72px;
padding: 0 15px;
width: 200px;
}
aside h1 {
font-size: .95em;
padding-top: 8px;
text-transform: none;
}
aside ul {
margin-left: 0;
padding-left: 20px;
}
aside p,
aside li {
font-size: .8em;
}
aside cite {
font-style: normal;
}
/* Footer */
footer {
background: #006000;
clear: both;
padding: 5px 10px 10px;
}
footer p {
font-size: 1em;
margin: 0;
    color: #FFFFE0;
}
    </style>
</head>
<body>
    <div id=”container”>
    <header>
    <nav>
        <ul>
            <li><a href=”#”>Home</a></li>
            <li><a href=”#”>Places</a></li>
            <li><a href=”#”>About Me</a></li>
            <li><a href=”#”>Contact Me</a></li>
        </ul>
    </nav>
    </header>
    </div>
    <article class=”seadetails”>
        <h1> The scenic beauty of sea shore</h1>
        <img src =”sea.jpg” width=”500″ height=”200″ alt=”sea shore”/>
        <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
        <section>
<h2 id=”section1″>Coastal Region</h2>
<p><img src=”arabsea.jpg”  width=”100″ height=”100″ alt=”arab sea” /> 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</section>
    </article>
    <aside>
<h1>Other Coastal Regions </h1>
<p>My country has wonderful scenic beauty:</p>
<ul>
<li>Andaman and Nicobar Islands</li>
<li>Lakshadeweep </li>
<li>Daman and Diu</li>
<li>Bay of Bengal</li>
<li>Goa</li>
</ul>
</aside>
    <footer>
<p>&copy; Zaza Traveller.</p>
</footer>
</body>
</html> 

Well, this is the end of first tutorial which will give you a taste of html5 and css3 easy layout. Try out this code in your editor and change the css as much as you can to experiment with the styling. HTML5 and CSS3 provides lots of features and rich user experiences and has a long way to go.

Share Button