Responsive Design Part 1: Designing for Mobile Devices
HTML Chapter 5
HTML Chapter 5
STUDENT ASSIGNMENTS
Apply Your Knowledge
Reinforce the skills and apply the concepts you learned in this chapter.
Styling for Responsive Design
In this exercise, you will use your text editor to apply
responsive design principles to an existing webpage. You will make all
images exible, change the layout to a uid layout, and add a viewport
meta tag. The completed webpage is shown in Figure 5–55. You will
also use professional web development practices to indent, space,
comment, and validate your code.
Perform the following tasks:
Open apply05.html in your browser to view the webpage. Adjust
the browser window to view the xed layout.
Open apply05.html in your text editor and modify the comment
at the top of the page to include your name and today’s date.
Remove the width and height attributes from the image elements
Open the styles05.css le from the apply\css folder. Modify the
comment at the top of the styles05.css page to include your name
In the styles05.css le, add a max-width property with a value of
100% to the img selector.
Locate the #container selector and change the width value to use
a relative measurement and take up the full width of the page.
Save the styles05.css le and refresh the apply05.html le in your browser. Resize the browser
to make sure that a uid layout has been applied and that the images are exible.
In apply05.html, add the following meta tag within the head section of the document:
<meta name="viewport" content="width=device-width, initial-scale=1">
Save your changes to apply05.html and open the le in Google Chrome.
Use the developer tools in Google Chrome to view the page in an emulator.
Select a device and refresh the page. The page should look similar to Figure 5–55.
Validate your HTML document using the W3C validator found at validator.w3.org and x
any errors that are identied.
Validate your CSS le using the W3C validator found at
http://jigsaw.w3.org/css-validator/ and
x any errors that are identied.
Submit the apply05.html and styles05.css les in a format specied by your instructor. Your
instructor may also ask you to submit the images folder used with apply05.html.
In step 5, you changed the value to use a percentage (%) measurement. Explain how the
In step 5, you changed the value to use a percentage (%) measurement. Explain how the
percentage unit of measurement makes a uid layout more exible as compared to px.
Photos courtesy of Jessica Minnick
Photos courtesy of Jessica Minnick
How should you submit solutions to questions in the assignments identied with a
Every assignment in this book contains one or more questions identied with a
require you to think beyond the assigned presentation. Present your solutions to the questions in the format
required by your instructor. Possible formats may include one or more of these options: create a document that
contains the answer; present your answer to the class; discuss your answer in a group; record the answer as au
dio or video using a webcam, smartphone, or portable media player; or post answers on a blog, wiki, or website.
CONSIDER THIS
Responsive Design Part 1: Designing for Mobile Devices
Reinforce the skills and apply the concepts you learned in this chapter.
In this exercise, you will use your text editor to apply
responsive design principles to an existing webpage. You will make all
images exible, change the layout to a uid layout, and add a viewport
meta tag. The completed webpage is shown in Figure 5–55. You will
also use professional web development practices to indent, space,
How should you submit solutions to questions in the assignments identied with a
Every assignment in this book contains one or more questions identied with a
require you to think beyond the assigned presentation. Present your solutions to the questions in the format
required by your instructor. Possible formats may include one or more of these options: create a document that
contains the answer; present your answer to the class; discuss your answer in a group; record the answer as au
dio or video using a webcam, smartphone, or portable media player; or post answers on a blog, wiki, or website.
Introduction to the Internet and Web Design
HTML Chapter 1
HTML Chapter 1
Chapter Summary
In this chapter, you learned about the Internet, the web, and associated technologies, including web servers and
web browsers. You learned the essential role of HTML in creating webpages and reviewed tools used to create
HTML documents. You also learned how to create a basic HTML webpage. The items listed below include all
the new concepts and skills you have learned in this chapter, with the tasks grouped by activity.
Creating a Basic Webpage
Start Notepad++ and Create a Blank Document
Add Basic HTML Tags to a Document
Add a Title and Text to a Webpage (HTML 32)
View a Webpage in a Browser (HTML 34)
Exploring the Internet
Describe the Internet (HTML 3)
Describe the World Wide Web (HTML 4)
Discuss Web Browsers (HTML 7)
Identify Types of Websites (HTML 9)
Planning a Website
Identify the Purpose and Audience of the Website
Design for Multiplatform Display (HTML 13)
Describe a Wireframe and a Site Map (HTML 14)
Consider Graphics, Navigation, Typography, and
Design for Accessibility (HTML 20)
Understanding the Basics of HTML
Dene Hypertext Markup Language (HTML 21)
Describe HTML Elements (HTML 21)
List Useful HTML Practices (HTML 22)
Identify Technologies Related to HTML
Explain the Role of Other Web Programming
Using Web Authoring Tools
Identify Text Editors (HTML 24)
Download and Install a Text Editor (HTML 27)
Describe WYSIWYG Editors (HTML 27)
What decisions will you need to make when creating your next webpage?
Use these guidelines as you complete the assignments in this chapter and create your own webpages outside of this class.
Identify the purpose of the website.
Identify the users of the website.
Recognize the computing environments of the users.
Design a wireframe and a site map.
Choose the design components.
Identify possible graphics for the website.
Determine the types of navigation tools and typography to use.
CONSIDER THIS
Responsive Design Part 1: Designing for Mobile Devices
Reinforce the skills and apply the concepts you learned in this chapter.
In this exercise, you will use your text editor to apply
responsive design principles to an existing webpage. You will make all
images exible, change the layout to a uid layout, and add a viewport
meta tag. The completed webpage is shown in Figure 5–55. You will
also use professional web development practices to indent, space,
How should you submit solutions to questions in the assignments identied with a
Every assignment in this book contains one or more questions identied with a
require you to think beyond the assigned presentation. Present your solutions to the questions in the format
required by your instructor. Possible formats may include one or more of these options: create a document that
contains the answer; present your answer to the class; discuss your answer in a group; record the answer as au
dio or video using a webcam, smartphone, or portable media player; or post answers on a blog, wiki, or website.
Chapter Summary lists the tasks
completed in the chapter, grouped
into major task categories in an
outline format.
Consider This: Plan Ahead box
presents a single master planning
guide that students can use as they
create webpages on their own.
Apply Your Knowledge exercise
usually requires students to open
and manipulate a le to practice the
activities learned in the chapter.
Textbook Walk-Through
Copyright 2017 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203
WOW! eBook
www.wowebook.org