HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 1 of 9
HTML 5 and CSS 3 – Illustrated, 2nd Edition
Unit N: Integrating Social Media
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities.
Pay special attention to teaching tips, and activities geared towards quizzing your students, enhancing
their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up to date with the latest in technology news. Direct your students to
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
380: Evaluate Social Media
2
382: Add a Facebook Like Button
3
384: Add a Twitter Tweet Button
4
386: Embed a Tweet
5
388: Embed a YouTube Video
5
390: Embed an Instagram Image
6
392: Integrate a Twitter Account Feed
7
394: Add a Twitter Hash Tag Feed
8
End of Unit Material
9
Glossary of Key Terms
9
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 2 of 9
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit N when they can:
• Evaluate social media
• Add a Facebook Like button
• Add a Twitter Tweet button
• Embed a tweet
• Embed a YouTube video
• Embed an Instagram image
• Integrate a Twitter account feed
• Add a Twitter hash tag feed
3
3
38
8
80
0
0:
:
:
E
E
Ev
v
va
a
al
l
lu
u
ua
a
at
t
te
e
e
S
S
So
o
oc
c
ci
i
ia
a
al
l
l
M
M
Me
e
ed
d
di
i
ia
a
a
LECTURE NOTES
• Introduce the concept of social media, which involves providing users, customers, and community
members with methods for sharing online content and integrating their own comments.
• Explain how social media can enhance your web presence by enabling people to share information
about your business or cause in their networks.
• Introduce the term widget, and explain that a widget consists of code generated by a social media
site to let you easily provide access to social content in another web page. Point out that the most
FIGURES: N-1, N-2
BOXES
1. Quick Tip: By using social media tools to embed content, you automatically link the content to its
source and provide credit to its author or creator.
2. Choosing an appropriate social networking site for your audience
A social networking site is a website such as Facebook or LinkedIn that enables people to share
information about common interests, news, and events with friends, colleagues, and any other people
they choose. While a few social networking sites are widely known across much of the world, many
such sites exist. Because different sites are prevalent in different countries or regions or with different
groups of people, it’s important to consider which site best suits your needs when planning to integrate
social media into your website. If the geographic focus of your business or organization is limited, you
should familiarize yourself with the most popular sites for the relevant area. For instance, while
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 3 of 9
although membership in a social networking site is generally open to most anyone, users may choose to
restrict access to their information and news only to other users whom they know or with whom they
share a common interest.
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to discuss the significance of social networking sites in this day and
age. Encourage them to share their experiences with social networking and video hosting sites,
3
3
38
8
82
2
2:
:
:
A
A
Ad
d
dd
d
d
a
a
a
F
F
Fa
a
ac
c
ce
e
eb
b
bo
o
oo
o
ok
k
k
L
L
Li
i
ik
k
ke
e
e
B
B
Bu
u
ut
t
tt
t
to
o
on
n
n
LECTURE NOTES:
• Point out that a website is an excellent place to ask users to connect with an organization on social
media.
• Use Figure N-5 to point out what a Facebook Like button looks like on a website, and describe what
it does.
TEACHER TIP
Point out to students that once you “like” a facebook page, you can also “unlike” the page later if your
preferences change.
• Explain that widgets sometimes include code that places JavaScript within the HTML document.
Point out that this code does not necessarily create an element that is visible on the web page.
FIGURES: N-3, N-4, N-5
BOXES:
1. Trouble: If this URL doesn’t open the page, open developers.facebook. com, click Social Plugins, then
follow the link for the Like button, which may be labeled Like, Share & Send.
2. Quick Tip: Because Lakeland Reeds is a fictitious business and does not have a Facebook page or URL,
the code for the Like button uses a Facebook page associated with the publisher of
this book for
demonstration purposes.
CLASSROOM ACTIVITIES
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 4 of 9
1. Quick Quiz:
2. Critical Thinking: Suppose that you have a personal Facebook page and you also run a small business.
LAB ACTIVITY
Have students each create a Facebook page, if they do not already have one, and then add a Like button
for their Facebook account to a web page. Use the steps on page 382 as a guide.
3
3
38
8
84
4
4:
:
:
A
A
Ad
d
dd
d
d
a
a
a
T
T
Tw
w
wi
i
it
t
tt
t
te
e
er
r
r
T
T
Tw
w
we
e
ee
e
et
t
t
B
B
Bu
u
ut
t
tt
t
to
o
on
n
n
LECTURE NOTES
• Point out that many social media sites offer button widgets.
• Explain that Twitter offers two commonly used buttons, Tweet and Follow. Explain what each does.
FIGURES: N-6, N-7, N-8
BOXES
1. Trouble: If entering this URL doesn’t open the page for generating code for buttons, use a search
engine to search on the phrase
twitter buttons
.
CLASSROOM ACTIVITIES
1. Classroom Discussion: Have students talk about the different types of Facebook sites that they “like”
and why. Have they ever “unliked” a page and if so, what were the reasons (e.g., too many stream
updates; not enough information)?
3
3
38
8
86
6
6:
:
:
E
E
Em
m
mb
b
be
e
ed
d
d
a
a
a
T
T
Tw
w
we
e
ee
e
et
t
t
LECTURE NOTES:
• Explain that in addition to linking to a social media account, you can embed social media content
right in a web page.
• Explain that Twitter enables you to embed an individual tweet.
FIGURES: N-9, N-10, N-11, N-12
BOXES:
1. Quick Tip: If your search results do not show tweets, click Live above the search results.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 5 of 9
2. Selecting social media content to embed
In general, the social media content that you embed on your website should have a clear connection to
your business
or organization. For example, it may include content that your organization itself has
generated, such as a tweet from your organization’s Twitter account. Another source is other users who
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students what types of tweets they’ve seen embedded on websites, aside from
media websites. Create a list of other types of websites and for each, list the types of tweets that might
be useful to embed.
3
3
38
8
88
8
8:
:
:
E
E
Em
m
mb
b
be
e
ed
d
d
a
a
a
Y
Y
Yo
o
ou
u
uT
T
Tu
u
ub
b
be
e
e
V
V
Vi
i
id
d
de
e
eo
o
o
LECTURE NOTES:
• Point out that social media provides many avenues for posting videos. Explain that Twitter and
Facebook host videos for their users, and that YouTube is a more general purpose video host.
• Walk students through how to embed a YouTube video on a web page. Use the steps on Page 388
as a guide.
FIGURES: N-13, N-14, N-15
BOXES:
1. Quick Tip: You can search videos uploaded by any user by typing search terms in the Search box at
the top of the page.
2. Quick Tip: You can also embed videos hosted by Facebook, Twitter, or other video hosts.
CLASSROOM ACTIVITIES
1. Classroom Discussion: Survey class members about which sites they’ve posted videos to. For the top 5
reported sites, ask students to describe why someone would choose to post on that site rather than any
of the others. Identify the sites in the list that would or would not be appropriate for a business to post
to. Ask students to explain why certain sites would not be appropriate.
LAB ACTIVITY
Ask students to visit YouTube and report on the most watched videos. Ask them to find a video related
to a business or organization that has over 100,000 views. After they have picked their video, ask them
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 6 of 9
to discuss with the class why they believe that particular video has been successful at obtaining viewers.
Is it a well-known business or organization or is the video simply entertaining in itself, apart from any
associated brand name?
3
3
39
9
90
0
0:
:
:
E
E
Em
m
mb
b
be
e
ed
d
d
a
a
an
n
n
I
I
In
n
ns
s
st
t
ta
a
ag
g
gr
r
ra
a
am
m
m
I
I
Im
m
ma
a
ag
g
ge
e
e
LECTURE NOTES:
• Explain that like videos, many users upload images to social media.
FIGURES: N-16, N-17
BOXES:
1. Quick Tip: These steps include the URL for a specific account to enable you to complete the steps
without an Instagram account.
2. Quick Tip: If the code is not pasted, return to the Embed window, select all the code, copy it to the
Clipboard, then repeat Step 5.
3. Trouble: To view the Instagram image, you must open events.html from a web server.
4. Integrating widgets into responsive design
Most social media widgets automatically adjust in size to fit the layout in which they are embedded. As
a result, widgets generally adapt well to responsive layouts as long as your stylesheet sets the width as a
percentage for the widget or its container. As with any layout, it’s important to test a web page that
incorporates social media widgets on different devices and at different browser window widths.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: What types of embedded images could be useful on a business website? What types
of images would not work from a shared source like Instagram?
3
3
39
9
92
2
2:
:
:
I
I
In
n
nt
t
te
e
eg
g
gr
r
ra
a
at
t
te
e
e
a
a
a
T
T
Tw
w
wi
i
it
t
tt
t
te
e
er
r
r
A
A
Ac
c
cc
c
co
o
ou
u
un
n
nt
t
t
F
F
Fe
e
ee
e
ed
d
d
LECTURE NOTES
• Remind students of the difference between an embedded tweet and a feed.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 7 of 9
• Point out that a feed can help keep the content of a website fresh even when the rest of the site does
not need updating.
FIGURES: N-18, N-19, N-20, N-21
BOXES
1. Quick Tip: The Profile and settings button displays your profile photo if it is available, or a white oval on
a blue background as a placeholder.
2. Obtaining code for widgets
Many large social networking sites make widget code available on their websites. While sites may label
this code differently, you can usually find what you need by searching on the term
widget
along with
CLASSROOM ACTIVITIES
1. Critical Thinking: Twitter feed widgets are configurable. Ask students what types of tweets they
might expect to show up on a Twitter account feed that would not be suitable for an organization’s
website. Ask them how they would exclude these tweets while still allowing tweets they want to be
displayed on the website.
LAB ACTIVITY
3
3
39
9
94
4
4:
:
:
A
A
Ad
d
dd
d
d
a
a
a
T
T
Tw
w
wi
i
it
t
tt
t
te
e
er
r
r
H
H
Ha
a
as
s
sh
h
h
T
T
Ta
a
ag
g
g
F
F
Fe
e
ee
e
ed
d
d
LECTURE NOTES
• Define the term hash tags, which allow users to find postings on a given topic.
• Explain to students that a hash tag begins with a hash or pound symbol (#), which gives the tag its
name.
• Point out to students that it may be beneficial for a business to encourage a customer or client to
incorporate a specific hash tag into their postings related to the designated business.
• Explain to students the step by step process for displaying a feed based on a hash tag by using the
steps on Page 394 as a guide.
FIGURES: N-22, N-23, N-24
BOXES
1. Trouble: If you have navigated away from the Create a user widget page, open twitter.com, click the
Profile and settings button, click Settings, then click Widgets.
2. Trouble: You may receive validation errors stemming from widgets you inserted; it’s safe to ignore
warnings about deprecated attributes because the layout of your page does not rely on them.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 8 of 9
3. Assessing the drawbacks of a hash tag feed
Although a hash tag feed can be useful for incorporating certain types of content into a website, it’s
important to recognize its potential pitfalls. Because the feed is generated based on a hash tag that anyone
could include in any tweet, you may find that the feed includes some tweets that you consider inappropriate
for your website. When you create the widget, Twitter turns on the Safe search mode feature by default,
CLASSROOM ACTIVITY
1. Quick Quiz:
2. Classroom Discussion: Sometimes when organizations create media campaigns around a hash tag, the
campaign does not go in the direction that the organization expected. Ask students to summarize
instances they’ve seen, heard about, or participated in when a hash tag campaign did not work as
expected.
LAB ACTIVITY
Have students go onto the Twitter Web site and research the most popular hash tags. Have them report
their findings to the class and discuss the relevance of the popular hash tags in today’s culture.
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit N Page 9 of 9
• embedded (380)
• feed (380)
• hash tag (394)
• social media (380)
• social networking site (381)
• tweet (380)
• widget (380)
Top of Document