4. HTML Guide - To Print

PROGRAMMING
Web Designing with HTML,
CSS and JavaScript
Students Guide
In partnership with

Web Designing with HTML, CSS and JavaScript
Page I
SLANA Technology Learning Centre
Preface
Youth unemployment is high in Sri Lanka’s rural regions, and the disadvantaged youth
population has difficulty in accessing the required knowledge and training which will allow them
to break the existing cycle of poverty to build a better life for themselves. As of 2015, the field of
programming is flourishing on a global scale; nevertheless in rural areas of Sri Lanka, youth have
little to no access to learn programming.
‘Learn the Code that Builds Your World’ project was conceptualized by Sri Lanka Anti
Narcotics Association to address this important issue. This project aims to disseminate
programming knowledge and practical training to youth who previously would not have had the
opportunity to gain access to such teachings; with the ultimate goal of the beneficiaries to
become more employable at the end of their learning experience. One important aspect of this
project’s success is collaborating with relevant organizations, institutes, and schools that identify
apt students and help SLANA disseminate the coding curriculum.
SLANA has been very fortunate to be able to be sponsored by World Bank, Microsoft,
and Sarvodya Fusion to start our Learn the Code that Builds Your World program in Maskeliya
with Tea Leaf Vision being our first collaborative partner.

Page II
SLANA Technology Learning Centre
Introduction
This book is specifically targeted at Junior Website Designers, and gives them a
sufficient understanding of basics in HTML, CSS (Cascading Style Sheets) and JavaScript to
create websites. It’s better if you have basic programming knowledge to follow the JavaScript
part of this book.
What is HTML?
HTML is a markup language for describing web documents (web pages).HTML stands
for Hyper Text Markup Language. A markup language is a set of markup tags. HTML
documents are described by HTML tags. Each HTML tag describes different document content.
CSS (Cascading Style Sheets)
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language.
JavaScript
JavaScript is the programming language that uses for handle the dynamic part of the web
site for any user interaction. It is very easy to learn as a programming language point of view and
because of that it is the most popular programming language in the world.

Page III
Sri Lanka Anti Narcotics Association
Table of Contents
Chapter 1
Introduction ......................................................................................................................................................1
The World Wide Web (WWW)
HTML Introduction
The Declarations
The HTML Elements
HTML Headings
HTML Text Formatting
Chapter 2
Styles & CSS .....................................................................................................................................................6
HTML Styling
CSS Styling
Main Styling Methods (Inline, Internal and External)
CSS Selectors
CSS for Background and Text
Chapter 3
HTML Links...................................................................................................................................................14
HTML Links Syntax
HTML Links with Attributes
Styling Links
Chapter 4
Images..............................................................................................................................................................17
HTML Images Syntax
Set Image Size
Set Image Path
Image as Links
Chapter 5
HTML Tables .................................................................................................................................................20
HTML Table Syntax
HTML Table Styling
Chapter 6
HTML Lists.....................................................................................................................................................24
HTML List Types with Syntaxes
Chapter 7
HTML Layouts...............................................................................................................................................28
HTML Block Elements and Inline Elements
HTML Div and Span Elements
Website Layout Using HTML5
HTML Layout Using Tables
Chapter 8
HTML Forms..................................................................................................................................................32
HTML Form Elements
Chapter 9
HTML5............................................................................................................................................................39
HTML5 Introduction
HTML5 Supports
HTML5 Elements
Chapter 10
HTML Media..................................................................................................................................................42
HTML Media Elements with Introduction
Chapter 11
JavaScript........................................................................................................................................................45
Basic Introduction to JavaScript
Control Structures in JavaScript
Functions in JavaScript
User Interaction through Dialog Boxes in JavaScript
References.............................................................................................................................................................58

Page 1
Chapter 1
Introduction
1.1 The World Wide Web (WWW)
The World Wide Web is a collection of computers that offer access to services (web, ftp,
mail, telnet). Communication across the World Wide Web depends on the TCP/IP stack of
protocols.
These services are organized as websites; websites are built from web pages. And we can
use HTML to create webpages.
1.2 What is HTML?
 HTML is a markup language for describing web documents (web pages).
 HTML stands for Hyper Text Markup Language.
 A markup language is a set of markup tags.
 HTML documents are described by HTML tags.
 Each HTML tag describes different document content.
1.3 HTML Tags
 HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content goes here </tagname>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag(opening tag), the second tag is the end tag(closing
tag)
 The end tag is written like the start tag, but with a slash before the tag name
HTML Example
Code: Output:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph</p>
</body>
</html>
Figure 1.1

Page 2
Example Explained:
 The DOCTYPE declaration defines the document type
 The text between <html> and </html> describes the web document
 The text between <head> and </head> describes the meta data
 The text between <title> and </title> is the title of the document
 The text between <body> and </body> describes the visible page content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes paragraph
Using the description, a web browser can display a document with a heading and a paragraph.
1.4 HTML Page Structure
 Below is a visualization of an HTML page structure:
 Only the content in the body section is visible to the viewer.
 Text, images, videos, etc. will be contained in body section.
1.5 HTML Versions
 Since the early days of the web, there have been many versions of HTML:
Versions Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2012
1.6 The <!DOCTYPE> Declaration
 The <!DOCTYPE> declaration helps the browser to display a web page correctly.
 There are many different documents on the web, and a browser can only display an HTML
page correctly if it knows the HTML version and type.
Figure 1.2
Table1.1

Page 3
1.7 Common Declarations
 HTML5
<!DOCTYPE html>
 HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.8 The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings. The HTML <head>
element only contains metadata. The HTML <head> element is placed between the <html> tag
and the <body> tag.
1.9 The HTML <title> Element
The HTML <title> element is metadata. It defines the HTML document's title. It will not
be displayed in the document. However, it might be displayed in one of the browser tabs.
<title>My First HTML</title>
1.10 Paragraphs
The HTML <p> element defines a paragraph.
Example:
Code: Output:
1.11 HTML Display
You cannot be sure how HTML will be displayed. Large or small screens and resized
windows will create different results. With HTML, you cannot change the output by adding extra
spaces or extra lines in your HTML code. The browser will remove extra spaces and extra lines
when the page is displayed. Any number of spaces, and any number of new lines, counts as only
one space.
 Therefore if you need to add spaces or line breaks you have to add relevant element for
