1. LIS650 lecture 2 Thomas Krichel 2003-11-15

2. today is tough tables characters reexamining our

3. subtle points of line breaking You can use the entity to indicate that you don't want a line break at that space, e.g. Prof. Dr. Krichel You can suggest the user agents to hyphenate a word at a certain point using the soft hyphen entity ­ For the curious: an entity is something out of SGML that starts with & and ends with ; and that has special meaning.

4. block-level vs text-level tags There are a number of reasons behind this distinction –Block level can contain other block level elements and text-level elements. –Visual user agents start a new line at the beginning of block-level elements. –Multidirectional text would be impossible without the distinction If requested by the validator, add a or around character data.

5. Tables HTML allows to align contents is tabular form. Tables may have a caption and/or a summary. –Both describe the table. –The latter is longer than the former. Table rows are aligned vertically. Table columns are aligned horizontally. Cells are at the intersection between rows and columns.

6. tags and attributes that I don't cover many points in the table spec of HTML have one or more of the following attributes –mainly important for non-visual rendering –complicate & abstract –little used –mainly a verbosity reduction feature so I am omitting some of them in the discussion

7. HTML table design it tries to make simple things simple without making sophisticated things impossible it takes account of the fact that the absolute width of the table can not be controlled by the HTML writer but it is the hands of the reader. Not all things one would like to do are supported. Sometimes tables can lead to excessive scrolling. Use of style sheets is recommended when the table has mainly a visual function, see Thomas' homepage for a bad example.

8. table illustration A table is a matrix formed by the intersection of a number of horizontal rows and vertical columns. Column 1 Column 2 Column 3 Row 1 Row 2 Row 3 Cell

9. more table talk table rows may be grouped into –head section –body section –foot section table columns may also be grouped into more arbitrary ways. table cells can contain –header information –table data

10. the tag encloses a table. takes i18n and core attributes. The "summary" attribute provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille. The "width" attribute specifies the desired width of the entire table and is intended for visual user agents. When the value is a percentage value, the value is relative to the user agent's available horizontal space.

11. the "frame" attribute of This attribute specifies which sides of the frame surrounding a table will be visible. Possible values: –voidno sides. This is the default value. –abovethe top side only –belowthe bottom side only –hsides the top and bottom sides only –vsides the right and left sides only –lhsthe left-hand side only –rhsthe right-hand side only –boxall four sides –borderall four sides

12. the "rules" attribute of This attribute specifies which rules will appear between cells within a table. Possible values –noneno rules. This is the default. –groups rules between row groups only. –rowsrules between rows only. –colsrules between columns only. –allrules between all rows and columns

13. the "border" attribute of This attribute sets the width of the frame of a table, if it is set to be visible. Rules and frames can make for visual noise. We will now study the alignment attributes. This is an attribute group widely used in tables. also takes those attributes.

14. the tag It is used to give a caption to the table. It takes the i18n and the core attributes. It is only allowed immediately after the tag start. There can only be one in any one.

15. alignment: the "align" attribute The "align" attribute specifies the alignment of data and the justification of text in a cell. Possible values: –leftleft-flush data or left-justify text. This is the default value for table data. –centercenter data or center-justify text. This is the default value for table headers. –rightright-flush data or right-justify text. –justifydouble-justify text –charalign text around a specific character as set with a "char" attribute

16. alignment: the "valign" attribute The "valign" attribute specifies the vertical position of data within a cell. Possible values: –top Cell data is flush with the top of the cell. –middle Cell data is centered vertically within the cell. This is the default value. –bottom Cell data is flush with the bottom of the cell. –baseline All cells in the same row as a cell whose valign attribute has this value should have their textual data positioned so that the first text line occurs on a baseline common to all cells in the row. This constraint does not apply to subsequent text lines in these cells.

17. alignment: "char" and "charoff" The "char" attribute specifies a single character within a text fragment to act as an axis for alignment. The default value for this attribute is the decimal point character for the current language as set by the "lang" attribute. The "charoff" attribute specifies the offset to the first occurrence of the alignment character on each line. If a line doesn't include the alignment character, it should be horizontally shifted to end at the alignment position. The direction of offset is determined by the current text direction, as set by the "dir" attribute. (obscure)

18. alignment: "cellspacing" The "cellspacing" attribute specifies how much space the user agent should leave –between the left side of the table and the left-hand side of the leftmost column –between the top of the table and the top side of the top row, –between the right side of the table and the right-hand side of the right most column –between the bottom of the table and the bottom side of the last row –The attribute also specifies the amount of space to leave between cells. This attributes can be set to pixels or percentages.

19. alignment attributes: "cellpadding" Does the same as cellspacing, but gives the distance between the border of the cell and the and the contents. This is all best illustrated with a picture.

21. ,, These three tags enclose tags that belong to the head, the foot and the body of the table. Only one head and one foot, but optionally several bodies. Put head and foot first....header information......footer information......first row of block one data......second row of block one data......first row of block two data......second row of block two data......third row of block two data...

