Webpage Creation

Home | Helpdesk | Product Help | Demon Web Hosting | Learn HTML

In the beginning

Before we start creating a webpage, there are a few simple rules to remember:

HTML (Hypertext Markup Language) is not case sensitive, however most webservers, especially unix webservers take into account case sensitivity. Therefore Picture1.jpg and picture1.jpg would be treated as two seperate files. So if, in your HTML code you had <img src="Picture1.jpg"> and the file was actually named picture1.jpg, it would not be displayed (The webserver would not be able to find it).
It pays to find a method of writing HTML that your comfortable with, some designers perfer using capitals for the HTML tags and others prefer using lower case for the HTML tags. It doesn't make any difference which you use, just pick a method and stick with it, it makes debugging your code much easier.
Structuring your HTML code properly, again, if you structure you code neatly it's easier to debug.
if you open a tag, it must have a closing tag too. i.e. <p>your text</p> (in most cases)

Keep these simple rules in mind, and you won't go far wrong.

Tags

We mentioned HTML tags earlier, these are code words to tell the browser how to display your webpage. We won't go into them all, but here is a list of some of the most common tags and attributes, and a short explanation:

Tag: <html> and </html>	The html tag. This belongs at the beginning and end of your webpage. It tells the browser what sort of code to expect.
Tag: <head> and <head/>	The head tag. This creates a special part of the webpage, this is where you can place page titles, scripts and style sheets.
Tag: <title> and </title>	The title tag. This tells the browser, and ultimately the "surfer" what the title of the page is.
Tag: <body> and </body>	The body tag. Everything displayed on the webpage will be placed between theses tags.
Attribute: background="x"	The background attribute. This can be used within the body tag (among others) and is used to display backgrounds. i.e. background="mygif.gif"
Attribute: bgcolor="x"	The bgcolor attribute. This can be used in most tags. i.e. <body>, <tr>, <td> etc, and is used to set the colour of the background. i.e. bgcolor="blue".
Tag: <p> and </p>	The Paragraph tag. Used to format your text into easy to read paragraphs
Tag: <b> and </b> or <strong> and </strong>	The bold tag. These tags are useful for emphasing words or phrases, or rule numbers as above.
Tag: <em> and </em>	The emphasize tag. As with the bold or strong tags, these tags are useful for emphasing words or phrases, the text within these tags renders as italic.
Tag: <a href=""> and </a>	The anchor tag. This used to create hyper links to other parts of the page, or a different page altogether.
Tag: <img src=""> and </a>	The image source tag. This, as you've seen in the rules section above, is used to display imges or pictures.

Tag: <br />	The Break tag. Ok, remember we said earlier in rule 4 about opening and closing a tag, this is one tag that doesn't have a closing tag (there's always one isn't there). Having said that, look at the format, it has a trailing / (backslash) to close the tag.
Don't worry if you feel the explanation is too short, we will go into more depth later.

That'll do for now, we have enough to create the most basic of webpages, lets go to Step 1

Seven easy steps - start from the begining or skip to the section you want:
Index	Step 1	Step 2	Step 3	Step 4	Step 5	Step 6	Step 7

More Help