7.8 Earthquake, Using New Interpretations Of The - Geopubs
Transcript of 7.8 Earthquake, Using New Interpretations Of The - Geopubs
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 [email protected] 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
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