1

Basic XHTML Concepts – Part

Internet & World Wide Web: How to Programby Deitel and Deitel

2 of Chapter 4

1

To read between the lines was easier than to follow the text.

—Henry James

High thoughts must have high language.—Aristophanes

Yea, from the table of my memoryI’ll wipe away all trivial fond records

2

I ll wipe away all trivial fond records.—William Shakespeare

He had a wonderful talent for packing thought close, and rendering it portable.

—Thomas Babington Macaulay

OBJECTIVES

In this chapter you will learn: To understand important components of XHTML

documents. To use XHTML to create formatted web pages. To add images to web pages.g g To create and use hyperlinks to navigate web pages. To mark up lists of information. To create tables with rows and columns of data and control

table formatting. To create and use forms to get user input. To make web pages accessible to search engines using

<meta> tags.

3

2

Chapter 4 Sections in Part 2

4.5 Headings

4.6 Linking

4.7 Images

4

Error-Prevention Tip

Most current browsers attempt to render XHTML documents even if they are not valid

This often leads to unexpected and This often leads to unexpected and possibly undesirable results

Use a validation service, such as the W3C MarkUp Validation Service, to confirm that an XHTML document is syntactically correct

5

Heading Elements

XHTML provides six heading elements (h1 through h6) for specifying the relative importance of information

heading element h1 is considered the most– heading element h1 is considered the most significant heading and is rendered in the largest font (default – can be altered)

– each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font

– which font can be set using CSS (later)6

3

Heading Elements

The heading element is a structural designation – not format

Thus, formatting can vary from web page to web page but the browser is set up toto web page, but the browser is set up to handle structural elements in a certain way

Generally speaking, browsers handle heading elements using different sized fonts

Portability Tip

The text size used to display each heading element can vary significantly between browsers

In a later chapter we discuss how to In a later chapter, we discuss how to control the text size and other text properties using formatting (Cascading Style Sheets)

8

Look-and-Feel Observations

Placing a heading at the top of every XHTML page helps viewers understand the purpose of each page.

Use larger headings to emphasize more Use larger headings to emphasize more important sections of a web page

9

4

Heading Elements h1 Through h6

10

Creates six headings, each with decreasing significance

Heading Elements h1 Through h6

11

Linking

A hyperlink references or links to other resources, such as XHTML documents, another point inside the current XHTML document images multimedia contentdocument, images, multimedia content, etc.

Web browsers typically underline text hyperlinks and color them blue by default

12

5

a Element

Users can insert links with the anchor element– <a>Click Here</a>

The anchor element requires attributes The anchor element requires attributes– href attribute

• specifies the resource (e.g., page, file, e-mail address) being linked to

• Resource is specified as the value of the href attribute

• href=“another_page_in_the_same_folder.html”13

a Element (cont.)

Anchor elements can link to an e-mail address using an href attribute value of the formmailto: URL– mailto: URL

– When someone clicks this type of anchored link, most browsers launch the default e-mail program (e.g., Outlook Express) to initiate an e-mail message addressed to the linked address

14

strong Element

The strong element typically causes the browser to render text in a bold font

Remember that XHTML strong implies t t d t f tstructure as opposed to format

Thus, you could define all strong elements to be displayed in a way other than bold – bold is just, generally speaking, a browser default way of handling these elements

15

6

Hyperlinks using the Anchor Element

16

Creates anchor elements that link to the URL specified in the hrefattribute

Hyperlinks using the Anchor Element

17

Some Things to Note About the XHTML of the Last Example

All the links are absolute links to a web page on a different server– href attribute values are all http:// followed by

fully qualified domain names and folder pathsfully qualified domain names and folder paths

White space in the XHTML document is ignored by the browser when it renders the page (see line 10 of the document)

7

Linking to an email Address

Hyperlink that creates a message to

19

the address deitel@deitel.com with the computer’s default e-mail program

Display Linking to an email Address

The link, when clicked, causes the browser to open the default email client software on the user’s workstation

20

