Hypertext Markup Language

1
Hypertext Markup Language

• A quick introduction to HTML

2
What is HTML?

• Hypertext Markup Language
• Hypertext
• Computer based text with links to other pages
• Markup
• Metadata about the text

3
Markup example

• The markup
• This is ltbgtboldlt/bgt and ltigtitaliclt/igt.
• Would be displayed as
• This is bold and italic.

4
Notes

• HTML was intended for including information about
  the texts structure, NOT its formatting or
  layout
• Different browsers may display same HTML
  differently
• Many different versions of HTML
• HTML makes for simple good looking user interfaces

5
Markup for structure

• Source
• lth1gtMain headinglt/h1gt
• lth2gtSub headinglt/h2gt
• ltpgtThis is some textlt/pgt
• ltpgtAnd some morelt/pgt
• lth2gtAnother sub headinglt/h2gt
• ltpgtAnd yet more textlt/pgt
• Might be displayed as
• Main heading
• Sub heading
• This is some text
• And some more
• Another sub heading
• And yet more text

6
Controlling Layout, Formatting

• It is possible and best to specify formatting for
  each structural element independent of the HTML
  using CSS
• Cascading Style Sheets
• We will not cover this subject

7
About tags

• Tags are marked with ltgt (angle) brackets
• End tags are indicated with a / character
• ltbgt is a start tag
• lt/bgt is an end tag
• Most but not all start tags have a matching end
  tag and will affect the text in the middle
• Start tags can have attributes,
• eg lth1 stylecolor redgt
• style is an attribute
• color red is its parameter

8
Simple tags

• ltbgt, ltigt, ltcodegt,
• Format text inline
• ltpgt
• Creates a new paragraph
• Lines are re-wrapped blank space is discarded
• lth1gt, lth2gt, lth3gt,
• Create new headings

9
About entities

• Characters that form part of the markup language
  and extended characters can be represented as a
  special sequence eg,
• gt gt (greater than)
• lt lt (less than)
• amp (ampersand)
• All entities start with an ampersand () and end
  with a semicolon ()

10
Contexts

• Tags can be placed inside one another
• ltpgtThis is some ltbgtboldlt/bgt text in a
  paragraphlt/pgt
• Every tag is only valid in some contexts
• The whole document should be placed in an lthtmlgt
  lt/htmlgt tag, end tag pair
• Within this context there will be a ltheadgt
  lt/headgt pair for information about the whole page
• A ltbodygt lt/bodygt pair for the content of the page

11
More tags

• lttitlegt lt/titlegt
• The title for the document
• Valid only inside ltheadgt lt/headgt
• ltligt lt/ligt
• An item in a list
• Valid only inside ltulgt lt/ulgt or ltolgt lt/olgt

12
Hyperlinks

• ltagt tag
• href attribute
• lta href"groups.html"gtGroup informationlt/agt
• Links are relative to current page UNLESS they
  start with http// (or other access scheme)

13
Tables

• Tables are specified with the lttablegt tag
• Rows are specified with the lttrgt tag
• Cells are specified with the lttdgt tag
• A cell must be in a row which in turn must be in
  a table
• Browser will automatically determine how many
  rows and columns
• Can have one table inside another table
• A common way of controlling page layout (though
  there are better schemes)

14
Pictures

• Use the ltimggt tag
• No closing tag image inserted inline
• src attribute for location of image
• height and width attributes for size
• alt for text to display instead of image if image
  not available
• ltimg src"matt.jpg" alt"Matt" height"240"
  width"320"gt

15
Tags

• Block Level
• lth1gtlth2gtlth3gtltpgtltpregtltligt
• lthtmlgtltbodygtlttablegtlttrgtlttdgtltulgt
• Inline
• ltbgtltulgtltcodegtltagt
• No closing tag
• ltimggt ltbrgt lthrgt

16
Input with a webpage

• Can display a form with the ltformgt tag
• Method attribute how data will be sent to
  web-server (post or get)
• Action attribute the next page we will see once
  the form is submitted
• ltform method"get" action"next.html"gt
• More tags to build our form,
• ltinputgt
• ltselectgt
• lttextareagt

17
ltinputgt tag

• Most used tag for a form
• No closing tag
• Type attribute
• text - text entry
• password - concealed text entry
• hidden - undisplayed value
• checkbox - tick box
• radio - select alternatives
• file - uploading files
• reset - clear the form
• submit - send the form

18
More form tags

• lttextareagt tag
• Multiple line text input
• Need closing tag
• Anything between tags appears in form
• ltselectgt tag
• Select from a group of options
• Use ltoptiongt tag to specify each option

19
HTML versions

• There are many versions of html, best to specify
  which we are using at start of document,
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN" "http//www.w3.org/TR/html4/loos
  e.dtd"gt
• 4.01 transitional is what we will work with

20
Some final notes

• Html is best used to indicate structure
• Use css for page layout and especially styles
• There are many more tags than we have introduced
• Havent talked about
• css
• scripting (javascript)
• embedded objects (flash, java)
• frames