Essentials for Design
XHTML
Creating XHTML Documents
Committed to Shaping the Next Generation of IT Experts.1
Copyright (c) 2004 Prentice-Hall. All rights reserved.
What is HTML?
 Hypertext Markup Language
 Made up of tags, elements, and attributes
 Scripting language that instructs a Web
browser how to display a Web page
 No parsing necessary from computer
 Runs within another application, not stand-alone
 Latest version: HTML 4.01
 Now being replaced with XHTML
Copyright (c) 2004 Prentice-Hall. All rights reserved.
2
Problems with HTML
 Non-standard
 Leads to “browser wars”
 Different Web browsers may apply tags in
different ways
 Different Web browsers may not support tags in
the same way
 Content and presentation mixed together
 Results in sloppy code
Copyright (c) 2004 Prentice-Hall. All rights reserved.
3
What is XHTML?
 eXtensible Hypertext Markup Language
 XML-based extension of HTML
 Developed by World Wide Web Consortium
(W3C)
 Purpose:
 Clean up sloppy, non-standard HTML
 Provide ways to extend HTML and add new
features
 Separate content from presentation
Copyright (c) 2004 Prentice-Hall. All rights reserved.
4
Using Notepad
Title bar
Menu bar
File menu
Document area
Copyright (c) 2004 Prentice-Hall. All rights reserved.
5
Saving an HTML File from Notepad
 By default, files from Notepad are saved with
a .txt extension
 If you try to save as filename.htm, then the
real name will be filename.htm.txt
 You can avoid this by either:
 Making sure that the Save As Type entry is set as
All Files instead of *.txt or
 Saving with the name in quotes, like this:
"filename.htm"
Copyright (c) 2004 Prentice-Hall. All rights reserved.
6
Using Browser
Dialog box for opening
Web page
Browser window
Copyright (c) 2004 Prentice-Hall. All rights reserved.
7
Tags and Elements
 Tags





Tell browser what to do with information
Define the structure of a Web page
Identify beginning and end of elements
Document tags specify each section
Optional in HTML, mandatory in XHTML
 Elements
 Types of object that can contain text or other objects
 Nested elements – elements contained in other elements
Copyright (c) 2004 Prentice-Hall. All rights reserved.
8
Type of Document Tags
 <html> </html> – specify begin and end of
XHTML document
 <head> </head> – specify begin and end of
header information, including title and meta
data
 <title> </title> – specify begin and end of title
that appears in browser’s title bar
 <body> </body> – specify begin and end of
displayed content of XHTML page
Copyright (c) 2004 Prentice-Hall. All rights reserved.
9
XHTML Validation
 Process of syntax checking a Web page
 Confirm that a document adheres to
Document Type Definitions (DFD) defined by
W3C
 DFD types:
 Strict
 Transitional
 Frameset
Copyright (c) 2004 Prentice-Hall. All rights reserved.
10
XHTML Code in Notepad and
Browser Results
Title goes in Title bar of
browser
Body goes in content
area of browser
Copyright (c) 2004 Prentice-Hall. All rights reserved.
11
Versions of XHTML
 Strict (XHTML 2.0)
 Must follow complete XML coding rules
 Must separate content from presentation
 Presentation via Cascading Style Sheets (CSS)
 Transitional (XHTML 1.0, 1.1)
 Reformulation of HTML 4.01
 Presentation and content tags exist
 Frameset
 Enable window-in-a-window effect
Copyright (c) 2004 Prentice-Hall. All rights reserved.
12
White Space in XHTML Documents
 White space – empty area in a page
 Important for making page easier to read
 Enter/Return key does not provide this in
XHTML documents
 Can use paragraph tags: <p> </p>
Copyright (c) 2004 Prentice-Hall. All rights reserved.
13
Effects of <p> Tags
Without <p> tag, Enter/Return has
no effect on browser display
<p> tag inserts white space and
separates lines of text
Copyright (c) 2004 Prentice-Hall. All rights reserved.
14
Closing Container Tags
 XHTML rules require all tags have closers
 Opening tag has tag code:
 e.g. <p>
 Closing tag has forward slash in front of code
 e.g. </p>
 Content placed between open and close tags
 <p> CONTENT </p>
 Browsers are forgiving, but XHTML rules are
strict
Copyright (c) 2004 Prentice-Hall. All rights reserved.
15
Attributes
 Most tags can have attributes
 Attribute is:
 Information in the opening tag
 Specification for what the tag is supposed to do
 Attribute syntax:
 attributename = “value”
 Attribute – value pair
Copyright (c) 2004 Prentice-Hall. All rights reserved.
16
The align Attribute
 Specifies how text within the paragraph
should be aligned
 Options include: left, center, right, justify
 Example:
 <p align = “center”> CONTENT </p>
Copyright (c) 2004 Prentice-Hall. All rights reserved.
17
Deprecation
 Some HTML tags or attributes are deprecated
 Deprecated tags/attributes are old (obsolete)
versions
 Replaced by newer, improved XHTML
tags/attributes
 Most browsers support deprecated tags
 The align attribute is deprecated
 Modern alignment is handled through style sheets
Copyright (c) 2004 Prentice-Hall. All rights reserved.
18
Effects of align attribute
Effect of <p align=“center”>
Effect of <p align=“right”>
Copyright (c) 2004 Prentice-Hall. All rights reserved.
19
The Line Break Tag <br />
 An empty tag (contains no content)
 Close symbol placed at the end of open tag
 <br />
instead of <br> </br>
 No white space placed between lines
 unlike <p> </p>
 Line break is deprecated
 XHTML provides <line> </line> tag
Copyright (c) 2004 Prentice-Hall. All rights reserved.
20
Effects of <br /> Tag
<br /> tag was placed here
Copyright (c) 2004 Prentice-Hall. All rights reserved.
21
Creating Headings
 Concepts
 Six levels of heading tags
 Heading alignment
 XHTML 2.0’s structured headings
Hands-on Exercise
 Add headings to a Web page
Copyright (c) 2004 Prentice-Hall. All rights reserved.
22
Headings Tags
 Boldfaced and large font text
 Six levels of headings:
 <h1></h1> through <h6></h6>
 <h1> is largest
 <h6> is smallest
Copyright (c) 2004 Prentice-Hall. All rights reserved.
23
Structured Headings
 XHTML 2.0 provides structured headings
 <h> tags placed within <section> elements
 No numbering of <h> tags
 <section> nesting determines size of <h>
content
Copyright (c) 2004 Prentice-Hall. All rights reserved.
24
Effects of Headings Tags
<h1 align="center">Dr. Know-It-All Recommendations</h1>
<h2 align="center">Upcoming Books</h2>
Copyright (c) 2004 Prentice-Hall. All rights reserved.
25
Blockquote Tag
<blockquote> </blockquote>
Indents contained text
Indentation from left and right margins
Nest blockquote tags to increase
indentation
Copyright (c) 2004 Prentice-Hall. All rights reserved.
26
Effects of Blockquote Tag
<blockquote> tag causes this indentation
Nested <blockquote> causes more indentation
Copyright (c) 2004 Prentice-Hall. All rights reserved.
27
Citations in Blockquote
 Use of cite attribute
 Specify source URL
 URL = Uniform Resource Locator
Copyright (c) 2004 Prentice-Hall. All rights reserved.
28
Justify
 Align attribute can be used for <p> tag
 One align option is “justify”
 <p align=“justify”>
 Justify value stretches text to fill entire margin
space
Copyright (c) 2004 Prentice-Hall. All rights reserved.
29
Descargar

XHTML Essentials: Level 1 Chapter 1