344–345
 Maximum
flexibility obtained by
treating text as graphics and
manipulating it in graphics program
• Ideally suited to graphic design
incorporating text
 Posters, packaging, letterheads, book jackets,
CD and DVD covers,…
• Vector graphics with outline fonts or
bitmapped images with bitmapped fonts
 Increasingly, combine the two approaches
345
 Text
set in outline fonts can be treated as
object in a vector graphics program
• Transform; apply colour, gradient and patterns
• Fill shapes with text, set text along a path
 Text
remains editable
 Text in shape/along a path will
accommodate transformations of the
shape/path
345–346
 Convert
text to pixels
 Can apply usual effects and filters
• Usually keep text on separate layer, so effects
can be applied to it independently
 Text
can no longer be edited as text
• Can't change font, spell check, change wording,
etc
• Must be retouched like any other image
347
 Most
text is laid out according to
conventions
 Words are arranged into lines, combined
into paragraphs placed on the page
 Special formatting (e.g. italicization) may be
applied to words within a paragraph –
inline/character formatting
 Paragraphs may be set in special ways (e.g.
indentation) – block-level/paragraph
formatting
348
 Apply
formatting to spans of characters
within a block
• Font characteristics and size
• Colour
• Baseline offset for superscripts and subscripts
 Character
styles collect together a set of
properties used for some purpose (e.g.
emphasis) to be applied by name
• Ensures consistency, eases modification
348–351
 Each
block will have default settings for
the formatting of characters (font, size,
etc)
• Over-ridden by inline formatting
 Blocks
may be left-aligned, centred,
right-aligned or justified
• May hyphenate
 Set
spacing on all four sides of block
(indent etc)
 Use paragraph styles for consistency
351–352
 Instructions
embedded in a document to
control its formatting
 WYSIWYG – markup consists of invisible
control codes, formatting is displayed as you
type
 Tag-based – text of document is
interspersed with special commands known
as tags; separate rendering phase is needed
to display the formatted document
• Tags are lexically distinguished from text
353–355
 Tags
identify logical elements of a
document (headings, lists, tables,…)
• Contrast visual markup – tags control aspects
of appearance (fonts, indents, …)
 Formatting
may be defined for each
type of element (cf. paragraph and
character styles)
 Permits separation of concerns
between structure and appearance
 Makes it easier for programs to analyse
structure of documents
355–356
 Logical
conclusion of structural markup:
• Complete separation of content and structure
from appearance
• Markup tags only indicate structure
• Specification of the appearance is left to a
separate mechanism
• Stylesheet provides rules describing how each
type of element should be displayed
356–357
 Hypertext
Markup Language
 Evolved from original version with tags
suitable for marking up scientific papers;
now supports variety of embedded
multimedia as well as richer variety of
layout features
• Recent versions emphasize structural markup,
but there are visual markup features left over
from earlier versions
357
 HTML
redefined using an XML DTD
 XHTML 1.0 adopted as W3C
Recommendation Jan 2000
 Almost compatible with HTML 4.0
• Legal XHTML is legal HTML 4, but not vice versa
• XHTML is more strict than HTML 4
 Can
usually use HTML to mean XHTML or
HTML 4
357–358
 HTML
markup divides document into
elements
 Each type of element has a name
 Elements may be nested (subject to
restrictions)
• Must be properly nested – if an element starts
inside another, it must end inside it too
 Each
element is introduced by a start tag
and terminated by an end tag
• Text in-between is the element's content
358–359
 Element's
start tag is its name enclosed
in angle brackets: <p>, <h1>, <div>, …
• XHTML names consist of lower-case letters and
numbers
 Element's
end tag is its name preceded
by a slash, enclosed in angle brackets:
</p>, </h1>, </div>,…
 Empty elements (with no content) have
start and end tags run together: <img />,
<hr />,…
358–359
Need a mechanism for inserting <, > and other
special characters into a document without
having them interpreted as start of a tag &c
 Use character entity references &lt; &gt; for < >

• N.B. final ; is part of the reference



Now need a way of inserting &: use &amp;
General mechanism for hard-to-type characters
Also numeric character references, e.g. &#60;
• Number after # is ISO10646 character value
360
 Named
properties of an element
 Values are assigned within start tag
 <hr size="12" width="50%" />
 Values
must be enclosed in "s
 Attribute names are all lower-case
 Flags are turned on by assigning
their own name
 <hr noshade="noshade" />
• Just omit flag attribute to turn it off
362–363
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml120000126/DTD/xhtml1-strict.dtd">
<html>
<head>
…
</head>
<body>
…
</body>
</html>
360–361
 Cascading Style Sheets
 Simple stylesheet language
that works
well with HTML and is supported by most
Web browsers
 Used to specify visual properties of each
element
 CSS rules have the form
•
selector { declarations }
 Can
embed rules in a style element
within the head of an HTML document
361, 368
 Name
– declaration applies to all
elements of the named type
 Name.class – declaration applies to all
elements of the named type whose class
attribute has value class
 Name#id – declaration applies to the
unique elements of the named type
whose id attribute has value id
361
 property: value;
 Set
