30
Link addresses
When a link address doesn’t specify a page, like about.html or faq.html, the
browser knows to go to the home page of the site, usually called index.html.
http://www.stackoverflow.com…
…is the same as…
http://www.stackoverflow.com/index.html
If I wanted to link to a page other than index.html, I would include the page name in
the address, like… http://www.stackoverflow.com/web-design.html
Note that there’s a / between the domain name and the page name. There are no
spaces.
If the page I wanted to link to were in a subfolder under the main folder, I’d include
the subfolder name as well:
http://www.stackoverflow.com/questions/web-design.html
A link might drill down through additional levels of subdirectories, to get to a page.
For example:
http://www.stackoverflow.com/questions/rookie/newest/web-design.html
You don’t have to have several levels of subdirectories in your site structure, but you
might want to for purposes of organization if the site has hundreds of pages. On the other
hand, if it’s a simple site, you might have, for example, just an “images” subfolder and a
“styles” subfolder under the main folder. All the HTML pages would be in the main
folder. Or you might choose to have a flat structure, with no subdirectories at all. It’s up to
you.
When you link to a page on your own site, you can skip the domain name. For
example, if I want to display a link on the home page of my site that takes the user to my
own site’s faq page, I won’t have to write…
<a href=“http://www.asmarterwaytolearn.com/faq.html”>Frequently As
I can write, simply…
<a href=“faq.html”>Frequently Asked Questions</a>
When I omit the domain name, the browser understands that I’m linking to a page on
the same site.
If the page I’m linking to is on the same site but in a folder or several levels of
directories lower than the folder you’re linking from, you can still skip the domain name,
but you have to include the name(s) of the lower folder or directories.
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
checking.html”>Frequently Asked Questions</a>
In the example above, you’re telling the browser that the page code-checking.html
is one level below the folder you’re linking from, in the subfolder services. Note that there
is no / before the subfolder name.
But suppose you want to link from a page in the services subfolder to a page in the
products subfolder that’s on the same level as the services subfolder. So now you have to
tell the browser to first go back up one level, and then go down from there to the products
subfolder. This is how you do it.
<a href=”../products/text-
editors.html”>Frequently Asked Questions</a>
For each level the browser needs to go back up in order to go down again, add an
additional ../
For example, suppose you’re writing a link on a page that’s in a folder two levels
down from the home page. To link back to the home page (index.html), you’d write:
<a href=”../../index.html“>Home</a>
In your HTML file create a brief paragraph that includes a link that takes the user to
the why-exercises.html page at smarterwaytolearn.com. Save the file and display the
page. Click the link.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-30-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/30.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
31
Linking to a location
on a page
When you create a page of significant length, you might want to provide links to
various sections of the page, so the user doesn’t have to scroll through the page looking
for the section she wants to see. On a long page, it’s also nice to provide links to the top of
the page, so when she’s finished with a lower section, she can jump back to the top.
You begin by choosing a heading, paragraph, or other element to serve as the starting
point for the section. You give this element an id.
<h2 id=“fame-claim”>OUR CLAIM TO FAME</h2>
Then you create a link to it.
<a href=”#fame-claim”>Read all about our claim to fame.</a>
It’s like links you learned about in the last chapter, except that a # precedes the id in
the reference.
To insert a link back to the top, you’d create an id for an element at or near the top of
the page. It could be the main heading for the page. Or it could be the content div that
encompasses all the content on the page.
<div class=“content” id=“top”>
Then, wherever you want to place the link, you could write…
<a href=”#top“>Back to the top</a>
When you want to link to a location on another page on the same site, you have to
include the name of the page.
<a href=”faq.html#why-
me“>Get answers to your cosmic questions</a>
The code above links to a heading, paragraph, or other element with the id why-me
on the faq.html page.
When you want to link to a section of a page on another site, you have to include the
domain name.
<a href=”http://www.cosmicquestions.com/faq.html#why-
me“>Get answers to your cosmic questions</a>
In order for this to work, the page on the other site has to have an element with the id
“why-me.”
In your HTML file give the heading at the top of the page an id. At the bottom of the
http://cncmanual.com/ h|||t|t||p|||:|/||/|f|r||e|||e|||p|||d|||f|-||b|||o|||o||k|||s|||.|c|||o|||m|| www.itbookshub.com
and click it.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-31-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/31.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
32
Opening a new window
No one ever wants to lose a user to another site, but sometimes we have to link away
anyway. The tactic for encouraging the user not to leave permanently is to open the linked
site in a new window, leaving your site in its existing window. This is how to do it.
Look it up at <a href=“http://www.wikipedia.org” target=“_blank”
When the user clicks the link text Wikipedia a new window opens for Wikipedia.
The original page remains open in its own window.
Have you seen link text that says things like “Explain this” or “What is this”? When
you click one of these links, a small window opens on top of the main window with a bit
of useful information. Most of the main window still shows, so the user doesn’t get
disoriented. She sees the little window as an addendum to the main window.
Unfortunately, you can’t create one of these little informational windows in HTML. You
need JavaScript. My book A Smarter Way to Learn JavaScript shows you how, step-by-
step. But here’s some code that you can paste into your page if you’d like to create a small
window without knowing JavaScript.
<p id=“openWindow”>Tell me a little more about this.</p>
<script>
document.getElementById(“openWindow”).onclick = openWindow;
function openWindow() {
var w = window.open(“more-
info.html”, ””, “width=200,height=300,left=300,top=400”);
}
</script>
Adapt the script above to your needs by making these changes:
Substitute your anchor for Tell me a little more about this.
Substitute your HTML file name for more-info.html
Substitute your preferred width and height for width=200,height=300. The numbers
are pixels.
Substitute your preferred window placement on the screen for left=300,top=400. The
first number tells the browser how many pixels to inset the window from the left edge
of the screen. The second number tells the browser how many pixels to drop the
window from the top of the screen.
Don’t add or delete any spaces from the code. The spacing may look odd, but if you
try to improve it in any of the wrong places, the window won’t open.
In your HTML file code a paragraph that includes a link to asmarterwaytolearn.com.
http://cncmanual.com/ h|||t|t||p|||:|/||/|f|r||e|||e|||p|||d|||f|-||b|||o|||o||k|||s|||.|c|||o|||m|| www.itbookshub.com
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-32-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/32.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
33
Styling links
By default browsers style link text in blue with an underline. But you can give it a
different style. You can specify a different font-family, font-size, font-weight, color, and
other font characteristics.
You can even lose the underline if you like. But be careful. Users have been
conditioned to associate the underline with links. If there’s no underline, they’ll have a
harder time identifying text as something they can click. Conversely, it’s a bad idea to
underline non-linking text for emphasis. Some users will try to click on it. For emphasis,
it’s better to put non-linking text in italics or bold.
This CSS code colors all your links goldenrod.
a {
color: #b8860b;
}
You can make links change their appearance when the user hovers the mouse over
them. This code bolds them and removes the underline when the user hovers. (Removing
the underline on hover isn’t a problem, because the user has already identified it as a link.)
a:hover {
font-weight: bold;
text-decoration: none;
}
In the code above, text-decoration: none removes the underline.
It’s not a good idea to underline nonlinking text since it may confuse the reader by
signalling that the text is clickable, but you can underline text if you choose to, by
specifying text-decoration: underline.
You can change the appearance of links at the moment the user clicks. This code
increases
a:active {
font-size: 1.25em;
}
You can change the appearance of links that the user has already clicked. This code
changes their color.
a:visited {
color: deeppink;
}
In your CSS file code links grey and links that are hovered on orange. Save the file.
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-33-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/33.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
34
Clickable images
You can substitute an image for a link anchor (the text that the user clicks). When the
user clicks on the image, it works the same as anchor text: a new page loads or something
else happens. To do it, you combine two tags you already know, the a tag and the img tag.
Look again at the link code from Chapter 28.
<a href=“http://www.stackoverflow.com”>Stack Overflow</a>
When the user clicks the words “Stack Overflow” she’s taken to stackoverflow.com.
Here’s some code that uses the Stack Overflow logo instead of an anchor.
<a href=“http://www.stackoverflow.com”>
<img src=“images/stack-overflow-
logo.png alt=“Stack Overflow logo” width=“85” height=“25”>
</a>
When the user clicks the image, she’s taken to stackoverflow.com
One way to create a clickable button is to make an image of a button, then make the
image clickable.
<a href=“faq.html”><img src=“images/button-
faq.png alt=“Button linking to FAQ page” width=“50” height=“18”>
</a>
Another good use for clickable images is a photo gallery. You array one or more
rows of thumbnail images across the page. When the user clicks one of them, a larger
version of the image loads in a new window. Here’s code that turns an array of thumbnails
into a clickable catalog.
<a href=“full-size-robin.html”><img class=“fl-
left” src=“images/thumbnail-
1.jpg” alt=“Robin” width=“50” height=“50”></a>
<a href=“full-size-blue-jay.html”><img class=“fl-
left” src=“images/thumbnail-
2.jpg” alt=“Blue Jay” width=“50” height=“50”></a>
<a href=“full-size-cardinal.html”><img class=“fl-
left” src=“images/thumbnail-
3.jpg” alt=“Cardinal” width=“50” height=“50”></a>
<a href=“full-size-sparrow.html”><img class=“fl-
left” src=“images/thumbnail-
4.jpg” alt=“Sparrow” width=“50” height=“50”></a>
<a href=“full-size-pigeon.html”><img class=“fl-
left” src=“images/thumbnail-
http://cncmanual.com/ h|||t|t||p|||:|/||/|f|r||e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
A nice way to do this is to add target=“_blank” to the a tag as I showed you in
Chapter 32, so the page with the big picture opens in a new window. Even nicer: open it in
a window that’s smaller than full-size so the user can see a portion of the original page
underneath, as I showed you at the end of Chapter 32.
In your HTML file create an image tag for
http://www.asmarterwaytolearn.com/robo_guy.png and link it to asmarterwaytolearn.com.
Save the page and display it. Click the picture.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-34-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/34.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
35
Image maps part 1
An image map is special type of clickable image. Your code sections it into two or
more parts. If the user clicks one section of the image, a new page loads. If he clicks
another section, a different page loads. For example, you might have a photograph
showing six historical buildings in a town square. When you click on a particular building,
a page loads that tells the story of the building.
Image maps require quite a bit of code, so I’m going to divide the subject into two
chapters.
Let’s say your image is “6-buildings.jpg.” You begin with a standard img tag.
<img src=“6-
buildings.jpg” alt=“6 historial buildings” width=“800px” height=“55
Within the tag you specify the name of the image map that’s going to divide up the
photo into clickable regions.
<img src=“6-
buildings.jgp” alt=“6 historial buildings” width=“800px” height=“55
Give the map any name you like as long as it doesn’t include spaces. Precede the
name with #.
Next you code the image map. It’s a section of code that begins with an opening map
tag and ends with a closing /map tag.
<map name=“buildings”>
[Here you define each of the sections and give their
link addresses. I’ll cover this in the next chapter.]
</map>
Notice that the map name, “buildings,” is the same name you specified in the img
tag, but without the #. You’ve now told the browser to display the picture of the six
buildings, and to connect the picture to an image map named “buildings.” In the next
chapter, we’ll create the map itself.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/35.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
36
Image maps part 2
You’ve placed an image on the page, and you’ve connected it to an image map by
writing, within the img tag, usemap=”#buildings”. Then you’ve started an image
map definition with the line…
<map name=“buildings”>
Here’s the whole thing.
<map name=“buildings”>
<area shape=“rect” alt=“Tuttle House” coords=“76,42,279,510” href=“
house.html”>
<area shape=“rect” alt=“Tittle Hall” coords=“286,125,346,503” href=
hall.html”>
<area shape=“rect” alt=“Tooble Tower” coords=“352,134,445,482” href
tower.html”>
<area shape=“rect” alt=“Tibble Manse” coords=“448,119,559,471” href
manse.html”>
<area shape=“rect” alt=“Treble Cottage” coords=“559,211,605,466” hr
cottage.html”>
<area shape=“rect” alt=“Tikkel Place” coords=“606,180,682,460” href
place.html”>
</map>
These are the parts of each map section.
1. The shape of the area. Write “rect” for rectangle, “circle” for circle, or “polygon” for
polygon.
2. Alternative text for screen readers. You learned about this in Chapter 2
3. The screen coordinates that define the area. See below for how to get these
coordinates. Examples: For a rectangle, coordinates of 76,42,279,510 mean the
clickable rectangle begins 76 pixels in from the left edge of the image and 42 pixels
down from the top of the image, and extends right by 279 pixels from the left edge of
the image and 510 pixels down from the top of the image. For a circle, coordinates of
100,60,10 mean the clickable circle has a center at 100 pixels in from the left edge of
the image and 60 pixels down from the top of the image, and has a radius of 10
pixels. For a polygon, coordinates of 150,217,190,257,150,297,110,257 create a
diamond shape. The top point of the diamond is 150 pixels in from the left edge of
the image and 217 pixels down from the top of the image. The right point of the
diamond is 190 pixels in from the left edge of the image and 257 pixels down from
the top of the image, and so on. Three sets of coordinates create a triangle area, five
sets a pentagonal area, and so on.
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
Rather than trying to create an image map by hand, automate the task with a utility
that does most of the work for you, including the fussy work of establishing coordinates.
Web development tools like Dreamweaver include such a utility. You can also use a free
online image map creator like the one at http://www.image-maps.com. My favorite tool
for creating image maps is Mapedit, a downloadable program from
http://www.boutell.com. There’s a generous free trial period, after which you pay $15.
1. In your HTML file insert a break after the robo_guy.png image.
2. Create an image map using http://www.asmarterwaytolearn/stooges.jpg
3. I’ve mapped the Stooges’ faces as three clickable areas. They’re circles. The
coordinates are 56,56,47…126,93,31…and 208,66,3
4. Do a Google search for each of the Stooges. Copy the Google URLs that the searches
generate and use them as the links. For example, when the user clicks Curly’s face,
she’s taken to the Google search for Curly.
5. Save the file and display the page. Click on each of the faces.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-36-1.html
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/36.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
37
Bullet lists
and numbered lists
The HTML term for a bullet list is unordered list. Unordered means not numbered.
An ordered list is a numbered list. Making bullet and numbered lists in HTML is
convenient, because HTML automatically indents lists and automatically numbers ordered
lists.
In both types of list, you write a tag for the list—<ul> for unordered lists and <ol>
for ordered lists. Then you write a tag for each item— <li>, which stands for list item.
<li> is the tag for individual items in either type of list, ordered or unordered.
This code creates a bullet (unordered) list.
<ul>
<li>Sun</li>
<li>Moon</li>
<li>Planets</li>
<li>Stars</li>
</ul>
This code creates a numbered (ordered) list.
<ol>
<li>Wash</li>
<li>Rinse</li>
<li>Repeat</li>
</ol>
Things to notice:
Each list item is indented two spaces.
Each opening tag is completed with a closing tag.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-37-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/37.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f|r||e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
38
Stlying lists
Since lists are text elements, you can style them the way you’d style a paragraph or
heading, with a customized font-family, font-size, font-weight, color, and margins.
This CSS code insets any unordered list, assigning extra whitespace on both the left
and right.
ul {
margin: 0 1.5em 0 1.5em;
}
You could, of course, adjust the top and/or bottom margins, too. Use the same type
of code for ordered lists. Just substitute ol for ul in the code above.
The code above styles all the unordered lists on the page. You could create a class of
lists, just for some of your lists.
ol.special {
margin: 0 1.5em 0 1.5em;
}
By default, browsers don’t add any space between list items. I think they look better
if they’re separated a bit.
li {
margin: .75em;
}
Note that there’s only one margin number in the code above. Browsers understand
that it specifies the space between list items.
The default is a bullet on the outside with all lines of text indented. To make the
default explicit, write…
ul {
list-style-position: outside;
}
To indent only the first line of text and make all other lines flush with the bullet,
write…
ul {
list-style-position: inside;
}
In your CSS file add space between list items. Save the file. Display the page.
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://asmarterwaytolearn.com/htmlcss/practice-38-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/38.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
39
Styling a lists’s markers
Markers are the bullets in an unordered list or the numbers in an ordered list.
If you don’t specify what kind of bullets you want in an unordered list, the browser
displays a disc: •
This is the CSS code that explicitly specifies a disc as the marker. It would normally
be superfluous, since the disc is the default.
ul {
list-style-type: disc;
}
To use a ○ for the bullet, substitute circle for disc in the code above.
To use a ■ substitute square.
You can use an image for a bullet. The example below creates a class of unordered
list that uses an image.
ul.custom {
list-style-image: url(“images/heart.png”);
}
In the code above, “images/heart.png” tells the browser the path and file
name of the image.
An image used as a bullet creates headaches. To begin with, you must size the image
to fit the list text. Then, if the user zooms in or out on the page, the browser doesn’t adjust
the bullet to fit, as it does with the built-in disc, circle, and square. Everything gets out of
whack. It’s possible to build a defense against this, but you’re probably better off spending
your coding time on something that the user cares more about.
The default list-style-type for ordered lists is decimal—1, 2, 3 etc. You can change
it to decimal-leading-zero—01, 02, 03 etc.; lower-alpha—a, b, c etc.;
upper-alpha—A, B, C etc.; lower-roman—i., ii., iii. etc.; and upper-roman—I,
II, III etc. Here’s code that creates a class for upper-roman.
ol.second-level {
list-style-type: upper-roman;
}
In your CSS file style unordered list markers as squares. Save the file. Display the
page.
Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-39-1.html.
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://www.ASmarterWayToLearn.com/htmlcss/39.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
40
More CSS selectors
A CSS selector is everything on the first line that precedes the {. It’s the part of a
style rule that tells the browser what elements, classes, and ids a rule applies to. The
selectors are highlighted in the following code fragments.
p {
p.special {
.special {
p#intro {
#intro {
So far you’ve learned to create…
1. An element selector like p, div, or img.
2. An element class selector like p.special, div.important, or img.gallery.
3. A class selector tied to no particular type of element like .special, .important,
or .gallery.
4. An element id selector like p#intro, div#sidebar, or img#logo.
5. An id selector tied to no particular type of element like #intro, #sidebar, or
#logo.
You can combine selectors to create more complicated selectors. Here’s one.
div.important p {
The code above selects all paragraphs in a div that’s been assigned the class
“important.”
The following code selects all images…that are in list items…in an unordered list…
with the id “pix-list.”
ul#pixList li img {
Here’s some code that selects the first paragraph following any div.
div + p {
The following code selects only the first level of divs within the div that has an id
of “main.”
div#content > div {
So in the following code, only the highlighted divs are selected.
<div id=“main”>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f|r||e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
<div>
[some content]
</div>
[some content]
<div>
[some content]
</div>
</div>
<div>
[some content]
<div>
[some content]
</div>
</div>
You can learn a lot about selectors by playing around with the interactive W3Schools
CSS selector tester at http://www.w3schools.com/CSSref/trysel.asp.
In your HTML file you coded a div with an id. In your CSS file double the size of
all paragraphs within that div. Save the file. Display the page.
Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-40-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/40.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
41
Tables: basic structure
All the HTML code for a table is enclosed in an opening and closing tag.
<table>
[The details of the table go here.]
</table>
Within those tags you create rows and columns. Here’s a table with two rows and
two columns.
<table>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tr>
</table>
This is what the table looks like (with a border that I added to make the rows and
columns stand out).
Unless you style a border explicitly, most browsers display it without borders, like
this.
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
You’ll learn how to add borders, if you want them, in a later chapter, and to style
tables so they’re more attractive. For now, let’s get you familiar with this barebones
structure.
As you can see from the HTML code, you build a table a row at a time. You create a
row using the <tr> (for “table row”) tag. Then you create all the cells within that row
using the <td> (for “table data”) tag.
All the text content of a table cell is enclosed between the opening tag and the
closing <td> tag. The opening <tr> tag and closing </tr> tag don’t enclose any text
content. They only contain the <td> tags and their text content.
All opening tags are paired with closing tags.
Each row must have the same number of cells, created with the <td> and </td>
tags, even if some of the cells are empty. To create this table, with nothing in row 2,
column 1…
…you’d write…
<table>
<tr>
<td>Apples</td>
<td>Oranges</td>
</tr>
<tr>
<td></td>
<td>Pears</td>
</tr>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
Notice that all the <tr> tags are indented two spaces inside the <table> tag, and
the <td> tags are indented two spaces inside the <tr> tags.
In your HTML file code a table with two rows and two columns. Save the file.
Display the page.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-41-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/41.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
42
Tables: headings
You can tell the browser to add headings for tables. Here’s a table with column
headings.
This is the code.
<table>
<tr>
<th scope=“col”>Dog</th>
<th scope=“col”>Cat</th>
</tr>
<tr>
<td>Canine</td>
<td>Feline</td>
</tr>
<tr>
<td>Bark</td>
<td>Meow</td>
</tr>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f|r||e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
<td>Puppy</td>
<td>Kitten</td>
</tr>
</table>
You begin by creating a row for the headings, just as you would for regular cells.
Then, using the opening <th> (for “table heading”) and closing </th> tags, you
construct cells with text in them, as you would for regular text cells. But note
scope=“col”. This tells the browser that you want column headings—headings on top
—not row headings, which would begin each row on the left. By default, most browsers
bold heading text and center it horizontally with the cell. Now let’s create a table with row
headings, like this one.
This is the code.
<table>
<tr>
<th scope=“row”>Species</th>
<td>Canine</td>
<td>Feline</td>
</tr>
<tr>
<th scope=“row”>Sound</th>
<td>Bark</td>
<td>Meow</td>
</tr>
<tr>
<th scope=“row”>Immature</th>
<td>Puppy</td>
<td>Kitten</td>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f|r||e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
</table>
You create a heading for each row. And you write scope=“row”. Here’s the table
with both column and row headings.
This is the code.
<table>
<tr>
<th scope=“col”></th>
<th scope=“col”>Dog</th>
<th scope=“col”>Cat</th>
</tr>
<tr>
<th scope=“row”>Species</th>
<td>Canine</td>
<td>Feline</td>
</tr>
<tr>
<th scope=“row”>Sound</th>
<td>Bark</td>
<td>Meow</td>
</tr>
<tr>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
<td>Puppy</td>
<td>Kitten</td>
</tr>
</table>
Notice that there are three column headings, the first one blank. This tells the
browser that there is no column heading over the column of row headings.
In your HTML file code a table with both column and row headings. Save the file.
Display the page.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-42-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/42.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
43
Tables:
spanning columnsand rows
Sometimes you need to combine two or more cells into a single, extra-wide cell.
The table above shows the early-afternoon schedule for three facilities. I’ve added
borders, and I’ve highlighted the two spanned rows that I want you to pay attention to.
Neither the borders nor the highlighting are part of the code below. You’ll learn how to
add both kinds of styling in subsequent chapters. This is the code.
<table>
<tr>
<th scope=“col”></th>
<th scope=“col”>1 pm</th>
<th scope=“col”>2 pm</th>
<th scope=“col”>3 pm</th>
</tr>
<tr>
<th scope=“row”>Gym</th>
<td>Dodge ball</td>
<td>Kick boxing</td>
<td>Sack racing</td>
</tr>
<tr>
<th scope=“row”>Exercise room</th>
<td>Spinning</td>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
<tr>
<th scope=“row”>Pool</th>
<td colspan=“3”>Water polo</td>
</tr>
</table>
The code for a column-span cell looks like a regular <td> cell, except for the code
colspan=”[number of columns to span]”. The closing tag is the same as for
a regular <td> cell. Notice that a <td> with the colspan feature replaces the same
number of regular <td>s as the number of columns that are spanned. In the first row,
there are three regular <td>s. In the second row, where two columns are spanned, there’s
one regular <td> plus the span. In the third row, where three columns are spanned, there’s
no regular <td>. You can make table headings span columns, too. The code is…
<th scope=“row” colspan=”[number of columns to span]”>Whatever</t
Spanning rows works the same way as spanning columns, but uses rowspan.
Here’s the table above, reconfigured so the facilities are at the top and the times are on the
left.
This is the code.
<table>
<tr>
<th scope=“col”></th>
<th scope=“col”>Gym</th>
<th scope=“col”>Exercise Room</th>
<th scope=“col”>Pool</th>
</tr>
<tr>
<th scope=“row”>1 pm</th>
<td>Dodge ball</td>
<td>Spinning</td>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
</tr>
<tr>
<th scope=“row”>2 pm</th>
<td>Spinning</td>
<td rowspan=“2”>Yoga marathon</td>
<tr>
<th scope=“row”>3 pm</th>
<td rowspan=“3”>Sack racing</td>
</tr>
</table>
You can make table headings span rows, too. The code is…
<th scope=“column” rowspan=”[number of rows to span]”>Whatever</th>
You can divide a table into three sections: a header, body, and footer. This helps
screen readers, but doesn’t do anything for sighted users that you can’t do using the code
I’ve already taught you. I’ll show you an example. You won’t be tested on it in the
exercises.
This is the code.
<table>
<thead>
<tr>
<th></th>
<th>Gym</th>
<th>Exercise Room</th>
<th>Pool</th>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
</thead>
<tfoot>
<tr>
<th></th>
<th>3 activities</th>
<th>2 activities</th>
<th>1 activity</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope=“row”>1 pm</th>
<td>Dodge ball</td>
<td>Spinning</td>
<td rowspan=“3”>Water polo</td>
</tr>
<tr>
<th scope=“row”>2 pm</th>
<td>Spinning</td>
<td rowspan=“2”>Yoga marathon</td>
<tr>
<th scope=“row”>3 pm</th>
<td rowspan=“3”>Sack racing</td>
</tr>
</tbody>
</table>
Code a simple table with two rows and two columns. In the second row, span the
columns.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-43-1.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/43.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f|r||e|||e|||p|||d|||f|-||b|||o|||o||k|||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
44
Tables: borders
You can create a table with borders or without. Here’s a table where all the cells have
borders.
This is the CSS code.
th, td {
border: 1px solid black;
}
By specifying 1px solid black I’m asking for a solid black line of minimal—
1-pixel—width. For a heavier line, increase the pixel number. For another type of line,
specify dotted or one of the other border styles covered in Chapter 17.
By default, browsers add a little space between cells, as in the table shown above.
This creates gaps between the hairline borders. If you don’t want those gaps, add a
specification for the table:
table {
border-collapse: collapse;
}
This is the result.
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
By default, browsers don’t draw a border around anything. If you don’t want
borders, there’s nothing to code. But with CSS you can add borders anywhere you like.
For example, here’s a table with top and bottom borders framing the table headers.
Here’s the CSS code.
th.top-row {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
The first seven lines of HTML would be…
<table>
<tr>
<th class=“top-row” scope=“col”></th>
<th class=“top-row” scope=“col”>Gym</th>
<th class=“top-row” scope=“col”>Exercise Room</th>
<th class=“top-row” scope=“col”>Pool</th>
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
[etc.]
The only reason I have to define a special class of <th> is that I’ve also got <th>s
running down the left side of the table, denoting times. Since I don’t want borders on
these, I need to make a distinction for <th>s that have column scope. Otherwise, I could
just write…
th {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
To create left and right borders use border-left and border-right. For
example, suppose you want heavy orange borders defining the left and right edges of
certain tables.
This is the code.
table.standout {
border-left: 5px solid orange;
border-right: 5px solid orange;
}
The first line of HTML would be…
<table class=“standout”>
In your CSS file specify borders for all cells. Eliminate space between borders. Save
the file. Display the page. Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-44-1.html. Find the interactive coding
exercises for this chapter at: http://www.ASmarterWayToLearn.com/htmlcss/44.html
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
45
Tables:
Spacing part 1
By default, browsers don’t add breathing room between the table cell borders and the
text they contain. They’re jammed up against each other. It looks crowded.
The solution is to add padding.
th, td {
padding: .25em;
}
The CSS code above adds a little whitespace all around the text.
You increase or decrease the amount of padding by changing the em number. You
can also specify different padding for different sides.
td {
padding: .25em 1.5em 0 1.5em;
}
The CSS code above adds extra padding at the top, just a little on the sides, and none
http://cncmanual.com/ h|||t|t||p|||:|/||/|f||r|e|||e|||p|||d|||f|-||b|||o|||o|||k||s|||.|c|||o|||m|| www.itbookshub.com
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
A Smarter Way to Learn HTML and CSS
Discover the best professional documents and content resources in AnyFlip Document Base.
Search