LIS650 lecture 1

1
LIS650 lecture 1

• Thomas Krichel
• 2003-11-08

2
Administrative stuff

• Get your grade at http//wotan.liu.edu/home/kriche
  l/lis650w03a/grades/secret.html where secret is
  your secret word transliterated to all lower
  case.
• Thomas will send answers to any question you
  email him to the whole class unless
• the matter is clearly of a private nature
• you have informed him that you wish a private
  response.

3
today

• Review of ways to edit pages
• abstract part
• HTML tags at the beginning of the document
• Generic attributes
• Nielson on page design
• fun part
• Text markup, links, and images
• lists

4
"my HTML"

• I will do a list of tags that describe the
  structure of the page.
• I will only do the tags of the strict DTD
• The loose DTD has more tags, but all the
  functionality of these tags is best done with
  style sheets.
• Thus, the pages created today will look rather
  boring because we do cover style sheets only
  later.

5
My HTML speak

• I will say tag lttaggt requires attribute
  attribute .
• I will say tag lttaggt takes attribute attribute
  if the attribute is optional.
• Some times these slides say admit. It is the
  same thing as take

6
literature

• I work from the text of the official standard at
  http//www.w3.org/TR/html4/
• To work with it faster, I made a copy at
  http//wotan.liu.edu/krichel/html4/
• You can work from any HTML book.

7
working with wotan

• You can work with wotan directly if you like. Use
  putty to connect to wotan.liu.edu, then type
• cd public_html
• You can start from empty.html, the file that
  validates, and copy it to test.html
• cp empty.html test.html
• nano test.html
• Then you can change test.html to try out the tags
  as I discuss them here.

8
working on the local machine

• Open empty.html on your web site and save as
  test.html
• edit it with notepad to be safe
• open with Internet Explorer to see the rendered
  html
• to validate
• you have to upload the file first to your
  public_html directory on wotan.liu.edu
• Then use the W3C validator at http//validator.w3c
  .org

9
comments

• In HTML, you can make comments about your code.
  These are notes to yourself.
• They will not be shown in the rendered HTML
• But when the HTML code is downloaded, it will
  have to comments included.
• Comments start with lt!--
• Comments end with --gt
• Example lt!-- this is a comment --gt
• Comments can not be nested!

10
the lthtmlgt tag

• appears after the DTD declaration
• encloses the html contents
• has required contents ltheadgt and ltbodygt.
• 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"
  
• Example lthtml lang"en-us"gt lt/htmlgt

11
Internationalization

• Since this is a long word, it is usually
  abbreviated i18n.
• Thus we will call "dir" and "lang" the i18n
  attributes.

12
the ltheadgt tag

• ltheadgt appears right after the lthtmlgt tag start
  to give metadata about the document.
• Takes the optional i18n attributes.
• Takes an attribute "profile" to be discussed
  later
• ltheadgt must contain a lttitlegt tag.
• ltheadgt may also contain
• ltstylegt -- ltlinkgt
• ltbasegt -- ltmetagt (all discussed later)
• and some other stuff that I do not cover

13
the lttitlegt tag

• appears in the ltheadgt
• defines the title of the document
• takes the i18n attributes
• Example
• lthtmlgtlthead lang"en-us"gt
• lttitlegtThomas Krichel's favorite
  limericklt/titlegt
• lt/headgt
• ltbodygtltdivgtThere was a young friar named Tuck
  
• it must not contain other HTML tags.

14
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

15
the ltbodygt tag

• 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"

16
core attributes id

• This attribute assigns a name to a tag.
• 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

17
core attributes class

• The class attribute is a friend of the "id"
  attribute.
• It assigns one or more class names to a tag the
  tag may be said to belong to these classes. A
  class name may be shared by several tags.
• It is like placing the tag instance into a set of
  tags.
• 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 tags.

18
Example for "class" and "id"

• ltp class"limerick" id"limerick_1"gt
• There was a young man from Perultbrgt
• Whose limericks stopped at line twoltpgt
• ltpgtThis is really a stupid limerick. Let us look
  at anotherltpgt
• ltp class"limerick" id"limerick_2"gt
• There was a young man from Japanltbrgt
• Whose limericks would never scanltbrgt
• And when they asked whyltbrgt
• He said it is because Iltbrgt
• Try to put as many words into the last line as a
  possibly canlt/pgt

19
core attributes title

• The "title" attribute sets a title in use with
  the tag.
• 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.
• This is not to say that the "title" attribute is
  for flashers only.

20
core attributes style

• Use the "style" attribute to give style
  information to a particular tag.
• This will be more discussed when we do the style
  sheets.
• I advise against using it.

21
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, they are
  therefore not studied in this course.

22
the ltdivgt and ltpgt tags

• The ltdivgt tag 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.

23
The ltspangt tag

• This is another tag 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.

24
abstraction ends here

• Up until now, we have done a lot of abstract tags
  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.
• Before that, we will hear from Jakob Nielsen.

25
Nielson's book

• page design 1697
• content design 98160
• site design 162259
• intranet design 260293
• accessibility 296311
• i18n 312344
• future predictions 346376
• conclusions 378396

26
screen real estate

• on a screen that displays a web page, as much as
  possible should be the contents of the page.
• Ideally the contents should occupy more than 50
  of the screen. Most often it does not.
• Some white space is almost inevitable
• Cut navigation to below 20 of screen
• When examining a page for usability, remove
  features by trial and error. If the page is still
  usable without the feature, remove it. Simplicity
  wins over complexity.

27
cross-platform design