of properties is defined in the CSS
standard
• Inline and block-level formatting
• Absolute and relative positioning of elements
361–362
 Indent first line of each paragraph 4pc
 p { text-indent: 4pc; }
 Except paragraphs of class noindent
• p.noindent { text-indent: 0pc; }
 Use
a hanging indent on paragraphs
of class hang
 p.hang { text-indent: -4pc;
margin-left: 4pc;
}
365–366
p
– paragraphs
 h1, h2,…,h6 – level 1, 2,…,6(!) headers
 blockquote – long quotations (not
indented paragraphs)
 pre – pre-formatted text
 div – arbitrary division
• use class or id attributes in conjunction with
stylesheet rules
365
 ul
– unordered list
 ol – ordered list
 li – list element
• Use li elements within ul and ol elements
• Within ol, li elements are automatically
numbered; ul, bulleted by default
 dl
– definition list
• Use pairs of dt (term) and dd (definition)
elements within dl
365
 Relatively
complex constructions providing
for wide variety of tabular layout
 table elements contain tr (row) elements
containing td (data, i.e. cell) elements
• Further facilities for spanning columns and rows,
adding captions and headers, etc
 Tables
were very commonly used to lay out
pages
• Effective and reliable, but CSS positioning is
officially endorsed way of doing this
367
 Elements
indicating explicit inline
formatting (e.g. font) deprecated –
conflict with structural markup
 More abstract inline elements OK
• em (emphasis), strong, etc
 span
element identifies arbitrary spans
of text
• Use class and id attributes in conjunction with
stylesheet rules to apply inline formatting
368–369
 Five
properties control font
characteristics
• font-family
• font-style
• font-variant
• font-weight
• font-size
 Used in conjunction with line-height
369
 Value
is a list of font names in decreasing
order of preference
• No guarantee that any specific font will actually
be used (may not be available to browser)
 Can
use generic font families – browser
will substitute an appropriate available
font
• serif, sans-serif, monospace, cursive, fantasy
p.elegant { font-family: "The Sans", Verdana,
Helvetica, sans-serif }
370
 font-style
may be normal, italic or
oblique (i.e. slanted)
 font-variant may be normal or smallcaps
 Effect is to choose an appropriate
member of the font family selected by
the font-family property
• Slanted font may be used for italic if no real italic
font is available
371
 Absolute
sizes may be specified in any unit
 Sizes relative to browser default may be
chosen from xx-small, x-small, small,
medium, large, x-large, xx-large
 Sizes may be a percentage of inherited
value, or specified in em or ex units of
inherited font
 Relative size changes specified with smaller
or larger
371
 line-height
property specifies leading
 normal – chosen by browser, usually 1 to
1.2 times font size (i.e. too small)
 Use percentage (150%), ratio (1.5) or
ems (1.5em) to specify leading relative
to font size
 line-height and leading can be
combined within a font declaration:
14pt/21pt
371–372
 Combine
all five font properties into a
single declaration for font
 Can include composite size/leading
 Any omitted properties take on default
values
 Order is unspecified, but browsers seem to
prefer style, variant, weight, size, family
•p { font: italic bold 14pt/21pt "The
Sans", Verdana, Helvetica, sans-serif }
372–373
• background-color and color properties control
•
•
•
•
the colour of background and text
Values specify colours in sRGB colour space
rgb(r%, g%, b%)
rgb(r, g, b) where r, g, b are in range 0–255
#rrggbb where rr, gg, bb are hex values
rgb(80%,40%,80%)
rgb(204,102,204) #CC66CC
373
 text-align
property can take values left,
right, center or justify
 Can only be sensibly applied to blocklevel elements
 body { text-align: left }
 p.display { text-align: center }
374
 Layout
algorithm:
• Each element is notionally placed in a box
• Inline elements and text placed next to each
other horizontally, then fitted into available
width to form blocks
• Blocks are placed vertically on top of each other
 Stylesheet
may be used to modify
placement of elements
374–375
 Each
box may be surrounded by a border
 Border is separated from contents by
padding
 Beyond border, margins separate box from
its neighbours on all sides
 Plethora of CSS properties can be used to
set border width, style and colour, padding
and margins, box's height and width
 Text colour and background colour can be
set separately for each box
375
 Boxes
may be 'floated' to left or right
margin, while text flows round them
 float property can take value left or right
 clear property can take values left, right,
both or none, specifying which sides
may be adjacent to a floating box
• If clear = left, box is forced to go below the
bottom of any left-floated element, and so on
375–377
 Set
position to absolute, then specify
values for top and left properties, setting
the position of the top left corner of the
box
• Tedious calculations, usually done by interactive
manipulation in Web authoring program
• Can use relative units
 Boxes
may end up on top of each other, zorder property specifies stacking order
 Preferred alternative to use of tables for
layout
377
• Can put a collection of rules in a file and refer to
it from within an HTML document
• link element with href attribute pointing to
stylesheet, rel="stylesheet", type="text/css"
• <link href="styles.css"
rel="stylesheet" type="text/css" />
• Allows same set of styles to be used in all pages
of a Web site, global changes made easily