1 / 41

HTML: Tutorial 3

HTML: Tutorial 3. Working with Fonts , Colors , and Graphics. Tutorial Objectives. Learn how HTML handles colors Create foreground and background colors using styles Select different font styles Align text with surrounding content using styles

khuong
Download Presentation

HTML: Tutorial 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML: Tutorial 3 Working with Fonts, Colors, and Graphics

  2. Tutorial Objectives • Learn how HTML handles colors • Create foreground and background colors using styles • Select different font styles • Align text with surrounding content using styles • Control spacing between letters, words, and lines using styles • Learn about GIF, JEPG, PNG; animated graphics Chang-Yang Lin, EKU

  3. Tutorial Objectives (continued) • Apply a background image • Float an image • Create image map hotspots and link them to destination documents Chang-Yang Lin, EKU

  4. Working with Color in HTML HTML identifies a color in one of two ways: • by the color’s name • red, maroon,green,black, blue, purple • by the color values • To have more control and more choices, specify colors using color values. Chang-Yang Lin, EKU

  5. The 16 Basic Color Names Chang-Yang Lin, EKU

  6. Partial List ofExtended Color Names Chang-Yang Lin, EKU

  7. Basic Principles of Color Theory • Any color can be a combination of three primary colors: red, green, and blue. • By varying the intensity of each primary color, you can create almost any color. Yellow, magenta, cyan, and white are produced by adding the three primary colors. Chang-Yang Lin, EKU

  8. RGB Triplets • Each color is represented by a triplet of numbers, called an RGB triplet, based on the strength of its Red, Green, and Blue. rgb (red, green, blue) where red, green, blue are the intensity values of the red, green, and blue components. • The intensity values range from 0 (absence of color) to 255 (highest intensity). • 2553 (or more than 16.7 million) colors can be defined. Chang-Yang Lin, EKU

  9. Color Values in Hexadecimals • Color values can also be entered as hexadecimals in the form: #RedGreenBlue • A hexadecimal is a number based on base-16 • hexadecimals include six extra characters: A (for 10), B (for 11), C (for 12), D (for 13), E (for 14), and F (for 15). • 16 is expressed as “#10”, 17 as “#11”, 38 as “#26”, 165 as “#A5”, and 255 as “FF” in hexadecimal format. Chang-Yang Lin, EKU

  10. A Typical Colors Dialog Box Chang-Yang Lin, EKU

  11. Color Names, RGB Triplets, and Hexadecimal Values Chang-Yang Lin, EKU

  12. Color Selection Resources Available on the Web • http://www.colormix.com • http://www.paletteman.com • http://www.two4u.com/color • http://www.zspc.com/color/index-e.html Chang-Yang Lin, EKU

  13. Defining Foreground and Background Colors • The default browser scheme involves: • black text on a white or gray background • hypertext links highlighted in purple and blue • The syntax for controlling a page’s color scheme through the <body> tag is: <body style=“color: rgb(153,102,102); background-color: white”> Chang-Yang Lin, EKU

  14. Choosing a Font • By default, browsers display Web page text in a single font, usually Times New Roman. • You can specify a different font using the style font-family:fonts • Font names can be either specific or generic. • Five generic fonts: serif, sans-serif, monospace, cursive, and fantasy. <p style=“text-align: center; font-family: Arial, Helvetica, sans-serif”> Chang-Yang Lin, EKU

  15. Setting the Font Size The style to change the font size of the text within an element is: font-size:length lengthcan be specified in four different ways: • with a unit of measurement • with a keyword description • as a percentage of the size of the containing element • with a keyword expressing the size relative to the size of the containing element Chang-Yang Lin, EKU

  16. Setting the Font Size1. with a unit of measurement • Use either absolute units or relative units • Absolute units define a font size using • mm (millimeter) • cm (centimeter) • in (inch) • pt (points) • pc (pica) • 1 inch = 72 points; 1 pc = 12 points • Absolute measurements are useful when you know the physical properties of the output device Chang-Yang Lin, EKU

  17. Font size will be 150% of normal body text Setting the Font Size1. with a unit of measurement Relative units express font size relative to the size of a standard character on the output device. Two common standards: • The “em” unit is equal to the width of the capital letter “M”. • The “ex” unit is equal to the height of a lower case letter “x”. <p style=“text-align: center; font-size: 0.8em”> <h1 style=“color: white; font-size: 1.5em”> Font size will be 80% of normal body text Chang-Yang Lin, EKU

  18. Setting the Font Size(continued) • The following are equivalent: • font-size: 1.5em and font-size: 150% • A value is expressed in pixels (a single dot) if no unit is specified. • font-size: 20 equals font-size: 20px • Express font sizes using 7 keywords:xx-small x-small small mediumlarge x-large xx-large • A browser is configured to display text at a particular size for each of these keywords. Use “larger” or “smaller” to make a font one size larger or smaller. Chang-Yang Lin, EKU

  19. Kerning will be set to 1 em Control Spacing:Kerning and Tracking • The style to control kerning (the amount of space between pairs of letters) and tracking ( the amount of space between words):letter-spacing: valueword-spacing: value • The default value for both kerning and tracking is 0 pixels. A positive (negative) value increases (decreases) the letter and word spacing. • <h1 style=“letter-spacing: 1em”> Chang-Yang Lin, EKU

  20. Welcome will be indented 1 em Control Spacing:Leading and Indentation • The style to set the leading (the space between lines of text) is:line-height: length • line-height: 1 represents the standard ratio (1.2:1), which means the line height is 1.2 times the font size • The style to set the indentation is: text-indent: value • <h1 style=“text-indent: 1em”> Welcome</h1> Chang-Yang Lin, EKU

  21. Setting other Font features • font-style: typetype is normal or italic • font-weight: weightweight is normal, bold or 100, . , 400 (normal), . , 700 (bold), . , 900 • text-decoration: typetype is none, blink, underline, overline, linethrough • text-transformation: typetype is capitalize, uppercase, lowercase, none • font-variant: typetype is normal (default) or small caps Chang-Yang Lin, EKU

  22. Combining all Text Formattingin a Single Style • font: font-style font-variant font-weight font-size/line-height font-family • font: italic small-caps bold 16pt/24pt Arial, Helvetica, Sans-serif • <address style=“text-align: center;font: normal0.8emArial, Helvetica, sans-serif”>content</address> Text will be in Arial, Helvetica, or another Sans-serif font Font style will be normal, not italic Font size will be 0.8 em Chang-Yang Lin, EKU

  23. Using the Span Element • Use the span element as a marker, and then change the font style. • <p style=“text-align: justify”>Exciting adventures await you at<spanstyle=“font-weight: bold; font-family: Arial, Helvetica, sans-serif”>Arcadium</span>, your affordable family fun center. The . . .</p> Chang-Yang Lin, EKU

  24. GIF (Graphics Interchange Format) • The three image file formats supported by Web browsers are GIF, JPEG, and png. • GIF files are limited to displaying 256 colors. • Often used for graphics requiring fewer colors, such as clip art images, line art, logos, & icons. • With a noninterlaced GIF the image is saved one line at a time, starting from the top of the graphic and moving downward. • With interlaced GIFs, the image is saved and retrieved “stepwise.” Chang-Yang Lin, EKU

  25. Transparent GIFs • A transparent color is a color from the image that is not displayed. • In place of a transparent color, the browser displays whatever is on the page background. logo background is transparent in the browser Chang-Yang Lin, EKU

  26. Animated GIFs • One of the most popular uses of GIFs is to create animated images. • An animated GIF is composed of several images that are displayed one after the other in rapid succession. Chang-Yang Lin, EKU

  27. JPEG (Joint Photographic Experts Group) • The JPEG format uses the full 16.7 million colors. • JPEG files are often used for photographs. • A JPEG file size can be controlled by the degree of image compression. • You cannot use transparent colors or animation with JPEG files. Chang-Yang Lin, EKU

  28. Dithering • Dithering is when the colors in an image are converted to a fixed palette. • To completely eliminate dithering, use the Safety Palette. • the Safety Palette or browser-safe palette is a collection of 216 colors that display consistently on different browsers. • Given the growth of 24-bit (millions of colors) color systems, this is rapidly becoming less of an issue. Chang-Yang Lin, EKU

  29. Portable Network Graphics (PNG) • PNG files include such GIF features as animation, interlacing, and transparency but also provide the file compression available with JPEGs. • PNG supports 16.7 million colors. Chang-Yang Lin, EKU

  30. image floats at the right margin line will not be displayed until the right margin is clear Aligning an Image • float: positionposition is none (the default), left, or right • Use the clear style to prevent other content from wrapping around a floating element.Clear: positionposition is none (the default), left, or right • <img src=“about.jpg” style=“float: right” /> • <hr style=“color: rgb(153,102,102);clear: right” /> Chang-Yang Lin, EKU

  31. Setting the Image Margins • To set the size of the margins around an element, use the styles: margin-top: length; margin-right: length; margin-bottom: length; margin-left: lengthor margin: top right bottom left • <img src=“about.jpg” style=“float: right;margin: 0 0 5 15> Chang-Yang Lin, EKU

  32. Setting the Image Size • To set the size of an image: <img src=“URL” alt=“text”height=“value” width=“value”> • Height and width attributes instruct the browser to display an image at a specific size. • When a browser encounters an image, it calculates the image size and then uses this information to format the page. If the dimension is included, the browser displays the image faster. Chang-Yang Lin, EKU

  33. Inserting a Background Image • Insert a background image:background-image: url(url) • Control the tiling of the background image:background-repeat:typetype is repeat (default), repeat-x, repeat-y, or no-repeat • Place the background image in a specific location:background-position: horizontal verticalSpecify a position as the distance from the top-left corner, a %, or using a keyword (left center right for horizontal; top center bottom for vertical) Chang-Yang Lin, EKU

  34. Inserting a Background Image • Control whether the background image scrolls:background-attachment: typetype is scroll (default) or fixed • Place all of the background image:background: colorimage-filerepeatattachmentposition • <body style=“color: rgb(153,102,102);background: whiteurl(draft.jpg)no-repeatfixedcenter center”> Chang-Yang Lin, EKU

  35. Image map pointing to multiple pages rides.htm karts.htm water.htm

  36. An Example of a Image Map an example of a park map that visitors can easily find their way to the different attractions by clicking on the image Chang-Yang Lin, EKU

  37. Understanding Image Maps • To use a single image to multiple targets, you must set up hotspots within the image. • A hotspot is a defined area of the image that acts as a hypertext link. • Hotspots are defined through the use of image maps, which list the positions of all hotspots within an image. • A client-side image map is inserted in an image map into the HTML file. • The browser locally processes the image map. Chang-Yang Lin, EKU

  38. Defining a Client-Side Image Map • Create an image map: <map name=“map” id=“map”>hotspots</map> • map is the name of the image map • hotspots are the locations of the hotspots within the map • <map name=“parkmap” id=“parkmap”></map> • To create XHTML-compliant code, include both the name and id attributes, setting them to the same value • To access an image map:<img . . . usemap=“#map” /> Chang-Yang Lin, EKU

  39. Defining Image Map Hotspots • To create a rectangular hotspot: <area shape=“rect” coords=“x1,y1,x2,y2” href=“url” alt=“text” /> • x1,y1,x2,y2 represents the upper-left and lower-right corners • url is the location of the linked page • To create a circular hotspot:<area shape=“circle” coords=“x,y,r” href=“url” alt=“text” /> • x,y indicate the coordinates of the center and r specifies the radius Chang-Yang Lin, EKU

  40. (13 , 60) (230 , 60) roller coaster rides (230 , 225) (370 , 225) (370 , 270) (13 , 270) Defining Image Map Hotspots:a polygonal hotspot <area shape=“poly” coords=“x1,y1,x2,y2,x3, y3, . . ” href=“url” alt=“text” /> • x1,y1,x2,y2,x3,y3, . . .indicate the vertices of the polygon following the clockwise Chang-Yang Lin, EKU

  41. An Example: Image Map <img src="parkmap.gif" alt="Park Map" width="610" height="395" usemap="#parkmap"style="border-width: 0" /> <map name="parkmap" id="parkmap"> <area shape="rect" coords="350,38,582,200" href="water.htm" alt="water park" /> <area shape="circle" coords="255,133,74" href="karts.htm" alt="go-karts" /> <area shape="poly" coords="17,38,172,38, 172,223,333,223,333,300,17,300" href="rides.htm" alt="Roller coasters" /> </map> Chang-Yang Lin, EKU

More Related