HTML CSS JavaScript Basics

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, Script, Style
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. 4. 5.
The <div> and <span> elements

HTML Tables HTML Forms
3
How the Web Works?

WWW use classical
client / server architecture
HTTP is text-based request-response protocol

HTTP
Page request HTTP Server response
Client running a Web Browser
Server running Web Server Software (IIS, Apache, etc.)

4
What is a Web Page?

Web pages are text files containing HTML Hyper Text Markup
HTML
Language
A notation for describing

document structure (semantic markup)
formatting (presentation markup)
Looks (looked?) like:

A Microsoft Word document
The markup tags provide information about
the page content structure

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
Microsoft Word
Visual Studio
HTML Basics
Text, Images, Tables, Forms
HTML Structure
HTML is comprised of elements and tags

Begins with <html> and ends with </html>
Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
Tags have attributes:

<img src="logo.jpg" alt="logo" />
HTML describes structure using two main sections: <head> and <body>
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, formatting can be
sacrificed
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> Opening tag <html> <head> <title>My First HTML Page</title> </head> Closing tag <body> <p>This is some text...</p> </body> </html>
An HTML element consists of an opening tag, a closing tag and the content inside.
11
First HTML Page: Header

HTML header
12
First HTML Page: Body

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
Example:
Attribute alt with value "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 is hovered with the mouse
Some elements have obligatory attributes
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.html
Headings and Paragraphs Example
<!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.html
Headings and Paragraphs Example (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
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
See http://w3.org/QA/2002/04/valid-dtd-list.html for a list of possible doctypes

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 Attribute
are deprecated in XHTML, most are moved to CSS minimization is forbidden, e.g.
<input type="checkbox" checked>
<input type="checkbox" checked="checked" />

Note: Web browsers load XHTML faster than
HTML and valid code faster than invalid!

25
The <head> Section

Contains
information that doesnt 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>
<script>
<style> <!- comments -->
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 titles
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!) VBScript JScript

29
The <script> Tag Example

<!DOCTYPE HTML>
<html> <head> <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>
scripts-example.html
30
<head> Section: <style>
The <style> element embeds formatting information (CSS styles) into an HTML page
<html> 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 
<!- 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 </body>
<html> <head><title>Test page</title></head> <body>  </body> </html>
33
Text Formatting
Text formatting tags modify the text between the opening tag and the closing tag
Ex. <b>Hello</b> makes Hello bold
<b></b> <i></i> <u></u> <sup></sup> <sub></sub> <strong></strong> <em></em> <pre></pre> <blockquote></blockquote> <del></del> bold italicized underlined Samplesuperscript Samplesubscript strong emphasized Preformatted text Quoted text block Deleted text strike through
34
Text Formatting Example

text-formatting.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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, were using XHMTL 1.0 transitional.<br /> Next line.</p> </body> </html>
35
Text Formatting Example (2)

text-formatting.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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, were using XHMTL 1.0 transitional.<br /> Next line.</p> </body> </html>
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>
parent.html on the same server in the parent directory:

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

<a href="stuff/cat.html">Catalog</a>
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:bugs@example.com?subject=Bug+Report"> Please report bugs here (by e-mail only)</a>
38
Hyperlinks: <a> Tag (3)

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>
index.html
On the same server, in the subdirectory english of the parent directory:

<a href="../english/index.html">Switch to English version</a>
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 document:

<a href="chapter3.html#section3.1.1">Go to 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: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 />
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: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 />
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...  <h2 ... <h2 ... <h3 ... id="section1">Introduction</h2> Section 1 follows here ... id="section2">Some background</h2> Section 2 follows here ... 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...  <h2 ... <h2 ... <h3 ... id="section1">Introduction</h2> Section 1 follows here ... id="section2">Some background</h2> Section 2 follows here ... 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 alt height width border Location of image file (relative or absolute) Substitute text for display (e.g. in text mode) Number of pixels of the height Number of pixels of the width Size of border, 0 for no border
Example:
<img src="./php.png" alt="PHP Logo" />
45
Miscellaneous Tags
<hr />: Draws a horizontal
<hr size="5" width="70%" />
rule (line):
<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>
Attribute values for type are 1, A, a, I, or i

