What is HTML?

HyperText Markup Language (HTML) is a markup language[1] for creating a webpage. Webpages are

usually viewed in a web browser. They can include writing, links, pictures, and even sound and video.
HTML is used to mark and describe each of these kinds of content so the web browser can display them
correctly. HTML can also be used to add meta information to a webpage. Meta information is usually not
shown by web browsers and is data about the web page, e.g., the name of the person who created the
page.

Site Evaluation
This unit will give you a basic understanding of the core design principles that apply to web
design and development. The purpose of this lesson is to begin considering what makes a high-quality
website.
To begin, it is important for us to understand that there are millions of websites in the web. Aside
from determining what good design is, it is important that users know how to distinguish websites that
present accurate and factual data over those that do not. This inspired many institutions to create their
own web evaluation criteria.
In this unit, we will be using framework for evaluating a Quality Website created by Hasan and
Abuelrub (2011) in their article, assessing a Quality Website published in ScienceDirect in order to
evaluate websites. This framework is the end result of their assessment of the different web evaluation
tools used to evaluate website and e-business sites.

The Framework for Evaluating a Quality Website categorized the different criteria into four
which is composed of the following: Content, Design, Organization and User-Friendliness as shown in
Figure 1.1 Hierarchy of Criteria for Website Evaluation
Website Quality

Content Design Organization User-Friendliness

-Timely -Attractive -Index -Usability
-Relevant -Appropriateness -Mapping -Reliability
-Variety of Pres. -Color -Consistency -Consistency
-Accuracy -Image / Sound / Video -Link -Interactive
-Objective -Text -Logo Features
-Authority -Domain -Security/Privacy
-Customization
 Website Quality

Content Design Organization User-

Friendliness
Timely Attractive Index Usability
Relevant Appropriateness Mapping Reliability Each of these
Variety of Pres. Color Consistency Consistency criteria is discussed in the
Accuracy Image / Sound / Link Interactive following:
Video
Objective Text Logo Features 1, Content Quality
Authority Domain Security/Privacy – This deal with the
Customization required characteristics of
website which include
Timeliness, Relevance, Multilanguage/Culture, Variety of Presentation, Accuracy, Objectiveness and
Authority. The indicators and its checklist are shown in Table 1.1.
Table 1.1 Indicators of Content Quality

Indicator Checklist
Timeliness Information is up to date
Website is frequently updated
Date of late update is indicated
Relevance Organization’s Objectives are displayed
Organization’s history is indicated
The target audience can be distinguished
Products/Services are indicated
Photographs of the organization’s facilities and
offices are displayed
Multilanguage / Culture User can choose language or website has different
language versions or website can be translated to
another language
Website respect different culture
Variety of Presentation -Website has different forms of content aside from
text such as photos, graphics, animations, video,
audio, etc.
Accuracy Information Presented is precise
There are no spelling and grammar error
Sources of information are identified and
acknowledged
Objectiveness Information presented is unbiased
Authority Organization’s physical address is in the website
Site sponsors are visible
Webmaster/site manager are indicated including
their contact details
Copyright indicated
 2. Design Quality – This dimension is concerned with the visual characteristics of websites
design that attract the users and encourage them to stay longer viewing the website and reenter it. Table
1.2 shows the indicators and checklist on how to achieve design quality in a website.
Table 1.2

Indicators Checklist
Attractiveness Innovate design
Aesthetic effect is incorporated
Emotional appeal
Appropriateness Design appropriate to the type of website
Image used are relative to the theme/topic
Images, colors and text are balanced
Color Background color highlights the contents and is
appropriate with the text color
Text color is appropriate and readable
Combination of the text and background color
considered web Accessibility Standards
Colors should be under the recommended Web-
Safe palette

Image / Sound / Video The Number of images, sound clips and video
clips is appropriate
These are appropriate and does not distract the
reader from the text and the message the page is
imparting
Images, sound clips and video clips used should
be compressed to lessen the bandwidth
Provide alternate text for images and captions for
videos
Text Text types and styles should be consistent
Text should be readable
Size should be relative
Avoid using all caps
There should be breathing space/white space
between the content
There are headings and sub heading to emphasize
content
Scrolling text should be used appropriately and
sparingly
Sequential appearance of text then images
 3. Organization – This dimension is concerned with the logical grouping, categorization, or
structure of websites elements in order to help the user reach the required information quickly, navigate
easily within the website, feel comfortable within its layout consistency, and keep him informed that he is
still in the same website. Table 1.3 contains the indicators and the checklist in order to determine if a
website is organized
Table 1.3 Indicators and check elements of the organization quality dimension

Indicators Check list

Index Index or Links to all website’s pages are present

Mapping There is adequate website map or navigation bar

or menu
There should be breadcrumbs in the current page
Consistency There should be consistency in the general layout
Link All links are working
Links to home, top are provided
Links to other websites are not dead links
Logo Organization’s logo is clear and noticeable

4.User-Friendliness – it is concerned with many issues that help any user regardless of his
education or experience to find the needed information within a reasonable time, the capability of the
website to maintain specific level of performance when used, and interactivity or connectivity which
emphasizes the existence of interaction between user and website using different tools. Table 1.4 List the
indicators and checklist to determine if a website is user friendly.
Table 1.4 Indicators and Check Elements of the user-friendliness quality dimension

Indicators Check List

Usability Easy to use, understand, operate, find or navigate
Easy to find using search engines
Features update and news in the organization
Reliability URL is appropriate and easy to remember
Has short download speed
Has a multi-browser support
Works properly using different screen settings
Has fewer ads
Always available
Interactive Features There are clear instructions
There is a help function
There is an effective internal search tool if
applicable
Feedback is provided between user and website
(chat, online community, suggested forms)
Capable of reviewing transactions
Can track orders
Security / Privacy Transaction are secured
There is a privacy statement
Customization Content can be tailored base on specific needs of
users
 Accessible Design
Accessibility Standard
People with Disabilities on the web
According to web accessibility in Mind or WebAim(2014), “Though estimates vary, most studies find
that about one fifth (20%) of the population has some kinds of disability. Not all of these people have
disabilities that make it difficult for them to access the internet, but it is still a significant portion of the
population. Business would be unwise to purposely exclude 20, 10, or even 5% of their potential
customers from their websites. For schools, universities, government entities it would not only be unwise,
in many cases, it would also violate the law”
The organization identified major categories of disabilities:
Visual - Blindness, Low-vision, Color-blindness
Hearing – Deafness and Hard-of-hearing
Motor – Inability to use a mouse, slow response time, limited fine motor control
Cognitive - Learning disabilities, Distractibility, inability to remember or focus on large amount of
information
Implementing Web Accessibility
Before anyone can make their website accessible, they must understand accessibility, be committed to
ensuring accessibility, learn how to implement accessibility, and understand their legal obligations
The web content accessibility guidelines (WCAG) provides an international set of guidelines. They are
developed by the worldwide web consortium (W3C), the governing body of the web. These guidelines the
basis of most web accessibility law in the world. Version 2.0 of these guidelines, published in December
2008, is based on four principles:
1. Perceivable: Available to the senses ( vision and hearing primarily) either through the browser or
through assistive technologies (e.g. screen readers, screen enlargers, etc)
2. Operable: Users can interact with all controls and interactive elements using either the mouse,
keyboard, or an assistive device.
3. Understandable: Content is clear and limits confusion and ambiguity.
4. Robust: A wide range of technologies (including old and new user agents and assistive
technologies) can access the content.

Principles of Accessible Design

Most accessibility principles can be implemented very easily and will not impact the overall
“look and feel” of your web site. The following is a list of some key principles of accessible design
provided by WebAim.

Provide appropriate alternative text

Alternative text provides a textual alternative to non-text content in web pages it is especially helpful for
people who are blind and rely on screen reader to have the content of the website read to them.
Provide appropriate document structure
Headings, lists, and other structural elements provide meaning and structure to web pages. They can also
facilitate keyboard navigation within the page.
Provide headers for data tables
Tables are used online for layout and to organize data. Tables that are used to organize tabular data should
have appropriate table headers (the <TH> elements).
Data cells should be associated with their appropriate headers, making it easier for screen reader users to
navigate and understand the data table.
Ensure users can complete and submit all forms
Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that
label is associated to the correct form element using the <label> elements. Also make sure the user can
submit the form and recover from any errors, such as the failure to fill in all required fields.
Ensure links make sense out of context
Every link should make sense if the link text is read by itself. Screen reader users may choose to read only
the links on a web page. Certain phrases like “click here” and “more” must be avoided.
Caption and/or provide transcripts for media
Video and live audio must have captions and a transcript. With archived audio, a transcription may be
sufficient.
Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint
presentations and Adobe Flash content.
In addition to all of the other principles listed here, PDF documents and other non-HTML content must be
as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very
least, provide an accessible alternative. PDF document should also include a series of tags to make it
more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person
using a screen.
Allow users to skip repetitive elements on the page
You should provide a method that allows users to skip navigation or other elements that repeat on every
page. This is usually accomplished by providing a “skip to main content”, or “skip navigation” link at the
top of the page which jumps to the main content of the page.

Do not relay on color alone to convey meaning

The use of color can enhance comprehension, but do not use color alone to convey information. That
information may not be available to a person who is color blind and will be unavailable to screen reader
users.
Make sure content is clearly written and easy to read
There are many ways to make your content easier to understand. Write clearly, use clear font, and use
heading and list appropriately.
Make Javascript accessible
Ensure that javascript event handlers are device independent (e.g., they do not require the use of a mouse)
and make sure that your page does not relay on javascript to function.
Design to Standards
HTML Compliant and accessible pages or more robust and provide better search engine optimization.
Cascading Style sheet (CSS) allow you to separate content from presentation. This provide more
flexibility and accessibility of your content.

This list does not present all accessibility issues, but by addressing this basic principles, you will ensure
greater accessibility of your web content to everyone. You can learn more accessibility by browsing our
articles and resources.

Writing a HTML Document

o HTML Editors
a. HTML Editors
a. An HTML Editors is a specialize piece of software that assists in the creation of HTML
Code. HTML Editors allow users to enter a raw text. The following are a few types of
HTML Editors that can be used for writing HTML Documents:
 i. Text Editors – Text Editors are HTML Editors that allow you to manipulate the
HTML Editors that can be used for writing HTML documents:
1. MS Notepad is a basic word processor bundle with the windows
operating system. We will be using this application to create HTML
Files.
2. Notepad ++ is a free source code editor in notepad replace that support
several languages. Running in the MS windows environment, its use is
governed by GPL License.
o Web Browsers
A web browser is a software application used to locate, retrieve also display content on the
world wide web, including web pages, images, video and other files. Example of popular
browsers are Chrome, Internet Explorer, Firefox, Safari, and Opera has shown in figure 1.5

a. Using Notepad ++
To open notepad ++, Click Start -> Programs -> Notepad++
Or
Start -> Run. Type the word NOTEPAD++ in the text as shown in the Figure 1.6. Click OK
button

HTML Tags

General Guidelines

Based from the guidelines release by smart (2014), there are some several guidelines you need to
remember about HTML. This are the following:
  There are two types of tags: There are containers such as <html> and </html> which are
switched ON and OFF (as indicate by the /), and there are separators such as <br>. Remember to
close all container tags.
 Always include comments explaining your code. Your code must be clearly comprehensive to
other coders for ease of maintenance. HTML comments are within a <!—and a --> .
 HTML Tags are not case sensitive. <U> means <u>. However, the WORLD WIDE WEB
CONSORTIUM (W3C) recommend lowercase tags in their HTML 4 recommendation. Aside from
this, XHTML, considered as a next generation HTML, requires lowercase tags.
 Excess white space (including spaces, newlines, tabs, courage returns, etc.) in HTML is generally
ignored. Therefor, the use of extra white space in you code is encourage in order improve
readability, without impacting on the result displayed.
 Use <meta> tags. The <meta> tag, contained within <head> and </head> tag is not necessary,
