Discovering

Computers:
Digital
Technology, Data,
and Devices,
Module 12: Web 17e
Development: Creating
and Publishing Online
Content
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All Rights Reserved.
Rights
May not
Reserved.
be scanned,
Maycopied
not be or
scanned,
duplicated,
copied
or posted
or duplicated,
to a publicly
or posted
accessible
to a publicly
website,
accessible
in whole website,
or in part.
in whole or in part. 1
 Module Objectives

By the end of the module, you should be able to:

• Identify steps to plan a new website
• Discuss tools for developing a website
• Explain how to use HTML to add content to a web page
• Explain how to use CSS to format content on a web page
• Describe website security techniques
• Identify steps for publishing a website
• Describe how to create accessible websites

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 2
 Plan a Website (1 of 13)
• A website that effectively
communicates, educates, entertains,
or provides a venue for conducting
business transactions requires good
web design.
• To make your design accessible to all
devices, you must apply responsive
web design (RWD) so that the
website’s content adapts appropriately
to the size and orientation of the
display on any device.
• Once a website is published online, Figure 12-1: RWD adapts screen
you can use analytics tools to monitor content to fit the device’s screen
visitor behavior on the website. size.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 3
 Plan a Website (2 of 13)
• A website plan or design plan determines the purpose, audience, content,
structure, navigation system, visual design, and publishing and maintenance
strategy.
• Goals are the results you want your website to accomplish within a specific
time frame. Goals might include sales, number of visitors, or social media
interactions.
• Objectives are those methods you will use to accomplish the website’s goals.
• A formal, written purpose statement summarizes your website’s goals and
objectives to ensure they meet the audience’s expectations and needs.
• A call-to-action (CTA) is a suggestion or offer that requires the website visitor
to interact with the website by purchasing a product, following the company’s
social media account(s), making a donation, sharing or commenting on an
article, requesting an appointment, signing up for an account, or registering for
an event. or program.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 4
 Plan a Website (3 of 13)

Figure 12-2: The Kiva website includes a CTA to give

microloans.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 5
 Plan a Website (4 of 13)

• A target audience profile is a research-based overview that

includes information about potential website visitors’ demographic
and psychographic characteristics.
• Demographic characteristics include gender, age group,
educational level, income, location, and other characteristics that
define who your website visitors are.
• Psychographic characteristics include social group affiliations,
lifestyle choices, purchasing preferences, and political affiliations.
• A target audience profile is crucial when making decisions regarding
user interface (UI) and user experience (UX).

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 6
 Plan a Website (5 of 13)

• A website’s content will consist of multiple web pages including a

combination of text, images, audio, video, animations, and
multimedia elements.
• The home page is the main web page around which a website is
built that opens every time you start a browser and is the anchor for
the entire website.
• The subsidiary pages provide detailed content and interest.
• Some websites also have a landing page, which is the page that a
browser navigates to when you click a link in an ad, email message,
or other online promotion from a different website.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 7
 Plan a Website (6 of 13)

• Value-added content is
information that is relevant,
informative, timely, accurate, of
high quality, and usable.
• Dynamically generated
content, unlike static information,
updates periodically and can
appear on a website’s pages when
triggered by a specific event, such
as the time of day or by visitor Figure 12-3: The REI home.
request. page.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 8
 Plan a Website (7 of 13)
• Search engine optimization (SEO) refers to tools to allow search engines to
better find or index your website.
• The goal of SEO is to design a web page in order to increase the likelihood that
the web page will appear high in a search engine’s search results list.
• Content-related SEO tools include meta tags, descriptive page titles, relevant
inbound links from other websites, and clearly written text.
• Meta tags are HTML specification tags that tell search engines what data to use.
• A website’s structure is the linked arrangement of pages. The website’s
structure should support the website’s purpose and make it easy for visitors to
find what they want at the website in as few clicks as possible.
• An outline of a website’s structure can serve as a blueprint and illustrate how
visitors can follow links from page to page.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 9
 Plan a Website (8 of 13)
• A storyboard is a series
of pages originally
developed to present
scenes graphically for a
movie or television
program.

Figure 12-4: Sample storyboard for three pages of

a website.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 10
 Plan a Website (9 of 13)

• A flowchart is a diagram that

shows steps or processes and is
used to determine the paths which
users will take to find subsidiary
pages.

Figure 12-5: Sample flowchart for a

website.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 11
 Plan a Website (10 of 13)

• A website navigation system consists of different types of links like

text links, hidden links, image links, related link groups presented as
menus, bars, or tabs; and breadcrumb trails.
• A breadcrumb trail shows a visitor the path from the home page to
the currently viewed page.
• A text link should clearly identify its target, which is the web page
or content to which the link points.
• An image link assigns a link to a visual element, such as an
illustration or a photograph.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 12
 Plan a Website (11 of 13)
• Navigation areas can group links in menus,
bars, tabs, or a combination of techniques.
• A navigation menu is a list of related
links.
• A navigation bar generally uses graphic
buttons to present links.
• A website search feature is another
popular navigation tool for websites with
multiple pages.
• A hosted website search provider is a
third-party company that uses spiders or
other tools to build a searchable index of Figure 12-6: Navigation features on a
your website’s pages and then hosts the Cengage web page.
index on their servers.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 13
 Plan a Website (12 of 13)

• To promote uniformity and maintain brand identity across pages at

your website, use visual consistency when choosing color and
typeface.
• Apply same color scheme to the background, navigation and other
visual elements, and text for all webpages to build visual
consistency throughout your website.
• Choose background and text colors that provide sufficient contrast
to enhance readability.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 14
 Plan a Website (13 of 13)
• A complete web design plan includes details outlining how and when
will you test the website, how will you publish the website, where will
you host it, and the necessary measures to maintain and update the
website.
• Without testing, you cannot determine if your website will work
properly, or if it contains errors or broken links.
• A formal website usability test is an evaluation that generally
takes place in a structured environment, such as a testing laboratory.
• An informal usability test involves using a team of friends, family
members, co-workers, or other interested parties to test a website’s
navigation system or other website features and then report on their
experiences.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 15
 How To: Use Tools for Developing
a Website (1 of 8)
• A text editor is software used to create plain (ASCII) text files.
• An HTML editor is a text editor enhanced with special features that
easily insert HTML tags and their attributes.
• Many web designers use specific web development tools. Inserting
and formatting text and inserting images or links in a web page
using a web development tool is similar to creating a document in a
word processor, such as Microsoft Word.
• A markup language is a coding system that uses tags to provide
instructions about the appearance, structure, and formatting of a
document.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 16
 How To: Use Tools for Developing
a Website (2 of 8)
• An integrated development
environment (IDE), such as
WebStorm, is a powerful web
development tool to create and
manage complex, interactive, and
animated web pages; it also includes
website design, publishing, and
management capabilities.
• IDEs offer more support than text
editors, including hints, preview
features, line numbers, and color
Figure 12-7: Comparing a text editor with
coding.
an IDE.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 17
 How To: Use Tools for Developing
a Website (3 of 8)
• A web template is a predesigned model webpage that you can customize for fast
website or webpage creation and updating.
• A website builder is a tool used to create professional-looking websites, by
dragging and dropping predefined elements to their desired locations on a page,
without coding.
• A content management system (CMS) is software that provides website
creation and administrative tools that enable the management of web content
development, including authoring, reviewing, editing, and publishing.
• Content providers working within a CMS use web templates, style sheets, and
other administrative tools to efficiently create, manage, update, and upload web
page content.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 18
 How To: Use Tools for Developing
a Website (4 of 8)
• The templates, style sheets, and other frequently used content
elements, such as a logo graphic, are stored in a database called a
content repository.
• A database located on a server stores the structure, appearance,
and the content of a website.
• The application obtains this information from the database and then
assembles it to provide the code for a browser to display.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 19
 How To: Use Tools for Developing
a Website (5 of 8)
Table 12-1: Comparing website builders and content management systems.
Website builder Content management system
Examples Google Sites, Wix, Weebly WordPress, Drupal
Popular uses Small businesses, personal Blogs, websites for large businesses or organizations,
websites, online stores online stores
Collaboration Few contributors Few or many contributors
Setup required Little to none; can get a website If self-hosted, need to manage and configure a web
up and server and install software before designing the website,
running quickly or use a fully hosted version for easier setup
Templates and Available from provider Available from provider or third-party designers free or
themes for purchase
Ease of use Enter content in a visual editor Enter content in a visual or HTML editor

