Embed Size (px)
Citation preview
LIS650 lecture 1
Major HTML
Thomas Krichel
2004-02-06
Administrative stuff
• Get your grade at http://wotan.liu.edu/home/krichel/lis650p04s/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
• abstract part– HTML tags at the beginning of the document– Generic attributes
• fun part– Text markup, links, and images– lists
• Krug on web design
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 <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 <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 <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.
<span> example
A worse poet however was J<span class="r">enny</span><br>
Her limericks weren’t worth a P<span class="r">enny</span><br>
Though the invention was s<span class="r">ound</span><br>
She always f<span class="r">ound</span><br>
That, whenever she tried to write <span class="r">any</span><br>
She always had one line to m<span class="r">any</span>
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.
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.
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.
cool html checking
• Add this in a block level element
<p>
<a href="http://validator.w3.org/check/referer">
<img src="/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31“
width="88"></a>
</p>• note the image is stored on wotan.
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
<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.
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 <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.
list tags
• <ol> creates an ordered list.– <li> encloses each item
• <ul> unordered list– <li> encloses each item
• <dl> encloses a definition list– <dt> encloses the term that is being defined– <dd> encloses the definition
• All take the core attributes and the i18n attributes.
Web site usability
• This is a big topic in the LIS community.• But it really comes down to common sense. • There is no absolute right/wrong, but one can
learn from experts– Krug
• not technical
– Nielsen• has tons of technical advice• weak on overall site design
– Morville and Rosenfeld • site architecture focus
Krug's book
• Short• Deals mainly with the issue of how to build
commercial web sites.• Here user confusion is the cause of lost money.• He mainly deals with sites that have
– extensive scale– searching and browsing– user interaction
• Our sites for this course do not have these features.
Krug's advice
• Krug's rule #1: Don’t make me think. – a site should be obvious– if it can not be obvious, it must be self-explanatory
• Things that make think– non-standard terms
• jobs• employment opportunities• job-o-rama
– links and buttons that are not obvious to find
search example
• Contrast– http://www.sl.nsw.gov.au/webcat/srchhelp_w.cfm– http://www.amazon.com
for search.• Note, however, that search forms are not part of
this course.
How people use the web
• Received wisdom would suggest – people read the page– then make the best decision.
• That is wrong. Instead, people – scan pages– look for something that seems vaguely related to the
current aim– click on it if clickable
• User satisfice (term by Herbert Simon, a cross between satisfying and sufficing)
why do they do that?
• Why do users satisfice?– Users are in a hurry.– The penalty for a wrong guess is low.– Weighing option does not seem much help.– Guessing is more fun.
• Users don't figure out how things work. They muddle through– It does not matter how things work– When they have found something that is useful to
them, users stick with it.
Krug's advice• Create clear visual hierarchy.
– the more important something is, the more prominent it should be
– things that relate logically should relate visually– things that are part of something else should be
nested visually within it.
• Use conventions– they have proven useful
• Break pages into separate parts• Make obvious what is clickable• Reduce visual noise.
Krug's advice
• Krug's second law: it does not matter how many times I have to click as long as each click is a mindless, unambiguous choice.
• Krug's third law: Get rid of half the words on each page, and then get rid of half of what is left.– no happy talk– no instructions
Building navigation
• For commercial web sites, people are usually trying to find something.
• It is more difficult than in a shop– no sense of scale– no sense of direction– no sense of location
• Navigation can– give users something to hold on to– tell users what is here– explain users how to use the site– give confidence in the site builder
Navigation elements
• Site ID• Sections of items• utilities
– link to home page– link to search page – separate instructions sheet
• Current location needs to be highlighted.
ways to do navigation
• Breadcrumbs like "store > fruit & veg > tomato"• Tabs, like the ones seen in Amazon.com
– Krug's favorite.
• A table on the left or right hand side that stays the same– will do just fine for us
• Pull-down menus• Rollovers
navigational elements on the page• All pages except should have navigation except
perhaps– home page– search page– instructions pages
• Page names are also important– every page needs one– in the frame of contents that is unique to the page– the name needs to be prominent– the name needs to match what users click to get
there.
Home page design
• For large site, it is a mission impossible• But above all it has to convey the big picture
– tagline• clear and informative• just long enough• differentiating• clear benefit showing• lively, personable and sometimes clever
– welcome blurb– but no mission statement
bad home pages
• put a banner add even though they don't need it• let deals drive the home page• promote everything• are greedy for user data
That's about all from Krug, folks
• The rest of the book is about how to do usability testing.
• Before he gets to that, we have the best part of the book, the cartoon page 131-132.
http://openlib.org/home/krichel
Thank you for your attention!