however it is good programming practice to use it. Meta tags can be very useful for Web
developers. They can be used to identify the creator of the page, what HTML specifications the
page follows, and the keywords and the description of the page.
o Make sure to fill the keyword and description attributes. These allow the search engines
to easily index your page using keywords you specify and a description of the site that
you write. The keyword attribute specify to the search engines if the website shall be
displayed if the keyword values in the meta tag match those that were entered in the
search box.
Example:
<meta name = “keywords” content = “webpage design and development, web design,
WebDes1, Web Development”>

Tag Attribute

 Tag can either be basic or it could have attributes. Two examples of tags that do not have any
attributes are:
o <i> - for italic
o <b> - for bold
 But for tags with attributes, these provide additional information about the HTML elements on
your page.
o For example, the tag:
o <body>
 It defines the body element of your HTML page. With the bgcolor attribute, you can set the
background color of your page. The code below sets the background color to blue:
o <body bgcolor=”blue”>
o Another example is
o <table>
  This tag defines a HTML table. With an added border attribute, you can show or hide the table
border:
o <table border=”0”>

III Characteristic of Tag Attributes

o Attributes always come in name/value pairs like name=”value”.

o Attributes are always added to the start tag of an HTML elements.
o Quote styles are either “red” or ‘red’.?

Attribute values should always be enclosed in quotes. Double style quotes are the most
common, but single style quotes are also allowed.

In some rare situation, like when the attribute value it self contain quotes, it is necessary to use
single quotes:

name = ‘Rodrigo “Roa” Duterte’

For our HTML documents to be consistent and since browsers do not handle single quotes
properly, we will be using double quotes for the values of our tags attributes.

IV Basic HTML Tags

The most important tags in HTML are tags that defines heading, paragraph and line breaks.

A. Headings
Headings are define with the <h1> to <h6> tags. <h1> Defines the largest heading. <h6>
defines the smallest heading.

The following HTML code below will display sample headings in the web browser as illustrated
and Figure 1.14

Code:

Output:

Figure 1.14 HTML headings

HTML automatically adds an extra blank line before and after a heading.
 B. Paragraph
Paragraph are defined with the <p> tag. Example,
<p> This is a paragraph </p>
<p> This is another paragraph </p>
HTML automatically adds extra blank line before and after paragraph.
C. Line Breaks
The <br> tag is used when you want to end a line, but do not want to start a new paragraph. The
<br> tag forces a line break wherever you place it. Example,
<p> This <br> is a para <br> graph with line breaks <p>
The <br> tag is an empty tag. It has no closing tag.
D. Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you when
edit the source code at a later date. Example,
<! -- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.

V. HTML Tag Listing

The following are the different HTML tags as categorized and described in w3schools.

A. Basic Tags
The tags in table 1.5 are used to create an HTML file and to define the major parts of the HTML
page.

Table 1.5 Basic HTML Tags

Tag Description
<!DOCTYPE> Defines the document type.
E.G. <!DOCTYPE html> defines that the document
is an HTML document
<html> Defines an HTML Document
<title> Defines an HTML Document
<body> Defines the document’s body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!-- --> Defines a comment
B. Formatting Tags
 The following formatting tags in Table 1.6 are used to enhance the appearance of text and to
emphasize content in page.

Table 1.6 HTML Formatting Tags

Tag Description
<abbr> Defines an abbreviation
<address> Defines contact information for the author/owner of a
documentary article
<b> Defines bold text
<bdo> Overrides the current text direction
<blockquote> Defines a section that quoted from source
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<em> Defines emphasize text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines a preformatted text
<progress> Represents the progress of a task
<q> Defines short quotation
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<time> Defines a date/time
C. Forms and Input Tags
HTML forms allow interactions between a website application and a user through the
following input elements represented by the following tags in Table 1.17. Further discussion of
HTML forms and input cam be found in Lesson 9.

Table 1.7. HTML Forms and Input Tags

Tag Description
<form> Defines an HTML form for user input
<input> Defines and input control
<textarea> Defines multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down
list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
D. Frames
Based on the specifications released by W3C, HTML frames allow authors to present
documents in multiple views, which may be independent windows or subwindows. Multiple
views offer designers a way to keep certain information visible, while other views are scrolled or
replaced. For example, within the same window, one frame might display a static banner, a
second a navigation menu, and a third the main document that can be scrolled through or
replaced by navigating in the second frame.

Table 1.8. Frame Tags

Tag Description
<iframe> Defines an inline frame
E. Images
Webpages become more interesting and appealing because of elements such as photos,
illustrations, games, among others which can be inserted in the document.
Table 1.9 show the tags associated to inserting images, canvas and maps. Further
discussion on how to use these tags can be found in lesson 10.

Table 1.9. Image Tags

Tag Description
<img> Defines an image
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
<canvas> Used to draw graphics, on the fly, via scripting
(usually JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies selt-contained content
F. Audio / Video
Aside from images and graphics, HTML allows insertion of multimedia such as video and
audio in a webpage through the tags found in Table 1.10. These tags do not store the media but
create links to the media as further discussed in Lesson 10.

Table 1.10. HTML Audio and Video tags

Tags Description
<audio> Defines sound content
<source> Defines multiple media resources for media
elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video>
and <audio>)
<video> Defines a video or movie
G. Links
Links are used in order to connect and link the different webpages and access external
webpages. The tags in order to do these can be found in Table 1.11. A detailed discussion on
using links can be found in lesson 8.

Table 1.11 HTML Links

Tags Description
<a> Defines a hyperlink
<link> Defines the relationship between a document
and an external resource (most used to link to
style sheets)
<nav> Defines navigation links
H. Lists
HTML Lists are used to group related pieces of information together, so that they are
clearly associated with each other and easy to read. In modern web development lists are
frequently used for navigation as well as general content.
Lists are good from a structural point of view as they help create a well-structured, more
accessible, easy-to-maintain document. In addition, W3C (2014) identified the use of lists useful
for a purely practical reason which is allow extra elements to attach to CSS styles for a whole
variety of styling. HTML Lists tags are listed in Table 1.12.

