web development & design foundations wtih html5, 8th...
TRANSCRIPT
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
5
LMS Learning Objects to look at:
- WELCOME – PLEASE READ & RESPOND!
- SPECIAL PASSES!
- LINKS TO WEEKLY QUIZZES (QUICK
CHECKS)
- NOTES / ERRATA
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
Copyright © Terry Felke-Morris http://terrymorris.net
Web Development & Design Foundations with HTML5
CHAPTER 1INTRODUCTION 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
10
Copyright © Terry Felke-Morris http://terrymorris.net
Internet
The interconnected network of computer networks that spans the globe.
11
Copyright © Terry Felke-Morris http://terrymorris.net
The World Wide Web
The graphical user interface to information stored on computers running web serversconnected to the Internet.
12
Copyright © Terry Felke-Morris http://terrymorris.net
Intranet & ExtranetsIntranet
◦ 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
13
Copyright © Terry Felke-Morris http://terrymorris.net
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
14
Copyright © Terry Felke-Morris http://terrymorris.net
Web AccessibilityAccessible 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/
15
Copyright © Terry Felke-Morris http://terrymorris.net
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
16
Copyright © Terry Felke-Morris http://terrymorris.net
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
17
http://www.ncsu.edu/www/ncsu/design/sod5/cud/about_ud/about_ud.htm
Copyright © Terry Felke-Morris http://terrymorris.net
Network OverviewNetworktwo or more computers connected together for the purpose of communicating and sharing resources
18
Copyright © Terry Felke-Morris http://terrymorris.net
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.
19
Copyright © Terry Felke-Morris http://terrymorris.net
The Client/Server ModelClient/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
20
Copyright © Terry Felke-Morris http://terrymorris.net
The Internet Client/Server Model
Client – Web Browser
Server – Web Server
21
Copyright © Terry Felke-Morris http://terrymorris.net
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
22
Copyright © Terry Felke-Morris http://terrymorris.net
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
23
Copyright © Terry Felke-Morris http://terrymorris.net
Internet ProtocolsProtocols
◦ 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.
24
Copyright © Terry Felke-Morris http://terrymorris.net
FTPFile 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.
25
Copyright © Terry Felke-Morris http://terrymorris.net
E-mail Protocols
Sending E-mail◦ SMTP Simple Mail Transfer Protocol
Receiving E-mail◦ POP (POP3) Post Office Protocol◦ IMAP Internet Mail Access Protocol
26
Copyright © Terry Felke-Morris http://terrymorris.net
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.
27
Copyright © Terry Felke-Morris http://terrymorris.net
TCP/IPTransmission 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.
28
Copyright © Terry Felke-Morris http://terrymorris.net
TCPTransmission Control Protocol
Purpose is to ensure the integrity of communication
Breaks files and messages into individual units called packets
29
Copyright © Terry Felke-Morris http://terrymorris.net
IPInternet 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
30
Copyright © Terry Felke-Morris http://terrymorris.net
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.
31
Copyright © Terry Felke-Morris http://terrymorris.net
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
32
Copyright © Terry Felke-Morris http://terrymorris.net
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.
33
Copyright © Terry Felke-Morris http://terrymorris.net
TLDTop-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
34
Copyright © Terry Felke-Morris http://terrymorris.net
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.
35
Copyright © Terry Felke-Morris http://terrymorris.net
Markup LanguagesXML – 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.
36
Copyright © Terry Felke-Morris http://terrymorris.net
Markup Languages
HTML 5
◦ The next version of HTML4 and XHTML
◦ http://www.w3.org/html/◦ http://www.w3schools.com/html/html5_intro.asp
37
Copyright © Terry Felke-Morris http://terrymorris.net
Web Development & Design Foundations with HTML5
CHAPTER 2HTML BASICS
38Copyright © Terry Felke-Morris
Copyright © Terry Felke-Morris http://terrymorris.net
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
39
Copyright © Terry Felke-Morris http://terrymorris.net
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.
40
Copyright © Terry Felke-Morris http://terrymorris.net
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.
41
Copyright © Terry Felke-Morris http://terrymorris.net
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!
42
Source: W3C http://www.w3.org/html/logo/
Copyright © Terry Felke-Morris http://terrymorris.net
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>
43
Copyright © Terry Felke-Morris http://terrymorris.net
Head & Body Sections
Head SectionContains information that describes the web page document <head>
…head section info goes here
</head>
Body SectionContains text and elements that display in the web page document<body>
…body section info goes here
</body>
44
Copyright © Terry Felke-Morris http://terrymorris.net
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>
46
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
Paragraph ElementParagraph element
<p> …paragraph goes here… </p>
◦ Groups sentences and sections of text together.
◦ Block Display – Configures empty space above and below
47
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
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
48
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
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
49
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
Phrase ElementsIndicate the context and meaning of the text
50
Element Example Usage
<b> bold text Text that has no extra importance but is styled in bold font by usage and convention
<em> emphasized text
Causes text to be emphasized in relation to other text; usually 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> small text 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> sup text Displays a superscript as small text above the baseline
Copyright © Terry Felke-Morris http://terrymorris.net
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
51
Copyright © Terry Felke-Morris http://terrymorris.net
HTML Lists
Unordered List
Ordered List
Description Listformerly called a definition list
52
Copyright © Terry Felke-Morris http://terrymorris.net
Unordered ListDisplays a bullet, or list marker, before each entry in the list.
<ul>
Contains the unordered list
<li>
Contains an item in the list
53
Copyright © Terry Felke-Morris http://terrymorris.net
Unordered List Example<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
54
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
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
55
Copyright © Terry Felke-Morris http://terrymorris.net
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
56
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
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/sentenceConfigures 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
57
Copyright © Terry Felke-Morris http://terrymorris.net
Description List Example<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
58
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
Special Characters
Display special characters such as quotes, copyright symbol, etc.
Character Code
© ©
< <
> >
& &
59
Copyright © Terry Felke-Morris http://terrymorris.net
Div ElementConfigures 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>
60
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
HTML5 Structural Elementsheader 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
61
Copyright © Terry Felke-Morris http://terrymorris.net
HTML5StructuralElements
<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>
62
Copyright © Terry Felke-Morris http://terrymorris.net
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
63
Demo
Copyright © Terry Felke-Morris http://terrymorris.net
Absolute & Relative HyperlinksAbsolute 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>
64
Copyright © Terry Felke-Morris http://terrymorris.net
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>
65
Copyright © Terry Felke-Morris http://terrymorris.net
Writing Valid HTMLCheck your code for syntax errors◦Benefit:
◦Valid code more consistent browser display
W3C HTML Validation Tool◦http://validator.w3.org
66
Put <!DOCTYPE html> as first line in html file (HTML5)