that.
i.e.: <br> for new line   for space
Figure 1.3
Figure 1.4

Page 4
Example:
Code:
Output:
1.12 The HTML <pre> Element
The HTML <pre> element defines a block of pre-formatted text, with structured spaces
and lines. To display anything, with right spacing and line-breaks, you must wrap the text in a
<pre> element:
Code:
Figure 1.5

Page 5
Output:
1.13 HTML Headings
Headings are defined with the <h1> to <h6> tags.<h1> defines the most important
heading. <h6> defines the least important heading. Use HTML headings for headings only. Don't
use headings to make text BIG or bold. Search engines use your headings to index the structure
and content of your web pages. Users skim your pages by its headings. It is important to use
headings to show the document structure.h1 headings should be main headings, followed by h2
headings, then the less important h3, and so on.
1.14 HTML Text Formatting
 Formatting elements were designed to display special types of text:
Tag Description Example
<b></b> Defines bold text bold
<em></em> Defines emphasized text emphasized
<i></i> Defines italic text italic
<small></small> Defines smaller text small
<strong></strong> Defines important text important
<sub></sub> Defines subscripted text subscript
<sup></sup> Defines superscripted text superscript
<ins></ins> Defines inserted text inserted
<del></del> Defines deleted text deleted
<mark></mark> Defines marked/highlighted text marked
<u></u> Defines underlined text underlined
Figure 1.6
Figure 1.7
Table 1.2

Page 6
Chapter 2
Styles & CSS
2.1 HTML Styling
Every HTML element has a default style (background color is white, text color is black,
text-size is 12px, etc.)Changing the default style of an HTML element, can be done with the style
attribute. We can change these default values using “<style>” tag. The HTML style attribute has
the following syntax:
style="property:value"
 The property is a CSS property. The value is a CSS value.Styling the HTML this method is
known as Inline Styling. Here are few examples.
<h1 style="color:blue">This is a heading</h1>
<p style="background-color:red">This is a paragraph.</p>
2.2 Styling HTML with CSS
 CSS stands for Cascading Style Sheets. Styling can be added to HTML elements in 3
ways:
 Inline - using a style attribute in HTML elements.
 Internal - using a <style> element in the HTML <head> section.
 External - using one or more external CSS files.
 The most common way to add styling is to keep the CSS syntax in separate CSS files
(external css) because in this way we can reuse the same stylesheet in many pages.
2.3 CSS Syntax
 CSS styling has the following syntax:
element { property:value ; property:value }
The element is an HTML element name. The property is a CSS property. The value is a CSS
value.Multiple styles are separated with semicolon.
Example: body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
2.4 Inline Styling
Inline styling uses the style attribute. Inline styling is useful for applying a unique style to a
single HTML element.
Example:
Code: Output:
Figure 2.1

Page 7
2.5 Internal Styling (Internal CSS)
An internal style sheet can be used to define a common style for all HTML elements on a
page. This technique is recommended when we are using relatively small number of pages or
each page’s styling is defers from others. Internal styling is defined in the <head> section of an
HTML page, using a <style> element:
Example:
Code:
Output:
2.6 External Styling (External CSS)
External style sheet are ideal when the style is applied to many pages. With external style
sheets, you can change the look of an entire site by changing one file. External styles are defined
in the <head> section of an HTML page, in the <link> element.
Example:
Code:
style.css (External Style file)
HTML Page
Output:
Figure 2.2
Figure 2.3

Page 8
2.7 CSS Selectors
CSS selectors allow you to select and manipulate HTML element(s).CSS selectors are
used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of
attributes and much more.
1. The element Selector
 The element selector selects elements based on the element name. You can select all
<p> elements on a page like this: (all <p> elements will be center-aligned, with a red
text color)
Example:
p { text-align: center;color: red;}
2. The id Selector
 The id selector uses the id attribute of an HTML tag to find the specific element. An
id should be unique within a page, so you should use the id selector when you want to
find a single, unique element. To find an element with a specific id, write a hash
character, followed by the id of the element. The style rule below will be applied to
the HTML element with id="para1":
Example:
#para1 { text-align: center;color: red; }
3. The class Selector
 The class selector finds elements with the specific class. The class selector uses the
HTML class attribute. To find elements with a specific class, write a period character,
followed by the name of the class. In the example below, all HTML elements with
class="center" will be center-aligned:
Example:
.center { text-align: center; color: red; }
 You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
Example:
p.center { text-align: center; color: red; }
4. Grouping Selectors
 In style sheets there are often elements with the same style. To minimize the code,
you can group selectors. To group selectors, separate each selector with a comma. In
the example below we have grouped the selectors from the code above:

Page 9
2.8 Background
CSS background properties are used to define the background effects of an element.CSS
properties used for background effects:
 background-color
 background-image
 background-repeat
 background-position
1. Background Color
 The background-color property specifies the background color of an element. The
