NOTE – HTML BASICS

 

WHAT IS HTML?

 

HTML stands for HyperText Mark-up Language.  It is a language that specifies how to display objects (text, images, graphics, tables, ...) on the screen.  Programs that are capable of reading HTML files and displaying them on the screen are called web browsers.

 

HTML is very important because it can be understood by all computers.  So even if two computers are different (such as a MAC and PC), they can both still use HTML because they both have a way to understand it (via a web browser).

 

FILE EXTENSION

 

An html document is really just a text document with a different extension.  This extension lets your computer know that it should open the file with your internet browser. 

 

Note that both html and htm extensions are the same. 

 

TAGS

 

HTML is simply text that makes use of tags to specify how to display things on the screen.  Tags always start with a < symbol and end with a > symbol.

 

For example, here are a three different tags:

 

<body>

<b>

<font color="blue">

 

Many tags that affect a certain section of your text have an opening and a closing version.  The closing version simply have a / symbol after the < symbol. 

 

For example, the <b> tag bolds text.  Below, the word Campeau would be bolded because it appears between the opening and closing <b> tags.

 

Mr. <b>Campeau</b> is the best.

 

ATTRIBUTES AND VALUES

 

Most tags have specific attributes that you can use to customize them. 

 

Inside the tag, you simply add the attribute name followed by an = symbol, followed by a value for that attribute.  The value is always inside double quotes.

 

For example, the <font> tag has an attribute called color.  Let’s consider the sentence.

 

          May the force be with you.

 

Now, let’s use the color attribute in <font> to make the word force be yellow.

 

          STEP 1 – Add an empty <font> tag and closing tag.

 

     May the <font>force</font> be with you.

 

          STEP 2 – Add color="yellow" to the <font> tag

 

     May the <font color="yellow">force</font> be with you.

 

 

As another example, let’s consider the <img> tag.  It has the following attributes: src, height, width, border.  So, you can use the tag in any of the following ways:

 

     <img src="filename" height="200" border="3">

     <img src="filename">

     <img src="filename" border="2" width="400">

 

The attributes available for any tag can easily be researched online.  Simply search “the hr tag” and you will get details about how to use the tag and all the attributes that exist for that tag.

 

HTML TEMPLATE

 

The following sequence of tags is common in all simple html documents:

 

<html>

<head><title>This appears in the blue section at the top.</title>

</head>

<body>

</body>

</html>

 

COMMON ERROR – THE <BODY> TAG

 

There is only one <body> and one </body> tag.  You should never add more.  You can only make changes to that one tag.

 

VIEWING SOURCE CODE

 

When we are looking at the content of an HTML document along with all the tags, it is called viewing the source code.  One can do this for any website!  In internet explorer, you simply go under View and click on Source.

 

ABSOLUTE REFERENCE VS RELATIVE REFERENCE

 

A reference is simply a file name and location.  When you place an image on an html document, you must give a reference to it.  The same goes when you want to make a link to another page.  There are two ways to make references.

 

An absolute reference is giving the file’s complete location and name on the internet.  Here is an example:

 

     http://www.lockerby.net/media/header.jpg

 

A relative reference is giving the file’s location with respect to the location of the html document in which this file is referenced. 

 

EXAMPLES OF RELATIVE REFERENCING

 

a)    If the file is in the same folder as the html document, you simply put the file name.

 

<img src=″fun.jpg″>

 

<a href=″page2.html″>link text</a>

 

b)    A common approach in webdesign is to place all images in a subfolder called images.  To reference the images called fun.jpg, we need to add the subfolder name to the reference.

 

          <img src=″images/fun.jpg″>

 

c)     Sometimes, instead of referencing a file in a subfolder, you need to reference a file in a parent folder.  To go up one level, we need to use the dot dot (..) reference.  To make a link to the file index.html that is in the parent folder, we use:

 

<a href=″../index.html″>link text</a>

 

RELATIVE BETTER THAN ABSOLUTE

 

A relative reference is usually better than an absolute reference because it will continue to work even if the files are relocated to a new location (as long as the folder structure is still together).

 

 

TAG NAME, TAG ATTRIBUTE, ATTRIBUTE VALUE

 

All tags have a name.  The name is simply the first work (no spaces) that appears in the tag.

 

A tag can have zero, one or more attributes.  In most cases, the attributes are optional.  The attributes can always be placed in any order.  A simple space separates all attributes.

 

Each attribute is given a value.  The value is usually placed inside quotes.

EXAMPLES

 

The font tag can have several different forms.  It all depends on which attribute of the font that we want to change.  All of these are examples of the font tag being used:

 

<font size="6" color="blue"> ... </font>

 

<font size="2"> ... </font>

 

<font color="red"> ... </font>

 

<font face="arial"> ... </font>

 

The two following uses are identical:

 

<font size="6" color="blue"> ... </font>

 

<font color="blue" size="6"> ... </font>

 

RESEARCHING A TAG

 

You can easily research any tag by simply typing its name and “html tag” in google.  You will immediately find sites that give you examples and well as lists of attributes and possible values for those attributes.