HTML

1
HTML

• HyperText Markup Language-

2
Learning outcomes

• Code web pages using HTML
• Explain why it is advisable to use XHTML rather
  than HTML
• Describe some technologies available for dynamic
  web pages
• Explore some problems of html

3
Essential Reading

• William Buchanan, Mastering The Internet, Ch. 6-8
• Mike Lewis, Understanding Javascript,
  June-Jully 2000
• Chuck Masciano and Bill Kennedy, HTML and XHTML
  the definitive guide, for reference
• http//www.pcnetworkadvisor.com
• Introductory materials on HTML XHTML either a
  text book such as
• John Shelly, HTML AND CSS explained, or
• http/www.webMonkey.com
• http//www.w3schools.com

4
What is an HTML File?

• HTML stands for HyperText Markup Language
• An HTML file is a text file containing small
  markup tags
• The markup tags tell the Web browser how to
  display the page
• An HTML file must have an htm or html file
  extension
• An HTML file can be created using a simple text
  editor

5
HTML contd.

• HyperText Markup Language--HTML is a collection
  of platform-independent styles (indicated by
  markup tags) that define the various components
  of a World Wide Web document. HTML was invented
  by Tim Berners-Lee while at CERN, the European
  Laboratory for Particle Physics in Geneva.

6
HTML Basics

• HTML documents are plain-text (also known as
  ASCII) files that can be created using any text
  editor (e.g., Emacs or vi on UNIX machines
  SimpleText on a Macintosh Notepad on a Windows
  machine). You can also use word-processing
  software if you remember to save your document as
  "text only with line breaks".

7
HTML Basics

• An element is a fundamental component of the
  structure of a text document. Some examples of
  elements are heads, tables, paragraphs, and
  lists. Think of it this way you use HTML tags to
  mark the elements of a file for your browser.
  Elements can contain plain text, other elements,
  or both.

8
HTML Basics

• To denote the various elements in an HTML
  document, you use tags. HTML tags consist of a
  left angle bracket (lt), a tag name, and a right
  angle bracket (gt). Tags are usually paired (e.g.,
  ltH1gt and lt/H1gt) to start and end the tag
  instruction. The end tag looks just like the
  start tag except a slash (/) precedes the text
  within the brackets.

9
HTML Basics

• lthtmlgt ltheadgt ltTITLEgtA Simple HTML
  Examplelt/TITLEgt lt/headgt ltbodygt ltH1gtHTML is
  Easy To Learnlt/H1gt ltPgtWelcome to the world of
  HTML. This is the first paragraph. While short it
  is still a paragraph!lt/Pgt ltPgtAnd this is the
  second paragraph.lt/Pgt lt/bodygt lt/htmlgt

10
HTML Basics

• Markup Tags
• HTML
• This element tells your browser that the file
  contains HTML-coded information. The file
  extension .html also indicates this an HTML
  document and must be used.

11
HTML Basics

• HEAD
• The head element identifies the first part of
  your HTML-coded document that contains the title.
  The title is shown as part of your browser's
  window

12
HTML Basics

• TITLE
• The title element contains your document title
  and identifies its content in a global context.
  The title is typically displayed in the title bar
  at the top of the browser window, but not inside
  the window itself.

13
HTML Basics

• BODY
• The second--and largest--part of your HTML
  document is the body, which contains the content
  of your document (displayed within the text area
  of your browser window).
• All other tags now come within the body tag.

14
HTML Basics

• Headings
• HTML has six levels of headings, numbered 1
  through 6, with 1 being the largest. Headings are
  typically displayed in larger and/or bolder fonts
  than normal body text. The first heading in each
  document should be tagged ltH1gt.
• The syntax of the heading element is ltHygtText
  of heading lt/Hygt where y is a number between 1
  and 6 specifying the level of the heading.

15
HTML Basics

• Paragraphs
• Unlike documents in most word processors,
  carriage returns in HTML files aren't
  significant. In fact, any amount of whitespace --
  including spaces, linefeeds, and carriage returns
  -- are automatically compressed into a single
  space when your HTML document is displayed in a
  browser. A Web browser ignores this line break
  and starts a new paragraph only when it
  encounters another ltPgt tag

16
Markup languages

• HTML places primary emphasis on structure
• paragraphs, headings, lists, images, links, .
• HTML places secondary emphasis on style (CSS)?
• fonts, colours, .
• HTML does not label the meaning of the text (XML)?

