0% found this document useful (0 votes)

22 views270 pages

HTML Css Main File

The document provides an overview of HTML basics, including its structure, elements, and common tags. It discusses two-tier and three-tier architectures in web technology, highlighting their advantages and disadvantages. Additionally, it covers the importance of the <!DOCTYPE> declaration, the <head> section, and various HTML tags for creating web pages.

Uploaded by

karanlodhi0552

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

22 views270 pages

HTML Css Main File

Uploaded by

karanlodhi0552

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 270

HTML

Basics
HTML, Text, Images, Tables

Dr. Ankur Rai

GLA
Universit
www.gla.ac.i
n y,
W3C
 The World Wide Web Consortium is
the main international standards
organization for the World Wide
Web. Founded in 1994 and led by
Tim Berners-Lee, the consortium is
made up of member organizations
that maintain full-time staff
working together in the
development of standards for the
World Wide Web.

2
Two-tier and three-tier
architectures
Two-tier and three-tier architectures
are two common design patterns
used in web technology to structure
and organize the components of an
application. These architectures are
used to separate different parts of
the application into distinct layers,
promoting modularity, scalability,
and maintainability.

3
**Two-Tier
Architecture:**
Also known as the "Client-Server"
architecture, the two-tier architecture
consists of two main layers:
1. **Client Layer (Presentation Layer):** This layer is
responsible for the user interface and presentation logic.
It handles user interactions and displays information to
the user. The client layer communicates directly with the
server layer.

2. Server Layer (Data Layer): The server layer is

responsible for processing requests from the client and
managing the application's data and business logic. It 4
Advantages of Two-Tier
Architecture:
Simplicity: It's a straightforward
architecture with only two layers.

- Faster Communication:
Communication between client and
server is direct and usually faster.

- Suitable for Small Applications: Two-

tier architecture works well for small
applications with limited complexity.

5
Disadvantages of Two-Tier
Architecture:
Limited Scalability: As the application
grows, the client-server
communication can become a
bottleneck.

- Lack of Modularity: Business logic

and data access code are often mixed
in the server layer.

- Limited Reusability: Code reusability

can be a challenge due to tightly
coupled components. 6
**Three-Tier
Architecture:**
The three-tier architecture adds an extra layer
to the two-tier model, resulting in three main
layers:

1. Presentation Layer (Client): This layer is

responsible for the user interface and user
interactions, just like in the two-tier
architecture.

2. Application Layer (Middle Tier): The

application layer, also known as the middle tier,
contains the business logic and processes user
requests. It communicates with both the
7
Advantages of Three-
Tier Architecture:
 Modularity: Business logic is
separated from presentation and
data layers, promoting code
reusability and maintainability.

 Scalability:
Each layer can be
scaled independently, which helps
handle increased load.

 Better Security: Business logic and

8
Disadvantages of
Three-Tier Architecture:
 Complexity: Adding an additional layer
can increase the complexity of the
application.

 Communication Overhead:
Communication between layers may
introduce some overhead compared to
the direct communication in two-tier
architecture.

9
Table of Contents
1. Introduction to HTML
 How the Web Works?
 What is a Web Page?
 My First HTML Page
 Basic Tags: Hyperlinks, Images,
Formatting
 Headings and Paragraphs
2. HTML in Details
 The <!DOCTYPE> Declaration
 The <head> Section: Title, Meta, 10
Table of Contents (2)
2. HTML in Details
 The <body> Section
 Text Styling and Formatting Tags
 Hyperlinks: <a>, Hyperlinks and
Sections
 Images: <img>
 Lists: <ol>, <ul> and <dl>
3. The <div> and <span> elements
4. HTML Tables
11
How the Web Works?
 WWW use classical client / server
architecture
 HTTP is text-based request-
response protocol
HTTP
Page
request
HTTP
Server
response

Server running
Client running
Web Server
a Web
Software (IIS,
Browser
Apache, etc.) 12
What is a Web Page?
 Web pages are text files containing
HTML
 HTML – Hyper Text Markup Language
 A notation for describing
 document structure (semantic
markup)
 formatting (presentation markup)
 Looks (looked?) like:
 A Microsoft Word document
 13
Creating HTML Pages
 An HTML file must have an .htm
or .html file extension
 HTML files can be created with text
editors:
 NotePad, NotePad ++, PSPad
 Or HTML editors (WYSIWYG
Editors):
 Microsoft FrontPage
 Macromedia Dreamweaver
 Netscape Composer
14
HTML Basics
Text, Images, Tables,
Forms
HTML Structure
 HTML is comprised of “elements” and
“tags”
 Begins with <html> and ends with
</html>
<html> <head></head> <body></body> </html>
 Elements (tags) are nested one inside
another:
<img src="logo.jpg" alt="logo" />

 Tags have attributes:

 HTML describes structure using two

16
HTML Code Formatting
 The HTML source code should be
formatted to increase readability and
facilitate debugging.
 Every block element should start on a
new line.
 Every nested (block) element should
be indented.
 Browsers ignore multiple whitespaces
in the page source, so formatting is
harmless.
 For performance reasons,
17
First HTML Page
test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

18
First HTML Page: Tags

<!DOCTYPE HTML>
<html>
Opening
tag
<head>
<title>My First HTML Page</title>
</head>
<body> Closing
<p>This is some text...</p> tag
</body>
</html>

An HTML element consists of an opening tag, a

closing tag and the content inside.
19
First HTML Page:
Header

<!DOCTYPE HTML>
HTML
header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

20
First HTML Page: Body

<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML
body
21
Some Simple Tags
 Hyperlink Tags
<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web
site</a>
 Image Tags
<img src="logo.gif" alt="logo" />
 Text formatting tags
This text is <em>emphasized.</em>
<br />new line<br />
This one is <strong>more
emphasized.</strong> 22
Some Simple Tags –
Example
some-tags.html
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>

23
Some Simple Tags –
Example (2)
some-tags.html
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>

24
Tags Attributes
 Tags can have attributes
 Attributes specify properties and
behavior Attribute alt with value
 Example: "logo"
<img src="logo.gif" alt="logo" />

 Few attributes can apply to every

element:
 id, style, class, title
 The id is unique in the document
 Content of title attribute is
displayed as hint when the element 25
Headings and
Paragraphs
 Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

 Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

 Sections: div and span

<div style="background: skyblue;">
This is a div</div>
26
Headings and
Paragraphs – Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>
27
Headings and
Paragraphs – Example
headings.html (2)
<!DOCTYPE HTML>
<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>
28
Introduction to HTML
HTML Document Structure in Depth
Preface
 It is important to have the correct
vision and attitude towards HTML
 HTML is only about structure, not
appearance
 Browsers tolerate invalid HTML
code and parse errors – you should
not.

30
The <!DOCTYPE>
Declaration
 HTML documents must start with a
document type definition (DTD)
 It tells web browsers what type is the
served code
 Possible versions: HTML 4.01, XHTML
1.0 (Transitional or Strict), XHTML 1.1,
HTML 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN"
Example:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

 See
http://w3.org/QA/2002/04/valid-dtd-list.html 31
HTML vs. XHTML
 XHTML is more strict than HTML
 Tags and attribute names must be
in lowercase
 All tags must be closed (<br/>,
<img/>) while HTML allows <br> and
<img> and implies missing closing
tags (<p>par1 <p>par2)
 XHTML allows only one root <html>
element (HTML allows more than
one)
32
XHTML vs. HTML (2)
 Many element attributes are
deprecated in XHTML, most are
moved to CSS
 Attribute minimization is
<input type="checkbox" checked>
forbidden, e.g.
<input type="checkbox"
checked="checked" />

 Note: Web browsers load XHTML

faster than HTML and valid code 33
The <head> Section
 Contains information that doesn’t
show directly on the viewable page
 Starts after the <!doctype>
declaration
 Begins with <head> and ends with
</head>
 Contains mandatory single <title>
tag
 Can contain some other tags, e.g.
 <meta>
 34
<head> Section:
<title> tag
 Title should be placed between
<head> and </head> tags
<title>Telerik Academy – Winter Season
2009/2010 </title>

 Used to specify a title in the window

title bar
 Search engines and people rely on 35
<head> Section:
<meta>
 Meta tags additionally describe the
content contained within the page
<meta name="description" content="HTML
tutorial" />

<meta name="keywords" content="html, web

design, styles" />

<meta name="author" content="Chris Brewer"

<meta http-equiv="refresh" content="5;

url=http://www.telerik.com" />

36
<head> Section:
<script>
 The <script> element is used to
embed scripts into an HTML
document
 Script are executed in the client's
Web browser
 Scripts can live in the <head> and in
the <body> sections
 Supported client-side scripting
languages:
 JavaScript (it is not Java!)
37
The <script> Tag –
Example
<!DOCTYPE HTML> scripts-
<html>
<head> example.html
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello
World!<\/p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>
38
<head> Section:
<style>
 The <style> element embeds
