Download Document

1



Web developers view web pages as
documents that must be created according to
authoring and development guidelines
Web developers use HTML or XHTML to write
code of a web page
Web browsers have a built-in interpreter to
render the results of the code in its window
• The World Wide Web (WWW) is most often
called the Web.
• The Web is a network of computers all
over the world.
• All the computers in the Web can
communicate with each other.
• All the computers use a communication
standard called HTTP.
3
• Web information is stored in documents
called Web pages.
• Web pages are files stored on computers
called Web servers.
• Computers reading the Web pages are
called Web clients.
• Web clients view the pages with a program
called a Web browser.
• Popular browsers are Internet Explorer
and Mozilla Firefox & Chrome.
4
1.
2.
3.
4.
The Web browser makes a request to the web server
The server which is running an HTTP server that is
listening for requests, receives the request and
locates the document.
The server then sends back the content of the
requested page to the client.
The browser receives the information from the
server and displays the page in the browser window.
The transaction is now complete.
5
A browser fetches a Web page
from a server by a request.
 A request is a standard HTTP
request containing a page address.
 A page address looks like this:
http://www.ibm.com/index.htm.

6


All Web pages are addressed with URLs
The URL specifies
◦ A server name
◦ A directory path
◦ A filename

URLs are part of the HTTP (Hypertext
Transfer Protocol) communications
protocol.
7






URL: Uniform Resource Locator
W3C: World Wide Web Consortium
HTML: Hyper-Text Markup Language
DOCTYPE: Document Type Declaration
XHTML: Extensible Hyper-Text Markup
Language
CSS: Cascading Style Sheets
All browsers are designed to display
.html and .htm files
 Browsers have to rework their page
displays whenever a browser window
is resized
 Web pages can look a little different
on different computers
 Web page authors cannot completely
control their page displays

9
All Web pages contain instructions for
display
 The browser displays the page by
reading these instructions.
 The most common display
instructions are called XHTML tags.
 XHTML tags look like this
<h1>This is a heading</h1>.

10

Definitions
◦ HTML
 The HyperText Markup Language
 The language used to structure text-based
information in a document
 by denoting certain text as headings, paragraphs,
lists, etc — and to supplement that text with
interactive forms, embedded images, and other
multimedia objects
◦ XHTML
 The eXtensible HyperText Markup Language
 XHTML consists of all the elements in HTML 4.01
combined with the syntax of XML.
 Allows users to define their own “tags” for defining
structure, layout, etc.

A web site may contain a combination of 13
standard elements:
Text
Lists
Hyperlinks
Colour
Graphics
Images
Image Maps
Sound
Video
Tables
Layers
Frames
Forms

The content of a web site can be classified as:
◦ Static content – does not change regularly e.g.
personal and professional web sites
◦ Dynamic content – changes regularly e.g.,
newspaper web sites, weather report sites…


After a web page layout is designed, one needs to
use HTML/XHTML code to implement the design
Introduction to XHTML
◦
◦
◦
◦
◦
◦
◦
◦
◦
◦
Syntax
Document Tags
Authoring tools
Text formatting
Special characters
Hyperlinks
Lists
Meta Data
Colours
Audio & Video

XHTML uses tags that are enclosed in brackets < >

XHTML content is contained between tags

Tags and content form an XHTML element

Generic element form: <start-tag> content <end-tag>

Start and end tags have the same name, end tag has a
‘/’ before it: <b>This is BOLD</b>

XHTML tags can be nested according to the “first open,
last closed” rule: <b><i>bold and italic</i></b>

XHTML rules
◦
◦
◦
◦
◦
◦
Tags must be closed
XHTML is case sensitive
Use lower case tags and attribute names, e.g. width=“100%”
All attribute values must be double quoted, e.g. “100%”
Tags must not overlap (i.e., during nesting)
Comments can be used
 <!-- This text is a comment -->

Do not use obsolete (deprecated) tags

Browsers ignore misspelled tags (and many other things!)
XHTML formatting commands
control Web page displays
 All XHTML formatting is achieved
with XHTML elements
 All XHTML elements are based on
XHTML tags and tag-pairs
 XHTML files can be created with text
editors

17





Doctype
Head
Title
Body
HTML
DOCTYPE
<HTML>
<HEAD>
<TITLE> stuff</TITLE>
</HEAD>
<BODY>
<P>stuff that people see</p>
</BODY>
</HTML>
Versions:
 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd>


