introduction to xhtml

Introduction to XHTML

1

Introduction 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

What is the World Wide Web

• 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

How does the WWW work?

5

Web Browsers and Web Servers

1. The Web browser makes a request to the web server 2. The server which is running an HTTP server that is

listening for requests, receives the request and locates the document.

3. The server then sends back the content of the requested page to the client.

4. The browser receives the information from the server and displays the page in the browser window. The transaction is now complete.

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

How to Fetch Web Pages

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

Uniform Resource Locator (URL)

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

Jargon

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

Web Page Displays

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

How does the browser display the pages?

The World Wide Web 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.

Content of Web Pages A web site may contain a combination of 13

standard elements:

Text SoundLists VideoHyperlinks TablesColour LayersGraphics FramesImages FormsImage Maps

Content of Web Pages 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…

Authoring of Web Pages 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 Syntax 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 Syntax 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



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

The eXtensible Hypertext Markup Language (XHTML)

Doctype Head Title Body HTML

Elements of a Page

DOCTYPE<HTML>

<HEAD><TITLE> stuff</TITLE>

</HEAD><BODY>

<P>stuff that people see</p>

</BODY>

</HTML>

Tags

Versions: Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

DOCTYPE – Avoid Quirks!

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

<TITLE> </TITLE> <META> </META>

◦ Language, Encoding, Keywords◦ Self-closing

<meta Content> </meta> <meta Content />

Page Properties

HEAD

<html><head>

<title> (insert text for the browser’s title bar here)</title>

</head><body>

(insert visible Web page elements here)</body>

</html>

22

A HTML Tag Template

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

Who is making the Web standards?

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

Markup Languages

25

Origins of Markup Languages

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

Overview of XHTML

Elements consist of a start tag, content and an 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:

27

Building XHTML Documents

Start Tag Content End Tag

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

Three Flavors of XHTML 1.0

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

Document Tags - Header

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

Meta Tags 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, http-equiv, etc.

Meta Tags

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

Amazon’s Meta Tags<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

META

34

Sample XHTML Document Structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-

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

6 

7

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>Internet and WWW How to Program - Welcome</title>

11

12 

13 

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

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

Minimal XHTML Document<!DOCTYPE ….>

<html> <head>

…..</head>

<body><p>…….</p>

</body></html>

HT

ML

elem

ent

HT

ML

elem

ent

HT

ML

elem

ent

HT

ML

elem

ent

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

XHTML Document Example

40

XHTML Document Example

41

Using TextPadTextPad is an editor that allows you to type text.

Can be used to create web pagesView in Web browser

file name

View in browser

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

Validating your pages

http://validator.w3.org/

http://validator.w3.org

44

Validating your pages

Browse to find file

Then click here

Choose File Upload

Get this screen if code is valid

http://validator.w3.org/

Valid documents must be well-formed and adhere to the rules of a DTD:

XHTML Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

45

Validating XHTML Documents

1. XHTML documents must contain the root element <html>

2. All elements must have a start and end tag, or must be an empty element

3. Elements must be nested properly4. All attributes must have a value5. Attributes must be placed in the start tag6. Element names are case sensitive

46

Well-Formed XHTML Documents

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

Class Activity 1

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

Class Activity 1

XHTML - Basic Formatting

49

The following slides do not contain a complete list of available tags and attributes for XHTML

Refer to the web sitehttp://www.w3schools.com/xhtml/default.asp To access a full list of the standards associated with XHTML

XHTML Tags & Attributes

50

http://www.w3schools.com/xhtml/default.asp

Documents consist of three parts:1. Document Prolog2. Header3. Body

1 <?xml version=”1.0”?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3 <html xmlns=”http://www.w3.org/1999/xhtml”>4 <head>5 <title>Strict XHTML Document</title>6 </head>7 <body>8 9 </body>10 </html>

51

Structure of XHTML Documents

1 <?xml version=”1.0”?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3 <html xmlns=”http://www.w3.org/1999/xhtml”>4 <head>5 <title>Strict XHTML Document</title>6 </head>7 <body>8 9 </body>10 </html>

Root Element

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