formatting information (CSS styles)
into
<html> an HTML page style-example.html
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>
39
Comments:  Tag
 Comments can exist anywhere
between the <html></html> tags
 Comments start with 
<!–- Telerik Logo (a JPG file) -->
<img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a>
<!–- Show the news table -->
<table class="newstable">
...

40
<body> Section:
Introduction
 The <body> section describes the
viewable portion of the page
 Starts after the <head> </head>
section
 Begins with <body> and ends with
<html>
</body>
<head><title>Test page</title></head>
<body>

</body>
</html>
41
Text Formatting
 Text formatting tags modify the
text between the opening tag and
the closing tag
 <b></b>
Ex. <b>Hello</b> makes
bold “Hello” bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></ Quoted text block
blockquote>
<del></del> Deleted text – strike through
42
Text Formatting –
text-
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
formatting.html
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br
/>
Next line.</p>
</body> 43
Text Formatting –
text-
Example (2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
formatting.html
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br
/>
Next line.</p>
</body> 44
Hyperlinks: <a> Tag
 Link to a document called
form.html on the same server in
the same directory:
<a href="form.html">Fill Our Form</a>

 Link to a document called

parent.html on the same server
<a href="../parent.html">Parent</a>
in
the parent directory:

 Link to a specific location in another

<a href="chapter3.html#section3.1.1">Go to
document:
Section 3.1.1</a>
<!–- In chapter3.html -->
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
48
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org"
target="_blank">BASD</a> <br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail
only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-
button.jpg” /></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
49
Hyperlinks – Example
(2)
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org"
target="_blank">BASD</a> <br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail
only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-
button.jpg” /></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
50
Links to the Same
Document – Example
links-to-same-
document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...

<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...

51
Links to the Same
Document – Example (2)
links-to-same-
document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...

<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...

52
Images: <img> tag
 Inserting an image with <img> tag:
<img src="/img/basd-logo.png">
 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

 Example:
<img src="./php.png" alt="PHP Logo" />
53
Miscellaneous Tags
 <hr />: Draws a horizontal rule
(line):
<hr size="5" width="70%" />

 <center></center>: Deprecated!
<center>Hello World!</center>

 <font></font>: Deprecated!
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>

54
Miscellaneous Tags –
Example
misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
</body>
</html>

55
Ordered Lists: <ol> Tag
 Create an Ordered List using
<ol></ol>:
<ol type="1"> or <ol start="50">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

1.Attribute
 Apple values for type are i.1, Apple
A, a, I,
2.or
Orange
i ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. GrapefruitII. Orange
C. Grapefruit III. Grapefruit
56
Unordered Lists: <ul>
Tag
 Create an Unordered List using
<ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

 Attribute values for type are:

 disc, circle or square
• Apple o Apple  Apple
• o Orange  Orange
Orange o Pear  Pear
• Pear 57
Description lists: <dl>
tag
 Create description lists using <dl>
 The <dl> tag is used in conjunction
with <dt> (defines terms/names)
and <dd> (description definition)
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
 Renders without bullets
 Definition is indented
58
Lists – Example
<ol type="1">
<li>Apple</li>
lists.html
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>

59
HTML Special
Characters
HTML
Symbol Name Symbol
Entity
Copyright Sign © ©
Registered Trademark
Sign
® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Non-breaking Space  
Em Dash — —
Quotation Mark " "
Euro € €
British Pound £ £
Japanese Yen ¥ ¥
60
Special Characters –
Example
<p>[>>  Welcome special-
  <<]</p>
<p>►I have following cards:chars.html
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2006 by Svetlin Nakov & his
team</p>
<p>Telerik Academy™</p>

61
Special Chars – Example
(2)
special-
chars.html

62
Using <DIV> and
<SPAN> Block and
Inline Elements
Block and Inline
Elements
 Block elements add a line break
before and after them
 <div> is a block element
 Other block elements are <table>,
<hr>, headings, lists, <p> and etc.
 Inline elements don’t break the
text before and after them
 <span> is an inline element
 Most HTML elements are inline, e.g.
<a> 64
The <div> Tag
 <div> creates logical divisions
within a page
 Block style element
 Used with CSS
 Example:
div-and-
span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
65
The <span> Tag
 Inline style element
 Useful for modifying a specific
portion of text
 Don't create a separate area
(paragraph) in the document
 Very useful with CSS
span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-
size:32px; font-weight:bold">TEST</span>.</p>
66
HTML Tables
HTML Tables
 Tables represent tabular data
 A table consists of one or several
rows
 Each row has one or more columns
 Tables comprised of several core
tags: <table></table>: begin / end
the table
<tr></tr>: create a table row
<td></td>: create tabular data
(cell) 68
HTML Tables (2)
 Start and end of a table
<table> ... </table>

 Start and end of a row

 Start and end of a cell in a row

<td> ... </td>

69
Simple HTML Tables –
Example (2)
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture
1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture
2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
70
71
Complete HTML Tables
 Table rows split into three
semantic sections: header, body
and footer
 <thead> denotes table header and
contains <th> elements, instead of
<td> elements
 <tbody> denotes collection of table
rows that contain the very data
 <tfoot> denotes table footer but
comes BEFORE the <tbody> tag
72
Complete HTML Table:
Example
<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup> th
<thead>
header
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body
(data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
73
Complete HTML Table:
By default, headerExample (2)
<table> text is bold and table-full.html
<colgroup> centered.
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Although the 1.2</td></tr>
<tr><td>Cell 1.1</td><td>Cell
<tr><td>Cellfooter is before2.2</td></tr>
2.1</td><td>Cell
</tbody> the data in the
</table> code, it is 74
Nested Tables
 Table data “cells” (<td>) can contain
nested tables (tables within tables):
<table> nested-
<tr>
<td>Contact:</td> tables.html
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
75
Cell Spacing and
Padding
 Tables have two important
attributes:
 cellspacing  cellpadding

cell cell cell cell

 Defines the  Defines the

empty space empty space
between around the cell
cells content 76
Cell Spacing and Padding
– Example
table-
<html>
cells.html
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

77
Column and Row Span
 Table cells have two important
attributes:
 colspan  rowspan
colspan= colspan= rowspan rowspan
"1" "1" ="2" ="1"
cell[1
cell[1, cell[1,
1] 2] ,2]
cell[1,1]
cell[2
cell[2,1]
,1]
colspan= rowspan
 Defines how "2"  Defines ="1"
how
many many rows
columns the the cell
78
Column and Row Span –
Example
table-colspan-rowspan.html
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<table cellspacing="0">
<tr><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table> 79
Column and Row Span –
table-colspan-rowspan.html
Example (2)
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
Cell[1,1
<td>Cell[2,3]</td></tr> Cell[2,1]
</table> ]
Cell[1,2 Cell[3,2
] Cell[2,2 ]
Cell[1,3 ] Cell[2,3
] ]

80
Border collapse
<style>
table, td, th {
border: 1px solid;
}

table {
width: 100%;
border-collapse: collapse;
}
</style>

or Round The Corner

https://shihabiiuc.com/table-
rounded-css/ 81
HTML Forms
Entering User Data from a
Web Page
HTML Forms
 Forms are the primary method for
gathering data from site visitors
 Create a form block with
<form></form> The “method" attribute
tells how the form data
 Example: should be sent – via GET
or POST request
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
The "action" attribute
tells where the form data
should be sent 83
 <!DOCTYPE html>
<html>
 <body>
 <h2>Text input fields</h2>
 <form>
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname"
value="John"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname"
value="Doe">
 </form>
 <p>Note that the form itself is not
visible.</p>
 <p>Also note that the default width of text
input fields is 20 characters.</p>
 </body>
 </html>
84
Form Fields
 Single-line text input fields:
<input type="text" name="FirstName"
value="This is a text field" />
 Multi-line textarea fields:
<textarea name="Comments">This is a multi-
line text field</textarea>

 Hidden fields contain data not shown

to the user:
<input type="hidden" name="Account"
value="This is a hidden text field" />

 Often used by JavaScript code 85

Fieldsets
 Fieldsets are used to enclose a group
of related form fields:
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>
 The <legend> is the fieldset's title.
86
Form Input Controls
 Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />

 Radio buttons:
<input type="radio" name="title"
value="Mr." />
 Radio buttons can be grouped,
allowing only one to be selected from
a group:
<input type="radio" name="city" value="Lom"
/>
<input type="radio" name="city"
value="Ruse" /> 87
Other Form Controls
 Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>

 Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />

88
Other Form Controls (2)
 Reset button – brings the form to its
initial state
<input type="reset" name="resetBtn"
value="Reset the form" />

 Image button – acts like submit but

image is displayed and click
<input type="image" src="submit.gif"
coordinates arealt="Submit"
name="submitBtn" sent />

 Ordinary button – used for Javascript,

<input type="button" value="click me" />
no default action
89
Other Form Controls (3)
 Password input – a text field which
masks the entered text with * signs
<input type="password" name="pass" />

 Multiple select field – displays the list

of items in multiple lines, instead of
one
<select name="products"
multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value
3">speakers</option> 90
Other Form Controls (4)
 File input – a field used for uploading
files
<input type="file" name="photo" />

 When used, it requires the form

element to have a specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

91
Labels
 Form labels are used to associate an
explanatory text to a form field using
the field's
<label ID.
for="fn">First Name</label>
<input type="text" id="fn" />

 Clicking on a label focuses its

associated field (checkboxes are
toggled, radio buttons are checked)
 Labels are both a usability and
accessibility feature and are required
92
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" /> 93
HTML Forms – Example
form.html (continued)
(2)
<br />
Gender:
<input name="gender" type="radio" id="gm"
value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf"
value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND
CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send
Form" />
<input type="reset" value="Clear Form" />
94
</p>
HTML Forms – Example
form.html (continued)
(3)

95
The Autocomplete
Attribute
<!DOCTYPE html>
<html>
<body>

<h1>The form autocomplete attribute</h1>

<p>Fill in and submit the form, then reload the page, start to
fill in the form again - and see how autocomplete works.</p>

<p>Then, try to set autocomplete to "off".</p>

<form action="/action_page.php" autocomplete="on">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>

</body>
</html>
96
drop-down list
<!DOCTYPE html>
<html>
<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars” size=“3” multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat“ selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>
97
The <datalist> Element
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined
options for an input element.</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari

prior version 12.1.</p>
</body>
</html> 98
Excercise
 https://www.w3schools.com/html/
html_form_attributes.asp

99
TabIndex
 The tabindex HTML attribute
controls the order in which form
fields and hyperlinks are focused
when repeatedly pressing the TAB
key
 tabindex="0" (zero) - "natural"
order
 If X > Y, then elements with
tabindex="X" are iterated before
<input type="text"
elements tabindex="10" />
with tabindex="Y"
 Elements with negative tabindex 100
Tabindex
 <!DOCTYPE html>
 <html>
 <body>
 <div tabindex="1">W3Schools</div><br>
 <div tabindex="3">Google</div><br>
 <div tabindex="2">Microsoft</div>
 <script>
 // At start, set focus on the first div
 document.getElementsByTagName('div')[0].focus();
 </script>
 <p tabindex="4"><b>Note:</b> Try navigating the elements by
using the "Tab" button on your keyboard.</p>
 </body>
 </html>

101
HTML Frames
<frameset>, <frame> and <iframe>
Form validation
https://o7planning.org/12273/
javascript-form-validation#a34575835
HTML Frames
 Frames provide a way to show
multiple HTML documents in a
single Web page
 The page can be split into separate
views (frames) horizontally and
vertically
 Frames were popular in the early
ages of HTML development, but
now their usage is rejected
 Frames are not supported by all
user agents (browsers, search 104
HTML Frames – Demo
frames.ht
<html> ml
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>

105
Inline Frames: <iframe>
 Inline frames provide a way to
show one website inside another
website:
iframe-
<iframe name="iframeGoogle" demo.html
width="600"
height="400" src="http://www.google.com"
frameborder="yes" scrolling="yes"></iframe>

106
Cascading Style
Sheets (CSS)
Table of Contents
 What is CSS?
 Styling with Cascading Stylesheets

(CSS)
 Selectors and style definitions
 Linking HTML and CSS
 Fonts, Backgrounds, Borders
 The Box Model
 Alignment, Z-Index, Margin,

Padding
 Positioning and Floating Elements
 108
CSS: A New Philosophy
 Separate content from
presentation!
Content Presentation
(HTML document) (CSS Document)

Title
Lorem ipsum dolor sit
Bold
amet, consectetuer
adipiscing elit. Italics
Suspendisse at pede ut
purus malesuada dictum.
Donec vitae neque non Indent
magna aliquam dictum.
• Vestibulum et odio et
ipsum
• accumsan accumsan.
Morbi at
• arcu vel elit ultricies
porta. Proin
tortor purus, luctus non,
aliquam nec, interdum
vel, mi. Sed nec quam
nec odio lacinia molestie.
Praesent augue tortor,
convallis eget, euismod
nonummy, lacinia ut,
risus.
109
The Resulting Page
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut
purus malesuada dictum.
Donec vitae neque non
magna aliquam dictum.
• Vestibulum et odio et
ipsum
• accumsan accumsan.
Morbi at
• arcu vel elit ultricies
porta. Proin
Tortor purus, luctus non,
aliquam nec, interdum vel,
mi. Sed nec quam nec odio
110
CSS Intro
Styling with Cascading
Stylesheets
CSS Introduction
 Cascading Style Sheets (CSS)
 Used to describe the presentation of
documents
 Define sizes, spacing, fonts, colors,
layout, etc.
 Improve content accessibility
 Improve flexibility
 Designed to separate presentation
from content
 Due to CSS, all HTML presentation 112
CSS Introduction (2)
 CSS can be applied to any XML
document
 Not just to HTML / XHTML
 CSS can specify different styles for
different media
 On-screen
 In print
 Handheld, projection, etc.
 … even by voice or Braille-based
reader 113
Why “Cascading”?
 Priority scheme determining which
style rules apply to element
 Cascade priorities or specificity
(weight) are calculated and
assigned to the rules
 Child elements in the HTML DOM
tree inherit styles from their parent
 Can override them
 Control via !important rule

114
Why “Cascading”? (3)
 Some CSS styles are inherited and
some not
 Text-related and list-related
properties are inherited - color,
font-size, font-family, line-height,
text-align, list-style, etc
 Box-related and positioning styles
are not inherited - width, height,
border, margin, padding, position,
float, etc
 <a> elements do not inherit color 115
Style Sheets Syntax
 Stylesheets consist of rules,
selectors, declarations, properties
and values

http://css.maxdesign.co
m.au/

 Selectors are separated by commas

 Declarations are separated by
semicolons
h1,h2,h3 { color: green; font-weight:
 Properties
bold; } and values are separated 116
Selectors
 Selectors determine which element
the rule applies to:
 All elements of specific type (tag)
 Those that mach a specific attribute
(id, class)
 Elements may be matched
depending on how they are nested
in the document tree (HTML)
.header a { color: green }
 Examples:
#menu>li { padding-top: 8px }
117
Selectors (2)
 Three primary kinds of selectors:
 By tag (type selector):
h1 { font-family: verdana,sans-serif; }
 By element id:
#element_id { color: #ff0000; }
 By element class name (only for HTML):
.myClass {border: 1px solid red}
 Selectors can be combined with
commas:
h1, .link, #top-link {font-weight: bold}

119
:hover, :visited, :active
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a

link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and
a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the
CSS definition in order to be effective.</p>

</body> 121
Text-decoration
<style>
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
</style>
122
::first-line
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a
special effect to the first line of a text. Some more
text. And even more, and more, and more, and more, and
more, and more, and more, and more, and more, and more,
and more, and more.</p>

</body>
</html>
123
::before
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 h1::before {
 content: url(smiley.gif);
 }
 </style>
 </head>
 <body>

 <h1>This is a heading</h1>
 <p>The ::before pseudo-element inserts content before
the content of an element.</p>

 <h1>This is a heading</h1>
 </body>
 </html>
124
Selectors (4)
 Match relative to element
placement:
p a {text-decoration: underline}

This will match all <a> tags that are

inside of <p>
 * p– *universal
{color: black}
selector (avoid or use
with care!):

This
img +will match
.link all descendants of
{float:right}
<p> element
 + selector – used to match “next
sibling”: 125
Descendant Selector
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 h3 p {
 text-align: center;
 color: red;
 }
 </style>
 </head>
 <body>

 <h1>Hello World!</h1>
 <h3>Smaller heading!</h2>
 <h3><p>This is a paragraph.</p></h3>

 </body>
 </html>
126
adjacent sibling
selector(+)
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div + p {
 background-color: yellow;
 }
 </style>
 </head>
 <body>
 <h2>Adjacent Sibling Selector</h2>
 <p>The + selector is used to select an element that
is directly after another specific element.</p>
 <p>The following example selects the first p element
that are placed immediately after div elements:</p>

127
Cont…
 <div>
 <p>Paragraph 1 in the div.</p>
 <p>Paragraph 2 in the div.</p>
 </div>

 <p>Paragraph 3. After a div.</p>

 <p>Paragraph 4. After a div.</p>

 <div>
 <p>Paragraph 5 in the div.</p>
 <p>Paragraph 6 in the div.</p>
 </div>

 <p>Paragraph 7. After a div.</p>

 <p>Paragraph 8. After a div.</p>

 </body>
 </html>
128
CHILD SELECTOR
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div > p {
 background-color: yellow;
 }
 </style>
 </head>
 <body>

 <h2>Child Selector</h2>

 <p>The child selector (>) selects all elements that

are the children of a specified element.</p>

129
Cont
 <div>
 <p>Paragraph 1 in the div.</p>
 <p>Paragraph 2 in the div.</p>
 <section>
 
 <p>Paragraph 3 in the div (inside a section
element).</p>
 </section>
 <p>Paragraph 4 in the div.</p>
 </div>

 <p>Paragraph 5. Not in a div.</p>

 <p>Paragraph 6. Not in a div.</p>

 </body>
 </html>

130
Values in the CSS Rules
 Colors are set in RGB format (decimal
or hex):
 Example: #a0a6aa = rgb(160, 166,
170)
 Predefined color aliases exist: black,
blue, etc.
 Numeric values are specified in:
 Pixels, ems, e.g. 12px , 1.4em
 Points, inches, centimeters,
millimeters
 E.g. 10pt , 1in, 1cm, 1mm
131
Default Browser Styles
 Browsers have default CSS styles
 Used when there is no CSS
information or any other style
information in the document
 Caution: default styles differ in
browsers
 E.g. margins, paddings and font
* { margin: 0; padding: 0; }
sizes differ most often and usually
developers reset
body, h1, p, ul, them 0; padding:
li { margin:
0; }
132
Linking HTML and CSS
 HTML (content) and CSS
(presentation) can be linked in
three ways:
 Inline: the CSS rules in the style
attribute
 No selectors are needed
 Embedded: in the <head> in a
<style> tag
 External: CSS rules in separate file
(best)
133
Linking HTML and CSS
(2)
 Using external files is highly
recommended
 Simplifies the HTML document
 Improves page load speed as the
CSS file is cached

134
Inline Styles: Example
inline-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>

<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>

135
Inline Styles: Example
inline-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>

<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>

136
CSS Cascade
(Precedence)
 There are browser, user and author
stylesheets with "normal" and
"important" declarations
 Browser styles (least priority)
 Normal user styles
 Normal author styles (external, in
head, inline)
 Important author styles
a { color: red !important ; }
 Important user styles (max priority)
http://www.slideshare.net/maxdesign/css-cascad
e-1658158 137
CSS Specificity
 CSS specificity is used to
determine the precedence of CSS
style declarations with the same
origin. Selectors are what matters
 Simple calculation: #id = 100, .class
= 10, :pseudo = 10, [attr] = 10, tag
= 1, * = 0
 Same number of points? Order
matters.
 See also:
138
Embedded Styles
 Embedded in the HTML in the
<style> tag:
<style type="text/css">

 Ancient browsers do not recognize

@import
144
External Styles:
Example
styles.css
/* CSS Document */

a { text-decoration: none }

a:hover { text-decoration: underline;

color: red;
background-color: #CCFFCC }

li em { color: red;
font-weight: bold }

ul { margin-left: 2cm }

ul ul { text-decoration: underline;
margin-left: .5cm }

145
External Styles:
Example (2)
external-
styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Importing style sheets</title>
<link type="text/css" rel="stylesheet"
href="styles.css" />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<li>Milk</li>
…

146
External Styles:
Example (3)
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
147
External Styles:
Example (4)
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
148
Text-related CSS
Properties
 color – specifies the color of the text
 font-size – size of font: xx-small, x-
small, small, medium, large, x-large,
xx-large, smaller, larger or numeric
value
 font-family – comma separated font
names
 Example: verdana, sans-serif, etc.
 The browser loads the first one that is
available
 There should always be at least one 149
CSS Rules for Fonts (2)
 font-style – styles the font
 Values: normal, italic, oblique
 text-decoration – decorates the
text
 Values: none, underline, line-
trough, overline, blink
 text-align – defines the alignment
of text or other content
 Values: left, right, center, justify
150
Shorthand Font
Property
 font
 Shorthand rule for setting multiple
font properties at the same time
font:italic normal bold 12px/16px
verdana
is equal to writing this:
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;
151
Backgrounds
 background-image
 URL of image to be used as
background, e.g.:
background-image:url("back.gif");

 background-color
 Using color and image and the same
time
 background-repeat
 repeat-x, repeat-y, repeat, no-
repeat 152
Backgrounds (2)
 background-position: specifies
vertical and horizontal position of
the background image
 Vertical position: top, center, bottom
 Horizontal position: left, center,
right
 Both can be specified in percentage
or other numerical values
background-position: top left;
 Examples:
background-position: -5px 50%;
153
Background Shorthand
Property
 background: shorthand rule for setting
background properties at the same
time:
background: #FFF0C0 url("back.gif") no-
repeat fixed top;

is equal to writing:
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;

 Some browsers will not apply BOTH

color and image for background if 154
Background-image or
<img>?
 Background images allow you to
save many image tags from the
HTML
 Leads to less code
 More content-oriented approach
 All images that are not part of the
page content (and are used only
for "beautification") should be
moved to the CSS

155
Borders
 border-width: thin, medium, thick or
numerical value (e.g. 10px)
 border-color: color alias or RGB
value
 border-style: none, hidden, dotted,
dashed, solid, double, groove, ridge,
inset, outset
 Each property can be defined
separately for left, top, bottom and
right
 156
Border Shorthand
Property
 border: shorthand rule for setting
border properties at once:
border: 1px solid red

is equal to writing:
border-width:1px;
border-color:red;
border-style:solid;
 Specify different borders for the
sides via shorthand rules: border-
top, border-left, border-right,
border-bottom 157
Width and Height
 width – defines numerical value for
the width of element, e.g. 200px
 height – defines numerical value
for the height of element, e.g.
100px
 By default the height of an element
is defined by its content
 Inline elements do not apply height,
unless you change their display
style.
158
Margin and Padding
 margin and padding define the
spacing around the element
 Numerical value, e.g. 10px or -5px
 Can be defined for each of the four
sides separately - margin-top,
padding-left, …
 margin is the spacing outside of the
border
 padding is the spacing between the
border and the content
 159
Margin and Padding:
Short Rules
 margin: 5px;
 Sets all four sides to have margin of
5 px;
 margin: 10px 20px;
 top and bottom to 10px, left and
right to 20px;
 margin: 5px 3px 8px;
 top 5px, left/right 3px, bottom 8px
 margin: 1px 3px 5px 7px;
 top, right, bottom, left (clockwise 160
The Box Model

161
IE Quirks Mode
 When using
quirks mode
(pages with no
DOCTYPE or
with a HTML 4
Transitional
DOCTYPE),
Internet
Explorer
violates the box
model standard

162
Positioning
 position: defines the positioning of
the element in the page content
flow
 The value is one of:
 static (default)
 relative – relative position according
to where the element would appear
with static position
 absolute – position according to the
innermost positioned parent element
 fixed – same as absolute, but ignores 163
Positioning (2)
 Margin VS relative positioning
 Fixed and absolutely positioned
elements do not influence the page
normal flow and usually stay on top
of other elements
 Their position and size is ignored
when calculating the size of parent
element or position of surrounding
elements
 Overlaid according to their z-index
 Inline fixed or absolutely positioned 164
Positioning (3)
 top, left, bottom, right: specifies
offset of absolute/fixed/relative
positioned element as numerical
values
 z-index : specifies the stack level
of positioned elements
Each
Understanding stacking
positioned element creates a context
stacking context.
Elements in different stacking
contexts are overlapped according to
the stacking order of their containers.
For example, there is no way for #A1
and #A2 (children of #A) to be placed
over #B without increasing the z-index 165
Inline element
positioning
 vertical-align: sets the vertical-
alignment of an inline element,
according to the line height
 Values: baseline, sub, super, top,
text-top, middle, bottom, text-
bottom or numeric
 Also used for content of table cells
(which apply middle alignment by
default)

166
Float
 float: the element “floats” to one
side
 left: places the element on the left
and following content on the right
 right: places the element on the
right and following content on the
left
 floated elements should come
before the content that will wrap
around them in the code
 margins of floated elements do not 167
Float (2)
 How floated elements are
positioned

168
Clear
 clear
 Sets the sides of the element where
other floating elements are NOT
allowed
 Used to "drop" elements below
floated ones or expand a container,
which contains only floated children
 Possible values: left, right, both
 Clearing floats
 additional element (<div>) with a
clear style 169
Clear (2)
 Clearing floats (continued)
 :after { content: ""; display:
block; clear: both; height: 0; }
 Triggering hasLayout in IE expands
a container of floated elements
 display: inline-block;
 zoom: 1;

170
Opacity
 opacity: specifies the opacity of
the element
 Floating point number from 0 to 1
 For old Mozilla browsers use –moz-
opacity
 For IE use
filter:alpha(opacity=value) where
value is from 0 to 100; also, "binary
and script behaviors" must be
enabled and hasLayout must be
triggered, e.g. with zoom:1 171
Visibility
 visibility
 Determines whether the element is
visible
 hidden: element is not rendered, but
still occupies place on the page
(similar to opacity:0)
 visible: element is rendered
normally

172
Display
 display: controls the display of the
element and the way it is rendered
and if breaks should be placed
before and after the element
 inline: no breaks are placed before
and after (<span> is an inline
element)
 block: breaks are placed before
AND after the element (<div> is a
block element)
173
Display (2)
 display: controls the display of the
element and the way it is rendered
and if breaks should be placed
before and after the element
 none: element is hidden and its
dimensions are not used to
calculate the surrounding elements
rendering (differs from visibility:
hidden!)
 There are some more possible
values, but not all browsers support
174
Overflow
 overflow: defines the behavior of
element when content needs more
space than you have specified by the
size properties or for other reasons.
Values:
 visible (default) – content spills out of
the element
 auto - show scrollbars if needed
 scroll – always show scrollbars
 hidden – any content that cannot fit is
clipped
175
Other CSS Properties
 cursor: specifies the look of the
mouse cursor when placed over the
element
 Values: crosshair, help, pointer,
progress, move, hair, col-resize,
row-resize, text, wait, copy, drop,
and others
 white-space – controls the line
breaking of text. Value is one of:
 nowrap – keeps the text on one line
 normal (default) – browser decides 176
Benefits of using CSS
 More powerful formatting than
using presentation tags
 Your pages load faster, because
browsers cache the .css files
 Increased accessibility, because
rules can be defined according
given media
 Pages are easier to maintain and
update

177
Maintenance Example

Title Title
Some random Title Some random
Title text here. Some random text here.
Title You can’t text here. Title You can’t
Some random
read it You can’t read it
Title text here. Title Some random Some random
anyway! Har read it anyway! Har
You can’t text here. text here.
Some random Some random har har! Use anyway! Har har har! Use
read it You can’t You can’t
text here. text here. Css. Title har har! Use Css.
anyway! Har read it read it
You can’t You can’t Css. Title Title
har har! Use anyway! Har Some random anyway! Har
read it read it
Css. har har! Use text here. Some random har har! UseSome random
anyway! Har anyway! Har
Css. You can’t text here. Css. text here. Title
har har! Use har har! Use
read it You can’t You can’t
Title Css. Css.
anyway! Har Some random
read it read it
Some random Title Title har har! Use Title text here.
anyway! Har anyway! Har
text here. Title Css. You can’t
Some random Some random har har! Use Some random har har! Use
You can’t Some random read it
text here. text here. Title Css. text here. Css.
read it text here. anyway! Har
You can’t You can’t You can’t Title
anyway! Har You can’t Some random har har! Use
read it read it read it
har har! Use read it text here. Title Some random Css.
anyway! Har anyway! Har anyway! Har
Css. Title anyway! Har Title har har! Use har har! Use You can’t text here.
Some random har har! Use
har har! Use read it You can’t
Some random Css.
Some random Css. Title text here. Css.
anyway! Har read it
text here. Css. text here. Some random har har! Use
You can’t
read it anyway! Har
You can’t You can’t

CS
text here. Css. har har! Use
read it read it anyway! Har
TitleHar You can’t Title Css.
anyway! Har anyway! har har! Use
read it
har har! Use har har!
SomeUserandom Css. Some random
anyway! Har
Title Css. Css. text here. har har! Use text here. Title
Title You can’t Css. You can’t
Some random Some random
read it read it
text here. Title Title text here.
Some random anyway! Har anyway! Har Title
You can’t text here. You can’t
har har! Use Some random Some random har har! Use Some random

S
read it You can’t read it
Css.
Title text here. text here. Css. text here.
anyway! Har read it anyway! Har
You can’t You can’t You can’t
har har! Use anyway! Har Some random har har! Use
read it read it read it
Css. text here. Title Css.
har har! Use anyway! Har anyway! Har anyway! Har Title
Css. You can’t
Some random har har! Use har har! Use har har! Use Some random
read it
Title text here. Css. Title Css. Title Css. text here.
anyway! Har
You can’t You can’t
Some random har har! Use Some random Some random
read it read it

file
Title text here. Css. text here. text here.
anyway! Har anyway! Har
You can’t You can’t You can’t
Some random har har! Use har har! Use
read it read it read it
Title text here. Css. Title Title Css.
anyway! Har anyway! Har anyway! Har
You can’t
Some random har har! Use Title Some randomhar har! UseTitle har har! UseSome random Title
read it
text here. Css. Some random text here.Css. Some random Css. text here. Some random
anyway! Har
You can’t text here. You can’t text here. You can’t Title text here.
har har! Use
read it You can’t read it You can’t read it You can’t
Css. Some random
anyway! Har read it anyway! Har read it anyway! Har read it
har har! Use har har! Use har har! Use text here.
anyway! Har anyway! Har anyway! Har
Css. Title Css.
Title Css. You can’t
har har! Use har har! Use har har! Use
read it
Some random Css. Title Some random Css. Title Css.
anyway! Har
text here. Some random text here. Some random har har! Use
Title You can’t text here. You can’t text here. Css.
read it You can’t read it You can’t
Some random anyway! Har anyway! Har Title
read it read it
text here.Title har har! Use har har! Use Some random
anyway! Har anyway! Har
You can’t Css. Title Css. text here. Title har har! Use
Some random har har! Use
read it You can’t
text here. Some random Css. Some Css.
random Title
anyway! Har read it
You can’t text here. text here.
har har! Use anyway! Har Some random
read it You can’t You can’t
Css. Title Title har har! Use text here.
anyway! Har read it read it
Css. You can’t
har har! UseSome random anyway! Har Some random anyway! Har read it
Css. text here. har har! Use text here. Title har har! Use Title anyway! Har
You can’t Css. You can’t Css.
Some random Some random har har! Use
read it read it
text here. text here. Css.
anyway! Har anyway! Har
You can’t You can’t
har har! Use har har! Use
read it read it
Css. Css.
anyway! Har anyway! Har
har har! Use har har! Use
Css. Css.

178
CSS Development Tools
 Visual Studio – CSS Editor

179
CSS Development Tools
(3)
 Firebug – add-on to Firefox used to
examine and adjust CSS and HTML

180
CSS Development Tools
(4)
 IE Developer Toolbar – add-on to IE
used to examine CSS and HTML
(press [F12])

181
ORDER EXAMPLE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
</body>
</html>
182
Hidden type
<h1>A Hidden Field (look in source code)</h1>

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname"
name="fname"><br><br>
<input type="hidden" id="custId"
name="custId" value="3487">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> The hidden field is 183

Introduction to
JavaScript
Table of Contents
 What is DHTML?
 DHTML Technologies
 XHTML, CSS, JavaScript, DOM

185
 Dynamic HTML, or DHTML, is a term which was
used by some browser vendors to describe the
combination of HTML, style sheets and client-
side scripts that enabled the creation of
interactive and animated documents.
 JavaScript was invented by Brendan Eich in
1995.
 It was developed for Netscape 2, and became
the ECMA-262 standard in 1997.
 After Netscape handed JavaScript over to
ECMA, the Mozilla foundation continued to
develop JavaScript for the Firefox browser.
Mozilla's latest version was 1.8.5. (Identical to
ES5). 186
Javascript examples
 https://www.w3resource.com/
javascript/form/phone-no-
validation.php

187
Table of Contents (2)
 Introduction to JavaScript
 What is JavaScript
 Implementing JavaScript into Web
pages
 In <head> part
 In <body> part
 In external .js file

188
Table of Contents (3)
 JavaScript Syntax
 JavaScript operators
 JavaScript Data Types
 JavaScript Pop-up boxes
 alert, confirm and prompt
 Conditional and switch statements,
loops and functions
 Document Object Model
 Debugging in JavaScript
189
DHTML
Dynamic Behavior at the Client Side
CSS Layout - The display
Property
Every HTML element has a default display value
depending on what type of element it is. The
default display value for most elements is block or
inline.
Block-level Elements
A block-level element always starts on a new line
and takes up the full width available (stretches out
to the left and right as far as it can).
The <div> element is a block-level element.:
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer> <section>
Inline Elements
An inline element does not start on a new line and
only takes up as much width as necessary.
This is an inline <span> element inside a
paragraph.
• <span>
• <a>
• <img>
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline; //block
}
</style>
</head>
<body>

<h1>Display span elements as block elements</h1>

<span>A display property with</span> <span>a value of

"block" results in</span> <span>a line break between each
span elements.</span>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none; //visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take
up any space.</p>

</body>
</html>
Visibility using Jscript & CSS
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}

#panel {
display: none;
}
</style>
</head>
Cont…
<body>
<p class="flip" onclick="myFunction()">Click to show
panel</p>
<div id="panel">
<p>This panel contains a div element, which is
hidden by default (display: none).</p>
<p>It is styled with CSS and we use JavaScript to
show it (display: block).</p>
<p>Wow it works</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display =
"block";
}
</script>
onclick="removeElement()">Remove</but
on>
</div>