background color of a page is defined in the body selector.
Example:
body { background-color: #b0c4de;}
 With CSS, a color is most often specified by:
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(150,150,150)"
 a color name - like "red"
Example:
2. Background Image
 The background-image property specifies an image to use as the background of an
element. By default, the image is repeated so it covers the entire element. The
background image for a page can be set like this:
Example:
body { background-image: url("paper.gif"); }
3. Background Image - Repeat Horizontally or Vertically
 By default, the background-image property repeats an image both horizontally and
vertically. Some images should be repeated only horizontally or vertically, or they will
look strange. If the image needs to be repeated only horizontally use repeat-x or if it
needs to repeat vertically use repeat-y. Use no repeat if you don’t need to repeat it at all.
Example:
body {background-image:url("gradient_bg.png");background-repeat:repeat-x;}
body {background-image:url("gradient_bg.png");background-repeat:repeat-y;}
body {background-image:url("gradient_bg.png");background-repeat:no-repeat;}
4. Background Image - Set position
 The position of the image is specified by the background-position property:
Example:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Page 10
2.9 Background - Shorthand property
As you can see from the examples above, there are many properties to consider when
dealing with backgrounds. To shorten the code, it is also possible to specify all the properties in
one single property. This is called a shorthand property. The shorthand property for background
is simply "background":
Example:
body { background: #ffffffurl("img_tree.png") no-repeat right top;}
 When using the shorthand property the order of the property values is:
 background-color
 background-image
 background-repeat
 background-position
 It does not matter if one of the property values is missing, as long as the ones that are
present are in this order.
2.10 CSS with Text
 Text of a paragraph or heading can be styled by editing CSS properties.
1. Text Color
 The color property is used to set the color of the text.
Example:
2. Text Alignment
 The text-align property is used to set the horizontal alignment of a text. Text can be
centered, or aligned to the left or right, or justified. When text-align is set to "justify",
each line is stretched so that every line has equal width, and the left and right margins
are straight (like in magazines and newspapers).
Example:
3. Text Decoration
 The text-decoration property is used to set or remove decorations from text. The text-
decoration property is mostly used to remove underlines from links for design purposes
and it can also be used to decorate text:
Example:

Page 11
4. Text Transformation
 The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the
first letter of each word.
Example:
5. Text Indentation
 The text-indent property is used to specify the indentation of the first line of a text.
Example:
p { text-indent: 50px; }
2.11 CSS Font
 CSS font properties define the font family, boldness, size, and the style of a text.
1. CSS Font Families
 In CSS, there are two types of font family names:
 generic family
A group of font families with a similar look (like "Serif" or "Monospace")
 font family
A specific font family (like "Times New Roman" or "Arial")
2. Font Family
The font family of a text is set with the font-family property. The font-family property
should hold several font names as a "fallback" system. If the browser does not support the first
font, it tries the next font. Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are available. If the name of a
font family is more than one word, it must be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:
Example:
p { font-family: "Times New Roman", Times, serif;}
Generic Family Font Family Description
Serif Times New Roman
Georgia
Serif fonts have small lines at the ends on some
characters
Sans-serif Arial
Verdana
"Sans" means without - these fonts do not have the
lines at the ends of characters
Monospace Courier New
Lucida Console
All monospace characters have the same width
Table 2.1

Page 12
3. Font Style
 The font-style property is mostly used to specify italic text. This property has three
values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example:
4. Font Size
 The font-size property sets the size of the text. Being able to manage the text size is
important in web design. However, you should not use font size adjustments to make
paragraphs look like headings, or headings look like paragraphs .If you do not specify a
font size, the default size for normal text, like paragraphs, is 16px. The font-size value
can be an absolute or relative size.
 Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
 Absolute size is useful when the physical size of the output is known
 Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
 Set Font Size with Pixels
 Setting the text size with pixels gives you full control over the text size:
Example:
 Set Font Size with Em
 To allow users to resize the text (in the browser menu), many developers use em
instead of pixels.Theem size unit is recommended by the W3C.1em is equal to the
current font size. The default text size in browsers is 16px. So, the default size of
1em is 16px.The size can be calculated from pixels to em using this
formula: pixels/16=em
Example:
 In the example above, the text size in em is the same as the previous example in pixels.
However, with the em size, it is possible to adjust the text size in all browsers.

Page 13
 Unfortunately, there is still a problem with older versions of IE. The text becomes
larger than it should when made larger, and smaller than it should when made smaller.
2.12 Use a Combination of Percent and Em
 The solution that works in all browsers is to set a default font-size in percent for the
<body> element:
Example:
 Our code now works great! It shows the same text size in all browsers, and allows all
browsers to zoom or resize the text!
2.13 Other CSS Font Properties
Property Description
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font
Table 2.2

Page 14
Chapter 3
HTML Links
3.1 HTML Links - Hyperlinks
Links are found in nearly all web pages. Links allow users to click their way from page to
page. HTML links are hyperlinks. A hyperlink is an element, a text, or an image that you can
click on, and jump to another document.
3.2 HTML Links - Syntax
 In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example:
<a href="http://www.slana.lk">Visit SLANA website</a>
 The href attribute specifies the destination address (http://www.slana.lk)
 The link text is the visible part (Visit SLANA website).
 Clicking on the link text, will send you to the specified address.
 The link text does not have to be text. It can be an HTML image or any other HTML
element.
3.3 Local Links
 The example above used an absolute URL (A full web address). A local link (link to the
same web site) is specified with a relative URL (without http://www....).
Example:
<a href="html_images.html">HTML Images</a>
3.4 HTML Links - The target attribute
 The target attribute specifies where to open the linked document. This example will open
the linked document in a new browser window or in a new tab:
Example:
<a href="http://www.slana.lk" target="_blank">Visit SLANA website</a>
Target Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was
clicked(this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame
Table 3.1

Page 15
 If your webpage is locked in a frame, you can use target="_top" to break out of the frame:
Example:
<a href="http://www.slana.lk" target="_top">Visit SLANA website</a>
3.5 HTML Links - The id attribute
 The id attribute can be used to create bookmarks inside HTML documents. Bookmarks are
not displayed in any special way. They are invisible to the reader.
Example:
Add an id attribute to any <a> element:
<a id="tips">Useful Tips Section</a>
Then create a link to the <a> element (Useful Tips Section):
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the <a> element (Useful Tips Section) from another page:
<a href="http://www.slana.lkindex.htm#tips">Visit the Useful Tips
Section</a>
3.6 Styling Links
 Links can be styled with any CSS property (e.g. color, font-family, background, etc.).In
addition, links can be styled differently depending on what state they are in.The four links
states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked.
 When you move the mouse cursor over a link, two things will normally happen:
 The mouse arrow will turn into a little hand
 The color of the link element will change
 By default, links will appear as this in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
 You can change the defaults, using styles:
Example:
 When setting the style for several link states, there are some order rules:
1. a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover

Page 16
3.7 Text Decoration
 The text-decoration property is mostly used to remove underlines from links:
Example:
3.8 Background Color
 The background-color property specifies the background color for links. You can set either
a color or an image to the background.
Example:

Page 17
Chapter 4
Images
4.1 HTML Images Syntax
In HTML, images are defined with the <img> tag.The<img> tag is empty; it contains
attributes only, and does not have a closing tag.The src attribute defines the URL (web address)
of the image:
<img src="url" alt="some_text">
4.2 The alt Attribute
The alt attribute specifies an alternate text for the image, if it cannot be displayed. The
value of the alt attribute should describe the image in words. The alt attribute is required. A web
page will not validate correctly without it. Screen readers the alt attribute can be read by Screen
readers.
Screen readers are software programs that can read what is displayed on a screen. Used
on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or braille
output. Screen readers are used by people who are blind, visually impaired, or learning disabled.
Example
<img src="html5.gif" alt="The official HTML5 Icon">
4.3 Image Size - Width and Height
You can use the style attribute to specify the width and height of an image. The values
are specified in pixels (use px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
Alternatively, you can use width and height attributes. The values are specified in pixels
(without px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
We suggest you use the style attribute. It prevents styles sheets from changing the default
size of images:

Page 18
4.4 Images in another Folder
If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common on the web, to store images in a sub-folder, and refer to the folder in the
image name. If you want to access parent folder you have to use “/.. “
Example
<img src="/images/html5.gif" alt="HTML5Icon" style="width:128px;
height:128px">
<img src="../html5.gif" alt="HTML5Icon" style="width:128px;
height:128px">
 If a browser cannot find an image, it will display a broken link icon with the text in the alt
attribute:
4.5 Images on another Server
Some web sites store their images on image servers. Actually, you can access images
from any web address in the world:
Example
<img src="http://slana.lk/web/images/events/1.jpg">
4.6 Using an Image as a Link
It is common to use images as links. We have added “border:0” to prevent IE9 (and
earlier) from displaying a border around the image.
Example
Figure 4.1
Figure 4.2

Page 19
4.7 Image Maps
 For an image, you can create an image map, with clickable areas:
Example:
4.8 Image Floating
 You can let an image float to the left or right of a paragraph:
Example:

Page 20
Chapter 5
HTML Tables
Example explained:
 Tables are defined with the <table> tag.
 Tables are divided into table rows with the <tr> tag.
 Table rows are divided into table data with the <td> tag.
 A table row can also be divided into table headings with the <th> tag.
 If you do not specify a border for the table, it will be displayed without borders. A border
can be added using the border attribute:
5.2 HTML Table Headings
 Table headings are defined with the <th> tag. By default, all major browsers display table
headings as bold and centered. If we want to left align it we have to specify it in CSS.
Example
th { text-align: left; }
5.1 Defining HTML Table
Figure 5.1

Page 21
5.3 An HTML Table with Border Spacing
Border spacing specifies the space between the cells. To set the border spacing for a table,
use the CSS border-spacing property:
Example
table { border-spacing: 5px; }
5.4 Rowsapan and Colspan of table
 To make a cell span more than one row, use the rowspan attribute.
 To make a cell span more than one column, use the colspan attribute.
Example
5.5 An HTML Table with a Caption
To add a caption to a table, use the <caption> tag. The <caption> tag must be inserted
immediately after the <table> tag to display it above the table.
Example
<caption>GreatScientists</caption>
5.6 Table Borders
To specify table borders in CSS, use the border property. The example below specifies a
black border for table, th, and td elements:
Example
table, th, td { border: 1px solid black; }
Notice that the table in the example above has double borders. This is because both the
table and the th/td elements have separate borders. To display a single border for the table, use
the border-collapse property.
Figure 5.2

Page 22
5.7 Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single
border or separated. If the table has collapsed borders, border-spacing has no effect.
Example
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
5.8 Table Width and Height
Width and height of a table and table elements (th, td, tr, caption) are defined by the width
and height properties. The example below sets the width of the table to 100%, and the height of
the th elements to 50px.
Example
table { width: 100%; }
th { height: 50px; }
5.9 Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties. The text-
align property sets the horizontal alignment, like left, right, or center. The vertical-align property
sets the vertical alignment, like top, bottom, or middle.
Example
5.10 Table Padding
To control the space between the border and content in a table, use the padding property
on td and th elements:
Example
td { padding: 15px; }
5.11 Table Color
The example below specifies the color of the borders, and the text and background color
of th elements:
Example

Page 23
5.12 Different Styles for Different Tables
Most of the examples above use a style attribute (width="100%") to define the width of
each table. This makes it easy to define different widths for different tables. The styles in the
<head> section, however, define a style for all tables in a page. To define a special style for a
special table, add an id attribute to the table.

Page 24
Chapter 6
HTML Lists
6.1.HTML Lists
 HTML can have Unordered Lists, Ordered Lists, or Description Lists
Example:
I. Unordered HTML Lists
 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list
items will be marked with bullets (small black circles).
Unordered List:
Unordered HTML Lists - The Style Attribute
 A style attribute can be added to an unordered list, to define the style of the marker.
Using a type attribute <ul type="disc">, instead of <ul style="list-style-type:disc">, also
works. But in HTML5, the type attribute is not valid in unordered lists, only in ordered
list.
Example:
Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
Table 6.1
Figure 6.1
Figure 6.2

Page 25
Different List Item Markers
 The type of list item marker is specified with the list-style-type property:
Example:
ul.a { list-style-type: circle; }
ul.b { list-style-type: square; }
An Image as the List Item Marker
 To specify an image as the list item marker, use the list-style-image property:
Example:
ul { list-style-image: url('sqpurple.gif'); }
 The example above does not display equally in all browsers. IE and Opera will display
the image-marker a little bit higher than Firefox, Chrome, and Safari. If you want the
image-marker to be placed equally in all browsers, a cross browser solution is explained
below.
Cross browser Solution
 The following example displays the image-marker equally in all browsers:
Example:
Example explained:
 For ul:
 Set the list-style-type to none to remove the list item marker
 Set both padding and margin to 0px (for cross-browser compatibility)
 For all li in ul:
 Set the URL of the image, and show it only once (no-repeat)
 Position the image where you want it (left 0px and down 5px)
 Position the text in the list with padding-left
List - Shorthand property
 It is also possible to specify all the list properties in one, single property. This is called a
shorthand property. The shorthand property used for lists, is the list-style property:
Example:
ul { list-style: square url("sqpurple.gif"); }
When using the shorthand property, the order of the values is:
 list-style-type
 list-style-position (for a description, see the CSS properties table below)
 list-style-image

Page 26
It does not matter if one of the values above is missing, as long as the rest are in the specified
order.
Ordered HTML Lists
 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list
items will be marked with numbers.
Ordered List:
Ordered HTML Lists - The Type Attribute
 A type attribute can be added to an ordered list, to define the type of the marker:
Example:
HTML Description Lists
 A description list is a list of terms, with a description of each term. The <dl> tag defines
a description list. The <dt> tag defines the term (name), and the <dd> tag defines the
data (description).
Description List:
Nested HTML Lists
 List can be nested (lists inside lists).List items can contain new list, and other HTML
elements, like images and links, etc.
Style Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Table 6.2
Figure 6.3
Figure 6.4
Figure 6.5

Page 27
Horizontal Lists
 HTML lists can be styled in many different ways with CSS. One popular way, is to style
a list to display horizontally:
Horizontal List:
 With a little extra style, you can make it look like a menu:
Figure 6.8
Figure 6.6
Figure 6.7

Page 28
Chapter 7
HTML Layouts
7.1 HTML Block Elements and Inline Elements
 Most HTML elements are defined as block level elements or inline elements. Block level
elements normally start (and end) with a new line, when displayed in a browser.
Example:
<h1>, <p>, <ul>, <table>
 Inline elements are normally displayed without line breaks.
Example:
<b>, <td>, <a>, <img>
7.2 The HTML <div> Element
 The HTML <div> element is a block level element that can be used as a container for
other HTML elements. The<div> element has no special meaning. It has no required
attributes, but style and class are common. Because it is a block level element, the
browser will display line breaks before and after it. When used together with CSS, the
<div> element can be used to style blocks of content.
7.3 The HTML <span> Element
 The HTML <span> element is an inline element that can be used as a container for
text.The<span> element has no special meaning. It has no required attributes,
but style and class are common. Unlike<div>, which is formatted with line breaks, the
<span> element does not have any automatic formatting. When used together with CSS,
the <span> element can be used to style parts of the text:
Example:
<h1>My <span style="color:red">Important</span>Heading</h1>
7.4 Classing HTML Elements
 Classing HTML elements, makes it possible to define CSS styles for classes of elements.
Equal styles for equal classes or different styles for different classes.
 The HTML <div> element is a block level element. It can be used as a container for other
HTML elements. Classing<div> elements, makes it possible to define equal styles for
equal <div> elements:
Figure 7.1

Page 29
Example:
 The HTML <span> element is an inline element that can be used as a container for text.
Classing<span> elements makes it possible to design equal styles for equal <span>
elements.
Example:
7.5 HTML Layouts
 Websites often display content in multiple columns (like a magazine or newspaper).
 The <div> element is often used as a layout tool, because it can easily be positioned with
CSS. This example uses 4 <div> elements to create a multiple column layout.

Page 30
Figure 7.2

Page 31
7.6 Website Layout Using HTML5
 HTML5 offers new semantic elements that define different parts of a web page. Because
of this predefined element we don’t need to define <div> tags to most frequently using
areas.
 This example uses <header>, <nav>, <section>, and <footer> to recreate previous
example
7.7 HTML Layout Using Tables
 The <table> element was not designed to be a layout tool. The purpose of the <table>
element is to display tabular data. Layout can be achieved using the <table> element,
because table elements can be styled with CSS.
header Defines a header for a document or a section
nav Defines a container for navigation links
section Defines a section in a document
article Defines an independent self-contained article
aside Defines content aside from the content (like a
sidebar)
footer Defines a footer for a document or a section
details Defines additional details
summary Defines a heading for the details element
Figure 7.3
Table 7.1

Page 32
Chapter 8
HTML Forms
8.1. The <form> Element
 HTML forms are used to collect user input. The <form> element defines an HTML form:
Example:
<form>
.
form elements
.
</form>
HTML forms contain form elements.
 Form elements are different types of input elements, checkboxes, radio buttons, submit
buttons, and more.
8.2. The <input> Element
 The <input> element is the most important form element. The<input> element has many
variations, depending on the type attribute. Here are the types used in this chapter.
Type Description
text Defines normal text input
password Defines password text input(content type won’t be desplayed)
radio Defines radio button input (for selecting one of many choices)
checkbox Defines checkbox input (for selecting one or more of many choices)
submit Defines a submit button (for submitting the form)
button Defines a button
file Defines file input to upload one or more files
1. Input Type: text
 <input type="text"> defines a one-line input field for text input:
Example:
2. Input Type: password
 <input type="password"> defines a password field:
Figure 8.1
Table 8.1

Page 33
Example:
3. Input Type: submit
 <input type="submit"> defines a button for submitting form input to a form-
handler. The form-handler is typically a server page with a script for processing input
data. The form-handler is specified in the form's action attribute. With the submit button
you can also add a button to clear all the input fields using <input type=”reset”>tag.
Example:
4. Input Type: radio
 <input type="radio"> defines a radio button. Radio buttons let a user select ONLY
ONE of a limited number of choices:
Example:
5. Input Type: checkbox
 <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or
MORE options of a limited number of choices.
Example:
Figure 8.2
Figure 8.3
Figure 8.4
Figure 8.5

Page 34
6. Input Type: button
 <input type="button”> defines a button.
Example:
 Its behavior is identical to the behavior of form element <button>
7. Input Type: file
 <input type="file”> defines a file element: with this you can upload a file to server.
Example:
8.3. HTML5 Input Types
 HTML5 added several new input types. Some of these tags won’t be supported in old
versions of browsers they will behave as input type text.
Input type Description
color Is used for input fields that should contain a color.
date Is used for input fields that should contain a date.
datetime Allows the user to select a date and time (with time zone).
datetime-local Allows the user to select a date and time (no time zone).
email Is used for input fields that should contain an e-mail address.
month Allows the user to select a month and year.
number Is used for input fields that should contain a numeric value
range Is used for input fields that should contain a value within a range.
search Is used for search fields (a search field behaves like a regular text field).
tel Is used for input fields that should contain a telephone number (supported
only in Safari 8.)
time Allows the user to select a time (no time zone).
url Is used for input fields that should contain a URL address.
week Allows the user to select a week and year.
Figure 8.6
Figure 8.7
Table 8.2

Page 35
Input Restrictions
 Here is a list of some common input restrictions (some are new in HTML5):
Attribute Description after HTML5
disabled Specifies that an input field should be disabled No
max Specifies the maximum value for an input field Yes
maxlength Specifies the maximum number of character for an input field No
min Specifies the minimum value for an input field Yes
pattern Specifies a regular expression to check the input value against Yes
readonly Specifies that an input field is read only (cannot be changed) No
required Specifies that an input field is required (must be filled out) Yes
size Specifies the width (in characters) of an input field No
step Specifies the legal number intervals for an input field Yes
value Specifies the default value for an input field No
8.4. HTML Form Elements
 The most important form element is the <input> element. The<input> element can vary
in many ways, depending on the type attribute.
1. The <select> Element (Drop-Down List)
 The <select> element defines a drop-down list:
Example:
 The <option> elements define the options to select. The list will normally show the first
item as selected. You can add a selected attribute to define a predefined option.
Example:
2. The <textarea> Element
 The <textarea> element defines a multi-line input field (a text area):
Example:
Figure 8.8
Figure 8.9
Table 8.3

Page 36
8.5. HTML5 Form Elements
 HTML5 added the following form elements:
 <datalist>
 <keygen>
 <output>
 By default, browsers do not display unknown elements. New elements will not destroy
your page.
8.6. HTML5 <datalist> Element
 The <datalist> element specifies a list of pre-defined options for an <input>element.
Users will see a drop-down list of pre-defined options as they input data. The list attribute
of the <input> element, must refer to the id attribute of the <datalist> element.
Example:
An <input> element with pre-defined values in a <datalist>:
8.7. Iframes
 An iframe is used to display a web page within a web page.
 The syntax for adding an iframe is:
<iframe src="URL"></iframe>
 The src attribute specifies the URL (web address) of the iframe page.
 Use the height and width attributes to specify the size.
 The attribute values are specified in pixels by default, but they can also be in percent (like
"80%").
Example:
Scroll bar
IFrame
Figure 8.10
Figure 8.11

Page 37
8.8. Colors
 Colors are displayed combining RED, GREEN, and BLUE light.
 The combination of Red, Green and Blue values from 0 to 255 gives a total of more than
16 million different colors to play with (28
x 28
x 28
= 224
≈ 16 million).
 Most modern monitors are capable of displaying at least 16384 different colors.
 When computers only supported 256 different colors, a list of 216 "Web Safe Colors"
was suggested as a Web standard, reserving 40 fixed system colors.
 This 216 cross-browser color palette was created to ensure that all computers would
display colors correctly.
Web Safe Colors:
Figure 8.12

Page 38
8.9. Symbols
 Many mathematical, technical, and currency symbols, are not present on a normal
keyboard.
 To add these symbols to an HTML page, you can use an HTML entity name.
 If no entity name exists, you can use an entity number; a decimal (or hexadecimal)
reference.
Mathematical Symbols:
Char Number Entity Description
∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
∉ ∉ ∉ NOT AN ELEMENT OF
∋ ∋ &ni; CONTAINS AS MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
Other Symbols:
Example:
Char Number Entity Description
© © © COPYRIGHT SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← ← LEFTWARDS ARROW
↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
↓ ↓ ↓ DOWNWARDS ARROW
♠ ♠ &spades; BLACK SPADE SUIT
♣ ♣ &clubs; BLACK CLUB SUIT
♥ ♥ &hearts; BLACK HEART SUIT
♦ ♦ &diams; BLACK DIAMOND SUIT
Figure 8.12
Table 8.4
Table 8.5

Page 39
Chapter 9
HTML5
9.1. HTML5 Introduction
HTML5 is the fifth revision and newest version of the HTML standard. It offers new
features that provide not only rich media support, but also enhance support for creating web
applications that can interact with the user, his/her local data, and servers, more easily and
effectively than was possible previously.
The DOCTYPE declaration for HTML5:
The character encoding (charset) declaration:
Sample Code:
9.2. HTML5 Supports
 HTML5 is supported in all modern browsers.
 In addition, all browsers, old and new, automatically handle unrecognized elements as
inline elements.
9.3. HTML5 Elements
 Many web sites contain HTML code like: <div id="nav"><div class="header"><div
id="footer">to indicate navigation, header, and footer.
 HTML5 offers new semantic elements to define different parts of a web page:
 <article>
 <aside>
 <details>
 <section>
 <figcaption>
 <figure>
 <footer>
 <nav>
 <header>
 <main>
 <time>
 <summary>

Page 40
Design view of HTML5 page:
Example:
Figure 9.1

Page 41
Output:
9.4. HTML5 Migration
Figure 9.2
Figure 9.3

Page 42
Chapter 10
HTML Media
10.1. Introduction
 Multimedia comes in many different formats. It can be almost anything you can hear or
see.
Examples: Pictures, music, sound, videos, records, films, animations, and more.
 Web pages often contain multimedia elements of different types and formats.
1. Multimedia Formats
 Multimedia elements (like sounds or videos) are stored in media files.
 The most common way to discover the type of a file, is to look at the file extension.
When a browser sees the file extension .htm or .html, it will treat the file as an HTML
file. The .xml extension indicates an XML file, and the .css extension indicates a style
sheet file. Pictures are recognized by extensions like .gif, .png and .jpg.
 Multimedia files also have their own formats and different extensions like: .swf, .wav,
.mp3, .mp4, .mpg, .wmv, and .avi.
2. Common Video Formats
 MP4 is the new and upcoming format for internet video.
 MP4 is recommended by YouTube.
 MP4 is supported by Flash Players
 MP4 is supported by HTML5.
Format File Description
MPEG .mpg
.mpeg
MPEG. Developed by the Moving Pictures Expert Group. The first
popular video format on the web. Used to be supported by all browsers,
but it is not supported in HTML5 (See MP4).
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly
used in video cameras and TV hardware. Plays well on Windows
computers, but not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly
used in video cameras and TV hardware. Plays well on Windows
computers, but not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras
and TV hardware. Plays well on Apple computers, but not in web
browsers. (See MP4)
RealVideo .rm
.ram
RealVideo. Developed by Real Media to allow video streaming with
low bandwidths. It is still used for online video and Internet TV, but
does not play in web browsers.
Flash .swf
.flv
Flash. Developed by Macromedia. Often requires an extra component
(plug-in) to play in web browsers.
Ogg .ogg TheoraOgg. Developed by the Xiph.Org Foundation. Supported by
HTML5.

Page 43
WebM .webm WebM Developed by the web giants, Mozilla, Opera, Adobe, and
Google. Supported by HTML5.
MPEG-4
or MP4
.mp4 MP4. Developed by the Moving Pictures Expert Group. Based on
QuickTime. Commonly used in newer video cameras and TV hardware.
Supported by all HTML5 browsers. Recommended by YouTube.
3. Sound Formats
 MP3 is the newest format for compressed recorded music. The term MP3 has become
synonymous with digital music.
 If your website is about recorded music, MP3 is the choice.
10.2. HTML5 Media Elements
1. HTML5 Audio
 Before HTML5, there was no standard for playing audio files on a web page.
 Before HTML5, audio files could only be played with a plug-in (like flash).
 The HTML5 <audio> element specifies a standard way to embed audio in a web page.
 The controls attribute adds audio controls, like play, pause, and volume.
 Text between the <audio> and </audio> tags will display in browsers that do not
support the <audio> element.
 Multiple <source> elements can link to different audio files. The browser will use the
first recognized format.
Format File Description
MIDI .mid
.midi
MIDI (Musical Instrument Digital Interface). Main format for all
electronic music devices like synthesizers and PC sound cards. MIDI files
do not contain sound, but digital notes that can be played by electronics.
Plays well on all computers and music hardware, but not in web browsers.
RealAudio .rm
.ram
RealAudio. Developed by Real Media to allow streaming of audio with
low bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Commonly
used in music players. Plays well on Windows computers, but not in web
browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default
format for iTunes. Plays well on Apple computers, but not in web
browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML5.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most
popular format for music players. Combines good compression (small
files) with high quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. MP4 video is the
upcoming video format on the internet. This leads to automatic support
for MP4 audio by all browsers.
Table 10.1
Table 10.2

Page 44
 HTML5 Audio - Media Types
 To play an audio file in HTML, use the <audio> element:
2. HTML5 Video
 To show a video in HTML, use the <video> element:
 HTML5Video - Media Types
File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
Enable Player Controls
Play source when page loads
File name to play
File type
Table 10.3
Table 10.4

Page 45
Chapter 11
JavaScript
11.1. Introduction
 JavaScript is the scripting language of the Web.
 JavaScript is used in millions of Web pages to improve the design, validate forms, detect
browsers, create cookies, and much more.
 JavaScript is the most popular scripting language on the internet.
1. What is JavaScript?
 JavaScript was designed to add interactivity to HTML pages.
 JavaScript is a scripting language.
 A scripting language is a lightweight programming language.
 A JavaScript consists of lines of executable computer code.
 A JavaScript is usually embedded directly into HTML pages.
 JavaScript is an interpreted language. (This means that scripts execute without
preliminary compilation)
 Everyone can use JavaScript without purchasing a license.
2. What can a JavaScript Do?
 JavaScript gives HTML designers a programming tool.
 HTML authors are normally not programmers, but JavaScript is a scripting
language with a very simple syntax. Almost anyone can put small "snippets" of code into
their HTML pages.
3. JavaScript Syntax
 To insert a JavaScript into an HTML page, we use the <script> tag. Inside the
<script> tag we use the type attribute to define the scripting language.
 So, the <script type="text/javascript"> and </script> tells where
theJavaScript starts and ends:
Syntax:
The two forward slashes at the
end of comment line (//) is the
JavaScript comment symbol.
This prevents JavaScript from
executing

Page 46
Example Code (Print Text in the web page):
document.write:
 It is a standard JavaScript command for writing output to a page. By entering the
document.write command between the <script> and </script> tags, the
browser will recognize it as a JavaScript command and execute the code line. In this
case the browser will write “Hello, Welcome to JavaScript!!!!!!!”to the
page.
4. Methods to insert JavaScript to HTML page
I. Head section
II. Body section
III. External script
I. Head section
 Scripts that contain functions go in the head section of the document. Then we can be
sure that the script is loaded before the function is called. JavaScript in the head section
will be executed when called…
Example Code:
II. Body section
 Execute a script that is placed in the body section. JavaScript in the body section will be
executed WHILE the page loads.
Example Code:

Page 47
 Scripts in both the body and the head section: You can place any number of
scripts in your document, so you can have scripts in both the body and the head
section.
III.External script
 Using an External JavaScript, You can write a JavaScript in an external file as we did
with the CSS. Save the external JavaScript file with.js file extension.
 The external script cannot contain the <script> tag. To use the external script, point
tothe.js file in the "src" attribute of the <script> tag.
Example Code:
11.2. Variables in JavaScript
 A variable is a "container" for information you want to store. A variable's value can
change during the script. You can refer to a variable by name to see its value or tochange
its value.
1. Rules for variable names:
 Variable names are case sensitive.
 They must begin with a letter or the underscore character.
 You can declare JavaScript variables with the “var” keyword.
Example:
 After the declaration shown above, the variables are empty (they have no values
yet). You can also assign values to the variables when you declare them as below.
Example
 After the execution of the statements above, the variable myFirstNumber will hold
HTML Page Code
ExternalScript.js
varmyFirstNumber;
var _variableString;
varmyFirstNumber = 10;
var _variableString = “ABC”;

Page 48
the value 10, and _variableString will hold the value “ABC”. Example:
11.3. Conditional Statements with JavaScript
 Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
 if statement
 Use this statement if you want to execute some code only if a specified condition is
true.
 if...else statement
 Use this statement if you want to execute some code if the conditions true and
another code if the condition is false.
 if...else if....else statement
 Use this statement if you want to select one of many blocks of code to be executed.
 switch statement
 Use this statement if you want to select one of many blocks of code to be executed.
1. If Statement
 You should use if statement if you want to execute some code only if a specified
condition is true.
Example:
Figure 11.1

Page 49
2. If...else Statement
 If you want to execute some code if a condition is true and another code if the condition
is not true, use if...else statement.
Example:
3. If...else if...else Statement
 You should use if....else if...else statement if you want to select one of many sets of lines
to execute.
Example:

Page 50
4. Switch Statement
 You should use the switch statement if you want to select one of many blocks of code to
be executed.
Example:
11.4. Operators in JavaScript
1. Arithmetic Operators
 Arithmetic operators are used to perform arithmetic between variables and/or values
Operator Description Example Result
+ Addition
x=5,y=2
x+y
7
- Subtraction
x=9,y=2
x-y
7
* Multiplication
x=10,y=9
x*y
90
/ Division
x=100,y=2
x/y
50
% Modulus (Remainder)
x=21,y=6
x%y
3
++ Increment
x=12
x++
13
-- Decrement
x=12
x--
11
Table 11.1

Page 51
2. Assignment Operators
 Assignment operators are used to assign values to JavaScript variables.
Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
3. Comparison Operators
 Comparison operators are used in logical statements to determine equality or difference
between variables or values.
 Assume x=5
4. Logical Operators
 Logical operators are used to determine the logic between variables or values.
 Assume x=6 and y=3
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true
11.5. Loops in JavaScript
 Very often when you write code, you want the same block of code to run over and over again
in a row. Instead of adding several almost equal lines in a script we can use loops to perform
a task like this.
 In JavaScript there are four different kinds of loops:
 for - loops through a block of code a specified number of times
 for/in - for/in statement loops through the properties of an object.
 while - loops through a block of code while a specified condition is true.
 do/while - also loops through a block of code while a specified condition is true.
Operator Description Comparing Result
= = equal to x == 8 false
x == 5 true
= = = equal value and equal type
x === "5" false
x === 5 true
!= not equal x != 8 true
!= = not equal value or not equal type
x !== "5" true
x !== 5 false
> greater than x > 8 false
< less than x < 8 true
>= greater than or equal to x >= 8 false
<= less than or equal to x <= 8 true
Table 11.2
Table 11.3
Table 11.4

Page 52
1. The For Loop
 The for loop is often the tool you will use when you want to create a loop.
 The for loop has the following syntax:
Execution of loop:
I. Statement 1 is executed before the loop (the code block) starts.
II. Statement 2 defines the condition for running the loop (the code block).
III. Statement 3 is executed each time after the loop (the code block) has been executed.
Example:
2. The For/In Loop
 The JavaScript for/in statement loops through the properties of an object.
Example:
3. The While Loop
 The while loop loops through a block of code as long as a specified condition is true.
for (statement 1; statement 2; statement 3)
{
//code block to be executed
}
Figure 11.3
Figure 11.2

Page 53
Syntax:
Example:
4. The Do/While Loop
 The do/while loop is a variant of the while loop. This loop will execute the code block
once, before checking if the condition is true, then it will repeat the loop as long as the
condition is true.
Syntax:
Example:
while (condition)
{
}
do {
} while (condition);
Figure 11.4
Figure 11.5

Page 54
11.6. The Break Statement
 The break statement can also be used to jump out of a loop.
 The break statement breaks the loop and continues executing the code after the loop (if
any)
Example:
11.7. The Continue Statement
 The continue statement breaks one iteration (in the loop), if a specified condition occurs,
and continues with the next iteration in the loop.
Example:
11.8. Functions in JavaScript
 A JavaScript function is a block of code designed to perform a particular task.
 A JavaScript function is executed when "something" invokes it (calls it).
Example for creating function:
functionmyFunction(p1, p2)
{
// Content goes here
}
Use of “function” keyword
Figure 11.6
Figure 11.7

Page 55
Example:
11.9. User Interaction through Dialog Boxes in JavaScript
 JavaScript provides several pre-defined pop-up dialog boxes
 These can be used to interact with users.
 Three types of dialog boxes
 Alert Dialog Box
 Confirm Dialog Box
 PromptDialogBox
1. Alert Dialog Box
 An alert box is often used if you want to make sure information comes through to the
user. When an alert box pops up, the user will have to click "OK" to proceed.
Example:
2. Confirm Dialog Box
 A confirm box is often used if you want the user to verify or accept something. When a
confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If
the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns
false.
Figure 11.8
Figure 11.9

Page 56
Example:
3. Prompt Dialog Box
 A prompt box is often used if you want the user to input a value before entering
a page. When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns
the input value. If the user clicks "Cancel" the box returns null.
Example:
Figure 11.10
Figure 11.11

Page 57
Get Inputs with JavaScript
 Use getElementById() method to access the specified object id in JavaScript.
 The innerHTML property sets or returns the HTML content (inner HTML) of an element.
 onClick property of button - Execute a JavaScript when a button is clicked.
Example:
Figure 11.12

Page 58
References
W3 Schools for HTML(1999). [ONLINE] Available at:
http://www.w3schools.com/html/. [Last Accessed 2015 January 02].
W3 Schools for CSS(1999). [ONLINE] Available at:
http://www.w3schools.com/css/. [Last Accessed 2015 January 06].
W3 Schools for JavaScript (1999). [ONLINE] Available at:
http://www.w3schools.com/js/. [Last Accessed 2015 January 12].
Stack Exchange. [ONLINE] Available at: http://stackoverflow.com/.
[Last Accessed 2015 January 23].
Tutorials Point. [ONLINE] Available at: http://www.tutorialspoint.com/.
[Last Accessed 2015 January 15].

4. HTML Guide - To Print

More Related Content

What's hot

Viewers also liked

Similar to 4. HTML Guide - To Print

4. HTML Guide - To Print