<TITLE> </TITLE>
<META> </META>
◦ Language, Encoding, Keywords
◦ Self-closing
 <meta Content> </meta>
 <meta Content />
Page Properties
<html>
<head>
<title>
(insert text for the browser’s title bar here)
</title>
</head>
<body>
(insert visible Web page elements here)
</body>
</html>
22






The Web standards ( rule-making body )
of the Web is the W3C.
It is not made up by Mozilla or Microsoft.
W3C stands for the
World Wide Web Consortium.
W3C puts together specifications for
Web standards.
The most essential Web standards are
XHTML, CSS and XML.
The latest HTML standard is XHTML 2.0
23







SGML stands for “Standard Generalized Markup
Language” and was developed in the 1960’s as the
first standardized markup language
HTML was developed in the early 1990’s as a
lightweight application of SGML for transporting
documents over HTTP
HTML documents were portable among different
operating systems and computer applications
XML was developed to address the limitations of
HTML
XML is a meta-language, or a set of rules, for
building other languages
XML and HTML are both SGLM applications
XHTML is the successor of HTML
24
25





The first version of XHTML 1.0, was released in 2000
W3C description of XHTML :
◦ XHTML 1.0 reformulates HTML as an XML application. This
makes it easier to process and easier to maintain. XHTML
1.0 borrows elements and attributes from W3C's earlier
work on HTML 4, and can be interpreted by existing
browsers, by following a few simple guidelines. This allows
you to start using XHTML now!
XHTML is extensible meaning that its element set is not
finite, like that of HTML. Additional elements or other
XML-based languages can be integrated with XHTML
XHTML consists of the element set of HTML reformulated
to adhere to the syntax rules of XML
XHTML is compatible with existing web browser
technology and will be compatible with future XML-based
clients
26

Elements consist of a start tag, content and an end tag:
Start Tag
Content
End Tag
<h1> Introduction to XHTML</h1>

Empty elements are used to describe elements that do not
have any content: <br />
 Attributes are used to describe elements and are placed
inside the open tag of an element:
<img src=“picture.jpg” alt= “This is my picture” />
alt attribute specifies an alternate text for an image
 Comments are used to notate the document, but are not
processed by parsers:
<!-- This is a comment -->
27
XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING
presentational and deprecated elements (like font). Framesets are not
allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE
presentational or deprecated elements (like font). Framesets are not allowed.
The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset
content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
28
The tags that make up the framework of a typical XHTML
document include the following:

Document type definition (DTD) tag – DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
◦ Describes (to web browsers) what type/version of (x)html is used
◦ Specifies rules that apply to the markup of documents
◦ Used for document syntax validation (e.g. strict) and for web
browser to process document in proper “parsing” mode (impacts
on consistency and speed of display)


An XHTML document is validated against a Document Type
Definition.
Top-level tag, generally <html>
◦ Tag indicates the beginning and /end of an XHTML document

Header section, delimited by <head> tags
◦ Provides extra information about the document
◦ Serves as a container for styles, global scripts,
etc.
◦ The main tags used in this section are:
 <title> - specifies the document title
 <meta> - provides information to search engines
 <style> - declares general & local styles for the
document
 <script> - declares any scripting information






Web pages are designed for surfers and surf engines
The <meta> tag increases the chances of page
indexing
Meta data refers to data about XHTML document
rather than the document content
Browsers do not render meta data
Search engines use it for indexing and ranking the
page hits in a given search
Some attributes of this tag are name, content, httpequiv, etc.

Most often the meta element is used to provide
information that is relevant to browsers or search
engines like describing the content of your
document.
<meta name=“keywords” content=“open, source, PHP,
programming, code” />


When a search engine indexes the page, it includes
the extra information -> open, source, etc.
It provides these keywords to search agents
requesting them
<meta name="description" content="Low prices on digital
cameras, MP3, LCD TVs, books, music, DVDs, video games,
software, home & garden and much, much more. Free delivery
on orders over $15." />
<meta name="keywords" content="digital camera, LCD TV,
books, DVD, low prices, video games, pc games, software,
electronics, home, garden, video, amazon" />

Specify information about a document
◦ Attribute name
 Identifies the type of meta element
 “keywords” ( name = “keywords” )
 Provides search engines with a list of words that describe
a page
 “description” ( name = “description” )
 Provides a description of a site
