|
home > html
html
HTML is the hidden coding behind any web page,
which tells the browser what to display on the user's screen.
HTML tags are contained within "<" and
">" brackets. Most html tags have an opening
tag <tag> and a closing tag </tag> which
contains a "/" before the tag name. There
are a few exceptions, but it's generally best practice
to always include the closing tag -- it makes editing
the html easier as you can see where tags close.
It is advisable to use a style
sheet, so that you can control the elements more
precisely. Style sheet attributes are explained in the css
section. A brief overview of html
editors provides a guide to what's currently available.
A html tag
library and hex
color chart are also provided for quick reference.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert your page title here</title>
</head>
This is not fully comprehensive, as meta tags should
also be included to help search engines index your site. This
is covered in the search
engines section.
back to top
<body bgcolor="#FFFFFF">
Opens the body and tells the browser the background color.
Then you need to actually add your content, but it needs to
be enclosed in HTML tags, as follows:
back to top
| <h1>Heading 1</h1> |
Heading 1
|
| <h2>Heading 2</h2> |
Heading 2
|
| <h3>Heading 3</h3> |
Heading 3
|
| <h4>Heading 4</h4> |
Heading 4
|
| <h5>Heading 5</h5> |
Heading 5
|
| <h6>Heading 6</h6> |
Heading 6
|
| <p>Paragraph</p> |
Paragraph
|
| <b>Bold</b> |
Bold |
| <i>Italic</i> |
Italic |
back to top
To create the simple table below use the following HTML:
<table border="1" cellspacing="2" cellpadding="4"
bgcolor="#FFFF99">
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
| Table cell |
Table cell |
| Table cell |
Table cell |
- cellspacing is the space between the cells
- cellpadding is the space inside the cells
- bgcolor is background color
Experiment with changing the border, cellspacing
and cellpadding. Background color can be specified
for the whole table, a single row or individual cells.
n.b: If you choose to have a background color for the whole
table (as in the example above), the cellspacing will appear
as the background color in Microsoft Internet Explorer.
Back to top
Simple bullet points can be created using the following
HTML:
<ul>
<li>Bullet point</li>
<li>Bullet point</li>
<li>Bullet point</li>
</UL>
This will display in the browser like this:
- Bullet point
- Bullet point
- Bullet point
Numbered bullets can be created with the following
HTML:
<ol>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ol>
This will display like this:
- First point
- Second point
- Third point
back to top
- Images on the web usually come in .gif or .jpg
format
- Unless you specify border="0", a blue border may
be seen around your image
- Specifying width and height in pixels speeds
up download time
- Alt text should be specified so that the site still
makes sense to users who switch off graphics in their browsers
- hspace and vspace can be specified in pixels
to allow horizontal or vertical space around the image
- Images can be aligned to the left, right
or middle
- Keep the use of images to a minimum - they slow the download
time
- Smaller images keep download time to a minimum
- Large images can look "clunky" on a web page - especially
on a small browser
Images should be displayed using the following HTML:
<img src="/graphics/image.gif" border="0"
width="100" height="100" alt="My Image" hspace="5" vspace="5"
align="right">
back to top
Links to a different page or site can be added to any text.
This both highlights the text selected as well as providing
a source of further relevant information. Links can
also be added to an image. This is especially common
on company logos which link back to the home page.
Links within the same site should be applied using
the following HTML:
<a href="/section/page.html">Linked
text</a>
Links to a different site should be applied using
the following HTML:
<a href="http://www.site.com/section/page.html">Linked
text</a>
Links on an image should be applied like this:
<a href="http://www.site.com/section/page.html"><img
src="/graphics/image.gif" border="0" width="100" height="100"
alt="My Image" hspace="5" vspace="5" align="right"></a>
back to top
It is crucial to have closing tags for:
</body>
</html>
back to top
- Accurate HTML will go a long way to ensuring your
site displays correctly and quickly on a variety
of browsers
- Make your HTML as clean and simple as possible
- Double check all your HTML to ensure all quote
marks are included, and all opening tags have
a corresponding closing tags
- Use a spell checker - spelling mistakes are unprofessional
- Experimenting is the quickest way to learn HTML
- Right click on web sites you like to view the HTML
source to see how certain effects were made
- Try and keep content and style separate by using
a style sheet
- Put your page through a validator, such as http://validator.w3.org/
back to top
back to top
|
navigation