CIS 145

Web Publishing

Lecture/lab 1

Instructor
Kyungjae Lee (just call me KJ)
[email protected]
 This week’s topic
(Reading assignment this week!)

• Chapter 1. Introduction to the

Internet and World Wide Web

• Chapter 2. HTML Basics

1-2
 https://webdevfoundations.net/9e/index.html

Web Development & Design

Foundations with HTML5

CHAPTER 1
KEY CONCEPTS

3
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 4

If you are a programmer at Nintendo
making Super Mario game, how you are
going to design/structure your lines of code
to simulate this game scene??

What could be fundamental questions to

ask before writing code?

1-5
1-6
http://www.informationisbeautiful.net/visuali
zations/million-lines-of-code/

1-7
 Google Search Engine.
• How many lines of code?

1-8
http://www.valdostamuseum.org/hamsmith/
Matrix.html 9
 Before we talk about Internet,
what is computer?
Is computer intelligent?

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

To answer this question, we need to have
core understanding about ‘computer’.

What is ‘computer’?

A computer is a programmable machine designed

to sequentially and automatically carry out a
sequence of arithmetic or logical operations. The
particular sequence of operations can be changed
readily, allowing the computer to solve more than
one kind of problem.
Source:
http://en.wikipedia.org/wiki/Computer
Computers: Mechanical brains
Described as "gigantic brains," computers were once so big they filled entire
rooms. It all started with ENIAC, the world's first computer, that cracked and
buzzed and weighed 27 tonnes. By the 1960s, ordinary Canadians were
fascinated with these new high tech devices: IBMs could set up blind dates,
select Christmas presents and mysteriously dispense money. A novel idea until
computer technology replaced real people on the job. These days computers
continue to revolutionize — this time changing the way people communicate by
way of the Internet.

Rare Computer a Pioneer in Canadian

Industry
By Noelle Grosse
http://youtu.be/VBDoT8o4q00
http://youtu.be/LvKxJ3bQRKE
 Review
• What are four components of computer?
•Input,
•Storage,
•Processing, and
•Output
• How these four components are
linked/connected/processed? Framework/pipeline?
von Neumann Architecture

http://cybercomputing.blogspot.ca/2012/02/von-neumann-architecture.html
https://computing.llnl.gov/tutorials/parallel_comp/#Neumann
History of Software
Programming
Languages

Source· Georges Merx and Ronald J. Norman

 First Generation Software
(1951-1959)
Machine Language
• Computer programs written in binary (1s
and 0s)

Assembly Languages and

Translators
• Programs written using mnemonics
(symbolic instruction), which were
translated into machine language

Programmer Changes
• Programmers divide into two groups:
application programmers and systems
programmers
1
3
17
 Second Generation Software
(1959-1965)
High-level Languages
English-like statements made programming
easier:
Fortran, COBOL, Lisp

1
4
18
 Third Generation Software
(1965-1971)

Systems Software
• Utility programs
• Language translators
• Operating system, which decides which programs to run and when

Separation between Users and Hardware

• Computer programmers write programs to be used by general public (i.e., 1
nonprogrammers)
5
19
Fourth Generation Software Fifth Generation Software
(1971-1989) (1990- present)
Structured Programming Microsoft
Pascal Windows operating system and other Microsoft
C++ application programs dominate the market

New Application Software Object-Oriented Design

for Users Based on a hierarchy of data objects (i.e. Java)
Spreadsheets
Word processors World Wide Web
Database management Allows easy global communication through the
systems Internet

New Users
Today’s user needs no computer knowledge
1
7
20
Sharing information on the World wide Web
Computing as a Tool

Programmer / User

Systems Programmer Applications Programmer

(builds tools) (uses tools)

Domain-Specific Programs

User with No
Computer Background

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

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

 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

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

 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 25

 Growth of the Internet
Year Percentage of Global Population
Using the Internet

1995 0.4%
2000 5.8%
2005 15.7%
2010 28.10%
2015 42.4%