17
A basic document

• Every document should start with the following
  line

lt!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.0
Transitional//ENgt

• There are three required elements, defined by the
  tags lthtmlgt, ltheadgt and ltbodygt

lthtmlgt ltheadgt lttitlegtMy Home Pagelt/titlegt
lt/headgt ltbodygt lth1gtWelcomelt/h1gt
lt/bodygt lt/htmlgt
18
Basic structure elements

• first and last tags
• The HEAD section
• must come before the BODY section
• contains generic information about the document
• Elements specified in the HEAD section can
  include
• title, link, script, style
• The BODY section
• contains the content of the document (text,
  images etc)
• this content is structured by other tags

19
Block elements

• Block elements define sections of text, usually
  preceded by a blank line
• ltpgtlt/pgt - paragraph
• lth1gtlt/h1gt...lth6gtlt/h6gt - headings
• ltpregtlt/pregt - preserve (original format)?
• ltblockquotegtlt/blockquotegt - indented text
• ltdivgtlt/divgt - division
• used to identify a section of the document that
  may be subject to special formatting (for
  example, using stylesheets).

20
Paragraphs

• Paragraphs ltpgt...lt/pgt
• force a break between the enclosed text and the
  text surrounding it
• the tagged region of text may be subject to
  special formatting
• ltp align"center"gtHere is another paragraphlt/pgt
• align is an attribute of the paragraph tag
• center is the value of the align attribute

ltpgthere is a piece of text that has been placed
inside a paragraphlt/pgt ltp align"center"gtHere is
another paragraphlt/pgt
21
Headings

• Six levels of importance lth1gt...lth6gt
• Use headings to divide document into sections

lthtmlgt ltheadgt lttitlegtHeadingslt/titlegt
lt/headgt ltbodygt lth2gtChapter 1lt/h2gt lth3gt1.
Introductionlt/h3gt This is the introduction
lth3gt2. Next sectionlt/h3gt This is the next
section lth4gt2.1 A subsectionlt/h4gt This is a
subsection lt/bodygt lt/htmlgt
22
Element relationships

• The elements marked by tags form a hierarchy
• The root element is html (marked by
  lthtmlgt...lt/htmlgt)?
• It usually has two children head and body
• each of these are further subdivided
• There are rules for which elements can contain
  other elements
• e.g. headers cannot contain headers
• see http//www.w3.org/ for a full list of rules
• Elements must not overlap each other
• we cannot have lth1gt...lta..gt ... lt/h1gt...lt/agt
• we can have lth1gt...lta..gt ... lt/agt...lt/h1gt

23
Inline descriptive elements

• Descriptive elements affect the appearance of
  text depending on how the text is described
• ltemgtlt/emgt emphasis, usually with italics
• ltstronggtlt/stronggt strong, usually with bold
• ltcitegtlt/citegt citation, usually in italics
• ltcodegtlt/codegt usually results in monotype spacing

ltbodygt A ltemgtfascinatinglt/emgt subject that I
ltstronggtmustlt/stronggt understand lt/bodygt
24
Inline explicit style elements

• ltboldfacegtlt/boldfacegt
• ltbiggtlt/biggt bigger font than surrounding text
• ltsmallgtlt/smallgt smaller font than surrounding
  text
• ltigtlt/igt italics
• ltsgtlt/sgt strikethrough
• ltsubgtlt/subgt subscripts
• ltsupgtlt/supgt superscripts
• ltspangtlt/spangt delimits text for stylesheet
  control
• ltdivgtlt/divgt delimits blocks of text for
  stylesheet control

25
Inline explicit style elements

• ltfontgt attributes
• face - name of font (must be installed)?
• "arial", "times", "verdana", "helvetica"
• size - absolute size (1-7), or relative to
  previous text
• "2", "5", "7", "1", "-2"...
• color - hexadecimal RGB, or a named color
• "3399dd", "blue", "red"
• weight - boldness from 100, 200, ..., 900
• "100", "300", "900"
• e.g.

ltfont face"arial" size"1" color"pink"
weight"300"gt
26
Unordered lists

• Unordered lists ltulgt...lt/ulgt
• ltligt...lt/ligt for the list elements
• each item has a bullet

some normal text ltulgt ltligtappleslt/ligt ltligtorangeslt
/ligt ltligtpearslt/ligt ltligtbananaslt/ligt lt/ulgt
27
Ordered lists

