LIS3353 SP12 Week 8

Technologies

LIS 3353 – February 20, 2012 – Week 8

Agenda

 Debrief on HTML from midterm and
A4
 IT News
 IT in action – interdisciplinary!
 HTML validation today and Tuesday
 Tuesday: Assignment #6 will be
distributed & discussed
 Thursday: Quiz and group
presentations

IT News & Stuff

 Beating Moore's Law
 https://twitter.com/#!/Chiefkariuki

 http://www.codeacademy.com

LBS!
 http://www.airbnb.com

 http://www.relayrides.com

Attendance Check!

 On the blank side of the index card,
write the following:
– Your name
– Your FSU email address
 On the LINED side of the index card,
answer this question:
– How can location-based services impact
your life? Have you ever used such
services? Reference the sites we just
talked about.
 5 minutes – go!

Beyond HTML

 HTML 1.0 and 2.0
– 1989-> mid 90s
– Browser wars with different ―standards‖
 HTML 3.0
– 1995->
– Still 2 ways of doing things (IE and Netscape)
 HTML 4.0
– 1998->
– W3C intervenes to get rid of the discrepancies
– Proposed separating HTML into structure (HTML 4.0)
and presentation (CSS)

Beyond HTML

 HTML 4.01
– 1999->
– W3C rules adopted
– Current standard
– Birth of CSS but everyone not happy
 XHTML 1.0
– 2000->
– HTML (popular, browser-friendly) and XML
(strictness, extensibility)
– 7/26/06 – W3C released 8th draft of XHTML 2.0

Beyond HTML

 With the different types of code …
YOU have to tell the BROWSER
what to do OTHERWISE it uses a
default code
 We do this with DOCTYPES!

Beyond HTML (transitional)
 Now you have to ―prep‖ the browser
 <!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.01 Transitional//EN‖ ―http://www.w3.org/TR/html4/loose.dtd‖>

<HTML> is the first element
Standard is Publicly available

Using html 4.01 written in English
Transitional allows for legacy,
Non standard HTML to work
File at W3C that identifies
Not HTML executable code
standard

Beyond HTML
 <meta http-equiv=―Content-Type‖ content=―text/html; charset=ISO-8859-1‖>

Meta tells browser about
Content in page

Using an HTML file

Using a special character encoding
Latin-1 characters –
all European languages

Beyond HTML

 Standards make using browsers easier
 So…You told the browser that you are
using html 4.01 … But are you???
 Check using http://validator.w3.org
 If it passes … you are validated (sort
of)

Beyond HTML (strict)
 <!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.01//EN‖ ―http://www.w3.org/TR/html4/strict.dtd‖>

Transitional is gone!

We move to STRICT!

Check using http://validator.w3.org

Beyond HTML

So who cares?

 If it works – relax and enjoy!
 If not .. Go back and fix the pages
 Benefits
– Adheres to standards
– ADA compliance (alt attributes with images)

HTML 4.01

 Always start each page with a DOCTYPE
 <html> starts and </html> ends page
 Everything must go in <head> or <body>

 <head>
– Always use a <title>
– <meta> and <style> optional
 <body>
– <h?>, , <blockquote> allowed
– More rules (see a tutorial – w3c.org)

HTML 4.01

 4.01 is the widely supported
standard
 W3C defines ―standards‖
 Browsers will work with original
HTML but who knows for how long?

HTML 5

• HTML5 ≈ HTML 5 + CSS 3 + JavaScript
• HTML5 is a suite of tools for:
• Markup (HTML 5)
• Presentation (CSS 3)
• Interaction (DOM, Ajax, APIs)
• Brought on by the evolving use of the web

Example (old style)
<html>
<head>
<title>Singleton’s Page</title>
</head>
<body bgcolor="yellow" text="black">

As you can see by my performance, I can play with the big boys inside and fading
away. I am 6ft 9inches and weigh 220 lbs and I have
good leaping ability. So, here's why you should come seem me:

