| Hot Stuff Web Design |
| HTML Basics |
A web page is made up of HTML (Hyper Text Mark-up Language), tags are used to format the text/images into a way that the browser can interpretate it. Tags are any command inside brackets, <TAG;> When you want the command to finish, you use the same tag again with a backslash, </TAG>. If you don't use a tag, the web browser will use a default setup.
The basic structure of any web page is as follows:
The HEAD contains information about the web page, including the title which will appear on the Title bar, on the top of the browser window. The BODY holds the information which will appear in the browser window, including text and images. You can cut and paste this template, and add in your HTML.<HTML> <HEAD> <TITLE> Title of Document </TITLE> </HEAD> <BODY> <P> Your message. </P> </BODY> </HTML>
| Adding Colour and Images for Backgrounds |
Firstly, there are five colour options you can change.
| Name in body tag | Name | Description |
|---|---|---|
| text | Text Colour | |
| link | Link Colour | A hypertext link which has not already been followed |
| vlink | Visited Link Colour | A hypertext link that has already been visited. |
| alink | Active Link | A hypertext link that is currently loading. |
| bgcolor | Background Colour. |
The replace the <BODY> tag with the following line, changing the colours where required. The colour is made up using the RGB hex format. i.e. #RRGGBB. So red would be #FF0000.
<body bgcolor="#FF80FF" text="#80FFFF"
link="#FF0080" vlink="#FFFF00" alink="#FFFFFF">
Instead of having a plain background why not use an image, which will tile the screen background. You can use either a GIF file or a JPEG file.
<body background="background.gif">
You can add link colours etc. inside the tag as well.
| Basic symbols. |
These are used to separate text, the browser will not recognise carrage returns, and so all you paragraphs will merge to become one. A the new paragraph tag leaves a blank line between the last paragraph and the next one inside the tag. A line break is effecively the same a carrige return, moving the text on to the next line
| HTML Tag | Meaning |
|---|---|
| <p> | New paragraph |
| </p> | End of paragraph |
| <br> | Break - New Line |
| <hr> | Draws 3D line across screen. |
| Text Effects |
The are a wide number of text effects, many will appear differently on different browsers and some effects will appear the same on the same browser, such as <STRONG> and <BOLD>.
| Tag | Example | Effect |
|---|---|---|
| <b>Text</b> | Text | Bold |
| <blink>Text</blink> | Flashes Text - doesn't work on all browsers. | |
| <center>Text</center> | Centers anything between tags. | |
| <pre>Text</pre> | Text |
Monospaced font. |
| <strong>Text</strong> | Text | Strong effect - often the same as bold |
| <i>Text</i> | Text | Italics |
| <u>Text</u> | Text | Underline |
| <blockquote>Text</blockquote> | Text |
Brings in margins, and leaves space at the top and bottom of quote |
There are also 6 heading tags. Heading tags automatically start on a new row, and text after a heading tag also starts on a new row.
| Using the <FONT> tag. |
You can also change the font, the size of the font, and the color. The text you wish to format must be surrounded by the Font tag.
<FONT> text </FONT>
| To change the size of the font change the leading font tag to look like this. | <font size=-3>Text</font> |
| To change the colour, change the leading font tag to look like this. | <font color="#FFCC10">Text</font> |
| To change the font, change the leading font tag to look like this. | <font face="Arial">Text</font> |
<font size= -1 color="#0000C0" face="Arial"></font>
I've put a template together, using the HTML in this section. Click here with your left mouse button and choose save.
| Home |