◦ Attribute content
 Provides the information search engine use to catalog
pages
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
webpage content goes here!
</BODY>
</HTML>
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5
<!-- Fig. 5.8: main.html -->
6
<!-- <meta> tag
-->
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Welcome</title>
11
12
<!-- <meta> tags provide search engines with -->
13
<!-- information used to catalog a site
14
<meta name = "keywords" content = "Web page, design,
-->
15
XHTML, tutorial, personal, help, index, form,
16
contact, feedback, list, links, frame, deitel" />
17
18
<meta name = "description" content = "This Web site will
19
help you learn the basics of XHTML and Web page design
20
through the use of interactive examples and
21
instruction." />
22
23
24
</head>
25
<body>
26
27
<h1>Welcome to Our Web Site!</h1>
28
29
<p>We have designed this site to teach about the wonders
30
of <strong><em>XHTML</em></strong>. <em>XHTML</em> is
31
better equipped than <em>HTML</em> to represent complex
32
data on the Internet. <em>XHTML</em> takes advantage of
33
XML’s strict syntax to ensure well-formedness. Soon you
34
will know about many of the great new features of
35
<em>XHTML.</em></p>
36
37
<p>Have Fun With the Site!</p>
38
39
</body>
40 </html>
HTML element
HTML element
HTML element
<body>
<p>
…….
</p>
</body>
</html>
HTML element
<!DOCTYPE ….>
<html>
<head>
…..
</head>
<?xml version=”1.0”?>
<!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> Introduction to XHTML</title>
</head>
<body>
<strong> Course Name: </strong> Introduction to XHTML <br />
<strong> Course Number: </strong> CS 112 <br />
<strong> Instructor: </strong> T. Perdue <br />
<strong> Meeting Time: </strong> Wednesday, 5:30pm–7:30pm <br />
<p />
<strong> Course Description: </strong> This course covers the basics
of how to write XHTML Web documents.
<p />
<strong> Prerequsites: </strong>
<ul>
<li> CS 101—Introduction to Computers </li>
<li> CS 103—Introduction to Web Site Design </li>
<li> CS 110—Designing Web Pages with HTML </li>
</ul>
</body>
</html>
39
40
TextPad is an editor that allows you to type text.
Can be used to create web pages
View in Web browser
file name
41
42



XHTML shouldn’t contain any deprecated
(old and out of date) tags.
Needs to be well formed (see slide 25)
Needs to reference a DTD (DOCTYPE)
(Document Type Definition)


Prefers that character encoding is declared
(for transitional – is required for strict)
Validate documents online at the W3C’s
Validator website: http://validator.w3.org
43
http://validator.w3.org
Choose File Upload
Browse to find file
Then click here
Get this screen if
code is valid
44
Valid documents must be well-formed and adhere to the rules of a DTD:

XHTML Transitional:

XHTML Frameset:

XHTML Strict:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
45
1.
2.
3.
4.
5.
6.
XHTML documents must contain the root
element <html>
All elements must have a start and end tag,
or must be an empty element
Elements must be nested properly
All attributes must have a value
Attributes must be placed in the start tag
Element names are case sensitive
46
Type the following xhtml code in Text pad, validate it
and then view it in a browser
<html>
<head>
<title>The First Page in these notes</title>
</head>
<body>
<h1>Your text goes here or possibly images</h1>
<p><strong> Or it could go here</strong></p>
</body>
</html>
47
Now edit the code to look like this and validate it and
then view in a browser
<?xml version=”1.0”?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1“ />
<title>The First Page in these notes</title>
</head>
<body>
<h1>Your text goes here or possibly images</h1>
<p><strong> Or it could go here</strong></p>
</body>
</html>
48
XHTML - Basic Formatting
49
The following slides do not contain a complete
list of available tags and attributes for XHTML
Refer to the web site
http://www.w3schools.com/xhtml/default.asp
To access a full list of the standards associated
with XHTML
50
Documents consist of three parts:
1. Document Prolog
2. Header
3. Body
<?xml
1 version=”1.0”?>
<?xml version=”1.0”?>
2 <!DOCTYPE
html"-//W3C//DTD
PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
<!DOCTYPE
html PUBLIC
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 xmlns=”http://www.w3.org/1999/xhtml”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
3
<html
4
<head>
Root Element
4
<head>
5
<title>Strict XHTML Document</title>
5
<title>Strict XHTML Document</title>
6
</head>
6
</head>
7
<body>
7
<body>
8
<!-- Body of document goes here -->
8
<!-Body
9
</body>of document goes here -->
9
</body>
10
</html>
10
</html>
1
2
51

