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

Working with Fonts, Colors, and Graphics

HTML: Tutorial 3

Chang-Yang Lin, EKU 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


Tutorial Objectives (continued)

Apply a background image Float an image Create image map hotspots and link them to

destination documents


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.


The 16 Basic Color Names


Partial List ofExtended Color Names


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.


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.


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.


A Typical Colors Dialog Box


Color Names, RGB Triplets, and Hexadecimal Values


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


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”>


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”>


Setting the Font Size

The style to change the font size of the text within an element is:

font-size: lengthlength can be specified in four different ways:

1.with a unit of measurement2.with a keyword description3.as a percentage of the size of the containing element4.with a keyword expressing the size relative to the size of the containing element


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


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 be80% of normal body text

Font size will be150% of normal body text


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.


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”>

Kerning will be set to 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>

Welcome will be indented 1 em


Setting other Font features

font-style: type type is normal or italic

font-weight: weight weight is normal, bold or 100, . , 400 (normal), . , 700 (bold), . , 900

text-decoration: type type is none, blink, underline, overline, linethrough

text-transformation: type type is capitalize, uppercase, lowercase, none

font-variant: type type is normal (default) or small caps


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: normal 0.8em Arial, Helvetica, sans-serif”>content</address>

Font style will benormal, not italic

Font size will be0.8 em

Text will be in Arial,Helvetica, or anotherSans-serif font


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<span style=“font-weight: bold; font-family: Arial, Helvetica, sans-serif”>Arcadium</span>, your affordable family fun center. The . . .</p>


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.”


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


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.


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.


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.


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.


Aligning an Image

float: position position is none (the default), left, or right

Use the clear style to prevent other content from wrapping around a floating element.Clear: position position is none (the default), left, or right

<img src=“about.jpg” style=“float: right” /> <hr style=“color: rgb(153,102,102);

clear: right” />image floats atthe right margin

line will not be displayeduntil the right margin is clear


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: length

or

margin: top right bottom left

<img src=“about.jpg” style=“float: right;margin: 0 0 5 15>


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.


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)


Inserting a Background Image

Control whether the background image scrolls:

background-attachment: type

type is scroll (default) or fixed

Place all of the background image:

background: color image-file repeat attachment position

<body style=“color: rgb(153,102,102);background: white url(draft.jpg) no-repeat fixed center center”>

rides.htm karts.htm water.htm

Image map pointing to multiple pages


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


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.


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” />


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


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

roller coaster rides

(13 , 60)

(13 , 270) (370 , 270)

(370 , 225)(230 , 225)

(230 , 60)


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>

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

Documents

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