A Guide to this Instructors Manual:

Responsive Web Design with HTML5 and CSS, 9 th

Edition Instructor’s Manual Page 1 of 13 Responsive Web Design with HTML5 and CSS, 9 th Edition

Chapter 1: Introduction to the Internet and Web Design

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 red 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 toward quizzing your students, enhancing their critical thinking skills, and encouraging experimentation within the software.Table of Contents Chapter Objectives 1

HTML 2: Introduction 2

HTML 3: Exploring the Internet 2

HTML 11: Planning a Website 4

HTML 21: Understanding the Basics of HTML 6

HTML 24: Understanding the Role of Other Web Programming Languages 8

HTML 25: Using Web Authoring Tools 9

HTML 30: Creating a Basic Webpage 10

End of Chapter Material 11 Glossary of Key Terms 12 Chapter Objectives

Students will have mastered the material in Chapter 1 when they can:

⚫Define the Internet and associated key terms ⚫Recognize Internet protocols ⚫Discuss web browsers and identify their main features ⚫Describe the types and purposes of websites ⚫Plan a website for a target audience ⚫Define a wireframe and a site map ⚫Explain how websites use graphics, navigation tools, typography, and color ⚫Design for accessibility ⚫Design for multiplatform display ⚫Define Hypertext Markup Language (HTML) and HTML elements ⚫Recognize HTML versions and web programming languages ⚫Identify web authoring tools ⚫Download and use a web authoring tool ⚫Create and view a basic HTML webpage

HTML 2: Introduction

LECTURE NOTES

•Introduce the Internet as the world's largest network Solutions Manual and Supplement Files Download Link at the end of this file. 1 / 4

Responsive Web Design with HTML5 and CSS, 9 th Edition Instructor’s Manual Page 2 of 13 • Introduce some basics about the Internet and web • Mention that the Internet and web follow rules that allow computers to communicate • Review the roadmap activities used to create a webpage

PROJECT: Create a Basic Webpage

The project in this chapter follows general guidelines and uses a text editor to create the webpage shown in Figure 1–1.

Explain that people and organizations create webpages to attract attention to information such as products, services, multimedia, news, and research. Although webpages display content including text, drawings, photos, animations, videos, and links to other webpages, they are created as documents containing only text.

CLASSROOM ACTIVITIES

• Group Activity: Explain that the Internet is more than just the World Wide Web; it also includes

FTP (File Transfer Protocol), texting, VoIP, and email technologies, among other things. Survey students about their use of the range of Internet technologies.

2. Quick Quiz:

1) How many webpages are currently available on the World Wide Web? (Answer: Billions of webpages)

FIGURE: 1-1

HTML 3: Exploring the Internet

LECTURE NOTES

• Define the Internet and use Figure 1-2 to illustrate the connections that support the Internet • Define node, network, data lines, Internet of Things, Internet service provider (ISP), and Internet backbone • Define World Wide Web (WWW), webpages, website, and a home page using Figure 1-3 • Define hyperlink and use Figure 1-4 to illustrate various types of links • Define protocols and give an overview of the types of Internet protocols such as Hypertext Transfer Protocol (HTTP), File Transfer Protocol (FTP), and Transmission Control Protocol/Internet Protocol (TCP/IP) • Define a server and use Figure 1-5 to illustrate the communication between a server and a client • Explain the use of the Domain Name System (DNS) • Explain the purpose of a web browser • Use Table 1-1 to discuss the features of Google Chrome • Review the different types of websites, including Internet, intranet, and extranet

FIGURES: 1-2, 1-3, 1-4, 1-5, 1-6, 1-7, 1-8, 1-9

TABLE: 1-1 2 / 4

Responsive Web Design with HTML5 and CSS, 9 th Edition Instructor’s Manual Page 3 of 13

BOXES:

• BTW: WhatIsMyIPAddress.com. You can look up the IP address for any domain using

WhatIsMyIPAddress.com.

• BTW: Apple Safari. Apple Safari is only available for download on Apple devices, including

iPhones and Mac computers. It previously ran on the Windows operating system, but as of 2018, Apple no longer offers Safari for Windows.

• BTW: Browser Interface Updates. The user interface of a browser is updated regularly. If you are

