UNIT E: Inserting and Working With Links

engineerbeetsAI and Robotics

Nov 15, 2013 (3 years and 4 months ago)

606 views

HTML5 and CSS3

Illustrated

Solutions to Unit
E

EOU Exercises


HT
-
1


UNIT
E
:
Inserting and Working With Links

Lessons

Note the following differences between the starting data file for Unit F and the completed
work

students create for Unit E:



In Unit F, the id "mainnav" is assigned to the nav element, rather than to the p
element
nested within it



In Unit F, the two external links on the nav bar use shortened links from bit.ly



In the Unit F file, the id "footer" is removed from the final paragraph, and the paragraph is
contained within a footer element

Concepts Review

Scree
n Labeling

Matching
Items

Multiple
Choice

1
c

8
d

15 b

2
e

9
g

16 a

3
f


10
f

17
b

4
d


11
a

18
d

5
g

12
c

19
c

6
b

13
e

20
b

7
a

14
b

21 c



22 a


Skills Review

Filenames:
index.html,
history.html,
location.html,
bigjmenu.pdf,
bigj.css, bjprint.css


Note the following differences between the starting data file

for Unit F and the completed
index.html file students create for Unit E:



In Unit F, the second to last p element includes the id "awards"



In Unit F, the paragraph with the id "contact" contains three sets of address and phone
information



In Unit F, the external links on the
location.html

Web page

use shortened links from bit.ly


Step
1
.
Create a site nav bar
.

Step
2.
Link to maps of three locations
.

Step
3
.

Create
rules based on pseudo
-
classes to style the nav bar links
.

Step 4.
Add a tar
get attribute to each map link to open it in a new window
.

Step 5.
In location.html, create an anchor in the heading for each section, then create a page nav bar
that links to the anchors
.

Add a "Back to top" link in each section. Add rules based on
pseudo
-
classes to style these links.

Step 6.
Add a link to a PDF document

and create a revised version of the style sheet for printed
output.

HTML5 and CSS3

Illustrated

Solutions to Unit
E

EOU Exercises


HT
-
2


Step 7. Add an anchor at the start of main page content on each page, then add a skip link to the top
of each page that
targets the new anchor. Change "Back to top" links to target the skip link.
Enclose each nav bar in a nav element and add a script reference to each HTML file for
consistent interpretation.


Independent Challenges


Note
: Validating the CSS and HTML code, testing
all links

in a browser, and publishing files to a
Web server is assumed for all exercises.



HTML5 and CSS3

Illustrated

Solutions to Unit
E

EOU Exercises


HT
-
3


Independent Challenge 1

Filenames:
index.html,
hours.html,
resource.html,
spotwren.css, swprint.css


Note the following

differences between the starting data file for Unit F and the completed
index.html file students create for Unit E:



In Unit F, the
skipnav element is nested within the element with the id "box"



In Unit F, the
paragraph with the id "tagline" is below the
nav bar




In Unit F, the
final paragraph is nested within a footer element


S
tudents are asked to
add
and style links on existing Web pages as follows
:



create a ma
i
n nav bar, including links to all the pages on the Web site

and

a link to a map on
an externa
l site
.



add rules based on pseudo
-
classes to format the links in the nav bar



add a link to a local weather forecast on an external site and a link to a local PDF document.



create skip links along with the corresponding anchors.



enclose nav bars in nav elem
ents and add script reference to the head section of each
document.



create a revised version of the style sheet for printed output


Figure
E
-
21

shows
the
completed
Resources
Web page
.






HTML5 and CSS3

Illustrated

Solutions to Unit
E

EOU Exercises


HT
-
4


Independent Challenge 2

Filename
s
:
index.html,
started.html,
schedule.html,
mrsl.css, mrsprint.css


Note the following differences between the starting data file for Unit F and the completed
index.html file students create for Unit E:



Unit F adds a div element with the id "box" around the page content



Unit F replaces the div element with the id "headings" with a header element



In Unit F, the final paragraph is nested within a footer element


Students are asked to add and style links on existing Web pages as follows:



create a main nav bar, including lin
ks to all the pages on the Web site and a link to a map on
an external site.



add rules based on pseudo
-
classes to format the links in the nav bar



create in
-
page navigation on schedule.html, including a page nav bar and anchors and "Back
to top" links for e
ach section.



add rules based on pseudo
-
classes to style the page nav links and links outside the nav bars.



create skip links along with the corresponding anchors.



