Web Design with

HTML5 & CSS3

8th Edition

Chapter 1
Introduction to the
Internet and Web Design
Learning Outcome

1. Demonstrate web concepts, techniques, tools,

and technologies.

Chapter 1: Introduction to HTML, XHTML, and CSS 2

Chapter Objectives
• Define the Internet and associated key terms
• Recognize Internet protocols
• Discuss web browsers and identify their main features
• 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 and multiplatform display

Chapter 1: Introduction to the Internet and Web Design 3

Chapter Objectives
• Define Hypertext Markup Language (HTML) and HTML
elements
• Recognize HTML versions and web
• Identify web authoring tools
• Create and view a basic HTML webpage

Chapter 1: Introduction to the Internet and Web Design 4

Exploring the Internet
• The Internet is a worldwide collection of computers linked
together for use by organizations, and individuals using
communications devices and media
• A network is a collection of two or more computers linked
together to share resources and information
• The Internet of Things describes the ever-growing number of
devices connecting to a network, including televisions and
appliances
– https://www.youtube.com/watch?v=LlhmzVL5bm8
• An Internet Service Provider (ISP) is a company that has a
permanent connection to the Internet backbone
Chapter 1: Introduction to the Internet and Web Design 5
ISP Providers in Oman

Omantel: Oman Telecommunications Company

(S.A.O.G)
Ooredoo: Omani Qatari Telecommunications
Company SAOC
PCCW-Awaser Oman

Chapter 1: Introduction to HTML, XHTML, and CSS 6

World Wide Web
• The World Wide Web, also called the web, is the service that
provides access to information stored on web servers
• The web consists of a collection of linked files known as
webpages
• A website is a related collection of webpages created and
maintained by a person, company, educational institution, or
other organization
• A home page is the first document users see when they
access a website
• A hyperlink, commonly called a link, is an element that
connects one webpage to another webpage on the same
server or to any other web server in the world
Chapter 1: Introduction to the Internet and Web Design 7
☀
WWW

Web
Web server 2
server 1

Website B Website C
Website A

Home Home Home

page page page

Webpage1 Webpage1 Webpage1

Webpage 2 Webpage 2 Webpage 2

Webpage .. Webpage ..
. .

Chapter 1: Introduction to HTML, XHTML, and CSS 8

World Wide Web

Source: www.ed.gov

Chapter 1: Introduction to the Internet and Web Design 9

Protocols
• A protocol is a set of rules that defines how a client
workstation can communicate with a server
• A server is the host computer that stores resources and files
for websites
• Hypertext Transfer Protocol (HTTP) is a set of rules for
exchanging text, graphics, audio, video, and other multimedia
files on the web
• File Transfer Protocol (FTP) is used to exchange files from one
computer to another over the Internet
– This protocol does not provide a way to view a webpage

Chapter 1: Introduction to the Internet and Web Design 10

Protocols
• Transmission Control Protocol/Internet Protocol (TCP/IP) is a
pair of protocols used to transfer data efficiently over the
Internet by properly routing it to its destination
• Internet Protocol (IP) ensures data is sent to the correct
location
• The Domain Name System (DNS) associates an IP address
with a domain name

Chapter 1: Introduction to the Internet and Web Design 11

Web Browsers
• A web browser is a program that interprets and displays Web
pages and enables you to view and interact with a Web page
– Microsoft Internet Explorer, Mozilla Firefox, Google Chrome,
and Apple Safari
• A Uniform Resource Locator (URL) is the address of a
document or other file accessible on the Internet
– http://www.cengagebrain.com/shop/index.html
• A domain is an area of the Internet a particular organization
or person manages.

Chapter 1: Introduction to the Internet and Web Design 12

Web Browsers

Chapter 1: Introduction to the Internet and Web Design 13

Lets Play 

• Find a web browser in your PC, open it.

• View http://www.hct.edu.om.
• Identify:
– URL
– Protocol
– Server domain name
– Webpages, webpages file name

Chapter 1: Introduction to HTML, XHTML, and CSS 14

Planning a Website
• Purpose of the website — The purpose of a commercial
business website is related to the goal of selling products or
services
• Target Audience — The people who use the website are
known as the target audience
– Knowing their general demographic background will help to
design a website appropriate for them
– E.g https://jam.com vs www.udemy.com
• Multiplatform Display —A responsive design of a website
must be created that provides an optimal viewing experience
across a range of devices

Chapter 1: Introduction to the Internet and Web Design 15

16
Responsive design

Chapter 1: Introduction to HTML, XHTML, and CSS 17

Wireframe
• A wireframe is a simple, visual guide that clearly identifies
the location of main webpage elements
• Active white space is an area on the page that is intentionally
left blank
• Passive white space is the space between content areas
– Helps a user focus on one part of the page