using Google Chrome, it may look slightly different from the figures due to recent updates.

• Consider This: What is the difference between a website’s home page and a web browser’s home

page? A website’s home page is the default page displayed when you enter a web address such as www.cengage.com into the address bar of a browser. As mentioned earlier, this type of home page is the introductory page of a website and provides links to access other parts of the site. A browser also has a home page, which appears when you open a browser or tap or click the Home button in the browser window. You can specify any webpage as the default home page of a browser.

• Consider This: How do you use a subdomain within a URL? A subdomain further identifies an area

of content. For example, the URL support.microsoft.com indicates that support is a subdomain name used in the microsoft.com domain or server. This subdomain contains helpful information to support Microsoft products.

TEACHER TIPS

Explain that the Internet is a worldwide collection of computers linked together for use by businesses, governments, educational institutions, other organizations, and individuals using modems, phone lines, television cables, satellite links, fiber-optic connections, radio waves, and other communications devices and media. The following background information may be of interest to your students: Developed in 1960s by the Department of Defense Advanced Research Projects Agency (ARPA), the Internet was originally called the ARPANET.

Explain how an Internet Service Provider (ISP) is related to the Internet backbone. As you explain this relationship, mention how a home Internet connection is generally provided and how people connect to the Internet.

As you explain the Internet protocols, mention that HTTP is the set of rules for transferring text, sound, video, graphic images, and other multimedia files on the web; the sole purpose of FTP; and how the TCP/IP protocols use a working mechanism similar to that of the postal system.

CLASSROOM ACTIVITIES

• Class Discussion: Ask students about their experience using networks, perhaps as part of a

computer class. Do they have a user account assigned to them on their school network? Explore students’ experience with ISPs. Do they have accounts with ISPs? Which ISPs?

• Assign a Project: Ask students to research three different major ISPs on the web and to compare

the services they provide, their pricing, etc.

• / 4

Responsive Web Design with HTML5 and CSS, 9 th Edition Instructor’s Manual Page 4 of 13

3. Quick Quiz:

1)What is the Internet backbone? (Answer: A collection of high-speed data lines that connect major computer systems located around the world) 2)What is a web browser? (Answer: A program that interprets and displays webpages so you can view and interact with them)

HTML 11: Planning a Website

LECTURE NOTES

•Discuss the importance of designing a clear navigation system when planning and building a website •Identify the purpose of a website using an organization’s mission statement •Explain the significance of knowing the audience for a website and use Figure 1-10 to illustrate how a website must be designed by keeping its audience in mind •Explain responsive design by using Figure 1-11 to show how the responsive design of a website looks at desktop, tablet, and mobile screen sizes •Define a wireframe, and use Figure 1-12 to show a wireframe with its elements •Define a site map •Define linear, hierarchical, and webbed website structures using Figures 1-13, 1-14, 1-15, and 1- 16 •Use Figure 1-17 to discuss the importance of using graphics in a webpage •Use Figure 1-18 to discuss navigation in a website •Use Figure 1-19 to discuss the importance of typography in enhancing the visual appeal of a website •Use Figure 1-20 to show how a color scheme must be used in a website •Discuss the need to create a website for viewing by a diverse audience •Define the World Wide Web Consortium (W3C) •Use Table 1-3 to list the key questions to ask when planning a website

FIGURES: 1-10, 1-11, 1-12, 1-13, 1-14, 1-15, 1-16, 1-17, 1-18, 1-19, 1-20

TABLE: 1-2, 1-3

BOXES

• Consider This: Can I redesign a desktop-only website for multiplatform display? Yes. If your

audience is accustomed to the desktop-only website, retrofitting the website for tablet and mobile display screens makes sense because the site remains familiar to users. You also avoid building a new site from scratch and you can take advantage of design decisions such as color scheme and use media you have already acquired. However, depending on the site content and number of pages, redesigning may be a time-consuming process.

• Consider This: What tools can I use to create a wireframe? You can use one of several free tools to

create a wireframe, including Pencil Project, Mockplus, and Wireframe CC. You can also use drawing tools in Microsoft Word or PowerPoint or a pen and paper.

• / 4