L2 - XHTML 1
-
Upload
seham123123 -
Category
Documents
-
view
217 -
download
0
Transcript of L2 - XHTML 1
-
8/10/2019 L2 - XHTML 1
1/47
INTRODUCTION TO
XHTML
-
8/10/2019 L2 - XHTML 1
2/47
HTML and XHTML
HTML: Hyper-Text Markup Language: the
foundation of the World-Wide Web.
Platform independence: pages can be viewed
using a variety of different computers andbrowsers.
Convenient linking from one page to another
(hypertext).
XHTML:
Extensible Hyper-Text Markup Language.
Based on HTML.
2
-
8/10/2019 L2 - XHTML 1
3/47
Editing XHTML
XHTML documents
Source-code form
Text editor (e.g. Notepad)
.html or .htm file-name extension
Web server
Stores XHTML documents
Web browser Requests XHTML documents
3
-
8/10/2019 L2 - XHTML 1
4/47
main.html(1 of 1)
1
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 < -- Fig. 4.1: main.html -->
6 < -- Our first Web page -->
7
8
9
10 Internet and WWW How to Program - Welcome
11
12
13
14
Welcome to XHTML
15
16
First XHTML Example4
-
8/10/2019 L2 - XHTML 1
5/47
Tag
A tag is a tag-name enclosed in angle brackets.
Tags usual lycome in pairs: an opening tag
and a clos ing tag,which is the same tag-name
preceded by a slash.
Content affected by tag
5
Opening Tag ClosingTag
-
8/10/2019 L2 - XHTML 1
6/47
Tags for Document Structure
Some tags specify the overall structure of the
document:
... encloses the entiredocument.
... encloses the headportion of the
document.
Title of the document.
Style sheets and scripts.
... encloses the bodyportion of the
document.
Pages content the browser displays.
6
-
8/10/2019 L2 - XHTML 1
7/47
First XHTML Example
XHTML comments
Start with
Paragraph
paragraph text
7
-
8/10/2019 L2 - XHTML 1
8/47
Nesting of tags
Opening and closing tags define regions
affected by the tags. These regions mustnest, not overlap.
Correct:
Some text more text and more.
Wrong:
Some text more text and more.
8
-
8/10/2019 L2 - XHTML 1
9/47
Rules about Tags
Not all tags need closing tag
For some tags, a closing tag is opt ional:
paragraph. Implies closing of previous paragraph tag.
Thus, the closing
tag is optional but recommended,especially if the tag contains attributes.
For some tags, a closing tag is neverused:
line break. Marks a locat ion, not a region.
Tag names are case-insensitive and
and
are all equivalent.9
-
8/10/2019 L2 - XHTML 1
10/47
Rules about Tags
Unknown tags are ignored.
This rule allows new tags to be introduced
without causing problems for older browsers.
But it also means you need to be careful to
spell tag names correctly!
10
-
8/10/2019 L2 - XHTML 1
11/47
Tags with attributes
Some tags can be qualified by attributes that
provide needed add i t ional informat ion or
change the defaul t p roperties of the tag.
Attributes are specified within the angle brackets
following the opening tag name.
Attributes arenever
listed in a closing tag.
-
8/10/2019 L2 - XHTML 1
12/47
W3C XHTML Validation Service
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
12
-
8/10/2019 L2 - XHTML 1
13/47
W3C XHTML Validation Service13
-
8/10/2019 L2 - XHTML 1
14/47
W3C XHTML Validation Service14
-
8/10/2019 L2 - XHTML 1
15/47
Headers
Six headers ( header elements)
h1through h6
15
-
8/10/2019 L2 - XHTML 1
16/47
1
2< DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5< -- Fig. 4.4: header.html -->
6< -- XHTML headers -->
7
8
9
10Internet and WWW How to Program - Headers
11
12
13
14
15 Level 1 Header
16 Level 2 header
17Level 3 header
18
Level 4 header
19Level 5 header
20Level 6 header
21
22
23
16
-
8/10/2019 L2 - XHTML 1
17/47
-
8/10/2019 L2 - XHTML 1
18/47
Images
Three most popular formats
Graphics Interchange Format (GIF).
Joint Photographic Experts Group (JPEG).
Portable Network Graphics (PNG).
There is no closing tag.
imgelement
srcattribute
Specifies the location of the image file
widthand heightattributes
Altattribute
18
-
8/10/2019 L2 - XHTML 1
19/47
Images: example19
1
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 < -- Fig. 4.7: picture.html -->
6 < -- Adding images with XHTML -->
7
8
9
10 Internet and WWW How to Program - Welcome
11
12
13
14
15
16
18
20
21
22
-
8/10/2019 L2 - XHTML 1
20/47
Images: example20
1
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 < -- Fig. 4.7: picture.html -->
6 < -- Adding images with XHTML -->
7
8
9
10 Internet and WWW How to Program - Welcome
11
12
13
14
15
16
18
20
21
22
-
8/10/2019 L2 - XHTML 1
21/47
Images: example21
-
8/10/2019 L2 - XHTML 1
22/47
Linking
Hyperlink
References other sources such as XHTML
documents and images.
Both text and images can act as hyperlinks.Created using the (anchor) tag
Attribute href
Specifies the location of a linked resource.
Link to e-mail addresses using mailto:URL.
22
-
8/10/2019 L2 - XHTML 1
23/47
23
1
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 < -- Fig. 4.5: links.html -->
6 < -- Introduction to hyperlinks -->
7
8
9
10 Internet and WWW How to Program - Links
11
12
13
14
15Here are my favorite sites
16
17
Click a name to go to that page.
18
19 < -- Create four text hyperlinks -->
20
Deitel
21
22
Prentice Hall
23
24
Yahoo
25
-
8/10/2019 L2 - XHTML 1
24/47
24
26
USA Today
27
28
29
-
8/10/2019 L2 - XHTML 1
25/47
25
1
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 < -- Fig. 4.6: contact.html -->
6 < -- Adding email hyperlinks -->
7
8
9
10 Internet and WWW How to Program - Contact Page
11
12
13
14
15
16My email address is
17
19
20 . Click the address and your browser will
21 open an e-mail message and address it to me.
22
23
24
-
8/10/2019 L2 - XHTML 1
26/47
26
-
8/10/2019 L2 - XHTML 1
27/47
Image as a hyperlink
Nested tags.
27
-
8/10/2019 L2 - XHTML 1
28/47
28
1
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5< -- Fig. 4.8: nav.html -->
6 < -- Using images as link anchors -->
7
8
9
10Internet and WWW How to Program - Navigation Bar
11
12
13
14
15
16
17
18
20
21
22
23
25
-
8/10/2019 L2 - XHTML 1
29/47
29
26
27
28
30
31
32
33
35
36
37
38
40
41
42
43
45
46
47
48
49
-
8/10/2019 L2 - XHTML 1
30/47
30
S C
-
8/10/2019 L2 - XHTML 1
31/47
Special Characters and More Line
Breaks
Character entity references (in the form &code;)
Numeric character references (e.g. &)
del
Strikethrough text: sup
Superscript text
sub
Subscript text Horizontal rule (horizontal line)
31
-
8/10/2019 L2 - XHTML 1
32/47
32
1
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 < -- Fig. 4.9: contact2.html -->
6 < -- Inserting special characters -->
7
8
9
10 Internet and WWW How to Program - Contact Page
11
12
13
14
15
16 < -- special characters are entered -->
17 < -- using the form &code; -->
18
19 Click
20 here
21 to open an e-mail message addressed to
23
24
25 < -- inserts a horizontal rule -->
-
8/10/2019 L2 - XHTML 1
33/47
33
26
27
All information on this site is
28 Deitel &Associates, Inc. 2002.
29
30 < -- to strike through text use tags -->
31 < -- to subscript text use tags -->
32 < -- to superscript text use tags -->
33 < -- these tags are nested inside other tags -->
34
You may download 3.14 x 102
35 characters worth of information from this site.
36 Only one download per hour is permitted.
37
38
Note: < of the information
39 presented here is updated daily.
40
41
42
-
8/10/2019 L2 - XHTML 1
34/47
34
-
8/10/2019 L2 - XHTML 1
35/47
Unordered Lists
Unordered list element ul
Creates a list in which each item begins with a
bullet symbol
li(list item) Entry in an unordered list
35
1
2
-
8/10/2019 L2 - XHTML 1
36/47
36
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5< -- Fig. 4.10: links2.html -->
6 < -- Unordered list containing hyperlinks -->
7
8
9
10Internet and WWW How to Program - Links
11
12
13
14
15Here are my favorite sites
16
17
Click on a name to go to that page.
18
19 < -- create an unordered list -->
20
21
22 < -- add four list items -->
23 Deitel
24
25 W3C
26
27
-
8/10/2019 L2 - XHTML 1
37/47
37
27Yahoo
28
29CNN
30
31
32
-
8/10/2019 L2 - XHTML 1
38/47
Nested and Ordered Lists
Represent hierarchical relationships
Ordered lists (ol)
Creates a list in which each item begins with a
number
38
-
8/10/2019 L2 - XHTML 1
39/47
39
1
2 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 < -- Fig. 4.11: list.html -->
6< -- Advanced Lists: nested and ordered -->
7
8
9
10 Internet and WWW How to Program - Lists
11
12
13
14
15 The Best Features of the Internet
16
17 < -- create an unordered list -->
18
19 You can meet new people from countries around
20 the world.
21
22 You have access to new media as it becomes public:
23
24 < -- this starts a nested list, which uses a -->
-
8/10/2019 L2 - XHTML 1
40/47
40
25 < -- modified bullet. The list ends when you -->
26< -- close the tag. -->
27
28 New games
29
30New applications
31
32 < -- nested ordered list -->
33
34 For business
35 For pleasure
36
37
38
39 Around the clock news
40 Search engines
41Shopping
42
43 Programming
44
45 < -- another nested ordered list -->
46
47 XML
48 Java
49
-
8/10/2019 L2 - XHTML 1
41/47
41
49 XHTML
50 Scripts
51 New languages
52
53
54
55
56 < -- ends the nested list of line 27 -->
57
58
59 Links
60 Keeping in touch with old friends
61 It is the technology of the future
62
63 < -- ends the unordered list of line 18 -->
64
65
66
-
8/10/2019 L2 - XHTML 1
42/47
42
-
8/10/2019 L2 - XHTML 1
43/47
Lists
typeattribute:
Ordered list:
1: 1, 2, 3, ..
a: a, b, c, .. A: A, B, C, ..
i: i, ii, iii, ..
I: I, II, III, ..
Unordered list: Circle
square
disc
43
ogg
gggg
-
8/10/2019 L2 - XHTML 1
44/47
Tags for Style
Explicit style tagsBoldfaced text
Italicized text
Underlined text
Typewriter-font text
Logical style tagsProminent text - usually bold
Emphasized text - usually italicsCited text- usually italicized
Computer code- usually in typewriterfont
44
-
8/10/2019 L2 - XHTML 1
45/47
Special characters
Some characters such as angle brackets are
reserved for special meanings in HTML. Others
are not available on many keyboards. These
characters can be put into content using codes
between ampersand and semicolon: