LIS650lecture 1 Major HTML

1
LIS650 lecture 1Major HTML

• Thomas Krichel
• 2005-01-28

2
the lthtmlgt element

• It is the root element of an XHTML document.
• It has required children ltheadgt and ltbodygt.
• It has two optional attributes
• the "dir" attribute says in which direction the
  contents is rendered. The classic value is "ltr",
  "rtl" is also valid.
• the "lang" attribute says in which language the
  contents is. Use ISO 639 codes, e.g. lang"en-us"
  
• these two attributes are know as the
  internationalization (i18n) attributes.
• Example lthtml lang"en-us"gt lt/htmlgt

3
the lttitlegt element

• This is a required child of ltheadgt.
• It defines the title of the document.
• It takes the i18n attributes.
• Example
• lthtmlgtlthead lang"en-us"gtlttitlegtA fine
• limericklt/titlegtlt/headgtltbodygtltdivgtThere
• was a young friar named
• Tucklt/divgtlt/bodygtlt/htmlgt
• It must only contain one character data node.

4
usability concerns with lttitlegt

• The title is used by the user agent in a special
  manner
• as bookmark default title
• as the title for a window in which the user agent
  runs
• Google uses the title as anchor text to your web
  page.
• It is a crucial ad for your page
• Google may truncate the title.
• Bad ideas for titles
• section 1 -- home page

5
the ltbodygt element

• This encloses the contents of the page as opposed
  to its header.
• Validation requires one and only one body.
• It takes the i18n attributes. as well as some
  others that we will discuss now. These fall into
  a another group of attributes we call core
  attributes.
• We will study those core attributes now.

6
core attributes "id"

• This attribute assigns a name to a element.
• This name must be unique in a document. In the
  ltbodygt element, this requirement is superfluous,
  of course.
• The "id" attribute has several roles in HTML,
  including
• As a style sheet selector
• As a target anchor for hypertext links

7
core attributes "class"

• The class attribute is a friend of the "id"
  attribute.
• It assigns one or more class names to a element.
• Class names are separated by blanks, e.g. ltp
  class"limerick funny"gt...lt/pgt
• The element may be said to belong to these
  classes. A class name may be shared by several
  elements.
• The "class" attribute has several roles in HTML,
  but it is most useful as a style sheet selector,
  when you want to assign style information to a
  set of elements.

8
Example for "class" and "id"

• ltp class"limerick" id"limerick_1"gt
• There was a young man from Perultbr/gt
• Whose limericks stopped at line two.lt/pgt
• ltpgtOK, that's a stupid limerick. Let us look at
  anotherlt/pgt
• ltp class"limerick" id"limerick_2"gt
• There was a young man from Japanltbr/gt
• Whose limericks would never scanltbr/gt
• And when they asked whyltbr/gt
• He said it is because Iltbr/gt
• Try to put as many words into the last line as I
  possibly can.lt/pgt

9
core attributes "title"

• The "title" attribute sets a title in use with
  the element.
• There is no prescribed way in with the title is
  being rendered by a user agent.
• Sometimes it is shown as a tool tip, i.e.
  something that flashes up when the mouse is
  rolled over it.
• Example
• lta href"http//wotan.liu.edu/home/krichel"
  title"Thomas Krichel's homepage at wotan"gtThomas
  Krichellt/agt

10
core attributes "style"

• Use the "style" attribute to give style
  information to a particular element.
• This will be more discussed when we do the style
  sheets.
• Usually there are better ways to attach style
  information then writing it onto every element.
  It is better to place the tag into a class by
  giving them the same "class" attribute, and then
  give style sheet information for the class.
• See validated.html for an example.

11
summary core attributes

• To summarize, we have a group of core attributes.
• These attributes can be used with almost all
  elements.
• There are other attributes that can be almost
  universally used, called "event attributes", but
  they have to do with scripting. We may study them
  later in this course.

12
block-level vs text-level elements

• Block-level elements contain data that is aligned
  vertical by visual user agent.
• Text-level elements are aligned horizontally by
  visual user agents.
• The reasons behind this distinction
• Block level can contain other block level
  elements and text-level elements.
• Text-level elements can not contain block-level
  elements.
• Visual user agents start a new line at the
  beginning of block-level elements.
• Multidirectional text would be impossible without
  it.

13
the ltdivgt and ltpgt elements

• The ltdivgt elements allows you to set arbitrary
  block level divisions in your document.
• It takes the core attributes.
• RULE put all your contents that is vertically
  aligned into a ltdivgt.
• The ltpgt tag is like ltdivgt but it signals the
  start and end of a paragraph.

14
the ltbr/gt element

• is used to create a line break.
• Note its emptiness!
• It has the "clear" attribute that can take the
  values "left", "right" and "center" and "all".
  This prevents textual contents to float around
  other content.

15
The ltspangt element

• This is another element for arbitrary divisions,
  but it operates on inline content. This is
  contents that is put in lines horizontally,
  rather than block-level contents, that is put in
  vertically.
