lis650 lecture 1 thomas krichel 2003-11-08. administrative stuff get your grade at des/secret.html...
TRANSCRIPT
LIS650 lecture 1
Thomas Krichel
2003-11-08
Administrative stuff
• Get your grade at http://wotan.liu.edu/home/krichel/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.
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
"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.
My HTML speak
• I will say: tag <tag> requires attribute “attribute” .• I will say tag <tag> takes attribute “attribute” if
the attribute is optional.• Some times these slides say “admit”. It is the
same thing as “take”
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.
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.
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
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 <!--• Comments end with -->• Example: <!-- this is a comment --> • Comments can not be nested!
the <html> tag
• appears after the DTD declaration• encloses the html contents• has required contents <head> and <body>.• 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: <html lang="en-us"> … </html>
Internationalization
• Since this is a long word, it is usually abbreviated i18n.
• Thus we will call "dir" and "lang" the i18n attributes.
the <head> tag
• <head> appears right after the <html> tag start to give metadata about the document.
• Takes the optional i18n attributes.• Takes an attribute "profile" to be discussed later• <head> must contain a <title> tag. • <head> may also contain
– <style> -- <link> – <base> -- <meta> (all discussed later)– and some other stuff that I do not cover:
the <title> tag • appears in the <head>• defines the title of the document• takes the i18n attributes• Example …<html><head lang="en-us"> <title>Thomas Krichel's favorite limerick</title> </head> <body><div>There was a young friar named
Tuck … • it must not contain other HTML tags.
usability concerns with <title>
• 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
the <body> 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"
core attributes: id
• This attribute assigns a name to a tag. • This name must be unique in a document. In
the <body> 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
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.
Example for "class" and "id"
<p class="limerick" id="limerick_1">
There was a young man from Peru<br>
Whose limericks stopped at line two<p>
<p>This is really a stupid limerick. Let us look at another<p>
<p class="limerick" id="limerick_2">
There was a young man from Japan<br>
Whose limericks would never scan<br>
And when they asked why<br>
He said it is because I<br>
Try to put as many words into the last line as a possibly can</p>
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.
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.
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.
the <div> and <p> tags
• The <div> 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 <div>• The <p> tag is like <div> but it signals the start
and end of a paragraph.
The <span> 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 <span> that belong together in a
line.
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.
Nielson's book
• page design 16—97• content design 98—160• site design 162—259• intranet design 260—293• accessibility 296—311• i18n 312—344• future predictions 346—376• conclusions 378—396
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.
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 1024×768 pixels. It should not be that way.
• WYSIWYG is dead! • Separate contents from presentation, use style
sheets.
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.
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.
semantics versus presentation
• The original HTML tags were all based on semantics. For example <h2> 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.
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.
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
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/krichel
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.
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.
ok, so good so far
• This has got us to page 51.• More next week.• Now back to HTML tags
header tags
• Headers <h1> to <h6>• Simple form of text formatting • Vary text size based on the header’s “level”• Actual size of text of header element is selected
by browser. • Results can vary significantly between user
agents.• All take the core attributes
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
<hr> 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.
the <img> 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: <img src=“thomas_krichel.jpg” alt=“picture of Thomas Krichel”>
the <img> 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 <img> supports the core attributes.
contents-based style tags• <abbr> encloses abbreviations• <acronym> encloses acronyms• <cite> encloses citations• <code> encloses computer code snippets• <dfn>encloses things being define• <em> encloses emphasized text• <kbd> encloses text typed on a keyboard• <samp> encloses literal samples• <strong> encloses strong text• <var> encloses variablesall admit the core attributes
physical style tags
• <b> encloses bold contents• <big>encloses big contents• <small> encloses small contents• <i> encloses italics contents• <sub> encloses subscripted contents• <sup> encloses superscripted contents• <tt> encloses typewriter-style contents
all admit the core attributes
the <br> 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 <br/>, this closes the tag.
the <pre> 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– < as <– > as >– & as &
• It takes the core attirbutes and a width attribute setting the number of characters per line.
<blockquote> and <q> tags
• <blockquote> quotes a paragraph• <q> 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.
the <a> 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, <a> takes the core attributes
the <a> 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 <link> tag.
• Ex: <a href=http://openlib.org/home/krichel>a nice man</a>.
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 URL#id 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 don’t need to reference its URL.
list tags: <ol> and <ul>
• <ol> creates an ordered list.• <ul> unordered list• of course, they also take the core attributes
the <li> 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.
• <li> takes the core.
definition lists tags
• <dl> encloses a definition list• <dt> encloses the term that is being defined• <dd> encloses the definition• All take the core attributes.
http://openlib.org/home/krichel
Thank you for your attention!