Lists, Destination Anchors & New Windows
Download
Report
Transcript Lists, Destination Anchors & New Windows
Lists, Destination Anchors &
New Windows
CSCI N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Goals
By the end of today’s lecture, you should
understand …
• … how to use the <q> and <blockquote>
elements.
• … the difference between block elements and
inline elements.
• … how to build lists.
• … how to properly nest elements.
• … how to open links in new windows.
• … how to build destination anchors.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Introducing the Quote Element
• We can use the
quote element, <q>,
for shorter
quotations.
• In Firefox, the
quote element shows
a double-quote
around content.
• Why not just use
the double-quotes?
May I
quote you
on that?
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
REMEMBER: HTML = Structure
• Although Firefox correctly displays the
quotation marks for the <q> element (some
browsers might not display the quotation
marks), the element itself carries more
meaning.
• The <q> element “tells” a browser that the
content it encloses is a quote. Also, it might
help attract search engines when folk are
looking for a specific quote.
• We can deal with browser stylistic
differences using CSS later …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Download and unpack
the file called
segwayJournal.zip
to your storage device.
• Edit the file
segwayJournal.html
& find the quote that
begins "A journey of a
thousand miles” (near
line 40).
• Enclose the quote in the
<q> element.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Adding a Little Style
• Add the following to your <head> element:
<style type = "text/css">
h2
{
border-bottom: solid 1pt #000000;
}
q
{
font-style: italic;
}
#image0820, #image0602
{
text-align: center;
}
</style>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Introducing the Blockquote
• While we use the <q> element for short
quotes, we use the <blockquote>
element for longer quotations.
• Unlike the <q>, the <blockquote> is a
block element. The <q> is an inline
element.
• The <blockquote> stands by itself; we
script the <q> nested inside a <p> or
other block element.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Block vs. Inline Elements
• Block Elements
• Inline Elements
– The “building blocks” of
websites; stand on their
own
– Separate content into
blocks
– Browsers display blank
lines before & after a
block element.
– Examples include <p>,
<h1> … <h6>, &
<blockquote>
– We usually nest them
inside a block element.
– Go within the flow of text
– Examples include <a>,
<q> & <img>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Find the Burma-Shave
quote:
"Passing cars, … Of
eternity.” (near line 25).
• Enclose the quote in the
<blockquote>
element.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The Linebreak ELement
• The linebreak element, <br />, allows us
to break a line in the middle of a
paragraph or other block element.
• We can use multiple <br /> elements in
a row to create multiple blank lines.
• The <br /> element is an empty (standalone) element – it doesn’t require a
closing tag, since it has no content.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Find the Burma-Shave
quote & put a <br /> at
the end of each line
(indicated with a
comma).
• Put 4-5 <br />
elements at the end of
each <p>.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The Ordered List
• We can use the <ol> element to
construct a list of ordinal (1…2…3 or
A…B…C, etc.) items.
• To open a list, we use <ol>; we use
</ol> to close it.
• We enclose each list item in the <li>
element. This is called nesting.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Make an ordered list
of the cities near
the journal entry for
August 20, 2005.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Changing the List Type
• We can change the list type to change the
ordinal style. The default is 1…2…3.
• We can update the list-style-type
property using CSS, like this:
<style type = “text/css”>
ol
{
list-style-type: lower-roman;
}
</style>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
list-style-type Values
for <ol>
VALUE
DISPLAY
decimal
1, 2, 3, 4, 5 …
decimal-leading-zero 01, 02, 03, 04, 05 …
lower-alpha
a, b, c, d, e …
upper-alpha
A, B, D, D, E …
lower-roman
i, ii, iii, iv, v …
upper-roman
I, II, III, IV, V …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Changing the Starting Number
• We can change the list type to change the
beginning value. The default start is 1.
• The best way to do this is to update the
counter-reset property using CSS.
Unfortunately, this property is poorly
supported by browsers (including Firefox).
• We can also use the deprecated start
attribute:
<ol start = “4”>
• The start value is always a decimal number,
regardless of list type!
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The Unordered List
• We can use the <ul> element to
construct a bulleted list.
• To open a list, we use <ul>; we use
</ul> to close it.
• Just like with the <ol>, we enclose
each list item in the <li> element.
This is called nesting.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Make an unordered
list of the items
Tony took on his
journey near the
journal entry for
June 2, 2005.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Changing the List Type
• We can change the list type to change
the bullet style. The default is a disc.
• We can update the list-style-type
property using CSS, like this:
<style type = “text/css”>
ul
{
list-style-type: square;
}
</style>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
list-style-type Values
for <ul>
VALUE
disc
circle
square
DISPLAY
•List Item
oList Item
List Item
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Creating Your Own Bullets
• We make our own bullets by adding the list-styleimage & list-style-position properties to the style
rule. :
<style type = “text/css”>
ul
{
list-style-type: disc;
list-style-image:
url(images/smileyBullet.gif);
list-style-position: outside;
}
</style>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Nesting Elements
• When we nest
elements, we put one
element inside
another.
• HTML syntax rules
state that we close
nested elements in
the opposite order in
which we open those
elements.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Nesting Examples
• Correct:
<p>
I am going to
<em>blog
this.</em>
</p>
• Incorrect:
<p>
I am going to
<em>blog
this.</p>
</em>
Example from Head First HTML, p 111.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Definition Lists
• We can use definition lists to list a term
and define it.
• Definition lists consist of three
elements:
– The <dl> element creates the list.
– The <dt> element presents the term we are
defining.
– The <dd> element gives a description (definition)
of the term.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Definition List Syntax
<dl>
<dt>Indianapolis</dt>
<dd>
A Midwestern city located in
central Indiana; home to the
Colts (football) and Pacers
(basketball).
</dd>
</dl>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Find the description
of Burma Shave
signs at the end of
the document and
change the
description to a
definition list.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Character Entities
• Sometimes, we need to display a special
symbol in our Web page text, or sometime we
need to display a reserved character, like the
> symbol.
• To do this, we would use a character entity.
• We begin all character entities with a &
symbol and end it with a ; (semi-colon).
• To see a list of character entities, visit:
http://www.w3schools.com/tags/ref_entities.asp
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Find the word “iPod”
in the June 2, 2005,
journal entry and
add a copyright
symbol after it.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Making Images More Accessible
• Some browsers might not display images. To assist
those browsers (and make our pages accessible to all
users), it is a good idea to design our pages for nonvisual, as well as visual, browsers.
• To help with images, we can add the alt attribute to
serve as a description of an image. The text we write
for the description will take the place of an image for
browsers that can’t display them.
• For browsers that do show images, many will show the
alt text as a “tooltip.”
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Syntax Example – alt Attribute
<img src = “maps/indyMap.png”
alt = “Map of Greater
Indianapolis” />
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Add descriptions to
the two photographs
included in the file.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
More on Accessibility
• We can also add descriptions to the links we create
using the title attribute.
• The text value of the title attribute describes a link’s
destination:
<a href = “http://www.wdvl.com/”
title = “Visit the Web Developer’s
Virtual Library to find
more information on
creating websites.”>
WDVL</a>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Find the link to the
Segway company and
add a title attrbute
to it.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Opening a Link in a New Window
• Many websites open links outside of their own
domain in a new window.
• To force a link to open in a brand new browser
window, we use the target attribute of the
<a> element.
• The target attribute takes a special value -_blank.
• Example:
<a href = "http://www.iupui.edu/"
target = "_blank">
Visit IUPUI</a>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Find the link to the
Segway company and
add a target force
the link to open in a
new window.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Building Destination Anchors
• In addition to linking to other web
resources, we can build links to specific
parts of a web page using destination
anchors.
• First, we need to create the anchor. To
do so, we use the <a> element,
combined with an id attribute, like this:
<a id = "byBio">
My Biography</a>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Linking to Destination Anchors
• To build a link to a destination
anchor, we use also the <a>
element. We precede the href
value with a # and use the anchor's
id as the href's value, like this:
<a href = "#byBio">
Read my biography.</a>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Linking to Destination Anchors II
• We can also link to a destination
anchor on another web page. To do
so, add the # and the anchor's id
to the end of a page's name, like
this:
<a href = "index.html#byBio">
Read my biography.</a>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try it Out!
• Edit the file
segwayJournal.html
• Find the explanation of
Burma Shave signs near
the bottom of the page.
Add an anchor named
burmaShave to the
explanation.
• Create a link to the anchor
from the text "Burma
Shave" in the July 14,
2005, journal entry.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science