We Are Web Designers. We Are Webbed Feet UK. We are a creative web design agency using the latest techniques to create the best sites.

A dummies online guide to HTML

The majority of web sites you visit will be created using HTML, with the various page elements (such as headers, paragraph text, images and containers) styled and positioned using CSS. Before we learn CSS it is important we understand how to develop a web page using HTML (Hyper Text Mark-up Language). Once we are confident creating a basic web page using HTML, we can begin to add styles and position various elements on the web page design. This article serves as a basic guide for those looking to create web pages using HTML.
What you can do with HTML and CSS is pretty much limitless. Look at a small selection of the different web sites we have designed. Webbed Feet UK is a web design company based in Salisbury, and we have designed web sites for many satisfied clients since 2001.

A basic example of HTML

<h1>My Heading</h1>

<p>This contains my paragraph text. If I wish to go onto a new line I use <br /> and now I am on a new line!</p>

</body>
</html>

Let me explain the HTML tags used in our example:

Everything within the <html> and </html> is our web document. We write all of our HTML within these tags.
Everything within the <body> and </body> is what will be displayed in peoples browsers.
Everything within the <h1> and </h1> is our main header.
Everything within the <p> and </p> is our paragraph text. If we want to start a new paragraph after the one in our example we simply open a new <p> tag, type out the text, and then close the tag </p>.
The <br /> is a line break tag. If we use this within our paragraph it will cause the text after the tag to drop onto a new line. Note; you will only see this in action when actually viewing the web page through a browser!

How do I create my web pages?

You do not need any fancy or expensive program to create web pages. You can create a .html file using a simple Notepad program. It does not really matter if you save the document as a .html or a .htm, both should work perfectly fine.

We recommend starting with Notepad because it forces you to write out the code from scratch; therefore you will learn much more quickly and be able to diagnosis errors. Some programs will help you create code by using a design view feature, where you can drag and drop page elements onto an interface. The problem with using such a program as a beginner is you do not become confident writing or editing the HTML yourself. Furthermore, the HTML the program creates is not always compatible across different browsers (the web page may look wonky and “off” in FireFox, but look fine in Internet Explorer for example).

Step by step guide of creating a web page

To make things easier, here are a few screenshots.

1. Open Notepad (start menu in Windows, then look in “Accessories”)

Notepad

2. Lets type out my example

HTML in Notepad

Note: You cannot see all of the text in the above screenshot as I would have to scroll along or maximize Notepads window, but trust me – the text is exactly the same as in the example above!

3. Save file as a .html file within a suitable folder on your PC

Save .html file

I am simply saving the file in my documents. The filename should not contain spaces. Separate words with a “–”, e.g. “my-very-first-webpage.html”

4. View the web page in a browser!

View our web page in a browser

To do this I visited the location of the .html document (i.e. wherever you saved it) and double clicked it. It then opened in my default web browser, which happens to be Internet Explorer. You could equally view the document in the browser of your choice by copying the files location from the address bar (in my example this is “C:\Users\Andy\Documents\webpage.html”) and pasting it into the address bar of a different browser.