01 CT05032 Web Applications XHTML

Web Applications
CT050-3-2
XHTML
Topic & Structure of the lesson

XHTML
Introduction to HTML Introduction to XHTML Editing XHTML First XHTML Example XHTML Structure The Rules of XHTML W3C XHTML Validation Service Headers Linking Images
Web Applications
Slide 2 of 12
Topic & Structure of the lesson

XHTML
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
Web Applications
Slide 3 of 12
Learning Outcomes
XHTML
At the end of the module, your should be able 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
Web Applications
Slide 4 of 12
Learning Outcomes
XHTML
Create tables with rows and columns of data. Control table formatting. Create and use forms.
Web Applications
Slide 5 of 12
Key Terms you must be able to use

XHTML
If you have mastered this topic, you should be able to use the following terms correctly in your assignments and exams: 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 published by 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 the document can be read and used by all browsers and search engines.
Web Applications
Slide 6 of 12
Introduction to HTML
XHTML
Universal standard hypertext language which formats documents and incorporates hypertext links to other documents stored on the same or different computers. Provides a set of tags
<img>, <font>, <p> , <b>
Does not provide facility to define new tags.

Web Applications Slide 7 of 12
Introduction to HTML
XHTML
Tag Name
Attribute Name
Attribute Value
<h1 align=left>Example Heading</h1>

Attribute
Affected Content
End Tag
Start Tag
HTML Element
Web Applications
Slide 8 of 12
Introduction to XHTML
XHTML
Extensible HyperText Markup Language

XHTML A markup language Separation of the presentation of a document from the structure of the documents information Based on HTML
Technology of the World Wide Web Consortium (W3C)
Web Applications
Slide 9 of 12
Introduction to XHTML
XHTML
Markup is:
Special symbols that indicate what to do or how to present. Used to describe annotation within a text or paragraph.
XHTML is a stricter version of HTML based upon the rules of XML. All XHTML basic element name must be in lowercase.
Slide 10 of 12
Web Applications
Editing XHTML
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
First XHTML Example

XHTML
XHTML comments
Start with  html element
head element Head section Title of the document Style sheets and scripts body element Body section Pages content the browser displays
Start tag
attributes (provide additional information about an element) name and value (separated by an equal sign)
End tag
Web Applications
Slide 12 of 12
First XHTML Example

XHTML
<!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>XHTML</title> </head> <body> Welcome to XHTML </body> </html>
Web Applications
Slide 13 of 12
First XHTML Example

