Non Gamstop Casinos Non Uk Casino Sites Best Non Gamstop Casinos Non Gamstop Uk Sites Casinos Not On Gamstop

A Basic Introduction to HTML

This page is a basic introduction to HTML. It'll show you what the basic HTML tags are, in the column on the left, and how those tags are rendered or displayed in the column on the right.

I can also recommend the excellent W3 Schools web site for their xhtml reference page which, if you click on this link, will open in a new window so you don't lose your place here.

You can use the quick menu below to move directly to a particular section.

Documents

HTML Documents

<html>
   <head>
       <title>
           Title goes here
       </title>
   </head>
   <body>
      all text goes here
   </body>
</html>

Don't use the above set, which is a simplified set. Instead, click to open a window
from which to copy a full
set of base tags

All web pages should have this basic set of container markers. The whole document should be enclosed in a <html> </html> pair. Within those the document is divided into two. The first part, or head section, can only contain a particular set of tags of which <title> </title> is the most common and required. If you want a complete listing try this reference. The Title is the part that appears on your browser's application title bar (this file's title is Basic Intro to HTML). The Body section which contains everything else.

If you're working with XHTML, as you probably are, you should also include, right at the start of the document a document type definition and you should specify a character set. Click on the link in the pane on the left to see a full set of base tags for the different html, xhtml doctypes.
Also remember that in xhtml all tags must be in lowercase.

It's important to remember this, especially when working with the many HTML writer applications that you can get. Most HTML 'helpers' will put tags where ever the cursor happens to be - that doesn't mean that the tags are located in the correct place. It's a little like using a spell checker - HTML helpers make sure the tags are spelled correctly, not that that the document as a whole makes grammatical sense.

You should always try to check your HTML pages with a syntax checker.

Headings

Headings: 1..6

<h1>Heading 1</h1>

Heading 1

<h2>Heading 2</h2>

Heading 2

<h3>Heading 3</h3>

Heading 3

<h4>Heading 4</h4>

Heading 4

Headings are just that - headings - you shouldn't use headings just to get a particular font and size. Headings are meant to be content markers.

It is a mistake to think of HTML as a presentation based language. You must always remember that the beauty of the web is that it is platform and browser independent, and people will see your pages, not only using different browsers, some of which don't show images at all, but using different screen sizes and resolutions.

If you want to define absolutely what the page layout should be, you shouldn't be using HTML, use postscript or pdf.

Lists

Ordered Lists

<ol>
   <li>Wines</li>
   <li>Spirits
     <ol type="a">
      <li>Tequila</li>
      <li>Brandy</li>
      <li>Whisky</li>
     </ol>
   </li>
   <li>Beers</li>
</ol>

Wines
Spirits
1. Tequila
2. Brandy
3. Whisky
Beers

Ordered lists are introduced with the <ol> tag and each numbered item is preceeded by a <li> tag. Ordered lists can be nested, that is to say, one list can be placed inside another. Notice that inside the list of drink types is a sub-list showing types of Spirits.

Un-Ordered Lists

<ul>
   <li>Wines</li>
   <li>Spirits
     <ul>
      <li>Tequila</li>
      <li>Brandy</li>
      <li>Whisky</li>
     </ul>
   </li>
   <li>Beers</li>
</ul>

Wines
Spirits
- Tequila
- Brandy
- Whisky
Beers

Un-Ordered lists are very similar to their ordered counterparts, except they use <ul> instead of <ol>. They can also be nested. Of course you can mix lists, that is to say you could have an ordered list inside an un-ordered one and viceversa.

Definition Lists

<dl>
  <dt>Tequila</dt>
      <dd>A spirit made from...</dd>
  <dt>Brandy</dt>
      <dd>A spirit etc...</dd>
</dl>

Tequila: A spirit made from cactus, and not just any cactus it has to be the blue agave cactus. Tequilas, like any other spirit, are better the longer it is aged. Añejo, or old/aged tequila is the best, and of course, the most expensive.
Brandy: A spirit made from grapes. If it's made in France they call it cognac.

Each definition list is introduced with a <dl> and ended with a </dl>. Inside these tags you can use <dt> for each definition term, followed by <dd> for each definition Definition. Notice the definition text is normally indented from the Definition Term.

Hyper-Links

Links

<a href="http://www.unn.ac.uk/">UNN</a> UNN
A link, using an absolute url, to a different site. You only need to use an absolute url, giving the full address, if you are linking to a different site.

<a href="../htmlwrit.html">Writing</a>

Writing
A link using an relative url, which means the url or address is relative to the page that contains the link. A relative url you use to link within the same site. In this example, we're linking to a document one subdirectory above (In case you didn't know the dot dot in ../ means one directory above the current one).

If you're making a link to another page on the same site you simply need to put in the relative subdirectory path and the filename you want to link to. If the file you're linking to is both on the same site and in the same subdirectory then just the name of the file will do. (eg: <a href="NameOfFileToLinkTo.html">ThingToClickOn</a>)

