$today = date("j");
$todaytip = Array(
"A Look At Lists",
"Accessibility - A New way Of Thinking",
"Planning Your Site",
"Meta Tag Generator",
"Regular Expression Tester",
"Is Your Browser Up To Date?",
"Assume Nothing Test Everything",
"Easy Maintenance With Server Side Includes ",
"Accessible Web Forms",
"Building A Webpage",
"Sensible File Structure",
"Update Your RSS Newsfeed",
"Test Your Site",
"Set Up A Home Development Server",
"Add To Favorites How To",
"Beat The Spam Bots",
"Create Placeholder Text",
"Forms With Style",
"Date And Time Using SSI",
"PHP Jump Menu",
"A Guide to Web Forms",
"PHP Page Protect",
"Close Your Tags"
$todaylink = Array(
print " WebDevTips Pick Of The Day : ".$todaytip[$today]." |
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