XHTML
<body> Welcome to XHTML </body>
Web Applications
Slide 14 of 12
XHTML Structure
XHTML
Looking at the XHTML specification (http://www.w3.org/TR/xhtml1/) you see the DTD defines the grammar of the language. Here is an example of a DTD file. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> Reading the DTD we can define the structure of an HTML or XHTML document.
Web Applications
Slide 15 of 12
XHTML Structure
XHTML
All documents begin with a <!DOCTYPE> 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 <!DOCTYPE>
Transitional Strict Frameset
Using the <!DOCTYPE> declaration allows validation software to identify the DTD being followed in a document, and verify that the document is syntactically correct.
Web Applications
Slide 16 of 12
The Rules of XHTML

XHTML
HTML is not case sensitive, XHTML is

<b>, <B> are the same under HTML. <p ALIGN=center> and <p align=center> are also the same
HTML/XHTML attribute values may be case sensitive

<img src=test.gif> is the same as <img SRC=test.gif> under HTML <img src=test.gif> may not be same as <img src=TEST.GIF> in XHTML.
(X)HTML elements should be nested not crossed.

Nested = Good <b><i>This is bold and italic</i></b> Crossed = Bad <b><i>Dont do this</b></i>
Web Applications
Slide 17 of 12
W3C XHTML Validation Service

XHTML
The World Wide Web provides a validator for 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 site
validator.w3.org/file-upload.html Validate by direct input
Web Applications
Slide 18 of 12

XHTML
Web Applications
Slide 19 of 12

XHTML
Web Applications
Slide 20 of 12

XHTML
Web Applications
Slide 21 of 12

XHTML
Web Applications
Slide 22 of 12
Headers
XHTML
Six headers ( header elements)

h1 through h6
Web Applications
Slide 23 of 12
Headers
XHTML
<!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>Header</title> </head> <body> <h1>Level 1 Header</h1> <h2>Level 2 Header</h2> <h3>Level 3 Header</h3> <h4>Level 4 Header</h4> <h5>Level 5 Header</h5> <h6>Level 6 Header</h6> </body> </html>
Web Applications
Slide 24 of 12
Headers
XHTML
<h1>Level 1 Header</h1> <h2>Level 2 Header</h2> <h3>Level 3 Header</h3> <h4>Level 4 Header</h4> <h5>Level 5 Header</h5> <h6>Level 6 Header</h6>
Web Applications
Slide 25 of 12
Linking
XHTML
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
<strong> tag Bold br element

Line break
Web Applications
Slide 26 of 12
Linking
XHTML
<!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>Linking</title> </head> <body> <strong>Click a name to go to that page</strong> <br /> <br /> <a href="http://www.google.com">Google</a><br /> <a href="http://www.yahoo.com">Yahoo</a><br /> <a href="http://validator.w3.org">W3C Markup Validation Service </a> </body> </html>
Web Applications
Slide 27 of 12
Linking
XHTML
Web Applications
Slide 28 of 12
Linking
XHTML
<!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>Linking</title> </head> <body> Click <a href="mailto:name@email.com">here</a> to send an email to me.
</body> </html>
Web Applications
Slide 29 of 12
Linking
XHTML
Web Applications
Slide 30 of 12
Images
XHTML
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
Web Applications
Slide 31 of 12
Images
XHTML
<!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>Images</title>
</head> <body> <img src="princess.jpg" width="640" height="360" alt="PrincessL"/> <img src="princess.jpg" width="356" height="200" alt="PrincessM"/> <img src="princess.jpg" width="228" height="128" alt="PrincessS"/> </body> </html>
Web Applications
Slide 32 of 12
Images
XHTML
Web Applications
Slide 33 of 12
Images
XHTML
<!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>Linking</title> </head> <body> <strong>Click a picture to go to that page</strong> <br /> <br /> <a href="http://www.google.com"><img src="google.gif" /></a><br />
<a href="http://www.yahoo.com"><img src="yahoo.gif" /></a><br />

<a href="http://validator.w3.org"><img src="w3c-valid-xhtml.png" /></a> </body> </html>
Web Applications
Slide 34 of 12
Images
XHTML
Web Applications
Slide 35 of 12
Special Characters and More Line Breaks

XHTML
Character entity references (in the form &code;) Numeric character references (e.g. &) del
Strike-out text
sup
Superscript text
sub
Subscript text
<hr />
Horizontal rule (horizontal line)
Web Applications
Slide 36 of 12

XHTML
<!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>Special Characters and More Line Breaks</title>

</head> <body> <p>Special Characters and More Line Breaks</p> <hr /> 
Web Applications
Slide 37 of 12

XHTML
  -->
 <p><del>This is strike through</del></p> <p>Superscript: 3.14 x 10<sup>2</sup></p> <p>Subscript: H<sub>2</sub>O</p>  <p>Half: <strong> ½</strong></p> <p>Quater: <strong> ¼</strong></p> <p>Copyright: <strong>©</strong></p> <hr />  </body> </html>
Web Applications
Slide 38 of 12

XHTML
Web Applications
Slide 39 of 12
Unordered Lists
XHTML
Unordered list element ul

Creates a list in which each item begins with a bullet symbol (called a disc) li (list item)
Entry in an unordered list
Web Applications
Slide 40 of 12
Unordered Lists
XHTML
<!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>Unordered Lists</title>
</head>
<body> Here are my favorite fruits<br /> <ul> <li>Banana</li> <li>Coconut</li> <li>Papaya</li> </ul>
Web Applications
Slide 41 of 12
Unordered Lists
XHTML
<p>Here are my favorite sites</p> <ul> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.yahoo.com">Yahoo</a></li> <li><a href="http://www.msn.com">MSN</a></li> </ul> </body> </html>
Web Applications
Slide 42 of 12
Unordered Lists
XHTML
Web Applications
Slide 43 of 12
Nested and Ordered Lists

XHTML
Represent hierarchical relationships Ordered lists (ol)

Creates a list in which each item begins with a number
Web Applications
Slide 44 of 12

XHTML
<!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>Nested List</title>
</head> <body> <h1>The Best Features of the Internet</h1>  <ul> <li>You can meet new friend from countries around the world. </li> <li>You have access to new media as it becomes public:
Web Applications
Slide 45 of 12

XHTML
   <ol> <li>For business </li> <li>For fun </li> </ol> </li> <li>Around the clock news </li> <li>Search engines </li> -->
Web Applications
Slide 46 of 12

XHTML
<li>Shopping </li> <li>Programming


<ol> <li>XHTML </li> <li>C# </li> <li>XML </li> <li>JavaScripts </li> <li>New languages </li> </ol> </li>
</ul>
 </li>
Web Applications
Slide 47 of 12

XHTML
<li>Links </li> <li>Keeping in touch with old friends </li> <li>It is the technology of the future! </li> </ul> </body> </html>
Web Applications
Slide 48 of 12

XHTML
Web Applications
Slide 49 of 12
Basic XHTML Tables

XHTML
Tables
Present information
Organize data into rows and columns table element

Attribute 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
Web Applications
Slide 50 of 12
Basic XHTML Tables

XHTML
table element Head section (header cell, defined with a thead element)
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 a tbody element) Data cells (defined with td element)
Web Applications
Slide 51 of 12
Basic XHTML Tables

