IT350 Web and Internet Programming

Chapter 4 - Introduction to XHTML: Part 1

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

Lab Accounts • Student Web Server Accounts – Mapping web-server account to department student account • • • •

File Explorer: Tools
Map Network Drive (pick drive W) \\cs-websrvr.cs.usna.edu\www.mXXXXXX.it350.cs.usna.edu$ Note $ on the end Username: USNA\mXXXXXX

– URL for each student website on Department Web-Server is as follows: www.mXXXXXX.it350.cs.usna.edu • where "XXXXXX", is the individual student's alpha number

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

4.1 Introduction / 4.2 Editing XHTML • Extensible HyperText Markup Language (XHTML) – A markup language based on HTML – Separates document presentation from information – Standard defined by W3C

• 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

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

Basic Syntax






Adapated from  2008 Prentice Hall, Inc. All rights reserved.

Useful links

Example 1



2



main.html (1 of 1)

4 5

-->

6

-->

7

"http://www.w3.org/1999/xhtml">

8 9 10

Welcome Welcome Welcome

11 12 13 14

Welcome Welcome to XHTML! XHTML!

15

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

4.4 W3C XHTML Validation Service • Validation service ( validator.w3.org ) – Checking a document’s syntax – Provide URL or upload file

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

Block vs. inline tags in XHTML • Block tags – Start their content on a new line

• Inline tags – Their content continues on the same line

• Restrictions – Inline tags (and text) must be nested inside block tags, not directly under or – Block tags cannot be nested inside inline tags ILLEGAL:

Foo

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

4.5 Headers – h1 to h6 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

--> --> "http://www.w3.org/1999/xhtml"> Headings Headings Headings Level Level Level Level Level Level L Level Level Level Level Level

1 2 3 4 5 6

Heading Heading heading heading heading heading heading heading heading heading heading heading

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

4.6 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

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

1



2



4 5

-->

6

-->

7

"http://www.w3.org/1999/xhtml">

8 9 10

Links Links Links

11 12



13

Here Here are my favorite sites sites

14

Click Click a name to go to that page. page. strong>

15 16

-->

17

"http://www.deitel.com">Deitel

18

"http://www.prenhall.com">Prentice Hall

19

"http://www.yahoo.com">Yahoo!

20 21

"http://www.usatoday.com">USA Today

22

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

Relative vs. Absolute Links • Absolute links Textbooks NYT

• Relative links Textbooks Textbooks More on dogs

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

4.7 Images 1



2



4 5

-->

6

-->

7

"http://www.w3.org/1999/xhtml">

8 9 10

Images Images Images

11 12



13

8"?>

2



4 5

-->

6

-->

7

"http://www.w3.org/1999/xhtml">

8



9

Navigation Navigation Bar Bar

10

nav.html (1 of 2)

11 12



13

"links.html">

14



16

17 18

"list.html">

19



21

22 23

"contact.html">

24



26

27 28

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

"table1.html">

29



31

32 33

"form.html">

34

nav.html (2 of 2)



36

37 38



39



40

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

Exercise #1 – “Hello World” • Create a “Hello World” page that just displays “Hello World” as a header

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

Exercise #2 • Add to the Hello World page a link to the IT350 course webpage, and a link to the email address of the instructor

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

4.8 Special Characters and More Line Breaks • 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)

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

1 2 3



4 6

--> -->

7

"http://www.w3.org/1999/xhtml">

5

8 9 10

contact2.html (1 of 2)

Contact Contact Page Page

11 12



13



14

Click

15

"mailto:[email protected]">here here

16

to open an email email message addressed to

17

[email protected].

18



19 20

-->

21 22

-->

23

-->

24

All information on this site is ©

25

Deitel & Associates, Inc. 2007.

26

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

27

-->

28

-->

29

-->

30

-->

31

You may download 3.14 x 10 2 characters worth of information from this site.

32

Only one download per hour is permitted.

33 34

Note: < ¼ of the information presented here is updated daily.

35 36

contact2.html (2 of 2)



37

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

4.9 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

• Ordered list element ol – Creates a list in which each item begins with a number

• Lists may be nested to represent hierarchical data relationships

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

1



2



4 5

-->

6

-->

7

"http://www.w3.org/1999/xhtml">

8

Links Links Links

9 10

links2.html (1 of 1)



11 12



13

Here Here are my favorite sites sites

14

Click Click on a name to go to that page. page.

15 16

-->

17



18

-->

19

"http://www.deitel.com">Deitel

20

"http://www.w3.org">W3C

21

"http://www.yahoo.com">Yahoo! "http://www.cnn.com">CNN

22



23 24



25

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

1 2 3



4 5

-->

6

--> "http://www.w3.org/1999/xhtml">

7 8



9

Lists Lists Lists

10

list.html (1 of 2)

11 12 13

The The Best Features of the Internet Internet

14 15

-->

16

li>You You can meet new people from countries around world. the world.

17 18 19 20

You have access to new media as it becomes public:

21 23

-->

24

-->

25

New New games games

22

26 27

New New applications

28

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

29

-->

30

For business

31

For pleasure

32



33

-->

34 35 36

Around Around the clock news news

37 38

Search Search engines engines Shopping Shopping Shopping

39

Programming Programming

list.html (2 of 2)

40 41

-->

42



43

XML XML XML

44

Java Java Java

45

XHTML XHTML XHTML

46

Scripts Scripts Scripts New New languages languages

47



48

-->

49

-->

50 51



52 53 54 55 56

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

58 57

Adapated from  2008 Prentice Hall, Inc. All rights reserved.

Adapted from  2008 Prentice Hall, Inc. All rights reserved.

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

Adapated from  2008 Prentice Hall, Inc. All rights reserved.