Customer support Paid subscriptions provide tech Self-hosted CMS users rely on a community of
support through chat or online enthusiasts and
forums online resources

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 20
 How To: Use Tools for Developing
a Website (6 of 8)
• Website builders provide a simple drag-and-drop editor, predesigned layout options, and
business capabilities, such as shopping carts, online payments, product catalogues for
online stores, photo galleries, and widgets.
• A widget is an object, such as a web app, that is embedded in a web page and provides
access to resources that are stored elsewhere.
• A plug-in is a third-party program that extends the built-in functionality of an application or
browser.
• Plug-ins for CMSs add capabilities such as displaying a slide show, providing a contact form,
or accepting online payments.
• WordPress is a popular, user friendly, open-source CMS used as a blogging platform and
tool for creating small- to medium-sized websites.
• Many large organizations use Drupal, another powerful open-source CMS, for developing
their websites.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 21
 How To: Use Tools for Developing
a Website (7 of 8)
Wix and Weebly are popular website
builders to create websites for individual
and small businesses.
To create a website using a website
builder:
✔ Sign up for the service on the
provider’s website
✔ Select a template or design for your
website
✔ Choose your website’s domain name
✔ Set up SEO and other website options Figure 12-8: Creating a website using the
✔ Design the website and enter the Wix website builder.
website content using a drag-and-drop
interface and visual editor
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 22
 How To: Use Tools for Developing
a Website (8 of 8)
To create a website using the WordPress
CMS:
✔ Select and set up the theme in the
dashboard, specifying fonts, colors,
menu items, page header and footer
content, and other settings.
✔ Set up website options, including website
name, description, and format of links.
✔ Install plug-ins for SEO, website
maintenance, managing access, and
other functions.
✔ Enter website content using a drag-and- Figure 12-9: Creating a website using the
drop interface and visual editor, or edit WordPress CMS.
the HTML code for page content.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 23
 Use HTML and XML (1 of 11)

• A web page uses codes, or tags,

written in HTML to describe the
content of information on a web
page.
• You can create web pages for a
website by writing HTML code
manually or by using tools to assist
you in this process.
• In many browsers, you can view the
underlying HTML, CSS, and JavaScript
code for a web page by right-clicking Figure 12-10: A webpage and its source
on the page and selecting the View code.
Source or View Page Source
option.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 24
 Use HTML and XML (2 of 11)

HTML Syntax
• HTML tags are written in lowercase characters and are enclosed
within angle brackets (< >). Almost all HTML tags appear in pairs,
with an opening tag and a closing tag.
• An opening tag contains the tag name followed by any attributes
or additional information needed to completely specify the tag.
• Each attribute is followed by an equality sign (=) and the
attribute’s value in quotation marks. A closing tag begins with a
forward slash (/) followed by the tag name.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 25
 Use HTML and XML (3 of 11)

The structure of a webpage coded in HTML contains the following

elements:
• The first line of code contains the line <!DOCTYPE html>.
• The next line of code in a webpage file is always an <html> tag to
indicate that the content is written using HTML. This is the opening
<html> tag. The file ends with the corresponding closing </html>
tag.
• The head section, located between the <head> and </head> tags,
includes tags for the title of the webpage that appears in the
browser tab displaying this webpage; it also may include styles and
JavaScript.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 26
 Use HTML and XML (4 of 11)
• The body section, located between the
<body> and </body> tags, contains the
content of the webpage marked up with
HTML tags. When tags enclose several
lines of content, you might indent content
between the opening and closing tags so
that they are aligned.
• The body area is marked with comments to
indicate where the page content begins
and ends. Comments look similar to HTML
tags, except that they have an exclamation Figure 12-11: Structure of a
point and two dashes (!--) after the webpage coded in HTML.
opening bracket and two dashes (--) before
the closing bracket.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 27
 Use HTML and XML (5 of 11)

Format Page Content

• Unformatted text in a website is not
very useful or appealing. You need to
organize and format it to convey the
information you desire by including
elements like headings, paragraphs,
and line breaks.
• Headings indicate the different
sections of a webpage. HTML supports
six levels of headings. The <h1> tag Figure 12-12: Heading tags display
displays text in the largest font size, headings in different text sizes.
and the <h6> tag displays text in the
smallest font size.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 28
 Use HTML and XML (6 of 11)