<ul>
<li>Stronger Upper Body
<li>Accuracy with free throws
<li>Ability to DUNK
</ul>

NOLES ROCK!
<center>This page brought to you by Warchant
Promotions</center>
</body>
</html>

Validator Results
 The following missing or conflicting information caused the validator to perform guesswork prior to validation. If the
guess or fallback is incorrect, it may make validation results entirely incoherent. It is highly recommended to check
these potential issues, and, if necessary, fix them and re-validate the document.
 Unable to Determine Parse Mode!
 The validator can process documents either as XML (for document types such as XHTML, SVG, etc.) or SGML (for HTML
4.01 and prior versions). For this document, the information available was not sufficient to determine the parsing mode
unambiguously, because:
– in Direct Input mode, no MIME Media Type is served to the validator
– No known Document Type could be detected
– No XML declaration (e.g <?xml version="1.0"?>) could be found at the beginning of the document.
– No XML namespace (e.g <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) could be found at the root of
the document.
 As a default, the validator is falling back to SGML mode.
 No DOCTYPE found! Checking with default HTML 4.01 Transitional Document Type.
 No DOCTYPE Declaration could be found or recognized in this document. This generally means that the document is
not declaring its Document Type at the top. It can also mean that the DOCTYPE declaration contains a spelling error, or
that it is not using the correct syntax.
 The document was checked using a default "fallback" Document Type Definition that closely resembles ―HTML 4.01
Transitional‖.
 Learn how to add a doctype to your document from our FAQ.
 ↑ Top
 Validation Output: 1 Error
 Line 1, Column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".<html> ✉
 The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a
fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is
highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are
given above -- and it is necessary to have this declaration before the page can be declared to be valid.

Second try (loose)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN―
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Singleton’s Page</title>
</head>
<body bgcolor="yellow" text="black">

As you can see by my performance, I can play with the big boys inside and fading away. I am 6ft 9inches and weigh 220 lbs and I have good leaping ability. So, here's why you
should come seem me:

<ul>
<li>Stronger Upper Body
<li>Accuracy with free throws
<li>Ability to DUNK
</ul>

NOLES ROCK!
<center>This page brought to you by Warchant Promotions</center>
</body>
</html>

Week 8

Validator Results (strict)

Validation Output: 8 Errors
Line 7, Column 14: there is no attribute "BGCOLOR".<body bgcolor="yellow"
text="black">
Line 7, Column 28: there is no attribute "TEXT".<body bgcolor="yellow" text="black"> ✉
Line 9, Column 105: there is no attribute "FACE".…e and fading away. I am 7ft 1inches and weigh 241 lbs</f ✉
Line 9, Column 112: element "FONT" undefined.…ading away. I am 7ft
1inches and weigh 241 lbs an ✉
Line 16, Column 10: there is no attribute "ALIGN". ✉
Line 18, Column 7: element "CENTER" undefined.<center>This page
brought to you by Warchant PromotionsThis page
Line 18, Column 26: element "FONT" undefined.<center>This page

SO NOW YOU GO FIX THESE!

XML (eXtensible Markup Language)

 A programming language/specification developed by the
W3C - pared-down version of SGML (standard general
markup language - IBM markup initiative)

 It enables Web authors and designers to create their own
customized tags to provide functionality not available with
HTML - XML is great for information exchange

 Widely used system for defining data formats, provides a
very rich system to define complex documents and data
structures such as invoices, molecular data, news feeds,
glossaries, inventory descriptions, real estate properties, etc.


 As long as a programmer has the XML definition for a
collection of data (often called a "schema") then they can
create a program to reliably process any data formatted
according to those rules

 ―The introduction of XML is in many ways like the creation
of writing in the evolution of language. People had spoken
language for a long period before they got to the point of
inventing writing. But as soon as they did, they were able
to make huge steps forward‖ – David Turner, MICROSOFT


 XML means ―Extensible Markup Language‖ - not fixed
