HTML Web Page Tutorial #2

Welcome back to part 2 of the HTML tutorial. Previously we began work on a simple html website. For the time being we only have 1 page. This tutorial we will create our contact page and and about page.

Firstly though, lets make our homepage a little more interesting. Right no we have nothing really on it, we have the website header with the menu, we also have a short sentance, but lets add a little bit of dummy content to this page to make it more appealing.

The below code is a basic table consisting of a table head and a table body.

Copy this into your document and then reload your browser. You will see a standard table being displayed in the browser. Now its time to add some nice CSS rules to make this table look more appealing.

The first CSS Rule adds a border to the table, table heading cells and table cells. The problem being that some of these border will double up creating an odd appearance. Fortunately there is a simple way to fix this. We add a border-collapse: collapse; rule to the table which squashes doubled up borders together to make it more presentable. The next CSS rule just adds some padding to the cells so the cell content isnt squashed right up the the edges, we also align the text-left as by default table head cells are aligned to the centre. The final CSS rule for now is to just add a background colour to the table head cells and then change the text colour to make it more readable.
Copy this CSS to your code, save and refresh. Looks a lot nicer now just from a few simple CSS rules. Have a play around with different border and colour rules and see what happens.

Next up lets add our new files. Starting with the about page. If you remember when we created our menu we called the file about.html. Go ahead and create that file alongside your home.html.

about.html

The about file contents written here are almost identical to the home template. All you need to change are the page title in the head of the file. Its typical to prefix a page title with the website name followed by the page name afterwards. This is just one popular convention but many websites use different techniques. The Website name and menu remain the same, then we add a secondary heading for the page name. In this case its About.

An about page is often a page that wont get read by most vistors and is only of interest to people seriously interested in you, your product or your service. Creating dummy content for an about page is very simple for this tutorial. I can use Lorem Ipsum which is a standard latin transcript used by web developers to add textual padding to pages to design the page before adding the actual content later on. So for the sake of this tutorial we will ustilise this. Of course feel free to add your own text. I’m also utilising a useful service called placeholder.com. These create dummy images that you can use to design a page layout without having to use actual images. Again perfect for this tutorial.

The below code is added to the content of the about.html You will notice i have used some inline CSS on the paragraph tags to help align the text to fill the space. I have also use the align attribute on the images. By using align left or align right we’re able to inform the browser to wrap text around the image, making it very presentable and magazine esque.

The next tutorial will move on to use forms when we create our contact page. Here are the final copies of the files so far in this tutorial.

Home.html

About.html

Stylesheet.css

Leave a Reply

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