Week 3 Lecture 1

1
Week 3 Lecture 1
COMP233B-08(HAM) Internet Applications

• HTML Forms labels form customisation
• Cascading Style Sheets (CSS)
• Inline, Internal External
• Colour specifications
• CSS Selectors
• HTML Document Tree
• CSS Validator

2
HTML Forms labels

• Some form controls automatically have labels
  associated with them (e.g. buttons) while most do
  not (text fields, checkboxes and radio buttons,
  and menus)
• http//www.w3.org/TR/html401/interact/forms.htmlh
  -17.9
• label element allows us to associate text
  precisely with form controls
• Otherwise we just associate indirectly through
  proximity
• Link the value of the for attribute with the id
  attribute
• ltLABEL for"firstname"gtFirst name lt/LABELgt
• ltINPUT type"text" id"firstname"gt

3
HTML Forms labels 2

• When we use labels the browser associates the
  text with the form control
• In practice, the label becomes clickable
• Which makes the form easier to use
• Bigger target to select
• Using labels is good practice for HTML forms
• Use them in Assignment 2!
• See sample file forms-labels.html

4
HTML Forms advanced

• size and maxlength attributes
• especially for text input
• typehidden
• for passing values (to the server) without user
  input
• typepassword
• hiding text as it is entered
• tabindex attribute
• controlling tab sequence
• accesskey attribute
• keyboard access

http//www.w3.org/TR/html401/interact/forms.html
5
Cascading Style Sheets (CSS)

• Used to define precise typographical and
  presentational information for HTML documents
  (very powerful)
• (IE) Browser support was patchy until IE6
• Still some cross-browser issues
• Where Firefox and IE differ in their displays
• BUT
• Ideally your HTML documents should be
  understandable by a person (or program) if CSS is
  turned off
• This is known as separation of content and
  presentation
• Good for displaying HTML in a variety of
  different situations
• Screen readers, small devices with limited
  displays, indexing robots of search engines (e.g.
  Googlebot)

6
CSS

• http//www.w3.org/Style/CSS/
• 3 main ways
• Inline
• Using a style attribute
• Internal
• in the head of the document
• Using class attribute and element selectors
• External
• In a separate CSS file
• Using class attribute and element selectors
• Also you can alter CSS properties dynamically in
  the browser using JavaScript

7
Inline CSS

• Using the style attribute, format
• css-property value
• ltp stylefont-family sans-serif gtsome
  textlt/pgt
• ltp stylefont-family sans-serif font-size
  12ptgtsome textlt/pgt
• Available properties
• http//www.w3.org/TR/CSS21/propidx.html
• Not every property applies to every HTML element
• See sample file css-examples.html

8
CSS Fonts

• font-family, font-size, font-style, font-variant,
  font-weight
• Font-family has 5 basic (or generic) options
• serif, sans-serif, monospace, cursive and fantasy
• cursive and fantasy not used much
• http//www.w3.org/TR/CSS21/fonts.htmlvalue-def-ge
  neric-family
• (Unusually) font-family takes a prioritised list
  of values
• font-family Gill, Helvetica, sans-serif
• The browser searches left to right to find a font
  that it has
• it is good practice to put a generic font as the
  last (rightmost) option

9
Selectors

• Inline CSS specifies which content the properties
  apply to by using the style attribute
• CSS applies to the content of the element with
  the style attribute
• This leads to lots of repetition and is not
  efficient
• ok for simple small cases
• Selectors enable more (and more powerful) CSS
• Every paragraph element should be in 12pt serif
  orange
• P font-family serif font-size 12pt color
  orange

10
Selectors 2

• The general pattern is
• Selector property1 value1 propertyN
  valueN
• Where Selector is any of the HTML elements in the
  body of a document
• Cant style title or meta elements
• Selector can also be a list of elements
• Element type selector there are other forms
  of selector
• H1, H2, H3 font-weight bold, text-indent 5px
  

11
Internal CSS

• We cant specify these rules in style attributes
• But there are style elements in the head of a
  document which can be used for this type of CSS
• ltstyle type"text/css"gt
• h1 color red
• lt/stylegt
• All text in H1 elements in this HTML page will be
  red
• Unless there are other (Internal) rules or inline
  style attributes

