Week 2 Lecture 1

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

• Image Formats
• Validation form-based, upload URL-based
• Character set encoding
• (More) Table formatting
• Forms elements and GET URLs
• Fonts

ftp//ftp.ncsa.uiuc.edu/Web/Mosaic/Windows/Archive
/MosaicHistory.html
2
Images on the Web

• ltimggt element
• Common attributes src, width, height, alt, title
• http//www.w3.org/TR/html401/struct/objects.htmle
  def-IMG
• ltimg src"http//auckland-airport.co.nz/Images/au
  ckland_airport_logo.gif"gt
• src attribute value is a URL
• Any image on the web
• It is considered unfriendly (or worse) to
  hotlink to images on other servers without
  permission
• So (in pages you author) img src attributes will
  (usually) be to image files on your own server
  (so the URLs can be expressed as relative links)

http//en.wikipedia.org/wiki/Inline_linking
3
Image Formats

• Browsers usually support GIFs, PNGs, JPEGs/JPGs
• Also BMP, ICO,
• But not TIFFs, JPEG2000, DjVu
• JPEGS
• Lossy format, variable quality settings in image
  editing software
• Choose JPEGs for photos and photo-like images
• GIFs PNGs
• Loss-less formats, PNG usually produces smaller
  file sizes
• Choose GIFs or PNGs for flat colour, graphic
  text, simple logos and screenshots
• GIFs can also be animated, PNG animation (APNG,
  MNG) is not supported by browsers, so simple
  image animation on the Web has to be GIF

http//www.r1ch.net/img-formats/
4
Width, height, aspect ratios

• Height and width attributes are optional but
  recommended
• Browsers can display pages faster when they are
  present
• But be careful if the height and width arent
  the actual values of the image it will be scaled
  to fit
• Which can look weird
• If you are re-sizing an image you need to
  maintain the aspect ratio (width / height)

5
Text and Images

• Text associated with images is important
• Search engines, screenreaders
• ltimg alt"auckland airport logo" title "our new
  logo"
• longdesc"our new logo symbolises our
  airportness"
• src"http//auckland-airport.co.nz/Images/auckland
  _airport_logo.gif"gt
• alt (alternative) for when the graphic file is
  not relevant or available
• title for the popup yellow box
• longdesc not used much

ltimg title "Campus Photo"
6
Images and size

• As the whole user interface has to be downloaded
  over the network web interaction is slower than
  that on your local computer
• Reducing the size (bytes) of pages is important
• Look at the source for the Google home page
• Usually this means reducing image sizes

7
Analysing Uni home page

• HTML 12 K
• Images 36 K
• CSS 12 K
• JS 2 K

8
Image sizes

• Main image is 13 of pixels but 34 of the size
  in bytes
• This is typical of web pages
• Common error
• You have a large image (MBs) and want a thumbnail
  to show
• For example, in search result listings
• Rescale the image to be small using height and
  width attributes
• But the entire image is loaded by the browser
• So the page becomes very slow
• Even though only small images are displayed and
  maybe only 1 or 2 will actually be viewed
• ? Create thumbnail images for this purpose

9
Validation of HTML

• A lot of HTML generation used to be hand-coded in
  general text editors
• ? lots of invalid HTML on the Web
• ? browser writers coded around the mistakes
• Browsers are quite resilient to bad HTML
• To encourage better quality HTML the W3C produced
  a validation service
• http//validator.w3.org/
• Valid HTML is easier for browsers to display,
  easier for search engine robots to index, easier
  for processing by any other program (e.g.
  screenreaders)

10
Validation

• http//validator.waikato.ac.nz/
• Local version of W3C validator
• 3 methods
• 1. Enter into the form textarea
• 2. File upload
• 3. URL
• Requires your HTML document to be on a web server
• 1 2 dont require your HTML to be on a web
  server
• 2 3 require character-set encoding information
• 1 assumes the character-set

11
http//validator.waikato.ac.nz/detailed.html
utf-8 is a sensible choice
HTML 4 Transitional is a sensible choice
12
Doc Types and Character encoding

• Doc Type
• This HTML document will follow these rules
• This document is written in French
• Character Set Encoding
• This HTML document is represented using these
  characters
• French words are encoded as normal ISO Latin 1
  characters
• And not as morse code, braille, semaphore flags,
  encrypted text, txt speak etc ..
• Element in the head of the HTML document, e.g.
• ltmeta http-equiv"Content-Type"
  content"text/htmlcharsetiso-8859-1"gt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetUTF-8"gt
• Sometimes a web server might set this value for
  you (thats why its http-equiv, equivalent to the
  http header set by a web server)

13
HTML Entities

• How do you write a lt ?
• Without it being interpreted as the start of a
  HTML tag?
