Creating a Website Layout Design

First if you are going to create a website, as the basis of an early form of website creation.

Okay we just ...
I would use notepad ++ software for free, to make the layout this time I will invite you to create a design with two columns with content section to the left and on the right to put navigation and all sorts of forms.

For that please you must first create a folder to put the files the results of practice, for example, I create a folder Chapter 1 Layout website

Creating a Website Layout Design

Then you open the folder and create another folder called images that serve to accommodate images.

Creating a Website Layout Design

Copy the image files from the downloaded file I included in the POST PRIOR contained in Chapter 1 Creating a layout folder, the image file there are 2 pieces of files that header.jpg and footer.gif.

Creating a Website Layout Design

Creating an HTML file layout

Okay ... now you open your notepad ++, or if you can use your normal software then type the following HTML code:

Creating a Web Layout
media="all" />

A description of the above code:

  1. The above code pure HTML code and you have made a DIV tag with each given selector ID, you still remember the course with selector ID that is separated from the header, navigation menu, content, context menu, footer.
  2. The code comments in red require you to enter the content or articles, because if you do not fill up with articles then the results will not be visible (in the example file I gave the article).
  3. I make bold code is the link to join the HTML file with CSS files. 

Then save it in a folder Chapter 1 Creating a layout that you have created, name it with index.html , if you run with the click 2 times the appearance is still not known only writing of content just because you do not make the CSS code that aims to design the look and layout of a web page you.

Create CSS layouts

Okay now we make its CSS file to create the look of your website layout. 
Here's the code of the CSS file:

* {
margin: 0;
padding: 0;
body {
font-family: Arial, Helvetica, sans-serif;
margin:0 auto;
#right {

The description of the above code:

  • Code* {margin: 0; padding: 0;}is giving orders in general that margins and padding to the value 0.
  • Codebody {...}gave orders to make the font of the entire body with font Arial, Helvetica, sans-serif.
  • Code#container {...}to create a framework of web pages with a width of 1,000 pixels with the middle position because of his margin of 0 and made Auto.
  • Code#header {...}to form a header with background image header.jpg without looping image (no-repeat) image position in the middle and given a yellow background, with width and height 1.000px 160 px.
  • Code#menu {...}to create a navigation menu background color to # 993 300 1000 px width and 35 px tall.
  • Code#content {...}to create a 700 px wide framework for articles with background color with gray (#ebebeb) and positioning Float left (stuck / flowing left).
  • Code#right {...}means the right column with a frame width of 300 pixels with a gray background color with Left float placement.
  • Code#footer {...}make footer.gif footer with background image, width of 1000 px, 128 px tall, left Float placement.

Then after that you saved in a folder named Chapter 1 Layout website style.css.

Creating a Website Layout Design

If true, the display of the contents of the folder you created as the picture above.  

To see the results please click 2 times in index.html and this is the result.
Creating a Website Layout Design


  • The above results for the articles had my fill by taking from the internet.
  • To the article does look a bit ugly because we have not designed the piece of content, will be discussed in a separate matter.

Further material is: Make Menu Navigation.

If you have any questions please comment. 

Do not forget to like and share. 

Learning Programming in . 🙂

Spread the love

Fajar (Ucup)

The owner and author of and also someone who likes to share interesting information with others.

Leave a Reply

Your email address will not be published. Required fields are marked *