How I can create a nice static web site template with simple HTML and CSS?

This is a simple template of a static web page. Here I use normal HTML and CSS. I do this structure with basic web design raw code. Here I do not use bootstrap framework as this is very simple and raw in hand. In this template I try to use HTML-5 semantic element. That’s why I use header, nav bar, banner, article, sidebar and footer. As all of we know that for SEO friendly, html semantic element is must. Otherwise, your site will not get proper ranking in the google and on others search engines SERPS.

The following pictures show a basic semantic website design:

This is the first part of the basic web page designs. Here I have shown Header, Nav bar and Banner of the page. There is also a brand logo of the company on the left side of the menu bar.

First part of the basic web site page

This is the second part of the basic web site page. Here I have shown main content on the left side of the article part and side bar on the right side of the article part. On the footer part, I have just shown the copy right of the company and a link of the company website domain.

Second part of the basic web site page

Now I will explain the way how can you design a simple template using HTML and CSS.

See the HTML and CSS code of id header.

HTML code

CSS Code for Header part

After the header part, I tried to show navbar part as per the Google search engine rules. Here on the left side I showed the brand logo of the company and on the right side, I showed the menu of the web pages. See in detail on the images:

HTML Code of Navbar Part

CSS Code of the navbar part

In the above, there are two images, one for HTML code and another for CSS code. In the HTML part, I chose navbar as id and then write some code and on the other image I showed the CSS code for styling the navbar design. Here two images are shown with combined with left, right.

In the next some images, I have shown banner and article of the web page. Here banner is uploaded with an img tag and for the content and side bar, class main is chosen.

Section first part HTML Code

Section last part HTML Code

In the following two images are the CSS code for the HTML part of the banner and article. Here two parts of CSS code is combined with one image for the first one and the second one is as usual.

CSS Code for banner and article part

CSS Code for aside part

This is final part of both HTML and CSS Code. Here I have used id footer for the HTML code and CSS is used accordingly with that id. Here I tried to show the code as easy as possible to maintain a clean code strategy.

The following figure will show more in detail:

Footer part HTML Code

CSS Code for the footer part of the HTML Code

These are the ways by which I designed this web page. I hope this will show you the way how you can design a simple static web page very easily with HTML and CSS Coding.

Baca juga