<a href="#headings">Headings</a> Headings
A link, using a name marker, to a different location within the same document. This type of link needs a target link (see below) to move to. In this example I have place a target link next to the Headings section.

<a name="headings"></a> This is the syntax for a target. Put a target at the place you want the name link above to jump to.

<a href="mailto:[email protected]_NOSPAM"> [email protected]</a> Note that in absolute urls the service type is included. For most WWW links this is http: but you can also link to ftp:, gopher:, news: or mailto:.
The link syntax opposite would create a link allowing you to mail to the link target, like this: Rob dot Davis at unn dot ac dot uk

Images

Using images

alt="" is used to denote the alternate text that is displayed if the browser doesn't show images. If my image is a link I include explanatory text, if my image is just to add visual interest I usually make the alternate text nothing, hence "".
If you use the align argument it has the side effect of making the text wrap around it. I've stopped that from happening in the example on the left to make images and the code appear more simply (by the way I achieved that with the <br clear="all"> tag).
Images can be used 'inline', that is they appear as part of the page, or they can be like any hyper-link to so that clicking on a link shows an image.
Remember that images take longer to load than text, remember also that the time they take is in proportion to the size of the square. That is to say if an image is 2cm by 2cm it'll take 4 time units to load, if we increase the size of the image by 100% to 4cm, 4 times 4 will take 16 time units to load. So increasing the size by 2 means it'll take 4 times longer to load.

Most images add sparkle, very few add meaning - use them carefully.

Fonts

Changing the appearance of text

<stong>bold</strong>	bold
<em>italic</em>	italic
<tt>typewriter</tt>	`typewriter`

Important

Please note that the font tag is now deprecated, you shouldn't really use it. It's much better, and more flexible, to use stylesheets. I include it here just for completeness sake so that you understand how it works

On the left are the most common changes to fonts that you'll encounter. There are other styles like cite, sample, var, code and kbd. They actually appear, at least in most current browsers, like variations on bold, italic and typewriter. Nontheless, you shouldn't forget that HTML is primarily a content-based language, as such <cite> has a different meaning to <em> even though the rendering might be the same.

<font size="+1">Larger</font>
<font face="verdana">verdana
</font>

Larger
verdana
There are other changes you can make to fonts using the <font> tag and its various arguments: size and face. Currently not all browsers support the face argument. You should remember that not all operating systems nor browsers support all fonts. Even assuming the majority of users might be using systems based on Windows then you should at least limit yourself to the most common TrueType fonts.
Note that the size argument should always be expressed as a relative size using + or - for the following reason: a visually impaired user could have their base font size set to, say, 24 point. If you set the font size to be <font size="2"> then you have just made things smaller not larger for that user. Using <font size="+2"> makes the font larger whatever the context.
In fact I think, except for small changes you should avoid using the font tag altogether, using stylesheets is much, much better.

Tables

Using Tables

Tables should be used with care, simply because there are a number of browsers that don't display tables. So you should try to give a text version of pages that use tables. This page uses tables, try using the browser Lynx to render this page - it'll look a complete mess!

<table width="100%" border="1">
   <tr>
        <td>Row 1, Col1</td>
        <td>Row 1, Col2</td>
   </tr>
   <tr>
        <td>Row 2, Col 1</td>
        <td>Row 2, Col 2</td>
   </tr>
</table>

Row 1, Col1	Row 1, Col2
Row 2, Col 1	Row 2, Col 2

It's a good idea to indent your tables as the example shows it'll be much easier to understand. Lets break the table down and look at the component parts:

The table must be introduced and ended with a <table> </table> pair. You can add arguments to <table> for instance <table width="100%" border="1" cellpadding="1" cellspacing="1" class="tdheading">

The <tr> </tr> pair signify a Table Row. Within a <tr> pair you can have a number of Data columns indicated by a <td> </td> pair. There are arguments to both <tr> and <td> to modify the text alignment, the width, the background color and the number of columns and rows a column can span.

<table width="100%" border="1">
 <tr>
   <td rowspan="2">
         Column spans two rows
   </td>
   <td>
         Second column
   </td>
 </tr>
 <tr>
   <td>
         column 2, row 2
   </td>
 </tr>
 <tr>
   <td colspan="2">
         This column extends
         over two column widths
   </td>
 </tr>
</table>

To clarify, the code on the left creates the table below. Notice that the width of column one is smaller than column 2, That the first column extends over two rows, and that the column in the last row extends over two columns.

Column spans two rows	Second column
	column 2, row 2
This column extends over two column widths

Notice that I have specified the width of the columns as a percentage, the advantage of this is that the table will resize as you alter the size of the browser window. You should avoid using measurements without the percentage sign, although you'll find many sites that do specify exact measurements, a symptom of this is that the table disappears off the edge of your screen or that your browser gets horizontal scroll bars. Usually people do this for a number of reasons.

They want to try to make columns size exactly to the images and text they contain
They haven't realised that on different screen resolutions things look different.
They're stupid

If you want to know a little more about tables you could view the source of this page - the whole page is a series of nested tables.