xhtml.pdf September 29,

Size: px

Start display at page:

Download "xhtml.pdf September 29,"

Maximillian Carson
6 years ago
Views:

1 Contents SCI Advanced XHTML and CSS Lennart Herlaar Original slides by Jurriaan Hage HTML: a short future The extensible HyperText markup Language (XHTML 1.0) - a selection Many things also apply to HTML, but XHTML is the way to go Cascading Style Sheets (Level 1 and 2) - a selection Not all of CSS Level 2 may be implemented in browsers (not even in recent browsers), so beware September 29, 2003 SCI X SCI X A short future Quote from the HTML Working Group Charter: To fulfill the promise of XML for applying XHTML to a wide variety of platforms. To assist W3C s leadership role to support rich Web contents that combine XHTML with other W3C s work on areas such as math, scalable vector graphics, synchronized multimedia, and forms. Main scope: complete the transition from HTML to XHTML Includes finishing XHTML 2.0, which should include such features as XForms XEvents These should replace legacy features in current XHTML and HTML XHTML 1.0 Three flavours (translations from HTML 4) Strict Transitional (for use with older browsers) Frameset Strict is the one from which XHTML 2.0 shall evolve Frames will be added as a module in 2.0 XHTML Basic: minimal base for an XHTML document type For use in cell phones, PDAs, pagers and so on SCI X SCI X Tidy For help while writing XHTML (or HTML or XML), consider downloading Tidy Corrects many mistakes (unbalanced tags, forgotten tags, using HTML entity names for certain characters), with Configurable layout style Moving representation attributes for HTML to CSS style annotations (bgcolor) Advice on accessibility (summary for tables) A choice of output character encodings, but It does not yet understand the HTML meta element for specifying the encoding General differences with HTML Strictness of XHTML is derived from XML, a condensed version of SGML XHTML is an instance of XML XHTML is specified by means of a Document Type Definition All tags in lower case All tags must be closed, also <p> and <li> All attribute values must be quoted: <img src="image.jpg" /> Empty tags become <hr /> and <br /> Some characters are illegal (Formfeed, U+000C, for instance) Do not write <p /> for <p></p> to avoid confusing older browsers The DTD of XHML 1.0, is the one for HTML 4.01 (with modificiations as just listed) SCI X SCI X xhtml.pdf September 29,

2 Some selected subjects <DOCTYPE> Some <meta> tags Character sets and character encoding schemes <div> and <span> <script> and <noscript> Deprecation <DOCTYPE> SGML tag for specifying the DTD to be used Essential for validators For XHTML 1.0 Strict for instance: <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//w3c//dtd XHTML 1.0 Strict/EN" " The xml tag is optional, specifies which version of XML is used Applies to all XML files, not just XHTML files In XHTML, the <html> tag also demands an attribute xmlns which specifies the XML name space <html xmlns = " SCI X SCI X Some <meta> tags <meta> tags can be used in the head of a document Various purposes Character sets and content type information for the server (http-equiv) Keywords, contents, author, copyright, generator a.o. (name) Values are specified in the content attribute One can specify them for various languages <meta name="keywords" content="helmut Lotti, Frans Bauer, Bach, Eminem" /> <meta name="description" lang="en" content="my favourite artists and composers" /> <meta name="description" lang="nl" content="alles van mijn favoriete artiesten" /> <meta name="author" content="lennart" /> Characters Glyph = a printed representation of a character Character = an abstract sign used in languages Example: a is the same character as a But they are different glyphs, external representations Sometimes the same glyph can be used for different characters Example: Greek upper case version of α is the same as A Characterset = a set of characters that are often used together, e.g. the ASCII characterset (seven bits, one for parity) Byte = a small storage unit (usually eight bits) Character code = representation of characters with numbers Encoding = representation of character codes in bytes SCI X SCI X ISO character codes Eight bits ASCII? No! Certainly not in some mailtools throw it away, some do not accept them, etc. Under the hood, 8 bits binary files are coded to 7 bits attachments Internationalization: special characters not available, or, if available not standardized Example: on Windows é = E9, while on Macintosh é = 8E Solution: several ISO devised character sets ISO (Latin 1) for Western European languages If your editor writes ISO (Latin 1) files, make sure that you tell the webserver, in order to avoid problems (use <meta>) ISO (Latin 9) Latin-1 with Euro sign, ISO Thai The lower 128 characters are the same everywhere; the upper 128 may differ Unicode / ISO Unicode (ISO 10646) is a character set containing the characters of most languages It is a 32-bit code (max 21 used) Most of the living languages fit in the 16-bit part Chinese, Japanese and Korean (CJK) are unified to fit The characters above 0xFFFF are mostly for old languages or special purposes Maximum value is 0x10FFFF The first 256 codes are exactly ISO Notation used U+hex number, e.g = U+20AC Various encodings of Unicode exist: UTF-32, UTF-16 and UTF-8 UTF-8 is the de facto standard (Request For Comments 2277) SCI X SCI X xhtml.pdf September 29,