1. Apple 2. Orange 3. Grapefruit i. Apple ii. Orange iii. Grapefruit a. Apple I. Apple b. Orange A. Apple c. Grapefruit II. Orange B. Orange III. Grapefruit C. Grapefruit
48
Unordered Lists: <ul> Tag

Create an Unordered List using
<ul type="disk"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul>
<ul></ul>:
Attribute values
for type are:
disc, circle or square

Apple
Orange Pear
o Apple
o Orange o Pear
Apple
Orange 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 Definition is indented

50
Lists Example
<ol type="1"> <li>Apple</li> <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>
lists.html
51
HTML Special Characters

Symbol Name
Copyright Sign Registered Trademark Sign Trademark Sign Less Than Greater Than Ampersand Non-breaking Space
HTML Entity
© ® ™ < > &
Symbol
< > & "
52
Em Dash
Quotation Mark Euro British Pound Japanese Yen
—
" € £ ¥
Special Characters Example

<p>[>> Welcome special-chars.html <<]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>© 2006 by Svetlin Nakov & his team</p> <p>Telerik Academy</p>
53
Special Chars Example (2)

<p>[>> Welcome special-chars.html <<]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>© 2006 by Svetlin Nakov & 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 dont 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 Block style element Used with CSS Example:
divisions within a page
div-and-span.html
<div style="font-size:24px; color:red">DIV example</div>
<p>This one is <span style="color:red; fontweight: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; fontweight: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)
Tables should not be used for layout. Use CSS
floats and positioning styles instead

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> </table>
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> </table>
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 <colgroup> and <col> define columns (most often used to set column widths)
64
Complete HTML Table: Example

<table> columns <colgroup> <col style="width:100px" /><col /> </colgroup> th header <thead> <tr><th>Column 1</th><th>Column 2</th></tr> </thead> footer <tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr> </tfoot> Last comes the body (data) <tbody> <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: Example (2) By default, header text

<table> is bold and centered. table-full.html <colgroup> <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> the footer is <tr><td>CellAlthough 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell before 2.1</td><td>Cell the data in 2.2</td></tr> the </tbody> code, it is displayed last </table>
66
Nested Tables
Table data cells (<td>) can contain nested tables (tables within tables):
<table> <tr> <td>Contact:</td> <td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr> </table>
nested-tables.html
67
Cell Spacing and Padding

Tables have two important attributes:
cellspacing
cellpadding
cell cell
cell cell
cell cell
cell cell
Defines the empty space between cells
Defines the empty space around the cell content

68
table-cells.html
Cell Spacing and Padding Example
<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
table-cells.html
Cell Spacing and Padding Example (2)
<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
colspan="1"
cell[1,2]
rowspan
rowspan="1"
cell[1,2]
colspan="1" cell[1,1]
rowspan="2"
cell[1,1] cell[2,1] colspan="2"
cell[2,1] rowspan="1"
Defines how many columns the cell occupies
Defines how many rows the cell occupies

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 Example (2) 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> Cell[1,1] Cell[2,1] </table>
Cell[1,2] Cell[2,2]
Cell[1,3]
Cell[3,2]
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>
Example:
The method" attribute tells how the form data 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
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

76
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 coordinates are sent
<input type="image" src="submit.gif" name="submitBtn" alt="Submit" />
Ordinary button used for Javascript, no default action

<input type="button" value="click me" />
80
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> </select>
81
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 ID.
<label 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 in order to pass accessibility validation.
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 (2)

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

form.html (continued)
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 elements with tabindex="Y"
Elements with negative tabindex are skipped, however, this is not defined in the standard
<input type="text" tabindex="10" />
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 (browsers, search engines, etc.)
A <noframes> element is used to provide content for non-compatible agents.
89
Frames are not supported by all user agents
HTML Frames Demo

frames.html
<html> <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-demo.html
<iframe name="iframeGoogle" 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 Visibility, Display, Overflow CSS Development Tools
93
CSS: A New Philosophy

Separate content from presentation!
Content (HTML document)

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 lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus.
Presentation (CSS Document)

Bold Italics
Indent
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 lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus.
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 tags and attributes are deprecated, e.g. font, center, etc.
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 and text-
decoration
101
Style Sheets Syntax
Stylesheets consist of rules, selectors, declarations, properties and values
http://css.maxdesign.com.au/

