1. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2016 by Pearson Education, Inc. All rights reserved.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

2. Chapter 8 Introduction to HTML
Part 1
Terms
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

3. In this lecture, you will learn:
Common terms in Web technologies that you need to know before learning how to create Web pages
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

4. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Terms
Web pages Documents that are written in a language called HTML
HTML Stands for Hypertext Markup Language
HTML Markup tags Special codes that tell the Web browser how to display the HTML document
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

5. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Terms
Web browser
An application that can interpret HTML and display the document in the format and layout according to the markup tags
Examples: Firefox, Internet Explorer, Safari, Chrome, Opera
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

6. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Terms
HTML Document
A plain text file, that can be created using:
a text editor (Notepad in Windows, or TextEdit in Mac OS)
a Web page editor
Web page editor
Example: Adobe Dreamweaver
Allows you to create and edit the page visually without having to manually add markup tags
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

7. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Term
URL
Stands for Uniform Resource Locator
This is the standard for specifying the address of Web pages and other resources on the World Wide Web
Example:
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

8. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
URL
Example:
The address is made up of segments of standard information:
http stands for Hypertext Transfer Protocol
The protocol specifies a set of rules that govern how the information transfer between the Web server and the Web client (the computer that requests to view the page)
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

9. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
URL
Example:
The address is made up of segments of standard information:
This is the domain name of the Web server
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

10. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
URL
Example:
The address is made up of segments of standard information:
departments/compsci/index.html
This is the file path of the document index.html
The file path is the location information of the page on the Web server
In this example, the document index.html is in a folder called compsci, which in turn is located in a folder called departments
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

11. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Term
XHTML
Stands for Extensible Hypertext Markup Language
Intended to be a replacement for HTML
Most of the tags are the same as those in HTML
Has stricter rules for writing HTML
These stricter rules are also supported but not enforced in HTML
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

12. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Term
Cascading Style Sheets (CSS)
Widely used for Web page design and layout
Style sheets allow you to define styles to display HTML elements
Multiple style definitions can be combined or cascaded into one—thus the term cascading style sheets
Style sheet files are text files
The styles defined in the files follow specific rules and syntax
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

13. Cascading Style Sheets (CSS)
Example:
h1 {
margin-bottom: -0.5em; }
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
a {
text-decoration: none;
a:visited {
color: #CC9900;
a:link {
color: #CC3300;
.mycode {
font-family: "Courier New", Courier, monospace;
color: #666666;
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

14. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Term
JavaScript
A scripting language for Web pages
Can be used to:
add interactivity
generate content on the Web page based on the viewer’s choice
validate online forms before submission
create and track cookies
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

15. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Term
HTML 5
The newest standard of HTML
Its specifications are still a work in progress (at the time of writing the book)
New features of HTML 5 include:
video and audio tags
content-specfic tags: footer, header, nav, article, section, figure, summary, aside
tags for form elements
canvas element:
allows drawing graphics and displaying images dynamically using JavaScript
commonly used for HTML 5 game development
allowing storage and retrieval of data on the user's device using JavaScript
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

16. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Questions
Note to instructor:
Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

17. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
HTML stands for ___.
Hypertext Markup Language
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

18. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
XHTML stands for ___.
Extensible Hypertext Markup Language
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

19. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
CSS stands for ___.
Cascading Style Sheets
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

20. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
HTML documents are ___.
text files
JPG files
PSD files
MP3 files A
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

21. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
True/False: HTML documents are plain text files.
True
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

22. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
HTML documents are plain text files. So how do they make the Web browser to display text formatting with certain page layout?
Use of HTML markup tags to tell the browser how to display the text format and page layout.
(Also OK: if mention use of CSS)
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

23. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
For the URL:
The domain name of the Web server is ___.
This URL is a Web address of a file named ___.
This file is located in the folder named ___, which is inside another folder named ___. i.
ii. index.html
iii. art, departments
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

24. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Documents that are written in a language called HTML.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5
F and K
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

25. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Special codes that tell the Web browser how to display the HTML document.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5 C
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

26. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Application programs such as Firefox, Internet Explorer, Safari, Chrome, and Opera.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5 D
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

27. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Application programs such as Adobe Dreamweaver.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5 E
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

28. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
A standard address for Web pages and other resources on the World Wide Web.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5 G
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

29. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Intended to be a replacement for HTML and has stricter rules than HTML.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5 H
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

30. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Style sheets that define styles to display HTML elements. Multiple of such style sheets can be combined.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5 I
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

31. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
A scripting language for Web pages.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5 J
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

32. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
Currently the newest standard of HTML.
Which of the following terms match the description above?
Web pages
HTML
HTML Markup tags
Web browsers
Web page editors
HTML documents
URL
XHTML
Cascading Style Sheets (CSS)
JavaScript
HTML 5 K
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.