How to: Web Design

Hello and welcome! In this article I will be showing you how you can:

  • Create your first HTML site
  • Use CSS to style your site
  • Add PHP to make your site dynamic
  • Use tags to improve page rank

Consider this your beginners guide to web design.

Creating the Document

Before moving on to the more complex stuff we should first create the structure of your website; the basic foundations that we will later build upon.

Create a new.html document and add the following code:

<html>

<head></head>
<body></body>

</html>

This code defines the document as a HTML file and marks the space for our head and body.

Now you can add code such as <title>My title</title> in the head section to mark out the title of your site and code such as <p>Some text</p> <a href=”Cool.htm”>Visit Cool</a> to your body to create some text and a link. For more info on the tags you can add to your site W3Schools is a great site to use as a reference.

Styleize your site

So you have the basics of your site, and now you want to make it a bit more pretty. To do this you will need to use CSS, this allows you to define the style of pretty much anything in HTML. For example if you put the following code in the head:

<style>
body {color:red;}

</style>

Anything in the body tag will be red. You can also use classes in CSS, the following code shows how they are used, the following code will go in the head:

<style>
p.myClass {color:red;}

</style>

and the following in the body:

<p class=”myClass”>Red Text</p>
<p>Normal Text</p>

This code means that the P tag with the class in will appear red and the one without will have the default color.

Making it Dynamic

To make your site more dynamic we will be using PHP to create a header and a footer. To be able to test a PHP file you are going to need to upload it to a webhost such as this one: 000webhost (its free). We want to make the site dynamic so pages are easier to edit and optimize. Start off by adding the following code to your new index.php file:

<html>

<head>
<?php
include ‘header.php’;
?>
</head>

<body>
<p>This is the index page of the website.</p>
</body>

<html>

What this code does is include our header and display some text. Now we need to create the new header.php file:

<h1>My Website</h1>
<br>
<a href=”index.php”>Home</a> | <a href=”about.php”>About</a>
<br>
<br>

This code means that on our index page we will have our site title and menu, but thiss would be pointless unless we had another page. So create a new php file called about.php and add the following code:

<html>
<head>
<?php
include ‘header.php’;
?>
</head>

<body>
<p>This is the about page of the website.</p>
</body>
<html>

Now if you run the code the same header will appear on both pages, So if, for example, you want to change the name of the website all you have to do is change it in the header.