• In addition to a title and headings, you need to identify paragraphs.
• The browser ignores line breaks and line spacing in the HTML file, so it is
important to define the paragraphs using the <p> and </p> tags properly.
• Add a <br> tag when you want to break a line with no white space before or after
it. The <br> tag does not have a corresponding closing tag.
Webpage File Names
• Choose a short and descriptive file name for the web page.
• A good practice is to use lowercase letters, numbers, and underscores in web
page file names. Avoid using special characters and spaces in web page names.
• The file extension for web page files is usually .html. The .html file extension
indicates to the browser that the file stores HTML code. The file name containing
the content of a website’s home page is often named index.html.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 29
 Use HTML and XML (7 of 11)
• A link, or hyperlink, can be a text or an image in a web page that you can click to
navigate to another web page, download a file, or perform another action, such as
sending an email message.
• Web pages are always stored as separate files, and hypertext references to the files
appear in the HTML code using the <a> (anchor) tag.
• The <a> tag’s href (hypertext reference) attribute refers to the location of the file or
web page that you want to view or download.
• The <a> (anchor) tag specifies information about hyperlinks to display on a website.
• The href attribute’s value references a resource using either a relative reference or an
absolute reference.
• Relative references identify the location of resources in the current website.
• Absolute references identify the location of resources from other websites. An
absolute reference includes the full path, including the protocol and domain name
containing the web page.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 30
 Use HTML and XML (8 of 11)

• Unordered lists display a collection of items in a list format, with

each list item preceded by a bullet symbol.
• Ordered lists, by default, precede each list item with a number.
• The <ul> and </ul> tags surround list items for an unordered list
and precede each list item with a bullet.
• The <ol> and </ol> tags surrounds list items for an ordered list and
precede each list item with a number. Specify each item between
<li> and </li> tags.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 31
 Use HTML and XML (9 of 11)

• The <img> tag specifies information about an image to display on a

website.
• You should include alternative (alt) text that describes the image so
that visitors to your page who are visually impaired may be able to
view images on a page.
• Choose images with appropriate dimensions for the web page and
relatively small file sizes.
• Large images can take a long time to load, which may impact the
performance of your website.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 32
 Use HTML and XML (10 of 11)

• Adding multimedia content makes your website more engaging to visitors.

• When adding audio or video to a site, many developers include controls to adjust
or mute the volume so that you can turn off the sound, if desired.
• When you embed items on a website, you place a copy of an object created in a
source file into a destination file so that a one-way connection to the source
program becomes part of the destination file.
• Prior to HTML 5, and in older browsers (such as Internet Explorer version 8 and
earlier), the only way to play audio or video on a website was to use a plug-in.
• HTML 5 introduced the <audio> tag to play audio files and the <video> tag to
play video files. You can specify the audio or video file to play using the <source>
tag.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 33
 Use HTML and XML (11 of 11)

Table 12-3: Attributes for the <audio> and <video> tags.

Attribute Description

autoplay Include this attribute to play the audio or video automatically when the
page loads (may not work on mobile devices)
controls Include this attribute to display audio or video controls, such as play, pause,
and volume; if you do not include this option, the only way to stop playing
the audio is to close the page
width Width of video player in pixels

height Height of video player in pixels

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 34
 Use CSS (1 of 6)
• A cascading style sheet (CSS) uses rules to standardize the appearance of web
page content by defining styles for elements, such as font, margins, positioning,
background colors, and more.
• Web designers store CSS specifications that will be applied to multiple web pages
in a website in a separate document, called a style sheet.
• A style is a group of formatting properties, such as bold, italic, font type, font size,
or font color, applied as a group to selected text. When you use CSS, you create a
style sheet containing style rules.
• Style rules are specifications that define one or more formatting properties and
their values (declarations) for specific HTML tags (selectors).
• Style rules are applied in cascading order based on priority. The first priority is for
specifications the author sets in the form of inline styles. The second priority
includes internal and external style sheets. The lowest priority is default styles
specified by the browser.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 35
 Use CSS (3 of 6)