12
External CSS

• Internal CSS still requires duplication in
  multiple documents
• Even better is to define common CSS in a
  dedicated external CSS file and then link it to
  the HTML documents in which it is used
• Apply hypertext linking principles to the style
  information
• In the head of a document
• ltlink href"mystyle.css" rel"stylesheet"
  type"text/css"gt
• mystyle.css has no HTML in it just CSS rules

13
External CSS 2

• So one CSS file might control a whole web site of
  HTML content
• Either static documents or the output of programs
  on the web server
• Good as there is only one location to change
• Easy maintenance
• Also you can have many external CSS files
• If you use the same URL(s) across your site then
  the browser will cache the CSS file
• ? only 1 download, efficient

14
one CSS file controls the presentation of many
HTML files
CSS
site.css
1-way hypertext links The CSS file has no record
of how many HTML files link to it
HTML
HTML
HTML
HTML
ltlink href "site.css" rel"stylesheet"
type"text/css"gt
15
CSS Re-designs

• External CSS allows re-designs without changing
  the HTML document at all!
• If we change the CSS rules then the browser will
  display the HTML content differently
• These changes can completely change the way a
  document appears to a user
• Explore
• CSS Zen Garden http//www.csszengarden.com/
• The same HTML with different CSS style files

16
news.bbc.co.uk

• 9 CSS files
• Via Firebug

• Load sequence (here) is (roughly)
• HTML, CSS (head), JS (head), Images, Plugins

17
Box Model

• CSS uses a rectangular box model to layout HTML
  content
• Content, padding, borders and margins
• http//www.w3.org/TR/CSS21/box.html
• Best way to understand this is to set some values
  with different widths and values for these 4
  parts of the Box Model
• Using different colours
• box-model.html in Resources

18
Box Model
http//www.guistuff.com/css/images/boxmodel.png
19
Firebug is good for understanding the Box Model
Inspect mode
20
Firebug CSS
21
Defaults

• Browsers have default values for many CSS
  properties
• However different browsers have different
  defaults
• And many defaults arent 0
• Margins for example
• If you set (some) margins in (some) browsers then
  you will be changing the default values
• And so change the display

22
Firefoxs default CSS

• IEs default stylesheet appears to be hidden in
  the executable
• You can change how Firefox appears by editing
  html.css
• Make a copy before you do this!

C\Program Files\Mozilla Firefox\res\html.css
23
User style sheets

• Not used much, but their existence highlights
  that you dont really control the final display
  of web content

24
Variations in Web content display

• Unlike printed materials web content varies
  because of
• Display differences
• Aspect ratio, colour support, Hz, technology (CRT
  v LCD) etc, size (desktop, laptop, PDA, iPhone)
• Browser differences
• Version, standards v quirks mode(s), JS engines
• User differences
• User options, user style sheets, user custom JS
  (e.g. GreaseMonkey)
• Computer/Platform differences
• Font support, plugin availability/implementation,
  speed, memory
• In print you have much greater control over final
  appearance
• On the web you have to give up that control and
  accept that you see on your computer is not
  exactly the same as what many user will see

25
Box Model differences

• CSS adoption delayed by browser differences
• Recent IE versions (gt 6) are correct in
  standards mode
• Triggered by correct DocTypes

http//www.imustdesign.com/lectures/images/css_box
_model.gif
http//en.wikipedia.org/wiki/Internet_Explorer_box
_model_bug
26
Shortcut CSS properties

• Some design elements have 4 related properties
• E.g. margins, padding
• margin-left, margin-right, margin-top,
  margin-bottom
• There are shortcut ways to assign these
• P margin 10px
• Assigns 10 pixels to all 4 margins of all
  paragraph elements
• Note there are some special rules for collapsing
  vertical (top and bottom) margins so you might
  not get 10px vertically!
• http//www.w3.org/TR/CSS21/box.htmlcollapsing-mar
  gins

27
CSS Measurements

• 12pt 12 points, font-sizing
• 5px 5 pixels
• 10 relative to available space or normal size
• 15em em relative to the font-size of the
  parent element
• Also ex but this is not used (or supported) as
  much
• mm, cm, in (inches)
• http//www.w3.org/TR/CSS21/syndata.htmlvalue-def-
  length
