Scribd
Upload
3 views225 pages

HTML CSS JavaScript Basics

The document provides a comprehensive introduction to HTML, covering its structure, basic tags, and how to create web pages. It explains essential components such as the <!DOCTYPE> declaration, <head> and <body> sections, and various HTML elements like hyperlinks, images, and text formatting. Additionally, it discusses the differences between HTML and XHTML, emphasizing the importance of valid code and proper formatting.

Uploaded by

Aqib Khan
Copyright
© © All Rights Reserved
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
3 views225 pages

HTML CSS JavaScript Basics

The document provides a comprehensive introduction to HTML, covering its structure, basic tags, and how to create web pages. It explains essential components such as the <!DOCTYPE> declaration, <head> and <body> sections, and various HTML elements like hyperlinks, images, and text formatting. Additionally, it discusses the differences between HTML and XHTML, emphasizing the importance of valid code and proper formatting.

Uploaded by

Aqib Khan
Copyright
© © All Rights Reserved
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/ 225

HTML

Basics
HTML, Text, Images, Tables
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, 2
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
3
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.) 4
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
 5
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
6
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


8
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,
9
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>

10
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.
11
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>

12
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
13
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> 14
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>

15
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>

16
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 17
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>
18
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>
19
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>
20
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.

22
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 23
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)
24
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 25
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>
 26
<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 27
<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" />

28
<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!)
29
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>
30
<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>
31
Comments: <!-- --> Tag
 Comments can exist anywhere
between the <html></html> tags
 Comments start with <!-- and end
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">
...

32
<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>
<!-- This is the Web page body -->
</body>
</html>
33
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
34
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> 35
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> 36
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 document called cat.html


<a href="stuff/cat.html">Catalog</a>
on the same server in the 37
Hyperlinks: <a> Tag (2)
 Link to an external Web site:
<a href="http://www.devbg.org"
target="_blank">BASD</a>
 Always use a full URL, including
"http://", not just
"www.somesite.com"
 Using the target="_blank" attribute
opens the link in a new window
 Link to an e-mail address:
<a href="mailto:[email protected]?
subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
38
Hyperlinks: <a> Tag (3)
 Link to a document called apply-
now.html
 On the same server, in same directory
 Using an image as a link button:
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>

 Link to a document called


index.html
 On the same server, in the
<a href="../english/index.html">Switch to
subdirectory
English english of the parent
version</a>
directory: 39
Hyperlinks and
Sections
 Link to another location in the same
document:
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>

 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>
40
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:[email protected]?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 />
41
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:[email protected]?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 />
42
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...
<!-- The document text follows here -->
<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 ...

43
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...
<!-- The document text follows here -->
<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 ...

44
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" />
45
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>

46
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>

47
Ordered Lists: <ol> Tag
 Create an Ordered List using
<ol></ol>:
<ol type="1">
<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
48
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 49
Definition lists: <dl>
tag
 Create definition lists using <dl>
 Pairs of text and associated
definition; text is in <dt> tag,
definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>

 Renders without bullets


50
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>

51
HTML Special
Characters
HTML
Symbol Name Symbol
Entity
Copyright Sign &copy; ©
Registered Trademark
Sign
&reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
52
Special Characters –
Example
<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:chars.html
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>
<p>Telerik Academy™</p>

53
Special Chars – Example
(2)
<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:chars.html
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>
<p>Telerik Academy™</p>

54
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> 56
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>
57
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>
58
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) 60
HTML Tables (2)
 Start and end of a table
<table> ... </table>

 Start and end of a row


<tr> ... </tr>

 Start and end of a cell in a row

<td> ... </td>

61
Simple HTML Tables –
Example
<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>
62
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>
63
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
64
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>
65
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 66
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>
67
Cell Spacing and
Padding
 Tables have two important
attributes:
 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the


empty space empty space
between around the cell
cells content 68
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>

69
Cell Spacing and Padding
– Example (2)
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>

70
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
71
Column and Row Span –
Example
table-colspan-rowspan.html
<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>
<td>Cell[2,3]</td></tr>
</table>

72
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
] ]

73
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 75
 Get Method Example:

 Example of Post Method:


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.
77
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" /> 78
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" />

79
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
80
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> 81
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>

82
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
83
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" /> 84
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" />
85
</p>
HTML Forms – Example
form.html (continued)
(3)

86
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 87
HTML Frames
<frameset>, <frame> and <iframe>
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 89
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>

 Note the target attribute