<div class="imgbox" id="imgbox2">Box

2<br>
<img src="img_lights.jpg" alt="Lights"
style="width:100%">
<button
onclick="changeVisibility()">Hide</button
</div>

<div class="imgbox">Box 3<br>

<img src="img_forest.jpg" alt="Forest"
style="width:100%">
<button onclick="resetElement()">Reset
All</button>
</div>
What is DHTML?
 Dynamic HTML (DHTML)
 Makes possible a Web page to react
and change in response to the
user’s actions
 DHTML = HTML + CSS + JavaScript
DHTML
XHTML CSS JavaScript DOM

199
DTHML = HTML + CSS +
JavaScript
 HTML defines Web sites content
through semantic tags (headings,
paragraphs, lists, …)
 CSS defines 'rules' or 'styles' for
presenting every aspect of an
HTML document
 Font (family, size, color, weight,
etc.)
 Background (color, image, position,
repeat)
 Position and layout (of any object 200
JavaScript
Dynamic Behavior in a Web
Page
JavaScript
 JavaScript is a front-end scripting
language for dynamic content
 Lightweight, but with limited
capabilities
 Can be used as object-oriented
language
 Client-side technology
 Embedded in your HTML page
 Interpreted by the Web browser
 Simple and flexible
202
JavaScript Advantages
 JavaScript allows interactivity such
as:
 Implementing form validation
 React to user actions, e.g. handle
keys
 Changing an image on moving
mouse over it
 Sections of a page appearing and
disappearing
 Content loading and changing
dynamically 203
What Can JavaScript
Do?
 Can handle events
 Can read and write HTML elements
and modify the DOM tree
 Can validate form data
 Can access / modify browser
cookies
 Can detect the user’s browser and
OS
 Can be used as object-oriented
language 204
The First Script
first-
script.html
<html>

<body>
<script type="text/javascript">
alert('Hello JavaScript!');
</script>
</body>

</html>

205
Another Small Example
small-
example.html
<html>

<body>
<script type="text/javascript">
document.write('JavaScript rulez!');
</script>
</body>

</html>

206
Using JavaScript Code
 The JavaScript code can be placed
in:
 <script> tag in the head
 <script> tag in the body – not
recommended
 External files, linked via <script>
<script src="scripts.js"
tag the head
type="text/javscript">
<!– code placed here will not be executed! --
>Files usually have .js extension
</script>

207
JavaScript – When is
Executed?
 JavaScript code is executed during
the page loading or when the
browser fires an event
 All statements are executed at page
loading
 Some statements just define
functions that can be called later
 Function calls or code can be
attached as "event handlers" via
<img src="logo.gif"
tag attributes
onclick="alert('clicked!')" />
 Executed when the event is fired by 208
Calling a JavaScript
Function from Event
Handler – Example
<html> image-
<head> onclick.html
<script type="text/javascript">
function test (message) {
alert(message);
}
</script>
</head>

209
.write()
 <!DOCTYPE html>
 <html>
 <body>
 <h2>My First Web Page</h2>
 <p>My first paragraph.</p>
 <p>Never call document.write after the document
has finished loading.
 It will overwrite the whole document.</p>
 <script>
 document.write(5 + 6);
 </script>
 </body>
210

Write () cont..
<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 +

6)">Try it</button>

