01 CT05032 Web Applications XHTML

7/27/2019 01 CT05032 Web Applications XHTML

1/69

XHTML

Web ApplicationsCT050-3-2


2/69

Web Applications

XHTML

Slide 2 of 12

Topic & Structure of the lesson

Introduction to HTML Introduction to XHTML Editing XHTML

First XHTML Example XHTML Structure The Rules of XHTML W3C XHTML Validation Service

Headers Linking Images


3/69

Web Applications

XHTML

Slide 3 of 12

Topic & Structure of the lesson

Special Characters and More Line Breaks

Unordered Lists

Nested and Ordered Lists

Basic XHTML Tables

Intermediate XHTML Tables and Formatting

Basic XHTML Forms

More Complex XHTML Forms

Web Resources


4/69

Web Applications

XHTML

Slide 4 of 12

Learning Outcomes

At the end of the module, your should beable to: Understand important components of XHTML

documents. Use XHTML to create Web pages. Add images to Web pages. Understand how to create and use hyperlinks to

navigate Web pages. Mark up lists of information. Write basic codes in XHTML


5/69

Web Applications

XHTML

Slide 5 of 12

Learning Outcomes

Create tables with rows and columns ofdata.

Control table formatting.

Create and use forms.


6/69

Web Applications

XHTML

Slide 6 of 12

Key Terms you must be able to use

If you have mastered this topic, you should be able to usethe following terms correctly in your assignments andexams: HTML

HyperText Markup Language The coded format used for creating hypertext documents on the World Wide

Web and controlling how information is displayed XHTML

eXtensible HyperText Markup Language Extensible Hypertext Markup Language - A reformulation of HTML 4.0 in XML

1.0. XHTML is a new language for building web pages. Its a standard publishedby the World Wide Web Consortium

Validator A program or script which is used to check the validity of HTML markup, or to

detect bad or deprecated elements. A validator helps to ensure that thedocument can be read and used by all browsers and search engines.


7/69

Web Applications

XHTML

Slide 7 of 12

Introduction to HTML

Universal standard hypertext languagewhich formats documents andincorporates hypertext links to other

documents stored on the same or differentcomputers.

Provides a set of tags

, ,

, Does not provide facility to define newtags.


8/69

Web Applications

XHTML

Slide 8 of 12

Introduction to HTML

Example Heading

Tag

Name

Attribute

Name

Attribute

Value

HTML Element

Attribute

Start Tag

Affected Content End Tag


9/69Web Applications

XHTML

Slide 9 of 12

Introduction to XHTML

Extensible HyperText Markup Language

XHTML

A markup language

Separation of the presentation of a documentfrom the structure of the documents

information

Based on HTML Technology of the World Wide Web Consortium

(W3C)



XHTML

Slide 10 of 12

Introduction to XHTML

Markup is: Special symbols that indicate what to do or

how to present.

Used to describe annotation within a text orparagraph.

XHTML is a stricter version of HTMLbased upon the rules of XML.

All XHTML basic element name must be inlowercase.



XHTML

Slide 11 of 12

Editing XHTML

XHTML documents

Source-code form

Text editor (e.g. Notepad, Wordpad, emacs,etc.)

.html or.htm file-name extension

Web server

Stores XHTML documents

Web browser

Requests XHTML documents


12/69



XHTML

Slide 13 of 12

First XHTML Example

XHTML

Welcome to XHTML



XHTML

Slide 14 of 12

First XHTML Example

Welcome to XHTML



XHTML

Slide 15 of 12

XHTML Structure

