Introduction to XHTML 1 Chapter 4 Introduction to XHTML: Part 1 Reference From: Internet & World...

Introduction to XHTML1

Chapter 4

Introduction to XHTML: Part 1

Reference From:

Internet & World Wide Web: How to ProgramDeitel, Deitel & Goldburg


What is XHTML?

EXXtensible HHyperTText MMarkup LLanguage– XHTML 1.1– A markup language that specifies the format of

the text that is displayed in a Web browser.– Separation of the presentationpresentation of a document

from the structurestructure of the document’s information– Based on HTML

A legacy technology of the World Wide Web Consortium (W3C)


Editing XHTML

XHTML documents– Source-code form– Text editor (e.g. Notepad, emacs, etc.)– .html or .htm file-name extension– Web server

Stores XHTML documents

– Web browser Requests XHTML documents

XHTML DTD

The XHTML standard defines three Document Type Definitions. The most common is the XHTML Transitional.

An XHTML document consists of three main parts:

1. the DOCTYPE 2. the Head 3. the Body


XHTML document types

There are currently 3 XHTML document

types: STRICT TRANSITIONAL FRAMESET


XHTML 1.0 Strict

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/

xhtml1-strict.dtd">

Use this when you want really clean markup, free of

presentational clutter. Use this together with CSS.


XHTML 1.0 Transitional

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

Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understandCascading Style Sheets.


XHTML 1.0 Frameset

<!DOCTYPE htmlPUBLIC "-//W3C//DTD

XHTML 1.0 Frameset//EN“ "http://www.w3.org/TR/xhtml1/

DTD/xhtml1-frameset.dtd">

Use this when you want to use HTML Frames to

partition the browser window into two or more

frames.Introduction to XHTML8

First XHTML Example (1)

XHTML comments starts with 

Mandatory XHTML Elements: <?xml version =“1.0”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <!–- this is an example page --> <html >

<head> <title>Title goes here</title>

</head> <body> </body></html>



html element is the root element of a XHTML document– head element– The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

– The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

– body element Body section: Page’s content the browser displays



body element Body section: Page’s content the browser displays

– The <body> tag defines the document's body.– The <body> element contains all the contents of

an HTML document, such as text, hyperlinks, images, tables, lists, etc.



Every element starts with Start tag and ends with End tag, with the displayed content in between them.

Example: <html>. . .</html>, <head>. . .</head>. Start tag may have attributes (provide additional

information about an element)– A name and value pair– Example:

<html xmlns=“http://www.w3.org/1999/xhtml”>


XHTML Syntax Rules

XHTML documents must have one root element XHTML elements

– be properly nested – be closed – be in lowercase

Attribute names– be in lower case

Attribute values– be quoted

<title> Element / Tag

The HTML <title> Element– The <title> tag defines the title of the document.– The <title> element is required in all HTML/XHTML documents.

The <title> element:– defines a title in the browser toolbar– provides a title for the page when it is added to favorites– displays a title for the page in search-engine results

A simplified HTML document:<html>

<head><title>Title of the document</title></head><body>The content of the document......</body></html>


main.html(1 of 1)

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

12

13 <body>

14 <p>Welcome to XHTML!</p>

15 </body>

16 </html>

Headers

Six headers ( header elements): h1 ~ h61 <?xml version = "1.0"?>



4

5 

6 

7


9 <head>

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

11 </head>

12

13 <body>

14

15 <h1>Level 1 Header</h1>

16 <h2>Level 2 header</h2>





21

22 </body>

23 </html>


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: <a> </a>

Attribute href specifies the location of a linked resource : href = “http://www.yahoo.com”

Link to e-mail addresses: href = “mailto:[email protected]”

links.html(1 of 2)




4

5 

6 

7


9 <head>

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

11 </head>

12

13 <body>

14

15 <h1>Here are my favorite sites</h1>

16

17 <p><strong>Click a name to go to that page.</strong></p>

18

19 

20 <p><a href = "http://www.deitel.com">Deitel</a></p>

21

22 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>

23

24 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>

25

contact.html(1 of 1)




4

5 

6 

7


9 <head>

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

11 </head>

12

13 <body>

14

15 <p>

16 My email address is

17 <a href = "mailto:[email protected]">

18 [email protected]

19 </a>

20 . Click the address and your browser will

21 open an e-mail message and address it to me.

22 </p>

23 </body>

24 </html>


Malicious Link Manipulation

Phishing: a link in an email leads to the spoofed website– Make the anchor text for a link appear to be valid

<a href=“http://www.badsite.com”>

www.paypal.com

</a>– Misspelled URL

<a href=“http://www.bananarepubli.com”>BR</a>


Images (1)

Three most popular formats– Graphics Interchange Format (GIF)– Joint Photographic Experts Group (JPEG)– Portable Network Graphics (PNG)– img element with attributes:

src attribute : Specifies the location of the image file width and height attributes: Pixels (“picture elements”) alt attribute : the text will be displayed if the browser could

not display the image.


Images (2)

Empty elements– Terminated by character / inside the closing right

angle bracket (>), or by explicitly including the end tag– Example:<img src=“1.jpg” height=“238” width=“183” />

br element: Line break– <br />

<strong> tag: <strong>Bold characters</strong>– Bold

picture.html(1 of 1)




4

5 

6 

7


9 <head>

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

11 </head>

12

13 <body>

14

15 <p>

16 <img src = "xmlhtp.jpg" height = "238" width = "183"

17 alt = "XML How to Program book cover" />

18 <img src = "jhtp.jpg" height = "238" width = "183"

19 alt = "Java How to Program book cover" />

20 </p>

21 </body>

22 </html>


Image as Link

Use an image as a link <a href=“http://www.yahoo.com”>

<img src= "yahoo.gif" width="232" height = "44" /> </a>

Image has no border <a href="FirstExample.html"> <img src="home.png" width="125" height="26" alt="Go Home" border="0" /> </a>

nav.html(1 of 2)




4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Navigation Bar

11 </title>

12 </head>

13

14 <body>

15

16 <p>

17 <a href = "links.html">

18 <img src = "buttons/links.jpg" width = "65"

19 height = "50" alt = "Links Page" />

20 </a><br />

21

22 <a href = "list.html">

23 <img src = "buttons/list.jpg" width = "65"

24 height = "50" alt = "List Example Page" />

25 </a><br />


Internal Linking

Enables the user to jump between locations in the same document– First, create an internal hyperlink destination by

setting attribute id of an element– Second, create an internal link to this element.– Example:

<h1 id=“bugs”>Bugs </h1> :

<a href=“#bugs”>Go to Bugs</a>

links.html(1 of 3)




4

5 

6 

7


9 <head>

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

11 </head>

12

13 <body>

14

15 

16 <h1 id = "features">The Best Features of the Internet</h1>

17

18 

19 <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>

20

21 <ul>

22 <li>You can meet people from countries

23 around the world.</li>

24

25 <li>You have access to new media as it becomes public:

links.html(3 of 3)

51 <li>Keeping in touch with old friends</li>

52 <li>It is the technology of the future!</li>

53 </ul>

54

55 

56 <h1 id = "bugs">My 3 Favorite Bugs</h1>

57

58 <p>

59

60 

61 <a href = "#features">Go to <em>Favorite Features</em>

62 </a></p>

63

64 <ol>

65 <li>Fire Fly</li>

66 <li>Gal Ant</li>

67 <li>Roman Tic</li>

68 </ol>

69

70 </body>

71 </html>


Creating and Using Image Maps (1)

Designate certain areas of an image (called hotspots) as links– Element map

Attribute id identifies the image map

– Element img Attribute usemap refers the map by id.

– Example: <map id=“picOne”> .. </map><img src=“picture.gif” usemap=“#picOne” />


Creating and Using Image Maps (2)

Element area defines hotspot– Attribute shape and coords

Specify the hotspot’s shape and coordinates Rectangular ( shape = “rect” ) Polygon ( shape = “poly” ) Circle ( shape = “circle” )

– Attribute href Specifies the link’s target.

– Attribute alt Provides alternative text for the link.

1 <?xml version = "1.0" ?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

4

5 

6 

7


9 <head>

10 <title>

11 Internet and WWW How to Program - Image Map

12 </title>

13 </head>

14

15 <body>

16

17 <p>

18

19 

20 <map id = "picture">

21

22 

23 

24

25 <area href = "form.html" shape = "rect"

26 coords = "2,123,54,143"

27 alt = "Go to the feedback form" />

28 <area href = "contact.html" shape = "rect"

29 coords = "126,122,198,143"

30 alt = "Go to the contact page" />

31 <area href = "main.html" shape = "rect"

32 coords = "3,7,61,25" alt = "Go to the homepage" />

33 <area href = "links.html" shape = "rect"

34 coords = "168,5,197,25"

35 alt = "Go to the links page" />

36

37 

38 

39 <area shape = "poly" alt = "E-mail the Deitels"

40 coords = "162,25,154,39,158,54,169,51,183,39,161,26"

41 href = "mailto:[email protected]" />

42

43 

44 

