Part 4 Text & Fonts © UNT in partnership with TEA1IT: Web Technologies - HTML Scripting

Font Tag Changing the style of the font is accomplished using the tag. You enclose the content you wish to format in between the opening and closing tag. The font attributes include: face, size, color. © UNT in partnership with TEA2IT: Web Technologies - HTML Scripting

Font Face The default font face style for most browsers is "Times New Roman". There are five basic font classifications, Serif Sans Serif Script, Fancy Monospace IMPORTANT POINT: Just because you have a particular font on your computer, that does not mean everyone else who visit your site has that same font. © UNT in partnership with TEA3IT: Web Technologies - HTML Scripting

Font Face An example of basic font faces: Other common font faces: This is Serif This is Sans Serif This is Script This is Monospace Times New Roman Cosmic Sans MS Impact Courier New Tahoma Broadway Haettenschweiler Stencil Wide Latin Lucida Handwriting Playbill Algerian Arial Britannic Bold Arial Black Bookman Old Style Verdana Colonna MT © UNT in partnership with TEA4IT: Web Technologies - HTML Scripting

Available fonts YOUR computer can read may be different that other computers! C:/windows/fonts © UNT in partnership with TEA5IT: Web Technologies - HTML Scripting

Font Size The font tag may also be used to change the font size of text by adding the size attribute There are only 7 font sizes available with 1 being the smallest, and 7 being the largest. © UNT in partnership with TEA6IT: Web Technologies - HTML Scripting

Font Size An example of font size: Size 1 Size 2 Size 3 Size 4 Size 5 Size 6 Size 7 © UNT in partnership with TEA7IT: Web Technologies - HTML Scripting

Font Color The color attribute is added to the font tag to change the color of a block of text To assign colors, the color name of a basic color, or the RGB color code may be used. This is red! © UNT in partnership with TEA8IT: Web Technologies - HTML Scripting

Open index.htm from your Student Files folder and add the code shown in orange: World Travel : California

Preview index.htm once again in your browser. The page is now much easier to read. It is important to choose your colors carefully so that the viewer can read the text easily. © UNT in partnership with TEA10IT: Web Technologies - HTML Scripting

© UNT in partnership with TEAIT: Web Technologies - HTML Scripting11 Complete Lab 4:

Part 5 Adding Images © UNT in partnership with TEA12IT: Web Technologies - HTML Scripting

Image Formats There are many types of image formats. The two you will most likely use are the gif and jpg formats. gif (Graphics Interchange Format) limited to 256 colors, one color can be transparent, gif images can be animated. jpg (Joint Photographic Experts Group) Can display millions of colors. Typically used for photographs. Can not include a transparent color or be animated. © UNT in partnership with TEA13IT: Web Technologies - HTML Scripting

Inserting Images The image tag should close itself. The file extension of the image MUST be included after the image name. © UNT in partnership with TEA14IT: Web Technologies - HTML Scripting

World Travel © UNT in partnership with TEA15IT: Web Technologies - HTML Scripting Open index.htm from your Student Files folder and make the changes indicated below.

© UNT in partnership with TEA16IT: Web Technologies - HTML Scripting Preview index.htm once again in your browser.

Aligning Images The image is to the right with text wrapping to its left The image is to the left with text wrapping to its right © UNT in partnership with TEA17IT: Web Technologies - HTML Scripting

This image has not been aligned so it is applied inline with the text. This image has been aligned to the left, therefore text will wrap around the image. © UNT in partnership with TEA18IT: Web Technologies - HTML Scripting

in personal and friendly service. Add the following orange code to index.htm where indicated below the horizontal rule tag. © UNT in partnership with TEA19IT: Web Technologies - HTML Scripting

The second image should be aligned to the right side of the screen with the text wrapping along the left side of the image. © UNT in partnership with TEA20IT: Web Technologies - HTML Scripting Preview index.htm once again in your browser.

Section Breaks Section Breaks on a web page are line breaks with the clear="all". A section break on a web page is like a continuous section break in a word processor. Primarily used to STOP text from wrapping around an image. © UNT in partnership with TEA21IT: Web Technologies - HTML Scripting

Image Attributes src – specifies the image file align – defines image alignment hspace – horizontal spacing vspace – vertical spacing width – width of an image height – height of an image alt – text alternative of an image Now that you know how to work with images, there are other attributes available to help customize their appearance. © UNT in partnership with TEA22IT: Web Technologies - HTML Scripting

hspace & vspace Will add a margin spacing to the left and right and/or top and bottom of an image. Helps prevent a webpage from appearing cluttered and crowded. © UNT in partnership with TEA23IT: Web Technologies - HTML Scripting

width & height Can be applied to an image to specify a specific image size. Should be used to make small adjustments only. Use only one to keep the image in proportion. © UNT in partnership with TEA24IT: Web Technologies - HTML Scripting

Text Alternatives A line of text that will appear when your mouse is placed over the image. If the image does not load, the text will appear in place of the image. Applied to the img tag using by the alt attribute. © UNT in partnership with TEA25IT: Web Technologies - HTML Scripting

Complete Lab 5: © UNT in partnership with TEAIT: Web Technologies - HTML Scripting26 Home Page

Complete Lab 5: © UNT in partnership with TEAIT: Web Technologies - HTML Scripting27 Statue of Liberty Page

Complete Lab 5: © UNT in partnership with TEAIT: Web Technologies - HTML Scripting28 Empire State Building

Complete Lab 5: © UNT in partnership with TEAIT: Web Technologies - HTML Scripting29 Central Park