• Ordered lists ltolgt...lt/olgt
• ltligt...lt/ligt for the list elements
• each item has a number

some normal text ltolgt ltligtappleslt/ligt ltligtorangeslt
/ligt ltligtpearslt/ligt ltligtbananaslt/ligt lt/olgt
28
Definition lists

• ltdlgtlt/dlgt The enclosing tags
• ltdtgtlt/dtgt The definition term
• ltddgtlt/ddgt The definition

ltdlgt ltdtgtMIMElt/dtgt ltddgt Multipurpose...
lt/ddgt ltdtgtFTPlt/dtgt ltddgt File transfer...
lt/ddgt ltdtgtTCPlt/dtgt ltddgt Transmission...
lt/ddgt lt/dlgt
29
Nested lists

• A list may contain another list
• The inner list is nested inside the outer list

ltbodygt ltolgt ltligtappleslt/ligt ltulgt
ltligtredlt/ligt ltligtgreenlt/ligt lt/ulgt
ltligtorangeslt/ligt ltligtpearslt/ligt
ltligtbananaslt/ligt lt/olgt lt/bodygt
30
Comments

• Comments are delimited by lt!-- and --gt
• lt! this is a comment --gt
• Comments may span multiple lines

ltbodygt lt!-- this is a comment --gt lt/bodygt
31
Horizontal lines

• To insert a horizontal line to divide up parts of
  a document we use the empty tag lthrgt
• Attributes align, size (in pixels), width (in
  pixels or percentage), noshade

ltbodygt lth1gtChapter 1lt/h1gt lthr align"center"
size"3" width"50" noshadegt lth2gtIntroductionlt/h
2gt lt/bodygt
32
Special characters
ltbodygt A ltemgt lt fascinating gt lt/emgt subject
that I ltstronggtmnbspunbspsnbsptlt/stronggt
understand lt/bodygt

• Some characters such as lt, gt, " and have
  special meanings.
• To prevent them being interpreted as HTML code,
  they must be written as follows lt gt quot
  amp
• Blank space is normally ignored in HTML. To
  include a space in your document use nbsp

33
Links

• The link (anchor) element ltagt...lt/agt provides
  hypertext links between
• different documents (using a URL)?
• different parts of an individual document
• User selection of the link (hot spot) results in
• retrieval and display of the designated document
• movement to relevant part of same document

ltbodygt The Department of lta href"http//www.doc.
gold.ac.uk/index.html"gt Computer Sciencelt/agt is a
very .... lt/bodygt
34
Link with URL
Example
ltbodygt The Department of lta href"http//www.doc.
gold.ac.uk/index.html"gt Computer Sciencelt/agt is a
very .... lt/bodygt

• The href attribute gives the URL of the target
  page
• The text between the tags is highlighted
  selecting it activates the link

35
Relative addressing

• The previous example gave the full path name,
  known as the absolute address

lta href"research.html"gtResearchlt/agt lta
href./pub.html"gtPublicationslt/agt lta
href"../../index.html"gtComputer Science homelt/agt

• The root directory for the link is assumed to
  be the directory containing the parent page of
  the link

36
Images

• Images are included using the empty tag ltimggt
• Example
• ltimg src"mypicture.gif" alt"my picture"gt
• The src attribute specifies the file containing
  the image
• absolute or relative path names can be used (see
  notes for links)?
• The alt attribute specifies the text to be
  displayed if the image is not viewed
• some users choose not to display images (for
  faster download)?
• also used for compatibility with older browsers

37
Image attributes

• The size attributes control the size of the image
• ltimg src"cat.gif" height"60" width"90"
  aligntop alt"cat"gt
• The align attribute controls the vertical
  location of the image, relative to the line of
  text
• align"top" top of image aligned with top of
  text
• align"middle" centre of image aligned with
  centre of text
• align"bottom" bottom of image aligned with
  baseline of text
• The align attribute also controls the horizontal
  location of the image, relative to the line of
  text
• align"left" image aligned with left margin
• align"right" image aligned with right margin

38
Links with images

• A link element can include an image instead of
  text
• both images and text can be included if required

ltbodygt Enter my world of cats lta
href"cats.html"gtltimg src"cat.gif" height"60"
width"60" align"middle" alt"cat"gtlt/agt lt/bodygt
39
Colour

• Colours are specified with hexadecimal numbers
  for the red, green and blue primary colours,
  preceded by a .
• To set the background colour of a web page

