Design A Basic Website

Design Basic HTML CSS Website

A Guide for Beginners

This guide will help a beginner website designer to design a basic HTML and CSS website. To develop a basic website, a beginner website designer must have some basic knowledge about HTML and CSS.

What is HTML?

HTML: Hyper Text Markup Language
HTML creates the webpage and shows the content; text, images and videos etc.
Majority of the HTML tags work in pair as open and close tags. We will cover it later in this article.

What is CSS?

CSS: Cascading Style Sheet

CSS is a supporting style sheet for the HTML pages that is usually used by website designers to style the HTML objects on the webpage. Using CSS; web designers can define how elements of HTML like header, footer, text, images etc can be formatted on the page.

Create a webpage:

To create a webpage using HTML elements one should know the structure to use it perfectly.
All the code should wrap between html tags i.e <html>. . . </html>
After <html> tag, <head> tag will be written. In <head> tag we define <title> </title> and close the <head> tag by writing </head>.
The text between the <title>… </title> shows at the top of the page usually in the tab of the browser. Usually it contains the website name or webpage name.
After closing head tag we define <body>…. </body>. Body tag is the tag in which our page content will be written. And finally we will close the html tag using </html>.
Below is the sample code that will summarize all above theory of HTML.
<html>
<head>
<title> name of website/ name of webpage</title>
</head>
<body>
<p>HELLO WORLD</p>
</body>
</html>

The div tag <div> is used to divide the page in sections. Web designers use div tag to wrap contents inside the div and give all those wrapped contents the same design. Div tag works like a container in which we can define other HTML elements.
<div>
<h1>Heading</h1>
<p> write text content or paragraph here </p>
</div>
<h1> </h1> is for heading.

How to apply CSS on HTML tags?

CSS can be applied to HTML tags by defining class or id attribute inside the HTML tags.
Working with class:
<div class=”firstdiv”>
<p> sample content</p>
</div>

Create a new style sheet page with extension .css to give style to the HTML objects on the webpage. In this case we will file the name to stylesheet.css, you can give any name but the extension must be .css.
In style sheet we can design above div by calling its class name i.e. firstdiv.
In the stylesheet.css file. (Note: you have to create a separate file to design html objects)

.firstdiv {
background-color: gray;
width: 100%;
height: auto
}

The div containing the class name ‘firstdiv’ will be changed to the design written in stylesheet.css file.

id and class attributes difference in HTML tags:

An id can point to only a single tag, any tag can only have a different id. If we want to give particular design to any tag of HTML we can define id attribute inside that tag and can easily design according to our requirements in stylesheet.css file.
A class can point to many HTML tags so that we can give same designing to the different tags by using single class. Every web designer must know this.

CREATING OUR OWN BASIC HTML AND CSS WEBSITE:

We will create a basic webpage using HTML and CSS.

Firstly, we should know what main tags we will use to build a webpage like above.
1) Header
2) Container
3) Footer

Header screen-shot:

Main content screen-shot:

Footer screen-shot:

We will design the header first, then the content area and finally the footer.

In HTML page, we will write the following code:

<html>
<head>
<title>First Webpage</title>
</head>
<body>
<div class=”main-container”>
<div class=”header”>
<div class=”logo”>
<img src=”logo.png”>
</div>
</div>

The div with class=”main-container” will wrap all contents of the webpage inside itself.
In stylesheet.css we will design this main-container.

.main-container {
background: #383b43 none repeat scroll 0 0;
height: auto;
width: 100%;
}
After this we have written div with class name header. In this div we have made our header.
In stylesheet.css we will design header
.header {
background: #393b43 none repeat scroll 0 0;
color: #fff;
height: 100px;
width: 100%;
}

226 High Street, London E17 7JH

info@webdirectors.co.uk

020 8090 3508