PowerPoint Presentation

Formatting Text with HTMLObjectives:Students will be able to:Define the structure of the document with block elementsFormat numbered, bulleted, and definition listsAdding bold, italic, and other inline styles to textAdjusting text size, font, and color with the tagAlign text on the page with HTMLUsing special charactersTypesetting on the WebMarking up text on the Web is different than specifying type for printUnknown fonts available for different computer usersText wont show up in that font unless it is already installed on the users machineStuck with the browsers default interpretation of each tagTypesetting on the WebTwo FontsProportional fontAllots different amounts of space to each characterCapital W takes up more space than a lowercase iConstant-width fontAllots the same amount of horizontal space to all the characters Capital W takes up no more space than a lowercase i

Typesetting on the WebText in GraphicsThe only way to have absolute control over the display of type is to make it part of a graphic.Try to resist using many GIF files because:Graphics take much longer to download than textInformation in graphics cannot be indexed or searchedContent will be lost on nongraphical browsers or to users that turn off the graphicsBuilding BlocksThe distinct parts that make up a document are known as block elements, and they are defined by block element tagsLine breaks and spacing above and below are automatically insertedParagraph ..Headings Quotations Preformatted text .Building BlocksParagraphs Display in the browsers default proportional font with extra space above and belowCannot use a string of empty tags to add extra space between elements.Browsers will not recognizeLine Break
Breaks a line without adding extra space around itMay stack
tags to add space between elementsBuilding BlocksHeadings Six levels of headings to Headings are displayed in bold text displays in the largest heading sizeBuilding BlocksLong Quotations Use for long quotationsDisplayed with indented left and right marginsAdds extra space above and below Preformatted Text Displays in the browsers constant-width font with extra space added above and belowText between tags is displayed exactly as it is typed including all returns and multiple character spaces

Lets Try ItOpen NotePadSet up the basic HTML document structureType the following text between the body tags of the document structureFirst Level HeadingSecond Level HeadingThird Level HeadingFourth Level HeadingFifth Level HeadingSixth Level HeadingHeres a little default body text for comparisonAdd the appropriate tags to the lines of textAdd a tag of the last line of textSave it as headings.html and view the page in the browser.Lets Try ItComplete Exercise 7-2 handoutLists3 types of lists with HTMLOrdered lists (numbered lists)Unordered lists (bulleted lists)Definition lists (for terms and their definitions)ListsOrdered Lists

Used when the sequence of items is importantBrowsers automatically insert a number before each list itemList will be renumbered automatically if you insert or delete an item

1. container tag identifies the entire list as orderedEach item within the list has a
2. (list item) tag.ListsOrdered Lists Change the style of numbering with type attribute5 possible values1 (numbers)
   1. A (uppercase letters)
      1. a (lowercase letters)
         1. I (uppercase roman numerals)
            1. i (lowercase roman numerals)
               1. Use the start attribute to specify a starting number other than 1
                  1. or
                     1. Able to combine start and type attributes in one tag
                        1. ListsUnordered Lists

.

Bulleted listsEach item within the list is specified with (list item) tagsChange the style of bullets with type attributesDisc

Circle

• Square

  • ListsDefinition Lists Used for displaying lists of words with blocks of descriptive texts tags are used to mark the beginning and end of the entire listEach word (term) is marked with the tagDisplayed against the left margin with no extra space above or belowEach definition is marked with a tagDisplays on an indent

    ListsNesting ListsAny list can be nested within another listCan add a bulleted list to a numbered listLets Try ItComplete exercise 7-3Inline StylesInline style tags Affect the appearance of text right in the text flowDont introduce line breaks or extra spacesCommonly used inline style tags

or italics text or bold text typewriter text underlined text or strikethrough text subscript superscriptCombining StylesAble to apply several styles to the same piece of text by wrapping one set of style tags around anotherCaution!

Lets Try ItComplete Exercise 7-4The Tag tagInline style tag that uses attributes to control the typeface, size and color of text.Uses attributesControlling font sizeSize attribute controls the size of the enclosed text.Can only specify the size of text relative to the default font sizeSpecify larger or smaller type relative to the default value of 3The value of the size attribute can be either absolute or relative.Absolute valuesNumerals 1 through 7Each size increment about 20% larger than the size beforeType set to 4 is 20% larger than type set to 3Type set to 2 is 20% smaller than type set to 3Relative valuesUse a plus or minus sign to say how many increments larger or smaller then the default sizeOne increment smaller than default is -1One increment larger than default is +1The TagChanging the default text size

tag sets the default size of textWhen placed in the tags of the document, the tag affects all the text in the documentThe TagSpecifying a TypefaceThe specified typeface will only be used if found on the users machineList fonts from specific to more genericIf browser cannot find Verdana, then use Helvetica. If not Helvetica, then use any sans-serif font available.Specifying Type ColorColor attribute can be one of 140 standard color namesColor attribute can be a numeric valueThe TagCombining StylesYou can put many attributes within a single opener tagOrder doesnt matterCan be nested with other inline stylesCAUTION!

Lets Try ItComplete Exercise 7-5Aligning TextLeft and Right alignment

Default alignment is left or Sets alignment to the right marginWorks in both paragraph tags and heading tags or Sets alignment center to the marginsCenter whole page

Aligning TextIndentsThere is no indent function in standard HTMLUse the following to indent text: tag to produce an indent on both the left and right margins

with no list items to display text as indented with only definitions () and no terms to display text as indented.

Aligning TextPreventing Line BreaksMay want to keep a line of text all on one line, even if window is resizedNo break tag Text and graphics that appear within this tag will not be broken by the automatic wrapping function of the browserForces users to utilize the horizontal scrollPreformatted TextGive character-by-character control over text alignment Displays in Courier fontHonors blank character spacesThe Division TagUsed to identify a generic block elementCan contain multiple text elements such as headlines or paragraphsApplies to all style attributes within the container tagsUseful in style sheetsCan save you having to put align attributes in every tag on the page

HeadlineParagraph contentAnother paragraphYet another paragraph

Blockquotes and lists can be realigned when placed within a

Special CharactersCharacter entity namea string of text that identifies a specific characterName or numeric value

CharacterDescriptionNameNumberCharacter space (nonbreaking space)CopyrightRegistered trademarkTrademark

PoundYenLeft curly quotesNone

Right curly quotesNone

>Greater-than symbolNone