enclose nav bars in nav elements and add script reference to the head section of each
docum
ent.



create a revised version of the style sheet for printed output


ACE
: Here students implement
additional semantic elements
.




Return to index.html in your text editor. Replace the div element that has the id "headings" with
the semantic "header" eleme
nt, using the opening tag <header>, with no attributes, and the closing
tag </header>.



Near the bottom of the document, enclose the p element that has the id "contact" in a semantic
"footer" element, using the opening tag <footer>, with no attributes, an
d the closing tag </footer>.



Save your work, then repeat the previous two steps for started.html and schedule.html.



Return to mrsl.css in your text editor. Locate the #headings style rule and change the selector to a
type selector based on the "header" element. Save your work, open index.html in your browser, then
verify that the appearance of all three Web pages is un
changed.


Figure
D
-
2
2

shows the
completed
schedule.html
Web page
.

HTML5 and CSS3

Illustrated

Solutions to Unit
E

EOU Exercises


HT
-
5



HTML5 and CSS3

Illustrated

Solutions to Unit
E

EOU Exercises


HT
-
6


Independent Challenge 3

Filenames:
index.html,
nearby.html, natoma.css, hnprint.css


Note the following differences between the starting data file for Unit F and the completed
index.html
file students create for Unit E:



In Unit F, the external link in the nav bar uses a shortened link from bit.ly



In nearby.html,
Unit F replaces the
4
th

item in the list with "Heart of the City Farmer's
Market", and uses shortened links from bit.ly for the
links on the second and third list items



Students are asked to add and style links on existing Web pages as follows:



create a main nav bar, including links to all the pages on the Web site


ACE
: Here students implement shortened URLs
.




In your browser,

open a Web site that provides maps, such as maps.google.com or mapquest.com,
then display a map that shows the address 568 Natoma St., San Francisco, CA. Copy the URI in your
browser's address box, or if the URI in the address bar contains no text after t
he server name,
explore the page for a way to create a link containing the information you've entered, such as the
"link" link on maps.google.com. Verify that the link text begins with http, then copy it.



Open a Web site that provides a link shortening s
ervice, such as bit.ly or tinyurl.com. Paste the text
you copied above into the appropriate box on the Web page, then click the associated button to
generate the shortened URI.



Copy the shortened URI, return to index.html in your text editor, then add a
n absolute link to the
phrase "Location" in the nav bar using the shortened URI you copied. Add code to specify that the
target should open in a new window, then save your work. Reload index.html in your browser, then
verify that the "Location" link works
correctly.



Copy the code for the nav bar from index.html, then paste it into nearby.html beneath the h1
element.



Use a search engine to locate a Web page related to each of the topics in the "What's Nearby" list,
shorten each link using the process
above, then link the corresponding text to the site you identified.
Save your work, then open location.html in your browser and check all the links.




add rules based on pseudo
-
classes to format the links in the nav bar



create

skip links along with the corresponding anchors.



add rules based on pseudo
-
classes to style the links outside the nav bars.



enclose nav bars in nav elements and add script reference to the head section of each
document.



create a revised version of the sty
le sheet for printed output


Figure
E
-
23

shows the completed
nearby.html
Web page.


HTML5 and CSS3

Illustrated

Solutions to Unit
E

EOU Exercises


HT
-
7



Real Life Independent Challenge


In
the Real Life
Independent Challenge, students
continue working

their own
Web site project
.
Here
students should

make the following enh
ancements
:



Create a nav bar for site navigation and style the links using pseudo
-
classes



Create in
-
page navigation for any page containing multiple sections and style it using
pseudo
-
classes
.



Implement skip links, enclose all nav bars in nav elements, and
add the script reference
shown in Figure E
-
16
.



Create a revised version of the style sheet for printed output
.




HTML5 and CSS3

Illustrated

Solutions to Unit
E

EOU Exercises


HT
-
8


Visual Workshop

Filename: index.html
, revision.css


Note the following differences between the starting data file for Unit F and the completed

index.html file students create for Unit E:



In Unit F, the h1 element is below the nav bar



In Unit F, the
external link in the

nav bar uses a shortened link from bit.ly



Unit F breaks the contents of the paragraph with the id "main" into two separate paragraphs:
"Custom brewed coffee." and "Hand selected books."


Student
s
add a nav bar to an existing Web page
,

style the links using pseudo
-
classes
, add a skip link,
then en
close the nav bar in a nav element and add the appropriate script reference
.


Figure
E
-
24

shows the completed Web page.