Transcript xHTML
xHTML and Style History of the Internet • Internet has been around since the early 1960’s as part of a program with universities and the US government • Mosaic, the first graphic based browser, was developed in 1993. • Traffic on the Internet expands at a 341,634% annual growth rate. HTML vs xHTML • HTML is a subset of XML • XML has exact standards for structuring documents and presentations • HTML broke all the standards over the years and xHTML is a means of moving HTML back into XML standards HTML vs xHTML • Having standards allows xHTML to be more universal in its application • xHTML allows for “web pages” to be viewed on a growing number of platforms and devices including PDA’s and cell phones. HTML vs xHTML • xHTML allows you to separate the data from the presentation layer. • The presentation layer ensures that the communications passing through are in the appropriate form for the recipient • You no longer have a “flat document” HTML vs xHTML xHTML Fundamentals • • • • Markup Language Elements are xHTML instructions Attributes specify parameters Styles specify formatting xHTML document structure • xHTML tags need to be nested in order and tags properly closed <html> <head>[information about the document]</head> <body> [data to appear on browser page] </body> </html> xHTML Basics • Tags begin with opening brackets < > and are closed with closing brackets </ > • There are exceptions, e.g. The “break tag” - <br /> - open & close in one tag. • Creating an xHTML document is about planning for scalability • Spelling and typo’s count xHTML Basics • Get in the habit of typing in lower case • Do not use spaces in file names • Use underscores _ or dashes – in file names • Number files, documents, etc using 01, 02, 03,… instead of 1, 2, 3, … Proper numbering allows you to view files in order Correct Miss a number Disorder Creating Web Pages HTML/XHTML Intro File structure: Learning more about XHTML • xHTML will fully replace HTML • New standards will mean more will be done with Cascading Style Sheets in terms of presentation and design • Through the use of CSS and XML will make HTML obsolete. Colour on the Web • Image file formats – JPG (joint photographic group) – GIF (graphic interlace file) – PNG (portable network graphic) • RGB and Hex • 216 ‘Web-safe’ colors Cascading style sheets - CSS • A “language” separate from xHTML • CSS controls the style of xHTML elements. • Classes of xHTML elements can be created. • Basic xHTML code can be maintained • CSS can be managed separately from the xHTML documents CSS and xHTML • Separate CSS allows you to use xHTML tags for the purpose they are designed. • Its more about what the tags mean instead of what the effect. • Use tags for the intended original purpose – providing structure. Summary • HTML is a language to create or render web documents. • HTML is superceded by XHTML • HTML will be phased out over the next few years • HTML tags provide structure for information in a web page. Creating Web Pages HTML/XHTML Intro Users limited view: http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: Poor layout http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: too shallow http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: too deep http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: balanced http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: sequence http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: hierarchy http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: grid http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro Site Structure: web http://info.med.yale.edu/caim/manual/interface/navigation.html Creating Web Pages HTML/XHTML Intro http://info.med.yale.edu/caim/manual/interface/navigation.html