ltbody bgcolor"994422"gt
40
Colour RGB Model

• ff0000 (red),
• 00ff00 (green)?
• 0000ff (blue)?
• ffff00 (yellow)?
• ...
• 3395ab (a pastel blue)?

41
Colour
ltbody text"994422"gt

• To set the colour of all text on a page

• In the body element, the colour of link text can
  be controlled with the following attributes
• link for an un-visited link
• vlink for a visited link
• alink for a link that is currently selected by
  the mouse
• Example

ltbody text"000000" link"0000ff"gt
42
Colour

• To set the colour of an individual piece of text
  use the font element (or preferably stylesheets
  see later)

ltbody bgcolor"3395ab"gt Text in quotes ltfont
color"ff0000"gt"such as this"lt/fontgt has a
different colour lt/bodygt
43
Colour names

• Netscape and Internet Explorer allow textual
  names for colours instead of hexadecimal
• This is OK provided the page is not looked at by
  a browser that does not support colour names
• For example

ltbody bgcolor"gray" text"black" link"blue"gt
44
Background patterns

• Rather than a uniform color
• You can give the background of web page a
  pattern as follow

ltbody background"tileimage.gif"gt
45
Forms

• Server-based programs may return data to the
  client as a web page
• Client-side scripts can read input data
• To validate the data, prior to sending to server
• To use in local processing which may output web
  page content that is displayed on the client

46
Example applications

• Questionnaires to provide feedback on a web site
• e-commerce, to enter name, address, details of
  purchase and credit-card number
• request brochures from a company
• make a booking for holiday, cinema etc.
• buy a book, cd, etc
• obtain a map giving directions to a shop
• Run a database query and receive results (an
  important part of e-commerce)?

47
Input types

• text
• checkbox
• radio (buttons)?
• select (options)?
• textarea
• password
• button
• submit
• reset
• hidden
• file
• image

48
The method and action attributes

• The method attribute specifies the way that form
  data is sent to the server program
• GET appends the data to the URL
• POST sends the data separately
• The action attribute specifies a server program
  that processes the form data (often as a URL)?

ltbodygt ltform method"POST" action"comments.php"gt
lth2gtTell us what you thinklt/h2gt lt!-- etc
--gt lt/formgt lt/bodygt
49
The input element type"text"

• The type attribute specifies the type of user
  input
• The name attribute gives an identifier to the
  input data

ltform method"POST" action"comments.php"gt
lth2gtTell us what you thinklt/h2gt Name ltinput
name"name" type"text" size"20"gtltbrgt Address
ltinput name"address" type"text"
size"30"gt lt/formgt
50
The input element type"checkbox"

• The name attribute is used to define a set of
  checkboxes
• The value attribute identifies the individual
  checkbox
• If the checked attribute is set the box is
  initially checked

How did you hear about this web site?ltbrgt A
friend ltinput type"checkbox" namename"
value"friend"gtltbrgt Search engine ltinput
type"checkbox" namename" value"engine"gtltbrgt
51
The input element type"radio"

• Radio buttons are similar to checkboxes, but only
  one can be selected
• To select a button by default, use the checked
  attribute (for one button only)?

How did you hear about this web site?ltbrgt A
friend ltinput type"radio" namename"
value"friend"gtltbrgt Search engine ltinput
type"radio" namename" value"engine"gtltbrgt lt!
etc --gt
52
The input element type"button"

• The name attribute uniquely identifies a button
• The value attribute gives a label to the button
• Actions can be associated with buttons using
  JavaScript
• see later

Do you want to receive any further
informationltbrgt ltinput type"button" name"yes"
value" Yes "gt ltinput type"button" name"no"
value" No "gtltbrgt
53
The input element type"submit/reset"

• type"submit"
• clicking this button sends the form data to the
  program (URL) specified in the action attribute
  of the form
• type"reset"
• clicking this button clears all data entered so
  far

Thank youltbrgt ltinput type"submit" name"send"
value"Send"gt ltinput type"reset" name"clear"
value"Clear"gtltbrgt
54
The input element type"password/file/hidden"

• type"password"
• similar to type"text" except that the input is
  echoed with asterisks (so not visible)?
• type"file"
• provides a file dialogue box to specify a file
  that is sent to the server
• type"hidden"
• similar to text input, but the value attribute is
  used to specify data that is to be sent to the
  server. Nothing appears on the screen.