• Web design programs provide CSS tools you can use to create and
edit style sheets and link style sheets to your pages. Web templates
have style sheets already linked.
• You also can create style sheets using CSS editor software. While
HTML helps to define the placement of items on a webpage, your
web pages will look dull if you do not change fonts, font sizes, font
styles, colors, backgrounds, borders, and other styles.
• CSS makes it easier to specify the appearance for each tag in the
same webpage or same website.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 36
 Use CSS (4 of 6)
• You can code styles that apply to
all tags of one type on the web
page as embedded styles,
within <style> and </style> tags
placed in the head section of an
HTML document, or as an inline
style, specified as a style
attribute of most HTML tags
within the body section.
• A style declaration contains the
style name followed by a colon,
followed by the value for the
style. If more than one style is
used, each style is separated with Figure 12-13: Comparing embedded and inline
a semicolon. styles.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 37
 Use CSS (5 of 6)
• A font is a set of letters, numbers, and Table 12-4: Font families in different
symbols that all have the same style browsers.
and appearance.
• A font family is a group of related
fonts.
• By using a font family, the browser
will choose a font installed on the
computer or device that most closely
matches the specified font family.
• Values for the font-family style include
serif, sans-serif, monospace, cursive,
and fantasy.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 38
 Use CSS (6 of 6)
• Most browsers recognize common color
names, such as red, orange, green, Table 12-5: Color names with RGB
and blue, as well as other predefined and hexadecimal values.
color names, such as navy, lime green,
chartreuse, and papayawhip.
• You can use the rgb() function to
specify colors by providing their red,
green, and blue components as
numbers between 0 (absence of a
color) and 255 (fullness of a color).
• You can use hexadecimal (base 16)
numbers between 00 and FF to specify
a color’s red, green, and blue
components.
• The color value is preceded by a #.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 39
 Secure IT: Protect Your Website (1 of
3)
• Hypertext Transfer Protocol Secure (HTTPS) is a protocol used
to make a secure connection to a computer; identified by the https
prefix in a URL and often used by banks and retail stores.
• HTTPS uses the protocol Transport Layer Security (TLS) to
encrypt data that helps to protect consumers and businesses from
fraud and identity theft when conducting commerce on the Internet.
• TLS can encrypt communications, such as between your website and
a browser accessing the website.
• TLS has many other uses and is referred to by its predecessor,
Secure Sockets Layer (SSL).

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 40
 Secure IT: Protect Your Website (2 of
3)
• A digital certificate is a technology
used to verify a user’s identity by
using a digital key that has been
“signed” by a trusted third party.
• Digital certificates are issued by
online providers called certificate
authorities.
• A secure website is indicated by the
HTTPS protocol in the URL shown in
the browser’s web address bar.
• Many browsers only will access
websites that use HTTPS and will alert Figure 12-14: A secure website.
you if a website cannot be verified.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 41
 Secure IT: Protect Your Website (3 of
3)
The following are additional techniques you can practice to ensure your website’s
safety.
• Use plug-ins strategically: Plug-ins that enhance your website’s UX and
functionality also can open the website to security flaws. Ensure that any plug-ins
you use are secure and that are used only when necessary. In addition, security
plug-ins exist that can protect your website from hacking and malware.
• Secure passwords: The passwords that you use to manage your website content
should be kept secure and distributed only to those who need them.
• Install a web firewall: A web firewall monitors the HTTP traffic to and from your
web service and can alert you to any unusual activity. It can be instructed to block
malicious requests for data or information automatically, thereby preventing
hackers from accessing the underlying data in your website.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 42
 Knowledge Check Activity 12-1

Answer the following question.

Which protocol is used to make a secure connection to a

computer?
a. HTTPS
b. SSL
c. Firewall
d. Plug-ins

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 43
 Knowledge Check Activity 12-1:
Answer

Which protocol is used to make a secure connection to a computer?

Answer: a
HTTPS

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 44
 Publish a Website (1 of 6)

• The server on which your website is located will have an Internet

Protocol (IP) address, which is a unique number that identifies
every computer on the Internet.
• You need to select a domain name for your website so that visitors
can locate your website easily.
• A domain name is the portion of a URL or email address that
identifies one or more IP addresses, such as cengage.com.
• You can purchase a domain name from a domain registrar, which
is an organization that sells and manages domain names.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 45
 Publish a Website (2 of 6)