format like HTML
 XML is a meta-language - a language for describing
other languages
 Enables you to define your own customized markup
languages for different classes of documents
 IBM, Microsoft, Oracle and Sun all agree: XML is the
key to e-business
 XML enables business application sharing, direct
transactions and other business applications
 Blending EDI (electronic data exchange) with HTML for
business

<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tom</to>
<from>Janice</from>
<heading>Reminder</heading>
<body>Don't forget the money!</body>
</note>

 Element
– delimited by angle brackets
– Identify the nature of the content they
surround
– General format: <element> … </element>
– Empty element: <empty-Element/>
 Attribute
– Name-value pairs that occur inside
start-tags after element name, like:
• <element attribute="value">

<h1> Bibliography </h1>
 Foundations of DBs, Abiteboul, Hull, Vianu
 Addison-Wesley, 1995
 Logics for DBs and ISs , Chomicki, Saake, eds.
HTML
 Kluwer, 1998

<bibliography>
<book> <title> Foundations of DBs </title>
<author> Abiteboul </author>
<author> Hull </author>
<author> Vianu </author>
<publisher> Addison-Wesley </publisher>
....
XML
</book>
<book> ... <editor> Chomicki </editor>... </book> ...

</bibliography>


http://xml.coverpages.o
rg/xmlApplications.ht
ml

 XML is a language
 It has types, structure, like any other programming language
 To start the PAGE!
– Declaration
• Includes
– A declaration: version, encoding, standalone
– An optional DTD (Document Type Definition )
• Example
– <?xml version="1.0" encoding="ISO-8859-1"
standalone="yes"?>

 NEXT – XHTML!

Meta Data Example

 http://www.richardjurban.net/dash
board/

Meta Data Example

 XHTML
– is aimed to replace HTML
– is almost identical to HTML 4.01
– is a stricter (hence the validator) and cleaner
version of HTML
 XML vs XHTML
– XML is a markup language designed for
describing data
– XHTML is HTML redefined as an XML
application
– XHTML is a ―bridge‖ between HTML and XML

XHTML (eXtensible Hypertext Markup Language)

 HTML started out as a way of way of
describing the structure of documents,
with tags to format
 Users demanded control over the
appearance of documents
 HTML acquired tags to control fonts,
alignment, etc.
 The result is a markup language that does
both, but is very messy

XHTML (eXtensible Hypertext Markup Language)

 XHTML elements must be properly nested
bold and italic is wrong
 XHTML documents must be well-formed
<html>
<head> ... </head>
<body> ... </body>
</html>
 Tag names must be in lowercase
 All XHTML elements must be closed
– , <hr />, <img src="smile.gif" />
– Note: Some browsers require a space before the
/
 Attribute names must also be in lower case
– Example: <table width="100%">
 Attribute values must be quoted
– Example: <table width="100%">

DTD (Document Type Definitions)

 Describes the syntax to use for the current
document
 There are three different DTDs for XHTML—
you can pick the one you want
– These DTDs are public and on the web
– You must start your XHTML document
with a reference to one of these DTDs
 Every XHTML document must begin with
one of the DOCTYPE declarations (DTDs)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">

 Strict - Use for really clean markup, with no display information
(no font, color, or size information) or use with CSS (Cascading
Style Sheets) if you want to define how the document should
look
 Transitional - Use with standard HTML and/or with CSS; Allows
deprecated HTML elements
 Frameset - Use if your document uses HTML frames

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN―
―http://www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd">
<html>
<head>
<title>A simple document</title>
</head>
<body>
A simple paragraph.
</body>
</html>

LIS3353 SP12 Week 8

More Related Content

What's hot

Similar to LIS3353 SP12 Week 8

More from Amanda Case

Recently uploaded

LIS3353 SP12 Week 8