• The data might be set by a server program to keep
  track of the details of a particular transaction.

55
The textarea element

• Used for multi-line text input
• The size of the input area is specified with the
  cols and rows attributes
• Any text placed inside the element appears in the
  input area (this can be deleted).

Please write your commentsltbrgt lttextarea
name"comments" rows"5" cols"20"gt put text
here lt/textareagt
56
The select element

• The select element provides a menu of options
• An option can be selected by default using the
  selected attribute (otherwise the first in the
  list is initially selected)?

How do you rate this site?ltbrgt ltselect
name"rating"gt ltoptiongtGood ltoption
selectedgtBad ltoptiongtUgly lt/selectgt
57
Tables

• Tables provide a means of organising the layout
  of data
• A table is divided into rows and columns these
  specify the cells of the table

58
Tables
lttable border"1"gt lttrgt ltthgtNamelt/thgt lttdgtA
B Morganlt/tdgt lttdgtD P Joneslt/tdgt lt/trgt lttrgt
ltthgtCourselt/thgt lttdgtFishinglt/tdgt
lttdgtSailinglt/tdgt lt/trgt lttrgt ltthgtYearlt/thgt
lttdgt8lt/tdgt lttdgt5lt/tdgt lt/trgt lttrgt lt/tablegt

• lttablegt main element
• lttrgt table row
• ltthgt table header
• lttdgt table data

59
Rows and Columns
lttable border"1"gt lttrgt ltth colspan"2"gtNamelt/t
hgt ltthgtCourselt/thgt ltthgtYearlt/thgt lt/trgt lttrgt
lttdgtA Blt/tdgt lttdgtMorganlt/tdgt lttd
rowspan"2"gtFishinglt/tdgt lttdgt5lt/tdgt lt/trgt
lttrgt lttdgtD Jlt/tdgt lttdgtJoneslt/tdgt
lttdgt8lt/tdgt lt/trgt lttrgt lt/tablegt

• Cells can span multiple columns and multiple rows
  with the colspan and rowspan attributes

60
The align and width attributes

• The align attribute determines the position of
  the text within a cell
• The width attribute determines the width of the
  row relative to the table

lttable border"1" align"center"gt lttrgt ltth
colspan"2" width"60"gtNamelt/thgt ltth
rowspan"2"gtCourselt/thgt ltth rowspan"2"gtYearlt/th
gt lt/trgt lttrgt ltthgtLastlt/thgt ltthgtInit.lt/thgt
lt/trgt lttrgt lttdgtMorganlt/tdgt lttdgtABlt/tdgt
lttdgtFishinglt/tdgt lttd align"center"gt5lt/tdgt
lt/trgt lt! etc --gt
61
Table attributes

• Table attributes
• align alignment relative to the page
• width in pixels or percentage of page width
• border - width of border (pixels)?
• cellspacing separation between cells (pixels)?
• cellpadding - space around data inside cell
  (pixels)?
• bgcolor - background colour (inside cells)?

• Furthermore
• The ltcaptiongt element puts a title above the table

62
Table attributes
lttable border"3" align"center" cellspacing"6"
cellpadding"6" bgcolor"cyan"gt ltcaptiongt
lth2gtCourse Datalt/h2gt lt/captiongt lttrgt
ltthgtNamelt/thgt ltthgtCourselt/thgt ltthgtYearlt/thgt
lt/trgt lttrgt lttdgtA B Morganlt/tdgt
lttdgtFishinglt/tdgt lttdgt5lt/tdgt lt/trgt lt! etc --gt
63
Frames and Framesets

• A frameset partitions a web browser window so
  that multiple web documents can be displayed
  simultaneously.
• Example application To maintain a permanently
  visible directory of links within your site,
  while also displaying one or more selected
  documents from the site.

64
Framesets
lthtmlgt ltheadgtlttitlegtFrames 1lt/titlegtlt/headgt
ltframeset cols"140,"gt ltframe name"navF"
src"navigation.html"gt ltframe name"mainF"
src"intro.html"gt lt/framesetgt lt/htmlgt

• The frameset element replaces the body element
• frameset has attributes cols or rows, defined in
  terms of pixels, percentage() or unspecified ()
  
• this splits the window into two or more columns
  or rows

65
Frame attributes
ltframeset cols"140,"gt ltframe name"navF"
src"navigation.html"gt ltframe name"mainF"
src"intro.html"gt lt/framesetgt