3 Unicode encodings UTF-8: Encoding in 8-bit bytes Variable length (1-4 bytes per character) All 128 ASCII characters are encoded as themselves All other characters are encoded as a sequence of bytes 128 First bytes starts with number of 1 s indicating how many bytes (followed by 0) Next bytes all start with 10 The other bits form the character (filled from back to front) E.g. = U+20AC = , UTF-8: E2 82 AC E AC Problem: UTF-8 is not mail-safe (use base 64 or quoted-printable) Character encodings in XHTML files Using the <meta> tag you may specify the character encoding scheme for the XHTML file Examples: UTF-8 (Unicode 8 bit), ASCII (seven bits), ISO and so on Although the attribute seems to say charset you specify the encoding, not the character set All explicit codes (&20AC; for the Euro sign) are Unicode references irrespective of the chosen charset value <meta http-equiv="content-type" content="text/html; charset="utf-8" /> SCI X SCI X <div> and <span> Block-level tags (<p> and <h1>) force line-breaks Inline-level tags (<a> and <i>) can be used in-line Inline-elements like <a> may not occur directly in a <body> tag. Embed it in block-level element first! The XHTML DTD can tell you which is which: %block, %inline and %flow (which means both) <div> and <span> are generic structuring tags, one for each level Can both be used to set attributes for arbitrary blocks of text Attributes like positioning, font, style, size and color are then set using CSS <span> is used inline, <div> as a block Both are essential if you want to apply standard collections of attributes via CSS to parts of your XHTML pages Example of <div> and <span> <body> <div class="widemargins"> <a href="gnurk.html"> Hello, how are <span id="thismeansyou">you</span>?<br /> Well, okay. </a> </div> </body> SCI X SCI X <script> Scripting code written between <script> and </script> Executed when encountered Procedures and functions are only registered of course, not called Specifying the language: attribute type = text/javascript (use MIME-type) Also works for other languages such as VBScript Code in a separate file: use attribute src = knor.js Scripts are usually within comments so that they are ignored by non-scripting browsers Some authors think we should start doing without comments More on this during the lecture on JavaScript SCI X and <noscript> <noscript> is used by browsers that do not support the scripting language Try to offer the user an alternative <script type = "text/javascript">  </script> <noscript> <p>multiply the number 1 to 10 on your own calculator</p> </noscript> SCI X xhtml.pdf September 29,

4 Deprecation In XHTML 1.0 and HTML 4.01 many tags and attributes have become deprecated They are usually superseded by other ways of dealing with them Tags which are deprecated: <strike>, <s>, <u>, <font>, <basefont>, <dir>,... Tags to avoid: <b>, <i>, <small>, <big>, <tt> All of these should be done using style sheets Some tags like <center> and <blink> never existed : do not use these <applet> is now <object>; parameters get passed in the same way using <param> <applet> to <object> <applet code="bubbles.class" width="500" height="500"> Michael Jackson plays with his monkey. </applet> <object codetype="application/octet-stream" classid="java:bubbles.class" width="500" height="500"> Michael Jackson plays with his monkey. </object> SCI X SCI X Deprecated attributes Almost all that have to do with presentation: background, bgcolor But what about align, height and border? align deprecated for all uses except inside tables (<col>, <td>, <tr>,... ) Attribute list on W3C.org site tells you what is deprecated and what not Find the corresponding CSS attributes yourself Other XHTML things to look at Using <map> and <area> for hyperlinks on images Using <pre> for preformatted data (verbatim) Embedding html source in your html source:...text before... <object data="embed_me.html"> Warning: embed_me.html could not be embedded. </object>...text after... Is embedding the answer to make all your pages look the same? SCI X SCI X Cascading Style Sheets Customization of presentation with cascading/inheritance/scoping Easier to impose uniformity over different XHTML files Stronger separation between structure and content Many attributes are being deprecated to be replaced by CSS attributes Unfortunately the mapping between attributes is not easy Most browsers are too forgiving Use Tidy; the -c option cleans up some deprecated attributes CSS is now at Level 2, but some browser support only Level 1 Check under various browsers Non-cascading style sheet languages may exist, but we do not use them An XHTML document is a tree Parse XHTML document: <html> at the root, two children: <head> and <body> To render an object in the tree, we need to know its style attributes, like colour, alignment, font family and so on A browser will Start by looking at the root of subtree for the object Use any (attribute,value) combination it finds there Do the same one level up for necessary but unknown attribute values (rec.) Comparable to scoping in programming languages Values deepest in the tree win: the colour of the body may be overwritten by the colour of a paragraph, which may be overwritten by the colour of a word (in a <span>) SCI X SCI X xhtml.pdf September 29,

