This HTML guide has been written with the intention to giving a brief understanding to HTML tags, syntax and what they do.
If I appear to be repeating myself, at times, I am because I want to be sure
that you have a full grasp on the key issues.
This HTML guide has been written with the intention to giving a brief understanding to HTML tags, syntax and what they do.
If I appear to be repeating myself, at times, I am because I want to be sure
that you have a full grasp on the key issues.
Contents:
HTML Introduction,
The Basic HTML Document Tags,
A full list of HTML Tags
Inserting Background Images,
Inserting Images into Your Web Page,
Using Images as Links,
Linking to Other Documents on Your Site,
Linking to Documents on Other WWW Sites,
Linking to a Certain Sections of a Document,
| |||||||||||||||||
| HTML Introduction: |
This page is meant as a basic introduction to HyperText Markup Language (HTML).
HTML is the language used to publish web pages. HTML can seem scary to someone new to it but within a few hours of using it I am confident that anyone can soon have their first
page up and running. The first thing to do when you are writing your web page is to decide what content you want to appear in it, including any text and any pictures which you want to display. Once you have this part figured out, decide whether you want to write the HTML by hand, or use an HTML editing program. (Initially, I strongly urge that you write the first few assignments by hand). Some HTML editors are listed below:
|
||||||||||||||||
| Basic HTML Document Tags: |
Every HTML document must contain certain tags to enable browsers to know where the HTML starts and finishes,
also to specify what color or image you want to have as the background. Also to specify what
color, size, and type of font you want.
The first rule of HTML is "If you open a tag, CLOSE IT!"
eg: tags that start:
Every HTML document starts with the: |
||||||||||||||||
| Inserting Background Images: |
You will probably have seen web pages that contain a image rather than just a color
for a background, the way this is achieved is by adding the following section in the <BODY> tag: <BODY background="background.gif"> in order for this image to appear it will need to be in the same directory that the document is. Alternatively you can specify a background color by using color codes, these work by mixing numbers and letters to sort of mix a color palate. The most common are: #FFFFFF Which is white, #000000 Which is black. So to have a background color your tag will be: <BODY BGCOLOR="#FFFFFF"> yes that is "color", as HTML was mainly written by Americans. You can also add the font size and color tags to your body tag. <BODY BGCOLOR="#FFFFFF" BASEFONT SIZE="3" COLOR="#000000"> |
||||||||||||||||
| Inserting Images into your Page: |
The tag to insert images into your HTML document is quite simple, but you can also add other options as well.
The basic image insert tag is: <IMG SRC="image.gif"> This insert a image from the same directory as the HTML document into the document. You can also specify to have your image surrounded by a border by adding: <IMG SRC="image.gif" BORDER="1"> |
||||||||||||||||
| Using Images as Links: |
You an also use image files such as .gif or .jpg files to link to another site, page, or section of a page.
the HTML code to link say a image file called "image.gif" to a site called "http://www.website.co.uk" would look like this:
<A HREF="http://www.website.com"> <IMG SRC="image.gif"></A> The: <A HREF="http://www.website.com"> shows that there is what is known as a "hyperlink" to the site www.website.com. The: <IMG SRC="image.gif"> shows that you are inserting a image file called "image.gif" which is going to appear on the page. The: </A> Shows that it is the end of the link reference. |
||||||||||||||||
| Linking to Other Documents on your Site: |
You can link to documents on your own home directory quite simply.
The following code links to a page called "page.html" so when you click "click me" you will be taken to "page.html".
To go to this page <A HREF="page.html"> click me </A>
|
||||||||||||||||
| Link to Documents on Other Sites: |
You do not have to have a image or document on your own site to be able to
make it appear on yours. Lets say for example that you see a really cool image
called image.gif which is on a web site whose address is http://www.website.com/~user/ So it put this image in your page your html will look like this: <IMG SRC="http://www.website.com/~user/image.gif">
Then you can center it left align or right align as normal and treat the image as if it where you own. |
||||||||||||||||
| Linking to Certain Sections on Pages: |
This what is called "Anchors" to Anchor to another section of a page
is similar to linking to another page, what you need to do is first decide the sections of the
page you want to separate. Let start with an example, lets say that you want to put a
link at the bottom of your page linking to the top of the page.
So at the end of your page you would have a link like this:
<A HREF="page.html#top"> </A>
We would name it with something like this:
|