• http//www.w3.org/TR/CSS21/syndata.htmlq15

28
CSS Colours (or Colors)

• 17 named colours (e.g. gray, orange, aqua,
  purple)
• Also system colours (e.g. ButtonHighlight) which
  are not often used
• Different ways to specify colours
• em color f00 / rgb /
• em color ff0000 / rrggbb /
• em color rgb(255,0,0)
• em color rgb(100, 0, 0)
• http//www.w3.org/TR/CSS21/syndata.htmlvalue-def-
  color

29
Advanced Selectors

• P font-size 120
• Specifies the properties for all paragraphs
• Suppose we have another set of paragraphs that we
  want to have a different appearance
• We can write inline CSS, but this is inefficient
  for large sites and difficult to maintain
• ltp classspecialgtSome text.lt/pgt
• If we add a class attribute to (some) of our
  HTML

30
Advanced Selectors 2

• then we can write CSS like this
• .special font-size 130 text-indent 2em
• which will apply to any elements with a class
  attribute of special
• And this
• P.special font-size 130 text-indent 2em
• will only apply to paragraphs with a class
  attribute of special

31
Advanced Selectors 3

• http//www.w3.org/TR/CSS21/selector.html
• ID selectors
• Precise formatting
• ID attribute in HTML, unique inside a document
• http//www.w3.org/TR/html4/struct/global.htmladef
  -id
• ltp idpara27gtThis is a paragraph.lt/pgt
• Ppara27 font-family serif

32
Advanced Selectors 4

• Descendant selectors
• http//www.w3.org/TR/CSS21/selector.htmldescendan
  t-selectors
• ltdivgt
• lth1gtYet another paragraph.lt/h1gt
• lt/divgt
• DIV H1 margin-left 3em
• This rule only matches H1 headings inside DIVs
• The H1 is a descendant of DIV in the Document Tree

33
HTML Document Tree
HTML
DIV is a descendant of BODY and HTML DIV is a
child of BODY DIV is the first-child of BODY DIV
is a parent of H1 DIV and P are siblings
HEAD
BODY
TITLE
META
DIV
P
H1
SPAN
http//www.w3.org/TR/CSS21/selector.htmlpattern-m
atching
34
Advanced Selectors

• Child selectors
• all P elements that are children of BODY
• body gt P line-height 1.3
• Adjacent Sibling selectors
• when a P element immediately follows a MATH
  element, it should not be indented
• math p text-indent 0
• Attribute selectors
• ll SPAN elements whose "class" attribute has
  exactly the value "example"
• spanclassexample color blue

35
CSS in practice

• http//www.w3.org/TR/CSS21/conform.htmldoctree
• http//www.w3.org/TR/CSS21/cascade.html
• the cascade isnt used most of the time
• The advanced selectors arent used much because
  of browser differences
• Not all are implemented in all major browsers
• Usually, you can do most things with
• Element type selectors (P, H1)
• Class selectors (classspecial)
• ID selectors (PspecialParagraph)
• Descendant child selectors (DIV .special, body
  gt P )
• Ordering, later rules override earlier rules

36
CSS Validator

• http//jigsaw.w3.org/css-validator/
• As with HTML validator 3 methods
• URL, upload and direct entry
• Note that if you have CSS associated with an HTML
  document then errors in either the CSS or the
  HTML could be the problem
• You need to validate both!

37
Logs Zeitgeist

• Web servers store information about the HTTP
  requests they receive
• http//www.waikato.ac.nz/cgi-bin/zeitgeist.cgi
• http//webteam.waikato.ac.nz/logs/
• http//www.google.com/press/zeitgeist.html
• Recently change to using Google Trends

38
Tips

• Local resources
• http//webteam.waikato.ac.nz/utilities/
• http//webteam.waikato.ac.nz/reference/macron_utf.
  shtml
• Check utf-8 character encodings and browser
  display
• e.g. Maori macrons
• Linkchecker are my hrefs ok?
• http//validator.waikato.ac.nz/checklink
• Extract meta element info
• http//www.waikato.ac.nz/cgi-bin/metageta.cgi
• Spellcheckers
• http//webteam.waikato.ac.nz/toolkit/spell-check.s
  html