The <html> element
• This is the root element for an XHTML document and must be present in
every XHTML document
• The header and body elements are contained within the root <html>
element
• Attributes: xmlns=http://www.w3.org/1999/xhtml
(Declares a namespace for custom tags in an HTML document.)

The <head> element
• Contains header elements that contain data used primarily by programs
such as search engines
 Elements that can be contained within the <head> element:
 <title> - Title of the document
 <base> - Base URL of the document
 <link> - Defines document relationship to other documents
 <meta> - Contains information about document such as keywords, author
information and content type
 <script> - Defines link to scripts used in the document
 <style> - Defines links to style sheets used in the document
52
The
<body> element
• This element encompasses the content of the document
• Style attributes available with XHTML Transitional and Frameset:
 bgcolor – sets the background color for the document
 text – sets the color for text in the document
 link – sets the color for hyperlinks
 vlink – sets the color for hyperlinks that have been clicked on
 alink – sets the color for active hyperlink
NOTE: Formatting attributes not included in the XHTML Strict 1.0
specification and will not be included in future versions of XHTML. The
formatting styles provided by these attributes are being replaced by style
sheet properties.
53

Block Level Elements :
Used to describe blocks of content and to label the
main content headings

Character Level Elements:


Presentational Elements – Used to define how
text should be displayed
Logical Elements – Used to define the meaning of
the text style
54
<p>…</p> - Paragraph element
<p> This is a paragraph </p>
<br /> - Line break (empty element)
This is a line break <br />
<h1>…</h1> to <h6>…</h6> - Heading elements
<h1>This is the largest heading</h1>
<h6>This is the smallest heading</h6>
<hr /> - Horizontal rule (empty element)
This is a horizontal rule <hr />
<div>…</div> - Section divider
<div>This is a section divider</div>
55
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML Block-level Elements</title>
</head>
<body>
<p> This is a paragraph about African Gray parrots. The African Gray is
one of the most popular pet birds of the parrot family. It is known
for its intellegence and is one of the best talkers of all domestic
birds. This parrot is native to Africa and can live to be almost 70
years old.</p>
<p> This is also a paragraph about African Gray parrots. Here is some
additional information about the African Gray parrot separated by
line breaks: (break here) <br />The African Gray parrot is about 15
inches long and (break here) <br />Has a wing span of about 20
inches.</p>
<hr />
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
<hr />
</body>
</html>
56
57
<b>…</b> - Bold font style
<b>This text is bold</b>
<big>…</big> - Increases the current font size
<big>This text is larger than the current font<big>
<i>…</i> - Italic font style
<i>This text is in italic font</i>
<small>…</small> - Decreases the current font size
<small>This text is smaller than the current font</small>
<sub>…</sub> - Subscript text
<sub>This text is subscript</sub>
<sup>…</sup> - Superscripted text
<sup>This text is superscript</sup>
58
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML Presentational Text Formatting Elements</title>
</head>
<body>
<p>
This text is formatted in <b>bold</b>
</p>
<p>
This text is formatted in <i>italics</i>
</p>
<p>
See how <big>the big element</big> increases the current font size
and how <small>the small element</small>decreases it.
</p>
<p>
This is how the <sup>superscript element</sup>
and the element <sub>subscript element</sub> format text.
</p>
</body>
</html>
59
60
Presentation Controls

All tags have associated attributes but many attributes (& tags)
have been deprecated with the move from HTML to XHTML

XHTML uses Cascading Style Sheets (CSS) to format the content
rather that embedding the formatting code within the XHTML code
(these will be covered later in the course)

Transitional XHTML still supports these attributes and they can be
used for the first few tutorials until CSS has been covered.
The background colour can be set with the <body> tag
(deprecated in XHTML)
<body bgcolor = “#FFFF00”> (sets the colour to yellow)


Font attributes can be set with
<font color =“#0066CC” face = “Times”>
(Both the tag and the attributes have been deprecated)

