Formatting: Is What You See What You Get

1
Formatting Is What You See What You Get?
Gylphs and FontsDocument-Wide Style
Changes Formatting List Items Formatting
Different Tags Simultaneously Command
Lines Font ChangesInline Styles Physical
Styles Logical Styles Special
CharactersTurning of FormattingDeprecated
Font-Handling TechniquesReview
Questions Exercise
2
Objectives

• Effectively use font properties in Web page
  designs.
• Create document-level style tags
• Utilize physical and logical HTML elements in
  Web page design.
• Establish language rules for quotations
• Incorporate special character codes into HTML
  documents
• Identify the languages associated with the
  Latin-1 and Unicode character sets.
• Know how to override text formatting within an
  HTML document

3
Glyphs and Fonts

• Every browser recognizes a variety of symbols,
  letters, and numbers ? Glyphs
• Arabic Numbers 1, 2, 3...
• Lowercase letters a, b, c...
• Your text is made up of glyphs.
• Formatting different glyphs ? font properties
• typeface, size, style, weight, etc...

4
Glyphs and Fonts

• HTML lets you manupulate the followings
• font-family serif sans serif cursive
  fantasy others
• font-size pt 1-100 larger smaller
  xx-small through xx-large
• font-size-adjust ltnumbergt
• font-stretch normal wider narrower
  ultra-condenced through ultra-expanded
• font-style normal italic oblique
• font-variant normal small-caps
• font-weight normal bold bolder lighter
  100-900

5
Glyphs and Fonts

• Each browser ultimately controls the default
  values ie.font-size 3
• font-type size effects the number of characters
  displayed per inch!
• -The smaller the type size the more words fit on
  a line-
• BUT
• This type size is too small for comfortable
  reading!...
• Proportional spacing is a way of naturally
  fitting letters together so that they only take
  the requisite amount of space on the line (M, W /
  i, I).
• Monospaced font each letter in a font is given
  equal space.

6
Document-Wide Style Changes

• W3C ? promote international and handicap
  sensitive design ? style sheets
• Style sheet is a set of design rules that apply
  to one ore more HTML documents - Use style
  sheets to maintain the same design elements
• Document-level style sheets formatting rules
  effect from one to all of elements found within
  ltbodygt container.
• External style sheets independently ASCII
  files, effect more than one HTML document.
• ltstylegtDocument Style Changeslt/stylegtDescription
  identifies formatting changes to elements that
  appear in the documents ltbodygt
  containerTypeContainerAttributes dir, lang,
  media, title, and type

7
Document-Wide Style Changes

• The ltstylegt conatiner can be placed only within
  the ltheadgt element.
• Place each tag to be defined properties on a
  separate line
• Put a left curly brace after the tag name.
• List each property name, like font-family or
  font-weight, followed by a colon ( means a value
  for that property comes next)
• Type in the property value. Like sans-serif or
  bold
• Place a semicolon to mark the end of the value
• Close the property list with a right curly brace
  , again on a line by itself
• All of this information could be presented on a
  single line like this if you dont care about
  readibility and maintainability.

8
Document-Wide Style Changes
h1 font-family sans-serif font-size 30
pt font-weight bold OR h1 font-family
sans-seriffont-size 30 ptfont-weight bold
9
Document-Wide Style Changes
type The style tags type attribute is needed to
identify the style sheet rules used to create
document-level style sheet. ltstyle type
text/cssgt Formatting List Items ol li
list-style-type upper-alpha ? A, B, C,
etc. ol li li li ? third level list items
a,b..Color0000FFlist-style-type
lower-alpha
10
Document-Wide Style Changes
Formatting Different Tags Simultaneously More
than one tag can be assigned new properties at
the same time h1, h2, h3, h4, h5,
h6Color666666 h1font-size 28
pttext-align centerfont-family
sans-serif
11
Document-Wide Style Changes
lt!--Comment Lines --gt ltHTMLgtltHEADgtltTITLEgtDocumen
t Level Style Sheetslt/TITLEgt ltstylegt lt!-- style
sheet commands --gt lt/stylegt lt/HEADgt ltBODYgt ....
.. lt/BODYgtlt/HTMLgt
WHY in Comment Tags? This is done to prevent
older browsers from accidentally displaying
format changes as text!
12
Font Changes

• KISS (Keep It Simple, Sweetie)
• 3 different type face ? Headings, Text, Specific
  Words
• P font-family Times New Roman
• 5 generic family names
• Cursive
• Fantasy
• Monospace
• Sans-serif
• Serif
• Font-family serif sans-serif cursive
  fantasy monospace Arial, Courier, ...

13
Font Changes

• font-size pt 1-100 larger smaller
  xx-small through xx-large
• xx-small ltP style font-size
  xx-smallgtxx-smalllt/Pgt
• x-small p font-sizelarger
• small p font-size 40
• medium
• large
• x-large
• xx-large
• font-style normal italic oblique
• ltP style font-style normalgtnormallt/Pgt
• P font-style italic

14
Font Changes
font-weight normal bold bolder lighter
100-900 ltP style font-weight 700gtweight
700lt/Pgt font-variant normal small-caps h4
font-variant small-caps font-stretch normal
wider narrower ultra-condensed through
ultra-expanded Ultra-condenced, extra-condensed,
semi-condenced, normal, semi-expanded, expanded,
extra-expanded, ultra-expanded h2
font-stretch ultra-expanded
15
Inline Styles
Physical styles describe the way the text is to
look in a browser
16
Inline Styles
Logical styles not only changes appearence of
text, but also explain why the text was set off
from the body of the page.
17
Special Characters

• Certain characters--such as the brackets (lt, gt)
  and the ampersand ()--have a special meaning
  within the HTML scripting

18
Some Examples
19
(No Transcript)
20
(No Transcript)
21
Turning Off Formatting
ltpregtpreformatted textlt/pregt Description
identifies preformatted text that the browser is
instructed not to alter. Attributes .....width
22
Deprecated Font-Handling Techniques
ltFONTgtFont of Textlt/FONTgt Description changes
the color, typeface, or size of font. Attributes
color, face, size.... ltFONT SIZEnumbergt ltFONT
COLOR"RRGGBB"gt ltFONT COLOR"colorname"gt ltFONT
FACE"facename1, facename2..."gt
23
(No Transcript)