Looking at the XHTML specification(http://www.w3.org/TR/xhtml1/) you see the DTDdefines the grammar of the language. Here is anexample of a DTD file.

Reading the DTD we can define the structure of

an HTML or XHTML document.



XHTML

Slide 16 of 12

XHTML Structure

All documents begin with a declaration. In the basic sense it identifies the HTML dialect used in a

document by referencing an external DTD. A DTD defines the actual elements, attributes, and element

relationships that are valid in documents.

There are three types of Transitional Strict Frameset

Using the declaration allows validationsoftware to identify the DTD being followed in adocument, and verify that the document is syntacticallycorrect.



XHTML

Slide 17 of 12

The Rules of XHTML

HTML is not case sensitive, XHTML is , are the same under HTML.

and

are also the

same

HTML/XHTML attribute values may be case sensitive is the same as

under HTML may not be same as in XHTML.

(X)HTML elements should be nested not crossed. Nested = Good This is bold and italic Crossed = Bad Dont do this



XHTML

Slide 18 of 12

W3C XHTML Validation Service

The World Wide Web provides a validatorfor all versions of XHTML and HTML

Available at http://validator.w3.org

Validation service ( validator.w3.org )

Checking a documents syntax

URL that specifies the location of the file

Uploading a file to the sitevalidator.w3.org/file-upload.html

Validate by direct input



XHTML

Slide 19 of 12




XHTML

Slide 20 of 12




XHTML

Slide 21 of 12




XHTML

Slide 22 of 12




XHTML

Slide 23 of 12

Headers

Six headers ( header elements)

h1 through h6



XHTML

Slide 24 of 12

Headers

Header

Level 1 Header

Level 2 Header

Level 3 Header

Level 4 Header

Level 5 Header

Level 6 Header



XHTML

Slide 25 of 12

Headers

Level 1 Header

Level 2 HeaderLevel 3 HeaderLevel 4 HeaderLevel 5 HeaderLevel 6 Header



XHTML

Slide 26 of 12

Linking

Hyperlink References other sources such as XHTML

documents and images Both text and images can act as hyperlinks

Created using the a (anchor) element Attribute href

Specifies the location of a linked resource

Link to e-mail addresses using mailto: URL

tag

Bold br element

Line break



XHTML

Slide 27 of 12

Linking

Linking

Click a name to go to that page

Google

Yahoo

W3C Markup Validation Service


28/69

Web Applications

XHTML

Slide 28 of 12

Linking


29/69

Web Applications

XHTML

Slide 29 of 12

Linking

Linking

Click here to send an email to me.


30/69

Web Applications

XHTML

Slide 30 of 12

Linking


31/69

Web Applications

XHTML

Slide 31 of 12

Images

Three most popular formats Graphics Interchange Format (GIF)

Joint Photographic Experts Group (JPEG)

Portable Network Graphics (PNG)

img element src attribute

Specifies the location of the image file

width and height

Pixels (picture elements)

Empty elements Terminated by character/ inside the closing right angle

bracket (>), or by explicitly including the end tag


32/69

Web Applications

XHTML

Slide 32 of 12

Images

Images


33/69

Web Applications

XHTML

Slide 33 of 12

Images


34/69

Web Applications

XHTML

Slide 34 of 12

Images

Linking

Click a picture to go to that page


35/69

Web Applications

XHTML

Slide 35 of 12

Images


36/69

Web Applications

XHTML

Slide 36 of 12


Character entity references (in the form &code;)

Numeric character references (e.g. &)

del

Strike-out text sup

Superscript text

sub

Subscript text

Horizontal rule (horizontal line)


37/69

Web Applications

XHTML

Slide 37 of 12





38/69

Web Applications

XHTML

Slide 38 of 12


This is strike through

Superscript: 3.14 x 102

Subscript: H2O

Half:

Quater:

Copyright:


39/69

Web Applications

XHTML

Slide 39 of 12



40/69

Web Applications

XHTML

Slide 40 of 12

Unordered Lists

Unordered list element ul

Creates a list in which each item begins with abullet symbol (called a disc)

li (list item) Entry in an unordered list


41/69

Web Applications

XHTML

Slide 41 of 12

Unordered Lists

Unordered Lists

Here are my favorite fruits

Banana

Coconut

Papaya


42/69

Web Applications

XHTML

Slide 42 of 12

Unordered Lists

Here are my favorite sites

GoogleYahooMSN


43/69

Web Applications

XHTML

Slide 43 of 12

Unordered Lists


44/69

Web Applications

XHTML

Slide 44 of 12


Represent hierarchical relationships

Ordered lists (ol)

Creates a list in which each item begins with anumber


45/69

Web Applications

XHTML

Slide 45 of 12


Nested List

The Best Features of the Internet

You can meet new friend from countries around the world.

You have access to new media as it becomes public:


46/69

Web Applications

XHTML

Slide 46 of 12


New games

New applications

For business

For fun

Around the clock news

Search engines


47/69

Web Applications

XHTML

Slide 47 of 12


Shopping

Programming

XHTML

C#

XML

JavaScripts

New languages


48/69

Web Applications

XHTML

Slide 48 of 12


Links Keeping in touch with old friends It is the technology of the future!


49/69

Web Applications

XHTML

Slide 49 of 12



50/69

Web Applications

XHTML

Slide 50 of 12

Basic XHTML Tables

Tables Present information

Organize data into rows and columns

table elementAttribute border Specifies the tables border width in pixels

Attribute summary Describes the tables contents

Attribute caption Describes the tables content and helps text-based browsers

interpret table data


51/69

Web Applications

XHTML

Slide 51 of 12

Basic XHTML Tables

table element

Head section (header cell, defined with a theadelement)

Contains header information such as column names

tr element (defines an individual table row)

th element (defines the columns in the head section)

Foot section (defined with a tfoot element)

Table body (defined with atbody

element) Data cells (defined with td element)


52/69

Web Applications

XHTML

Slide 52 of 12

Basic XHTML Tables

Creating a Basic Table

Price of Fruit


53/69

Web Applications

XHTML

Slide 53 of 12

Basic XHTML Tables

Fruit

Price

Total

$3.75


54/69

Web Applications

XHTML

Slide 54 of 12

Basic XHTML Tables

Apple

$0.25

Orange

$0.50

Banana

$1.00


55/69

Web Applications

XHTML

Slide 55 of 12

Basic XHTML Tables

Pineapple$2.00


56/69

Web Applications

XHTML

Slide 56 of 12

Basic XHTML Tables


57/69

Web Applications

XHTML

Slide 57 of 12


Element colgroup Groups and formats columns

Element col Attribute align

Determines the alignment of text in the column

Attribute span Determines how many columns the col element formats

rowspan and colspan

Specify the number of rows or columns occupied by a cell valign

Aligns data vertically

One of the four values: top, middle, bottom, baseline


58/69

Web Applications

XHTML

Slide 58 of 12


Untitled Page

Table Example Page

Here is a more complex sample table.


59/69

Web Applications

XHTML

Slide 59 of 12


Shrek

As for 2007

Shrek 1 (2001)

Shrek 2 (2004)

Shrek 3 (2007)

Shrek 4 (?)


60/69

Web Applications

XHTML

Slide 60 of 12


VCD

Available

Available

Not Available

Not Available

DVD

Available

Available

Not Available

Not Available


61/69

Web Applications

XHTML

Slide 61 of 12



62/69

Web Applications

XHTML

Slide 62 of 12

Basic XHTML Forms

Element form Attribute method

Specifies how the forms data is sent to Web server

method = post

Appends form data to the browser request

method = get

Appends form data directly to the end of the URL

Attribute action

Specifies the URL of a script on the Web server input

Specifies data to provide to the script that processes the form


63/69

Web Applications

XHTML

Slide 63 of 12

Basic XHTML Forms

Untitled Page

Feedback Form

Please fill out this form to help us improve our site.


64/69

Web Applications

XHTML

Slide 64 of 12

Basic XHTML Forms

Name:


65/69

Web Applications

XHTML

Slide 65 of 12

Basic XHTML Forms


66/69

Web Applications

XHTML

Slide 66 of 12


Element textarea Inserts a multiline text box (text area) Attribute rows

Specifies the number of rows

Attribute cols Specifies the number columns

Input password Inserts a password box with the specified size

Element checkbox Enable users to select from a set of options

Element select Provides a drop-down list of items

Element option Adds items to the drop-down list Attribute selected

Specifies which item initially is displayed as the selected item


67/69

Web Applications

XHTML

Slide 67 of 12



68/69

Web Applications

XHTML

Slide 68 of 12

Web Resources

www.w3.org/TR/xhtml11 www.xhtml.org

www.w3schools.com/xhtml/default.asp

validator.w3.org www.w3.org/TR/2001/REC-xhtml11-20010531

www.vbxml.com/xhtml/articles/xhtml_

tables www.webreference.com/xml/reference/xhtml.html

Q ti d A S i


69/69

XHTML

Q & A

Question and Answer Session

Documents

01 CT05032 Web Applications XHTML