• Unlike traditional GUI systems, the web offers
  very little to control the user.
• They could come right into the middle of the site
  from a search engine.
• They could use a variety of devices, e.g. web
  browser for car drivers
• Most pages only look good on an 17in monitor with
  at least 1024768 pixels. It should not be that
  way.
• WYSIWYG is dead!
• Separate contents from presentation, use style
  sheets.

28
resolution independent design

• Never use fixed width in pixels except perhaps
  for thin stripes and lines
• Make sure that design looks good with small and
  large fonts in the browser.
• Graphics must work at 100dpi and better.
• Text in graphics to be avoided.
• Provide a print version for long documents.

29
be conservative

• Avoid non-standard HTML code.
• Take account of installation inertia. Figures for
  1998/1999 show 1 of browsers updated a week.
• Only use technology that is at least 1 year old,
  if not at 2 years old. Let other make the errors
  that come with trial.

30
semantics versus presentation

• The original HTML tags were all based on
  semantics. For example lth2gt is a second level
  heading.
• Semantic encoding was lost with the "extensions"
  invented by the browser vendors.
• There will be a wide variety of browser in the
  future. It is already impossible to test pages on
  all user agents.
• Style sheets already make it possible to style
  the page according to the "media" used by the
  user agent.

31
watch response times

• Users loath waiting for downloads.
• Classic research by Mille in 1968 found
• delay below 0.1 second means instantaneous
  reaction to the user
• 1 second is the limit for the user's train of
  thought not to be disrupted
• 10 seconds is the limit to keep the user
  interested, otherwise they will start a parallel
  task
• low variability of responses is also important
  but the web is notoriously poor for this.

32
factors affecting speed

• The user's perceived speed depends on the weakest
  of the following
• the throughput of the server
• the server's connection to the Internet
• the speed of the Internet
• the user's connection to the Internet
• the rendering speed of the computer

33
making speedy pages

• keep page sizes small
• reduce use of graphics
• use multimedia only when it adds to the user's
  understanding
• use the same image several times on the site
• make sure that the / appear at the end of the URL
  for directories. http//openlib.org/home/krichel/
  downloads faster than http//openlib.org/home/kric
  hel

34
know your limits

• 1 second implies maximum pages size of 2KB on a
  modem, 8 KB on ISDN, and 100 KB on a T1. 10
  seconds implies maximum size of 34KB on a modem,
  150KB on an ISDN and 2MB on T1, Nielson writes.
• I doubt these numbers.
• It would be good to find an update on these
  numbers.

35
get some meaning out fast

• What matters most is the time until the user sees
  something that makes sense. The time for the full
  page to be available matters less. therefore
• top of the page should be meaningful without
  images having been downloaded
• use meaningful "alt" attribute for images
• use "width" and "height" attribute so that the
  user agent can build the page quickly
• cut down on table complexity. top table should be
  particularly easy.

36
ok, so good so far

• This has got us to page 51.
• More next week.
• Now back to HTML tags

37
header tags

• Headers lth1gt to lth6gt
• Simple form of text formatting
• 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

38
Now we can start to play

• Create a document with various headers
• Compare results in a couple of user agents.
• and then I will do images and multimedia

39
lthrgt tag

• create 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.

40
the ltimggt tag I

• "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 srcthomas_krichel.jpg
  altpicture of Thomas Krichelgt

41
the ltimggt tag 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 supports the core attributes.

42
contents-based style tags

• ltabbrgt encloses abbreviations
• ltacronymgt encloses acronyms
• ltcitegt encloses citations
• ltcodegt encloses computer code snippets
• ltdfngt encloses things being define
• 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

43
physical style tags

• 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

44
the ltbrgt tag

• is used to create a line break
• It has the clear attribute that can take the
  values "left", "right" and "center" and "all".
  This prevents textual content to float around
  other content.
• It is not required to close the tag, but Thomas
  Krichel recommends to write it as ltbr/gt, this
  closes the tag.

45
the ltpregt tag

• encloses contents that is to be rendered with the
  characters and line breaks just like in the
  source text. Markup is still allowed, but tags
  that do spacing should not be used, obviously.
• If you want to render HTML, quote
• lt as lt
• gt as gt
• as amp
• It takes the core attirbutes and a width
  attribute setting the number of characters per
  line.

46
ltblockquotegt and ltqgt tags

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

47
the ltagt tag

• opens a hyperlink, contents of tag 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

48
the ltagt tag 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.
• Ex lta hrefhttp//openlib.org/home/krichelgta
  nice manlt/agt.

49
linking within a document

• If you have the "id" attribute (one of the core)
  set to id on an element in a document at a URL
  URL, you can make the element the target of a
  link.
• You use the URL URLid for this purpose.
• The "name" attribute can also be used for this
  purpose, instead of "id", but this is only
  allowed for historical reasons.
• If the document linked to is the current
  document, you dont need to reference its URL.

50
list tags ltolgt and ltulgt

• ltolgt creates an ordered list.
• ltulgt unordered list
• of course, they also take the core attributes

51
the ltligt tag

• It marks each item of a list.
• it is usually not closed.
• it takes the "type" attribute, so you can style
  each item differently
• it takes a "value" attribute, so you can give
  each item a different numerical value in an
  ordered list. You can do that if you want to
  confuse the hell out of your users. The value of
  "value" must be a number, of course.
• ltligt takes the core.

52
definition lists tags

• ltdlgt encloses a definition list
• ltdtgt encloses the term that is being defined
• ltddgt encloses the definition
• All take the core attributes.

53
http//openlib.org/home/krichel

• Thank you for your attention!