Jessett.com home  

html

html tag library
html editors
hex colors
forms
xhtml

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.

head information

<!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

document body

<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

basic text attributes

<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

basic table attributes

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

bullet points

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:

  1. First point
  2. Second point
  3. Third point

back to top

including images

  • 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

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

closing tags

It is crucial to have closing tags for:

</body>
</html>

back to top

final points

  • 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

other resources

back to top