TechnologiesLIS 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
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 identifiesNot HTML executable code standard
Beyond HTML Now you have to ―prep‖ the browser <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) Now you have to ―prep‖ the browser <!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?>, <p>, <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?
Example (old style) <html> <head> <title>Singleton’s Page</title> </head> <body bgcolor="yellow" text="black"> <p> As you can see by my performance, I can play with the big boys inside and fading away. I am <font face="arial">6ft 9inches and weigh 220 lbs</font> and I have good leaping ability. So, heres why you should come seem me: </p> <ul> <li>Stronger Upper Body <li>Accuracy with free throws <li>Ability to DUNK </ul> <p align ="right"> NOLES ROCK! <center><font size="small">This page brought to you by Warchant Promotions</font></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"><p>As you can see by my performance, I can play with the big boys inside and fading away. I am <fontface="arial">6ft 9inches and weigh 220 lbs</font> and I have good leaping ability. So, heres why youshould come seem me:</p><ul><li>Stronger Upper Body<li>Accuracy with free throws<li>Ability to DUNK</ul><p align ="right">NOLES ROCK!<center><font size="small">This page brought to you by Warchant Promotions</font></center></body></html>
Week 8Validator Results (strict)Validation Output: 8 ErrorsLine 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 <fontface="arial">7ft 1inches and weigh 241 lbs</f ✉Line 9, Column 112: element "FONT" undefined.…ading away. I am <font face="arial">7ft1inches and weigh 241 lbs</font> an ✉Line 16, Column 10: there is no attribute "ALIGN".<p align ="right"> ✉Line 18, Column 7: element "CENTER" undefined.<center><font size="small">This pagebrought to you by Warchant Promotions</font ✉Line 18, Column 19: there is no attribute "SIZE".<center><font size="small">This pagebrought to you by Warchant Promotions</font ✉Line 18, Column 26: element "FONT" undefined.<center><font size="small">This pagebrought to you by Warchant Promotions</font ✉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.
XML (eXtensible Markup Language) 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 (eXtensible Markup Language) 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 (eXtensible Markup Language) <?xml version="1.0" encoding="ISO-8859-1"?> <note> <to>Tom</to> <from>Janice</from> <heading>Reminder</heading> <body>Dont forget the money!</body> </note>
XML (eXtensible Markup Language) 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">
XML (eXtensible Markup Language)<h1> Bibliography </h1><p> <i> Foundations of DBs</i>, Abiteboul, Hull, Vianu<br> Addison-Wesley, 1995<p> <i> Logics for DBs and ISs </i>, Chomicki, Saake, eds. HTML<br> 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>
XML (eXtensible Markup Language)http://xml.coverpages.o rg/xmlApplications.ht ml
XML (eXtensible Markup Language) 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 <b><i>bold and italic</b></i> 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 – <br />, <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)
DTD (Document Type Definitions) <!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
DTD (Document Type Definitions) <!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> <p>A simple paragraph.</p> </body> </html>