Chapter 1: Introduction to the Internet and Web Design 18

Wireframe

Chapter 1: Introduction to the Internet and Web Design 19

Wireframe for Cinema Booking website

Chapter 1: Introduction to HTML, XHTML, and CSS 20

Lets Draw ✍

• Work in group of 5
• Imagine a website for kids Nursery/Game
shop/Flower shop
• Draw a wireframe for the website

Chapter 1: Introduction to HTML, XHTML, and CSS 21

Site Map
• A site map is a planning tool that lists or displays all the pages
on a website and indicates how they are related to each other
– It shows the structure of a website

Chapter 1: Introduction to the Internet and Web Design 22

Site Map
• A linear website structure connects webpages in a straight
line

Chapter 1: Introduction to the Internet and Web Design 23

Site Map
• In a variation of a linear website structure, each page can
include a link to the home page of the website

Chapter 1: Introduction to the Internet and Web Design 24

Site Map
• A hierarchical website connects webpages in a treelike
structure

Chapter 1: Introduction to the Internet and Web Design 25

Site Map
• A webbed website structure has no set organization

Chapter 1: Introduction to the Internet and Web Design 26

Lets Draw ✍

• Draw a site map for the website (created in slide

20)

Chapter 1: Introduction to HTML, XHTML, and CSS 27

Graphics
• Graphics add visual appeal to a webpage and enhance the
visitor’s perception of the products and services

Chapter 1: Introduction to the Internet and Web Design 28

Navigation
• The navigation of a website should be clear and concise
• Each webpage should have a designated navigation area with
links to other pages in the site
• The navigation area should be prominent and easy to use

Chapter 1: Introduction to the Internet and Web Design 29

Typography
• The use of effective typography, or fonts and font styles,
enhances the visual appeal of a website
• Typography also should promote the purpose and goal of the
website

Chapter 1: Introduction to the Internet and Web Design 30

Color
• The combination of colors contributes to the appeal and
legibility of the website
• Aim to strike a balance among the background color, text
color, and the color that represents a brand
• Colors convey meanings

Chapter 1: Introduction to the Internet and Web Design 31

Accessibility
• A web designer should create pages for viewing by a diverse
audience, including people with physical impairments and
global users
• The World Wide Web Consortium (W3C) develops and
maintains web standards, language specifications, and
accessibility recommendations.

Chapter 1: Introduction to the Internet and Web Design 32

Planning Checklist
• Navigation, typography, color, and accessibility are the basic
web page design criteria to consider when developing a
website
• A sophisticated website requires additional design
considerations and research of the business, its competition,
and a complete business analysis

Chapter 1: Introduction to the Internet and Web Design 33

Planning Checklist

Chapter 1: Introduction to the Internet and Web Design 34

Understanding the Basics of HTML
• Webpages are created using Hypertext Markup Language
(HTML), which is an authoring language used to create
documents for the web
• HTML consists of a set of special instructions called tags to
define the structure and layout of content in a webpage
• The HTML tags define or “mark up” the content on the
webpage, due to which it is considered a markup language
rather than a traditional programming language

Chapter 1: Introduction to the Internet and Web Design 35

HTML Elements and Attributes
• A webpage is a text file that contains both content and HTML
tags and is saved as an HTML document
• An HTML element consists of everything from the start tag to
the end tag
• HTML elements can be enhanced by using attributes, which
define additional characteristics, or properties, of an element

Chapter 1: Introduction to the Internet and Web Design 36

HTML Elements and Attributes

• HTML combines tags and descriptive attributes

that define how a document should appear in a
web browser
• HTML elements include headings, paragraphs,
hyperlinks, lists, and images

Chapter 1: Introduction to the Internet and Web Design 37

Using Web Authoring Tools-Text Editors
• Webpages can be created using HTML with a simple text
editor, such as Notepad, Notepad++, Sublime, Programmer’s
Notepad, TextEdit, and TextWrangler
• A text editor is a program that allows one to enter, change,
save, and print text, which includes HTML tags
• An HTML editor is a program that provides basic text-editing
functions, and advanced features such as color-coding for
various HTML tags, menus to insert HTML tags, and a spelling
checker
• HTML is platform independent

Chapter 1: Introduction to the Internet and Web Design 38

 HTML
8 Edition
th

Chapter 1 Complete
References ​

• Shelly Cashman Series​

• https://cdn2.hubspot.net/hubfs/237221/ISM7994
/HTML%208th%20Chapter%201.pdf?
t=1500864572659

Chapter 1: Introduction to HTML, XHTML, and CSS 40