</body>
</html> 211
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML
content.</p>
<button type="button"
onclick='document.getElementById("demo").innerHTML
= "Hello JavaScript!"'>Click Me!</button>
</body>
NEXT BULB
</html> EXAMPLE
212
213
Using External Script
Files
 Using external script files:
<html> external-
<head>
JavaScript.html
<script src="sample.js" type="text/javascript">
</script>
</head> The <script> tag is
<body> always empty.
<button onclick="sample()" value="Call
JavaScript
function from sample.js" /> Click
here</button>
</body>
 External
</html> JavaScript file:
function sample() {
alert('Hello from sample.js!')
} sample.j
s 214
The
JavaScript
Syntax
JavaScript Syntax
 The JavaScript syntax is similar to
C# and Java
 Operators (+, *, =, !=, &&, ++, …)
 Variables (typeless)
 Conditional statements (if, else)
 Loops (for, while)
 Arrays (my_array[]) and associative
arrays (my_array['abc'])
 Functions (can return value)
 Function variables (like the C# 216
Data Types
 JavaScript data types:
 Numbers (integer, floating-point)
 Boolean (true / false)
 String type – string of characters
var myName = "You can use both single or
double quotes for strings";
 Arrays
var my_array = [1, 5.3, "aaa"];
 Associative arrays (hash tables)
var my_hash = {a:2, b:3, c:"text"};

217
Everything is Object
 Every variable can be considered
as object
 For example strings and arrays have
objects.html
member functions:
var test = "some string";
alert(test[7]); // shows letter 'r'
alert(test.charAt(5)); // shows letter
's'
alert("test".charAt(1)); //shows letter
'e'
alert("test".substring(1,3));
var arr = [1,3,4]; //shows
'es'
alert (arr.length); // shows 3
arr.push(7); // appends 7 to end of
array
alert (arr[3]); // shows 7
218
String Operations
 The + operator joins strings
string1 = "fat ";
string2 = "cats";
alert(string1 + string2); // fat cats

 What is "9" + 9?
alert("9" + 9); // 99

 Converting string to number:

alert(parseInt("9") + 9); // 18

219
Arrays Operations and
Properties
 Declaring new empty array:
var arr = new Array();
 Declaring an array holding few
elements:
var arr = [1, 2, 3, 4, 5];

 Appending
arr.push(3); an element / getting the
var element = arr.pop();
last element:

arr.length;
 Reading the number of elements
(array length):
arr.indexOf(1);
220
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Operators</h1>
<h2>The += Operator</h2>
<p>The assignment operator += can concatenate
strings.</p>
<p id="demo"></p>
<script>
let text1 = "What a very ";
text1 += "nice day";
document.getElementById("demo").innerHTML =
text1;
</script>

</body> 221
222
JavaScript Objects
 <!DOCTYPE html>
 <html>
 <body>
 <h2>JavaScript
Objects</h2>
 <p id="demo"></p> document.getElementById("demo").i
 <script> nnerHTML =person.firstName + " is "
+ person.age + " years old.";
 const person = {
 </script>
 firstName : "John",
 </body>
 lastName : "Doe",
 </html>
 age : 50,
 eyeColor : "blue"
 }; 223
Typeof Operator
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an
expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "" + "<br>" +
typeof "John" + "<br>" +
typeof "John Doe";
</script>
</body> 224
Important
 https://www.w3schools.com/js/js_datatypes.asp
 let x = 16 + "Volvo";
 let x = 16 + 4 + "Volvo";
 let x = "Volvo" + 16 + 4;
 let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String

225
Functions
 <!DOCTYPE html>
 <html>
 <body>
 <h1>JavaScript Functions</h1>
 <p>Call a function which performs a calculation and returns
the result:</p>
 <p id="demo"></p>
 <script>
 let x = myFunction(4, 3);
 document.getElementById("demo").innerHTML = x;
 function myFunction(a, b) {
 return a * b;
 }
 </script>
 </body> 226
Standard Popup Boxes
 Alert box with text and [OK] button
 Just a message shown in a dialog
box:
alert("Some text here");

 Confirmation box
 Contains
confirm("Aretext, [OK] button and
you sure?");
[Cancel] button:

 Prompt box
prompt ("enter amount", 10);
 Contains text, input field with 227
Sum of Numbers –
Example
sum-of-
numbers.html
<html>

<head>
<title>JavaScript Demo</title>
<script type="text/javascript">
function calcSum() {
value1 =

parseInt(document.mainForm.textBox1.value);
value2 =

parseInt(document.mainForm.textBox2.value);
sum = value1 + value2;
document.mainForm.textBoxSum.value = sum;
}
</script>
228
</head>
Sum of Numbers –
Example (2)
sum-of-numbers.html
(cont.)
<body>
<form name="mainForm">
<input type="text" name="textBox1" />
<br/>
<input type="text" name="textBox2" />
<br/>
<input type="button" value="Process"
onclick="javascript: calcSum()" />
<input type="text" name="textBoxSum"
readonly="readonly"/>
</form>
</body>

</html>
229
JavaScript Prompt –
Example
prompt.ht
ml
price = prompt("Enter the price",
"10.00");
alert('Price + VAT = ' + price * 1.2);

230
Conditional Statement
(if)
unitPrice = 1.30;
if (quantity > 100) {
unitPrice = 1.20;
}

Symb Meaning
ol
> Greater than
< Less than
>= Greater than or
equal to
<= Less than or equal
to
== Equal
!= Not equal
231
Conditional Statement
(if) (2)
 The condition may be of Boolean or
integer type:

conditional-statements.html
var a = 0;
var b = true;
if (typeof(a)=="undefined" ||
typeof(b)=="undefined") {
document.write("Variable a or b is undefined.");
}
else if (!a && b) {
document.write("a==0; b==true;");
} else {
document.write("a==" + a + "; b==" + b + ";");
}
232
Switch Statement
 The switch statement works like in
C#:
switch (variable) { switch-statements.html
case 1:
// do something
break;
case 'a':
// do something else
break;
case 3.14:
// another code
break;
default:
// something completely different
}
233
Loops
 Like in C#
 for loop
 while loop
 do … while loop

var counter;
for (counter=0; counter<4; counter++) {
alert(counter);
}
while (counter < 5) {
alert(++counter);
} loops.html
234
Functions
 Code structure – splitting code into
parts
 Data comes in, processed, result
returned Parameters
function average(a, b, come in here.
c)
{ Declaring
var total; variables is
total = a+b+c; optional.
return total/3;
Type is never
}
declared.
Value
returned here.

235
Function
Arguments
and Return Value
 Functions are not required to
return a value
 When calling function it is not
obligatory to specify all of its
arguments
 The function has access to all the
function sum() {
arguments
var sum = 0; passed via arguments array
for (var i = 0; i < arguments.length; i ++)
sum += parseInt(arguments[i]);
return sum;
}
alert(sum(1, 2, 4)); functions-demo.html
236
Document
Object Model
(DOM)
Document Object Model
(DOM)
 Every HTML element is accessible via
the JavaScript DOM API
 Most DOM objects can be
manipulated by the programmer
 The event model lets a document to
react when the user does something
on the page
 Advantages
 Create interactive pages
 Updates the objects of a page without 238
Accessing Elements
 Access elements via their ID
attribute
var elem = document.getElementById("some_id")

 Via the= name attribute

var arr
document.getElementsByName("some_name")

 Via tag name

var imgTags = el.getElementsByTagName("img")

 Returns array of descendant <img>

elements of the element "el"
239
DOM Manipulation
 Once we access an element, we can
read and write its attributes
DOM-manipulation.html
function change(state) {
var lampImg =
document.getElementById("lamp");
lampImg.src = "lamp_" + state + ".png";
var statusDiv =
document.getElementById("statusDiv");
statusDiv.innerHTML = "The lamp is " +
state";
}
…
<img src="test_on.gif"
240
Common Element
Properties
 Most of the properties are derived
from the HTML attributes of the
tag
 E.g. id, name, href, alt, title, src,
etc…
 style property – allows modifying
the CSS styles of the element
 Corresponds to the inline style of
the element
 Not the properties derived from
embedded or external CSS rules 241
Common Element
Properties (2)
 className – the class attribute of
the tag
 innerHTML – holds all the entire
HTML code inside the element
 Read-only properties with
information for the current
element and its state
 tagName, offsetWidth, offsetHeight,
scrollHeight, scrollTop, nodeType,
etc…
242
Accessing Elements
through the DOM Tree
Structure
 We can access elements in the
DOM through some tree
manipulation properties:
 element.childNodes
 element.parentNode
 element.nextSibling
 element.previousSibling
 element.firstChild
 element.lastChild
243
Accessing Elements
through the DOM Tree –
Example
var el = document.getElementById('div_tag');
alert (el.childNodes[0].value);
alert (el.childNodes[1].
getElementsByTagName('span').id);
…
<div id="div_tag">
<input type="text" value="test text" />
<div>
<span id="test">test span</span>
</div>
</div> accessing-elements-
demo.html
 Warning: may not return what you
expected due to Browser
244
The HTML
DOM Event
Model
The HTML DOM Event
Model
 JavaScript can register event
handlers
 Events are fired by the Browser and
are sent to the specified JavaScript
event handler function
 <img src="test.gif"
Can be set with HTML
onclick="imageClicked()" /> attributes:

 var img =
Can be accessed through the DOM:
document.getElementById("myImage");
img.onclick = imageClicked;

246
The HTML DOM Event
Model (2)
 All event handlers receive one
parameter
 It brings information about the
event
 Contains the type of the event
(mouse click, key press, etc.)
 Data about the location where the
event has been fired (e.g. mouse
coordinates)
 Holds a reference to the event
sender 247
The HTML DOM Event
Model (3)
 Holds information about the state
of [Alt], [Ctrl] and [Shift] keys
 Some browsers do not send this
object, but place it in the
document.event
 Some of the names of the event’s
object properties are browser-
specific

248
Common DOM Events
 Mouse events:
 onclick, onmousedown, onmouseup
 onmouseover, onmouseout,
onmousemove
 Key events:
 onkeypress, onkeydown, onkeyup
 Only for input fields
 Interface events:
 onblur, onfocus
 onscroll 249
Common DOM Events
(2)
 Form events
 onchange – for input fields
 onsubmit
 Allows you to cancel a form
submission
 Useful for form validation
 Miscellaneous events
 onload, onunload
 Allowed only for the <body> element
 Fires when all content on the page
250
onload Event – Example
 onload event onload.ht
<html> ml
<head>
<script type="text/javascript">
function greet() {
alert("Loaded.");
}
</script>
</head>
<body onload="greet()" >
</body>
</html>
251
The Built-In
Browser
Objects
Built-in Browser
Objects
 The browser provides some read-
only data via:
 window
 The top node of the DOM tree
 Represents the browser's window
 document
 holds information the current loaded
document
 screen
 Holds the user’s display properties
 browser 253
DOM Hierarchy –
Example

window

navigato screen documen history location

r t

form form

butto form
n

254
Opening New Window –
Example
 window.open()
window-
var newWindow = window.open("", open.html
"sampleWindow",
"width=300, height=100, menubar=yes,
status=yes, resizable=yes");

newWindow.document.write(
"<html><head><title>
Sample Title</title>
</head><body><h1>Sample
Text</h1></body>");
newWindow.status =
"Hello folks";

255
The Navigator Object
alert(window.navigator.userAgen
t);

The The navigator The

browser in the browser userAgent
window window (browser
ID)

256
The Screen Object
 The screen object contains
information about the display
window.moveTo(0, 0);
x = screen.availWidth;
y = screen.availHeight;
window.resizeTo(x, y);

257
Document and Location
 document object
 Provides some built-in arrays of
specific objects on the currently
loaded Web page
document.links[0].href = "yahoo.com";
document.write(
"This is some <b>bold text</b>");

 document.location
 Used to access the currently open
URL or redirect the browser
document.location =
"http://www.yahoo.com/"; 258
Form Validation –
Example
form-validation.html
function checkForm()
{
var valid = true;
if (document.mainForm.firstName.value == "") {
alert("Please type in your first name!");
document.getElementById("firstNameError").
style.display = "inline";
valid = false;
}
return valid;
}
…
<form name="mainForm" onsubmit="return
checkForm()">
<input type="text" name="firstName" />
…
</form>
259
The Math Object
 The Math object provides some
mathematical functions
math.ht
for (i=1; i<=20; i++) { ml
var x = Math.random();
x = 10*x + 1;
x = Math.floor(x);
document.write(
"Random number (" +
i + ") in range " +
"1..10 --> " + x +
"<br/>");
}

260
The Date Object
 The Date object provides date /
calendar functions
dates.html
var now = new Date();
var result = "It is now " + now;
document.getElementById("timeField")
.innerText = result;
...
<p id="timeField"></p>

261
Timers: setTimeout()
 Make something happen (once)
after a fixed delay

var timer = setTimeout('bang()',

5000);
5 seconds after this
statement executes,
this function is called
clearTimeout(timer);

Cancels the
timer
262
Timers: setInterval()
 Make something happen
repeatedly at fixed intervals
var timer = setInterval('clock()',
1000);
This function is
called continuously
per 1 second.
clearInterval(timer);

Stop the
timer.
263
Timer – Example
timer-demo.html
<script type="text/javascript">
function timerFunc() {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
document.getElementById("clock").value =
"" + hour + ":" + min + ":" + sec;
}
setInterval('timerFunc()', 1000);
</script>
<input type="text" id="clock" />

264
Debugging
JavaScript
Debugging JavaScript
 Modern browsers have JavaScript
console where errors in scripts are
reported
 Errors may differ across browsers
 Several tools to debug JavaScript
 Microsoft Script Editor
 Add-on for Internet Explorer
 Supports breakpoints, watches
 JavaScript statement debugger; opens
the script editor
266
Firebug
 Firebug – Firefox add-on for
debugging JavaScript, CSS, HTML
 Supports breakpoints, watches,
JavaScript console editor
 Very useful for CSS and HTML too
 You can edit all the document real-
time: CSS, HTML, etc
 Shows how CSS rules apply to
element
 Shows Ajax requests and responses
 Firebug is written mostly in 267
Firebug (2)

268
JavaScript Console
Object
 The console object exists only if
there is a debugging tool that
supports it
 Used to write log messages at
runtime
 Methods of the console object:
 debug(message)
 info(message)
 log(message)
 warn(message) 269
HTML, CSS and
JavaScript Basics
?

?
?
?
Questions
?

?
?
?
?
? ?

Web Technologies Basics: Imran Khan
No ratings yet
Web Technologies Basics: Imran Khan
82 pages
Web Development and HTML Basics
No ratings yet
Web Development and HTML Basics
144 pages
HTML Fundamentals
No ratings yet
HTML Fundamentals
75 pages
Tech 1 - HTML
No ratings yet
Tech 1 - HTML
50 pages
2 O-Level-Project-Html-Programe
No ratings yet
2 O-Level-Project-Html-Programe
35 pages
HTML Basics: HTML, Text, Images, Tables
No ratings yet
HTML Basics: HTML, Text, Images, Tables
65 pages
Introduction Toweb Development & HTML (Cs220)
No ratings yet
Introduction Toweb Development & HTML (Cs220)
47 pages
Web Technologies Notes
50% (6)
Web Technologies Notes
105 pages
HTML CSS JavaScript Basics
100% (7)
HTML CSS JavaScript Basics
225 pages
HTML CSS JavaScript Basics Useful (1) 1
100% (1)
HTML CSS JavaScript Basics Useful (1) 1
225 pages
HTML CSS JavaScript Basics
No ratings yet
HTML CSS JavaScript Basics
225 pages
Project For Nielit
No ratings yet
Project For Nielit
12 pages
1.1 HTML Fundamentals
No ratings yet
1.1 HTML Fundamentals
97 pages
Ecommerce Technologies File
No ratings yet
Ecommerce Technologies File
48 pages
HTML Basics: HTML, Text, Images, Tables
No ratings yet
HTML Basics: HTML, Text, Images, Tables
226 pages
Webbca
No ratings yet
Webbca
47 pages
Chapter Two (Web Programming)
No ratings yet
Chapter Two (Web Programming)
74 pages
HTML, CSS and Java Scripts Basics
No ratings yet
HTML, CSS and Java Scripts Basics
22 pages
Chapter 2 (Web Design and Programming)
No ratings yet
Chapter 2 (Web Design and Programming)
74 pages
HTML CSS JavaScript Basics
100% (3)
HTML CSS JavaScript Basics
91 pages
Week2 ExploringHTML
No ratings yet
Week2 ExploringHTML
65 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
HTML Basics
No ratings yet
HTML Basics
5 pages
Unit 2-Web Technologies - HTML
No ratings yet
Unit 2-Web Technologies - HTML
45 pages
HTML Handbook
No ratings yet
HTML Handbook
87 pages
HTML CSS JavaScript Basics
No ratings yet
HTML CSS JavaScript Basics
225 pages
H2avHgWOi5eKAV7l3fZt 111908
No ratings yet
H2avHgWOi5eKAV7l3fZt 111908
30 pages
Lecture01 WT Introduction To HTML
No ratings yet
Lecture01 WT Introduction To HTML
44 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
HTML Basics: This Work Is Licensed Under A
No ratings yet
HTML Basics: This Work Is Licensed Under A
83 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
22 pages
Week2 IntroductiontoWeb
No ratings yet
Week2 IntroductiontoWeb
57 pages
Lecture 1 Introduction To HTML
No ratings yet
Lecture 1 Introduction To HTML
68 pages
HTML CSS JavaScript Basics 1
No ratings yet
HTML CSS JavaScript Basics 1
227 pages
Web Development Web Development For Beginners in HTML by Vickler, Andy (Vickler, Andy)
No ratings yet
Web Development Web Development For Beginners in HTML by Vickler, Andy (Vickler, Andy)
240 pages
HTML
No ratings yet
HTML
47 pages
Web Development Fundamentals
No ratings yet
Web Development Fundamentals
304 pages
HTML and Css
No ratings yet
HTML and Css
127 pages
Unit-I - HTML
No ratings yet
Unit-I - HTML
65 pages
Web Programming Unit 1
No ratings yet
Web Programming Unit 1
24 pages
Lecture 2
100% (1)
Lecture 2
25 pages
It Skills Chapter 2
No ratings yet
It Skills Chapter 2
20 pages
Lab1 HTML
No ratings yet
Lab1 HTML
52 pages
The Racers Life
No ratings yet
The Racers Life
72 pages
HTML 101
No ratings yet
HTML 101
50 pages
Project On HTML Savita Yadav
No ratings yet
Project On HTML Savita Yadav
40 pages
Wid Unit-1 Pre
No ratings yet
Wid Unit-1 Pre
30 pages
Chapter 1
No ratings yet
Chapter 1
27 pages
Coumuter Project For Class 10
No ratings yet
Coumuter Project For Class 10
16 pages
DBMS Assignment 4 - Merged - Compressed
No ratings yet
DBMS Assignment 4 - Merged - Compressed
30 pages
Assignment 2
100% (1)
Assignment 2
25 pages
Neurolearn
No ratings yet
Neurolearn
6 pages
Preamble PDF
No ratings yet
Preamble PDF
5 pages
Atomic Models PDF
No ratings yet
Atomic Models PDF
6 pages
1) Segmentación: Las Bases de Segmentación Utilizada Por Claro en Sus
No ratings yet
1) Segmentación: Las Bases de Segmentación Utilizada Por Claro en Sus
5 pages
Exercise Solutions For Simulation With Arena PDF
0% (1)
Exercise Solutions For Simulation With Arena PDF
2 pages
CSEC EDPM CoverSheetForESBA V02 Fillable
No ratings yet
CSEC EDPM CoverSheetForESBA V02 Fillable
1 page
53302337203
No ratings yet
53302337203
3 pages
Keymaker
No ratings yet
Keymaker
3 pages
An Introduction To Single Screw Extrusion
No ratings yet
An Introduction To Single Screw Extrusion
6 pages
Noorul Islam Centre For Higher Education Noorul Islam University, Kumaracoil M.E. Biomedical Instrumentation Curriculum & Syllabus Semester I
No ratings yet
Noorul Islam Centre For Higher Education Noorul Islam University, Kumaracoil M.E. Biomedical Instrumentation Curriculum & Syllabus Semester I
26 pages
Organisng 25
No ratings yet
Organisng 25
2 pages
Assignment 8 - Professional Learning Plan
No ratings yet
Assignment 8 - Professional Learning Plan
8 pages
LEGO Mindstorms Education Kit 9797 User Guide
100% (1)
LEGO Mindstorms Education Kit 9797 User Guide
66 pages
OPENMARK 4000 Brochure-Re
No ratings yet
OPENMARK 4000 Brochure-Re
4 pages
KFR 2
No ratings yet
KFR 2
126 pages
All in One Science Class 10
No ratings yet
All in One Science Class 10
25 pages
MANUAL IG - RS20 - RS30 - RS40 - Managed - 14 - 1209 - en
No ratings yet
MANUAL IG - RS20 - RS30 - RS40 - Managed - 14 - 1209 - en
62 pages
B2 UNIT 2 Test Answer Key Standard
No ratings yet
B2 UNIT 2 Test Answer Key Standard
2 pages
Vedic Chart Insights
No ratings yet
Vedic Chart Insights
12 pages
Wycliffe's Work in South Sudan
No ratings yet
Wycliffe's Work in South Sudan
5 pages
Compressor: Dynamic Compressors Centrifugal Compressors
100% (1)
Compressor: Dynamic Compressors Centrifugal Compressors
7 pages
PM - I CIA
No ratings yet
PM - I CIA
5 pages
Assessing Wildfire Vulnerability of Vegetated Serpentine Soils in The Balkan Peninsula
No ratings yet
Assessing Wildfire Vulnerability of Vegetated Serpentine Soils in The Balkan Peninsula
13 pages
Assignment: 2C - Complete Report: Team 16
No ratings yet
Assignment: 2C - Complete Report: Team 16
118 pages
Marketing Implementation & Control Guide
No ratings yet
Marketing Implementation & Control Guide
19 pages
Error Peskin
No ratings yet
Error Peskin
4 pages
Aircraft Dji Enterprise Mavic 3 Thermal
No ratings yet
Aircraft Dji Enterprise Mavic 3 Thermal
19 pages
Seminar Face Recognition Technology
No ratings yet
Seminar Face Recognition Technology
21 pages
Roberts and Lamp - Geoeconomics Narrative
No ratings yet
Roberts and Lamp - Geoeconomics Narrative
21 pages
Design & Modification On Automatic and Pneumatic Jack System
No ratings yet
Design & Modification On Automatic and Pneumatic Jack System
4 pages
Grose 2014
No ratings yet
Grose 2014
9 pages
Agsc QP
No ratings yet
Agsc QP
15 pages
203 Boiling-Out Procedure With Cetamine
No ratings yet
203 Boiling-Out Procedure With Cetamine
4 pages