1 Formatting: Is What You See What You Get? Gylphs and Fonts Document-Wide Style Changes Formatting List Items Formatting Different Tags Simultaneously Command Lines Font Changes Inline Styles Physical Styles Logical Styles Special Characters Turning of Formatting Deprecated Font-Handling Techniques Review 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: 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 |

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 container. External style sheets; independently ASCII files, effect more than one HTML document. Document Style Changes Description: identifies formatting changes to elements that appear in the document’s container Type:Container Attributes: dir, lang, media, title, and type

7 Document-Wide Style Changes The conatiner can be placed only within the 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 don’t 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-serif;font-size: 30 pt;font-weight: bold;}

9 Document-Wide Style Changes type The style tag’s type attribute is needed to identify the style sheet rules used to create document-level style sheet. Formatting List Items ol li {list-style-type: upper-alpha;}  A, B, C, etc. ol li li li  third level list items a,b.. { Color:#0000FF; list-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, h6 { Color:# } h1 { font-size: 28 pt; text-align: center; font-family: sans-serif; }

11 Document-Wide Style Changes Document Level Style Sheets <!-- style sheet commands --> 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 xx-small x-small p {font-size:larger;} small p {font-size: 40%;} medium large x-large xx-large font-style: normal | italic | oblique normal P {font-style: italic;}

14 Font Changes font-weight: normal | bold| bolder | lighter | weight = 700 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 bold Darker typeface italic Slanted typeface superscript Halfline above text bottom subscript Halfline below text bottom teletype Monospaced typeface computer code Monospaced typeface keyboard Monospaced typeface big text Default is 3; 1-7 small text Default is 3; 1-7 underline text Line drawn under text strikethrough Line drawn through text strikethrough Line drawn through text

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. abbreviation WWW, URL, or W3C acronym NASA, BASIC, or FBI ( ) address Atatürk Bulvarı No:167 long quote Longer than 40 words (cite) citation 1937 by Robert Frost emphasized text Enroll by june 30th deleted text Removed from page (cite, datetime) inserted text Added to page (cite, datetime) quote Less than 40 words (cite) sample output Printer output strongly emphasized text Warning!... variable values Last_name = ikinci definition Large black object

17 Special Characters Certain characters--such as the brackets ( ) and the ampersand (&)--have a special meaning within the HTML scripting

18 Some Examples

19

20

21 Turning Off Formatting preformatted text Description: identifies preformatted text that the browser is instructed not to alter. Attributes:.....width

22 Deprecated Font-Handling Techniques Font of Text Description: changes the color, typeface, or size of font. Attributes: color, face, size....

23