Good-bye Cruel World! <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> XHTML: An Introduction � <title>My first HTML document</title> </head> <body> <h2>My Very First HTML Document</h2> <p> Prof. Ing. Andrea Omicini � Good-bye, <i> Cruel World </i>! </p> Ingegneria Due, Università di Bologna a Cesena <!-- "Hello World" did not seem enough --> <p> andrea.omicini@unibo.it � Hi from <a href="http://www.ing2.unibo.it/">Cesena</a>! </p> 2006-2007 <p> � Page written by: <cite>Andrea Omicini</cite> � <br /> � © of the Author </p> </body> </html> 2 We Obtain... What is HTML? It is a markup language allows you to annotate text, and to embody annotations in along with text in a document annotations provide text with properties e.g., printing properties as annotations, in order to separate them from content SGML subset Standard Generalized Markup Language A family of standards W3C: consortium in charge of Web standards http:/ /w3c.org/Markup Develops over time either official or proprietary extensions proposals, drafts, releases and recommendations 4 Versions From 1.0, 2.0, 3.2, 4.0 to 4.01 HTML 4.01 is the last recommendation http:/ /www.w3.org/TR/html4/ XHTML 1.0 current standard defined based on HTML 4.01 as more or less its XML-compliant version http:/ /www.w3.org/TR/xhtml1/ XHTML 2.0 still ongoing work http:/ /www.w3.org/TR/xhtml2/ 26/7/2006: last public Working Draft of XHTML 2.0 has been published http:/ /www.w3.org/TR/2006/WD-xhtml2-20060726 5
HTML / XHTML From SGML to HTML Document Suffix .html (or .htm, for windoze fault) Text file How can I create my own HTML file? SGML is a very intricated markup language with any text editor, saving text with .html suffix Web needs just a subset of it with any word processors allowing “Save as Text” SGML is also a meta-markup language with any web-page creation tool can be used to define other markup languages Composer, Dreamweaver, etc. by defining their own DTD (Document Type Definition) please no FrontPage HTML is defined via a SGML DTD How does computer see the HTML file? http:/ /www.w3.org/TR/html4/sgml/dtd.html in the same way as we do? different levels of “perception” OS � editors � browsers � … 7 8 Elements, Tags & Some Details Attributes An HTML document contains elements & sections delimited by tags Generally, tags delimit start & end of a section / element <tag>section or element</tag> White spaces have no meaning if not within strings it is obviously useful to learn the main HTML tags HTML is not case sensitive Tags may contain further specifications called attributes <p> or <P>, it is the same some of them required , some optional Please notice: the same does NOT hold for XHTML! <img src=”mypicture.jpg”/> <p> is correct, <P> is wrong src is mandatory no closing tag, /> is used Remind: tags and elements are in general different things <p> is a tag, <p>Paragraph</p> is an element 9 10 Types of Tags Section Tags dividing HTML document in sections root tag <html> starts HTML document Section tag may not be the beginning of the HTML file… Header tag </html> ends it Content tag while the file might go on… Styling tag 2 sections: Header & Body Empty elements (?) <html> Anchor / Hyperlink tags <head> … </head> <body> … </body> </html> 11 12
Header tags Content tags within the header, between <head> and </head> within the body, between <body> and </body> not diplayed directly by the browser used by browser for display most of the useful tags main header tags <p> for paragraphs <title> defines page title <table> for tables in the title bar of the browser window <meta /> carries meta-information on the document <h1> for 1st-level headers content <h2>, <h3>, … next levels comments e.g.: <meta name=”author” content=”Andrea Omicini” /> like a comment, but can be referenced and used <!-- this is a comment --> 13 14 Styling tags Empty tags In XHTML two kinds <br /> line break based on the content nature <hr /> horizontal rule based on formatting <img /> inline image content-based: examples In HTML , <br> & <hr> are ok <blockquote> contains a block for a quotation in XHTML they should be “closed” somehow <cite> contains a reference to a citation Pay attention to attributes! format-based: examples required & optional <b> bold, <i> italic e.g., attribute src in img is required sometimes no differences in display by browsers take a close look to specifications <em>, <cite>, <i>, <dfn> check when needed but the source shows the differences in markup exploit tools! that could be used anyway for some reasons along with their embedded knowledge 15 16 Anchor / Hypertext tags Limits of HTML (1) tag <a> for both Content intermixed with presentation “anchor” denotes portions of a document from 1.0 to 4.01 things have improved to be directly referred to with # but too many biases from browsers “hypertextual reference” denotes other docs to be absolutely AVOIDED or portions of them in general obviously contains an URL here in this course for sure :) <a name=”NAME”>…</a> Not “well-formed” <a href=”URL ”>…</a> as XML is instead relative / absolute URL too much forgiving <a href=”URL#NAME”> denotes an anchor within an elements can be interleaved, tag can be wrong, closing tags href or attributes may be missing, etc… Pay attention to quotes! 17 18
Limits of HTML (2) XML in short It is more a sort of “structural” markup language describes text structure structural markup Extensible markup language rather than the nature of content to define markup languages descriptive / semantic markup XML application not easy to adapt to the different natures of media a markup language defined via XML That is why HTML moved toward XML XHTML is an XML application through XHTML Essential remark: XML has no predefined tag / elements Goal: a language aimed at being anyone can define tags and structures that better fits disciplined and easy to check the chosen contents powerful but simple descriptive 19 20 Fundamental Parts of a Benefits of XML XML Document Portable 1. XML Document (properly said) text format, so that any platform is ok, and many content built according to XML rules applications are available to read & write XML 2. Document Type Definition (DTD) Configurable / Extensible which tags and their meaning anybody can define his/her own markup language 3. Style Sheet Self-descriptive for presentation an XML document is self-contained: presentation, meaning, data & their structure 21 22 XHTML = HTML + XML XHTML - HTML = ? XML Prologue XHTML defined using XML as a meta-language first element of the XHTML document HTML defined instead in SGML <?xml version="1.0" encoding="UTF-8"?> like corresponding <meta /> for old browser vocabulary taken from HTML, syntax from XML Document type declaration backward compatibility what is the document DTD? in particular, in the “human legacy” <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" XML properties "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> address, or embedded DTD well-formed, not error-prone, extensible via XML both before <html> tag 23 24
What should we learn Other differences from the lab activity? Recommendation: define the namespace Structure of the HTML / XHMTL document to give meaning to tags header, body, and their content we could write Inline elements, comments, lists, special chars <http://www.w3.org/1999/xhtml:p> for <p> tag Attributes and then the same all the others… shared by most elements however, it seems easier to write attributes to affect presentation <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> also, we could add our namespaces Anchors / Hypertextual references and declare the languages Images Other Tables case sensitivity Forms full nesting Frames, perhaps required elements: <head>, <body>, <html>, <title> 25 26
Recommend
More recommend