Table 1.12. HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of term/name in a
description list
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that user can
invoke from a popup menu
I. Tables
HTML tables are used to display data in tabular form. It was also popularly used before
to layout webpages before. Table 1.13 lists the HTML tags associated in creating tables, rows
and columns.
 Table 1.13.HTML Table Tags

Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<col> Specifies column properties for each column
within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a
table for formatting
J. Styles and Semantics
One of the new HTML 5 tags that were created are semantic tags. These semantic
elements were made to clearly define different parts of a web page such as header, footer,
section, etc. Table 1.14 shows the HTML tags to create styles and semantics in a webpage.

Table 1.14. HTML Styles and Semantics Tags

Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
K. Meta Info
These tags are used to provide metadata about the HTML document. Metadata is
data/information about the data or in Web Design, Information about the website.
According to W3Schools (2014), metadata will not be displayed on the page, but will be
machine parsable – meaning, it can be understood and executed by the browser to display the
content/reload page, search engines and other Web services.
Meta elements are typically used to specify page description, keywords, and author of
the document, last modified, and other metadata. These meta tags are listed in Table 1.15.
 Table 1.15a. HTML Meta Info Tags

Tag Description
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs
in a document
Table 1.15b. HTML Meta Attributes

Tag Value Description

charset character_set Specifies character encoding for the
HTML document
Content text Gives the value associated with the
http-equiv or name attribute
name application-name Specifies the name for the metadata
author
description
generator
keywords
Example

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

<meta name=”description” content=”Free web Tutorials on HTML and CSS”>
<meta name=”author” content=”Hege Refsnes”>
<meta http-equiv=”refresh” content=”30”>

L. Programming
In order to insert scripts such as JavaScript or embed an object such as video in your
HTML document, use HTML programming tags to do these as listed in Table 1.16.

Table 1.16. HTML Programming Tags

