HTML

Students should be aware that the area of HTML covers far more than the contents of these notes. The notes only cover some of the more immediately useful aspects of HTML.

Note Most of the HTML style properties are not covered here, as they are better dealth with in the cascading style sheets (covered in the CSS section of these notes) section of these notes.

In an ideal world all web browsers would display a webpage in exactly the same way. Unfortunately this is not the case. HTML is an evolving standard. Over time more and more HTML tags are being added. Older browsers will not support some of the newer tags.

It is important to note that HTML:

Tags

HTML tags are surrounded by two angle brackets < and >. Normally tags come in pairs, with the closing pair having a leading / between the two angle brackets. For example, the code below is the HTML tag used for making text part of a paragraph.

<p>This is a paragraph element, 
because it is contained within a pair of "P" tags </p>

The information contained between the opening and closing tags is the tag's element.

Many HTML tags have one or more attributes that can be used to determine how the tag will behave. For example:

<p align="justify">This text will be justified </p>

When using tags we should be aware of the following:

Document Segmetation Tags

A webpage should contain the following tags:

  1. <!doctype html>

    Technically, the <!doctype> declaration is not a HTML tag. It is an instruction to the web browser about what version of HTML the page is written in. A file is identifed to browsers as being HTML5 if it contains the declaration <!doctype html>

    The <!doctype html> declaration must appear before the <html> tag. It is best practice to place the <!doctype html> declaration as the first line of code in a webpage.

  2. <html>
  3. The <html> tag identifies a file as being a HTML file.

  4. <head>
  5. The <head> tag contains all the tags that occur in the head of a webpage. <head> element information is not displayed in a web browser. An example of a tag contained within the <head> is <title>.

  6. <body>

    The body tag contains the main body of a webpage.

 

Below is shown the code for a very simple webpage.

<!doctype html>
<html>
  <head>
    <title>Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  </head>

  <body>
    This line of text will appear in the browser window,as it is contained within the body.
  </body>
</html>

Copy the code above into an editor and run the webpage.

Change the content of the webpage that you have created.

The <title> Tag

A <title> tag should always be included in a webpage's <head> element as a matter of habit. The <title> tag provides a webpage with a title. This title is used when:

Write code to make a webpage that contains a title.

Favourite Icon

A favourite icon (favicon) is a small icon that shows up next to a website's url in a web browser. Favicons are also know as shortcut icons. In most browsers, when you add a webpage to your favorites or bookmarks, the browser will display the favicon along with it.

Favicons can be made from .jpg, .gif or .png images. You do not have to pre-size the images for them to work (however, you should consider the download overhead that might be associated with large files). Insert the appropriate line of code below in the header section of your code to use a .jpg, .gif or .png file as a favicon.

<link rel="icon" type="image/jpeg" href="myImage.jpg">
<link rel="icon" type="image/gif" href="myImage.gif">
<link rel="icon" type="image/png" href="myImage.png">

Place your own .gif favicon in a webpage, as shown here.

What happens if the image is not square?

What happens if the images has a large width and height?

Favicons do not need to be placed in the website's root folder.

Write code to place a favicon in an "images" folder, as shown here.

Comments

Comment are enclosed within the "<!--" and "-->" tags.

For example:

<!-- This is a comment -->

We cannot place a comment inside the defining <> brackets of another tag. The code below is invalid.

<p <!-- Invalid comment --> > This HTML code will not work.</p>

Basic Text Tags

Basic text layout consists of headings and paragraph.

Write code to show the h1, h2, h3, h4, h5 and h6 tags.

What happens if you use a h7 or a h80 tag?

Why should br tags not be used to format the spacing between items on a webpage?

Special Characters

Escape sequences are used to generate special characters. A full list of escape sequences can be got by clicking here. Special characters include:

The <pre> tag

The <pre> tag is used when whitespace (which is normally discarded by other elements) is as much a part of the content as the rest of the text. The <pre> tag is normally used to display computer programming code, because it maintains indentations.

Write code to produce the webpage shown here.

Text Formatting

You should never format webpage content using html, as your code will not be maintainable. These tags are being shown only so that you will recognise them if you see them in another person's website.

I shall only skip over the obvious text formatting options, as the recommended way to format text is using cascading style sheets (covered in the CSS section of these notes). Text formatting tags include:

Horrizontal Lines <hr>

The <hr> tag draws a horrizontal line across a webpage. Note that there is no closing tag for <hr>. Its width can be specified using either pixels or as a percentage of the browser window. By default, a line will be drawn the full width of the browser window. Various attribute of <hr> are

Some <hr> tag examples:

<hr>

<hr width="100" size = "10" align = "left">

<hr width="50%" size = "10" noshade>

<hr color = "red" size = "10">

Automatic Webpage Redirection

In order to keep the structure of a website uniform, the various webpages are keep in sub-folders of the website's root folder. The exception to this rule is the index.html webpage, which must be in the root folder. This webpage is usually used to display a once-off flashintro. If a site does not have an intro flash webpage, then the index.html webpage has no purpose. In this case, you can force the index.html webpage to redirect to a different webpage.

The code below will force a new webpage to load. Note that there is no need to include a "body" element in the calling webpage, as the calling webpage will never be displayed.

<!doctype html>
<html>
  <head>
    <title>Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv = "refresh" content="0; url=./home/home.html">
</head>
</html>

The above code will cause the webpage "home.html" in the folder "home" to load. The 0 in the code represents the number of seconds to wait before redirection occurs. The 0 means that the "home/home.html" webpage will load immediately.

When might you want to redirect to a new webpage?

Write code to redirect from a webpage to a second webpage after a period of three seconds.

Images

The <img> tag is used to insert GIF, PNG or JPEG graphics files into webpages. Note that BMP graphics files cannot be inserted into a webpage.

<img src = "myimage.gif">

An alternative text can be given for an image. This text is displayed if the image does not load.

<img src = "myimage.gif" alt = "This is the alt text">

An additional tooltip text can be given for an image. This text is displayed when the mouse rolls over the image.

<img src = "myimage.gif" title = "This is the title text">

An image can be forced to resize onto a predefined width and height (using either pixel or % values). For example, use the code below to force an image to resize into a 100 by 200 pixel size. Note that in this example, because neither "px" or "%" was specified, the values default to "px". You should never format webpage content using html, as your code will not be maintainable.

<img src = "myimage.gif" width = "100" height = "200">

which is the same as explicitly stating that pixel values are being used, as shown below:

<img src = "myimage.gif" width = "100px" height = "200px">

The code below uses % values. It will force the image to become half the width of the browser window and twice the height of the browser window that it is being displayed in.:

<img src = "myimage.gif" width = "50%" height = "200%">

Write code to display four images beside each other, as shown here.

Adjust the code above so that the same four images (with the same width) are displayed on four separate lines, as shown here.

Hyperlinks

Hyperlinks are used to create a link to another webpage. The <a> tag is used to create a hyperlink. The web address is supplied as the value of the href attribute of the <a> tag. For example:

<a href = "http://www.dkit.ie">Go To DkIT</a>

Write code to allow a user to click on a hyperlink that will open the google webpage.

Anchors allow us to link to the location in the webpage where the anchor is placed. The code below will insert an anchor in a webpage.

<a id = "myAnchor"></a>

Use the # character to link to an anchor within a webpage. Anchors can be in different webpages or within the current webpage, as the following two examples show:

<a href = "#myAnchor"> Go To the anchor called myAnchor in current webpage</a>

Write code to allow a user to click back to the top of a webpage, as shown here.

An anchor in a different webpage can be used in a hyperlink. This is done by including the anchor in the href value of the hyperlink, as shown below:

<a href = "http://www.somewebsite.com#someAnchor"> Go To Staff section of DKIT webpage</a>

Write code to allow a user to click to a specific location within another webpage. For example, clicking here will take you to the iPhone6 anchor in this webpage.

An image can be used as a hyperlink. For example:

<a href = "www.dkit.ie"><img src = "myimage.gif"> </a>

Write code to use an image as a link to another webpage.

By default, a linked to webpage will overwirte the current webpage. If you wish for a linked to webpage to open in a new browser tab, then set the target attribute to be the value "_blank".

<a href = "http://www.dkit.ie" target = "_blank">Go To DkIT</a>

Click on the link below to see a webpage overwriting the current webpage:
<a href = "http://www.dkit.ie">Click here to load dkit.ie into this webpage's window</a>

Click on the link below to see a webpage loading into a new tab:
<a href = "http://www.dkit.ie" target = "_blank">Click here to load dkit.ie into a new window</a>

Write code to allow a user to load the google webpage in a new browser tab.

Image Maps

Like hyperlinks, image maps act as a link to another webpage. Image maps are often used for creating website navigation bars.

Client-side image maps are created using the <map> and <area> tags.

An image map must be tied to an image. This is done using the <img> tag. For example, to link an image to an image map called "mymap", use the code shown below:

<img src = "myimage.gif" usemap = "#myMap">

Note from the code above that:

Below is an image map example:

<img src    = "../images/imagemap.gif" 
     title  = "title text for image" 
     usemap = "#myMap">

<map name = "myMap"> 
  <area shape  = "circle" coords="70, 84, 52"
        href   = "http://www.dkit.ie" 
        title  = "title text for a hyperlink" 
        target = "_self"> 

  <area shape  = "rect" coords="25,180,125,280" 
        href   = "http://www.google.com" 
        target = "_parent"> 

  <area shape  = "poly" coords="153,106,186,225,340,193,315,81,304,167"    
        href   = "http://www.microsoft.com" 
        target = "_blank"> 
</map>

ALT text for image ALT text for a hyperlink

Create an image map to link to the four schools within DkIT, such as the one shown here. You can use a tool, such as the one at http://www.image-maps.com/ to get the poly coordinates of the maps.

Lists

HTML supports three different types of list:

  1. Unordered Lists

    Unordered list place the same bulleted character in front of each list item. They are enclosed using the <ul> tag.

    Items within an unordered list are enclosed using the <li> tag. For example:

    <ul>
      <li>first item in unordered list</li>
      <li>second item in unordered list</li>
    </ul>

    There are various types of bullets that can be applied to an unordered list, the default of which is square. The type is attached to the <ul> tag. Types include:

    • circle
    • disc
    • square

    For example, to make an unordered list that is bulleted using squares, apply the following code:

    <ul type = "square">

    Write code to show a list of products using a circle as the icon, as shown here.

    Using CSS, it is possible to use an image as a list bullet. Write code that uses an image as the list bullet, as shown here.

  2. Ordered Lists

  3. Items within an ordered list are enclosed using the <li> tag. For example:

    <ol>
      <li>first item in ordered list</li>
      <li>second item in ordered list</li>
    </ol>

    There are various types of numbering, the default of which is decimal numerals. The type is attached to the <ol> tag. Types include:

    1. The digit "1"
    2. The lowercase character "a"
    3. The uppercase character "A"
    4. The lowercase roman numeral "i"
    5. The uppercase roman numeral "I"

    For example, to make an ordered list that is ordered using lowercharacters, apply the following code:

    <ol type = "a">

    To start an ordered list at a particular position, attach the start property to the <ol> tag. For example, to start a list with an uppercase roman numeral III, apply the following code:

    <ol type = "I" start = 3>

    Write code to display an ordered list of products, using lower case roman numerals as the numbering, as shown here.

  4. Definition Lists

  5. Definition lists are use to hold a headline and an associated text. Definition lists are treated differently to unordered and ordered lists. A definition list makes use of three tags:

     

    Example of a definition list (Run Example)

    <dl>
      <dt>Product 1</dt>
        <dd>This product's details will be shown indented below its definition</dd>
      <dt>Product 2</dt>
        <dd>So will this product's details</dd>
      <dt>Product 3</dt>
        <dd>And so will all other product's details</dd>
    </dl>

    Write code to display titles and images for a list of iPhones, as shown here.

Tables

Each table needs to be contained within a <table> tag. Each table will consist of a set of rows, which are defined using the <tr> tag. Each row will consist of a set of columns, which are defined using the <td> tag.

For example, to produce a table that has no borders and fits as tightly as possible around it contents, as shown below:

                   
top left top right
bottom left bottom right

use the code below:

<table>
  <tr>
    <td> top left </td>
    <td> top right</td>
  </tr>
  <tr>
    <td> bottom left</td>
    <td> bottom right</td>
  </tr>
</table>

By default, a table has no border, is as small as possible and is alligned to the left. We can use the border attribute to create a border. We can use the width attribute to specify a width in either pixels or as a % of the browser window's width. We can use the align attribute to align a window to the left, right or in the centre.

For example, to produce the table below:

       
top left top right
bottom left bottom right

use the code below:

<table border = "5" width = "50%" align = "center">
  <tr>
    <td> top left </td>
    <td> top right</td>
  </tr>
  <tr>
    <td> bottom left</td>
    <td> bottom right</td>
  </tr>
</table>

I have only skiped over the obvious table formatting options, as the recommended way to format tables is using cascading style sheets (covered in the CSS section of these notes).

Table Captions

We can add a caption to the table using the <caption> attribute, as shown in the example below:

       
Demo Table
top left top right
bottom left bottom right

use the code below:

<table border = "5" width = "50%" align = "center">
<caption align = "bottom">Demo Table</caption>
  <tr>
    <td> top left </td>
    <td> top right</td>
  </tr>
  <tr>
    <td> bottom left</td>
    <td> bottom right</td>
  </tr>
</table>

Table Column Headings

Column headings (table headers) are created using the <th> tag. The <th> tag can be used to create row headers by including it at the beginning of a row. The <th> tag can be placed anywhere that the <td> tag can be placed. The only difference between the <th> and the <td> tag is that the <th> tag renders text in bold and centres it while the <td> tag does neither. For example, to produce the table below:

Heading 1 Heading 2
name 1 address 1
name 2 address 2

use the code below:

<table width = "100%" border = "2">
  <tr> 
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr> 
    <td>name 1</td>
    <td>address 1</td>
  </tr>
  <tr> 
    <td>name 2</td>
    <td>address 2</td>
  </tr>
</table> 

Write code to show a list of colours along with their hex code, as shown here.

Why is the colour example above bad coding practice?

Column Widths and Heights

Column widths can be set using the width attribute. It can be set using either pixel or % values. If not all columns have their width set, then only the non-set columns will have a variable width when the table is rendered.

Column heights can be set using the height attribute. It can be set using either pixel or % values.

For example, to produce the following width and height modified table:

width of this column has been set to set to 100 pixels. This row has been given no specific height.     Width of this column has been set to 50%
  This row has been given no specific height.      
  This row has been set to a height of 500 pixels. thin data This cell will automatically expand to have enough room for its image  

use the code below:

<table width = "100%" border = "2" cellspacing = "0" cellpadding = "0">
<tr>
<td width = "100"> width of this column has been set to set to 100 pixels. </td>
<td> This row has been given no specific height. </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td width = "50%"> width of this column has been set to 50% </td>
</tr>
<tr>
<td width = "100"> &nbsp; </td>
<td> This row has been given no specific height. </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td width = "50%"> &nbsp; </td>
</tr>
<tr>
<td width = "100" height = "500"> &nbsp; </td>
<td height = "500"> This row has been set to a height of 500 pixels. </td>
<td height = "500"> thin data </td>
<td height = "500"> This cell will automatically expand to have enough room for
its image<img src="image_map_demo.gif" width="200" height="100"> </td>
<td width = "50%" height = "500"> &nbsp; </td>
</tr>
</table>

Spanning rows and columns

Several rows can be joined together to span several columns using the rowspan attribute. Several columns can be joined together to span several rows using the colspan attribute.

Note: Table cells should never be spanned. Tables are meant to hold tabular data. Tables should never be used to layout content on a webpage. This code is shown only so that you will recognise it if you come across it in a badly constructed webpage.

An example of a table that spans row and colmuns is shown below:

   
       
 

use the code shown below:

<table width = "100%" border = "2">
<tr>
<td rowspan = "3"> &nbsp; </td>
<td colspan = "4"> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
<tr>
<td colspan = "4"> &nbsp; </td>
</tr>
</table>

IFrames

Frames can be used to display the content of another webpage inside your own webpage. An iframe needs to be given the name of a source webpage, which will be loaded into the iframe.

<iframe src = "http://www.dkit.ie"></iframe>

 

A width and a height can be assigned to an iframe. In the example below, only the second iframe has a width and height associated with it:

Example of an iframe (Run Example)

<h1>DkIT</h1>
<iframe src = "http://www.dkit.ie"></iframe>
<h1>Louth County council</h1>
<iframe src = "http://www.louthcoco.ie" width = "800px" height = "400px"></iframe>

Although it does not produce an error, it makes no sense to have an iframe that does not have a src defined, as src is the only way that content can be placed into a frame. Any text typed between the <iframe> and </iframe> tags is ignored.

The content of an iframe cannot be book-marked, as it is contained inside another webpage.

The iframe width and height cannot be set using a % value.

Write code to fill the screen with two webpages, as shown here. You will need to use Javascript code to get the window width and height.

frameset

A frameset is a container that seperates a browser's window into two or more frames. A frameset does not appear in a browser itself. Instead it specifies how other webpages should appear in a browser. Framesets are contained within a <frameset> tag. The <frameset> tag uses the 'rows' and 'cols' attributes to position two or more frames and/or framesets within itself. rows and cols values can be in pixels, % or "*" (which means take up all remaining available space. For example, cols = "*,*,*" tells the browser to divide the screen into three frames of equal width).

Note: In general, you should not use Framesets.

Example of a frameset (Run Example)

<frameset rows         = "*" 
       cols         = "400,*" 
       framespacing = "0" 
       frameborder  = "no" 
       border       = "0">

  <frame src       = "http://www.dkit.ie" 
         name      = "dkitFrame" 
         scrolling = "auto" 
         noresize>

  <frameset rows         = "*,200" 
         cols         = "*" 
         framespacing = "0" 
         frameborder  = "no" 
         border       = "0">

  <frame src  = "http://www.louthcoco.ie" 
         name = "louthCoCoFrame">

    <frame src       = "http://www.dundalk.ie/chamber/" 
           name      = "chamberOfCommerceFrame" 
           scrolling = "no" 
           noresize>
  </frameset>
</frameset>

In the above example, the noresize attribute is used to force the dkitFrame and the chamberOfCommerceFrame frames to be of a fixed size.

In the above example, the scrolling = "no" attribute is used to disable the scrollbar on the chamberOfCommerceFrame

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>