Course Overview

Week 1
 AGENDA – WEBD101

• Introduction
• Course Requirements
• Attendance
• Assignment Submissions
• This week

2
 Introduction
• I live in Ohio
• I have worked for Franklin University as an adjunct /
employee since Spring 2001
• I also currently work for major telecommunications
company (35 years)
• Have been teaching for over 21 years (17+ online)
• Degrees
– BS Computer Engineering (The Ohio State University)
– MS Computer Engineering (The University of Illinois at Urbana-Champaign)
– MBA in International Business (Ashland University)

3
 Introduction (continued)
• “WELCOME – PLEASE READ & RESPOND!” <- READ !!!

– Click where it says HERE under #1 item to get brief intro to class
• brief introduction
• my contact information
• general rules for this course
– learning environment
– attendance
– assignments
• miscellaneous items
• references/external resources
– Click where it says HERE under #2 item to view assignment details
• Course assignments
– Click where it says HERE under #4 item to view additional information
– Click where it says SOFTWARE NEEDED under #5 item for software required

4
LMS Learning Objects to look at:

- WELCOME – PLEASE READ & RESPOND!

- SPECIAL PASSES!
- LINKS TO WEEKLY QUIZZES (QUICK
CHECKS)
- NOTES / ERRATA

5
6
7
 Attendance
• Must meet at least one of the following before 11:59 PM EST on
Sunday of each week in order to be counted as being present for
that week:

• submit at least one complete assignment for the week (must submit in week in
which assignment is due [or complete quiz])

• communicate with me during week via email with question(s), comments

• NOTE: Attendance at Meet session does NOT count towards attendance

• Weekly Meet sessions – MONDAYS 8:00 – 9:00 PM EST

→ 3 weeks of absence results in Z grade

8
 Web Development & Design
Foundations with HTML5

CHAPTER 1
INTRODUCTION TO THE INTERNET AND
WORLD WIDE WEB

9
Copyright © Terry Felke-Morris http://terrymorris.net
 Learning Outcomes
In this chapter, you will learn how to
 Describe the evolution of the Internet and the Web
 Explain the need for web standards
 Describe Universal Design
 Identify benefits of accessible web design
 Identify reliable resources of information on the Web
 Identify ethical use of the Web
 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 the Web

Copyright © Terry Felke-Morris http://terrymorris.net 10

 Internet
The interconnected network of
computer networks that spans
the globe.

Copyright © Terry Felke-Morris http://terrymorris.net 11

 The World Wide Web
The graphical user
interface to information
stored on computers
running web servers
connected to the
Internet.

Copyright © Terry Felke-Morris http://terrymorris.net 12

 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

Copyright © Terry Felke-Morris http://terrymorris.net 13

 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

Copyright © Terry Felke-Morris http://terrymorris.net 14

 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/

Copyright © Terry Felke-Morris http://terrymorris.net 15

 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

Copyright © Terry Felke-Morris http://terrymorris.net 16

 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
http://www.ncsu.edu/www/ncsu/design/sod5/cud/about_ud/about_ud.htm

Copyright © Terry Felke-Morris http://terrymorris.net 17

 Network
Network Overview
two or more computers connected together for
the purpose of communicating and sharing
resources

Copyright © Terry Felke-Morris http://terrymorris.net 18

 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.

Copyright © Terry Felke-Morris http://terrymorris.net 19

 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

Copyright © Terry Felke-Morris http://terrymorris.net 20

 The Internet Client/Server
Model
Client – Web Browser
Server – Web Server

Copyright © Terry Felke-Morris http://terrymorris.net 21

 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

Copyright © Terry Felke-Morris http://terrymorris.net 22

 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

Copyright © Terry Felke-Morris http://terrymorris.net 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.

Copyright © Terry Felke-Morris http://terrymorris.net 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.

Copyright © Terry Felke-Morris http://terrymorris.net 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

Copyright © Terry Felke-Morris http://terrymorris.net 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.

Copyright © Terry Felke-Morris http://terrymorris.net 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.

Copyright © Terry Felke-Morris http://terrymorris.net 28

 TCP
Transmission Control Protocol

Purpose is to ensure the integrity of communication

Breaks files and messages into individual units called packets

Copyright © Terry Felke-Morris http://terrymorris.net 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://www.tracert.com/cgi-bin/trace.pl

Copyright © Terry Felke-Morris http://terrymorris.net 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.

An IP address may correspond to a domain name.

