Structure, Text, Lists & Links

Download Report

Transcript Structure, Text, Lists & Links 

DOCUMENT STRUCTURE,
TEXT, LISTS & LINKS
Transitional DTD
Frameset DTD
 The Frameset DTD is identical to the
transitional DTD, except that it includes
the <frameset> and <frame> elements
Frameset DTD
 Allows you to split the browser window
into two or more frames, which are
independent, scrollable portions of a Web
browser window, with each frame capable
of displaying a separate URL
Block-Level and Inline Elements
 Two basic types of elements can
appear within a document’s <body>
element: block-level and inline
 Block-level elements are elements that give a
Web page its structure
 Inline, or text-level, elements describe the text
that appears on a Web page
 Unlike block-level elements, inline elements do not
appear on their own lines; they appear within the
line of the block-level element that contains them
Block-Level and Inline Elements
Standard Attributes
 You place attributes before the closing
bracket of the starting tag, and you
separate them from the tag name or other
attributes with a space
 Many XHTML attributes are unique to a
specific element or can only be used with
certain types of elements
Standard Attributes
Boolean Attributes
 A Boolean attribute specifies one of two
values: true or false
 The presence of a Boolean attribute in an
element’s opening tag indicates a value of
“true”, whereas its absence indicates a
value of “false”
Boolean Attributes
 This syntax also means that an attribute must be
assigned a value
 For this reason, minimized Boolean attributes are illegal
in XHTML
 You can still use Boolean attributes in XHTML
provided you use their full form
 When a Boolean attribute is not assigned a value,
it is referred to as having a minimized form
 Recall that all attribute values must appear within
quotation marks
 You create the full form of a Boolean attribute by
assigning the name of the other attribute itself as
the attribute’s value
Required Elements
 What are the required elements/tags for
every webpage?
The Document Head
 The elements within a document’s head
section contain information about the Web
page itself.
 The document head does not actually
display any information in a browser
 Rather, it is a parent element that can contain
several child elements
 A parent element is an element that
contains other elements, known as child
elements
Child Elements of the <head>
Element
Metadata
 The term metadata means information
about information
 In a Web page, you use the <meta>
element to provide information to search
engines and Web servers about the
information in your Web page
Metadata
 You must place the <meta> element
within the <head> element
 You can use three primary attributes with
the <meta> element: name, content,
and http-equiv
Developer Comments
 Comments are nonprinting lines that you
place in your code to contain various
types of remarks.
 XHTML comments begin with an opening
comment tag <!– and end with a closing
comment tag -->
Web Page with Comments
Text-Formatting Elements
Phrase Elements
 Using phrase elements helps
ensure that your Web pages are
compatible with user agents that
may not be capable of handling
formatting elements
Phrase Elements
The <blockquote> Element
 The <blockquote> element is a
block-level element that defines long
quotations on Web pages
 The <blockquote> element includes
an optional cite attribute to which you
can assign a URL that cites the
quotation, provided you found it on the
Web
The <q> Element
 The <q> element is an inline element that
you use to specify short quotations on
your Web page
 You can also include the cite attribute
with the <q> element, which you assign
the URL where you found the quotation
Special Characters
 You will often find it necessary to add
special characters to your XHTML
documents, such as a copyright symbol
(©) or a non-English character such as the
Latin capital letter E with a circumflex (Ê)
Commonly Used Special
Characters
Creating Lists
 They also provide a simple, yet effective
design technique for making it easier for
Web site visitors to locate information
 You can add three types of lists to a Web
page; unordered lists, ordered lists, and
definition lists
Creating Lists
Unordered Lists
 An unordered list is a series of bulleted
items
 To define the items you want to appear in
the bulleted list, you nest <li> elements
within a <ul> element
Unordered Lists
Ordered Lists
 An ordered list is a series of numbered
items
 To define the items you want to appear in
the numbered list, you nest <li>
elements within an <ol> element
Ordered Lists
Definition Lists
 A definition list is a series of terms and
their definitions
 Web browsers render each term and its
definition on separate lines with an
indented left margin
Definition Lists
 You create a definition list by using the
<dl> element, you nest <dt> elements
for term names and <dd> elements for
term definitions
Definition Lists
Linking Web Pages
 You activate a hypertext link by clicking it
with your mouse button
 A hypertext link in an HTML document is
underlined and often displayed in a vivid
color
Linking Web Pages
 The text or image used to represent a link
on a Web page is called an anchor
 You create a basic hypertext link using the
<a> element (the a stands for anchor)
Linking Web Pages
 It is not always necessary to use images
for links because basic text links, if
properly placed on a Web page, can be
just as effective
 It takes much less time to create a textbased hyperlink than it does to design an
image to use as a hyperlink
Uniform Resource Locators
 The last part of a domain name, known as the
domain identifier, identifies the type of institution
or organization
 Common domain identifiers include .biz, .com,
.edu, .info, .net, .org, .gov, .mil, .ws, .tv, or .int
Uniform Resource Locators
Absolute and Relative Links
 What is an absolute link?
 When do I want to use this type of link?
 What is an relative link?
 Why would I want to use this link type?
Questions?