Absolute vs. Relative Hyperlinks (Simplified)

When you create a web site – it is a collection of page documents on a server

Often all the pages are in one folder or directory on the web serverdirectory on the web server

To link to another document on the same server you do not need to provide an absolute URI for the href attribute value

You can provide a relative URI

8

Example

Go to www.tech.uh.edu/faculty/miertschin/2336itec/LinksExample/Home/home.html

Study the relative links demonstrated there Study the relative links demonstrated there

This is BASIC – but IMPORTANT info

You will need it to specify paths to image files and other files

Absolute vs. Relative Links

Look for additional info on the web –abundant!

http://www.lockergnome.com/web/2006/02/20/relative and absolute hyperlinks//20/relative-and-absolute-hyperlinks/

http://www.uncw.edu/cte/how2/rvaurl/

http://support.microsoft.com/kb/903163

Displaying Images

Digital images can be viewed with a browser

Open a digital image file with any b d ill th di it l d tbrowser and you will see the digital data rendered as a picture

Digital file types recognized by browsers include .png, .jpg and .gif formats– there are others

– more on this later24

9

img Element – src Attribute

The img element in an XHTML document points to a separate digital file that contains the image

The element’s src attribute value pair The element s src attribute-value pair specifies the location of the image file

img Element – alt Attribute

Every img element must have an altattribute-value pair– contains text that is displayed if the client

software cannot render the imagesoftware cannot render the image

– makes web pages more accessible to users with vision impairments

width and height are optional attributes– if omitted, image’s actual dimensions used

– Image dimensions are measured in pixels

Good Web Development Practice

Always include the width and the height of an image inside the <img> tag. When the browser loads the XHTML file, it will know immediately from these attributes howimmediately from these attributes how much screen space to provide for the image and will lay out the page properly, even before it downloads the image.

27

10

Performance Tip

Including the width and height attributes in an <img> tag can result in the browser’s loading and rendering pages faster.

28

Common Error

Entering new dimensions for an image that change its inherent width-to-height ratio distorts the appearance of the image.

For example, if your image is 200 pixels wide and 100 pixels high, you should ensure that any new dimensions have a 2:1 width-to-height ratio.

29

img ELement

img is an example of an XHTML empty element

empty elements contain only attribute-l i d d t k t tvalue pairs and do not mark up text

Empty elements such as img must be terminated, either by using the forward slash character (/) inside the closing right angle bracket or by explicitly writing an end tag

30

11

Images in XHTML files.

Specifies the image file’s

31

Specifies the image file’s location. In this case info is relative path info.

Specifies the image’s width

Specifies the image’s height

Specifies text to display if the image is unavailable

Images in XHTML files.

32

Images Can Be Used to Link

Create an image hyperlink by nesting an img element in an anchor element

Take care that the element tags are t d ( t l i )nested (not overlapping).

33

12

Images as Links

Embed an image as the content for an anchor link. Use nested element tags (never use overlapping element tags).

So you see this nestedSo you see this nested structure in the document to the right:

<a>

<img />

</a>

34

Creates a hyperlinked image

Images as Links

35

Internal Linking

The a tag can be used to link to another section of the same document by specifying the element’s id as the link’s hrefhref.

To link internally to an element with its idattribute set, use the syntax #id.

36

13

Internal Hyperlinks Make Pages More Navigable

Page 1

37

Internal Hyperlinks Make Pages More Navigable

Page 2

38

Internal Hyperlinks Make Pages More Navigable

Page 3

39

14

Internal Hyperlinks Make Pages More Navigable

40

Look-and-Feel Observation

Internal hyperlinks are useful in XHTML documents that contain large amounts of information. Internal links to different parts of the page make it easier for users toof the page make it easier for users to navigate the page—they do not have to scroll to find the section they want.

41

End of Slides for Part 2 of Chapter 04 – Basic XHTML

Internet & World Wide Web: How to Programby Deitel and Deitel

1/28/2011 42

Chapter 04 Basic XHTML Concepts