Selectors are separated by commas
Declarations are separated by semicolons

Properties and values are separated by colons
h1,h2,h3 { color: green; font-weight: bold; }
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)
Examples:
.header a { color: green } #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 with class link, and element with id top-link
104
Selectors (3)
Pseudo-classes
define state or are
:hover, :visited, :active , :lang

Pseudo-elements define element "parts"
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>
* universal selector (avoid or use with care!):

p * {color: black}
This will match all descendants of <p> element
+ selector used to match next sibling:

img + .link {float:right}
This will match all siblings with class name link that appear immediately after <img> tag
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 at the same time
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
Percentages, e.g. 50%

Percentage of what?...
Zero can be used with no unit: border: 0;
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 sizes differ most often and usually developers reset them
* { margin: 0; padding: 0; } body, h1, p, ul, li { margin: 0; padding: 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)
Usually a file with .css extension Linked via <link rel="stylesheet" href=> tag or @import directive in embedded CSS block
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>  <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>  <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
Important user styles (max priority)

a { color: red !important ; }
http://www.slideshare.net/maxdesign/css-cascade-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:
http://www.smashingmagazine.com/2007/07/27/css-specificity-thingsyou-should-know/ http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm
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
Used for document-specific styles
116
Embedded Styles: Example

embedded-stylesheets.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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 between current document and another document
<link rel="stylesheet" type="text/css" href="styles.css">
link elements should be in the <head>

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 Use @import in an external CSS file to workaround the IE 32 CSS file limit
121
External Styles: Example

styles.css
/* CSS Document */
a { text-decoration: none }
a:hover { text-decoration: underline; color: red; background-color: #CCFFCC }

li em ul ul ul { color: red; font-weight: bold } { margin-left: 2cm } { 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/xhtml1transitional.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

<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

<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 generic font
font-weight can be normal, bold, bolder, lighter or a number in range [100 900]
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

background-attachment
fixed / scroll
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

Examples:
background-position: top left; 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 using shorthand rule
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

border-top-style, border-left-color,
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 border:0

134
When to avoid
Width and Height

width defines numerical value
for the width for the
of element, e.g. 200px

height defines numerical value
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 What are collapsing margins?
136
Margin and Padding: Short Rules

margin:
5px; 10px 20px;
Sets all four sides to have margin of 5 px;

margin:
top and bottom to 10px, left and right to 20px;

margin:
5px 3px 8px; 1px 3px 5px 7px;

padding
137
top 5px, left/right 3px, bottom 8px

margin:
top, right, bottom, left (clockwise from top)

Same for
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 page scrolling
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 elements can apply height like block-level elements
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
Understanding stacking context
Each positioned element creates a 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 of #A.
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 collapse

floated inline elements can apply height
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 them
Specific displays like table-cell and table-row
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, rowresize, 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 whether to brake the lines if needed
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

to maintain and update
Pages are easier
154
Maintenance Example
Title Title Title Title Some random Some random text here. You text here. You Some random cant read it cant read it Title text here. You Title Some random anyway! Har har anyway! Har har cant read it Title text here. You Title Some random har! Use Css. Some random har! Use Css. anyway! Har har cant read it text here. You text here. You Some random Some random har! Use Css. anyway! Har har cant read it cant read it text here. You text here. You Title har! Use Css. anyway! Har har anyway! Har har cant read it cant read it Title Title Some random har! Use Css. har! Use Css. anyway! Har har anyway! Har har text here. You Some random Some random har! Use Css. har! Use Css. cant read it text here. You text here. You Title anyway! Har har cant read it cant read it Title Some random har! Use Css. anyway! Har har anyway! Har har Title Title Title text here. You Some random har! Use Css. har! Use Css. Title cant read it text here. You Some random Some random Some random anyway! Har har cant read it Some random text here. You text here. You Title text here. You har! Use Css. anyway! Har har text here. You cant read it cant read it cant read it Title Some random har! Use Css. cant read it anyway! Har har anyway! Har har anyway! Har har text here. You Title Some random anyway! Har har har! Use Css. har! Use Css. har! Use Css. cant read it Title Title text here. You har! Use Css. Some random anyway! Har har cant read it Title text here. You Some random Some random har! Use Css. anyway! Har har cant read it text here. You text here. You Some random har! Use Css. anyway! Har har cant read it cant read it text here. You har! Use Css. anyway! Har har anyway! Har har cant read it Title Title har! Use Css. har! Use Css. anyway! Har har Some random Some random har! Use Css. Title text here. You text here. You Title cant read it cant read it Title Some random Some random anyway! Har har anyway! Har har text here. You Title Title Title text here. You Some random har! Use Css. har! Use Css. cant read it cant read it text here. You Some random Some random Some random anyway! Har har anyway! Har har cant read it Title text here. You text here. You text here. You har! Use Css. har! Use Css. anyway! Har har cant read it cant read it cant read it Some random har! Use Css. anyway! Har har anyway! Har har anyway! Har har text here. YouTitle Title har! Use Css. har! Use Css. har! Use Css. cant read it Some random Some random anyway! Har har Title text here. You Title Title text here. You har! Use Css. cant read it cant read it Some random Some random Some random anyway! Har har anyway! Har har Title text here. You text here. You text here. You har! Use Css. har! Use Css. cant read it cant read it cant read it Some random anyway! Har har anyway! Har har anyway! Har har Title text here. You Title Title har! Use Css. har! Use Css. har! Use Css. cant read it Title Title Title Some random Some random Some random anyway! Har har text here. You text here. You text here. You Some random Some random Some random har! Use Css. cant read it cant read it cant read it text here. You text here. You Title text here. You anyway! Har har anyway! Har har anyway! Har har cant read it cant read it cant read it Some random har! Use Css. har! Use Css. har! Use Css. anyway! Har har anyway! Har har anyway! Har har text here. You har! Use Css. har! Use Css. har! Use Css. cant read it Title Title anyway! Har har Title Title Some random Some random har! Use Css. text here. You text here. You Some random Some random cant read it cant read it Title text here. You text here. You anyway! Har har anyway! Har har cant read it cant read it Title Some random har! Use Css. har! Use Css. anyway! Har har anyway! Har har text here. You Title Some random har! Use Css. har! Use Css. cant read it Title text here. You Title Some random anyway! Har har cant read it text here. You Title Some random Some random har! Use Css. anyway! Har har cant read it text here. You text here. You Some random har! Use Css. anyway! Har har cant read it cant read it Title Title text here. You har! Use Css. anyway! Har har anyway! Har har cant read it Some random Some random har! Use Css. har! Use Css. anyway! Har har text here. You text here. You Title Title har! Use Css. cant read it cant read it Some random Some random anyway! Har har anyway! Har har text here. You text here. You har! Use Css. har! Use Css. cant read it cant read it anyway! Har har anyway! Har har har! Use Css. har! Use Css.
CSS file
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
Introduction to JavaScript

What is JavaScript Implementing JavaScript into Web pages

In <head> part
In <body> part
In external .js file
161
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 users actions
DHTML = HTML + CSS + JavaScript
DHTML XHTML CSS JavaScript DOM

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 on the page)
JavaScript
defines dynamic behavior
Programming logic for interaction with the user, to handle events, etc.
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

Simple and flexible Powerful to manipulate the DOM
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 Performing complex calculations Custom HTML controls, e.g. scrollable table Implementing AJAX functionality
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 users
browser and OS
Can be used as object-oriented language Can handle exceptions Can perform asynchronous
server calls (AJAX)

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> tag the head
Files usually have .js extension
<script src="scripts.js" type="text/javscript"> <! code placed here will not be executed! --> </script>
Highly recommended
The .js files get cached by the browser
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 tag attributes

Executed when the event is fired by the browser
<img src="logo.gif" onclick="alert('clicked!')" />
173
Calling a JavaScript Function from Event Handler Example

<html> image-onclick.html <head> <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-JavaScript.html <head> <script src="sample.js" type="text/javascript"> </script> </head> The <script> tag is always empty. <body> <button onclick="sample()" value="Call JavaScript function from sample.js" /> </body> </html>
External JavaScript file:

function sample() { alert('Hello from sample.js!') }
sample.js
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# delegates)
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)

178
var my_hash = {a:2, b:3, c:"text"};
Everything is Object
Every variable
can be considered as object