Copyright © Terry Felke-Morris http://terrymorris.net 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

Copyright © Terry Felke-Morris http://terrymorris.net 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.

Copyright © Terry Felke-Morris http://terrymorris.net 33

 TLD
Top-Level Domain Name
A top-level domain (TLD) identifies the right-
most part of the domain name.

Examples of generic TLDs:

.com, .org, .net, .mil, .gov, .edu, .int, .aero,
.asia, .cat, .jobs, .name, .biz, .mobi,
.museum, .info, .coop, .post, .pro, .tel, .travel

Copyright © Terry Felke-Morris http://terrymorris.net 34

 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.

Copyright © Terry Felke-Morris http://terrymorris.net 35

 Markup Languages
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.

Copyright © Terry Felke-Morris http://terrymorris.net 36

 Markup Languages
HTML 5

◦ The next version of HTML4 and XHTML

◦ http://www.w3.org/html/
◦ http://www.w3schools.com/html/html5_intro.asp

Copyright © Terry Felke-Morris http://terrymorris.net 37

 Web Development & Design
Foundations with HTML5

CHAPTER 2
HTML BASICS

Copyright © Terry Felke-Morris http://terrymorris.net 38

Copyright © Terry Felke-Morris
 Learning Outcomes
In this chapter, you will learn how to ...
 Describe HTML, XHTML, and HTML5
 Identify the markup language in a web page document
 Use the html, head, body, title, and meta elements to code a
template for a web page
 Configure the body of a web page with headings, paragraphs,
line breaks, divs, lists, and blockquotes
 Configure text with phrase elements
 Configure a web page using new HTML5 header, nav, main,
and footer elements
 Configure special characters
 Use the anchor element to link from page to page
 Create absolute, relative, and e-mail hyperlinks
 Code, save, and display a web page document
 Test a web page document for valid syntax

Copyright © Terry Felke-Morris http://terrymorris.net 39

 What is HTML?
HTML:
The set of markup symbols or codes placed
in a file intended for display on a Web
browser page.

The World Wide Web Consortium

