How To Build Web Pages
I could have called this page "learn how to build web pages in an hour!". If you make it till the end you will know what I mean.
Personally, I want the answers NOW (how to build web pages instantly). If you are like me you will like this web page tutorial and buy some books for reference and more detailed learning later.
Let's get started...
HTML
Most web sites are generated from HTML (Hyper Text Markup
Language) text files. You can view the source text for web pages
in your web browser. The files are saved with the extension htm
or html. The main page of a web site is normally called index.html
For editing the HTML You could use any simple text editor but I
recommend 1st Page 2000. It's free and full of features that make
it easy to create and preview web sites. Click on the image on
the right to download the software.
We tell the web browser what to do with HTML tags e.g. here is
the code to display formatted text:
<p>A paragraph of text</p>
<b>Some bold text</b>
<i>italics</i>
<u>underlined text</u>
Text with default formatting.
We use heading tags to display larger-sized text. H1 is the
largest size e.g.
<h1>Heading size 1</h1>
<h2>Heading size 2</h2>
Note that the browser will only recognise one space between
characters and ignores newlines. To force a new line use the
break tag <br> on its own or start a new paragraph with the p tag.
To add extra spaces use the non-breaking space code:
To create a bulleted list use this code:
|
<ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul> |
|
For hypertext links we use the anchor element:
<a href="http://www.urgentclick.com" target="_blank">Click here</a>
We add comments to our code like this:
<!-- Comment text -->
Here is the code for a simple web page:
<html>
<head>
<title>Untitled</title>
<meta name="description" content="A simple web page.">
</head>
<body>
<h1>Heading</h1>
<p>
Body text<br>
Next line<br>
Last line
</p>
<a href="mailto:me@mywebsite.com">Click here to send email</a>
</body>
</html>
The html element tells the browser that the code is html.
The head element surrounds stuff that is not part of the visible web page.
The body tag surrounds the content of the web page.
We use tables to arrange the content of the web page into columns and rows.
Here is the code for a 3 column by 2 row table:
<table>
<tr>
<td>The top left cell</td>
<td>The top middle cell</td>
<td>The top right cell</td>
</tr>
<tr>
<td>The bottom left cell</td>
<td>The bottom middle cell</td>
<td>The bottom right cell</td>
</tr>
</table>
It looks like this:
| The top left cell | The top middle cell | The top right cell |
| The top left cell | The top middle cell | The top right cell |
Notice how I've indented the lines to make it easy to identify the different rows of the table. The td (table data) tags enclose the contents of each cell which in the example is text.
Images are inserted with the image tag like this:
<img src="images/logo.gif" alt="This is our logo">
The alt text appears when you hover your mouse over the image or if someone has turned images off on their browser.
A simple way to divide areas of your content is to use a horizontal rule tag:
<hr width="400">
Using Colors
Colors are specified with a hexadecimal number representing the Red, Green and Blue values of the color.format: #RRGGBB hex digits are 0..9 and A..F e.g.
black: #000000
white: #FFFFFF
red: #FF0000
green: #00FF00
blue: #0000FF
For browser safe colors use values of 0, 3, 6, 9, C, F so the colors are the same for all browsers.
To have a dark blue page with yellow text we could add various attributes to the body tag like this:
<body bgcolor="#330099" text="#FFFF00" link="#FF0000" vlink="#CC0033" alink="#FF6633">
All this may seem difficult to remember but it's pretty easy when you use 1st Page 2000 which does a lot of the coding automatically for you.
Something we haven't covered is forms. These allow you to gather user input with text boxes and buttons. When you click the submit button the data from the form is sent to a cgi script for processing. Making forms is easy but you can't do a lot with them until you are ready to interface with cgi scripts.
To give your site a common look and feel that you can easily change (font sizes, colours, links) I suggest using a style sheet. This is another text file with the extension .css We link it to our web pages with a line like this in the head section:
<LINK REL=StyleSheet HREF="mystyles.css" TYPE="text/css">
The following html code gathers together some of the info we've covered and gives you a web page template to play with. Just cut out the bits you don't need and customise it.
Make a directory on your hard disk. Copy the code to a file called index.html Also copy the following style sheet text to a file called mystyles.css in the same directory.
Then point your web browser at the index.html file. View the source and change it to see what happens!
<!-- This is a webpage template -->
<html>
<head>
<title>Web Page Template</title>
<LINK REL=StyleSheet HREF="mystyles.css" TYPE="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table cellpadding="10">
<tr>
<td bgcolor="#0066FF" valign="top"><img src="images/logo.gif" width="90" height="55" alt="My Logo" border="0">
<br><br>
</td>
<td valign="top" width="400">
<h1>My Homepage</h1>
<p>Welcome to my homepage!</p>
<hr size="1" width="100%">
<p>My hobbies are:</p>
<ul>
<li>UFO spotting.
<li>Getting free stuff from the net.
<li>Drinking beer.
</ul>
<hr size="1" width="100%">
<a href="mailto:me@mysite.com?subject=Feedback" onMouseOver="window.status='We value your feedback'; return true;" onMouseOut="window.status=''; return true;">Send Comments</a>
</td>
<td bgcolor="#0066FF" valign="top">
<h2>Links</h2>
<a class="mylinks" href="http://www.urgentclick.com">Webmaster Help</a>
</td>
</tr>
</table>
</body>
</html>
The style sheet mystyles.css is as follows:
(style type="text/css")
BODY, TABLE { font-size: 10pt; font-family: Verdana, Arial }
P { font-size: 10pt; font-family: Verdana, Arial; color: #111133 }
LI { font-size: 10pt; font-family: Verdana, Arial; color: #111133 }
TD { font-size: 10pt; font-family: Verdana, Arial }
A { font-size: 10pt; font-family: Verdana, Arial; text-decoration:none; font-weight: bold; color: #000099 }
A.mylinks{ color: #000000 }
A:hover {color: #0000FF }
BR { font-size: 10pt; font-family: Verdana, Arial }
I { font-size: 10pt; font-family: Verdana, Arial }
FONT { font-size: 10pt; font-family: Verdana, Arial }
CENTER { font-size: 10pt; font-family: Verdana, Arial }
H1 { font-size: 18pt; font-family: Verdana, Arial; color: #BB0000 }
H2 { font-size: 14pt; font-family: Verdana, Arial; color: #BB0000 }
(/style)
By studying and experimenting you will learn a lot!
I started with Front Page Express ( a WYSIWYG editor) but found it a problem with the excess formating code it produced. The pro's use HTML and style sheets, why not do the same?
After you are comfortable with HTML you will want to add dynamic features to your web site starting with Javascript.
Remember that HTML, Javascript etc. is code and code means bugs!