Text can also be aligned (deprecated) either with <p>or<h1> etc
<p align = “center”> or <h3 align = “right”>
61
<cite>…</cite>
- Formats citation text
<cite>This text is bold</cite>
<code>…</code> -
Formats computer code text
<code>This is computer code text</code>
<em>…</em> -
Emphasis formatting – in most
browsers, this is italic text
<em>This is emphasis text - italics</em>
<strong>…</strong> most browsers, bold text
Emphasis formatting – in
<strong>This is emphasis text - bold</strong>
62
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML Logical Text Formatting Elements</title>
</head>
<body>
<p>
Following is a citation: <br />
<cite>
Four score and seven years ago, our fathers brought forth upon this continent a new
nation:
conceived in liberty, and dedicated to the proposition that all men are created
equal.
</cite>
</p>
<p>
Following is a block of code: <br />
<code>
while ($x &lt; 10) { <br />
$var = $x + 1; <br />
$count++; <br />
} <br />
</code>
</p>
<p> This text is formatted using the <strong>strong element</strong></p>
<p> This text is formatted using the <em>em element</em></p>
</body>
</html>
63
64
XHTML – Lists
65
List Type
Element
Item Element
Ordered List
<ol>……</ol>
<li>……</li>
Unordered List
<ul>……</ul>
<li>……</li>
Definition List
<dl>……</dl>
<dt>…</dt>
<dd>…</dd>
66
67
68
69
70




A nested list is a list of items which is
contained within another list
Lists can be nested any number of times
List types can be mixed when nesting. For
example, an ordered list of items can be
nested within an unordered list
The open and close tags of the nested list
must be completely contained within one
item of the outer list
71
72
73
1.
Create the following web page using Textpad, validate your code and then
view in a browser.
heading 1
heading 2
paragraph
line break
horizontal rule
74
2.
Create the following web page using Textpad, validate your code and then
view in a browser.
heading 1
Heading 2
ordered list
unordered list
75
XHTML – Tables
76




XHTML tables are sets of elements used to
format content, or even an entire document,
into rows and columns
Tables can contain any type of content,
including text, links, images, and
multimedia
Tables in XHTML work much the way they do
in a spreadsheet or word processing
application and resemble a grid
Tables can be used to format blocks of
content or they can also be used to
providing formatting for an entire document
77

<table> - Encloses the rest of the table elements

<tr> - Table Row – Used to designate the beginning
and ending of a row of data

<th> - Table Heading – Used to label the heading
cells in a table row

<td> - Table Data – Used to label data cells in a
table row

<caption> - Optional element. Used to describe the
data in the table.
78
79
This output isn’t very easy to read.
It would be easier to read if it had a border and
the columns were wider.
To vary the output from the default you need to
set attributes
80
Name Description and Values
width
Sets the width of the table.
Values: Percentage or pixels
border
Sets the width of the border around the table. Values: A
value of 0 makes the border invisible. An integer value greater
than 0 will result in a border of that number of pixels.
cellpadding Sets the amount of space between the border of the table
cell and the data contained in the cell.
Values: Percentage or pixels
cellspacing Sets the amount of space between cells.
Values: Percentage or pixels
81
border & width
attribute set
Attributes have a
name and a value –
the value is written in
double quotes in
lowercase
82
83
Name
Description and Values
align
Horizontal alignment of data in a cell
Values: left, center, right, justified
valign
Vertical alignment of data in a cell
Values: top, middle, bottom
rowspan
Number of rows a cell span
Values: integer greater than 1 and less than or equal to the total number of rows in the table
colspan
Number of columns a cell span
Values: integer greater than 1 and less than or equal to the total number of columns in the table
abbr
Used for an abbreviated version of the content of the cell
axis
Used to assign a cell to a category group
headers
List of cells that provide header information for the current cell based on the values of the id
attributes of the header cells. This list is space delimited.
scope
Provides information about which cells the current header cell provides header information for
Values: col, colspan, row, rowspan
84
Name
Description and Values
align
Horizontal alignment of data in all cells in a row
Values: left, center, right, justified
valign
Vertical alignment of data in all cells in a row
Values: top, middle, bottom
85
1.
Create the following web page using Textpad, validate your code and then
view in a browser.
Now modify your code so the web page looks like this
86
2.
Create the following web page using Textpad, validate your code and then
view in a browser.
87
3.
Create the following web page using Textpad, validate your code and then
view in a browser.
88
XHTML – Images
89


