HTML 4.01 & XHTML 1.1 by tabletuniversity

VIEWS: 53 PAGES: 100

More Info
									1
                                      Table of Contents

Chapter 1: Introduction........................................................................................ 2
Chapter 2: HTML Basics...................................................................................... 7
Chapter 3: Basic HTML Page Structure............................................................. 14
Chapter 4: Displaying Text................................................................................... 24
Chapter 5: Formatting Text................................................................................. 27
Chapter 6: Creating Lists..................................................................................... 35
Chapter 7: Hyperlinks.......................................................................................... 38
Chapter 8: Tables.................................................................................................. 40
Chapter 9: Page Layout........................................................................................ 45
Chapter 10: Multimedia....................................................................................... 48
Chapter 11: Input Forms...................................................................................... 51
Chapter 12: Frames.............................................................................................. 63
Chapter 13: Creating scripts................................................................................ 64
Chapter 14: Advanced HTML Features.............................................................. 68
Chapter 15: Writing Secure HTML.................................................................... 73
Reference................................................................................................................ 75
Creative Commons License (CC-BY-NC-ND).................................................... 96




                                                                1
                              Chapter 1: Introduction

What is HTML?
HTML stands for Hypertext Markup Language. Hypertext means being able to be accessed
through the internet. Markup language means codes that allow the author to decide how
information is supposed to appear in the web browser. HTML is the main markup language for
web pages. HTML consists of HTML elements which are the basic building-blocks of web
pages. When you use a web browser, your web browser downloads the HTML document from
the web server and renders those HTML elements into a visible page. HTML elements provide
the structure to a web page such as headings, paragraphs, lists, links, quotes and so on. Other
languages such as Cascading Style Sheets (CSS) allow the web page to be styled. You can
also use HTML to embed scripts into the web page which allow the web page to become
interactive. Each language provides a specific function. HTML is for structure, CSS is for
presentation and JavaScript is for advanced interaction.




                  Illustration 1: A basic diagram of how an HTML file is converted
                               into a visible page on the user's computer


In summary, HTML gives author's the means to:

•Publish online documents with headings, text, tables, lists, photos, etc.
•Retrieve online information via hypertext links, at the click of a button.


                                                 2
•Design forms for conducting transactions with remote services, for use in searching for
information, making reservations, ordering products, etc.
•Include spread-sheets, video clips, sound clips, and other applications directly in their
documents.


What is the Difference between HTML, HTML 4.01 and XHTML?
When HTML was first created it was only being developed with basic functionality such as the
ability to create hyperlinks, show text and perform other basic abilities. Over time, HTML was
updated to include new features such as file uploading and frames. The Latest standard is
called HTML 4.01 and includes all the important features of the previous versions. XHTML is
another markup language that is taught in this course. The X in XHTML stands for extended
and allows for adding additional functionality to HTML pages. There is also HTML 5 which
includes even more capabilities but these capabilities are generally more advanced than the
intended scope of this course. We will be devoting an entire course to HTML 5 so all the
features can be learned completely and thoroughly. All of this material will be covered in detail
in further chapters. At this time its simply important to know that HTML started with the first
version of HTML and over time more features were added to the language. HTML 4.01 is the
final standard in HTML. Going forward the new standards are being added to HTML 5. Before
you can learn HTML 5 you must first understand basic HTML which is HTML 4.01 and XHTML
1.1.

There are some important differences between HTML 4.01 and XHTML 1.1 that we will be
covering in later chapters.

Getting Started

As we just learned, HTML simply consists of information with HTML elements. These HTML
elements are used to markup that information. With that being said, you don't need any
complex software to get started writing your first web pages. You only need a way to write your
HTML elements in plain text (.txt extension). If you are using the Windows operating system
then we will be using notepad. It's already installed on your computer and should be located at:
start button -> programs -> accessories -> notepad. Find that program and open it up. If
you are using a different operating system then use any text editor that can save in plain text
with a .txt extension.




                                                3
                         Illustration 2: The Microsoft version of Notepad

We will be writing all of our HTML code into these text editors then saving them with a .txt
extension. When that is accomplished we will change the extension to .html or .htm. The icon
for the file should change to your default web browser. When you open a file with a .htm or
.html extension your web browser will use the HTML tags to create the web page. These HTML
documents can also be uploaded to a web server and accessed by anyone with a web
browser.

What is covered in this course?

This course consists of 15 chapters and 15 lectures. The 15 chapters are similar to a standard
textbook you would read in a classroom setting and covers all the information you need to
know in order to successfully use HTML in a professional setting. The 15 lectures cover
everything in the textbook with hands on demonstrations and examples that you can follow.
The lectures are also interactive and adaptive. What this means is that periodically you will be
asked to answer a multiple choice question or solve a problem. Based on your results the video
lecture course adapts to your needs. If you answer many questions wrong then you will be
required to listen to additional information and solve additional problems until mastery of the
concept is achieved. With that being said, there is no homework for this course as all the work
will be required to be finished during the lectures. If you wish to obtain a certificate of


                                                4
completion then you will need to complete all 15 lectures, the midterm and the final exam with
a 90% or better.

                  Chapter                                              Description
      Chapter 1: Introduction                A brief review of what HTML is and what this course covers
      Chapter 2: HTML Basics                 Covers HTML elements and attributes.
      Chapter 3: Basic HTML Page Structure   Build your first basic HTML page.
      Chapter 4: Displaying Text             Creating basic text and marking it up.
      Chapter 5: Formatting Text             Adding additional formatting to text.
      Chapter 6: Creating Lists              Covers creating lists of all varieties.
      Chapter 7: Hyperlinks                  Covers how to create links to other web sites.
      Chapter 8: Tables                      Covers how to create tables to organize data.
      Chapter 9: Page Layout                 Covers how to add styling to a page.
      Chapter 10: Multimedia                 How to add multimedia such as images.
      Chapter 11: Input Forms                How to create input forms to collect data from visitors.
      Chapter 12: Frames                     How to implement frames.
      Chapter 13: Creating scripts           How to implement external scripts such as JavaScript.
      Chapter 14: Advanced HTML Features     Advanced HTML features such as meta tags.
      Chapter 15: Writing Secure HTML        Demonstrates how to make sure your HTML is secure and best practices.



Using Software to Build Websites VS Hand Coding
A good question many people ask is on the basis of using a software program to help build the
website or building the website by writing line by line (referred to as hand coding). This course
teaches you how to write HTML by hand coding. The main reason for teaching HTML this way
is because you need to see how a website is designed from the ground up. Once you have
mastered hand coding then you can quickly utilize a software program to build your websites. A
software program will help you write the type of website you want more quickly but the software
program may not build the website exactly the way you see it in your head. When you
understand hand coding, you can easily look at the website HTML and modify it to look picture
perfect. This is why I recommend learning hand coding first and then learning the HTML editor
second. When you begin building websites you should use an HTML editor and then use hand
coding to make minor adjustments. Another reason to learn hand coding is so you can study all
the HTML elements and tags in detail. By doing this you will understand and learn the
full functionally of HTML and XHTML. When you understand all the tags you can utilize the
technology to its fullest potential. Many web development companies require their web
developers to learn HTML hand coding for this very reason.

W3C Standards

W3C stands for World Wide Web Consortium. This organization is the main international
standard setting organization for the world wide web. They make sure to design standards for
HTML and CSS (among others) which allow websites to be designed so they can be read by
different web browsers and appear essentially the same. If the W3C did not exist then each
web browser could read HTML differently and display the website in an entirely different

                                                           5
fashion. With that being said it is very important to follow these web standards when writing
your HTML. This course teaches HTML based on W3C standards. The official standards can
be located at the following links:

                             HTML 4.01 (http://www.w3.org/TR/html401/ )


                             XHTML 1.1 (http://www.w3.org/TR/xhtml11/ )




                                                 6
                            Chapter 2: HTML Basics

HTML Elements
HTML consists of elements which are used to markup various portions of the web page. A
basic example of an HTML element is the bold tag which is used to make text appear bold. The
text that is to appear bold is surrounded by the bold tags. Here is an example of the bold tag
being used:

      <b>bold text</b>

When your browser reads the html tags it converts the text to appear as bold, such as
this: bold text

Each HTML element generally consists of two HTML tags. All html tags are enclosed in
inequality signs: < and >. In total there are 75 different HTML tags and we will be learning how
to use all 75 tags. These 75 tags are used to create a variety of HTML elements. Once you
know how to use all 75 tags and their functionality correctly then you
have successfully mastered HTML.

When writing HTML code you must always use a closing tag or end the tag with a slash at
the end of the tag. The closing tag tells the browser when to stop marking up that specific
piece of text. For XHTML this is a requirement. The opening and closing tag makes up the
entire HTML element. The closing tag is bolded below:

      <b>bold text</b>

Some html tags only consist of one tag such as the line break tag below:

      <br />

This code inserts a line break into the page and must be closed by using the / symbol.

The line break tag above is a good example of the differences between HTML 4.01 and XHTML
1.1. In HTML 4.01 you don't need to include the / symbol to close the tag. The html tag can
simply be written as <br>. However, in XHTML 1.1 you must include the / in order for the tag to
be displayed correctly. In the scope of this course the XHTML 1.1 standards will take
precedence over HTML 4.01 standards.

NOTE: Every tag must be in lowercase. This is a requirement of XHTML. If you are using
HTML then you may use lowercase. One of the main differences between HTML and XHTML is
that XHTML is more strict about how you should write the syntax.

                                                7
                          Example list of All 75 HTML/XHTML Tags
                                                 <h1>
                                   <!--...-->
                                                 <h2>
                                   <!doctype>                 <p>
                                                 <h3>
                                   <a>                        <param>
                                                 <h4>
                                   <abbr>                     <pre>
                                                 <h5>
                                   <address>                  <q>
                                                 <h6>
                                   <area>                     <samp>
                                                 <head>
                                   <b>                        <script>
                                                 <hr>
                                   <base>                     <select>
                                                 <html>
                                   <bdo>                      <small>
                                                 <i>
                                   <blockquote                <span>
                                                 <iframe>
                                   <body>                     <strong>
                                                 <img>
                                   <br>                       <style>
                                                 <input>
                                   <button>                   <sub>
                                                 <ins>
                                   <caption>                  <sup>
                                                 <kbd>
                                   <cite>                     <table>
                                                 <label>
                                   <code>                     <tbody>
                                                 <legend>
                                   <col>                      <td>
                                                 <li>
                                   <colgroup>                 <textarea>
                                                 <link>
                                   <dd>                       <tfoot>
                                                 <map>
                                   <del>                      <th>
                                                 <meta>
                                   <dfn>                      <thead>
                                                 <noscript>
                                   <div>                      <title>
                                                 <object>
                                   <dl>                       <tr>
                                                 <ol>
                                   <dt>                       <ul>
                                                 <optgroup
                                   <em>                       <var>
                                                 >
                                   <form>
                                                 <option>




HTML Tag Attributes
Certain HTML tags allow you to define specific functionality for the element. Its kind of like
defining the settings for how the browser is to use the element. One example of this is the font
tag which is shown below without attributes:

       <font>font text</font>

The above html tags doesn't do anything for the text. What if we want to make the text blue,
12pt size and times new roman font? The answer is we define it by using the font's attributes.
The font tag has the following attributes which you can define:

Color: Specifies the color of the text.

Face: The font family (such as times new roman)

Size: Size of the text.

Using these attributes we can now create blue 12pt times new roman font using the following
code:


                                                     8
      <font size="12" color="blue" face="times new roman">font
      text</font>




                            Illustration 3: Diagram of an HTML element

Take note that all the values of the attributes are surrounded by quotes. This is a requirement in
XHTML. Here is how the text appears now: font text.

Note: Every tag attribute must be defined. For example, in the above example you must define
the attribute as: size="12" instead of size="". This is another requirement of XHTML.

Note: Each HTML tag has different attributes that can be defined. We will be covering each
HTML tag in this course and explaining the usage of each HTML tag's unique attributes.

Note: The font tag has been made obsolete due to the introduction of CSS, this HTML tag will
not be discussed in this course. In the CSS course, you will learn how to style your web pages.

Standard HTML Tag Attributes

Standard tag attributes means these are attributes which can be applied to most HTML tags.
There are three types of standard attributes: core, language and keyboard. In total there are
four core standard attributes. These attributes are the following:

Class: Specifies a class name for the HTML tag so it can be styled by CSS. (discussed in
detail in other courses).

ID: Assigns a unique name to an HTML tag so it can be used by JavaScript or other scripting
languages. Each ID must be unique within the document.

Style: Style the tag by using inline CSS. (to be covered in the CSS course).


                                                9
Title: Displays extra information to the user via a tool tip (the little box that pops up when you
hover your mouse over something). Here is an example: Hover your mouse over this text.

The core standard tag attributes can be applied to all HTML tags except the following: <base>,
<head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

At this point in the course its only important to learn the title standard attribute as the other
three attributes are primarily used in more advanced courses. Here is an example of the title
core standard attribute being used:

       <p title="This is a tool tip.">Tooltip text</p>

In total there are three language standard attributes. They can be applied to all tags except the
following: <script>, <param>, <iframe>, <hr>, <frameset>, <frame>, <br>, and <base>. Here
are the three language standard attributes:

Dir: Specifies the text direction. Defined as either ltr (left to right) or rtf (right to left).

Lang: Assigns the document's language using the iso 639-1 language code. These are two
letter codes such as en for english. You can also use more specific languages codes such as
en-us (United States) or en-uk (United Kingdom). (see the reference section for a list of the
language codes).

XML:lang: This is the same as the attribute above except its for XHTML documents. Its defined
the same way as the above attribute.

Here is an example of all three language attributes being used:

       <p dir="ltr" lang="en" xml:lang="en">Language Standard
       Attributes</p>

The final two standard attributes are the keyboard attributes, which are the following:

Accesskey: Creates a key combination to gain focus on the element. For example you can
use this attribute to gain focus of an element by pressing one key on your keyboard.

Tabindex: Defines the order in which you can navigate through a web page using the tab
button with 1 being the first place you go when you press tab.

Unlike the other standard attributes these attributes are only definable by seven tags which are
the following: <textarea>, <select>, <object>, <button>, <area>, and <a>. Here is an example
of these attributes being used:


                                                     10
       <button accesskey="q" tabindex="1">Click here</button>



Types of HTML Elements
The opening and closing HTML tags make up an html element. In total there are three types of
HTML elements: void elements, raw text elements and normal elements.

Void elements don't have an ending tag. They simply consist of the opening tag which
contains all the attributes. A good example of this is the link element displayed below:

       <link rel="stylesheet" href="/html/layout.css" type="text/css" />

In XHTML these elements must be closed properly with />.

Raw text elements contain text in between the start and end tag.

    • The start tag always contains the HTML element's attributes.
    • The text in the middle may also contain other HTML elements.
    • The end tag must be designated with a / before the tag's name. For example: </p>
An example is the font tag which changes the font of text.

       <font size="12" color="blue" face="times new roman">font
       text</font>

Note: These elements are closed with a full closing tag such as: </font>.

Normal elements contain a start and end tag. Similar to a raw text element they have the
following characteristics. This element is different from the raw text element in the sense that it
does not need to perform a function for text.

    • The start tag contains the HTML element's attributes.
    • The text in the middle may also contain other HTML elements.
    • The end tag must be designated with a / before the tag's name. For example: </p>
An example of a normal element is the start and end HTML tags:
       <html>
       </html>

Note: These elements are closed with a full closing tag such as: </html>.


Semantic HTML

                                                 11
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the
information in web pages rather than merely to define its presentation (look). When using
semantic HTML it is important to delegate all presentational function to cascading style sheets
(CSS). HTML should only be used for building structure and adding additional meaning to that
structure. When writing your documents it's important to always use the most specific tag that
can be applied to the text or document structure. Key aspects of semantic HTML are the
following:

Elements for marking up text
Elements used for user interactivity
Elements which are invisible to the user
Elements which include external documents (such as javascript code or CSS style sheet)
Elements which are used to link to external documents
Elements used for building document text structure (such as headings, paragraphs etc.)
Elements used for quotes and references
Elements used for contact information
Elements used for document infrastructure
Elements used for supporting international audiences
Elements used to create forms
Elements used to display programming information
Elements used to create tables
Elements used for definitions
Elements used to create menus
Elements used for multimedia
Elements used in the creation of lists
Elements used for generic purposes
As you can see from the above, semantic HTML is all about the meaning of the text and the
meaning of the usage of the HTML elements. The ultimate goal of semantic HTML is to provide
as much meaning to the usage of the text you are marking up. Semantic HTML doesn't just
relate to the usage of the elements. Additional semantic meaning can be provided through
specific usage of attributes. This book has been written to explain, in detail, how to effectively
use semantic HTML.


Using CSS
CSS stands for Cascading Style Sheets. CSS style sheets are used to quickly style a
website. To be an amazing web developer it is a good idea to always use CSS to style your
pages instead of using the styling features in HTML. When you take the CSS course you
should only use CSS to style your pages. At this point, don't worry about making your pages
stylish. You simply need to worry about building good HTML pages that follow W3C standards.

Deprecated Elements and Attributes

A deprecated element or attribute means the functionality has become obsolete due to
browsers no longer supporting its use or a different method has been created which made the

                                                12
tag obsolete. Often times a better method gets created for performing that specific HTML
function. A good example is with CSS and HTML. CSS is used for styling a document and this
is the recommended method for doing so. However, before CSS was created HTML tags were
created for styling the page. Once CSS was created many of these tags were deprecated.

Obsolete Elements and Attributes
Certain elements and attributes were made obsolete with the introduction of HTML 5
standards. Obsolete/deprecated elements and attributes have been removed from this course.
This is because you will be taking the HTML 5 + CSS course after and will eventually know the
complete working knowledge of HTML/HTML5/CSS. The following chart lists the HTML tags
that were deprecated by HTML 4.01. It also lists the tags that were made obsolete by HTML 5.

                            Deprecated since       Obsolete since
                               HTML 4.01              HTML 5
                           <center>                <acronym>
                           <noframes>
                                                   <applet>
                           (obsolete)
                           <s>                     <basefont>
                           <strike>                <big>
                           <tt>                    <dir>
                           <u>                     <font>
                                                   <frame>
                           <xmp> (obsolete)




                                              13
                    Chapter 3: Basic HTML Structure

Basic HTML Page Structure
The overall structure of an html document consists of three HTML elements:

      <html>...</html>

The root element of an HTML document. All other HTML elements are contained within these
tags.

The HTML element marks the beginning and the end of an HTML document.

      <head>...</head>

Container for processing information and metadata about an HTML document.

It contains head elements. Head elements are elements which can only be placed in between
the head tags.

      <body>...</body>

Container for the displayable content of an HTML document.

Here is an example of this being demonstrated:

      <html>

      <head>
      </head>

      <body>
      </body>

      </html>




                                             14
Document Type Declaration
The document type declaration (DTD) is used to tell the web browser what type of HTML
version you will be writing in. HTML 4.01 has three different DTDs and XHTML 1.1 has one.

The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated
or do not appear in frameset documents. For documents that use this DTD, use this document
type declaration:


      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">

The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated
elements and attributes (most of which concern visual presentation). For documents that use
this DTD, use this document type declaration:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">

The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well.
For documents that use this DTD, use this document type declaration:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">

and for XHTML 1.1:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

When writing your doctype make sure to use uppercase as well as the exclamation mark.
When the web browser processes the doctype the browser runs in one of two
modes: standards mode or quirks mode. When a doctype is present it operates in standards
mode and if no doctype is present then it runs in quirks mode. If no doctype is present then
there might be issues with processing the page. For XHTML, the doctype is required. The
reason doctype is good to declare is because certain HTML tags are only available in certain
DTDs. If you declare the wrong doctype those HTML tags might not be rendered by the
browser. Also the doctype must be written before the beginning <html> tag. Here is a chart of
the HTML/XHTML DTDs.




                                             15
                  HTML 4.01 / XHTML 1.0 DTDs
 HTML Tag                                          XHTML 1.1
              Transitional     Strict   Frameset
<a>          Yes           Yes        Yes          Yes
<abbr>       Yes           Yes        Yes          Yes
<acronym> Yes              Yes        Yes          Yes
<address>    Yes           Yes        Yes          Yes
<applet>     Yes           No         Yes          No
<area />     Yes           Yes        Yes          No
<b>          Yes           Yes        Yes          Yes
<base />     Yes           Yes        Yes          Yes
<basefont /> Yes           No         Yes          No
<bdo>        Yes           Yes        Yes          No
<big>        Yes           Yes        Yes          Yes
<blockquote> Yes           Yes        Yes          Yes
<body>       Yes           Yes        Yes          Yes
<br />       Yes           Yes        Yes          Yes
<button>     Yes           Yes        Yes          Yes
<caption>    Yes           Yes        Yes          Yes
<center>     Yes           No         Yes          No
<cite>       Yes           Yes        Yes          Yes
<code>       Yes           Yes        Yes          Yes
<col />      Yes           Yes        Yes          No
<colgroup> Yes             Yes        Yes          No
<dd>         Yes           Yes        Yes          Yes
<del>        Yes           Yes        Yes          No
<dfn>        Yes           Yes        Yes          Yes
<dir>        Yes           No         Yes          No
<div>        Yes           Yes        Yes          Yes
<dl>         Yes           Yes        Yes          Yes
<dt>         Yes           Yes        Yes          Yes
<em>         Yes           Yes        Yes          Yes
<fieldset>   Yes           Yes        Yes          Yes
<font>       Yes           No         Yes          No
<form>       Yes           Yes        Yes          Yes
<frame />    No            No         Yes          No
<frameset>   No            No         Yes          No



                              16
<h1> to <h6>   Yes   Yes        Yes   Yes
<head>         Yes   Yes        Yes   Yes
<hr />         Yes   Yes        Yes   Yes
<html>         Yes   Yes        Yes   Yes
<i>            Yes   Yes        Yes   Yes
<iframe>       Yes   No         Yes   No
<img />        Yes   Yes        Yes   Yes
<input />      Yes   Yes        Yes   Yes
<ins>          Yes   Yes        Yes   No
<isindex>      Yes   No         Yes   No
<kbd>          Yes   Yes        Yes   Yes
<label>        Yes   Yes        Yes   Yes
<legend>       Yes   Yes        Yes   Yes
<li>           Yes   Yes        Yes   Yes
<link />       Yes   Yes        Yes   Yes
<map>          Yes   Yes        Yes   No
<menu>         Yes   No         Yes   No
<meta />       Yes   Yes        Yes   Yes
<noframes>     Yes   No         Yes   No
<noscript>     Yes   Yes        Yes   Yes
<object>       Yes   Yes        Yes   Yes
<ol>           Yes   Yes        Yes   Yes
<optgroup>     Yes   Yes        Yes   Yes
<option>       Yes   Yes        Yes   Yes
<p>            Yes   Yes        Yes   Yes
<param />      Yes   Yes        Yes   Yes
<pre>          Yes   Yes        Yes   Yes
<q>            Yes   Yes        Yes   Yes
<s>            Yes   No         Yes   No
<samp>         Yes   Yes        Yes   Yes
<script>       Yes   Yes        Yes   Yes
<select>       Yes   Yes        Yes   Yes
<small>        Yes   Yes        Yes   Yes
<span>         Yes   Yes        Yes   Yes
<strike>       Yes   No         Yes   No
<strong>       Yes   Yes        Yes   Yes



                           17
            <style>       Yes           Yes           Yes           Yes
            <sub>         Yes           Yes           Yes           Yes
            <sup>         Yes           Yes           Yes           Yes
            <table>       Yes           Yes           Yes           Yes
            <tbody>       Yes           Yes           Yes           No
            <td>          Yes           Yes           Yes           Yes
            <textarea>    Yes           Yes           Yes           Yes
            <tfoot>       Yes           Yes           Yes           No
            <th>          Yes           Yes           Yes           Yes
            <thead>       Yes           Yes           Yes           No
            <title>       Yes           Yes           Yes           Yes
            <tr>          Yes           Yes           Yes           Yes
            <tt>          Yes           Yes           Yes           Yes
            <u>           Yes           No            Yes           No
            <ul>          Yes           Yes           Yes           Yes
            <var>         Yes           Yes           Yes           Yes


HTML Tag
The HTML tags define the beginning and end of your HTML code. To define your HTML tags
use the following:

      <html>
      </html>

As a rule of thumb, you should never place HTML tags outside of the <html> tags. There are
three attributes that you can define for the HTML tag:dir, lang and xmlns. These attributes
should sound familiar as two of them are standard core attributes and can be used by many
elements. Let's cover them in more detail.

The lang attribute tells the browser and search engines what language the document is in.

Defining the HTML document as English:

      <html lang="en">

In order to define other languages you have to use the correct two letter language code. The
language code follows ISO 639-1 (see reference section for other language codes). You can


                                              18
also use the xml:lang attribute when using XHTML. It is defined in the same way as the lang
attribute. For example you would replace lang="en" with xml:lang="en".

Using the dir attribute, you can define what direction the text in the document should be
displayed.

Defining the document's text direction as either left to right (LTR) or right to left (RTL):

       <html dir="rtl">

The last attribute is the xmlns attribute. This attribute stands for XML namespace. XML
namespaces are used for providing uniquely named elements and attributes in an XML
document. In XHTML this attribute should always be defined as: http://www.w3.org/1999/xhtml.
This is important to know because it tells the browser that you are using XHTML elements and
tags. Without the XML namespace being defined you risk having errors with your web page.
Remember, the web browser can read a variety of different markup languages, scripting
languages and other web technologies. Often times each language has the same tag names
as other languages. By using the xmlns this issue is resolved. Here is an example of xmlns
being defined as an xhtml document:


       <html xmlns="http://www.w3.org/1999/xhtml">


Head Tags
Head tags are used to define head elements. Head elements include scripts, meta information,
page title, and cascading style sheets (CSS). To define the beginning of your head section use
the following tags:

       <head>
       </head>

In total there are seven tags which can be placed in the head
tag: <title>,<style>,<base>,<link>,<meta>,<script> and <noscript>. These tages must be
placed in between the head tags.



Title Tags
When discussing the head tag it is important to mention the title tag. The title tag defines the
title of the page and is a required tag in the head section. To define your page title use the
following tags.


                                                  19
      <title>PAGE TITLE GOES HERE</title>

The document title will show up in the browser toolbar, the page name if bookmarked and in
search results pages. Make sure to name your documents accurately.



Base Tag
The base tag is used to define the base URL for all relative URLs (ie. /help) in the document.
For example, using the base tag you can set the base URL as your primary domain URL (ie.
http://www.tabletuniversity.com). Once you have accomplished that all further URLs can be set
without the domain name URL. For example instead of typing
"http://www.tabletuniversity.com/help" you can instead simply write /help instead. There are two
attributes for the base tag:

Href: This is the base URL to use for all relative URLs in the document. It must be placed
before any relative URLs.

Target - Defines how the link will be opened. There are five possible options listed below for
this attribute:

      1._blank: Opens the document in a new window.
      2._self: Opens the link in the same windows at the current page (default value).
      3._parent: Opens the document in the parent frame.
      4._top: Opens the in the body of the window.
      5.framename: Opens the document in a specific frame by name.

      <base target="_blank" href="http://www.tabletuniversity.com" />


Link Tags
The link tag is used for including CSS style sheets into your documents. In total there are five
possible attributes for this tag:

Href: The URL of the document you are including.

Hreflang: The language the the linked document is in. Use the two letter language codes (ie.
"en" for english). This is not a required attribute.

Media: Defines the type of device which the linked document applies to. You can have different
stylesheets for different devices (print, screen, braille, aural etc.).



                                                20
Rel: The relationship of the linked document to the current document. If the href is a CSS
stylesheet then this could be set to: rel="stylesheet".

Type: This attribute is used to define the type of document you linked to. If the href is a CSS
style then this should be set to: type="text/css".

      <link href="/stylesheet.css" rel="stylesheet" type="text/css"
      media="all" />



Script Tag
The script tag is used for embedding external or internal script files/code to be included in the
document. This tag will be explained in Chapter 13: scripts.


Noscript Tags

The noscript tag is used for displaying content to the user when the included script is not
supported or scripting is disabled by the browser. This tag will be explained in Chapter 13:
scripts.



Style Tags
Style tags are used for including CSS code directly into your document. This tag will be
explained in Chapter 9: Page Layout.



Meta Tags
Meta tags contain meta information. Meta information literally means data about data. In
HTML, meta information is available to search engines through the use of meta tags. Meta
information contains various data which we call metadata. The metadata can contain
information such as: description, keywords, author etc. Since metadata is only available to
search engines it is displayed in the head section of the web page. The meta information is
placed in the head section of the document between the <head> tags. Meta tags are extremely
powerful in what they can accomplish. These tags will be explained in detail in chapter 14:
Advanced HTML Features & Publishing HTML Pages.




                                                21
Body Tags
The body tags define the content of the web page such as text, hyperlinks, tables, images,
movies so on so forth. To define your html body use the following tags:

       <body>
       </body>



Adding Comments
Every now and then you may want to add extra information about the document without
anyone seeing it. You are able to do this by adding a comment in the HTML code. These
comments will only show up to people who are viewing the page code. It is a good habit to
explain what your code is doing by using comments. This habit is good for when you need to
update the page's code.

To use a comment start it with this tag:

       <!--

To define the end of your comment use the following tag:

       -->

Your comment will be placed in between those tags, for example:

       <!-- This is my first HTML comment! -->

Due to the nature of comments, avoid using multiple hyphens inside a comment.



Putting it all together
So far we have discussed doctype, html tags, head tags, title tags, body tags and comments.
Now its time to put it all together and write our very first html document. Using all of the above
information, here is what we get:

       1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
       2. <html xmlns="http://www.w3.org/1999/xhtml">


                                                22
       3.   <head>
       4.   <title>My First HTML Page</title>
       5.   </head>
       6.   <body>
       7.   <!-- This is the body of the document →
       8.   </body>
       9.   </html>

Quickly summarizing the above code:

1. XHTML 1.1 doctype.
2. Beginning HTML tag with xmlns defined.
3. Beginning head tag.
4. Beginning title tag followed by page title and ending title tag.
5. Ending head tag.
6. Beginning body tag.
7. A comment
8. Ending body tag.
9. Ending HTML tag.

Now open up notepad or your text editor and copy + paste the above 8 lines into the text editor
and save the document as html.txt. Then change the file type to .htm or .html by right clicking
on the file and selecting rename. Open the file in your web browser. What do you see? If
everything went as planned then you see an empty document with the page title of My First
HTML Page. Congratulations this is your first html document. In further chapters we will be
building bigger and better web pages.




                                                 23
                          Chapter 4 - Displaying Text

Paragraphs
In order to write paragraphs of text you need to place your text in the body section of your page
which is designated by the beginning and ending body tags. When starting your paragraphs
you need to use the following code to designate that the following text is a paragraph:

      <p>This is some text.</p>

The paragraph tags will place one blank white space between your paragraphs (depending on
the CSS stylesheet). If you wish to not have the white line then you need to use the line break
tag.



Line Break
The line break tags are used to start on the next line without a white space being placed below
the above text. A good example of where the line break tag is useful is when you are writing an
address. To declare a line break use the following tag:

      <br>

In HTML there is no end tag for the line break tag because its a void element. In XHTML the
line break tag must be closed. Use the following tag for line breaks in XHTML.

      <br />



Headings
Headings help to provide structure to a page. For example, most pages will have the page title
and subsections. Headings allow you to separate pieces of text so they are easier for the
reader. There are six levels of heading tags and as you go up in heading number the text
gets progressively smaller. The H1 tag is used for the most important titles and the remaining
tags are used for titles that are less important (such as subsections). Here are the six heading
tags that can be used.

      <h1>heading 1</h1>
      <h2>heading 2</h2>

                                               24
       <h3>heading      3</h3>
       <h4>heading      4</h4>
       <h5>heading      5</h5>
       <h6>heading      6</h6>

Here is how each heading tag looks like in your browser:




Take note that headings 5 and 6 are smaller than standard body text. Heading styles can also
be modified using Cascading Style Sheets (CSS).



Inserting Horizontal Line
A horizontal line is a great way to divide the page. If you need to add a horizontal line simply
add this code:

       <hr />

It is similar to the line break tag in the sense that there is only one tag.

and here is how a horizontal line looks:




                                                  25
Changing Text Direction
If you wish to change the direction of text then you can do so by using the bdo tag which
stands for bidirectional override. There are two settings for the bdo tag which are right to left
(rtl), left to right (ltf) and auto (browser decides) which are defined using the dir attribute. This
tag will override the existing text direction.

Example text of right to left:

       <bdo dir="rtl">Right to Left Text!!</bdo>

Example text of left to right:

       <bdo dir="ltr">Left to Right Text!!</bdo>

and here they are being used in your browser:




                                                  26
                           Chapter 5 - Formatting Text

Bold Formatting
Bold formatting is used to make text appear bold, so it stands out to the reader. Like this. To
make text bold, use the following tags:

       <b>This is some text that is bold.</b>

Another way to make text appear bold is by using the strong tag. The strong tag is used to
make text appear important. Most browsers these days simply convert strong tags to the same
functionality as the bold tags. To use the strong tags use the following:

       <strong>This is some text that is strong, it also looks
       bold</strong>



Italic Formatting
Italic formatting is another way of bringing attention to specific text. Like this. To use
italic formatting use the following:

       <i>This is some text that is italic</i>

Just like the bold formatting, Italic formatting also has a separate tag with a similar functionality
and that tag is the emphasis tag.

       <em>This is some emphasis text that appears italic</em>



Subscript Formatting
Subscript formatting is used for making subscript text, which is usually used in representing
chemical equations and other scientific data like this: H 2O.


To begin subscript formatting, use the following tags:

       <sub>This is subscript formatting</sub>



                                                  27
Superscript Formatting
Just like subscript format, superscript is also used to represent scientific data. Like this: 5 5.

To begin superscript formatting, use the following tags:

       <sup>This is superscript formatting.</sup>



Small Formatting
Just like big formatting. Small formatting also changes the font size of the text. In this case, it
makes it smaller, like this: small.

To begin small formatting, use the following tags:

       <small>This is small formatting</small>



Inserted Text Formatting
Lets say you have written an article and posted it at a specific date. Later on, you find that you
want to insert some text after the fact and let the readers know you inserted that text at a later
date. The insert text formatting allows you to do that and makes it look like this: inserted text.

To begin insert formatting, use the following tags:

       <ins>Inserted text</ins>

There are two optional attributes for this tag:

Cite: URL that explains the change.

Datetime: The date and time the change was made. (ie. 2012-12-13 00:00)




                                                  28
Deleted Text Formatting
Just like inserted text formatting, the deleted text formatting allows you to delete text after you
have published the article and let readers know you deleted that piece of text. It makes the text
look like this: deleted.

To begin delete formatting, use the following tag:

      <del>Deleted text</del>

This tag has two optional attributes:

Cite: A URL to explain the reason for the deletion.

Datetime: A valid date and time for the change. (ie. 2012-12-13 00:00)



Other Text Formatting Tags
The above HTML tags are probably the ones which you will use most often. However, there are
still many more to cover and we will be covering all of them. The next set of text formatting tags
includes quotations, acronyms, citations and more.



Abbreviations
Abbreviations allow you to add additional information about some text. Unlike traditional HTML
tags the abbreviation tag is slightly different. When using the abbreviation tag you have to
define what the abbreviation text will consist of. To do this we have to add some additional
information to the tag, mainly the title attribute.

To begin abbreviation formatting, use the following beginning tag:

      <abbr title="This is an abbreviation">abbreviation</abbr>

The text that you want to abbreviate goes in between the begging tag and the ending tag, like
this:

      <abbr title="ABBREVIATION TEXT GOES HERE">The abbreviated
      text</abbr>



                                                29
Here is how abbreviated text looks in your browser:




Addresses
The address tag is used to place contact information for the author or owner of the web
page/document.

To begin address formatting, use the following beginning tag:

      <address></address>

Its also important to mention that you have to use line break tags (<br />) to separate each line
of the address. Here is an example of the address tags used correctly:
      <address>
      Jason Smith<br />
      12543 Chesire St.<br />
      New Haven, Connecticut 92393<br />
      Tel: (232)234-2343<br />
      Email:Jason.smith (at) email.com<br />
      </address>

and here is how that will look in your browser:

Jason Smith
12543 Chesire St.
New Haven, Connecticut 92393
Tel: (232)234-2343
Email:Jason.smith (at) email.com



Block Quotations
The block quotation tag is used to quote large sections of text. Here is how to use it:

To begin block quote formatting, use the following tags:

      <blockquote></blockquote>

Here is an example of a block quote from wikipedia:

                                                  30
      <blockquote>In 1980, physicist Tim Berners-Lee, who was a
      contractor at CERN, proposed and prototyped ENQUIRE, a system for
      CERN researchers to use and share documents. In 1989, Berners-Lee
      wrote a memo proposing an Internet-based hypertext
      system.</blockquote>

and how it is displayed in your browser:

       In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and
       prototyped ENQUIRE, a system for CERN researchers to use and share
       documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based
       hypertext system.

When quoting anything it is very important to cite the source for the quote. To do this we use
the cite attribute, as follows:

      <blockquote cite="http://en.wikipedia.org/wiki/HTML">In 1980,
      physicist Tim Berners-Lee, who was a contractor at CERN, proposed
      and prototyped ENQUIRE, a system for CERN researchers to use and
      share documents. In 1989, Berners-Lee wrote a memo proposing an
      Internet-based hypertext system.</blockquote>

and lets see how that displays in your browser:

       In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and
       prototyped ENQUIRE, a system for CERN researchers to use and share
       documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based
       hypertext system.

As you can see, there is no change from the blockquote without cite being used. The reason for
this is because most major browsers in use do not support the cite attribute. In the future, the
cite attribute may be supported by browsers so its a good habit to use the cite attribute.



Single Quotations
Single quotations are very similar to block quotes.

To begin single quote formatting, use the following tags:

      <q></q>


                                               31
Similar to block quotes you can also use cite to place a citation.

       <q cite="www.tabletuniversity.com/html">QUOTED TEXT HERE</q>



Citations
The cite HTML tag is used to reference another work. It does not have to be a reference to a
website.

To begin citation formatting, use the following tags:

       <cite></cite>

Here is how a citation will look with citation tags:

Report of the Nation, Susan Watson, 1998



Definitions
The definition tag is used to indicate a definition of a word.

To begin definition formatting, use the following tags:

       <dfn>hat</dfn>: A shapred covering for the head.

and here is how it shows up:

Hat: A shaped covering for the head.



Computer Code Text Formatting
There are also six tags for computer text formatting. It's important to note that most of these
tags don't do much in terms of changing the appearance of the text. The appearance of the text
should be modified by using CSS.




                                                  32
Code
The code tag is used to represent computer code that would be used in a program.

To begin code formatting, use the following tags:

      <code></code>

Here is how code formatting looks:

Winwait for $y =134 Unless $y>2 endif



Keyboard Text
Keyboard text is used to indicate text that should be typed on the keyboard, for example into a
computer program prompt.

To begin keyboard text formatting, use the following tags:

      <kbd></kbd>

Here is how the keyboard formatting looks:

When the box pops up, type: Apples.



Sample Computer Code
If you are writing computer code you can use the sample computer code tags to present it. You
can also use the sample computer code tag to bring extra emphasis to some special text.

To begin sample computer code formatting, use the following tags:

      <samp></samp>

Here is how the sample computer code tags look:

This is sample computer code.



                                               33
Variable Text
Variable text is used to indicate a variable or parameter that would be used in a computer
program.

To begin variable text formatting, use the following tags:

      <var></var>

Here is how variable text format looks:

The variable to enter is 500.



Preformatted Text
The preformatted text tag is used to display text exactly as you typed it. All spaces and returns
are presented exactly as you typed them. The preformatted text tag does not make the browser
ignore HTML tags that are typed inside the preformatted text tags. So you can still use bold,
italic and any other HTML tags you wish and they will be processed correctly.

To begin preformatted text formatting, use the following tags:

      <pre></pre>

Here is how preformatted text format looks:




                                                34
and here is how the above text looks in HTML code:
      <pre>
      Guests                 Cost per person
      1                        $10
      2                        $9
      3                        $8
      4+                       $7
      </pre>




                                            35
                             Chapter 6 - Creating Lists
There are many tags which are used to create lists in HTML. The first thing we need to
understand is the three different types of lists that can be created in HTML. They are
unordered, ordered and definition. Here are the differences between each type:

Unordered - Creates a list with bullet points.

Ordered - Creates a list that is numbered or alphabetical.

Definition - A list for terms and their definitions.



Unordered lists
There are two tags used to created unordered lists: <ul> and <li>. The UL tag is used to define
the beginning and end of a list and the li tag is used to create each bulleted item in the list.
Here is an example of a basic unordered list.
       <ul>
       <li>Unordered list</li>
       <li>Ordered list</li>
       <li>Definition list</li>
       </ul>

and how it is displayed:

•Unordered list
•Ordered list
•Definition list


Ordered Lists
Ordered lists are used to create lists that are numbered or alphabetical. Just like unordered
lists you also use the <li> tag for each line item in the list.

Here is an example of an ordered list:
       <ol>
       <li>unordered list</li>
       <li>ordered list</li>
       <li>definitions list</li>
       </ol>

                                                   36
and how it shows up:

1.unordered list
2.ordered list
3.definitions list


Definitions List
The definitions list tag is used to define terms and their definition. The <dl> tag is used to begin
and end the definitions list. <dt> is used for the definition term and <dd> is used for the
definition description. Here is an example of a definitions list:


       <dl>
       <dt>HTML</dt>
       <dd>Hypertext Markup Language</dd>
       <dt>CSS</dt>
       <dd>Cascading Style Sheets</dd>
       </dl>

and here is how it shows up:

HTML
       Hypertext Markup Language
CSS
       Cascading Style Sheets




                                                 37
                               Chapter 7 - Hyperlinks
Before we begin discussing hyperlinks you must first understand what a Universal Resource
Locator (URL) is. A URL is basically the way the internet figures out where to access data on
the internet. For example how would you get to the Google search engine by using a web
browser? To accomplish this task you would use Google's URL which
is: http://www.google.com. Each website has a unique URL. Information after the .com is used
to go to a specific section of the website. For example if you type http://www.google.com/help it
will take you to google's customer support page. A URL may also be called a Universal
Resource Indicator (URI).



Anchor Tag
The anchor tag is used to link to other pages or to create a shortcut to a specific point in the
document. Most browsers have default display options for anchor tags. Unvisited links are
underlined and blue. Visited links are underlined and purple. Active links are underlined and
red. The basic anchor tags is the following:

       <a></a>

The most basic anchor tag usage is to create a hyperlink to another page. To do this you use
the href attribute to define the URL and you also place some text after the beginning tag to
define the text which will be shown to the user. Like this:

       <a href="http://www.tabletuniversity.com">Tablet University</a>

Here is how it will show up: Tablet University

You can also use the anchor tag to create a link inside the web page. An example of this would
a table of contents with links that direct you to a specific point in the document. To use an
anchor you must first create it using the name attribute. Such as the following:

       <a name="bottom"></a>

First, you have to create the anchor and place it in the location of the web page where you
want the user to be directed. To call an anchor you use the href tag, such as the following:

       <a href="#bottom">Click here to go to the bottom of the page.</a>




                                                 38
Likewise, you can link to a specific anchor even from a hyperlink located on a different page by
including the anchor behind the URL. For example:
http://www.tabletuniversity.com/content.html#bottom.

There are some additional attributes which can be defined for the anchor tag. Lets cover them
briefly:

Type - Specifies the MIME media type for the link target.

Hreflang - This attribute is used to define the language of the linked document.

Rel - This attribute is used to define the relationship between the current document and the
document you are linking to. Most browsers do not use this attribute, however, google does
have a special use for this. If you use rel="nofollow" then this tells the google search engine to
not follow the link. What this means is the link will not provide any benefit to the page you are
linking to. It was designed to discourage people from placing unwanted links on your website.

Target - Defines how the link will be opened. There are five possible options listed below for
this attribute:

      1._blank: Opens the document in a new window.
      2._self: Opens the link in the same windows at the current page (default value).
      3._parent: Opens the document in the parent frame.
      4._top: Opens the in the body of the window.
      5.framename: Opens the document in a specific frame by name.




                                                39
                                    Chapter 8 - Tables

Table Element
The table element is used for creating tables. Before I can explain all the specific attributes for
the table element, we must first learn how to create a basic table with some information in it.
These tags are used to create a basic table:

<tr> - Creates a row in the table

<th> - Creates a header

<td> - Creates a cell for data

Here is an example of a basic table:
       <table>
       <tr>
       <th>Age</th>
       </tr>
       <tr>
       <td>18</td>
       </tr>
       <tr>
       <td>19</td>
       </tr>
       </table>

Example of basic table:

Age
18
19


<th> Attributes
The <th> element is used to create header cells. There are a few attributes which can be used
with the <th> element:

Colspan: Indicates how many columns the header extends over. Can only be non negative
integers from 0 to 1000.


                                                 40
Rowspan: Indicates how many rows the header extends over. Can only be non negative
integers from 0 to 65534.

Headers: Indicates the ID attribute of the <td> elements which correspond to this element.

Scope: This attribute defines the cells that the header defined in this <th> element relates to. It
has the following values:

      1.row - The header relates to all cells in the row that this element belongs to;
      2.col - The header relates to all cells in the column that this element belongs to;
      3.rowgroup - The header relates to all remaining cells in the row that this element
      belongs to. The remaining cells are either those to the right of this element, or to his left
      depending of the value of dir attribute defined on the <table> element;
      4.colgroup - The header relates to all remaining cells in the column that this element
      belongs to;
      5.auto


<td> Attributes
The <td> element is used to create table data.

Colspan: Indicates how many columns the header extends over. Can only be non negative
integers from 0 to 1000.

Rowspan: Indicates how many rows the header extends over. Can only be non negative
integers from 0 to 65534.


<caption> element

This element allows you to specify the title for the table. This element must be specifically
placed after the table beginning tag. Only one caption per table is allowed.
      <table>
      <caption>Age of Guests</caption>
      <tr>
      <th>Age</th>
      </tr>
      <tr>
      <td>18</td>
      </tr>
      <tr>
      <td>19</td>
      </tr>
      </table>

                                                 41
how the table shows up:

Age of Guests

Age
18
19


<thead>, <tbody>, and <tfoot> elements
These three elements are used for grouping content together in your table.

<thead> - Used for grouping header content.

<tbody> - Used for grouping body content.

<tfoot> - Used for grouping footer content.

When using these elements, ordering is important. You have to set thead first then tfoot and
finally tbody. This is to allow your table to be displayed properly.
      <table border="1">
      <thead>
      <tr>
      <th>Age</th>
      </tr>
      </thead>
      <tfoot>
      <tr>
      <td>source:....</td>
      </tr>
      </tfoot>
      <tbody>
      <tr>
      <td>18</td>
      </tr>
      <tr>
      <td>19</td>
      </tr>
      </tbody>
      </table>

Here is how it is displayed:



                                              42
     Age
18
19
source:....


<col /> Element
The col tag is used for setting attributes for an entire column in the table. Normally you would
have to set the attributes for each cell of the table but with the col tag you can set the
attributes for the entire column. There are several attributes that can be defined using the col
tag, which are:

Span - Sets the number of columns the column should span.
         <table border="1">
         <col span="1" />
         <tr>
         <th>Age</th>
         </tr>
         <tr>
         <td>18.........</td>
         </tr>
         <tr>
         <td>19.........</td>
         </tr>
         </table>

and how it is displayed:

     Age
 18...........
19.............


<colgroup> Element
The colgroup element is used to format groups of columns all at once. This tag can be replaced
by using CSS to style instead. Here are the possible attributes for colgroup element.

Span - Sets how many columns the colgroup element will span.
         <table border="1">
         <colgroup span="3"></colgroup>


                                                43
       <colgroup span="2"></colgroup>
       <tr>
       <th>Courses</th>
       <th>Cost</th>
       <th>Time</th>
       </tr>
       <tr>
       <td>HTML</td>
       <td>$10</td>
       <td>10:00</td>
       </tr>
       <tr>
       <td>CSS</td>
       <td>$10</td>
       <td>11:00</td>
       </tr>
       </table>

and how it is displayed:

Courses                        Cost        Time
HTML                           $10         10:00
CSS                            $10         11:00




                                      44
                             Chapter 9 - Page Layout

<Style> Element
The style element is used for establishing how HTML elements will be displayed. For example,
you may want all your H3 tags to be size 32 and blue. Instead of applying the formatting to
each H3 tag, you can use styles to apply it quickly. The style element must always be placed in
the head section of the HTML document. You can also use Cascading Style Sheets (CSS) to
make a separate file which apply the styling uniformly across every HTML page where the CSS
file is included in the header. CSS is covered in a separate course.
       <html>
       <head>
       <style type="text/css">
       h3 {color:blue size:32;}
       b {color:red size:12;}
       </style>
       </head>
       </html>

Take note of the type attribute. This attribute must always be defined as, "text/css". There is
also an optional attribute of media. The media attribute allows you to set a specific style for
specific tasks. There are 9 possible settings:

Screen - Computer screens (default)

Tty - Teletype screens.

Tv - Television screens.

Projection - Projectors.

Handheld - Mobile phones, tablet computers etc.

Print - Printed pages.

Braille - Braille devices.

Aural - Speech synthesis.

All - All devices

                                                45
The <style> tag also has three additional attributes:

Scoped: If this attribute is present then the stylesheet only applies to the parent element. If it is
absent then it applies to the entire document.

Title: Specifies alternate stylesheets.

Disabled: Disables the stylesheet from applying to the document.

As stated before you can use CSS to quickly add styling to a page. To do this you must use the
link attribute as follows (placed in head section of document):

       <link rel="stylesheet" type="text/css" href="/html/style.css" />



<div> Element
The div tag is an important element to understand because it allows you to group together
sections of the document. For example, using the div element you can create a menu and use
css to style the menu. You can also use JavaScript to interact with specific div elements which
allows you to create very dynamic and user friendly websites. These concepts will be explained
in the respective course. At this time its important to understand that the div element is used to
group together sections of the document. Here is an example of the div element being used.
       <html>
       <head>
       </head>
       <body>
       <div id="headline">
       <h1>Page title</h1>
       </div>
       </body>
       </html>

Note: The above div tag has the standard attribute of ID being defined. This is used by CSS
and JavaScript to identify which div tag is being called. You may have multiple div tags in a
page so its important to identity each div tag with a unique ID.



<span> Element
The span element is similar to the div element in the sense that both are used to group
sections of the document in order to be modified by CSS or JavaScript. Span is used for


                                                 46
grouping together inline content. For example, you may only want to modify a specific piece of
text in the document. You use the span element to accomplish this task. There are no attributes
for the span element other than the standard attributes. Just like the div element you must
identify each span tag with a unique ID.
      <body>
      <h1>Page title</h1>
      <span id="inline">This is some text that I want to modify using
      javascript or CSS.</span>
      </body>




                                              47
                             Chapter 10 - Multimedia

Img tag
The image tag is used to display images. In HTML 4.01 the img tag does not need to be
closed. However in XHTML the image does needs to be closed with a /> ending tag. The image
tag works by fetching the appropriate image from the source location when the page loads. The
source image should not be moved once it is used in an img tag. Never link to an image that is
not hosted on your server. If a 3rd party finds out then they could potentially change the image
to whatever they like. There are two required attributes for the image tag, which are:

Alt - Sets alternate text for the image if the image does not load or if images are disabled in the
browser.

Src - Sets the URL where the image is located.

Width: Width of the image in pixels or percentage.

Height: Height of the image in pixels or percentage.

      <img src="http://tabletuniversity.com/images/logo.png" alt="logo"
      />

Here is how it shows up:




As a best practice it is recommended that images only be saved in commonly accepted
formations. The three most popular online image formats are: PNG, GIF and JPEG.



Map Tag
The map tag is used to map out exact locations of an image that are clickable. For example
you may have a map of the world and you want to make each country clickable so it can direct
the user to the appropriate information about the country. Before we can begin to use the map


                                                48
tag we first have to set the usemap attribute for the img tag. Setting this attribute will connect
the image to the image map. Here is how that is done:

       <img src="http://tabletuniversity.com/images/logo.png" alt="logo"
       usemap="#imgmap1" />

In this case we have set the image to use the image map called, "imgmap1." Next we have to
create the actual image map, as follows:
       <map name="imgmap1">
       </map>

The next step is to identify the specific areas that are clickable in the image and where to send
the user if that area is clicked. To do this we use the <area /> tag. There are 6 attributes that
can be defined for the area tag. They are the following:

Alt - Sets an alternate text for the area if the image does not load.

Coords - Sets the coordinates for the area that is to be clickable.

Href - Sets the destination URL if the area is clicked.

Nohred - Sets the area to no destination URL.

Shape - Sets the shape for the area. Possible options of default, rect, circle, and poly.

Target - Sets how to open the link designated in the href attribute. Possible options are _blank
(opens in new window), _self (opens in the same window), _parent (open in parent frameset),
_top (open in full body of window), or the name of a frame which will open in that specific
frame.

From this point on it gets a little more complicated. What we need to do is define the coords,
href, shape and target. For starters, the href attribute defines where the user will be sent if they
select the designed area, in this case we will use www.tabletuniversity.com. Then we will define
the target as _blank to allow the user to open the URL in a new window. Finally we have to
define the shape and coords of the area. These two attributes are directly linked and the way
you set the coords attribute depends on the shape you use. Here is how it works:

The top-left of the image is set to (0,0).

Circle - Coords is defined as (x,y, radius). The x,y is the center of the circle. Example: (25,25,3)



                                                 49
Rect - Coords is defined as (x1,y1, x2,y2). x1, y1 is the top left corner and x2,y2 is the bottom
right corner. Example: (50,50,60,60)

Poly - Coords is defined as (x1,y2,x2,y2,x3,y3 etc.) where x1,y1 is the first point then x2,y2 is the
second point so on so forth.

Default - The entire region of the image is selected.

Here is an example of a complete image map:
       <map name="imgmap1">
       <area shape="circle" coords="25,25,3" href="/html" alt="HTML" />
       <area shape="rect" coords="50,50,40,40" href="/css" alt="CSS" />
       <area shape="poly" coords="25,25,50,50,75,75" href="/xml"
       alt="XML" />
       </map>




                                                 50
                             Chapter 11 - Input Forms
Input forms can be very useful for extending the functionality of your website. They can be used
for many things, such as: collecting user information (e-mail address, website preferences
etc.), site feedback and anything else you can think of. There are many different types of input
forms which can be used for a variety of tasks. Lets get started.


Form Tags

Before we begin covering the specific input forms we need to explain some basics of how to
use input forms. All HTML forms must be placed in the body section of the document (between
the <body> and </body> tags). If you place the form anywhere else it will not show up and
provide no use.

The starting point for input forms is the use of the form tags. The basic form tags are used to
define the beginning and end of a form.

To declare your form, use the following tags:
       <form>
       </form>

The form element has many attributes, such as the following:

Accept-Charset: A list of character encodings that are accepted. If this attribute is not defined
the default value is, "unknown" and uses the character encoding of the parent
element/document. Common character encodings are: UTF-8 (unicode) and ISO-8859-1 (latin
alphabet).

Action: The URL of the script that processes the form's inputted data.

Method: The HTTP method that is used to send the data. There are two possible options:
HTTP Post and HTTP Get. The post method adds the form data to the end of the URL of the
action attribute. The question mark character (?) is used as a separator. This method should
only be used for sending ASCII data such as numbers and letters. The post method is used to
send more complex data as the form data is sent via the form's body.

Enctype: This attribute is only required if the method attribute is set to post. The attribute is the
MIME type of the content being sent to the server. There are three different MIME types for this
attribute, as follows:




                                                 51
       1.application/x-www-form-urlencoded: The default value used if the attribute is not
       defined.
       2.multipart/form-data: Use this attribute if the <input> tag has the type attribute of,
       "file."
       3.text/plain: HTML 5
Name: The name of the form, but ID attribute should be used instead.

Target: Where the response should be displayed after submitting the form. You can list the
element ID or you can use four predefined locations:

       1._self: Load the response into the same frame as the form element.
       2._blank: Load the response into a new frame.
       3._parent: Load the response into the existing frame.
       4._top: Load the response into the top level element.
If you were to type the beginning and end form tags into your HTML web page then nothing
would show up because we need to define many more elements for the form such as, what
type of input box, what type of data to accept and where to send the data. At this time you
maybe wondering where the data is saved when a user submits the form? The answer is no
where at the moment. HTML has no functionality to save information to a database (such as
mySQL). This is because HTML is a client-side markup language and not a server-side
programming language. In order to save information to a database, you need to use a server-
side programming language like PHP. At the moment, we are only learning how to build the
basic structure of forms. How to utilize the submitted form data will be discussed in the
Javascript course and PHP course.



Input Tags
The input tags are designed to define form elements that can be placed inside the form tags.
Some input type include: text boxes, buttons, submit buttons and radio buttons.

To declare the beginning of your input element, use the following beginning tag:

       <input />

Note that there is no end tag for an input tag, only the />.



Input Element Type
There are ten types of input element types that can be defined, they are: button, checkbox, file,
hidden, image, password, radio, reset, submit and text.


                                                 52
The button input element type is used to create a clickable button. This is usually used with
JavaScript to activate a section of the script. In this case, we will only learn how to insert a
button into the HTML document that doesn't do anything.

This is how you declare an input button.

       <input type="button" />

It shows up in HTML like this:




The next input element type is the check box. This input type is used to ask the user if a choice
is true or not (ie. Select the box if you agree."). An additional attribute for the check box input
type is the checked attribute. If the checked attribute is set to, "checked" then the check box
will be checked when the page is loaded. You also need to define the value attribute to indicate
what value is given to the checkbox. The attribute indeterminate indicates that the checkbox is
in an indeterminate state. Checkboxes that are in an indeterminate state are indicated by being
crossed out by the browser (functionality, varies by browser).

This is how you declare an input check box.

       <input type="checkbox" checked="checked" value="yes" />

It shows up in HTML like this:



The file input type can be used to ask the user to upload a file from their computer. Once
clicked a file browser window pops up to allow the user to select a file. You can also specify
which file types to accept by using the accept attribute. You have to use IANA media types for
the accept values. Examples include: JPEG,PNG, MP3, DOC so on so forth. Use the media
category (image, audio, video etc.) followed by a backslash and the media type (ie.
image/PNG). Its important to note that browsers do not support this feature of HTML so it is
best to have the server validate file types, which will be taught in a server-side programming
courses (such as PHP).

This is how you declare an input file. Note that this file box will only allow the user to select
PNG images and MP3 audio files. However, the user can select other files as well by changing
the, "files of type" setting. So its no guarantee that only PNG and MP3 files will be submitted.

       <input type="file" accept="image/PNG, audio/MP3" />


                                                53
It shows up in HTML like this:




The hidden input element type is used for creating a hidden field. This input type is not visible
to the user. The value of the hidden field is only changed by a JavaScript or contains a default
value. This field can also be sent to the server upon submission of the form.

This is how you declare an hidden input field.

      <input type="hidden" />

The image input element type is used to define an image as a submit button. When you click
the image the data is submitted. When using the image type you must also define the image
source and alt attributes. The image source can be an image hosted on another server (NOT
RECOMMENED) or hosted on your server. Insert the image URL into the src attribute.
The alt attribute stands for alternate text. This text is only shown if the image doesn't load. The
src and alt attributes only need to be defined for image input elements, no other input elements
use those attributes. There are also the optional attributes of height and width which can define
the height and width of the image in pixels (ie. height="10px").

This is how you declare an image submit button.

      <input type="image"
      src="http://www.tabletuniversity.com/images/smilies/smile.gif"
      alt="Click Here to Submit" />

It shows up in HTML like this:




The password input element type if used for inputting passwords. Characters in this field are
hidden as they are inputted to help protect others from seeing what is being typed into the field.
One additional attribute can be set which is: maxlength attribute. The maxlength attribute
allows you to set the maximum number of characters that can be entered into the box.

This is how you declare an image submit button.

      <input type="password" maxlength="10" />

It shows up in HTML like this:


                                                 54
The radio input element type is used for allowing the user to select a choice or not. Similar to
the check box input element, the radio input element also has the checked attribute. If set to,
"checked" then the radio button will be checked when the page loads. The value attribute must
be defined with the data that will be stored in the radio button. You can create a group of radio
buttons by setting the name attribute the same. When this is done, only one radio button can
be selected in the group.

This is how you declare a radio input button.

       <input type="radio" checked="checked" value="yes" />

It shows up in HTML like this:




The reset input element type is used to reset all input fields to their default values. This input
type only works for the input fields that are included in the <form></form> tags. If you have
multiple forms then it doesn't affect the other forms.

This is how you declare a reset button.

       <input type="reset" />

It shows up in HTML like this:




The submit input element type is used to send input field data to a server which is processed
by a server side script such as PHP, ASP etc. When using a submit button you must also define
the form action attribute and the method attribute. The action attribute is the server side script
which will process the form data and the method attribute is the method used to send the data
(either POST or GET). POST and GET will be explained when learning a server side scripting
language.

This is how you declare a submit button.

       <input type="submit" />


                                                 55
It shows up in HTML like this:




Also here is an example of a complete form element with a text box and a submit button in a
form.
       <form action="scripts/submit.php" method="get">
       Name: <input type="text" /><br />
       <input type="submit" />

Here is how it shows up:




The text input element type is used to display a one line box where text/numbers can be
entered. Similar to the password input element type, the text input element type can also use
the maxlength attribute.

This is how you declare a text box.

       <input type="text" maxlength="15" />

Here is how it shows up:




There are some additional input element type attributes that can be applied to all input element
types.

Disabled attribute - The disabled attribute allows an input element type to be disabled when
the page loads. When an input element is disabled it is unclickable and not useable. Disabled
input elements can still be used but you have to use JavaScript to enable the element. Often
times the disabled element attribute is used to disable an input element until some condition is
met (ie. a check box is check or a file is uploaded).

       <input type="text" disabled="disabled"/>

Name attribute - This attribute assigns a name to the input element. All input elements should


                                               56
be assigned a name because the name is used to pass the data on to other scripts (ie.
JavaScript/php etc.) when the form is submitted. It is a good habit to assign all your input
elements a name that correlates to the data it is storing. How to access input data via
JavaScript or php will be covered in those respective courses.

       <input type="text" name="age"/>

Size attribute - This attribute sets the width of the input field. The value of this attribute is set in
pixels. For the input element types of passwords and text the size attribute sets how many
characters are visible.

       <input type="text" size="30"/>

Read only attribute - Makes the element so the value cannot be modified by the user.

Size attribute - The size of the input element in pixels. For the text or password this attribute is
defined in a number of characters.

Value attribute - The value attribute defines what value the input field holds. This attribute is
specific to each input field type.

    1. Button, reset and submit - The value attribute defines the text of the button.
    2. Text, password and hidden - The value attribute defines the default value of the input
       field.
    3. Check box, radio and image - The value attribute defines the value that is connected
       with the field.
The check box and radio input types require the value attribute to be defined. The file input
type does not use the value attribute. When a form is submitted these values are passed to the
associated script.
       Do you accept the terms and conditions?<br />
       <input type="checkbox" name="agree" value="true"/> Agree <br />
       <input type="checkbox" name="disagree" value="true"/> Disagree
       <br />

Example of the value attributes being used:




                                                  57
TextArea Tag
The textarea tag is used to define a multi-line text input box. Textarea boxes are unique in the
fact that they can hold a virtually unlimited number of characters. There are two required
attributes for the textarea tag - cols and rows. The cols attribute defines the width of the text
area and the rows attribute defines the height of the textarea. The text area can be edited by
the user.
       <textarea rows="5" cols="50">
       Default text goes here, and it can be edited by the user, try it
       out for yourself!
       </textarea>

Example of the code above:




The textarea field also has three optional attributes:
Disabled - Disables the text area using the disabled value.
Name - Specifies the name for the text area.
Readonly - Sets the text area to read only using the readonly value.


Button Tag
The button tag is used to create a simple push button. Unlike a button created with the <input>
tags the button tag allows you to place additional content in the button, such as images or text.
Make sure to always define the button type. The possible attributes for the button tag are the
following:

Disabled - Sets the button to disabled using the disabled value.

Name - Specifies the name of the button

Type - Specifies the type of the button. Three possible values:

    1. Button - A clickable button
    2. Submit - A submit button

                                                58
    3. Reset - Clears form data
Value - The value of the button.

       <button type="reset" name="reset">Reset Button!</button>

Here is how it looks:




Select Tag
The select tag is used to create drop down lists. To define the possible options to select you
must use the options tag with the values defined. When using the options tags each option tag
must have a value assigned to it.

Here is an example of a drop-down select menu:
       <select>
       <option value="cat">Cat</option>
       <option value="dog">Dog</option>
       <option value="fish">Fish</option>
       <option value="bird">Bird</option>
       </select>

How the drop-down select menu looks:




Additional attributes can be defined for the select tag and options tags. For the select tag here
are the additional attributes that can be defined:
Disabled - If set to disabled, the drop down menu is disabled.
Multiple - If set to multiple, then multiple options can be selected.
Name - Sets the name for the drop down menu.
Size - Sets the number of visible options in the drop down menu.


                                                 59
Example of some additional attributes being defined:
       <select multiple="multiple" size="4" name="pets">
       <option value="cat">Cat</option>
       <option value="dog">Dog</option>
       <option value="fish">Fish</option>
       <option value="bird">Bird</option>
       </select>

How it shows up in your browser:




Here are the additional attributes for the options tag:
Disabled - If set to disabled then the option is disabled.
Label - Sets the option to a shorter word if too long.
Selected - If set to selected then the option is selected by default.
Value - Sets the value to be sent when the form is submitted.
Here is a drop down list with some additional attributes defined:
       <select>
       <option value="cat" label="c">Cat</option>
       <option value="dog" selected="selected">Dog</option>
       <option value="fish">Fish</option>
       <option value="bird">Bird</option>
       </select>

and here is how it looks:




                                                 60
Optgroup tag
The optgroup tag is used within the select tag. If you use the optgroup tag it allows for
additional grouping in your drop down lists which makes it easier for the user to read. It is
primarily used for drop down menus with lots of options. The required attribute for the optgroup
tag is the label attribute. It defines the text for the label. An additional attribute that can be
defined is the disabled attribute. If it is set to disabled then the entire group of options in the
group is disabled.
       <select>
       <optgroup label="Cats and Dogs">
       <option value="cat" label="c">Cat</option>
       <option value="dog" selected="selected">Dog</option>
       <optgroup label="Fish and Bird" disabled="disabled">
       <option value="fish">Fish</option>
       <option value="bird">Bird</option>
       </select>

and here is what it looks like:




Label Tag
The Label tag is used to define a label for an input element. The label tag should be the same
as the Id attribute for the element. You use the for attribute to assign the label to the input
element.

Here is an example of the label tag being used:
       <form>
       <label for="cat">Cat</label>
       <input type="checkbox" name="animal" id="cat" /><br />
       <label for="dog">Dog</label>
       <input type="checkbox" name="animal" id="dog" />
       </form>



                                                61
and how it shows up:




Fieldset Tag
The fieldset tag is used to group together elements in a form. It can also be used to draw a
box around form elements. There is also an additional tag that is used within fieldset which is
thelegend tag. The legend tag defines the title for the box.

Here is an example:
      <form>
      <fieldset>
      <legend>Pets:</legend>
      Dog: <input type="checkbox" /><br />
      Cat: <input type="checkbox" /><br />
      </fieldset>
      </form>

and how it shows up:




                                               62
                                Chapter 12 - Frames
Frames allow you to embed additional HTML inside of an HTML document. Each HTML page
acts independently of the other.

Iframe Tag

The iframe tag is used for displaying an inline frame that contains another web page. Some
browsers do not support iframes so it is best practice to include some text telling the user if
their browser does not support iframes. Many additional attributes can be defined for the
iframe. They are as follows:

Height - Sets the height of the frame in pixels (ie. 100px) or percent.

Name - Specifies the name of the iframe.

Src - Specifies the URL of the document to display.

Width - Specifies the width of the iframe in pixels or percent.
      <iframe src="http://www.tabletuniversity.com" width="200px"
      height="200px"><br />
      Sorry! The browser does not support Ifrmes!<br />
      </iframe>




                                                63
                                 Chapter 13: Scripts

Javascript and the Script Tag
JavaScript is a scripting language used to add advanced functionality to a website. It allows the
website to be more interactive and dynamic for the user. JavaScript is a complete scripting
language and requires a lot of training in order to use. If you have JavaScript and wish to utilize
the script then you need to add the JavaScript to the HTML page, as the following example
shows:
      <head>
      <script type="text/javascript">
      Javascript code is placed here
      </script>
      </head>

As you can see, one of the attributes being used is the type attribute which we learned about in
previous chapters. This time the type attribute is being used to declare that the following text is
JavaScript as indicated by, "text/javascript." In the above example the JavaScript code can be
placed directly in between the script tags. If you have an external JavaScript file you can still
use the file but you have to link to it. To accomplish this you need to use the src attribute. The
code below displays how to use the src attribute:
      <head>
      <script src="/javascript/button.js"
      type="text/javascript"></script>
      </head>

Another attribute you can use with the script tag is the defer attribute. The defer attribute is
used to delay the execution of an external JavaScript file until the entire page has loaded. This
is done to make sure the page functions properly. The delay attribute is being shown below:
      <head>
      <script src="/javascript/button.js" delay="delay"
      type="text/javascript"></script>
      </head>


Event Attributes
HTML tags can contain event attributes. Event attributes allow JavaScript code to be executed
when a specific event occurs. For example, this could be a mouse click, when a key is pressed,
or when the page loads so on so forth. Here is a list of event attributes:



                                                64
onblur - When the element loses focus.

onchange - When the value of the element is changed.

onclick - When there is a mouse click on the element.

ondblclick - When there is a double mouse click on the element.

onfocus - When the element comes into focus.

onkeydown - When a key is pressed and held down on the element.

onkeypress - When a key is pressed on the element.

onkeyup - When a key is released on the element.

onload - When the page loads.

onmousedown - When the mouse cursor is over the element and pressed down.

onmousemove - When a mouse cursor moves over the element.

onmouseout - When the mouse cursor leaves the element.

onmouseover - When the mouse cursor is over the element.

onmouseup - When the mouse cursor is released over the element.

onreset - When the form's reset button is pressed.

onselect - When the user selects or highlights text in the element.

onsubmit - When the form's select button is pressed.

onunload - When the page is unloaded.

Here is an example of the onmouseover and onmouseout events. Note: this example contains
JavaScript code that you might not be familiar with. JavaScript and events will be explained in
greater detail in the JavaScript course.


                                               65
       <textarea onmouseover="this.value='The mouse is over the
       textbox.'"
       onmouseout="this.value='The mouse is not over the textbox.'">
       </textarea>


Noscript Tags
On most browsers the user can decide to either enable JavaScript or disable it. This can cause
problems for the user if your website uses a lot of JavaScript. In order to tell the user that your
website requires JavaScript to be enable for certain features you can use the <noscript> tags.
Below is the noscript tag being used.
       <head>
       <script src="/javascript/button.js" delay="delay"
       type="text/javascript"></script>
       <noscript>JavaScript has been disabled for your browser. Please
       enable it in the settings tab and refresh the page.</noscript>
       </head>

The text in between the noscript tags will only be displayed if JavaScript is disabled.



Object Tag
The object tag is used to embed multimedia elements such as video, audio, PDFs, flash, other
websites and many other types of data. There are many optional attributes that can be defined:

Data - The URL of the object to be embedded.

Height - The height of the object in pixels.

Name - Sets the name of the object.

Type - Sets the MIME type of the object.

Usemap - Sets the client side image map to be used for the object.

Width - Sets the width of the object in pixels.
       <object height="800px" width="800px" type="application/x-
       shockwave-flash" data="intro.swf"></object>




                                                  66
Param Tag
The param tag is used to define settings for the object tag. These settings will be sent to the
embedded multimedia. The parameters you will be able to send varies based on the
multimedia type. If the embedded object cannot understand the parameter you pass to it then
that parameter will have no functionality. There are several optional attributes:

Name - This is the name of the parameter.

Value - This is the value of that parameter.
      <object data="/img/button.swf" type="application/x-shockwave-
      flash">
      <param name="quality" value="medium" />
      <param name="loop" value="false" />
      <param name="menu" value="false" />
      </object>




                                               67
                 Chapter 14: Advanced HTML Features

Meta Tags
Meta tags contain meta information. Meta information literally means data about data. In
HTML, meta information is available to search engines through the use of meta tags. Meta
information contains various data which we call metadata. The metadata can contain
information such as: description, keywords, author etc. Since metadata is only available to
search engines it is displayed in the head section of the web page. The meta information is
placed in the head section of the document between the <head> tags.

Here is how to define metadata:
      <head>
      <meta name="description" content="Tablet University - Free Online
      Courses" />
      <meta name="keywords" content="online course, html, javascript,
      free" />
      <meta name="author" content="Tablet University" />
      </head>

Meta tags can also be used for a variety of advanced functionality.

Http-equiv: This attribute is used for altering servers and browser behavior. There are several
possible options:

      1. Default Style: Defines the default stylesheet to use. The content attribute must
      contain the ID of the <like> stylesheet to use. You can also use the ID of a <style> tag.

      2. Refresh: Defines how many seconds before the page is to be reloaded. Define the
      seconds to wait using the content attribute. You can also create a redirect using this
      attribute. The content attribute must be listed in this syntax (example):
      content="5;url=http://www.tabletuniversity.com"

Name: There are several advanced features which can be performed using this attribute, they
as listed as follows:

      1. Application-name: The name of the application running on the page.
      2. Author: The name of the author of the document.
      3. Description: A short and accurate summary of the page contents.
      4. Generator: The name of the software used to generate the page.



                                               68
      5. Keywords: A list of applicable keywords for the page. (Completely useless due to
      abuse)
      6. Robots: Used to tell search engine crawlers how to utilize the page. Possible options
      as follows:
              • Index: Allows to index the page.
              • Noindex: Not allowed to index the page.
              • Follow: Allows the crawler to follow URLs listed on the page.
              • Noodp: Prevents usage of the open directory project description.
              • Noarchive: Search engine cannot archive the page.
              • Nosnippet: No description is to be displayed on the search engine results page.
              • Noimageindex: Prevents the page as showing up as a referral in an indexed
              image.
              • Noydir: Prevents the usage of the Yahoo Directory description in the search
              engine results page.
              • Nocahce: Caching of the page is not allowed.
Content: This attribute gives the value to the http-equiv or name attributes.

Here are some examples of the meta tag being utilized for advanced functionality:
      <head>
      <meta name="robots" content="noindex" />
      </head>

Defining the HTML charset to be used:
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-
      8">
      </head>

Redirect the page after 5 seconds.
      <head>
      <meta http-equiv="refresh"
      content="5;url=http://www.tabletuniversity.com">
      </head>

Refresh the page after 5 seconds.
      <head>
      <meta http-equiv="refresh" content="5">
      </head>

Selecting the default stylesheet:
      <head>


                                               69
       <meta http-equiv="Default-Style" content="Blue Style" />
       <link rel="stylesheet" href="/styles/red.css" type="text/css"
       title="Red Style" />
       <link rel="stylesheet" href="/styles/green.css" type="text/css"
       title="Green Style" />
       <link rel="stylesheet" href="/styles/blue.css" type="text/css"
       title="Blue Style" />
       </head>


 Removing Large Sections of HTML via CDATA Section
 When you are writing HTML you will often find yourself writing code and removing other code.
 Some of the code you will not want to delete. Instead you'll want to archive it for future use or
 just in case. To do this you use a CDATA structure. Here is an example of the CDATA structure
 in use:

       <![CDATA[ html code to be not utilized ]]>

 The good thing about CDATA is that it can be used to remove multiple lines of code very
 quickly and easily.



 Character Encodings
 Character encoding is how character symbols are created in the web browser. Without the
 character encoding you would not be able to see any letters, numbers or symbols. In HTML
 there are two commonly used types of character encodings: ISO-8859 and UTF-8.

 ISO-8859 is separated into 16 different encoding parts. You use the encoding that is specific to
 your language. If you are in a western country then your encoding would be ISO-8859-1. Refer
 to the following chart to select the proper encoding. If you do not select the proper ISO-8859
 encoding then certain characters may not be visible to your visitors.

ISO- Latin-1        Perhaps the most widely used part of ISO-8859, covering most Western European
8859- Western       languages: Danish (partial), Dutch (partial), English,Faeroese, Finnish
1     European      (partial), French
                    (partial), German, Icelandic, Irish, Italian, Norwegian, Portuguese, Rhaeto-Romanic,
                    Scottish Gaelic, Spanish,Catalan, and Swedish. Languages from other parts of the
                    world are also covered, including: Eastern European Albanian, Southeast
                    Asian Indonesian, as well as the African languages Afrikaans and Swahili. The
                    missing euro sign and capital Ÿ are in the revised version ISO-8859-15 (see
                    below). The corresponding character set ISO-8859-1 is the default encoding for
                    documents received via HTTP when the document's media type is "text" (as in


                                                  70
                     "text/html").

ISO- Latin-2         Supports those Central and Eastern European languages that use the Latin alphabet,
8859- Central        including Bosnian, Polish, Croatian, Czech, Slovak, Slovene,Serbian, and Hungarian.
  2 European         The missing euro sign can be found in version ISO-8859-16.

ISO- Latin-3
                      Turkish, Maltese, and Esperanto. Largely superseded by ISO-8859-9 for Turkish
8859- South
                      and Unicode for Esperanto.
  3 European
ISO- Latin-4
8859- North           Estonian, Latvian, Lithuanian, Greenlandic, and Sami.
  4 European
ISO-                 Covers mostly Slavic languages that use a Cyrillic alphabet,
8859- Latin/Cyrillic including Belarusian, Bulgarian, Macedonian, Russian, Serbian, and Ukrainian
  5                  (partial).
ISO-                  Covers the most common Arabic language characters. Doesn't support other
8859- Latin/Arabic    languages using the Arabic script. Needs to be BiDi and cursive joining processed
  6                   for display.
ISO-                  Covers the modern Greek language (monotonic orthography). Can also be used for
8859- Latin/Greek     Ancient Greek written without accents or in monotonic orthography, but lacks the
  7                   diacritics for polytonic orthography. These were introduced with Unicode.
ISO-               Covers the modern Hebrew alphabet as used in Israel. In practice two different
8859- Latin/Hebrew encodings exist, logical order (needs to be BiDi processed for display) and visual
  8                (left-to-right) order (in effect, after bidi processing and line breaking).
ISO-
      Latin-5         Largely the same as ISO-8859-1, replacing the rarely used Icelandic letters
8859-
      Turkish         with Turkish ones.
  9
ISO-
      Latin-6         a rearrangement of Latin-4. Considered more useful for Nordic languages. Baltic
8859-
      Nordic          languages use Latin-4 more.
 10
ISO-
8859- Latin/Thai      Contains characters needed for the Thai language.
 11
ISO-
8859- Obsolete        Obsolete
 12
ISO-
      Latin-7         Added some characters for Baltic languages which were missing from Latin-4 and
8859-
      Baltic Rim      Latin-6.
 13
ISO- Latin-8          Covers Celtic languages such as Gaelic and the Breton language.
8859- Celtic


                                                    71
 14
ISO-                 A revision of 8859-1 that removes some little-used symbols, replacing them with
8859- Latin-9        the euro sign € and the letters Š, š, Ž, ž, Œ, œ, and Ÿ, which completes the coverage
 15                  of French, Finnish and Estonian.
      Latin-10
ISO-                 Intended for Albanian, Croatian, Hungarian, Italian, Polish, Romanian and Slovene,
      South-
8859-                but also Finnish, French, German and Irish Gaelic (new orthography). The focus lies
      Eastern
 16                  more on letters than symbols. The currency sign is replaced with the euro sign.
      European

 Remembering the above chart may be complex. To make things easier, the unicode encoding
 system was created. The most commonly used format is the UTF-8 character encoding.

 UTF-8 contains virtually all symbols in the world's written languages. That's a repertoire of
 more than 110,000 symbols! Virtually all web browsers and operating systems support this
 standard.



 HTML Validation
 Now that we have learned all the HTML 4.01 and XHTML 1.1 elements. We can now move on
 to error checking and making sure your code is compliant with w3c specifications. It is a good
 habit to always make sure to validate your code using the official W3C HTML validator.

 This tool will check your code and provide you with possible suggestions to correct your code.




                                                   72
                     Chapter 15: Writing Secure HTML
When writing your HTML it is very important to make sure you follow specific guidelines for the
security of your web pages. The following chapter explains all the potential security hazards
you might face when writing your HTML. Be sure to study and follow this chapter very closely!!

Always Host Scripts or Images on Your Server

When using the img tag, including CSS stylesheets, JavaScript or other eternal files make sure
it's hosted on your own server or a very trusted source. The reason behind this is you want to
make sure no one changes the script or image. If you are linking to an image or file that is not
hosted on your server then the file you are linking to could be modified and cause security
issues for the people visiting your web site.

To make it simple: Don't load resources from untrusted sources.

Only Use Trusted Pages When using an Iframe

If you are displaying a web site from an external source make sure it is only from a trusted
source. The owner of the web site you are linking to could always change the page or modify it.
This could cause issues for your users and put them at risk.

Make Sure to Check your Web Site Often

When you are a web developer its important to check the status of your web site to make sure
nothing inappropriate is going on. Be sure to run virus scans on your web hosting account
periodically and make sure to always backup your website. Every now and then you may have
a technical issue and its good to have the backup just in case.

In terms of security for HTML, there is very little to cover other than the above. Most of the
security vulnerabilities are related to user submitted content. This issue has more to do with
other programming languages that are responsible for processing user submitted data. When
you first started this course you learned that HTML was for structure. With that being said, the
HTML pages you write are not processed by your web server, rather they are sent directly to
the user's web browser which translates those HTML tags into a visible page. This is why
HTML is a very secure markup language.

As a web developer its very important to always be assessing the security vulnerabilities of
your web site.




                                               73
At this time I would like to congratulate you for finishing the reading section of this course. The
next step is to pass the final examination with a score of 90% or better. You may need to review
before taking the exam. I wish you the best of luck!




                                                74
                                      Reference
HTML Elements
                                      HTML SYNTAX

 Basic
 HTML: <tag></tagclose> or <tag>
 XHTML: <tag></tagclose> or <tag />
 With an Attribute
 HTML: <tag attribute="?">
 XHTML: <tag attribute="?" / >

                                 BASIC PAGE STRUCTURE

 <body>                           Page containing visible html code
 <head>                           Page header information
 <html>                           Starts beginning and end of HTML page
 <title>                          Sets page name in the title bar
 <!--     -->                     Declares a comment
 <div>                            Creates sections in the page
 <span>                           Creates a section in the page

                                          HYPERLINKS

 <a href="/html/#?">                 link to anchor in current document
 <a href="/html/URL">                link to another document
 <a href="/html/URL#?">              link to anchor in another document
 <a href="mailto:EMAIL">             email link
 <base>                              Sets the base url for all relative URLs on the page

                           TEXT FORMATTING AND STRUCTURE

  <br>                      line break
  <code>                    source code listing
  <div>                     Formats structure or block of text
  <em> or <i>               italic text
  <h1>...<h6>               page headings from largest to smallest
  <hr>                      Horizontal line



                                              75
<p>                paragraph
<pre>              preformatted text
<strong> or <b>    bold text
<sub>              subscript text
<sup>              superscript text
<span>             Inline formatting
<abbr>             Defines an abbreviation formatting
<acronym>          Defines an acronym formatting
<address>          Defines an address formatting
<xmp>              Defines preformatted text (disables HTML tags)
<center>           Centers text
                   Defines the base font, color, or size for all font in the
<basefont>
                   document
<bdo>              Defines the direction of the text
<big>              Defines big text formatting
<blockquote>       Defines block quote formatting
<del>              Defines deleted text formatting
<font>             Defines font text formatting
<ins>              Defines inserted text formatting
<kbd>              Defines keyboard text formatting
<u>                Defines underlined text formatting
<tt>               Defines teletype text formatting
<strike> or <s>    Defines strikethrough text formatting
<pre>              Defines preformatted text formatting
<q>                Defines a single line quote
<pre>              Defines preformatted text formatting
<small>            Defines small text formatting
<samp>             Defines sample computer text formatting

                                 FRAMES

<frame>           defines a single frame
<frameset>        frame document
<iframe>          inline frame
<noframe>         defines alternate content for browsers that don't support


                                      76
                          frames

                                   HEADER AND SCRIPTS

<link rel="stylesheet" href="/html/?"
                                              external CSS link
type="text/css">
<script language="Javascript"
                                              embedded javascript
type="text/javascript">
<meta http-equiv="content-type"
                                              meta information
content="?"; charset="?">
                                              defines alternate content for browser that
<noscript>
                                              don't support scripts

                                         TABLES

<caption>                       table caption
<table>                         defines a table
<tbody>                         body section of the table
<td>                            table cell
<td colspan="?">                number of columns cell spans
<td rowspan="?">                number of rows cell should spans
<tfoot>                         footer section of the table
<th>                            table header cells
<th colspan="?">                number of columns table header cell spans
<thead>                         the header section of the table
<tr>                            table row
<cite>                          creates a citation
<col>                           defines attributes for one of more columns in a table
<colgroup>                      defines attributes for one or more columns in a group

                                             LISTS

<dd>                                         definition
<dl>                                         definition list
<dt>                                         definition term
<li>                                         item in a list
<ol>                                         ordered list
<ul>                                         unordered list
<dfn>                                        definition term


                                              77
<dir>                        directory list
<menu>                       menu list

                           FORMS

<form>             defines a form
<fieldset>         group of related form items
<legend>           Creates a caption for the fieldset element
<input type="?">   form element input control
<option>           menu item in a select box
<select>           drop-down list
<textarea>         multi-row text area
<button>           clickable button
<label>            creates a label for an input element
<object>           creates an embeddable object
<optgroup>         creates a group of related options in a drop-down list




                              78
HTML Language Codes

These are the ISO 639-1 language codes. They are two letter codes used to represent a
language. These codes are used for the tag to define what language the document is in using
the lang attribute. See Chapter 3 of the textbook for more information on how to use these
codes.

               Language                ISO                    Language              ISO
(Afan) Oromo                           om    Samoan                                sm
Abkhazian                              ab    Sangro                                sg
Afar                                   aa    Sanskrit                              sa
Afrikaans                              af    Scots Gaelic                          gd
Albanian                               sq    Serbian                               sr
Amharic                                am    Serbo-Croatian                        sh
Arabic                                 ar    Sesotho                               st
Armenian                               hy    Setswana                              tn
Assamese                               as    Shona                                 sn
Aymara                                 ay    Sindhi                                sd
Azerbaijani                            az    Singhalese                            si
Bashkir                                ba    Siswati                               ss
Basque                                 eu    Slovak                                sk
Bengali                                bn    Slovenian                             sl
Bhutani                                dz    Somali                                so
Bihari                                 bh    Spanish                               es
Bislama                                bi    Sudanese                              su
Breton                                 br    Swahili                               sw
Bulgarian                              bg    Swedish                               sv
Burmese                                my    Tagalog                               tl
Byelorussian                           be    Tajik                                 tg
Cambodian                              km    Tamil                                 ta
Catalan                                ca    Tatar                                 tt
Chinese                                zh    Tegulu                                te
Corsican                               co    Thai                                  th
Croatian                               hr    Tibetan                               bo
Czech                                  cs    Tigrinya                              ti
Danish                                 da    Tonga                                 to
Dutch                                  nl    Tsonga                                ts


                                             79
English                    en     Turkish               tr
Esperanto                  eo     Turkmen               tk
Estonian                   et     Twi                   tw
Faeroese                   fo     Uigur                 ug
Fiji                       fj     Ukrainian             uk
Finnish                    fi     Urdu                  ur
French                     fr     Uzbek                 uz
Frisian                    fy     Vietnamese            vi
Galician                   gl     Volapuk               vo
Georgian                   ka     Welch                 cy
German                     de     Wolof                 wo
Greek                      el     Xhosa                 xh
Greenlandic                kl     Yiddish (former ji)   yi
Guarani                    gn     Yoruba                yo
Gujarati                   gu     Zhuang                za
Hausa                      ha     Zulu                  zu
Hebrew (former iw)         he
Hindi                      hi
Hungarian                  hu
                Language    ISO
Icelandic                  is
Indonesian (former in)     id
Interlingua                ia
Interlingue                ie
Inupiak                    ik
Inuktitut (Eskimo)         iu
Irish                      ga
Italian                    it
Japanese                   ja
Javanese                   jw
Kannada                    kn
Kashmiri                   ks
Kazakh                     kk
Kinyarwanda                rw
Kirghiz                    ky
Kirundi                    rn
Korean                     ko

                                  80
Kurdish            ku
Laothian           lo
Latin              la
Latvian, Lettish   lv
Lingala            ln
Lithuanian         lt
Macedonian         mk
Malagasy           mg
Malay              ms
Malayalam          ml
Maltese            mt
Maori              mi
Marathi            mr
Moldavian          mo
Mongolian          mn
Nauru              na
Nepali             ne
Norwegian          no
Occitan            oc
Oriya              or
Pashto, Pushto     ps
Persian            fa
Polish             pl
Portuguese         pt
Punjabi            pa
Quechua            qu
Rhaeto-Romance     rm
Romanian           ro
Russian            ru




                        81
MIME Types

MIME stands for Internet Media Type and is used to tell the web browser what type of media is
going to be displayed. This information allows the web browser to display the media correctly. It
is a good rule of thumb to always declare the MIME type if possible.

     file type    MIME type
     ai           application/postscript
     aif          audio/x-aiff
     aifc         audio/x-aiff
     aiff         audio/x-aiff
     asc          text/plain
     atom         application/atom+xml
     au           audio/basic
     avi          video/x-msvideo
     bcpio        application/x-bcpio
     bin          application/octet-stream
     bmp          image/bmp
     cdf          application/x-netcdf
     cgm          image/cgm
     class        application/octet-stream
     cpio         application/x-cpio
     cpt          application/mac-compactpro
     csh          application/x-csh
     css          text/css
     dcr          application/x-director
     dif          video/x-dv
     dir          application/x-director
     djv          image/vnd.djvu
     djvu         image/vnd.djvu
     dll          application/octet-stream
     dmg          application/octet-stream



                                               82
dms     application/octet-stream
doc     application/msword
dtd     application/xml-dtd
dv      video/x-dv
dvi     application/x-dvi
dxr     application/x-director
eps     application/postscript
etx     text/x-setext
exe     application/octet-stream
ez      application/andrew-inset
gif     image/gif
gram    application/srgs
grxml   application/srgs+xml
gtar    application/x-gtar
hdf     application/x-hdf
hqx     application/mac-binhex40
htm     text/html
html    text/html
ice     x-conference/x-cooltalk
ico     image/x-icon
ics     text/calendar
ief     image/ief
ifb     text/calendar
iges    model/iges
igs     model/iges
jnlp    application/x-java-jnlp-file
jp2     image/jp2
jpe     image/jpeg
jpeg    image/jpeg
jpg     image/jpeg
js      application/x-javascript


                                       83
kar      audio/midi
latex    application/x-latex
lha      application/octet-stream
lzh      application/octet-stream
m3u      audio/x-mpegurl
m4a      audio/mp4a-latm
m4b      audio/mp4a-latm
m4p      audio/mp4a-latm
m4u      video/vnd.mpegurl
m4v      video/x-m4v
mac      image/x-macpaint
man      application/x-troff-man
mathml   application/mathml+xml
me       application/x-troff-me
mesh     model/mesh
mid      audio/midi
midi     audio/midi
mif      application/vnd.mif
mov      video/quicktime
movie    video/x-sgi-movie
mp2      audio/mpeg
mp3      audio/mpeg
mp4      video/mp4
mpe      video/mpeg
mpeg     video/mpeg
mpg      video/mpeg
mpga     audio/mpeg
ms       application/x-troff-ms
msh      model/mesh
mxu      video/vnd.mpegurl
nc       application/x-netcdf


                                    84
oda    application/oda
ogg    application/ogg
pbm    image/x-portable-bitmap
pct    image/pict
pdb    chemical/x-pdb
pdf    application/pdf
pgm    image/x-portable-graymap
pgn    application/x-chess-pgn
pic    image/pict
pict   image/pict
png    image/png
pnm    image/x-portable-anymap
pnt    image/x-macpaint
pntg   image/x-macpaint
ppm    image/x-portable-pixmap
ppt    application/vnd.ms-powerpoint
ps     application/postscript
qt     video/quicktime
qti    image/x-quicktime
qtif   image/x-quicktime
ra     audio/x-pn-realaudio
ram    audio/x-pn-realaudio
ras    image/x-cmu-raster
rdf    application/rdf+xml
rgb    image/x-rgb
rm     application/vnd.rn-realmedia
roff   application/x-troff
rtf    text/rtf
rtx    text/richtext
sgm    text/sgml
sgml   text/sgml


                                       85
sh        application/x-sh
shar      application/x-shar
silo      model/mesh
sit       application/x-stuffit
skd       application/x-koan
skm       application/x-koan
skp       application/x-koan
skt       application/x-koan
smi       application/smil
smil      application/smil
snd       audio/basic
so        application/octet-stream
spl       application/x-futuresplash
src       application/x-wais-source
sv4cpio   application/x-sv4cpio
sv4crc    application/x-sv4crc
svg       image/svg+xml
swf       application/x-shockwave-flash
t         application/x-troff
tar       application/x-tar
tcl       application/x-tcl
tex       application/x-tex
texi      application/x-texinfo
texinfo   application/x-texinfo
tif       image/tiff
tiff      image/tiff
tr        application/x-troff
tsv       text/tab-separated-values
txt       text/plain
ustar     application/x-ustar



                                          86
vcd     application/x-cdlink
vrml    model/vrml
vxml    application/voicexml+xml
wav     audio/x-wav
wbmp    image/vnd.wap.wbmp
wbmxl   application/vnd.wap.wbxml
wml     text/vnd.wap.wml
wmlc    application/vnd.wap.wmlc
wmls    text/vnd.wap.wmlscript
wmlsc   application/vnd.wap.wmlscriptc
wrl     model/vrml
xbm     image/x-xbitmap
xht     application/xhtml+xml
xhtml   application/xhtml+xml
xls     application/vnd.ms-excel
xml     application/xml
xpm     image/x-xpixmap
xsl     application/xml
xslt    application/xslt+xml
xul     application/vnd.mozilla.xul+xml
xwd     image/x-xwindowdump
xyz     chemical/x-xyz
zip     application/zip




                                     87
Doctypes
                        HTML 4.01 / XHTML 1.0 DTDs
       HTML Tag                                          XHTML 1.1
                    Transitional     Strict   Frameset
      <a>          Yes           Yes        Yes          Yes
      <abbr>       Yes           Yes        Yes          Yes
      <acronym>    Yes           Yes        Yes          Yes
      <address>    Yes           Yes        Yes          Yes
      <applet>     Yes           No         Yes          No
      <area />     Yes           Yes        Yes          No
      <b>          Yes           Yes        Yes          Yes
      <base />     Yes           Yes        Yes          Yes
      <basefont /> Yes           No         Yes          No
      <bdo>        Yes           Yes        Yes          No
      <big>        Yes           Yes        Yes          Yes
      <blockquote> Yes           Yes        Yes          Yes
      <body>       Yes           Yes        Yes          Yes
      <br />       Yes           Yes        Yes          Yes
      <button>     Yes           Yes        Yes          Yes
      <caption>    Yes           Yes        Yes          Yes
      <center>     Yes           No         Yes          No
      <cite>       Yes           Yes        Yes          Yes
      <code>       Yes           Yes        Yes          Yes
      <col />      Yes           Yes        Yes          No
      <colgroup>   Yes           Yes        Yes          No
      <dd>         Yes           Yes        Yes          Yes
      <del>        Yes           Yes        Yes          No
      <dfn>        Yes           Yes        Yes          Yes
      <dir>        Yes           No         Yes          No
      <div>        Yes           Yes        Yes          Yes
      <dl>         Yes           Yes        Yes          Yes
      <dt>         Yes           Yes        Yes          Yes
      <em>         Yes           Yes        Yes          Yes
      <fieldset>   Yes           Yes        Yes          Yes
      <font>       Yes           No         Yes          No
      <form>       Yes           Yes        Yes          Yes
      <frame />    No            No         Yes          No


                                    88
<frameset>     No    No         Yes   No
<h1> to <h6>   Yes   Yes        Yes   Yes
<head>         Yes   Yes        Yes   Yes
<hr />         Yes   Yes        Yes   Yes
<html>         Yes   Yes        Yes   Yes
<i>            Yes   Yes        Yes   Yes
<iframe>       Yes   No         Yes   No
<img />        Yes   Yes        Yes   Yes
<input />      Yes   Yes        Yes   Yes
<ins>          Yes   Yes        Yes   No
<isindex>      Yes   No         Yes   No
<kbd>          Yes   Yes        Yes   Yes
<label>        Yes   Yes        Yes   Yes
<legend>       Yes   Yes        Yes   Yes
<li>           Yes   Yes        Yes   Yes
<link />       Yes   Yes        Yes   Yes
<map>          Yes   Yes        Yes   No
<menu>         Yes   No         Yes   No
<meta />       Yes   Yes        Yes   Yes
<noframes>     Yes   No         Yes   No
<noscript>     Yes   Yes        Yes   Yes
<object>       Yes   Yes        Yes   Yes
<ol>           Yes   Yes        Yes   Yes
<optgroup>     Yes   Yes        Yes   Yes
<option>       Yes   Yes        Yes   Yes
<p>            Yes   Yes        Yes   Yes
<param />      Yes   Yes        Yes   Yes
<pre>          Yes   Yes        Yes   Yes
<q>            Yes   Yes        Yes   Yes
<s>            Yes   No         Yes   No
<samp>         Yes   Yes        Yes   Yes
<script>       Yes   Yes        Yes   Yes
<select>       Yes   Yes        Yes   Yes
<small>        Yes   Yes        Yes   Yes
<span>         Yes   Yes        Yes   Yes
<strike>       Yes   No         Yes   No
<strong>       Yes   Yes        Yes   Yes

                           89
<style>      Yes   Yes        Yes   Yes
<sub>        Yes   Yes        Yes   Yes
<sup>        Yes   Yes        Yes   Yes
<table>      Yes   Yes        Yes   Yes
<tbody>      Yes   Yes        Yes   No
<td>         Yes   Yes        Yes   Yes
<textarea>   Yes   Yes        Yes   Yes
<tfoot>      Yes   Yes        Yes   No
<th>         Yes   Yes        Yes   Yes
<thead>      Yes   Yes        Yes   No
<title>      Yes   Yes        Yes   Yes
<tr>         Yes   Yes        Yes   Yes
<tt>         Yes   Yes        Yes   Yes
<u>          Yes   No         Yes   No
<ul>         Yes   Yes        Yes   Yes
<var>        Yes   Yes        Yes   Yes




                         90
Character References

              ISO-8859-1 Character Set
     Visual            Reference             Value
                          &#08;              Unused
                          &#10;           Horizontal tab
                          &#10;              Line feed
                       &#11; - &#12;         Unused
                          &#13;          Carriage Return
                       &#14; - &#31;         Unused
                          &#32;               Space
        !                 &#33;          Exclamation mark
        "                 &#34;           Quotation mark
        #                 &#35;            Number sign
        $                 &#36;             Dollar sign
       %                  &#37;            Percent sign
        &                 &#38;            Ampersand
        '                  &#39            Apostrophe
        (                 &#40;          Left parenthesis
        )                 &#41;          Right parenthesis
        *                 &#42;              Asterisk
        +                 &#43;              Plus sign
        ,                 &#44;              Comma
        -                 &#45;              Hyphen
        .                 &#46;          Period (fullstop)
        /                 &#47;           Solidus (slash)
       0-9             &#48; - &#57;        Digits 0-9
        :                 &#58;               Colon
        ;                 &#59;             Semi-colon
        <                 &#60;             Less than
        =                 &#61;            Equals sign
        >                 &#62;            Greater than



                            91
 ?        &#63;                Question mark
@         &#64;                Commercial at
A-Z    &#65; - &#90;             Letters A-Z
 [        &#91;              Left square bracket
 \        &#92;         Reverse solidus (backslash)
 ]        &#93;             Right square bracket
 ^        &#94;                     Caret
 _        &#95;          Horizontal bar (underscore)
 `        &#96;                 Acute accent
a-z   &#97; - &#122;             Letters a-z
 {        &#123;               Left curly brace
 |        &#124;                 Vertical bar
 }        &#125;              Right curly brace
 ~        &#126;                    Tilde
-Ÿ   &#127; - &#159;              Unused
          &#160;            Non-breaking Space
 ¡        &#161;            Inverted exclamation
 ¢        &#162;                  Cent sign
 £        &#163;               Pound sterling
 ¤        &#164;           General currency sign
 ¥        &#165;                   Yen sign
 ¦        &#166;             Broken vertical bar
 §        &#167;                 Section sign
 ¨        &#168;              Umlaut (dieresis)
©         &#169;                  Copyright
 ª        &#170;              Feminine ordinal
 «        &#171;        Left angle quote, guillemotleft
 ¬        &#172;                   Not sign
          &#173;                 Soft hyphen
®         &#174;            Registered trademark
 ¯        &#175;               Macron accent
 °        &#176;                 Degree sign
 ±        &#177;                Plus or minus



            92
²   &#178;          Superscript two
³   &#179;         Superscript three
´   &#180;           Acute accent
µ   &#181;            Micro sign
¶   &#182;          Paragraph sign
·   &#183;            Middle dot
¸   &#184;              Cedilla
¹   &#185;         Superscript one
º   &#186;         Masculine ordinal
»   &#187;        Right angle quote,
                    guillemotright
¼   &#188;        Fraction one-fourth
½   &#189;         Fraction one-half
¾   &#190;      Fraction three-fourths
¿   &#191;      Inverted question mark
À   &#192;      Capital A, grave accent
Á   &#193;      Capital A, acute accent
   &#194;   Capital A, circumflex accent
à  &#195;          Capital A, tilde
Ä   &#196;   Capital A, dieresis or umlaut
                         mark
Å   &#197;          Capital A, ring
Æ   &#198;   Capital AE dipthong (ligature)
Ç   &#199;         Capital C, cedilla
È   &#200;      Capital E, grave accent
É   &#201;      Capital E, acute accent
Ê   &#202;   Capital E, circumflex accent
Ë   &#203;   Capital E, dieresis or umlaut
                         mark
Ì   &#204;      Capital I, grave accent
Í   &#205;      Capital I, acute accent
Î   &#206;    Capital I, circumflex accent
Ï   &#207;    Capital I, dieresis or umlaut
                          mark
Ð   &#208;       Capital Eth, Icelandic

      93
Ñ   &#209;         Capital N, tilde
Ò   &#210;     Capital O, grave accent
Ó   &#211;     Capital O, acute accent
Ô   &#212;   Capital O, circumflex accent
Õ   &#213;         Capital O, tilde
Ö   &#214;   Capital O, dieresis or umlaut
                         mark
×   &#215;          Multiply sign
Ø   &#216;         Capital O, slash
Ù   &#217;     Capital U, grave accent
Ú   &#218;     Capital U, acute accent
Û   &#219;   Capital U, circumflex accent
Ü   &#220;   Capital U, dieresis or umlaut
                         mark
Ý   &#221;     Capital Y, acute accent
Þ   &#222;    Capital THORN, Icelandic
ß   &#223;   Small sharp s, German (sz
                     ligature)
à   &#224;      Small a, grave accent
á   &#225;      Small a, acute accent
â   &#226;   Small a, circumflex accent
ã   &#227;          Small a, tilde
ä   &#228;    Small a, dieresis or umlaut
                         mark
å   &#229;          Small a, ring
æ   &#230;   Small ae dipthong (ligature)
ç   &#231;         Small c, cedilla
è   &#232;      Small e, grave accent
é   &#233;      Small e, acute accent
ê   &#234;   Small e, circumflex accent
ë   &#235;    Small e, dieresis or umlaut
                         mark
ì   &#236;      Small i, grave accent
í   &#237;      Small i, acute accent
î   &#238;    Small i, circumflex accent


      94
ï   &#239;   Small i, dieresis or umlaut
                        mark
ð   &#240;      Small eth, Icelandic
ñ   &#241;         Small n, tilde
ò   &#242;     Small o, grave accent
ó   &#243;   Small o, circumflex accent
ô   &#244;   Small o, circumflex accent
õ   &#245;         Small o, tilde
ö   &#246;   Small o, dieresis or umlaut
                        mark
÷   &#247;          Division sign
ø   &#248;         Small o, slash
ù   &#249;     Small u, grave accent
ù   &#250;     Small u, acute accent
û   &#251;   Small u, circumflex accent
ü   &#252;   Small u, dieresis or umlaut
                        mark
ý   &#253;     Small y, acute accent
þ   &#254;     Small thorn, Icelandic
þ   &#255;   Small y, dieresis or umlaut




      95
                                                         License
                                                 Creative Commons
                          Attribution-Noncommercial-NoDerivs 3.0 Unported


THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC
LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE
LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS
PROHIBITED.
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY
THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY BE CONSIDERED TO BE A CONTRACT,
THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE
OF SUCH TERMS AND CONDITIONS.
1. Definitions
        a."Adaptation" means a work based upon the Work, or upon the Work and other pre-existing works, such as
        a translation, adaptation, derivative work, arrangement of music or other alterations of a literary or artistic
        work, or phonogram or performance and includes cinematographic adaptations or any other form in which
        the Work may be recast, transformed, or adapted including in any form recognizably derived from the
        original, except that a work that constitutes a Collection will not be considered an Adaptation for the purpose
        of this License. For the avoidance of doubt, where the Work is a musical work, performance or phonogram,
        the synchronization of the Work in timed-relation with a moving image ("synching") will be considered an
        Adaptation for the purpose of this License.
        b."Collection" means a collection of literary or artistic works, such as encyclopedias and anthologies, or
        performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section
        1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual
        creations, in which the Work is included in its entirety in unmodified form along with one or more other
        contributions, each constituting separate and independent works in themselves, which together are
        assembled into a collective whole. A work that constitutes a Collection will not be considered an Adaptation
        (as defined above) for the purposes of this License.
        c."Distribute" means to make available to the public the original and copies of the Work through sale or other
        transfer of ownership.
        d."Licensor" means the individual, individuals, entity or entities that offer(s) the Work under the terms of this
        License.
        e."Original Author" means, in the case of a literary or artistic work, the individual, individuals, entity or entities
        who created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the
        case of a performance the actors, singers, musicians, dancers, and other persons who act, sing, deliver,
        declaim, play in, interpret or otherwise perform literary or artistic works or expressions of folklore; (ii) in the
        case of a phonogram the producer being the person or legal entity who first fixes the sounds of a
        performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits the
        broadcast.
        f."Work" means the literary and/or artistic work offered under the terms of this License including without
        limitation any production in the literary, scientific and artistic domain, whatever may be the mode or form of its
        expression including digital form, such as a book, pamphlet and other writing; a lecture, address, sermon or
        other work of the same nature; a dramatic or dramatico-musical work; a choreographic work or entertainment
        in dumb show; a musical composition with or without words; a cinematographic work to which are assimilated
        works expressed by a process analogous to cinematography; a work of drawing, painting, architecture,
        sculpture, engraving or lithography; a photographic work to which are assimilated works expressed by a


                                                             96
        process analogous to photography; a work of applied art; an illustration, map, plan, sketch or three-
        dimensional work relative to geography, topography, architecture or science; a performance; a broadcast; a
        phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed
        by a variety or circus performer to the extent it is not otherwise considered a literary or artistic work.
        g."You" means an individual or entity exercising rights under this License who has not previously violated the
        terms of this License with respect to the Work, or who has received express permission from the Licensor to
        exercise rights under this License despite a previous violation.
        h."Publicly Perform" means to perform public recitations of the Work and to communicate to the public those
        public recitations, by any means or process, including by wire or wireless means or public digital
        performances; to make available to the public Works in such a way that members of the public may access
        these Works from a place and at a place individually chosen by them; to perform the Work to the public by
        any means or process and the communication to the public of the performances of the Work, including by
        public digital performance; to broadcast and rebroadcast the Work by any means including signs, sounds or
        images.
        i."Reproduce" means to make copies of the Work by any means including without limitation by sound or
        visual recordings and the right of fixation and reproducing fixations of the Work, including storage of a
        protected performance or phonogram in digital form or other electronic medium.
2. Fair Dealing Rights. Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or
rights arising from limitations or exceptions that are provided for in connection with the copyright protection under
copyright law or other applicable laws.
3. License Grant. Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide,
royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the
Work as stated below:
        a.to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce the Work
        as incorporated in the Collections; and,
        b.to Distribute and Publicly Perform the Work including as incorporated in Collections.
The above rights may be exercised in all media and formats whether now known or hereafter devised. The above
rights include the right to make such modifications as are technically necessary to exercise the rights in other media
and formats, but otherwise you have no rights to make Adaptations. Subject to 8(f), all rights not expressly granted by
Licensor are hereby reserved, including but not limited to the rights set forth in Section 4(d).
4. Restrictions. The license granted in Section 3 above is expressly made subject to and limited by the following
restrictions:
        a.You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a
        copy of, or the Uniform Resource Identifier (URI) for, this License with every copy of the Work You Distribute
        or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of this License
        or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the
        License. You may not sublicense the Work. You must keep intact all notices that refer to this License and to
        the disclaimer of warranties with every copy of the Work You Distribute or Publicly Perform. When You
        Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the
        Work that restrict the ability of a recipient of the Work from You to exercise the rights granted to that recipient
        under the terms of the License. This Section 4(a) applies to the Work as incorporated in a Collection, but this
        does not require the Collection apart from the Work itself to be made subject to the terms of this License. If
        You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the
        Collection any credit as required by Section 4(c), as requested.
        b.You may not exercise any of the rights granted to You in Section 3 above in any manner that is primarily
        intended for or directed toward commercial advantage or private monetary compensation. The exchange of
        the Work for other copyrighted works by means of digital file-sharing or otherwise shall not be considered to



                                                            97
       be intended for or directed toward commercial advantage or private monetary compensation, provided there
       is no payment of any monetary compensation in connection with the exchange of copyrighted works.
       c.If You Distribute, or Publicly Perform the Work or Collections, You must, unless a request has been made
       pursuant to Section 4(a), keep intact all copyright notices for the Work and provide, reasonable to the
       medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if
       supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor
       institute, publishing entity, journal) for attribution ("Attribution Parties") in Licensor's copyright notice, terms of
       service or by other reasonable means, the name of such party or parties; (ii) the title of the Work if supplied;
       (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the
       Work, unless such URI does not refer to the copyright notice or licensing information for the Work. The credit
       required by this Section 4(c) may be implemented in any reasonable manner; provided, however, that in the
       case of a Collection, at a minimum such credit will appear, if a credit for all contributing authors of Collection
       appears, then as part of these credits and in a manner at least as prominent as the credits for the other
       contributing authors. For the avoidance of doubt, You may only use the credit required by this Section for the
       purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may
       not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original
       Author, Licensor and/or Attribution Parties, as appropriate, of You or Your use of the Work, without the
       separate, express prior written permission of the Original Author, Licensor and/or Attribution Parties.
       d.For the avoidance of doubt:
               i.Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect
               royalties through any statutory or compulsory licensing scheme cannot be waived, the Licensor
               reserves the exclusive right to collect such royalties for any exercise by You of the rights granted
               under this License;
               ii.Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties
               through any statutory or compulsory licensing scheme can be waived, the Licensor reserves the
               exclusive right to collect such royalties for any exercise by You of the rights granted under this
               License if Your exercise of such rights is for a purpose or use which is otherwise than noncommercial
               as permitted under Section 4(b) and otherwise waives the right to collect royalties through any
               statutory or compulsory licensing scheme; and,
               iii.Voluntary License Schemes. The Licensor reserves the right to collect royalties, whether
               individually or, in the event that the Licensor is a member of a collecting society that administers
               voluntary licensing schemes, via that society, from any exercise by You of the rights granted under
               this License that is for a purpose or use which is otherwise than noncommercial as permitted under
               Section 4(b).
       e.Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law,
       if You Reproduce, Distribute or Publicly Perform the Work either by itself or as part of any Collections, You
       must not distort, mutilate, modify or take other derogatory action in relation to the Work which would be
       prejudicial to the Original Author's honor or reputation.
5. Representations, Warranties and Disclaimer
UNLESS OTHERWISE MUTUALLY AGREED BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK
AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE WORK,
EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF
TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE
OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER
OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED
WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL
LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL,



                                                            98
PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF
LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
7. Termination
        a.This License and the rights granted hereunder will terminate automatically upon any breach by You of the
        terms of this License. Individuals or entities who have received Collections from You under this License,
        however, will not have their licenses terminated provided such individuals or entities remain in full compliance
        with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License.
        b.Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the
        applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work
        under different license terms or to stop distributing the Work at any time; provided, however that any such
        election will not serve to withdraw this License (or any other license that has been, or is required to be,
        granted under the terms of this License), and this License will continue in full force and effect unless
        terminated as stated above.
8. Miscellaneous
        a.Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a
        license to the Work on the same terms and conditions as the license granted to You under this License.
        b.If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity
        or enforceability of the remainder of the terms of this License, and without further action by the parties to this
        agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid
        and enforceable.
        c.No term or provision of this License shall be deemed waived and no breach consented to unless such
        waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent.
        d.This License constitutes the entire agreement between the parties with respect to the Work licensed here.
        There are no understandings, agreements or representations with respect to the Work not specified here.
        Licensor shall not be bound by any additional provisions that may appear in any communication from You.
        This License may not be modified without the mutual written agreement of the Licensor and You.
        e.The rights granted under, and the subject matter referenced, in this License were drafted utilizing the
        terminology of the Berne Convention for the Protection of Literary and Artistic Works (as amended on
        September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO
        Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July
        24, 1971). These rights and subject matter take effect in the relevant jurisdiction in which the License terms
        are sought to be enforced according to the corresponding provisions of the implementation of those treaty
        provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law
        includes additional rights not granted under this License, such additional rights are deemed to be included in
        the License; this License is not intended to restrict the license of any rights under applicable law.




                                                            99

								
To top