XHTML
<!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>Creating a Basic Table</title>
</head>
<body> <table border="1" summary="This table provides information about the price of fruit" width="40%"> <caption> Price of Fruit </caption>  
Web Applications
Slide 52 of 12
Basic XHTML Tables

XHTML
<thead>  <tr>  <th>Fruit</th> <th>Price</th> </tr> </thead>  
Web Applications
Slide 53 of 12
Basic XHTML Tables

XHTML
 <tr>  <td>Apple</td> <td>$0.25</td> </tr> <tr> <td>Orange</td> <td>$0.50</td> </tr> <tr> <td>Banana</td>
<td>$1.00</td>
</tr>
Web Applications
Slide 54 of 12
Basic XHTML Tables

XHTML
<tr> <td>Pineapple</td> <td>$2.00</td> </tr> </table> </body> </html>
Web Applications
Slide 55 of 12
Basic XHTML Tables

XHTML
Web Applications
Slide 56 of 12
Intermediate XHTML Tables and Formatting

XHTML
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
Web Applications
Slide 57 of 12

XHTML
<!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>Untitled Page</title>
</head>
<body> <h1>Table Example Page</h1> <table border="1"> <caption> Here is a more complex sample table.</caption>  <col align="right" /> </colgroup> -->
Web Applications
Slide 58 of 12

XHTML
<thead>  <tr> <th rowspan="2"><img src="shrek.gif" height="192" /> </th> <th colspan="4" valign="top">  <h1>Shrek</h1><br /> <p>As for 2007</p> </th> </tr> <tr valign="bottom"> <th>Shrek 1 (2001)</th> <th>Shrek 2 (2004)</th>
<th>Shrek 3 (2007)</th>
<th>Shrek 4 (?)</th> </tr> </thead>
Web Applications
Slide 59 of 12

