5. Wri Ng for the Web: HTML and XHTML Dr. Dave Parker

5. Wri'ng for the web: HTML and XHTML Dr. Dave Parker Informaon and the Web, 2014/15 1 Today • XML/DTDs (and Assm. 1) – brief recap/ques'ons • Wri'ng for the web – XHTML vs HTML; XHTML basics 2 XML/DTDs (and Assm. 1) • XML/DTDs – general 'ps – use a clear and sensible document structure – follow good principles • don't mix informaon, avoid redundancy, … – think about: • normalisaon, aributes vs. child elements – think ahead to larger, more complex data sets • Assessment 1 – don't forget to validate (XML and DTD) – look at the exercises (and their solu'ons) 3 Today • Wri'ng for the web – XHTML vs HTML; XHTML basics • Good prac'ces: – structured documents: seman'cs, styling – content vs. presentaon – adding metadata 4 HTML & XHTML • HTML: Hypertext Markup Language – basic language for wri'ng web pages/documents – World Wide Web Consor'um (W3C) standard – various versions: 1.1 (early 90s), …, 4.01 (1999), 5 (latest) • XHTML: Extensible HTML – reformulaon of HTML 4 in XML (i.e. same elements, aributes, …) – cleaner, stricter syntax + addi'onal rules – goals: extensibility, interoperability with other formats 5 Example: HTML <html>! <head>! <title>A Simple Example</title>! </head>! <body>! <h1>Some Simple HTML</H1>! <p>This page contains some examples of <b>elements</b>" that are commonly used in HTML documents, including:! <ul>! <li>Headings! <li>Paragraphs! <li>Unnumbered lists! <li>Bold Text! <li><IMG src=images.png>! </ul>! </body>! </html>! 6 Example: HTML <html>! <head>! <title>A Simple Example</title>! </head>! <body>! <h1>Some Simple HTML</H1>! <p>This page contains some examples of <b>elements</b>" that are commonly used in HTML documents, including:! <ul>! <li>Headings! <li>Paragraphs! <li>Unnumbered lists! <li>Bold Text! <li><IMG src=images.png>! </ul>! </body>! </html>! • Does this display correctly in a browser? • Is it XML? Is it XHTML? 7 Example: HTML <html xmlns="http://www.w3.org/1999/xhtml">! <head>! <title>A Simple Example</title>! </head>! <body>! <h1>Some Simple HTML</h1>! <p>This page contains some examples of <b>elements</b>" that are commonly used in HTML documents, including:</p>! <ul>! <li>Headings</li>! <li>Paragraphs</li>! <li>Unnumbered lists</li>! <li>Bold Text</li>! <li><img src="images.png" alt="Images" /></li>! </ul>! </body>! </html>! • Does this display correctly in a browser? Yes • Is it XML? Is it XHTML? No: 8 (types of) errors 8 HTML vs XHTML • Syntac'c differences – XHTML needs all elements to be closed (even empty ones) – XHTML needs quotaon marks around aribute values – XHTML is case-sensi've (e.g. start/end tags must match) – XHTML requires lower-case element/aribute names – XHTML requires: <html>, <head>, <body>, DOCTYPE 9 HTML vs XHTML • Which is best? • Consistency between (many) browsers? – XHTML has cleaner, stricter syntax – but un'l recently, not fully supported in some browsers • Easier to parse? – web browsers are very lenient anyway – but also: search engine crawlers, screen readers, … • Easier for extending/embedding? – e.g. MathML, SVG (vector graphics) – e.g. RDFa (seman'c web) 10 HTML 5 • Official next-generaon HTML standard – currently a W3C Candidate Recommendaon – i.e. not yet official, no browsers fully support • Aims: – improve support for mul'media – complex web applicaons (without Flash, etc.) – cross-plaorm mobile applicaons – single markup language writable in both HTML/XHTML • combines both HTML (v.4) and XHTML (v.1) • Notable syntac'c addi'ons – <canvas>, <video>, <audio>, seman'c markup, forms, … 11 XHTML: Basic structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">! ! <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">! !<head>! !!...! !</head>! !<body>! !!...! !</body>! </html>! • XML declaraon (<?xml … ?>) is op'onal – can cause some problems with old browsers • DOCTYPE specificaon – 3 types for (X)HTML: Strict, Transi'onal, Frameset – we will use Strict (e.g. no presentaon markup) 12 XHTML: Basic structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">! ! <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">! !<head>! !!...! !</head>! !<body>! !!...! !</body>! </html>! • Root element: <html> – namespace (needed), language (op'onal) • Two child elements (both needed) – <head>: page info (not shown in page) – <body>: main content of page 13 <head> • Typical contents – 'tle, metadata, external file links, JavaScript • Example Required <head>! !<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />! !<title>BBC News - Home</title>! !! !<meta name="Description" content="Visit BBC News for up-to-the-minute news, breaking news, video, audio and feature stories. BBC News provides trusted World and UK news as well as local and regional perspectives. Also entertainment, business, science, technology and health news."/>! !<meta name="OriginalPublicationDate" content="2013/01/21 12:12:03"/>! !...! ! !<link rel="stylesheet" type="text/css" href="http://static.bbci.co.uk/ frameworks/barlesque/2.23.3/desktop/3.5/style/main.css" /> ! !<script type="text/javascript"> ... </script>! !<script type="text/javascript" src="http://static.bbci.co.uk/ frameworks/barlesque/2.23.3/desktop/3.5/script/barlesque.js"></script>! ! 14 XHTML: Main elements • 2 types of elements: block-level, inline • Block-level elements (new line before/aer) – headings (e.g. <h1>), paragraphs (<p>), horizontal rule (<hr />) lists (<ul>,<ol>,<li>), pre-formaed (<pre>), tables (<table>), … – also: <div> (structure, seman'cs, layout, style) • Inline elements (within text) – formang/seman'cs (<em>, <i>, <strong>, <b>), links (<a>), images (<img />), table cells (<td>), line breaks (<br />), code (<code>) … – also: <span> (seman'cs, style) 15 XHTML con'nued… • Core XHTML element aributes – id, class, style, 'tle, xml:lang, dir • Comments in XHTML –  • Whitespace (spaces, tabs, newlines): ignored, mostly • Formang/presentaon – no: <font color="red" size="2">some text</font> – yes: <span style="color:red; font-size:18pt; ">text</span> – yes: <p style="background-color:yellow; ">text</p> • Tables – for tabulated data, not for website layout 16 Summary • Wri'ng for the web – XHTML vs HTML – XHTML basics • Good prac'ces: – adding metadata – structured documents: seman'cs, styling – content vs. presentaon • Next 'me – style sheets (CSS) 17 .

5. Wri Ng for the Web: HTML and XHTML Dr. Dave Parker

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support