• The name attribute uniquely identifies the frame.
  It may be used as the target in an anchor (ltagt)
  element
• The src attribute specifies the web page to be
  placed in the frame initially (it may
  subsequently be overwritten)?

66
Frame attributes
ltframeset cols"140,"gt ltframe name"navF"
src"navigation.html"gt ltframe name"mainF"
src"intro.html"gt lt/framesetgt

• The scrolling attribute ("auto", "yes", "no")
  specifies whether the frame is to have scroll
  bars
• The frameborder attribute ("0", "1") specifies
  whether the frame is to have a border

67
navigation.html

• The anchor tag has a target attribute
• takes the name of the frame used to display the
  information
• All anchors below are targeted to the "mainF"
  frame

lthtmlgtltheadgtlttitlegtNavigation Barlt/titlegtlt/headgt
ltbodygtltcentergt lta href"course.html"
target"mainF"gtHTML Courselt/agtltbrgtltbrgt lta
href"paragraph.html" target"mainF"gtParagraphslt/a
gtltbrgt lta href"headings.html"
target"mainF"gtHeadingslt/agtltbrgt lta
href"ulists.html" target"mainF"gtUnordered
listslt/agtltbrgt lta href"olists.html"
target"mainF"gtOrdered listslt/agtltbrgt lta
href"nlists.html" target"mainF"gtNested
listslt/agtltbrgt lta href"intro.html"
target"mainF"gtHomelt/agtltbrgt lt/centergtlt/bodygt lt/ht
mlgt
68
intro.html

• A simple document which is initially placed in
  the "mainF" frame
• This is replaced when a user clicks on a link in
  the "navF" frame

lthtmlgt ltheadgtlttitlegtInternet Computinglt/titlegtlt/h
eadgt ltbodygt lth2gtWelcome to the HTML
Courselt/h2gt ltpgt lth4gtPlease select the
subject of...lt/h4gt lt/pgt lt/bodygt lt/htmlgt
69
Nested framesets
lthtmlgt ltheadgtlttitlegtFrames 2lt/titlegtlt/headgt
ltframeset cols"140,"gt ltframe name"navF"
src"navigation.html"gt ltframeset
rows"30,70"gt ltframe name"upperF"
src"intro.html"gt ltframe name"lowerF"
src"course.html"gt lt/framesetgt
lt/framesetgt lt/htmlgt
70
Noframes

• Some browsers cannot process frames. Alternative
  content should be provided using the noframes
  element

lthtmlgt ltheadgtlttitlegtFrames 1lt/titlegtlt/headgt
ltframeset cols"140,"gt ltframe name"navF"
src"navigation.html"gt ltframe name"mainF"
src"intro.html"gt lt/framesetgt ltnoframesgt
ltbodygt Something here for browsers not
supporting frames lt/bodygt lt/noframesgt lt/htmlgt
71
Stylesheets

• One of the most important functions of HTML is
  its ability to separate the content and
  presentation of a web document
• Aspects of the document presentation include
• positioning on the page
• choice of fonts
• colours and backgrounds
• borders

72
Styles

• A style is a set of formatting instructions that
  can be applied to a piece of text.
• Styles can be defined
• Within a single HTML tag Inline styles
• In the ltheadgt section, and applied to the whole
  document Global styles
• In external files, and can be applied to any
  document by including the URI of the file
  Stylesheets

73
Inline styles

• Every tag has a style attribute
• This can be assigned a style definition
• A style definition is a list of property-value
  pairs
• a property is separated from its value by a colon
• property-value pairs are separated by semi-colons
• the list is delimited by quotation marks
• A property-value pair is also called a
  declaration
• Inline styles only affect the text contained in
  the tag

lth1 style"color2255ff borderridge"gtInline
styleslt/h1gt
74
Inline styles
ltbodygt lth1 style"colorblue borderridge"gt
Inline styleslt/h1gt ltp style"margin-left10
backgroundffffcc"gt some text . . . some
text lt/pgt ltbodygt

• The heading is boxed with the text displayed in
  blue
• The paragraph is indented by 10 (from the left)
  and has a cream background

75
Global styles

• A style can be defined in the head of the
  document using the ltstylegt tag
• The style declaration is placed inside a comment
  so that it can be ignored by older browsers
• Each style rule consists of the name of an
  element (selector) followed by a list of
  property-value pairs enclosed in curly brackets