XHTML
<tr> <th>VCD</th> <td>Available</td> <td>Available</td> <td>Not Available</td> <td>Not Available</td> </tr> <tr> <th>DVD</th> <td>Available</td> <td>Available</td> <td>Not Available</td> <td>Not Available</td> </tr> </table> </body> </html>
Web Applications
Slide 60 of 12

XHTML
Web Applications
Slide 61 of 12
Basic XHTML Forms

XHTML
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
Web Applications
Slide 62 of 12
Basic XHTML Forms

XHTML
<!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>Untitled Page</title>
</head>
<body> <h1> Feedback Form</h1> <p> Please fill out this form to help us improve our site.</p>   
Web Applications
Slide 63 of 12
Basic XHTML Forms

XHTML
<form action="/cgi-bin/formmail" method="post"> <p> <label> Name: <input maxlength="30" name="name" size="25" /> </label> </p> <p>   
<input type="submit" value="Submit Your Entries" /> <input type="reset" value="Clear Your Entries" />
</p>
</form> </body> </html>
Web Applications
Slide 64 of 12
Basic XHTML Forms

XHTML
Web Applications
Slide 65 of 12
More Complex XHTML Forms

XHTML
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
Web Applications
Slide 66 of 12
More Complex XHTML Forms

XHTML
Web Applications
Slide 67 of 12
Web Resources
XHTML
www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp validator.w3.org www.w3.org/TR/2001/REC-xhtml1120010531 www.vbxml.com/xhtml/articles/xhtml_ tables www.webreference.com/xml/reference/ xhtml.html

Question and Answer Session

XHTML
Q&A

01 CT05032 Web Applications XHTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

01 CT05032 Web Applications XHTML

Hochgeladen von

Copyright:

Verfügbare Formate

Web Applications

Topic & Structure of the lesson

Topic & Structure of the lesson

Key Terms you must be able to use

Does not provide facility to define new tags.

<h1 align=left>Example Heading</h1>

Extensible HyperText Markup Language

First XHTML Example

First XHTML Example

First XHTML Example

<body> Welcome to XHTML </body>

All documents begin with a <!DOCTYPE> declaration.

The Rules of XHTML

HTML is not case sensitive, XHTML is

HTML/XHTML attribute values may be case sensitive

(X)HTML elements should be nested not crossed.

W3C XHTML Validation Service

W3C XHTML Validation Service

W3C XHTML Validation Service

W3C XHTML Validation Service

W3C XHTML Validation Service

Six headers ( header elements)

<strong> tag Bold br element

Three most popular formats

width and height

Pixels (picture elements) Empty elements

<a href="http://www.yahoo.com"><img src="yahoo.gif" /></a><br />

Special Characters and More Line Breaks

Special Characters and More Line Breaks

<title>Special Characters and More Line Breaks</title>

Special Characters and More Line Breaks

Special Characters and More Line Breaks

Unordered list element ul

Nested and Ordered Lists

Represent hierarchical relationships Ordered lists (ol)

Nested and Ordered Lists

Nested and Ordered Lists

Nested and Ordered Lists

Nested and Ordered Lists

Nested and Ordered Lists

Basic XHTML Tables

Organize data into rows and columns table element

Basic XHTML Tables

Basic XHTML Tables

Basic XHTML Tables

Basic XHTML Tables

Basic XHTML Tables

Basic XHTML Tables

Intermediate XHTML Tables and Formatting

Intermediate XHTML Tables and Formatting

Intermediate XHTML Tables and Formatting

Intermediate XHTML Tables and Formatting

Intermediate XHTML Tables and Formatting

Basic XHTML Forms

Basic XHTML Forms

Basic XHTML Forms

Basic XHTML Forms

More Complex XHTML Forms

More Complex XHTML Forms

www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp validator.w3.org www.w3.org/TR/2001/REC-xhtml1120010531 www.vbxml.com/xhtml/articles/xhtml_ tables www.webreference.com/xml/reference/ xhtml.html

Question and Answer Session