Source: http://www.internetworldstats.com/emarketing.htm

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

 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 27

 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 28

 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 29

 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 30

 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 31

 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?

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

 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 33

 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.

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

 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.

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

 Markup Languages (4)
HTML 5

◦ The next version of HTML4 and XHTML

◦ https://www.w3.org/standards/

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

 Popular Uses of the Internet
E-Commerce
Mobile Access
Blogs
Wikis
Social Networking
RSS
Podcasts
Web 2.0
Cloud Computing

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

 Web Development & Design
Foundations with HTML5
8th Edition

CHAPTER 2
KEY CONCEPTS

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

 Document Type Definition
Document Type Definition (DTD)
◦ doctype statement
◦ identifies the version of HTML contained in your
document.
◦ placed at the top of a web page document

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

 DTD Examples

XHTML1.0TransitionalDTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

HTML5DTD
<!DOCTYPE html>

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

 Hands-on Practice 1.1

9 Best Free HTML Editors for Windows for 2021

5 Best Free HTML Editors for Web Developers on macOS
How to Edit HTML With TextEdit
Work with HTML documents in TextEdit on Mac

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

 Example HTML5 Web Page

Title Element
Meta Element

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

 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 47

 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 48

Adding Head & Body Sections???
<head>

</head>

<body>

</body>

CTV: Posted by: Maddalena Matthew

http://mynews.ctv.ca/mediadetails/2045362?siteT=

Adapted for CIS 145 49

Modeling Hierarchy

• Tree structure
– Building blocks

– Parent-child relationship
• Link
• Inheritance

– Spatial position updated

on child object

Govil-Pai, S. (2004).
Adding Head & Body Sections???
<html>
<head>
<title> Hello
</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
</head>

<body>

</body>
</html>
Adapted for CIS 145 51
 Title Element
Meta Element

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

 Lab 1 (15 points)
9 Best Free HTML Editors for Windows for 2022
5 Best Free HTML Editors for Web Developers on macOS
How to learn HTML, CSS and web design on your Mac

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

 Lab 1 (15 points)
1. Open Notepad++ application.
2. Type this code.
3. Save your file using this naming convention
<html>
<head>
w1_yourLastname_FirstnameInitial.html (e.g.,
<title>Lab 01 </title> w11_LeeKJ.html). Your file name must end
</head> with .html showing a proper file
<body> extension/format.
Hello world 4. Add 11 more html tags instructed on following
</body> slides.
</html>

54
 Lab 1 (15 points)
A. Find a topic from a website. You must link/reference the website using
an anchor <a> tag.
B. In addition to basic <html> page construction, add following tags to get
a full marks.

1.Add minimum 4 Heading Element, <h1> to <h4>

2.<p> including align <p align="center">
3.<br>
4.<blockquote>
5.Add minimum 2 Phrase Elements, <b> <i> etc.
6.<ul>
7.<ol>
8.<dt> <dl>
9.Special Characters @
10.<a>
11.E-Mail Hyperlink

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

 1. Adding Heading Element using <h> tag

<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>

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

<h1 align="center">
<p align="center">

57
 2. Paragraph Element
Paragraph element
<p> …paragraph goes here… </p>

◦ Groups sentences and sections of text together.

◦ Block Display – Configures empty space above and

below

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

 3. 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

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

<h1 align="center">

<p align="center">

60
 4. 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

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

Copyright © Terry Felke-Morris http://terrymorris.net 62
 5. 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
<small> Legal disclaimers and notices (“fine print”) displayed in 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 63

 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 64

 HTML Lists

Unordered List
Ordered List
Description List
formerly called a definition list

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

 1. Modify your code (stylize lists),
and re-save it.

<ol type="A">

<ul type="square">

Adapted for CIS 145 66

 6. 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 67

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

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

 7. 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 69

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

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

 8. 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 71

 description.html

◦ <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 72

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

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

 9. 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 74

 10. Anchor <a> 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

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

 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 76

 11. 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 77