Website Development Workshop


Outline

What is HTML?

Creating an HTML Document.

The Skeleton of a Web Page.

Basic Tags.

Adding Extras.

Where to Find Help.

Other Information.

Some Basic Tags

<H#>...</H#> Heading <UL>...</UL> Unnumbered List
<P>...</P> Paragraph <LI> List Item
<PRE>...</PRE> Preformatted Text <OL>...</OL> Ordered (#ed) List
<BR> Forced Line Break <DL>...</DL>  Definition List 
<HR> Horizontal Rule <DT> and/or <DD> Definition Term/Definition

Adding Extras
Character Formatting
 Logical Styles  
<DFN> A word being defined, usually shown in italics.
<EM> Emphasis, usually shown in italics.
<CITE> Titles of books, films, etc., usually shown in italics.
<CODE> Computer code, usually shown in a fixed-width font.
<KBD> User keyboard entry, usually shown in plain fixed-width font.
<SAMP> Sequence of literal characters, usually shown in a fixed-width font.
<STRONG> strong emphasis, usually shown in bold.
<VAR> Variable (to be replaced with specific information), usually shown in italics.
Physical Styles  
<B> Makes text bold.
<I> Makes text italic.
<TT> Typewriter text, text appears in a fixed-width font.

Linking

When you enter a link in your HTML document it will look like this:

<A HREF="filename">Text for link</A>

The A is for anchor, HREF="filename" specifies the document you are linking to, and the "Text for link" is the text that will appear coloured and underlined on your web page.

You can create a link to a separate document or to a secific area of a document. To make a link to the Skeleton page, the following is entered.

<A HREF="skeleton.html">To Skeleton</A>

To make a link that goes to the top of this page you have to set an anchor at the top of the page so the link has somewhere to go. Wherever you want your anchor to be is where you enter the following:

<A NAME="top(or whatever name you choose)">You can enter text here if you want </A>

In this case the anchor is in front of the main title for this page. To make the actual link you enter the following where you would like the link to appear.

<A HREF="#top">Back to Top</A>

Images

Squamish Public Library LogoTo insert an image enter the following:

<IMG SRC="imagename">

You can change the image's alignment with the text of the document, its position on the screen and a few other attributes as well.

 

Squamish Public Library LogoYou can also make an image a link. This ---> logo is a link to the top of this page. To make an image a link you enter the following into your HTML code.

<A HREF="destinationoflink"><IMG SRC="imagename"></A>

You can see that there is a blue line around this image. This is just like having your text underlined with a normal link. You can chand the size and colour of the border and can choose not to have one at all.

The background, font, and link colours that you see on this page are the default colours for an web page. You can change these colours by entering the appropriate information into your HTML code.


Tables

Tables are an easy way to format your text across a page and to present information in a tabular way. Tables were used earlier in this page to line up the information on basic tags and character formatting. These tables have no borders so you cannot tell they are there. You can change the size of your table and its border, as well as several other features that tables have.


Avoid Overlapping Tags

For example, if you enter <B><I>some text</I></B> into your HTML code you are likely to only receive the effect of the innermost tag. So in this case you would end up with italic text. There are, however, some browsers out there that will display this as bold italic text.


Back to Top

Back to HTML Information

Back to Youth@BC Site