• lt
• http//www.w3.org/TR/html4/sgml/entities.html
• lt!ENTITY lt CDATA "60" -- less-than sign,
  U003C ISOnum --gt
• Either lt or 60
• http//www.w3schools.com/tags/ref_entities.asp
• is a good visual reference list
• amp is how you write an

14
More Table formatting

• Borders, cellspacing, cellpadding, colour
• lttable width "100" border"0" cellpadding5"
  cellspacing5"gt
• lttrgtlttdgt1lt/tdgtlttdgt1lt/tdgtlttdgt1lt/tdgtlttdgt1lt/tdgtlt/trgt
• lt/tablegt
• Widths and heights can be expressed as ages or
  pixels
• Can mix units inside elements but not inside an
  attribute
• Width as age (of available space)
• border, cellpadding and cellspacing are pixels

15
Merge cells

• lttd colspan"2"gttextlt/tdgt
• Make one cell cross 2 columns of the table
• Note this means you need one less lttdgt in that
  row
• lttd rowspan"2"gttext2lt/tdgt
• Make one cell cross 2 rows of the table

16
DIV and SPAN

• DIV (division) can be used to indicate sections
  of a page
• But DIV and SPAN are mainly used together with
  CSS
• to alter the presentation of content
• All HTML elements are defined here
• http//www.w3.org/TR/REC-html40/index/elements.htm
  l

17
HTML Forms

• Allow input
• Rather than just reading Web content
• Structural HTML HTTP gives us a read-only Web
• Used in 2 main ways
• 1. To gather content that can be sent back to a
  web server
• Original intent
• 2. As a source of content for browser-based
  interaction
• Programs running in the browser
• Practically, this means JavaScript which is
  part of all main browsers
• It is possible to mix 1 2 together
• http//www.w3.org/TR/html401/interact/forms.html

18
Form Elements
Select (one choice from many)
Text input
Submit button
Radio buttons
checkbox
19
Sample file forms.html

• ltpgt Toppings?
• ltinput name"t" value"Green Peppers"
  checked"checked" type"checkbox"gtGreen Peppers
• ltinput name"t" value"Jalepeno"
  type"checkbox"gtJalepeno
• ltinput name"t" value"Onions" type"checkbox"gtOni
  ons lt/pgt

Form elements mix with other HTML elements
20
2 Ways of Submitting Forms to a Web Server

• GET
• Used in the normal HTTP request (Live HTTP
  headers)
• Puts the values into the URL
• http//www.google.co.nz/search?hlenqwaikatobtn
  GGoogleSearchmeta
• Google NZ query for waikato
• As its a URL it can used in pages as a link, as
  a bookmark, emailed etc
• Technically should be repeatable ( no effect on
  the server-side)
• POST
• Used for bigger chunks of data
• Not linkable via a URL
• Used for file upload
• http//www.cs.tut.fi/jkorpela/forms/methods.html
• For a detailed discussion

21
GET URLs

• Are constructed from
• URL in action attribute of the form start tag
• means the current page
• Names of specific form elements
• Checkbox1, textfield1
• Values of those form elements
• Is the checkbox checked?, what is in the text
  field?
• All information is in plain text in the URL
• Some URL-encoding occurs for particular
  characters
• Try spaces, punctuation and the shifted keys 1 to
  0
• http//www.w3schools.com/tags/ref_urlencode.asp

22
Mapping form elements to GET URLs

• ltform action"" method"get"gt Enter your query
  here
• ltinput type"text" name"querytext"gt
• ltinput type"submit" gt lt/formgt

23
Reverse Engineering the UW search
24
Forms GET URLs

• The URLs in the action attribute in a form tag
  can be from anywhere on the web
• The name-value pairs in a GET URL derive from the
  form elements
• ltinputgt, ltselectgt etc
• You can inspect the URL and create form elements
  that produce matching name-value pairs
• The form is submitted to the URL in the action
  attribute and the rest of the GET URL is
  constructed from the form elements
• So you can create a new interface to most search
  systems on the web be careful though they might
  not like it!

25
Fonts

• ltfont facearialgthellolt/fontgt
• Allowed in earlier versions of HTML and in HTML 4
  Transitional but is now deprecated
• This means there is a preferred, more powerful
  and reliable way to do text formatting (and other
  presentational aspects of page design)
• Valid in a Transitional DocType not a Strict
  DocType
• The preferred way is Cascading Style Sheets (CSS)
  next week
• Deprecated elements may become obsolete in
  future versions of HTML
• http//www.w3.org/TR/html4/conform.htmldeprecated
  

26
Tips

• Page Info
• Firebug
• Net tab shows all components of a page and their
  sizes
• View Selection Source
• Firefox