Section1 Notes
Transcript of Section1 Notes
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 1/13
## SECTION 1 - INTRO ##
History of the InternetWorld Wide Web
URL
HTML Basics
WEB languagesClient-side
Server Side
Internet Protocols
Internet ServicesConnection
Web Communication2-tier client/server
3-tier client/server
HTMLSyntax
Structure and formatting tags
Head tag
Simple PageElement minimization
Document naming (extensions, characters)Extensions
VIEWING IN BROWSER
Code Protocol/RULES
Attributes
SIMPLE PAGE/FORMATTINGView html from browser
Comments
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 2/13
History of the Internet• data highway - fiber-optic cables and other physical links con-
necting servers around the world
• developed in 1960s by US department of Defence
• data flows in packets in undetermined paths- non-web formats must be compressed (eg. email attachments)
• 1990-91 -- Tim Berners-Lee created what would become the
World Wide Web with a system able to cross-reference docu-
ments -- Hypertext Linking
• The World Wide Web is NOT the internet, it is only a part
• Internet also made up of email systems, FTP...
URL• Uniform Resource Locator (or web address)
• refers to location of web page on the internet
HTML Basics
• language which allows information on the web to be displayedin a browser (IE)
• internet standard since 1993 (version 1.0)
• HTML 4.0 introduced by W3C in 1997 (final)
• quick little hypertext language developed by Tim Berners-Lee
• written in ASCII characters
• text-based = any editor or word processor can create (or export)
• any platform can read• has become very loose and sloppy - restricts expansion
page 6
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 3/13
Triad of client-side web development
1 HTML (XHTML) ----- content
2 CSS ------ presentation or layout
3 JavaScript -------- functionality or calculations
Each resides in their own file.
The HTML file links everything together for the browser.
Server-side
Languages• PHP - very common - inexpensive
• SQL (database)
• ASP (Active Server Pages)
• Java Servlets (future technology)
• PERL
• JSP (Java Server Pages)
• C++/Java• VBScript
New Languages and tools• Ajax (JavaScript + XML) - client side
• WMLScript (for user agents/phones)
• jQuery (javascript library)
page 7
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 4/13
HTML
• based on older language, SGML (Standard Generalized Markup)
• using standard tags to describe data
• data defined independent of how it displayed
- depends on target output format (web page, online help sys.)- not meant for design, but has evolved due to demand
• won’t work in PDAs, mobile phones, etc. -- too loose
HTML 2.0 HTML 3.2 W3C HTML 4.0 XHTML 1.0
_________ ________ _____ ________ _________
1995 1997 1998 1999 2000(user-based) (browser mfg (web stds) (stabalized (more structured)
making own tags) project) the language)
XML• unconstrained tags - created by description
• good for e-commerce sites - match database headings
• W3C decided this was the way of the future -- XHTML created
page 8
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 5/13
page 9
XHTML - Standards-based web• solve common problems, everyone doing the same
• Designers and developers must learn how to use standards; site
owners must be told how standards can help their business.
• “There could be no filmmaking without industry-wide agree-ment on frame rates, lenses and audio recording techniques.”
• Older browsers ignore standards – tried to be different (IE/
Netscape war)
• Certain code to write for IE and different code to write for
Netscape
• Sites cost less, work better and reach more people
HTML 5.0
• 2007 work begins on replacement for XHTML 2.0• takes into account richer media requirements of future web and
mobile devices
• driven mostly by Apple and Google
• better serve video and audio, blogs, applications
• smart phones and other devices currently support
• backwards compatible with older versions of HTML
• reduce need for 3rd party tools and plugins
Anything developed with XHTML will be clean and error free and also
supported by HTML 5
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 6/13
page 10
ishtml5readyyet.com
• 2009 last call for comment
• 2010 working draft in last call
• some parts of the draft are more mature than others
• increasing number of devices and browsers supporting
findmebyip.com
First compliant browser was IE5/Mac1 Developed by Tanek Celik at Microsoft – eager, passionate
2 Innovated and progressive
3 Microsoft halted project and disallowed further development
4 It made IE/Windows look like a crippled brother. (true story)
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 7/13
page 11
World Wide Web Consortium (W3C)1 Founded in 1994
2 http://www.w3.org
3 create specifications and guidelines to promote the web’s
evolution and ensure that web technologies work together
4 Approx 500 members; Founder, Tim Berners-Lee (http://
www.w3.org/People/Berners-Lee); invented WWW in 1989
What is Validation?Validation is a process of checking your documents against a for-
mal Standard, such as those published by the Worldwide Web
Consortium (W3C) for HTML and XML-derived Web docu-
ment types, or by the WapForum for WML, etc. It serves a simi-
lar purpose to spellchecking and proofreading for grammar and
syntax, but is much more precise and reliable than any of those
processes.
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 8/13
page 12
Why Validate?Non-valid pages are (by definition) relying on error-correction
by a browser. This error correction can and does vary radically
across different browsers and versions
When you buy a household electrical appliance, you can choose from a range
of options. You don't need to ask "does the power supply in my house sup-
port Hoover or Electrolux[1]"; you know it supports both, and you are free to
choose. That's because there is a standard for mains power, that is observed by
everyone concerned - the manufacturers, the power supplier, and the electri-
cian who wired your house.
Exactly the same argument applies to the Web, unless some-
one subverts it. The difference is that fewer end-users have the
confidence to make a fuss when they've been sold a dud. Valid
markup is one of the standards that make it work.- http://valet.htmlhelp.com/page/why.html
Benefits of Standards-based markup:
1 Sites rank higher in search engines2 International, wide-spread compatibility
3 Faster load
4 No multiple browser/version sites
5 Forward compatibility
6 Accessible to special needs (accessibility-related litigation?)
7 Easier maintenance
8 Design for all browsers as easily as designing for one9 More precise control over layout, placement and typography
10 Develop sophisticated behaviors that work across browsers
and platforms
11 Redesign in hours, rather than weeks – reduce cost/grunt
work.
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 9/13
page 13
Forward compatibility vs Backward Compatibility
1 Forward Compatibility
a. Done correctly, web page can work across
multiple browsers, platforms and internetdevices — and will continue to work as new
browsers and devices are invented
b. Open standards
2 Backward Compatibilitya. Supporting all users???
b. Using non-standard, proprietary markup and code toensure that every visitor has the same experience.
c. Sounds great in theory, but the cost is too high andpractice is based on a lie
d. There is no true backward capability; always a cutoff point
e. Developers must write multiple scripts to accommo-date the browsers they’ve chosen to support
f. Create browser detection
g. High server loads; high cost; hard to update or change
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 10/13
page 14
Accessibility for Ontarians with Disabilities Act
Accessibility Standards for Customer Service
In 2005, Ontario passed into law the Accessibility for Ontarians withDisabilities Act (AODA). Under the AODA, businesses and organiza-
tions that provide goods and services, including Ontario’s 24 Colleges
of Applied Arts and Technology, will have to meet accessibility stan-
dards with the goal of making Ontario fully accessible by 2025.
The first standard developed under the act is the Accessibility Standards
for Customer Service. Other standards are expected to cover:
• Transportation.• Information and Communications.
• Employment.
• The Built Environment – interior / exterior of buildings.
“In a misguided effort to reduce expenses, an increas-ing number of sites are designed to work only in
Internet Explorer” on the Windows platform, thus
locking out up to 25% of therir potential visitors or
customers—325 million people!(2005 - Jeffrey Zeldman)
http://www.zeldman.com/
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 11/13
page 15
Presentational markup1 control how the html displays in the browser:
<font><bold><table><italic>,etc
2 doubles the bandwidth needed to view or serve a page while
making that page less accessible to search engines and non-
traditional browsers and devices — inconsistent rendering
99% of websites are obsolete“These sites might look and work all right in mainstream, desk-
top browsers. But outside these fault-tolerant environments, the
symptoms of disease and decay have already started to appear.”
Web development references
Browsers:http://www.w3schools.com/browsers/browsers_stats.asp
http://browsershots.org/
http://www.cnn.com/2009/TECH/08/06/internet.explorer.six/
http://www.zeldman.com/2009/05/21/a-new-answer-to-the-ie6-question/
http://sixrevisions.com/web-development/definitive-guide-to-taming-the-
ie6-beast/
http://techcrunch.com/2010/01/29/google-twists-knife-in-ie6-pulls-sup-port-from-docs-and-sites/
Compliance and accessibility:http://www.webstandards.org/learn/articles/current-browsers-uaag10/
http://www.davyanddavy.co.uk/accessibility.php#external
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 12/13
HTML Structure and formatting tagsTAG DESCRIPTION
<b> </b> bold typeface
<body> </body> encloses body of html document
<br> line break<center> </center> centers enclosed text
<head> </head> encloses header content
<h1> </h1> values 1 through 6 - heading level tags
<hr> horizontal rule
<html> </html> starts and ends an html document
<i> </i> italic typeface
<img src="..."> displays an image file
<p> </p> paragraph
<strong> </strong> formats strong typeface (similar to bold)
<sub> </sub> subscript
<sup> </sup> superscript
<u> </u> underlined
<title> </title> must be in the <head> tag;
1) book-marked,
2) displays at top of page,
3) spidered by most search engines.
page 16
8/6/2019 Section1 Notes
http://slidepdf.com/reader/full/section1-notes 13/13
Simple html page
<html>
<head><title>Hello World</title>
</head>
<body><h1>Hello World (this is a heading 1 tag)</h1>
<h3>Today is Friday (this is a heading 3 tag)</h3>
<h2>This line is formatted with the heading 2 tag</h2>
<center>This line is centered</center>
<p>This body text line contains several character formatting tags including
<i>italics</i>, <b>bold</b>, and <u>underline</u>. The following code cre-
ates a line break followed by a horizontal rule:<br>
<hr><img src="teddybears.gif">This line contains an image.
</body>
</html>
Viewing in the Browser
Element Minimization for HTML• most tags travel in pairs
• in HTML you can omit the closing tags for some and it will still
work.
• <hr> <p> <img>
• in XHTML, this is not be possible. All tags must close
File naming1) no capitals
2) no spaces
3) no special characters (%, #, ", =, etc.)
4) must have an extension (lower case) (for html files / images)
5) use an underscore or hyphen to separate words
page 17