• Several factors are important to consider when selecting a web host:
✔ If the web host provides storage on a server with a solid-state
drive, the website performance may be faster than if storage is on
an older hard disk drive.
✔ Bandwidth is a term commonly used to describe the capacity of
a communication channel. If you expect lots of traffic on your
website, you might want to opt for a plan that offers unlimited
bandwidth.
✔ Uptime is a measure of a web host’s reliability. It could be costly
to you if your website goes down due to an issue with your
hosting provider.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 46
 Publish a Website (3 of 6)

• FTP (File Transfer Protocol) is an app

you can use to upload the files from
a local computer to a remote web
server.
• FTP specifies rules for transferring
files from one computer to another
on the Internet.
• Many IDEs also include built-in FTP
capabilities so that you can publish
your website to a web server without
having to use a separate application.
Figure 12-15: Using FileZilla to upload website files
to a web server.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 47
 Publish a Website (4 of 6)

• Web analytics involves

collecting, measuring, evaluating,
and reporting how your website is
used.
• Website owners use analytics data
to understand who their visitors
are, where they are coming from,
and how they interact with the
website.
• Google Analytics is a powerful
free tool for capturing and
Figure 12-16: Using FileZilla to upload website files
reporting website analytics data.
to a web server.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 48
 Publish a Website (5 of 6)
You can use analytic tools to:
• Count visitors to your website, and distinguish between return and unique
visitors using cookies, IP addresses, and other data.
• Determine users’ activities on your website by tracking their click path or
clickstream, which is the sequence of pages or activities the user performs on
the website.
• Receive information about a user’s time spent on a page or on the entire
website, which helps to gauge the stickiness of your content. Sticky content
gets users to spend long periods of time engaging and encourages them to
return for future visits.
• Impressions are the number of times an ad is visible to users on a webpage,
regardless of whether the user clicks or interacts with the ad.
• An ad’s click-through rate is the number of times users click the ad to go to the
sponsor’s website.
Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 49
 Publish a Website (6 of 6)

• The computer that you use to edit your website is called your local
computer. To transfer the files from your local computer to a
remote web server, you will need to connect to the remote web
server using an FTP client.
• You also need an account on a web server in order to publish a
website.
• When you have finished transferring the files from your local
computer to a web server, you can view the website on any device
connected to the Internet by typing the absolute web address of the
website’s home page in the address bar of a browser.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 50
Ethics and Issues: Follow Accessibility
Guidelines (1 of 2)
• The Web Accessibility Initiative (WAI) consists of groups of users
and developers who create guidelines about usage, tools, and
education regarding web accessibility.
• WAI was established by the W3C. The WAI develops guidelines to
ensure all website visitors can access content on webpages,
including the Web Content Accessibility Guidelines (WCAG).
• WCAG guidelines include four principles of accessibility regarding
information and user interfaces.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 51
Ethics and Issues: Follow Accessibility
Guidelines (2 of 2)
• Web development tools often include
accessibility checkers that point out
potential issues, such as lack of alt text
or inconsistent navigation.
• You also can purchase external tools that
provide even more insight into the
accessibility of your website.
• In addition, you should employ user
testing that focuses on accessibility
concerns, such as accessiBe.
Figure 12-17: Compliance report
using the accessiBe accessibility
checker.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 52
 Case Study Activity 12-1 (1 of 2)

You are the marketing manager of a large hotel chain that has recently
purchased a local hotel that filed for bankruptcy. The CEO has tasked
you to review the current website and determine what actions need to
be taken to ensure it’s updated properly and that the website meets
current accessibility standards.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 53
 Case Study Activity 12-1 (2 of 2)
After reading the case study on the previous slide, answer the following
question, “How will you ensure the website meets required accessibility
standards?”

A website is deemed accessible if _____.

a) everyone can view it, comprehend it, navigate it, and engage with it
b) large organizations can use it
c) only individuals with disabilities can use it
d) the owner has set a password for requesting access

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 54
 Case Study Activity 12-1: Answer

How do you determine whether a website is accessible?

Answer: a
everyone can view it, comprehend it, navigate it, and engage
with it.

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 55
 Summary

Click the link to review the objectives for this module.

Link to Objectives

Jennifer T. Campbell, Discovering Computers: Digital Technology, Data, and Devices, 17th Edition. © 2023 Cengage. All
Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 56