SlideShare a Scribd company logo
1 of 42
Copyright © Terry Felke-Morris
WEB DEVELOPMENT & DESIGN
FOUNDATIONS WITH HTML5
Chapter 1
Key Concepts
1Copyright © Terry Felke-Morris
LEARNING OUTCOMES
In this chapter, you will learn how to
Describe the evolution of the Internet and theWeb
Explain the need for web standards
Describe Universal Design
Identify benefits of accessible web design
Identify reliable resources of information on theWeb
Identify ethical use of theWeb
Describe the purpose of web browsers and web servers
Identify networking protocols
Define URIs and domain names
Describe HTML, XHTML, and HTML5
Describe popular trends in the use of theWeb
2Copyright © Terry Felke-Morris
REASONS FOR
INTERNET GROWTH IN THE 1990S
 Removal of the ban on commercial activity
 Development of the World Wide Web
by Tim Berners-Lee at CERN
 Development of Mosaic,
the first graphics-based web browser at NCSA
 Personal computers were increasingly available
and affordable
 Online service providers offered low-cost
connections to the Internet
3Copyright © Terry Felke-Morris
THE WORLD WIDE WEB
The graphical user interface to
information stored on computers
connected to the Internet.
4Copyright © Terry Felke-Morris
INTERNET STANDARDS &
COORDINATION
 The Internet Society
 A professional organization that provides
leadership in addressing issues related to the
future of the Internet
 IETF-- Internet Engineering Task Force
 RFC – Requests for Comments
 IAB – Internet Architecture Board
5Copyright © Terry Felke-Morris
GROWTH OF THE INTERNET
http://www.internetworldstats.com/stats.htm
6Copyright © Terry Felke-Morris
INTERNET STANDARDS &
COORDINATION
ICANN - The Internet Corporation for Assigned Numbers &
Names
◦ Non-profit organization
◦ Main function is to coordinate the assignment of:
 Internet domain names
 IP address numbers
 Protocol parameters
 Protocol port numbers.
7Copyright © Terry Felke-Morris
INTRANET & EXTRANETS
 Intranet
 A private network contained within an organization or
business used to share information and resources among
coworkers.
 Extranet
 A private network that securely shares part of an
organization’s information or operations with external
partners
8Copyright © Terry Felke-Morris
WEB STANDARDS
AND THE W3C CONSORTIUM
W3C – World Wide Web Consortium
◦ Develops recommendations and
prototype technologies related to the
Web
◦ Produces specifications, called
Recommendations, in an effort to
standardize web technologies
◦ WAI – Web Accessibility Initiative
9Copyright © Terry Felke-Morris
WEB ACCESSIBILITY
 Accessible Website
 provides accommodations for individuals with visual,
auditory, physical, and neurological disabilities
 WAI
 W3C’s Web Accessibility Initiative
 http://www.w3.org/WAI
 WCAG
 Web Content Accessibility Guidelines
http://www.w3.org/WAI/WCAG20/quickref/
10Copyright © Terry Felke-Morris
WEB ACCESSIBILITY & THE LAW
 Americans with Disabilities Act (ADA)
 Prohibits discrimination against people with
disabilities
 Section 508 of the Rehabilitation Act
 Requires that government agencies must give
individuals with disabilities access to information
technology that is comparable to the access
available to others
 http://www.section508.gov
11Copyright © Terry Felke-Morris
UNIVERSAL DESIGN FOR THE WEB
 Universal Design
 the design of products and environments to be
usable by all people, to the greatest extent
possible, without the need for adaptation or
specialized design
12
http://www.ncsu.edu/www/ncsu/design/sod5/cud/about_ud/about_ud.htm
Copyright © Terry Felke-Morris
RELIABILITY &
INFORMATION ON THE WEB
 Questions to Ask:
 Is the organization credible?
 How recent is the information?
 Are there links to additional resources?
 Is it Wikipedia?
13Copyright © Terry Felke-Morris
CHECKPOINT 1.1
1. Describe the difference between the
Internet and the Web.
2. Explain three events that contributed to
the commercialization and exponential
growth of the Internet.
3. Is the concept of universal design important
to web developers? Explain your answer.
14Copyright © Terry Felke-Morris
NETWORK OVERVIEW
 Network
two or more computers connected together
for the purpose of communicating and sharing
resources
15Copyright © Terry Felke-Morris
NETWORKS
 LAN – Local Area Network
 Usually confined to a single building or group of
buildings
 WAN – Wide Area Network
 Usually uses some form of public or commercial
communications network to connect computers is
widely dispersed geographical areas.
16Copyright © Terry Felke-Morris
INTERNET INFRASTRUCTURE
 Internet Backbone
A high capacity communication link that carries data
gathered from smaller links that interconnect with it.
17
Source: http://www.alamo.edu/sac/library/faculty/deosdade/wwwtest2.htm
Copyright © Terry Felke-Morris
THE CLIENT/SERVER MODEL
 Client/Server can describe a relationship
between two computer programs –
the "client" and the "server".
 Client
 requests some type of service (such as a file or
database access) from the server.
 Server
 fulfills the request and transmits the results to the
client over a network
18Copyright © Terry Felke-Morris
THE INTERNET CLIENT/SERVER MODEL
 Client – Web Browser
 Server – Web Server
19Copyright © Terry Felke-Morris
WEB CLIENT
 Connected to the Internet when needed
 Usually runs web browser (client) software
(such as Internet Explorer or Firefox)
 Uses HTTP (Hypertext Transfer Protocol)
 Requests web pages from server
 Receives web pages and files from server
20Copyright © Terry Felke-Morris
WEB SERVER
 Continually connected to the Internet
 Runs web server software
(such as Apache or Internet Information Server)
 Uses HTTP (Hypertext Transfer Protocol)
 Receives request for the web page
 Responds to request and transmits status code,
web page, and associated files
21Copyright © Terry Felke-Morris
MIME TYPE
 Multi-Purpose Internet Mail Extension
 a set of rules that allow multimedia documents
to be exchanged among
many different computer systems
22Copyright © Terry Felke-Morris
INTERNET PROTOCOLS
 Protocols
 Rules that describe the methods used for clients and
servers to communicate with each other over a
network.
 There is no single protocol that makes the Internet and
Web work.
 A number of protocols with specific functions are
needed.
23Copyright © Terry Felke-Morris
FTP
FILE TRANSFER PROTOCOL
 A set of rules that allow files to be exchanged
between computers on the Internet.
 Web developers commonly use FTP to transfer
web page files from their computers to web
servers.
 FTP is also used to download programs and files
from other servers to individual computers.
24Copyright © Terry Felke-Morris
E-MAIL PROTOCOLS
 Sending E-mail
 SMTP Simple Mail Transfer Protocol
 Receiving E-mail
 POP (POP3) Post Office Protocol
 IMAP Internet Mail Access Protocol
25Copyright © Terry Felke-Morris
HTTP - HYPERTEXT TRANSFER PROTOCOL
 A set of rules for exchanging files such as text, graphic images,
sound, video, and other multimedia files on the Web.
 Web browsers send HTTP requests for web pages and their
associated files.
 Web servers send HTTP responses back to the web browsers.
26
http request
response
http
Copyright © Terry Felke-Morris
TCP/IP
TRANSMISSION CONTROL PROTOCOL/INTERNET
PROTOCOL
 TCP/IP has been adopted as the official
communication protocol of the Internet.
 TCP and IP have different functions that work
together to ensure reliable communication over
the Internet.
27Copyright © Terry Felke-Morris
TCP
TRANSMISSION CONTROL PROTOCOL
 Purpose is to ensure the integrity of communication
 Breaks files and messages into individual units called packets
28Copyright © Terry Felke-Morris
IP
INTERNET PROTOCOL
A set of rules that controls how data is sent
between computers on the Internet.
IP routes a packet to the correct destination
address.
The packet gets successively forwarded to the next
closest router (a hardware device designed to move
network traffic) until it reaches its destination.
http://visualroute.visualware.com/
http://www.tracert.com/cgi-bin/trace.pl
29Copyright © Terry Felke-Morris
IP ADDRESS
 Each device connected to the Internet has a
unique numeric IP address.
 These addresses consist of a set of four groups
of numbers, called octets.
74.125.95.104 will get you Google!
 An IP address may correspond to a domain
name.
30Copyright © Terry Felke-Morris
DOMAIN NAME
Locates an organization or other entity on
the Internet
Domain Name System
◦ Divides the Internet into logical groups and
understandable names
◦ Associates unique computer IP Addresses with the text-
based domain names you type into a web browser
◦ Browser: http://google.com
◦ IP Address: 74.125.95.104
31Copyright © Terry Felke-Morris
UNIFORM RESOURCE IDENTIFIER
 URI – Uniform Resource Identifier
 identifies a resource on the Internet
 URL – Uniform Resource Locator
 a type of URI which represents the network location of a
resource such as a web page, a graphic file, or an MP3 file.
32Copyright © Terry Felke-Morris
TLD
TOP-LEVEL DOMAIN NAME
 A top-level domain (TLD) identifies the
right-most part of the domain name.
 Current generic TLDs:
.com, .org, .net, .mil, .gov, .edu, .int, .aero,
.asia, .cat, .jobs, .name, .biz, .mobi,
.museum, .info, .coop, .post, .pro, .tel, .travel,
.xxx
33Copyright © Terry Felke-Morris
COUNTY CODE TLDS
 Two character codes originally intended to indicate the
geographical location (country) of the web site.
 In practice, it is fairly easy to obtain a domain name with
a country code TLD that is not local to the registrant.
 Examples:
 .tv, .ws, .au, .jp, .uk
 See http://www.iana.org/cctld/cctld-whois.htm
34Copyright © Terry Felke-Morris
DOMAIN NAME SYSTEM
 The Domain Name System (DNS) associates
Domain Names with IP addresses.
35
35
Domain Name
IP Address
Use TPC/IP
to send HTTP Request
Web
Server
Use TCP/IP
to send HTTP Responses
with web page files & images
Web
Browser
Web Browser
displays web page
DNS
Copyright © Terry Felke-Morris
MARKUP LANGUAGES
 SGML – Standard Generalized Markup Language
 A standard for specifying a markup language or tag set
 HTML – Hypertext Markup Language
 The set of markup symbols or codes placed in a file intended
for display on a web browser.
36Copyright © Terry Felke-Morris
MARKUP LANGUAGES (2)
 XML – eXtensible Markup Language
 A text-based language designed to describe, deliver, and
exchange structured information.
 It is not intended to replace HTML –
it is intended to extend the power of HTML by separating data
from presentation.
37Copyright © Terry Felke-Morris
MARKUP LANGUAGES (3)
 XHTML – eXtensible Hypertext Markup
Language
 Developed by the W3C as the reformulation of HTML 4.0 as an
application of XML.
 It combines the formatting strengths of HTML 4.0 and the data
structure and extensibility strengths of XML.
38Copyright © Terry Felke-Morris
MARKUP LANGUAGES (4)
 HTML 5
 The next version of HTML 4 and
XHTML
 http://www.w3.org/html/
39Copyright © Terry Felke-Morris
CHECKPOINT 1.2
1. Describe the components of the client/server
model as applied to the Internet.
2. Identify two protocols used on the Internet to
convey information that use the Internet but
do not use the Web.
3. Explain the similarities and differences
between a URL and a domain name.
40Copyright © Terry Felke-Morris
POPULAR USES OF THE INTERNET
 Continued importance of E-Commerce
 Mobile Access
 Blogs
 Wikis
 Social Networking
 RSS
 Podcasts
 Web 2.0
41Copyright © Terry Felke-Morris
SUMMARY
 This chapter provided a brief overview of
Internet,Web, and introductory networking
concepts.
42Copyright © Terry Felke-Morris

More Related Content

What's hot

Types of internet connections
Types of internet connectionsTypes of internet connections
Types of internet connections
adrianne1114
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Mohammed Safwat
 

What's hot (20)

Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Web design - How the Web works?
Web design - How the Web works?Web design - How the Web works?
Web design - How the Web works?
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Php.ppt
Php.pptPhp.ppt
Php.ppt
 
Php mysql
Php mysqlPhp mysql
Php mysql
 
Introduction to back-end
Introduction to back-endIntroduction to back-end
Introduction to back-end
 
CSS
CSSCSS
CSS
 
Web technology
Web technologyWeb technology
Web technology
 
Types of internet connections
Types of internet connectionsTypes of internet connections
Types of internet connections
 
Php introduction
Php introductionPhp introduction
Php introduction
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
Html
HtmlHtml
Html
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Http request and http response
Http request and http responseHttp request and http response
Http request and http response
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
Rest API
Rest APIRest API
Rest API
 
Intro to Wordpress
Intro to WordpressIntro to Wordpress
Intro to Wordpress
 
Php
PhpPhp
Php
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 

Viewers also liked

HTTP & HTML & Web
HTTP & HTML & WebHTTP & HTML & Web
HTTP & HTML & Web
Peter R. Egli
 

Viewers also liked (17)

The Joshua Tree Epiphany
The Joshua Tree EpiphanyThe Joshua Tree Epiphany
The Joshua Tree Epiphany
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
Your Presentation is CRAP, and That's Why I Like It
Your Presentation is CRAP, and That's Why I Like ItYour Presentation is CRAP, and That's Why I Like It
Your Presentation is CRAP, and That's Why I Like It
 
Principles Of Effective Design
Principles Of Effective DesignPrinciples Of Effective Design
Principles Of Effective Design
 
A Guide to Using Color Effectively
A Guide to Using Color EffectivelyA Guide to Using Color Effectively
A Guide to Using Color Effectively
 
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
 
CARP Design Principles
CARP Design PrinciplesCARP Design Principles
CARP Design Principles
 
Web Landscape - updated in Jan 2016
Web Landscape - updated in Jan 2016Web Landscape - updated in Jan 2016
Web Landscape - updated in Jan 2016
 
Crap design
Crap designCrap design
Crap design
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Graphic and Web Design Principles
Graphic and Web Design PrinciplesGraphic and Web Design Principles
Graphic and Web Design Principles
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
HTTP & HTML & Web
HTTP & HTML & WebHTTP & HTML & Web
HTTP & HTML & Web
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 

Similar to Chapter 1 - Web Design

Lecture 1- Introduction to Computers and the Internet.pptx
Lecture 1- Introduction to Computers and the Internet.pptxLecture 1- Introduction to Computers and the Internet.pptx
Lecture 1- Introduction to Computers and the Internet.pptx
RemyaTom2
 

Similar to Chapter 1 - Web Design (20)

Chapter1
Chapter1Chapter1
Chapter1
 
Chapter1
Chapter1Chapter1
Chapter1
 
Chapter1
Chapter1Chapter1
Chapter1
 
Ch. 1 HTML5, CIS 110 13F
Ch. 1 HTML5, CIS 110 13FCh. 1 HTML5, CIS 110 13F
Ch. 1 HTML5, CIS 110 13F
 
ch01-internet.ppt
ch01-internet.pptch01-internet.ppt
ch01-internet.ppt
 
Chapter2 computer
Chapter2 computerChapter2 computer
Chapter2 computer
 
Introduction to Information Technology Lecture Slides PPT
Introduction to Information Technology Lecture Slides PPTIntroduction to Information Technology Lecture Slides PPT
Introduction to Information Technology Lecture Slides PPT
 
Basics of Internet and WWW
Basics of Internet and WWWBasics of Internet and WWW
Basics of Internet and WWW
 
Lecture 1- Introduction to Computers and the Internet.pptx
Lecture 1- Introduction to Computers and the Internet.pptxLecture 1- Introduction to Computers and the Internet.pptx
Lecture 1- Introduction to Computers and the Internet.pptx
 
The internet
The internetThe internet
The internet
 
The Internet
The InternetThe Internet
The Internet
 
Assignment 01
Assignment 01Assignment 01
Assignment 01
 
Internet and computer are your future
Internet and computer are your futureInternet and computer are your future
Internet and computer are your future
 
Internet.
Internet.Internet.
Internet.
 
Internet
InternetInternet
Internet
 
Internet website designing_company_in_delhi
Internet website designing_company_in_delhiInternet website designing_company_in_delhi
Internet website designing_company_in_delhi
 
Intrenet and its uses
Intrenet and its usesIntrenet and its uses
Intrenet and its uses
 
Introduction to the Internet
Introduction to the InternetIntroduction to the Internet
Introduction to the Internet
 
Internet
InternetInternet
Internet
 
Daley7 ppt 07
Daley7 ppt 07Daley7 ppt 07
Daley7 ppt 07
 

More from tclanton4 (20)

Chapter 14 - Web Design
Chapter 14 - Web DesignChapter 14 - Web Design
Chapter 14 - Web Design
 
Chapter 13 - Web Design
Chapter 13 - Web DesignChapter 13 - Web Design
Chapter 13 - Web Design
 
Chapter 12 - Web Design
Chapter 12 - Web DesignChapter 12 - Web Design
Chapter 12 - Web Design
 
Chapter 11 - Web Design
Chapter 11 - Web DesignChapter 11 - Web Design
Chapter 11 - Web Design
 
Chapter 10 - Web Design
Chapter 10 - Web DesignChapter 10 - Web Design
Chapter 10 - Web Design
 
Chapter 9 - Web Design
Chapter 9 - Web DesignChapter 9 - Web Design
Chapter 9 - Web Design
 
Chapter 8 - Web Design
Chapter 8 - Web DesignChapter 8 - Web Design
Chapter 8 - Web Design
 
Chapter 7 - Web Design
Chapter 7 - Web DesignChapter 7 - Web Design
Chapter 7 - Web Design
 
Chapter 6 - Web Design
Chapter 6 - Web DesignChapter 6 - Web Design
Chapter 6 - Web Design
 
Chapter 5 - Web Design
Chapter 5 - Web DesignChapter 5 - Web Design
Chapter 5 - Web Design
 
Chapter 4 - Web Design
Chapter 4 - Web DesignChapter 4 - Web Design
Chapter 4 - Web Design
 
Chapter 3 - Web Design
Chapter 3 - Web DesignChapter 3 - Web Design
Chapter 3 - Web Design
 
Base2
Base2Base2
Base2
 
Base1
Base1Base1
Base1
 
Impress
ImpressImpress
Impress
 
Project Mgt
Project MgtProject Mgt
Project Mgt
 
Charts in Calc
Charts in CalcCharts in Calc
Charts in Calc
 
Formatting a Worksheet in Calc
Formatting a Worksheet in CalcFormatting a Worksheet in Calc
Formatting a Worksheet in Calc
 
Creating a Worksheet in Calc
Creating a Worksheet in CalcCreating a Worksheet in Calc
Creating a Worksheet in Calc
 
Advanced Features of Writer
Advanced Features of WriterAdvanced Features of Writer
Advanced Features of Writer
 

Recently uploaded

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 

Recently uploaded (20)

PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 

Chapter 1 - Web Design

  • 1. Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 1 Key Concepts 1Copyright © Terry Felke-Morris
  • 2. LEARNING OUTCOMES In this chapter, you will learn how to Describe the evolution of the Internet and theWeb Explain the need for web standards Describe Universal Design Identify benefits of accessible web design Identify reliable resources of information on theWeb Identify ethical use of theWeb Describe the purpose of web browsers and web servers Identify networking protocols Define URIs and domain names Describe HTML, XHTML, and HTML5 Describe popular trends in the use of theWeb 2Copyright © Terry Felke-Morris
  • 3. REASONS FOR INTERNET GROWTH IN THE 1990S  Removal of the ban on commercial activity  Development of the World Wide Web by Tim Berners-Lee at CERN  Development of Mosaic, the first graphics-based web browser at NCSA  Personal computers were increasingly available and affordable  Online service providers offered low-cost connections to the Internet 3Copyright © Terry Felke-Morris
  • 4. THE WORLD WIDE WEB The graphical user interface to information stored on computers connected to the Internet. 4Copyright © Terry Felke-Morris
  • 5. INTERNET STANDARDS & COORDINATION  The Internet Society  A professional organization that provides leadership in addressing issues related to the future of the Internet  IETF-- Internet Engineering Task Force  RFC – Requests for Comments  IAB – Internet Architecture Board 5Copyright © Terry Felke-Morris
  • 6. GROWTH OF THE INTERNET http://www.internetworldstats.com/stats.htm 6Copyright © Terry Felke-Morris
  • 7. INTERNET STANDARDS & COORDINATION ICANN - The Internet Corporation for Assigned Numbers & Names ◦ Non-profit organization ◦ Main function is to coordinate the assignment of:  Internet domain names  IP address numbers  Protocol parameters  Protocol port numbers. 7Copyright © Terry Felke-Morris
  • 8. INTRANET & EXTRANETS  Intranet  A private network contained within an organization or business used to share information and resources among coworkers.  Extranet  A private network that securely shares part of an organization’s information or operations with external partners 8Copyright © Terry Felke-Morris
  • 9. WEB STANDARDS AND THE W3C CONSORTIUM W3C – World Wide Web Consortium ◦ Develops recommendations and prototype technologies related to the Web ◦ Produces specifications, called Recommendations, in an effort to standardize web technologies ◦ WAI – Web Accessibility Initiative 9Copyright © Terry Felke-Morris
  • 10. WEB ACCESSIBILITY  Accessible Website  provides accommodations for individuals with visual, auditory, physical, and neurological disabilities  WAI  W3C’s Web Accessibility Initiative  http://www.w3.org/WAI  WCAG  Web Content Accessibility Guidelines http://www.w3.org/WAI/WCAG20/quickref/ 10Copyright © Terry Felke-Morris
  • 11. WEB ACCESSIBILITY & THE LAW  Americans with Disabilities Act (ADA)  Prohibits discrimination against people with disabilities  Section 508 of the Rehabilitation Act  Requires that government agencies must give individuals with disabilities access to information technology that is comparable to the access available to others  http://www.section508.gov 11Copyright © Terry Felke-Morris
  • 12. UNIVERSAL DESIGN FOR THE WEB  Universal Design  the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design 12 http://www.ncsu.edu/www/ncsu/design/sod5/cud/about_ud/about_ud.htm Copyright © Terry Felke-Morris
  • 13. RELIABILITY & INFORMATION ON THE WEB  Questions to Ask:  Is the organization credible?  How recent is the information?  Are there links to additional resources?  Is it Wikipedia? 13Copyright © Terry Felke-Morris
  • 14. CHECKPOINT 1.1 1. Describe the difference between the Internet and the Web. 2. Explain three events that contributed to the commercialization and exponential growth of the Internet. 3. Is the concept of universal design important to web developers? Explain your answer. 14Copyright © Terry Felke-Morris
  • 15. NETWORK OVERVIEW  Network two or more computers connected together for the purpose of communicating and sharing resources 15Copyright © Terry Felke-Morris
  • 16. NETWORKS  LAN – Local Area Network  Usually confined to a single building or group of buildings  WAN – Wide Area Network  Usually uses some form of public or commercial communications network to connect computers is widely dispersed geographical areas. 16Copyright © Terry Felke-Morris
  • 17. INTERNET INFRASTRUCTURE  Internet Backbone A high capacity communication link that carries data gathered from smaller links that interconnect with it. 17 Source: http://www.alamo.edu/sac/library/faculty/deosdade/wwwtest2.htm Copyright © Terry Felke-Morris
  • 18. THE CLIENT/SERVER MODEL  Client/Server can describe a relationship between two computer programs – the "client" and the "server".  Client  requests some type of service (such as a file or database access) from the server.  Server  fulfills the request and transmits the results to the client over a network 18Copyright © Terry Felke-Morris
  • 19. THE INTERNET CLIENT/SERVER MODEL  Client – Web Browser  Server – Web Server 19Copyright © Terry Felke-Morris
  • 20. WEB CLIENT  Connected to the Internet when needed  Usually runs web browser (client) software (such as Internet Explorer or Firefox)  Uses HTTP (Hypertext Transfer Protocol)  Requests web pages from server  Receives web pages and files from server 20Copyright © Terry Felke-Morris
  • 21. WEB SERVER  Continually connected to the Internet  Runs web server software (such as Apache or Internet Information Server)  Uses HTTP (Hypertext Transfer Protocol)  Receives request for the web page  Responds to request and transmits status code, web page, and associated files 21Copyright © Terry Felke-Morris
  • 22. MIME TYPE  Multi-Purpose Internet Mail Extension  a set of rules that allow multimedia documents to be exchanged among many different computer systems 22Copyright © Terry Felke-Morris
  • 23. INTERNET PROTOCOLS  Protocols  Rules that describe the methods used for clients and servers to communicate with each other over a network.  There is no single protocol that makes the Internet and Web work.  A number of protocols with specific functions are needed. 23Copyright © Terry Felke-Morris
  • 24. FTP FILE TRANSFER PROTOCOL  A set of rules that allow files to be exchanged between computers on the Internet.  Web developers commonly use FTP to transfer web page files from their computers to web servers.  FTP is also used to download programs and files from other servers to individual computers. 24Copyright © Terry Felke-Morris
  • 25. E-MAIL PROTOCOLS  Sending E-mail  SMTP Simple Mail Transfer Protocol  Receiving E-mail  POP (POP3) Post Office Protocol  IMAP Internet Mail Access Protocol 25Copyright © Terry Felke-Morris
  • 26. HTTP - HYPERTEXT TRANSFER PROTOCOL  A set of rules for exchanging files such as text, graphic images, sound, video, and other multimedia files on the Web.  Web browsers send HTTP requests for web pages and their associated files.  Web servers send HTTP responses back to the web browsers. 26 http request response http Copyright © Terry Felke-Morris
  • 27. TCP/IP TRANSMISSION CONTROL PROTOCOL/INTERNET PROTOCOL  TCP/IP has been adopted as the official communication protocol of the Internet.  TCP and IP have different functions that work together to ensure reliable communication over the Internet. 27Copyright © Terry Felke-Morris
  • 28. TCP TRANSMISSION CONTROL PROTOCOL  Purpose is to ensure the integrity of communication  Breaks files and messages into individual units called packets 28Copyright © Terry Felke-Morris
  • 29. IP INTERNET PROTOCOL A set of rules that controls how data is sent between computers on the Internet. IP routes a packet to the correct destination address. The packet gets successively forwarded to the next closest router (a hardware device designed to move network traffic) until it reaches its destination. http://visualroute.visualware.com/ http://www.tracert.com/cgi-bin/trace.pl 29Copyright © Terry Felke-Morris
  • 30. IP ADDRESS  Each device connected to the Internet has a unique numeric IP address.  These addresses consist of a set of four groups of numbers, called octets. 74.125.95.104 will get you Google!  An IP address may correspond to a domain name. 30Copyright © Terry Felke-Morris
  • 31. DOMAIN NAME Locates an organization or other entity on the Internet Domain Name System ◦ Divides the Internet into logical groups and understandable names ◦ Associates unique computer IP Addresses with the text- based domain names you type into a web browser ◦ Browser: http://google.com ◦ IP Address: 74.125.95.104 31Copyright © Terry Felke-Morris
  • 32. UNIFORM RESOURCE IDENTIFIER  URI – Uniform Resource Identifier  identifies a resource on the Internet  URL – Uniform Resource Locator  a type of URI which represents the network location of a resource such as a web page, a graphic file, or an MP3 file. 32Copyright © Terry Felke-Morris
  • 33. TLD TOP-LEVEL DOMAIN NAME  A top-level domain (TLD) identifies the right-most part of the domain name.  Current generic TLDs: .com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia, .cat, .jobs, .name, .biz, .mobi, .museum, .info, .coop, .post, .pro, .tel, .travel, .xxx 33Copyright © Terry Felke-Morris
  • 34. COUNTY CODE TLDS  Two character codes originally intended to indicate the geographical location (country) of the web site.  In practice, it is fairly easy to obtain a domain name with a country code TLD that is not local to the registrant.  Examples:  .tv, .ws, .au, .jp, .uk  See http://www.iana.org/cctld/cctld-whois.htm 34Copyright © Terry Felke-Morris
  • 35. DOMAIN NAME SYSTEM  The Domain Name System (DNS) associates Domain Names with IP addresses. 35 35 Domain Name IP Address Use TPC/IP to send HTTP Request Web Server Use TCP/IP to send HTTP Responses with web page files & images Web Browser Web Browser displays web page DNS Copyright © Terry Felke-Morris
  • 36. MARKUP LANGUAGES  SGML – Standard Generalized Markup Language  A standard for specifying a markup language or tag set  HTML – Hypertext Markup Language  The set of markup symbols or codes placed in a file intended for display on a web browser. 36Copyright © Terry Felke-Morris
  • 37. MARKUP LANGUAGES (2)  XML – eXtensible Markup Language  A text-based language designed to describe, deliver, and exchange structured information.  It is not intended to replace HTML – it is intended to extend the power of HTML by separating data from presentation. 37Copyright © Terry Felke-Morris
  • 38. MARKUP LANGUAGES (3)  XHTML – eXtensible Hypertext Markup Language  Developed by the W3C as the reformulation of HTML 4.0 as an application of XML.  It combines the formatting strengths of HTML 4.0 and the data structure and extensibility strengths of XML. 38Copyright © Terry Felke-Morris
  • 39. MARKUP LANGUAGES (4)  HTML 5  The next version of HTML 4 and XHTML  http://www.w3.org/html/ 39Copyright © Terry Felke-Morris
  • 40. CHECKPOINT 1.2 1. Describe the components of the client/server model as applied to the Internet. 2. Identify two protocols used on the Internet to convey information that use the Internet but do not use the Web. 3. Explain the similarities and differences between a URL and a domain name. 40Copyright © Terry Felke-Morris
  • 41. POPULAR USES OF THE INTERNET  Continued importance of E-Commerce  Mobile Access  Blogs  Wikis  Social Networking  RSS  Podcasts  Web 2.0 41Copyright © Terry Felke-Morris
  • 42. SUMMARY  This chapter provided a brief overview of Internet,Web, and introductory networking concepts. 42Copyright © Terry Felke-Morris