• Admits core attributes.
• Put things in a ltspangt that belong together in a
  line.

16
ltspangt example

• A worse poet however was
• Jltspan class"r"gtennylt/spangt.ltbr/gt
• Her limericks werent worth a Pltspan
  class"r"gtennylt/spangtltbr/gt
• Though the invention was
• sltspan class"r"gtoundlt/spangtltbr/gt
• She always fltspan class"r"gtoundlt/spangtltbr/gt
• That, whenever she tried to write ltspan
  class"r"gtanylt/spangtltbr/gt
• She always had one line to
• mltspan class"r"gtanylt/spangtltbr/gt.

17
abstraction ends here

• Up until now, we have done a lot of abstract
  elements and attributes that do not achieve much
  visual impact.
• Instead, they
• point the style sheet to where things are
• create a semantic design
• We will now turn to more physical descriptions.

18
try it out

• right click empy.html in your winscp window.
• you will see the option to duplicate the file.
• duplicate it, say, to tryout.html by entering
  the new name.
• right-click tryout.html and choose edit.
• open a user agent to
• http//wotan.liu.edu/user/tryout.html
• where user is the name of your user name. You
  should be able to see your changes, as last saved.

19
the ltagt element I

• opens a hyperlink, contents of element is the
  anchor text, it is limited to text only
• "href" attribute has the target URL
• "hreflang" has the language of the target
• "type" attribute gives the MIME-type of the
  target
• Some other attributes for which we have no use
• coords shape accesskey tabindex
• and of course, ltagt takes the core attributes

20
the ltagt element II

• It takes the "rel" attributes to specify the
  relationship between the current document and the
  link target, as well as the "rev" attribute to
  specify the reverse.
• This is not currently well supported by the
  browsers.
• I will come back to these relational attributes
  when discussing the ltlinkgt tag.
• Example
• lta href"http//openlib.org/home/krichel"gtMy
  professorlt/agt

21
linking to other files on wotan

• If you want to link to a page that you already
  have in your public_html folder on wotan, you
  simply quote the name of the file
• lta href"second_page.html"gtsecond pagelt/agt
• Please give all the HTML files the ending .html.
• Avoid blanks, as well as other exotic characters
  in file names. Instead of blanks, use underscores.

22
linking within a document

• If the "id" attribute of an element in a document
  at a URL URL is set to id , you can make the
  element the target of a link.
• You use the URL URLid for this purpose.
• If the document linked to is the current
  document, you dont need to reference its URL.
• example lta href "http//openlib.org/home/kric
  helvalidator"gtvalidlt/agt links to the element
  with id "validator" in Thomas Krichel's homepage.

23
the ltimggt element I

• makes an image.
• "src" attribute says where the image is
• "alt" attribute give a text to show for user
  agents that do not display image. It may be shown
  by the user agents as the user highlights the
  image. It is limited to 1024 characters.
• "longdesc" attribute is the same as "alt" but
  does not have the length limitation.
• Example ltimg src"thomas_krichel.jpg"
  alt"picture of Thomas Krichel"/gt

24
the ltimggt element II

• "width" attribute gives the user agent a
  suggestion for the width of the image.
• "height" attribute gives the user agent a
  suggestion for the height of the image
• both can be expressed
• in pixels, as a number
• in age of the current display width
• of course ltimggt admits the core attributes.

25
setting the resolution

• If you set "height" and "width" to the exact size
  of the picture, you make it easier for the user
  agent to render it. It can render the page even
  though it may not have downloaded the picture.
• If you set it to something different, the user
  agent may (and in practice, does) scale your
  picture. The scaled picture looks ugly and
  scaling takes time.
• It is best to size your pictures using a
  dedicated picture manipulation software such a
  gimp.

26
HTML checking

• validated.html has some code that we can now
  understand.
• ltpgt
• lta href"http//validator.w3.org/check?urirefere
  r"gt
• ltimg style"border 0pt"
• src"http//wotan.liu.edu/valid-xhtml10.png"
• alt"Valid XHTML 1.0!" height"31"
• width"88" /gt
• lt/agtlt/pgt
• click on the icon to validate your code.

27
header elements

• Headers lth1gt to lth6gt
• All are block-level elements.
• Vary text size based on the headers level.
• Actual size of text of header element is selected
  by browser.
• Results can vary significantly between user
  agents.
• All take the core attributes.

28
lthr/gt element

• creates a horizontal rule
• admits the core attributes
• other attributes have been deprecated, i.e. are
  allowed in the loose DTD but not the strict one.

29
contents-based style elements

• ltabbrgt encloses abbreviations
• ltacronymgt encloses acronyms
• ltcitegt encloses citations
• ltcodegt encloses computer code snippets
• ltdfngt encloses things being defined
• ltemgt encloses emphasized text
• ltkbdgt encloses text typed on a keyboard
• ltsampgt encloses literal samples
• ltstronggt encloses strong text
• ltvargt encloses variables
• all admit the core attributes