ltheadgt lttitlegtStyleslt/titlegt ltstylegt lt!--
h1 color red border thin groove
text-aligncenter --gt lt/stylegt lt/headgt ltbo
dygt lth1gtSimple styleslt/h1gt lt/bodygt
76
Example
ltheadgt ltstylegt lt!-- h1 color red
border thin groove text-aligncenter
p margin-left 10 border ridge
background ee8822 --gt lt/stylegt lt/headgt ltb
odygt lth1gtSimple styleslt/h1gt ltpgtsome text . . .
lt/pgt lt/bodygt

• A global style applies to every instance of the
  corresponding element in the document

77
Stylesheets

• Styles can be declared in separate files called
  stylesheets.
• A stylesheet is linked to a web document by
  including the following line in the head section

ltlink rel"StyleSheet" type"text/css" href"URL"gt

• rel specifies the type of link being used
• href specifies a hyperlink to the stylesheet file
• type specifies the MIME type of the data
• text/css describes the cascading style sheets
  type

78
Multiple stylesheets

• The first stylesheet is included using the ltlinkgt
  tag
• Any further stylesheets have to be imported
• The _at_import command is placed inside a comment

ltheadgt lttitlegtStylesheetslt/titlegt ltlink
rel"StyleSheet" type"text/css"
href"http//www.abc.com/mainstyles.css"gt lt!
_at_import url(http//www.abc.com/deptstyles.css)?
url(mystyles.css)? --gt lt/headgt
79
Cascading stylesheets

• Multiple stylesheets can be included in a
  document
• Styles defined in the first stylesheet are
  overridden by corresponding styles defined in the
  second stylesheet
• the stylesheets are said to cascade
• Example
• mainstyles.css the company's stylesheet
• deptstyles.css the department's stylesheet
• mystyles.css the user's stylesheet
• If the stylesheets are included in this order,
  the user's style definitions will override the
  department styles, which in turn will override
  the company styles

80
Cascading stylesheets

• Different stylesheets for different media,
  platforms and systems
• Font size in CSS does not yield sam results on
  different screens. On Print Media 10pt size fonts
  are always the same size because the size of a pt
  is well defined. The conversion of pt to px
  (pixel) is different on Windows, Linux or Mac OS
  X platforms.
• Browser allow to customize layout and fonts

81
Style rules

• A style rule has two parts
• a selector (element name) and a set of
  declarations
• The selector associates the style rule with a
  HTML tag of the same name

selector property value property value
property value property value

• Each declaration has two parts
• a property and a value
• For readability, each declaration should be
  placed on a separate line

82
Style rules

• Some properties can be given multiple values
• The browser first looks for the "Book Antiqua"
  font
• If this is not on the system, it looks for the
  Times font
• Last resort the browser uses the generic serif
  font

body background-color lightgreen h1
color lightgreen background-color blue
font-family "Book Antiqua", Times, serif
border thick groove 9baab2
83
Properties and values

• Fonts
• font-family ltfamily namegt ltgeneric familygt
• font-style normalitalicoblique
• font-weight normalboldbolderlighter
• font-size smallmediumlargesmallerlarger
• Backgrounds and colours
• color ltvaluegt
• background-color ltvaluegttransparent
• background-image URLnone

84
Properties and values

• Text
• text-decoration noneunderlineoverlineline-thro
  ugh
• text-transformation nonecapitalizeuppercaselow
  ercase
• text-align leftrightcenterjustify
• text-indentation lengthpercentage
• Example To remove underlining on links

alink, avisited, aactivetext-decoration none
85
Properties and values

• Boxes
• margin lengthpercentageauto 1,4
• border-width thinthickmediumlength 1,4
• padding lengthpercentage 1,4
• border-color value 1,4
• border-style nonedotteddashedsoliddoublegroo
  ve 1,4
• ridge value 1,4
• width lengthpercentageauto
• height lengthauto

86
Properties and values

• Position
• location absoluterelativefixed
• absolute relative to upper left corner of
  window
• relative relative to the last item
• fixed does not move when the page is
  scrolled
• left distance from left border of window
  (pixels, )?
• top distance from top border of window
  (pixels, )?

87
Classes

• Simple style rules change the appearance of all
  instances of the associated element
• A class is a style definition that may be applied
  as and when we choose
• if we don't want the styles, we don't have to use
  them
• Simple classes are applied to a single type of
  element
• Anonymous classes can be applied to any type of
  element

88
Simple classes
lt/headgt ltstylegt lt!-- h1.fred color
eeebd2 background-color d8a29b border
thin groove 9baab2 --gt lt/stylegt lt/headgt ltb
odygt lth1 class"fred"gtA Simple Headinglt/h1gt
ltpgtsome text . . . some textlt/pgt lt/bodygt
89
Anonymous classes
lt/headgt ltstylegt lt!-- .fred color
eeebd2 background-color d8a29b border
thin groove 9baab2 --gt lt/stylegt lt/headgt ltb
odygt lth1 class"fred"gtA Simple Headinglt/h1gt ltp
class"fred"gtsome text . . . some
textlt/pgt lt/bodygt
90
CSS Classescont.
white
grey
TD font-face sans-serif font-size
12pt .even background-color FFFFFF .odd
background-color CCCCCC

• In your HTML code for the table
• you simply reference the class to invoke the
  style
• lttd classevengtdisplay this text with a white
  background lt/tdgt
• lttd classoddgtand this text with a grey
  background
• lt/tdgt

91
IDs

• Classes specify styles for particular instances
  of an element
• IDs specify the style of a single element

ltheadgt ltstylegt lt!-- list1 color blue
background cyan text-decoration
underline border thin groove red --gt
lt/stylegt lt/headgt ltbodygt ltul id"list1"gt
ltligtFirstlt/ligt ltligtSecondlt/ligt
ltligtThirdlt/ligt lt/ulgt lt/bodygt

• IDs allow the element to be identified by other
  elements on the page

92
ltDIVgt ltSPANgt are your friends

• ltdivgt and ltspangt tags allow you define exceptions
  to the general rules of your body textand they
  are helpful tools for document designers and web
  developers
• ltdivgt is usually used to designate styles for
  block elements that should stand apart from the
  body textlike callout quotes. Everything inside
  a ltdivgt tag takes on the ltdivgt attributesand you
  can specify classes and ids for ltdivgt too!

93
Divisions and spans

• Rather than applying styles to an element itself,
  we wrap the element in
• a div element (usually for block elements), or
• a span element (usually for inline elements)?
• Any required formatting can then be applied to
  the ltdivgt or ltspangt element.
• Div and span elements become part of the document
• In particular, each can have class and id
  attributes

94
Divisions
ltheadgt ltstylegt lt!-- .myclass color
blue background cyan text-decoration
underline border thin groove red --gt
lt/stylegt lt/headgt ltbodygt ltdiv class"myclass"gt
lth2gtA Simple Headinglt/h2gt ltpgtsome text . . .
lt/pgt lt/divgt lt/bodygt

• Styles can be applied to blocks of HTML code
  using div

95
Spans

• spans are similar to divisions

ltheadgt ltstylegt lt!-- .myclass color red
background cyan text-decoration none
--gt lt/stylegt lt/headgt ltbodygt ltspan
class"myclass"gt lth2gtA Simple Headinglt/h2gt
ltpgtsome text . . . lt/pgt lt/spangt lt/bodygt
96
Layers

• The browser maintains a stack of layers, each
  containing text, images etc. The browser displays
  layers on top of each other (in order).
• The ltdivgt tag has the following attributes
• z-index the number of the layer containing the
  division
• left and top the location (top-left corner) of
  the division in pixels
• width and height the size of the division in
  pixels
• position absolute or relative

97
Layers

• Layers can be manipulated using JavaScript to
  create Dynamic HTML pages
• Layers can also be used to organise page content

ltbodygt ltdiv style"z-index2 left100px
top50px positionabsolute background-colorred
font-size30"gt ltpgtTHIS STUFF IS ON
TOPlt/pgt lt/divgt ltdiv style"z-index1 left10px
top10px positionabsolute background-coloryell
ow font-size56"gt ltpgtBACKGROUND
STUFFlt/pgtlt/divgt lt/bodygt
98
Summary

• By now you should be able to use
• Tables
• Frames
• Stylesheet CSS
• Inline style
• Embedded style
• External style

99
Typical exam question

• explain why is it important to separate the
  content from the style.
• what is CSS?
• State three ways in which styles can be used. And
  explain the advantages and disadvantages of each
  one.

100
Next

• Look at the disadvantages of html
• XML
• Well formed vs valid xml document
• XHTML vs HTML
• DHTML

101
Useful sites

• http//www.w3schools.com/
• http//www.w3schools.com/html
• http//www.w3schools.com/css