22. this tag allows columns to be grouped together it takes the alignment, core and i18n attributes it takes a "span" attribute that says how many columns are spanned it takes a "width" attribute, to give the width of the group. It takes percentage, pixel and relative length. A relative length is written i* where i is an integer. The higher i the more weight is given to the column when extra space is available for placing. "0*" means minimum space should be used.

23. example is the same as...a total of forty elements... In the latter case, you don't actually need the span=40 attribute.

24. tag contains data about a single column. takes the same attributes as. needs to be enclosed in a tag: –alignment attributes –core attributes –i18n attributes –span –width

25. , and rendition and make it easier to render a table row by row. If you don't give them, the user agent has to read the whole table to find out how many columns there are at most. For long tables, this can mean additional delay.

26. encloses a table row it takes the alignment attributes it takes the i18n attributes it takes the core attributes.

27. the tag encloses a cell in a table that is not a header cell It admits the alignment and core attributes It has an "abbr" attribute for abbreviated contents. Its "rowspan" and "colspan" attributes say how many rows or columns the cell spans. It has a "headers" attribute specifies the list of header cells that provide header information for the current data cell. The value of this attribute is a space-separated list of header cell "id" attribute values. (you can ignore this)

28. more on It takes an "abbr" for a short abbreviated contents of the cell. It takes an "axis" attributes, whose purpose is so abstract that I will not cover it here.

29. the element encloses a header cell It admits the same attributes as, but "headers" does make no sense here. Instead, we have a "scope" attribute that specifies the set of data cells for which the current header cell provides header information. It can take the values –row: The current cell provides header information for the rest of the row that contains it. –col: The current cell provides header information for the rest of the column that contains it. –rowgroup: The header cell provides header information for the rest of the row group that contains it. –colgroup: The header cell provides header information for the rest of the column group that contains it.

30. Example by Lesk (1976)

32. Lesk's most famous

33. Characters: concept A character set combine two things –Character repertoire: a set of characters e.g. "A", "ﺾ" "‼", "₣" –Character code positions: defines a number for each character in the repertoire. Character encoding is a way to encode the code positions in bytes To correctly display a document, the user agent needs to know both!

34. UCS and/or Unicode these are two large character sets as far as we are concerned, they are the same. the repertoires that they cover cover most languages, including UCS contains the characters required to represent characters the likes of Gurmukhi, Bopomofo, many Han characters, Runic, etc There are many different encodings of this character set.

35. how to tell the user agent… At this time, the default character set of the apache installation on wotan is "iso-8859-1", as recommended by the http specification. You can add in the header where charset is the encoding that you use. See Notepad options and documentation. http://www.iana.org/assignments/character-sets has a list of all allowable values.

36. playing safe with characters Only use the characters on the US keyboard, don't insert symbols. Save as ascii or utf-8. Set header Use references for all other characters.

37. Special Characters Inserted as an entity reference –Format can be &code; Ex. & –Insert an ampersand –Codes are often abbreviation of the character names –Codes can be in hex form Ex. & to insert an ampersand http://www.w3.org/TR/REC-html40/sgml/entities.html has the list

38. the tag in used to give style sheet information for the whole document. has an optional "type" attribute gives what type of style it is. Usually it takes the value "text/css". Example h1 {text-align: center} I advise against its usage.

39. the tag in This can be used to include metadata in the header. It has an attribute "name" for the property name It has an attribute "content" for the property values it also takes the i18n attributes. There is no standard set of names and values. Example:

40. the tag in There is also a special way to pass http headers to the client The "http-equiv" lets you set http variable and send them to the client. Example: will tell the server to tell the browser that the page is written in html. more on this later, when we discuss http.

41. "scheme" attribute of You can give a scheme attribute to. Its content can be a name string, that the user agent may be able to do something with Or it can be a URI, where the user agent may find something to do. But there is no standard way to do things.

42. the tag in Can fix the baseline URL for all the relative links in the document. Within the confines of what we are working with, I do not see a reason for you to use it.

43. the tag in appears in the of the page. creates a link between the current page and others takes the "href" attribute to say what page is being pointed to. takes "rel" attribute for forward link and "rev" for the reverse link. Example: –Consider two documents A and B. Document A: –Has exactly the same meaning as: Document B:

44. values of "rel" and "rev" attributes in alternate stylesheet !☻! start next prev contents index glossary copyright chapter section subsection appendix help bookmark

45. other attributes to takes the core attributes(no idea why) takes the "type" attribute for the MIME type of the page linked to takes the "hreflang" attribute to give the language of the page linked to takes the "charset" attribute to give the language of the page being linked to.

46. search engines Using you can give search engine things like –Links to alternate versions of a document, written in another human language. –Links to alternate versions of a document, designed for different media, for instance a version especially suited for printing. –Links to the starting page of a collection of documents. I am not sure if current engines use this.

47. Example I downloaded empty.html file and loaded into wordpad, a Microsoft product. Remember the original file Just look at the next slide and start screaming at what WordPad did to my file:

49. http://openlib.org/home/krichel Thank you for your attention!