5 Specifying the style Three methods Inline (single use) <p style = "background-color: #EEEEEE; color: black"> In the header (whole document) <head> <style type = "text/css"> p { background-color: #EEEEEE; color: black; } </style> </head> External (more than one document) Preferred <link rel="stylesheet" type="text/css" href="style.css"> Multiple external style sheets can be cascaded. Last one wins. SCI X General form of style rules selector { prop1: values1; prop2: values2;... propn: valuesn[;] } Multiple values for a property separated by comma s Values with spaces between double quotes Example font-family: times new roman, times, serif The selector can be quite complicated SCI X Specifying fonts Not all font families are present: select a few Headers and titles usually in a sans-serif, paragraph text in a serif font font attribute allows multiple attributes to be set (fixed order) Some attributes except size and family may be omitted p {font: italic small-caps bold 14pt/16pt arial,sans-serif; } The id attribute Every tag can be named: <p id="oink"> To modify the style of everything called oink write #oink { color: grey } Every page should have only one item called oink SCI X SCI X Style classes The main tool in tuning the style of a site Similar to id but now for a number of them Specifying the style rules per class Classes can be combined p.dwarf { size: 5px } p.giant { size: 20px }.dark { color: black } Every paragraph of class dwarf or giant will be rendered in the specified way <p>snow white is a normal person.</p> <p class="dwarf">grumpy is a dwarf.</p> <p class="dark giant">scary big guy.</p> SCI X Variations in selectors Pseudo-elements (:hover, :firstletter) Dimensions (pixels, percentages, wildcards) Setting attributes for table headers and elements of tables in the class schedule Setting the margin for each <li> nested two <ul>s deep Placing text away from an image and letting the picture float to the right h1, h2, h3 {color:white; background-color: black; width: 100%; text-align: center} a {text-decoration: none} a.outside:hover {color: green; background-color: #CCFFCC} table.schedule td,th {text-align: center; border: solid 1pt } p.book:first-line {font-style: italic} ul ul li {margin: 0px} img {float: right; margin-left: 0.35in} SCI X xhtml.pdf September 29,

6 <span> and <div> Use the genericity of <div> and <span> For each combination of style values for inline elements of a span class Similar using <div> for block-level elements span.subject { color: green;...} span.object { color: black;...} A <span class="subject">subject thingy</span> and <span class="object">object thingy</span> Sizes Sizes and distances are indicated by measures Some of these are absolute, some are relative Absolute: pt (points): font-size: 10pt or border: solid 1pt; cm (centimeters), mm (millimeters), in (inches), pc (pica, 12 pts) Some sizes are relative to other sizes em (current height of capital M): H1 { font-size: 1.8em } ex (current height of small x) px (pixel): actual size depends on the size of pixels on screen; used for absolute positioning Use of em is recommended SCI X SCI X Percentages Sizes in percentages are also relative of course Example: width: 80% means 80 percent of available width When inheriting a value which is a percentage, the computed value is inherited, not the percentage This also holds for the relative size of em Example body { font-size: 10pt; line-height: 2em } h1 { font-size: 15pt } Line height of both body and h1 is 20pt Multi lengths <table> <colgroup><col width="30"></colgroup> <colgroup> <col width="30"> <col width="0*"> <col width="2*"> <colgroup> <colgroup align="center"> <col width="1*"> <col width="3*" align="char" char=":"> <colgroup>... </table> First the absolute columns (no *), then the 0* column (minimal width), the remainder by proportion Also applies to framesets SCI X SCI X Exotic properties In Javascript the values of attributes can be modified run-time Gives rise to usefulness of many properties visibility (hidden, visible): it is there, but not visible overflow (hidden, visible, scroll): for clipping on bounding box or not position: relative versus absolute Relative: with respect to the position it would have gotten if the positioning would not have been specified Absolute: with respect to the object in which it is contained E.g. the window, a <div> or a <span> z-index: depth, for laying things over each other; the higher, the closer Huge amounts of other properties and values SCI X xhtml.pdf September 29,

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information