30
physical style elements

• ltbgt encloses bold contents
• ltbiggt encloses big contents
• ltsmallgt encloses small contents
• ltigt encloses italics contents
• ltsubgt encloses subscripted contents
• ltsupgt encloses superscripted contents
• ltttgt encloses typewriter-style contents
• all admit the core attributes

31
the ltpregt element

• encloses contents that is to be rendered with the
  characters and line breaks just like in the
  source text. Markup is still allowed, but
  elements that do spacing should not be used,
  obviously.
• It takes the core attributes and a "width"
  attribute setting the number of characters per
  line.

32
ltblockquotegt and ltqgt elements

• ltblockquotegt quotes a paragraph
• ltqgt make a short quote inside a paragraph
• both takes a "cite" attribute that take the value
  of a URL of the source of the quote.
• They also take the core attributes.

33
list elements

• ltolgt creates an ordered list.
• ltligt encloses each item
• ltulgt unordered list
• ltligt encloses each item
• ltdlgt encloses a definition list
• ltdtgt encloses the term that is being defined
• ltddgt encloses the definition
• All take the core attributes and the i18n
  attributes.

34
ordered list example

• The largest towns in Saarland are
• ltolgt
• ltligtSaarbrueckenlt/ligt
• ltligtNeunkirchenlt/ligt
• ltligtVoelklingenlt/ligt
• ltligtSaarlouislt/ligt
• lt/olgt

35
unordered list example

• The ingredients for Dibbelabbes are
• ltulgt
• ltligtpotatoeslt/ligt
• ltligtonionlt/ligt
• ltligtlardlt/ligt
• ltligteggslt/ligt
• ltligtgarliclt/ligt
• ltligtleekslt/ligt
• ltligtoil (for frying)lt/ligt
• lt/ulgt

36
definition list example

• Here are some derogatory terms in Saarland
  dialect. ltdlgt
• ltdtgtTraanfunsellt/dtgtltddgta slow personlt/ddgt
• ltdtgtLabedudelaelt/dtgtltddgta lazy and badly
  organized person without accomplishmentslt/ddgt
• ltdtgtSchmierpisslt/dtgtltddgta person of poor body
  hygienelt/ddgt
• lt/dlgt

37
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.

38
(No Transcript)
39
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.

40
elements attributes not covered

• 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

41
more table talk that is not covered

• Table rows may be grouped into
• head section
• body section
• foot section
• Table columns may also be grouped into more
  arbitrary ways in so-called column groups.
• Table cells can contain
• header information
• table data

42
the lttablegt element

• It encloses a table. It takes the 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. It 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.

43
the "frame" attribute of lttablegt

• This attribute specifies which sides of the frame
  surrounding a table will be visible. Possible
  values
• void no sides. This is the default value.
• above the top side only
• below the bottom side only
• hsides the top and bottom sides only
• vsides the right and left sides only
• lhs the left-hand side only
• rhs the right-hand side only
• box all four sides
• border all four sides

44
the "rules" attribute of lttablegt

• This attribute specifies which rules will appear
  between cells within a table. Possible values
• none no rules. This is the default.
• groups rules between row groups only.
• rows rules between rows only.
• cols rules between columns only.
• all rules between all rows and columns

45
the "border" attribute of lttablegt

• This attribute sets the width of the frame of a
  table, if it is set to be visible. The value can
  only be a pixel number.
• Rules and frames can make for visual noise.

46
the ltcaptiongt element

• 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 lttablegt
  tag start.
• There can only be one ltcaptiongt in any one
  lttablegt.
• We will now study the alignment attributes. This
  is an attribute group widely used in tables.
  lttablegt also takes those attributes.

47
alignment the "align" attribute

• The "align" attribute specifies the alignment of
  data and the justification of text in a cell.
  Possible values
• left left-flush data or left-justify text.
• This is the default value for table data.
• center center data or center-justify text.
• This is the default value for table headers.
• right right-flush data or right-justify text.
• justify double-justify text
• char align text around a specific character as
  set with a "char" attribute

48
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.

49
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)

50
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.

51
alignment attributes "cellpadding"

• Does the same as cellspacing, but gives the
  distance between the border of the cell and the
  and the contents.
• Note that "cellpadding" and "cellspacing" can
  only one length.
• if it is pixel, horizontal and vertical
  dimensions are the some
• if it is a percentage, horizontal and vertical
  space are different as the percentage is applied
  to the

52
lttrgt element

• It encloses a table row.
• It takes the alignment attributes.
• It takes the i18n attributes.
• It takes the core attributes.

53
the lttdgt element

• 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)
• It takes an "axis" attributes, whose purpose is
  so abstract that I will not cover it here.

54
the ltthgt element

• encloses a header cell
• It admits the same attributes as lttdgt, 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.

55
Example by Lesk (1976)
56
Example by Lesk (1976)
57
Lesk's most famous
58
http//openlib.org/home/krichel

• Please shutdown the computers when
• you are done.
• Thank you for your attention!