applied to the <a> elements in
the left frame. 90
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>

91
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
 93
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.
94
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
95
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 97
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 98
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

99
Why “Cascading”? (2)

100
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 101
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 102
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 }
103
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}

This will match <h1> tags, elements


104
Selectors (3)
 Pseudo-classes define state
 :hover, :visited, :active , :lang
 Pseudo-elements define element
"parts" or are used to generate
content
 :first-line , :before, :after
a:hover { color: red; }
p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }

105
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”: 106
Selectors (5)
 > selector – matches direct child nodes:
p > .error {font-size: 8px}

This will match all elements with class


error, direct children of <p> tag
 [ ] – matches tag attributes by regular
expression:
img[alt~=logo] {border: none}

This will match all <img> tags with alt


attribute containing the word logo
 .class1.class2 (no space) - matches
elements with both (all) classes applied 107
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
108
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; }
109
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)
110
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

111
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>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>

112
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>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>

113
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 114
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:
115
Embedded Styles
 Embedded in the HTML in the
<style> tag:
<style type="text/css">

 The <style> tag is placed in the


<head> section of the document
 type attribute specifies the MIME
type
 MIME describes the format of the
content
 Other MIME types include text/html,
image/gif, text/javascript … 116
Embedded Styles:
Example
embedded-
stylesheets.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>Style Sheets</title>
<style type="text/css">
em {background-color:#8000FF;
color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
117
Embedded Styles:
Example (2)
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text.
Here
is some text. Here is some text. Here is
some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>
118
Embedded Styles:
Example (3)
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text.
Here
is some text. Here is some text. Here is
some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>
119
External CSS Styles
 External linking
 Separate pages can all use a shared
style sheet
 Only modify a single file to change the
styles across your entire Web site (see
http://www.csszengarden.com/)

 link tag (with a rel attribute)


 Specifies a relationship
<link rel="stylesheet" between
type="text/css"
href="styles.css">
current document and another
document
120
External CSS Styles (2)
@import
 Another way to link external CSS
files
 Example:
<style type="text/css">
@import url("styles.css");
/* same as */
@import "styles.css";
</style>

 Ancient browsers do not recognize


@import
121
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 }

122
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>
…

123
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>
124
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>
125
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 126
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
127
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;
128
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 129
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%;
130
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 131
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

132
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
133
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 134
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.
135
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
 136
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 137
The Box Model

138
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

139
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 140
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 141
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 142
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)

143
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 144
Float (2)
 How floated elements are
positioned

145
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 146
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;

147
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 148
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

149
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)
150
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
151
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
152
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 153
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

154
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.

155
CSS Development Tools
 Visual Studio – CSS Editor

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

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

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

160
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

161
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
162
DHTML
Dynamic Behavior at the Client Side
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

XHTM JavaScri
CSS DOM
L pt

164
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 165
JavaScript
Dynamic Behavior in a Web
Page
JavaScript
 JavaScript is a front-end scripting
language developed by Netscape
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
167
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 168
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 169
The First Script
first-
script.html
<html>

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

</html>

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

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

</html>

171
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>

172
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 173
Calling a JavaScript
Function from Event
Handler – Example
<html> image-
<head> onclick.html
<script type="text/javascript">
function test (message) {
alert(message);
}
</script>
</head>

<body>
<img src="logo.gif"
onclick="test('clicked!')" />
</body>
</html>

174
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" />
</body>
</html>
 External JavaScript file:
function sample() {
alert('Hello from sample.js!')
} sample.j
s 175
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# 177
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"};

178
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
179
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

180
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);
181
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 182
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>
183
</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>
184
JavaScript Prompt –
Example
prompt.ht
ml
price = prompt("Enter the price",
"10.00");
alert('Price + VAT = ' + price * 1.2);

185
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
186
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 + ";");
}
187
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
}
188
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
189
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.

190
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
191
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 193
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"
194
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"
195
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 196
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…
197
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
198
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
199
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;

201
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 202
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

203
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 204
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
205
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>
206
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 208
DOM Hierarchy –
Example

window

navigato screen documen history location


r t

form form

butto form
n

209
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";

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

The The navigator The


browser in the browser userAgent
window window (browser
ID)

211
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);

212
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/"; 213
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>
214
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/>");
}

215
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>

216
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
217
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.
218
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" />

219
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
221
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 222
Firebug (2)

223
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) 224
HTML, CSS and
JavaScript Basics
?

?
?
?
Questions
?

?
?
?
?
? ?

You might also like