Three primary formats for Web images:
◦ GIF – Graphics Interchange Format
The GIF format supports 256 colors and is a good format
for small non-photographic images like icons and
buttons
◦ JPEG - Joint Photographic Experts Group
JPEG is a compression technique that is used to reduce
large file sizes for high quality images, like photographs
◦ PNG - Portable Network Graphics
PNG was originally developed to replace the GIF format.
The biggest difference between PNG and GIF is that PNG
supports more than 256 colors
The next slide will demonstrate the differences in image
quality and file sizes for these 3 formats. Notice that the GIF
file is much more grainy than the JPEG and PNG files. This is
due to the restriction to only 256 colors.
90
Original file – Windows Bitmap file – Stage.bmp
GIF Format
Stage.gif
File size – 13k
JPEG Format
Stage.jpg
File size – 28k
File Size – 351k
PNG Format
Stage.png
File size –164k
91
The <img> element is an empty element
The two required attributes are:
 src –
 alt –
Defines the path to the image file - can be an
absolute or relative path
Defines alternate text for the image file that will
display in place of the image if the client can not
display images
<img src="myimage.gif" alt="Alternate text" />
92
This code assumes that an image named forest.jpg is
stored in the same directory as the html file
93
94




The previous example assumes the image file is in
the same folder as html file
But web sites can get complicated and they are
much easier to manage if your files are organised
into folders
Eg
if your images are in a separate folder - then the
path would look like this in the previous example
<img src=“../images/forest.jpg” alt=“trees” />
95
Download the images from online
1.
Create the following web page using Textpad, validate your code and then
view in a browser.
mountains.png
beach.jpg
96
2.
Create the following web page using Textpad, validate your code and then
view in a browser.
Hint: Use a table without borders and investigate the attribute
colspan for the heading
97
XHTML - Links
98

Link to other pages within site

Link to other sites

Link to a named place within the same page

Link to create an email message.
99
The anchor element - <a>
◦ Requires the user to perform an action in order to
activate the link.
Usually this is clicking on the linked text or image
◦ The href attribute defines the file to be linked to
<a href=”http://chughes.com/index.html”>This is a link</a>
100
Relative vs. Absolute URL’s
◦ Relative links are used to link to documents that
reside on the same Web server,
so the protocol and domain name reference can
be omitted from the URL:
<a href=”newpage.html”>Click Here</a>
◦ Absolute links are used to link to documents that
reside on different Web servers and must contain
the complete URL:
<a href=”http://chughes.com/newpage.html”>Click Here</a>
101

To use the <img> element as a link:
◦ Embed the <img> element within an <a> element
<a href=”newpage.html”><img src=”myimage.gif” alt=”Click on this image” /></a>


By default, web browsers place a blue border around the image
to identify it as a clickable object
To remove the blue border around the image, use a style
definition. This is usually done in a cascading style sheet.(CSS)
This will be covered later in the course.
102
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Link Examples in XHTML</title>
</head>
<body>
<p> Here are some examples of links in XHTML: </p>
<p><a href=”http://chughes.com/newpage.html”>This is an absolute link
to a new page</a></p>
<p><a href=”newpage.html”>This is a relative link to a new page</a></p>
<p><a href=”newpage.html”><img src=”button.gif” alt=”This image is a
clickable button”></a></p>
<p><a href=”mailto:[email protected]”>This is link that launches an
email message</a></p>
</body>
</html>
103
104
 Links can be created to reference different sections of a
single document using internal links and anchors:
 Use an anchor to mark a section in the document where you
would like to link to:
<a name=”footnote”>Footnote</a>
 Use an internal link to reference the anchored section.
Internal links begin with a “#” character:
<a href=”#footnote”>Link to footnote</a>
 When the user clicks on the internal link, they will be
directed to the section referenced by the anchor
105
internal link – has # in front of name
Named anchor
106
internal links – will jump to
where the named is anchor is
107
1.
Create the following web page using Textpad, validate your code and then
view in a browser.
Links to Act3_Q1.html
Links to Act4_Q1.html
108
XHTML Forms
109


Web forms give Website owners the ability to receive
information from their users or to allow users to personalize the
Website
A Web form can contain many types of input elements:
◦
◦
◦
◦
◦


Text boxes
Password boxes
Buttons
Checkboxes
Pull-down menus
Form input values are processed by a program on the Web
server and usually send another XHTML page back to the Web
browser with either a set of results based on the user’s input, or
a confirmation page
Forms can be located anywhere in the body of an XHTML
document
110


