BeWebmaster

Simple web site from scratch part 1: Layout

Ad

This tutorial will guide you through the creation of a simple personal web site using HTML and CSS. It is perfect for users who are just starting to use CSS and HTML. You will learn HTML, CSS and some design basics.

Every web page consist of four basic HTML tags: <html>, <head>, <title> and <body>.  Each tag has a corresponding closing tag: </html>, </head>, </title> and </body>.  Here is how these elements are used.

<html>
<head>
<title>BeWebmaster</title>
</head>
<body>

</body>
</html>

 The <html> tag goes on the top and at the end of every page. All other tags go in between.

Each web page contains two sections, the header, and the body.   The <head> tag, represents the first section. You can imagine it as the section that introduces the web page by including a <title> tag. Besides telling us the title of the page, the <head> tag can contain other tags (<link..., <meta..., <script...) that can define the look and behaviors of the web page.

The main section, called the body, is represented by the <body> tag, which holds everything that is displayed on the web page.

Before we continue, save the HTML code above as an index.htm file.

Layout

Now that we have the foundation of our web page, let's create a two column layout using Cascading Style Sheets (CSS). CSS is used to organize and format the content of the web page for better presentation. Later, we will use CSS to format the content of the web page (colors, fonts, etc...), but first we will use it to create the main layout of the page.

A typical two column layout includes four main elements: header, left column, main column, and footer.

To create this layout using CSS, we will create a style sheet for each of the main elements. To define each, we use an ID (a unique identifier for the element) which is represented by using the pound sign(#) in front of the ID name.

Let's create a CSS file and save it as styles.css

#header{

}

#leftcolumn{

}

#maincolumn{

}

#footer{

}

We just created a structure of our layout.  The next step is to write some code that will style and shape each element.  The styles we will start with are:

  • width - defines the width of the element using measuring units such as px (pixels) and %(percentages)
  • height - defines the width of the element using measuring units such as px (pixels) and %(percentages)
  • position - specifies positioning of the element.
  • float - defines where the element will appear within another element ( left or right)
  • clear - sets the sides of an element where other floating elements are not allowed.
  • margin -  defines distance between or around elements
  • padding -  defines the space between element border and content.

Header

#header{
width: auto;
height:70px;
border: 1px solid #ccc;
padding:10px;
}

width: auto;
Using auto for width is like using 100%. This means the header element does not have a fixed with, but rather a floating width that expands and contracts as the browser is re sized.

height:70px;
Here we are specifying the height of the header element to 70 pixels.

border: 1px solid #ccc;
In this example we are setting a 1 pixel border around the whole element that is solid ( other options are: dashed, dotted, double, inset, outset etc) and in hex code #ccc (gray).
Note: Hex colors are represented using six characters, two for each of the primary colors red, green, and blue. If the color you wish to use has same character for each of the primary colors, you can use only three to display your color. For example: #cccccc can be used as #ccc.

padding:10px;
This will make sure that any content added to the header is 10px away from the border. You can also specify different padding for each side. For example: 'padding: 10px 20px 30px 40px;' setts the padding on top to 10px, on right to 20px, on bottom to 30px and on left to 40px. Don't be afraid to use padding. Having text too close to borders and edges makes the page messy and hard to read.

Left Column

#leftcolumn{
width:140px;
margin: 20px 20px 20px 0px;
padding:10px;
float: left;
border: 1px solid #ccc;
}

width:140px;
We are using fixed width of 140 pixels.

padding:10px;
Padding is set to 10px. One important thing to know about width and padding is that anytime you add padding to fixed width element is that the size of that element on the screen increases by the size of the padding. In our example width is set to 140px, but after adding padding of 10px to left and right, the size of the left column will appear as 170px when viewed in the browser.

margin: 20px 20px 20px 0px;
Margin can be specified for each four sides of the element by using 'margin-top:20px; margin-right:20px; margin-bottom:20px; margin-left:20px' or, as we used it by just specifying 'margin: 20px 20px 20px 0px;' (margin: top right bottom left).

float: left;
This tells the leftcolumn to stay left. You can imagine it as aligning the element to left. 

Main Column

#maincolumn{
padding:10px;
margin: 20px 0px 20px 160px;
border: 1px solid #ccc;
}

The maincolumn is rather simple. All we are doing is making sure that there is padding, border and enough margin between it's borders and other outside elements. Notice the margin for left is 160px. This is to make sure the maincolumn border is far enough from the left edge of the browser for the leftcolumn to be displayed.

Footer

#footer{
clear:both;
width:auto;
border: 1px solid #ccc;
}

Notice use of  "clear" in the footer. Setting "clear" to "both" ensures that the footer is always displayed on below floated elements.

Putting it all together

CSS file should look like this

#header{
width: auto;
height:70px;
border: 1px solid #ccc;
padding:10px;
}

#leftcolumn{
width:140px;
margin: 20px 20px 20px 0px;
padding:10px;
float: left;
border: 1px solid #ccc;
}

#maincolumn{
padding:10px;
margin: 20px 0px 20px 160px;
border: 1px solid #ccc;
}

#footer{
clear:both;
width:auto;
border: 1px solid #ccc;
}

To add these styles to our index.htm file and make use of it we will modify index.htm to look like this. See comments for details.

<html>
<head>
<title>BeWebmaster</title>
<!-- To connect this index.htm file with our css file we use '<link'  tag. -->
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- To display the styles we created we use "<div>" tag. -->
<div id="header">Header</div>

<div id="leftcolumn">Left Column</div>

<div id="maincolumn">Main Column</div>

<div id="footer">Footer</div>
</body>
</html>

Preview.

This concludes the first part of the article. In the second part we will add some graphics and content. To get notified when the second part is published, visit BeWebmaster.com home page and sign up to get new article releases in the email.