(http://w3c.org) sets the standards for HTML
and its related languages.

Copyright © Terry Felke-Morris http://terrymorris.net 40

 HTML Elements
 Each markup code represents an HTML element.

 Each element has a purpose.

Most elements are coded as a pair of tags:
an opening tag and a closing tag.

 Tags are enclosed in angle brackets, "<" and ">"

symbols.

Copyright © Terry Felke-Morris http://terrymorris.net 41

 What is HTML5 ?
Newest version of HTML/XHTML
Supported by modern browsers
Intended to be backwards compatible
Adds new elements
Adds new functionality
◦ Edit form data
◦ Native video and audio
◦ And more!

Source: W3C http://www.w3.org/html/logo/

Copyright © Terry Felke-Morris http://terrymorris.net 42

 Example HTML5 Web Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
... body text and more HTML5 tags go here ...
</body>
</html>

Copyright © Terry Felke-Morris http://terrymorris.net 43

 Head & Body Sections

Head Section
Contains information that describes the web page document
<head>
…head section info goes here
</head>

Body Section
Contains text and elements that display in the web page document
<body>
…body section info goes here
</body>

Copyright © Terry Felke-Morris http://terrymorris.net 44

 Title Element
Meta Element

Copyright © Terry Felke-Morris http://terrymorris.net 45

 Heading Element

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Demo

Copyright © Terry Felke-Morris http://terrymorris.net 46

 Paragraph Element
Paragraph element
<p> …paragraph goes here… </p>

◦ Groups sentences and sections of text together.

◦ Block Display – Configures empty space above and

below

Demo

Copyright © Terry Felke-Morris http://terrymorris.net 47

 Line Break Element

Line Break element

◦ Stand-alone, or void tag

…text goes here <br>

This starts on a new line….

◦ Causes the next element or text to display on a new line

Demo

Copyright © Terry Felke-Morris http://terrymorris.net 48

 Blockquote Element
Blockquote element
◦ Indents a block of text for special emphasis

<blockquote>
…text goes here…
</blockquote>
◦ Block Display – Configures empty space above and below
Demo

Copyright © Terry Felke-Morris http://terrymorris.net 49

 Phrase Elements
Indicate the context and meaning of the text
Element Example Usage

<b> bold text Text that has no extra importance but is styled in bold font by
usage and convention
<em> emphasized Causes text to be emphasized in relation to other text; usually
text
displayed in italics
<i> italicized text Text that has no extra importance but is styled in italics by
usage and convention
<mark> mark text Text that is highlighted in order to be easily referenced
(HTML5 only)
small text Legal disclaimers and notices (“fine print”) displayed in small
<small>
font-size
<strong> strong text Strong importance; causes text to stand out from surrounding
text; usually displayed in bold
<sub> sub text Displays a subscript as small text below the baseline
sup text
<sup> Displays a superscript as small text above the baseline

Copyright © Terry Felke-Morris http://terrymorris.net 50

 Proper Nesting
CODE:
<p><i>Call for a free quote for your web development needs:
<strong>888.555.5555 </strong></i></p>

BROWSER DISPLAY:

Call for a free quote for your web development needs: 888.555.5555

Copyright © Terry Felke-Morris http://terrymorris.net 51

 HTML Lists

Unordered List
Ordered List
Description List
formerly called a definition list

Copyright © Terry Felke-Morris http://terrymorris.net 52

 Unordered List
Displays a bullet, or list marker,
before each entry in the list.

<ul>
Contains the unordered list

<li>
Contains an item in the list

Copyright © Terry Felke-Morris http://terrymorris.net 53

 Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>

Demo

Copyright © Terry Felke-Morris http://terrymorris.net 54

 Ordered List
Displays a numbering or lettering system to itemize
the information contained in the list
<ol>
Contains the ordered list
◦ type attribute determines numbering scheme of
list, default is numerals
<li>
Contains an item in the list

Copyright © Terry Felke-Morris http://terrymorris.net 55

 Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
Demo

Copyright © Terry Felke-Morris http://terrymorris.net 56

 Description List
Useful to display a list of terms and descriptions or a list
of FAQ and answers

◦ <dl>
Contains the description list

◦ <dt>
Contains a term/phrase/sentence
Configures empty space above and below the text

◦ <dd>
Contains a description of the term/phrase/sentence
◦ Indents the text
◦ Configures empty space above and below the text

Copyright © Terry Felke-Morris http://terrymorris.net 57

 Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>

Demo

Copyright © Terry Felke-Morris http://terrymorris.net 58

 Special Characters
 Display special characters such as quotes,
copyright symbol, etc.

Character Code
© &copy;
< &lt;
> &gt;
& &amp;
&nbsp;

Copyright © Terry Felke-Morris http://terrymorris.net 59

 Div Element
Configures a structural block area or “division” on a
web page with empty space above and below.
Can contain other block display elements, including
other div elements

<div>Home Services Contact</div>

Demo

Copyright © Terry Felke-Morris http://terrymorris.net 60

 HTML5 Structural Elements
header Element
<header></header>
Contains the web page
document’s headings

nav Element
<nav></nav>
Contains web page
document’s main navigation

main Element
<main></main>
Contains the web page
document’s main content
footer Element
<footer></footer>
Contains the web page
document’s footer
Copyright © Terry Felke-Morris http://terrymorris.net 61
 HTML5
Structural
Elements

<body>
<header> document headings go here </header>
<nav> main navigation goes here </nav>
<main> main content goes here </main>
<footer> document footer information goes here </footer>
</body>

Copyright © Terry Felke-Morris http://terrymorris.net 62

 Anchor Element
 Specifies a hyperlink reference (href) to a file
 Text between the <a> and </a> is displayed on
the web page.

<a href="contact.html">Contact Us</a>

 href Attribute
 Indicates the file name or URL

Demo

Copyright © Terry Felke-Morris http://terrymorris.net 63

 Absolute & Relative Hyperlinks
Absolute link
◦ Link to a different website

<a href="http://yahoo.com">Yahoo</a>

Relative link
◦ Link to pages on your own site

<a href="index.htm">Home</a>

Copyright © Terry Felke-Morris http://terrymorris.net 64

 E-Mail Hyperlink
Automatically launch the default mail
program configured for the browser
If no browser default is configured,
a message is displayed

<a href=“mailto:[email protected]”>[email protected]</a>

Copyright © Terry Felke-Morris http://terrymorris.net 65

 Writing Valid HTML
Check your code for syntax errors
◦Benefit:
◦Valid code 
more consistent browser display

W3C HTML Validation Tool

◦http://validator.w3.org
Put <!DOCTYPE html> as first line in html file (HTML5)

Copyright © Terry Felke-Morris http://terrymorris.net 66

67
68
69
70
71
72
73
74
Both the home page and form page must not go below-the-fold for this class.
75
76
77