45 <area href = "mailto:[email protected]"

46 shape = "circle" coords = "100,36,33"

47 alt = "E-mail the Deitels" />

48 </map>

49

50 

51 

52 <img src = "deitel.gif" width = "200" height = "144"

53 alt = "Deitel logo" usemap = "#picture" />

54 </p>

55 </body>

56 </html>


Unordered Lists

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– Format: <ul>

<li> </li> <li> </li></ul>

links2.html(1 of 2)




4

5 

6 

7


9 <head>

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

11 </head>

12

13 <body>

14

15 <h1>Here are my favorite sites</h1>

16

17 <p><strong>Click on a name to go to that page.</strong></p>

18

19 

20 <ul>

21

22 

23 <li><a href = "http://www.deitel.com">Deitel</a></li>

24

25 <li><a href = "http://www.w3.org">W3C</a></li>


26

27 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>

28

29 <li><a href = "http://www.cnn.com">CNN</a></li>

30 </ul>

31 </body>

32 </html>


Nested and Ordered Lists

Represent hierarchical relationships Ordered lists (ol)

– Creates a list in which each item begins with a number

– Format <ol> <li> </li> <li> </li></ol>

list.html(1 of 3)




4

5 

6 

7


9 <head>

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

11 </head>

12

13 <body>

14

15 <h1>The Best Features of the Internet</h1>

16

17 

18 <ul>

19 <li>You can meet new people from countries around

20 the world.</li>

21 <li>

22 You have access to new media as it becomes public:

23

list.html(2 of 3)

24 

25 

26 

27 <ul>

28 <li>New games</li>

29 <li>

30 New applications

31

32 

33 <ol>

34 <li>For business</li>

35 <li>For pleasure</li>

36 </ol>

37 </li>

38

39 <li>Around the clock news</li>

40 <li>Search engines</li>

41 <li>Shopping</li>

42 <li>

43 Programming

44

45 

46 <ol>

47 <li>XML</li>

48 <li>Java</li>

list.html(3 of 3)

49 <li>XHTML</li>

50 <li>Scripts</li>

51 <li>New languages</li>

52 </ol>

53

54 </li>

55

56 </ul> 

57 </li>

58

59 <li>Links</li>

60 <li>Keeping in touch with old friends</li>

61 <li>It is the technology of the future!</li>

62

63 </ul> 

64

65 </body>

66 </html>


Type of Ordered List

Attribute type defines the type of list Available types:

type=“A” type=“a” type=“I” type=“i” type=“1”


Type of Unordered List

Attribute type defines the type of list Available types:

type=“disc” type=“square” type=“circle”


Special Characters and More Line Breaks

Character entity references: &code; Numeric character references (e.g. &)

– See Appendix A, (page 1429)– A complete list :http://www.w3.org/TR/xhtml-modularization/dtd_module_defs.html

<del> </del> : Strike-out text <sup> </sup> : Superscript text <sub> </sub> : Subscript text <hr /> : Horizontal rule (horizontal line)

contact2.html(1 of 2)




4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Contact Page

11 </title>

12 </head>

13

14 <body>

15

16 

17 

18 <p>

19 Click

20 <a href = "mailto:[email protected]">here

21 </a> to open an e-mail message addressed to

22 [email protected].

23 </p>

24

25 <hr />

contact2.html(2 of 2)

26

27 <p>All information on this site is <strong>©</strong>

28 Deitel <strong>&</strong> Associates, Inc. 2002.</p>

29

30 

31 

32 

33 

34 <p><del>You may download 3.14 x 10<sup>2</sup>

35 characters worth of information from this site.</del>

36 Only <sub>one</sub> download per hour is permitted.</p>

37

38 <p>Note: <strong>< ¼</strong> of the information

39 presented here is updated daily.</p>

40

41 </body>

42 </html>


W3C XHTML Validation Service (1)

Validation service ( validator.w3.org )– Checking a document’s syntax

URL that specifies the location of the file Uploading a file to the site validator.w3.org/file-upload.html


W3C XHTML Validation Service (2)


Web Resources

www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp validator.w3.org hotwired.lycos.com/webmonkey/00/50/

index2a.html wdvl.com/Authoring/Languages/XML/XHTML www.w3.org/TR/2001/REC-xhtml11-20010531


Reference

Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004.

Reproduced by permission of Pearson Education, Inc.

Introduction to XHTML 1 Chapter 4 Introduction to XHTML: Part 1 Reference From: Internet & World...

Documents

Transcript of Introduction to XHTML 1 Chapter 4 Introduction to XHTML: Part 1 Reference From: Internet & World...