The <form> - element contains all of the input elements of the form
Attributes:
◦ action – This attribute is required and provides the path to the
program that will process the form data when the user
submits the form
◦ Examples:
<form action=”/cgi-bin/process.cgi”>
<form action=”http://www.grahamm.com/cgi-bin/process.cgi”>
<form action=”mailto:[email protected]”>
◦ method – This attribute tells the web server how to process the data
Values:
get – This is the default value and will automatically assign this
value if the method attribute is not present in the <form>
element. This method appends the form input data to the end
of a URL.
The following two <form> start tags are the same:
<form action=”/cgi-bin/process.cgi” method=”get”>
<form action=”/cgi-bin/process.cgi”>
post – This value tells the processing program to send the form
data to the server as regular input data. Nothing will be
appended to the URL
111
There are three types of text input elements which are empty
elements:
1. Text: <input type=”text” />
Allows users to enter text
2. Password: <input type=”password” />
Allows users to enter text which is not visible to others.
The characters are entered and appear only as the “*”
character.
WARNING: even though the value is hidden while it is
being typed, the value is sent to the server in text form
3. File: <input type=”file” />
Allows users to Browse their computer in order to send a
file to the Web server
112
The following attributes can be used with text input elements:
 maxlength - Maximum number of characters allowed for input
 name - Used to identify the input field
 size - Defines the size of the input field in characters. If this is smaller
than the maxlength attribute, the field will scroll.
 type - Defines the type of input (text, password, or file for text input
fields)
 disabled - Disables the field for user input. The value of a disabled field
will not be sent to the processing program
 readonly - Makes the content of the text field unchangable. The value of
this field will be sent to the processing program
 value - Sets a default value
 onselect - For use with scripts. An event handle that specifies an action
to be performed when the field is selected
 onchange - For use with scripts. An event handle that specifies an action
to be performed when the content of the field has been
changed
113

The selection form elements allow the user to
select one or many choices from a list

There are 3 types of selection elements:

Using selection elements:
◦ Checkboxes: <input type=”checkbox” />
◦ Radio buttons: <input type=”radio” />
◦ Drop-down lists: <select>…</select>
◦ Checkboxes - used for lists where the user can choose one or more
selections from a list of options. Each item in a
checkbox group can be checked or unchecked.
◦ Radio Buttons – used for lists which allow the user to choose only one
item in the list
◦ Drop-down lists - The list appears in a scrollable box. These are
usually used for long lists of items.
 Each item is listed in a separate <option> element
114


Once a user has completed the form, the data must be sent to
the server to be processed
The XHTML language provides a means to submit the form using
the program that is specified in the action attribute of the
<form> element by assigning the value of “submit” to the type
attribute for the <input /> element:
<input type=”submit” />

XHTML also gives users an ability to clear the form and reset the
default values by assigning the value of “reset” to the type
attribute for the <input /> element:
<input type=”reset” />

The value attribute can be set to assign names to either of these
buttons. If no value is set, then the computer will assign default
text
115
Open <form> element
}
Checkbox group for accounts
}
}
Radio group for emp
Select group for branch
submit button
close <form> element
116
117
1.
Create the following web page using Textpad, validate your code and then
view in a browser.
118
2.
Modify the form created in Question 1 and use a table to set the elements
out more neatly, like in the example below
119
A web site is a collection of web pages that link together.
You are now going to create the following web site that uses
tables, links, images, lists and forms.
The site consists of four pages:
welcome.html
baked_pears.html
pumpkin_creme_brulee.html
contact_me.html
120
To complete this table you
will need to investigate
the attributes:
rowspan & colspan
Links to baked_pears.html
Links to
pumpkin_creme_brulee.html
Links to contact_me.html
recipe.jpg
welcome.html
121
back_button.jpg links back
to welcome.html
pumpkin_creme_brulee.jpg
pumpkin_creme_brulee.html
122
back_button.jpg links back
to welcome.html
Challenge: Work out how to
add a fraction &
degree symbol
baked_pears.jpg
baked_pears.html
123
back_button.jpg links back
to welcome.html
contact_me.html
124
 In this section you learnt how to add the following
elements to a web page






Headings
Lists
Tables
Images
Links
Forms
 We didn’t cover any formatting like different fonts or
colors or alignment or removing borders.
This is because most of those attributes and tags are
deprecated and formatting is primarily done using
cascading style sheets (CSS) – this is covered in the
next section.
125