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



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



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



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



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



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)



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.



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.



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



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/



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



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



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

Date post:	08-Apr-2018
Category:	Documents
Upload:	shadro
View:	240 times
Download:	0 times

Section1 Notes

Documents