AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
WebDevTips Pick Of The Day : Add To Favorites How To |

Print This Page

You are here : Home - Web Development - HTML - Webpage building - the basics

Webpage building - the basics

So you've decided it's time for you build your first website but you have no idea how to start building it! - well you've come to the right place :)

This small guide should help you to understand the basic idea of how a webpage is put together, how tags work etc. It is not a step by step guide on how to make a website.

You don't need any expensive software to start building webpages. Webpages are written using plain ASCII text so a simple text editor such as Notepad will do the job. Just remember when you save your page that you have to give it a .html extension. If notepad saves it as filename.txt just rename it to filename.html

First lets break things down a bit. A website is basically a collection of webpages that are linked to each other, usually there is a common theme for the site (collection of pages). This is sometimes the hardest part - "what topic will I make a site about", luckily that's not my problem :)

A webpage is made up of different elements such as text, graphics, links, colors etc. Putting all these bits together is achieved by using an easy to learn language called HTML.

HTML is basically a structured set of tags that tell the browser how to display your page. Most tags have a start tag and an end tag. Some tags affect the layout of the page and some control the the presentation of elements such as text.

Time for a small example. In the following sentance I want to make the word "sat" bold

The cat sat on the mat.

The start or opening tag for telling the browser to start making text bold is <B> or <b> (tags are not case sensitive) so in our example we would place the <B> tag in front of the word "sat" like this <B>sat.

The tag to tell the browser to stop using bold is </B> or </b> the / tells the browser that this is an end or closing tag and to stop rendering whatever tag we are closing, in this case B for bold. So we tell the browser to stop using bold by placing the closing tag after the word "sat" like this sat</B>

In our text editor we would write the line like this

The cat <B>sat</B> on the mat.

when we look at the page in a browser the line shows up like this

The cat sat on the mat.

As you can see its not that complicated to get started and there's nothing to be afraid of. Thats just a small starter to explain how tags work but with everything in life theres a lot more to it than that.

*** Note - I have used uppercase tags to emphasise them - please make all your tags lowercase.

In part 2 we'll look at some tags you must have to structure a webpage even though they appear to do nothing.

Part 01 - the basics
Part 02 - the structure
Part 03 - tag attributes
Part 04 - text formatting tags

Why not discuss this article in our forum?
Other related guides : file structure | forms | lists


[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]