Tags Description
<script> Defines a client-script
<noscript> Defines an alternate content for users that do not
support client-side scripts
<embed> Defines a container for an external (non-HTML>
application
<object> Defines an embedded object
<param> Defines a parameter for an object
 Lists
HTML offers authors several mechanics for specifying lists of information. All lists must contain
one or more list elements. Lists may contain:
 Unordered information
 Ordered information
 Definitions
Lists
Lists are used to created groupings of related information and at the same time, outline and
organize web content.
The HTML tag for creating lists can be found in Table 5.8. There are 3 major types of lists which
include ordered, unordered and definition lists.

I. Unordered Lists
Unordered lists are used to create a listing of items that do not have a required order.
These are also called bulleted lists.
An unordered list starts with the <ul> tag. Each list item starts with <li> tag.
The list items are marked with bullets (typically small black circles) as the default tag but
this can be replaced with a square or a circle. Table 1.17 shows the listing of attribute that
can be used to create “bullets” in unordered lists.

Table 1.17. Unordered List Attributes

Attribute Value Description
type  disc Specifies the kind of marker to
 square use in the list.
o circle
Figure 1.15 shows an example on how unordered list can be used in HTML:
HTML Code:

Output:
 II. Ordered Lists
An order list is used to create a list of items that are arranged in a particular sequence.
This is created using the OL element whose attributes and possible values are shown in
Table 1.18.

Table 1.18. OL Attributes

Attribute Value Description

reversed reversed Specifies that the list order
should be descending (9,8, 7..)
start number Specifies the start value of an
ordered list
type 1 Specifies the kind of marker to
A use in the list
a
I
i
Ordered lists are used in the example in Figure 1.16.

Code:

Output:

III. Definition Lists

Definition lists, created using the DL element, generally consists of a series of
term/definition pairs (although definition lists may have other applications). Thus, when
advertising a product, one might use a definition list.
An example illustrating the use of a definition list can be seen in figure 1.17.
Code:

Output:

Figure 1.17. HTML Definition List

 Tables

A <table> is an HTML structure for creating rows and columns. It is used for lists, specifications
and other tabular data as well as to locate elements on the page.

The table command gives the HTML designer reasonably precise control over placement of text
and images. HTML tables are built using the <table> tag define the overall table and then table row <tr>
tag to build each row. The tags are listed in Table 1.12 in Lesson 5 where:

 The <tr> elements are the data containers in the table

 The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables,
etc.

Just like other HTML tags, tables have their own attributes in order for it to be formatted. These
attributes are listed in Table 1.19.

Table 1.19. HTML Table Attributes

Attribute Value Description

align Left Specifies the alignment of a table according to
Center surrounding text
Right
bgcolor Rgb(x,x,x) Specifies the background color for a table
#xxxxxx
colorname
border 1 Specifies whether the table cells should have
“” borders or not
cellpadding pixels Specifies the space between the cell wall and
the cell content
cellspacing pixels Specifies the space between cells
frame Void Specifies which parts of the outside borders that
Above should be visble
Below
Hsides
Lhs
Rhs
Vsides
Box
Border
rules None Specifies which parts of the inside borders that
Groups should be visible
Rows
Cols
All
sortable sortable Specifies that the table should be sortable
summary text Specifies a summary of the content of a table
width Pixels Specifies the width of a table
%
 Figure 1.18 shows how these HTML tags are used to produce the HTML page output of a
borderless table composed of 3 rows and 3 columns.

Code:

Output:

Figure 1.18. Borderless HTML Table

By setting the attribute border in the table tag to “1px” (one pixel), the table’s borders are now
visible as shown in Figure 1.19.
Code:

Output:

Figure 1.19. Table with Borders

Hyperlinks

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another
document. A link, or an anchor, is a word, a group of words or an image you can click to jump to another
document or a specific part of the current document. The element for links, both internal and external is
as simple as <a>.

I. HTML Link
 The <a> tag defines a hyperlink, which is used to link from one page to another.
 The most important attribute of the <a> element is the href attribute, which
indicates the link’s destination.
  By default, links will appear as follows in all browsers:
o An unvisited link is underline and blue
o A visited link is underlined and purple
o An active link is underlined and red
 The HTML code for a link is simple. It looks like this:
<a href=”url”>Link text</a>
 The href attribute specifies the destination of link.

The different HTML Link attributes are listed in Table 1.20.

Table 1.20. HTML Link attributes are listed in Table 1.20.

Attribute Value Description

download filename Specifies that the target will be
downloaded when a user clicks on the
hyperlink
href URL Specifies the URL of the page the link
goes to
hreflang language_code Specifies the language of the linked
document
media media_query Specifies what media/device the
linked document is optimized for
rel alternate Specifies the relationship between the
author current document and the linked
bookmark document
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
target _blank Specifies where to open the lnked
_aparent document
_self
_top
framename
type MIME_type Specifies the MIME type of the linked
document

II. Types of Links

a. Absolute Links
An absolute link (or “absolute URL link”) contains a complete internet address, just the
same as if you typed the address into your browser’s address bar. It doesn’t matter where the
 source page is in relation to the destination page, the link will always work as long as the
destination page exists. Most absolute links begin with http:// and follow this simple format:
<a href =http://www.mysite.com/index.html>Go To My Site</a>

b. Document-Relative Links:
Document-relative links use direction form the source page to the destination page, sort of
like saying “Start here then follow this path until you reach the destination”.
There are three ways to do this – the method used will depend on the location of the
source and destination pages in relation to each other. We will use the example on the Figure
1.21 and create hyperlinks from the page called sourcepage.html to other pages in the site.

Figure 1.21 Example of a Simple Directory Structure

1. If the destination page is in the same directory as the source page

All you need to specify is the source file name:

<a href=“page1.html”>Go To Page 1</a>

2. If the destination page is in a folder inside the source page’s folder

Specify the folder name and then the file name:

<a href=”directory2/page2.html”>Go To Page 2 </a>

3. If the destination page is in a folder outside the source page’s folder
Use the special instruction ../ which signifies “one directory higher”.

The following link means “Go up one directory level, then go to folder called directory3, then to
a file called page3.html”:

You can repeat the ../ to make the link more than one level higher, for example, “Go up
two levels, to a file called index.html”;

<a href=”../../index.html”>Go To The Index Page</a>

Important Note: For relative links to work, you must keep the file structure intact. For example,
if you moved the sourcepage.html file down into the directory2 folder, the relative links would
no longer work. In this case you would need to add another ../ to point the links to the correct
level. For example:

<a href=”../../../index.html”>Go To The Index Page</a>

c. Site-Root-Relative Links
A Site-Root-Relative Link links pages on the same server or directory
The Site-Root-Relative Links use a single forward-slash / to signify the instruction: “Start at
the document root of the site ad go down the directory path from there.” The format is:

<a href=”/main-directory/directory4/pag4.html”>Go To Page 4</a>

Despite the cumbersome name, this method is quite simple. The link begins at the same
level as your domain and works down from there. The link above is the same as:

<a href=”http://www/mysite.com/main-directory/directory4/page.4.html>Go To Page

4</a>

This method has the significant advantage of staying intact if you move the source page.
The exact same link will work any page anywhere in the site.

Notes:
 This method will not work on files on your own hard drive unless you run them
through a personal web server. However once you upload the pages to your server
they will work.
 If your site does not have its own domain name, this method is likely to cause
problems. Consult your hosting provider for more information.
d. Internal Links
An internal hyperlink is a link which points to a particular part of a page. This can be useful
in long pages with lots of sub-section. For example, the links at the top of this page are internal
links pointing to each sub-heading.
Internal hyperlinks require an anchor tag with the “name” attribute like so:

<a name=”part2”>Part 2</a>

Create an anchor like this at the place in the page you want to link to. It doesn’t matter if
there is anything between the open and close tags.
Then create a hyperlink which refers to this anchor with hash (#) like so:

<a href=”#part2”>Go To Part 2</a>

This assumes that the name anchor is on the same page as the hyperlink. To link to anchor
on a separate destination page, simply create a normal link with the anchor name appended to
the file name like so:

<a href=”page1.html#part2”>Go To Page 1, Part 2</a>

e. Download Link
A Download Link links a file for the visitor to download
File links are used for allowing a visitor to download a file. These links are set up exactly
the same as the local or external links. Instead of “pointing” to another page or site, it points to
a file. When the user clicks on this link, the browser knows it is a file and will ask the visitor if
they want to download the file. The types of files available to be used for download depend on
your online server. A common and most accepted type is a ZIP file.

<a href=”File URL.zip”>Click here to download this file</a>

f. E-mail (mailto)
E-Mail Links, otherwise known as “mailto” links, use the following format:

<a href=”mailto:myname@mysite.com”>Click Here to Email Me</a>

This type of link is a special case, completely different to those described above. Instead of
linking to a place on the internet, clicking this link causes the user’s computer to open its default
email program (e.g. Outlook Express, Eudora, etc) and prepare a blank email to the specified
address. The user then enters their message and sends the email in the normal way.
If you want to be tricky, you can add a “subject” attribute to the link. This will
automatically insert the specified subject line into the email:

<a href=mailto:myname@mysite.com?subject=Inquiry From Website>Click Here to Email

Me</a>
 Notes:
 The subject attribute doesn’t work in all browser/email programs. Those programs
which don’t support it will probably just ignore it, but there are no guarantees that it
won’t cause an error. Use at your own risk.
 Be aware that using mailto links on your website is an open invitation spam. Malicious
programs called “email harvesters” troll the internet looking for these links when they
find yours they will add it to a database for spammers. This is why we recommend
using contact form rather than mailto link wherever possible.

III. Creating Links

Figure 1.22 shows the HTML code which created an external link to University of Baguio
website and the SIT Router and how the page looks like in the browser. It is important to
emphasize that when creating external links, the URL should be completely specified after
the href attribute. Complete means that the protocol (eg.http://) should be included with
the domain name.
a. Absolute Links

Output:

Figure 1.22 External/Absolute Links displayed in the Web Browser

 It is important to note that in creating relative links, proper addressing should be used
to reference the page. Do not include the drive (eg. C:/) where the file is located.

Use the following paths when

 Links in the same directory as the current page have no path information listed
Filename
 Sub-directories are listed without any preceding slashes
Weekly/filename
 Links up one directory are listed as
../filename

Figure 1.23 shows an example of a page with internal links

b. Document-Relative Links

Output:

Figure 1.23 Webpage Containing Document-Relative Links

 HTML FORMS

A form is a part of the HTML document that allows the page to collect any kind of information
from the user. It may also contain other form elements such as dropdown lists, radio buttons or
checkboxes.

The first thing to consider when developing forms is the information needed and how it should
be presented. Next, you have to ensure that the user can easily provide the information, which entails a
functional and visually appealing design.

Forms basically have two parts:

1. The part that is displayed

2. The part that is not displayed (specifying how the web server should process the information)

Form Tag

A form tag is defined with the <form> tag, which tells the browser where the form starts and
ends. All kinds of HTML tags can then be added within the <form> tag.

The syntax for creating a form is shown in Figure 1.24:

Figure 1.24. HTML Form Syntax

Input Tag

Most of the form elements are defined with the <input> tag. The type of element is specified
through the type attribute.

Table 1.21 lists the common properties of form elements defined with the input tag:

Table 1.21. Common Properties of Form Elements

Property Description
name Adds an internal name to the form element so the program that handles the form can
identify it.
id Defines a unique id for the element.
value Defines the default value or the caption of the form element.
title Defines a short description about the element that is usually shown as a “tool tip”
align Defines how the form element’s label is aligned. (TOP, MIDDLE, BOTTOM, RIGHT, LEFT,
TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM)
tabindex Defines the order that the form element is activated when the tab key is pressed.
 In addition to the common properties of form elements, W3Schools (2014) also listed additional
HTML attributes for forms as show in Table 1.22

Table 1.22. HTML form and form element attributes

Attribute Value Description

accept audio /* Specifies the types of files that the server
video /* accepts (only for type=”file”)
image /*
MIME type
alt text Specifies an alternate text for images (only for
type=”image”)
autocomplete on Specifies whether an <input> element should
off have autocomplete enabled
autofocus autofocus Specified that an <input> element should
automatically get focus when the page loads
checked checked Specifies that an <input> element should be pre-
selected when the page loads (for
type=”checkbox” or type=”radio”)
disabled disabled Specifies that an <input> element should be
disabled
form form_id Specifies one or more forms the <input>
elements belongs to
formation URL Specifies the URL of the file that will process the
input control when the form is submitted (for
type=”submit” and type=”image”)
formenctype Application /x-www- Specifies how the form-data should be encoded
form-urlencoded when submitting it to the server (for
multipart/form-data type=”submit” and type=”image”)
text/plain
formmethod Get Defines the HTTP method for sending data to
Post the action URL (for type=”submit” and
type=”image”)
formnovalidate Formnovalidate Defines that form elements should no be
validated when submitted
formtarget _blank Specifies where to display the response that is
_self received after submitting the form (for
_parent type=”submit” and type=”image”)
_top
Framename
height Pixel Specifies the height of an <input> element (only
for type=”image”)
list Datalist_id Refers to a <datalist> element that contains pre-
defined options for an <input> element
max number Specifies the maximum value for an <input>
date element
maxlength number Specifies the maximum number of characters
allowed in an <input> element
min number Specifies the minimum value for an <input>
date element
multiple multiple Specifies that a user can enter more than one
value in an <input> element
name text Specifies the name of an <input> element
pattern regexp Specifies a regular expression that an <input>
element’s value is checked against
placeholder text Specifies a short hint that describes the
expected value of an <input> element
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled out
before submitting the form
size number Specifies the width, in characters, of an <input>
element
src URL Specifies the URL of the image to use as a
submit button (only for type=”image”)
step number Specifies the legal number intervals for an input
field
type button Specifies the type <input> element to display
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
value text Specifies the value of an <input> element
pixels Specifies the width of an <input> element (only
for type=”image”)
 HTML has several new input types for forms. These new features allow better input control and
validation.

This unit also covers the following additional input types:

 color  month  time

 date  number  url
 datetime  range  week
 datetime-local  search
 email  tel

a. Text Field
It is used to define a one-line input field that a user can enter text info. Figure 1.25
shows an example of how to create a text field:

Code:

Output

Figure 1.25 Text Field

b. Password Field
Password field are similar to text fields. The only difference is that the character entered
into a password fields shows up as dots on the screen. This is, of course, to prevent others from
reading the password on the screen.
Password field properties are the same as text field properties.

Figure 1.26 shows an example of how to create a password field:

Code:
 Output:

Figure 1.26. Password Field

c. Radio Buttons
Radio buttons are used when a user is limited to selecting only one option form a set of
alternatives. The properties of radio buttons are the same as checkboxes
Figure 1.12 shows an example of how to create a radio button:

Code:

Output:

Figure 1.27. Radio Buttons

d. Checkboxes
Checkboxes are used when a user is allowed to select one or more options from a set of
alternatives.

Figure 1.28 shows an example of how to create checkboxes:

Code:
 Output:

Figure 1.28. Checkboxes

e. Submit Button
Submit buttons send form data to a back-end process or application. The back-end
process when verifies and processes the data, eventually passing the information into some
database application.
The submit button has following attributes and their explanation as shown in Table 1.23.
Table 1.23 Submit Button and Attributes

HTML Explanation
submit Submit button
Name= Name of the button
Value= Text written on the button
Align= Alignment of the button
Tabindex= Tab order of the button
Figure 1.29 shows an example of how to create three types of submit button

Code:

Output:

Figure 1.29. Submit Buttons

f. Color
The color type is used for input fields that should contain a color. Figure 1.30 shows an example
of how to create a color picker and how this is displayed in the different browsers.

Code:

Output:

Figure 1.30. Color Picker in Different Browsers

g. Date
The date type allows the user to select a date. Figure 1.31 shows an example on how to
create a date picker.

Code:

Output:

Figure 1.31. Date in HTML

h. Datetime
The input element with a type attribute whose value is “datetime” represents a control
for setting the element’s value to a string representing a global date and time (with timezone
information).
The figure in Figure 1.32 shows an example that defines a date and time control (with
time zone):

Code:

Output:

Figure 1.32. Date and Time in Different Browsers

i. Datetime-local
The input element with a type attribute whose value is “datetime-local” represents a control for
setting the element’s value to a string representing a local date and time (with no timezone
information). Figure 1.33 shows an example to define local date and time (no timezone).
 Code:

Output:

Figure 1.33. Local Date and Time

j. Email
The email type used for input fields that should contain an e-mail address.
The input element with a type attribute whose value is ”email” represents a control for
editing a list of e-mail addresses given in the element’s value.
Figure 1.34 shows an example to define a field for an e-mail address (will be
automatically validated when submitted):

Code:
 And the resulting output:

Figure 1.34. Email Field

k. Month
The input element with a type attribute whose value is “month” represents a control for
setting the element’s value to a string representing a month.
The month type allows the user to select a month and year. Figure 1.35 shows an
example defines a month and year control (no time zone):

Code:

And the resulting output:

Figure 1.35. Month Field

l. Number
The input element with a type attribute whose value is ”number” represents a precise
control for setting the element’s value to a string representing a number.
The number type is used for input fields that should contain a numeric value. You can
also set restrictions on what numbers are accepted. Use the following attributes to specify
restrictions:
max – specifies the maximum value allowed
min – specifies the minimum value allowed
step – specifies the legal number intervals
value – specifies the default value
Figure 1.36 shows an example defines an input type that accepts a numerical value.

Code:

And the resulting output:

Figure 1.36. Number Field

m. Range
The range type is used for input fields that should contain a value from a range of numbers.
Figure 1.37 shows an example defines input fields that should contain a value from a range of
numbers.
 Code:

And the resulting output:

Figure 1.37. Range Field

n. Search
The search type is used for search fields (a search field behaves like a regular text field).
Figure 1.38 shows an example defines a search field (like a site search, or Google
search):

Code:
 And the resulting output:

Figure 1.38. Search Field

o. Tel
The input element with a type attribute whose value is ”tel” represents a one-line plain-
text edit control for entering a telephone number.
Figure 1.69 shows an example define a field for entering a telephone number:

Code:

And the resulting output:

Figure 1.39. Telephone Number Field

p. Time
The time element represents a date and/or time. Figure 1.40 shows an example defining a
control for entering a time (no time zone):

Code:
 And the resulting output:

Figure 1.40. Time Field

q. URL
The URL type is used for input fields that should contain a URL address. The value of the
URL field is automatically validated when the form is submitted.
Figure 1.41 shows an example defining a field for entering a URL:

Code:

And the resulting output:

Figure 1.41. URL Field

r. Week
The week type allows the user to select a week and year. Figure 1.42 shows an example defining
week and year control (no time zone):
Code:

And the resulting output:

Figure 1.42. Week and Year Control Field

 HTML MEDIA

Multimedia comes in many different formats. It can be almost anything you can hear or see like
text, pictures, music, sound, videos, records, films, animations, and more.

On the Internet you can often find multimedia elements embedded in web pages, and modern
web browsers have support for a number of multimedia formats.

Forms basically have two parts:

1. The part that is displayed

2. The part that is not displayed (specifying how the web server should process the information)

Multimedia Formats

Multimedia elements (like sounds or videos) are stored in media files.

The most common way to discover the media type is look at the file extension. When a browser
sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension
indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by
extensions like .gif and .jpg.

Multimedia elements also have their own file formats with different extensions like .swf,
.wmv, .mp3, and .mp4.

a. Image
In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for “source”. The
value of the src attribute is URL of the image you want to display.

Syntax:

<img src=”url” alt=”some_text”>

To show images into an HTML document, try the code in Figure 1.43.

Figure 1.43. HTML Code for Inserting Image

b. Video
Until now, there has not been a standard for showing a video/movie on a web page .
 Today, most videos are shown through a plug-in (like Flash). However, different browsers may
have different plug-ins.

HTML defines a new element which specifies a standard way to embed a video/movie on a web
page: the <video> element and its attributes as shown in Table 1.24.

Table 1.24 <video> Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video>
and <audio>
<track> Define text tracks in mediaplayers

The 1.25 lists the different video formats, its file extension and description as defined by
W3CTutotial (2014) which can be used in your website.

Table 1.25. Different Video Formats

Format File Extension Description

AVI .avi The AVI (Audio Video Interleave) format was
development by Microsoft. The AVI format is supported
by all computers running Windows, and by all the most
popular web browsers. It is a very common format on the
Internet, but not always possible to play on non-Windows
computers.
WMV .wmv The Windows Media format is developed by Microsoft.
Windows Media is a common format on the Internet, but
Windows Media movies cannot be played on non-
Windows computer without an extra (free) component
installed. Some later Windows Media movies cannot play
at all on non-Windows computers because no player is
available.
MPEG .mpg The MPEG (Moving Pictures Expert Group) format is the
.mpeg most popular format on the Internet. It is cross-platform,
and supported by all the most popular web browsers.
QuickTime .mov The QuickTime format is developed by Apple. QuickTime
is a common format on the Interne, but QuickTime
movies cannot be played on a Windows computer
without an extra (free) component installed.
RealVideo .rm The RealVideo format was developed for the Internet by
.ram Real Media. The Format allows streaming of video (on-
line video, Internet TV) with low bandwidths. Because of
the low bandwidth priority, quality is often reduced.
Flash .swf The Flash (Shockwave) format was developed by
.flv Macromedia. The Shockwave format requires an extra
Mpeg-4 .mp4 component to play. But this component comes
preinstalled with web browsers like Firefox and Internet
 Explorer
Act, YouTube recommends using MP4. YouTube accepts
multiple formats, and then converts them all to flv or
.mp4 for distribution. More and more online video
publishers are moving to MP4 as the internet sharing
format for both Flash players and HTML.
Ogg Vorbis .ogg Ogg is a multimedia container format, and the native file
and stream format for the Xiph.org multimedia codecs.
As with all Xiph.org technology is it an open format free
for anyone to use.
webM .webM The WEBM container format is based on the Matroska
container, which stores Matroska video in .MKV files.
Most major Web Browsers will support WebM as part of
HTML video delivery. WebM is an alternative to the
patented h.264 and MPEG4 standards, and is suitable for
commercial and non-commercial applications.

Video Formats and Browsers Support

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg
in HTML. Table 1.26 lists down the different videos and if these are supported by the different browsers.

Table 1.26. Video Formats and Browser Support

Browser MP4 WebM Ogg

Internet Explorer 9 Yes No No
Firefox 4.0 No Yes Yes
Google Chrome 6 Yes Yes Yes
Apple Safari 5 Yes No Yes
Opera 10.6 No Yes Yes

To show a video in HTML5, insert the following code found in Figure 1.44 in your html code.

Code:
 Output:

Figure 1.44. Embedding Video in an HTML Document

c. Audio

Most audio files are played through a plug-in (like Adobe Flash). However, different browsers
may have different plug-ins. According to W3Schools (2014) in pre-HTML, there was no standard to
allow audio to be played in webpage.

With HTML, a new element was defined which specifies a standard way to embed an audio file
on a web page. This is the <audio> element. Table 1.27 gives a listing of the tags associated in
incorporating audio in a website

Table 1.27. HTML Audio Tags

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video> and
<audio>

At present, there are 3 supported file formats for the <audio> element. These are listed in Table
1.28 including their MIME type.

*MIME stands for Multi-Purpose Internet Mail Extensions and it is a standard way of classifying
file types on the Internet. Internet programs such as Web server and browsers all have a list of MIME
types, so that they can transfer files of the same type in the same way, no matter what operating system
they are working in. (Business Internet, 2014).

Table 1.28. MIME Types for Audio Formats

Format MIME-type
MP3 Audio/mpeg
Ogg Audio/ogg
Wav Audio/wav

These audio formats can be supported or not by browsers. Table 1.29 lists an evaluation of the
different browsers and if they can support these audio files.

Table 1.29. Audio Formats and Browser Support

Browser MP3 Wav Ogg

Internet Explorer yes no no
Chrome yes yes yes
Firefox no yes yes
Update: Firefox 21 running on Windows
7, Windows 8, Windows 8, Windows
Vista, and Android now supports MP3
Safari yes yes no
Opera no yes yes

Figure 1.45 shows an example showing how to insert an audio file in an HTML code.

Code:
 Output:

Figure 1.45 Inserting an Audio File in HTML

HTML came up with audio/video methods, properties and events for the <audio> and <video>
elements for these to be manipulated in JavaScript. Tables 1.30, 1.31 and 1.32 lists these methods,
properties and events.

Table 1.30. HTML Audio/ Video Methods

Method Description
addTextTrack() Adds a new text track to the audio/video
canPlayType() Checks if the browser can play the specified audio/video type
load() Re-loads the audio/video element
play() Starts playing the audio/video
pause() Pauses the currently playing audio/video

Table 1.31. HTML Audio/Video Properties

Property Description
audioTracks Return an AudioTrackList object representing available audio tracks
autoplay Sets or returns if the audio/video should start playing as soon as it is loaded
buffered Returns a TimeRanges object representing the buffered parts of the
audio/video
controller Returns the MediaController object representing the current media
controller of the audio/video
controls Sets or returns if the audio/video should display controls (like play/pause
 etc.)
crossOrigin Sets or returns the CORS setting of the audio/video
currentSrc Returns the URL of the current audio/video
currentTime Sets or returns the current playback position in the audio/video (in seconds)
defaultMuted Sets or returns if the audio/video is muted by default
defaultPlaybackRate Sets or returns the default speed of the audio/video playback
duration Returns the length of the current audio/video (in seconds)
ended Returns if the playback of the audio/video had ended or not
error Returns a MediaError object representing the error state of the audio/video
loop Sets or returns if the audio/video should start over again when finished
mediaGroup Sets or returns if the audio/video belongs to (used to link multiple
audio/video elements)
muted Sets or returns if the audio/video is muted or not
networkState Returns the current network state of the audio/video
paused Sets or returns if the audio/video is paused or not
playbackRate Sets or returns the speed of the audio/video playback
played Returns a TimeRanges object representing the played parts of the
audio/video
preload Sets or returns if the audio/video should be loaded when the page loads
readyState Returns the current ready state of the audio/video
seekable Returns a TimeRanges object representing the seekable parts of the
audio/video
seeking Returns if the user is currently seeking in the audio/video
src Sets or returns the current source of the audio/video element
startDate Returns a Date object representing the current time offset
textTracks Returns a TextTrackList object representing the available text tracks
videoTracks Returns a VideoTrackList
volume Sets or returns the volume of the audio/video

Table 1.32. HTML Audio/Video Events

Event Description
abort Fires when the loading of an audio/video is aborted
canplay Fires when the browser can start playing the audio/video
canplayrhrough Fires when the browser can play through the audio/video without stopping
for buffering
durationchange Fires when the duration of the audio/video is changed
emptied Fires when the current playlist is empty
ended Fires when the current playlist is ended
error Fires when an error occurred during the loading of an audio/video
loadeddata Fires when the browser has loaded the current frame of the audio/video
loadedmetadata Fires when the browser has loaded meta data for the audio/video
loadstart Fires when the browser starts looking for the audio/video
pause Fires when the audio/video has been paused
play Fires when the audio/video has been started or is no longer paused
playing Fires when the audio/video is ready to play after having been paused or
 stopped for buffering
progress Fires when the browser is downloading the audio/video
ratechange Fires when the playing speed of the audio/video is changed
seeked Fires when the user is finished moving/skipping to a new position in the
audio/video
seeking Fires when the user starts moving/skipping to a new position in the
audio/video
stalled Fires when the browsers is trying to get media data, but data is not
available
suspend Fires when the browser is intentionally not getting media data
timeupdate Fires when the current playback position has changed
volumechange Fires when the volume has been changed
waiting Fires when the video stops because it needs to buffer the next frame

An example using these properties, methods and events for audio is shown in Figure 1.46
Output:

Figure 1.46 Inserting an Audio File in HTML