Document Framework Elements

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

Document Framework Elements

(cont.)

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

Basic Formatting Elements

<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

Block Level Elements

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

Block Level Elements – XHTML Code

57

Block Level Elements – Web Browser

<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

Presentational Formatting Elements

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

Presentational Formatting Elements – XHTML Code

Presentational Formatting Elements – Web browser

60

61

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

<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> - Emphasis formatting – in most browsers, bold text<strong>This is emphasis text - bold</strong>

62

Logical Formatting Elements

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

Logical Formatting Elements- XHTML Code

Logical Formatting Elements- Web browser

64

XHTML – Lists

65

XHTML Lists

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

Ordered list - code

67

Ordered list – web browser

68

Unordered list - code

69

Unordered list – web browser

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

XHML Lists – Nesting Lists

Nested list - code

72

Nested list – web browser

73

1. Create the following web page using Textpad, validate your code and then view in a browser.

Class Activity 2

74

heading 1

heading 2

paragraph

line break

horizontal rule


Class Activity 2

75

heading 1

Heading 2

ordered list

unordered list

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

XHTML Tables

<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

Table Elements

79

Table- code

80

Table- web browser

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

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

<table> Common Element Attributes

Table – code with attributes

82

border & width attribute set

Attributes have a name and a value – the value is written in double quotes in lowercase

Table – web browser

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 cellValues: 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 spanValues: 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

<td> and <th> Element Attributes

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 rowValues: top, middle, bottom

<tr> Element Attributes

85


Class Activity 3

86

Now modify your code so the web page looks like this


Class Activity 3

87


Class Activity 3

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

Image File Formats

Image File Formats Example

91

JPEG FormatStage.jpgFile size – 28k

GIF FormatStage.gifFile size – 13k

PNG FormatStage.pngFile size –164k

Original file – Windows Bitmap file – Stage.bmp File Size – 351k

The <img> element is an empty element

The two required attributes are:

src – Defines the path to the image file - can be an absolute or relative path

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

The <img> element

93

Image- code

This code assumes that an image named forest.jpg is stored in the same directory as the html file

94

Image- Web browser

95

File organisation 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” />


Class Activity 4

96

Download the images from online

mountains.png

beach.jpg


Class Activity 4- Challenge

97

Hint: Use a table without borders and investigate the attribute colspan for the heading

XHTML - Links

98

99

Link Types

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.

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

Creating XHTML Links

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

Creating XHTML Links

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

Linking With the <img> Element

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

XHTML Links code

104

XHTML Links – Web Browser

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

Linking within a single document

105

Linking within a single document - code

106

Named anchor

internal link – has # in front of name

Linking within a single document – web browser

107

internal links – will jump to where the named is anchor is


Class Activity 5

108

Links to Act3_Q1.html

Links to Act4_Q1.html

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

Overview of XHTML Forms

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

The <form> Element

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

Text Input Elements

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

Text input elements - attributes

113

The selection form elements allow the user to select one or many choices from a list

There are 3 types of selection elements:◦ Checkboxes: <input type=”checkbox” />◦ Radio buttons: <input type=”radio” />◦ Drop-down lists: <select>…</select>

Using selection elements:◦ 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

Selection Form Elements

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

Completing the Form

116

Form Example –code

Open <form> element

} Checkbox group for accounts

} Radio group for emp

close <form> element

} Select group for branch

submit button

117

Form Example – Web Browser


Class Activity 6

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

Class Activity 6

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.htmlbaked_pears.htmlpumpkin_creme_brulee.htmlcontact_me.html

Lab 1

120

Lab 1

121

welcome.html

To complete this table you will need to investigate the attributes:rowspan & colspan

Links to baked_pears.html

Links to pumpkin_creme_brulee.html

recipe.jpgLinks to contact_me.html

Lab 1

122

pumpkin_creme_brulee.html

back_button.jpg links back to welcome.html

pumpkin_creme_brulee.jpg

Lab 1

123

baked_pears.html


baked_pears.jpg

Challenge: Work out how to add a fraction &

degree symbol

Lab 1

124

contact_me.html


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

Summary