objects.html
For example strings and arrays have 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)); //shows 'es' var arr = [1,3,4]; 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:
// 18
alert(parseInt("9") + 9);
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 an element / getting the last element:

arr.push(3); var element = arr.pop();
Reading the number of elements (array length):

arr.length;
Finding element's index in the array:

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 text, [OK] button and [Cancel] button:

confirm("Are you sure?");
Prompt box
Contains text, input field with default value:

prompt ("enter amount", 10);
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> </head>
183
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.html
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; }
Symbol
> < >= <= ==
Meaning
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
function average(a, b, c) { var total; total = a+b+c; return total/3; }
Parameters come in here. Declaring variables is optional. 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 arguments passed via arguments array
function sum() { var sum = 0; for (var i = 0; i < arguments.length; i ++) sum += parseInt(arguments[i]); return sum; } functions-demo.html alert(sum(1, 2, 4));
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 reloading it
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" onmouseover="change('off')" onmouseout="change('on')" />
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
Example: style.width, style.marginTop, style.backgroundImage

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 differences

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 Can be set with HTML attributes:
<img src="test.gif" onclick="imageClicked()" />
Can be accessed through the DOM:

var img = 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
E.g. the button that was clicked
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 events 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 was loaded / unloaded
205
onload Event Example

onload event
onload.html
<html> <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 users display properties
browser
Holds information about the browser
208
DOM Hierarchy Example
window
navigator
screen
document
history
location
form
form form
button
209
Opening New Window Example

window.open()
window-open.html
var newWindow = window.open("", "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.userAgent);
The browser window
The navigator in the browser window
The userAgent (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
for (i=1; i<=20; i++) { var x = Math.random(); x = 10*x + 1; x = Math.floor(x); document.write( "Random number (" + i + ") in range " + "1..10 --> " + x + "<br/>"); }
math.html
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 JavaScript

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) error(message)
224
HTML, CSS and JavaScript Basics
Questions?

HTML CSS JavaScript Basics

Uploaded by

HTML CSS JavaScript Basics

Uploaded by

HTML Basics

HTML, Text, Images, Tables

Basic Tags: Hyperlinks, Images, Formatting

Table of Contents (2)

The <div> and <span> elements

How the Web Works?

client / server architecture

HTTP is text-based request-response protocol

Client running a Web Browser

Server running Web Server Software (IIS, Apache, etc.)

What is a Web Page?

A notation for describing

formatting (presentation markup)

Looks (looked?) like:

the page content structure

Creating HTML Pages

.htm or .html file

NotePad, NotePad ++, PSPad

Microsoft FrontPage Macromedia Dreamweaver

HTML is comprised of elements and tags

Tags have attributes:

HTML Code Formatting

For performance reasons, formatting can be

First HTML Page

First HTML Page: Tags

First HTML Page: Header

First HTML Page: Body

Some Simple Tags

<a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a>

<img src="logo.gif" alt="logo" />

Some Simple Tags Example

Some Simple Tags Example (2)

Attributes specify properties and behavior

Attribute alt with value "logo"

<img src="logo.gif" alt="logo" />

Few attributes can apply to every element:

Headings and Paragraphs

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

Headings and Paragraphs Example

Headings and Paragraphs Example (2)

attitude towards HTML

The <!DOCTYPE> Declaration

HTML documents must start with a document type definition (DTD)

See http://w3.org/QA/2002/04/valid-dtd-list.html for a list of possible doctypes

HTML vs. XHTML

more strict than HTML

XHTML vs. HTML (2)

<input type="checkbox" checked>

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

HTML and valid code faster than invalid!

The <head> Section

information that doesnt show directly on the viewable page

mandatory single <title> tag

Can contain some other tags, e.g.

<head> Section: <title> tag

Title should be placed between <head> and </head> tags

<head> Section: <meta>

describe the content contained within the page

<head> Section: <script>

scripts into an HTML document

JavaScript (it is not Java!) VBScript JScript

The <script> Tag Example

<head> Section: <style>

Comments:  Tag

<body> Section: Introduction

portion of the page

after the <head> </head> section

Begins with <body> and ends with </body>

Text Formatting Example

Text Formatting Example (2)

Hyperlinks: <a> Tag

form.html on the same server in the same directory:

Link to a document called

parent.html on the same server in the parent directory: