C

GRAPHICS AND TEXT STYLING BASICS

Chapter 5

Web Graphics

•Graphics can make a web page more

compelling and engaging.

•Three file types used on the web are .gif, .jpg

and.png

.gif

Graphics Interchange Format

Best used for line art and logos

Maximum of 256 colors

One color can be configured as transparent –

usually this is the background color.

The background of the web page shows through

the transparent area in the image.

.gifCan be animated – consists of several images or

frames, each of which is slightly different. When the frames flash on the screen in order, the image appears animated

Uses lossless compression – nothing in the original image is lost and the compressed image will contain the same pixels as the original.

Can be interlaced - A fuzzy outline of an image is gradually replaced by seven successive waves of bit streams that fill in the missing lines until the image arrives at its full resolution.

Optimization

• To avoid slow loading web pages, graphic files should

be optimized for the web.

• Image optimization is the process of creating an image

with the lowest file size that still renders a good-quality

image, balancing image quality and file size.

• GIF images are typically optimized by reducing the

number of colors in the image using a graphic

application such as Adobe Photoshop.

.jpg - can also be .jpeg

Joint Photographic Experts Group

Best used for photographs

Up to 16.7 million colors

Use lossy compression – some pixels in the original image are lost or removed from the compressed file. When the browser renders the compressed image, the

display is similar to but not exactly the same as the original image.

There are tradeoffs with compression: an image with less compression will have a higher quality but a bigger file size. A more compressed image will have lower quality but a smaller file size.

Cannot be animated

Cannot be made transparent

Progressive JPEG – similar to interlaced display but their rendering

scheme is usually superior to that used with GIFs. With some applications, it is

also possible to tweak the order in which the scanlines are displayed. Unlike

interlaced GIFs, progressive JPEGs are often smaller than their baseline

counterparts; with slower computers, however, they take longer to display.

.png• Portable Network Graphic

• Support millions of colors

• Support multiple levels of transparency

(but browsers do not --so limit to one transparent color for Web display)

• Support interlacing

• often progressively rendered two-dimensionally. This is done by changing the order in which pixels, as opposed to scanlines, are displayed

• PNG can change the order both horizontally and vertically. This means that an image becomes recognizable even earlier in the loading process.

.png

• Use lossless compression

• Combines the best of GIF & JPEG

• Browser support is growing

ImageType

FileExtension

Com-pression

Trans-parency

Animation Colors Progressive Display

Graphic Interchange Format (GIF)

.gif Lossless Yes Yes 256 Inter-lacing

Joint

Photographic Experts Group (JPEG)

.jpg or

.jpeg

Lossy No No Millions Progressive

Portable Network Graphic (PNG) .png Lossless

Yes

(multiple

levels)

No Millions Inter-lacing

Google’s new WebP Image Format

• Google’s new WebP image format (pronounced

weppy), offers improved compression and smaller

image file sizes but is not yet ready for use in

commercial websites.

• They are currently only supported by the Google

Chrome Browser.

Choosing Names for Image Files

• Use all lowercase letters

• Do not use punctuation symbols and spaces

• Do not change the file extensions

(should be .gif, .jpg, .jpeg, or .png)• Keep your file names short but descriptive

• i1.gif is probably too short

• myimagewithmydogonmybirthday.gif is too long

• dogbday.gif may be just about right

12

Image Element

• The image element configures graphics on a web page.

• Tag Used: <img> It is a stand-alone tag, void element

• Required attributes:

• src – gives the url or file name of the image

• alt – gives alternate text phrase to describe the image, necessary for accessibility. Is shown as a screen tip when the mouse hovers over the image and shown if the browser has not yet loaded the image.

• Example:

<img src=“logo.gif” alt = “My company name” />

Accessibility & Images• Required:

• Configure the alt attribute

• Alternate text content to convey the meaning/intent of the image

• If the image contains a text message, then the text should typically be the value of the alt attribute

• NOT the file name of the image

• Use alt=“” for purely decorative images

•Recommended:• If your site navigation uses image links for the main navigation, provide simple text links at the bottom of the page.

Copyright © 2016 Pearson Education, Inc., Hoboken NJ 14

Other commonly used attributes

• height – sets the height of the graphic, in pixels

• width – sets the width of the graphic, in pixels

It is always recommended to set the size of the image in a graphic program such as photoshop.

Example:

<img src=“home.gif” alt=“home” height=“35” width=“90”/>

Image Hyperlinks

• To create an image link, just place the <img> tag inside

a set of anchor tags <a><a href=“index.html”> <img src=“home.gif” alt=“home” /> </a>

Browsers automatically add a border to image links.

Configure CSS to eliminate the borderimg {border-style: none; }

Thumbnail Image

A small image configured to link to a larger version of that image.

<a href=“large.jpg”><img src=“small.jpg” alt=“country road” width=“200” height=“100”></a>

17

Using CSS to center an image:

• Make it a block element and set the margin to auto.

display:block

margin:auto

Example:

<img src=“nameofImage.ext” alt =“alt text”

style="display:block;margin:auto;“ />

18

19

Creating a Transparent Image• Images often have a white box around them which

doesn't look nice on a colored background.

•We want our images to blend into the background

or be transparent

•Use a photo editor such as Photoshop to make the

image transparent.

20

Matching colors from an image

When designing a web page, you may have

a logo or other image that you want to use

as a central theme for your site.

You can match the colors in that logo so

your text, links or other elements will match

21

In Photoshop you can use the eye dropper

tool to find out the hexadecimal value of

a specific color

Click on the eye

dropper icon

Then click on the

specific color in

the image you

want to match

22

Once you click on the color, it will display

at the bottom of the toolbar. Double

click on the color

The color will show here

Double click on the color

to display the color

picker

23

The color picker will give you the hexadecimal code for that color

24

Open the Summer Build Web page and add the following:

•Make the image: SYBcollague2.png transparent and then place it centered above the heading at the top of the page.

•The image should also have:

•An alternate text of "Join a Summer Build“

Background Images

• Use the css property: background-image to configure

an image as a background of an element

• By default, background images tile (repeat)

body { background-image: url(textureone.png) }

<body src=“background-image: url(textone.png)”>

Using both background-color and background-image

•You can configure both a background color and

a background image.

•The background color will display first.

•Next, the image will be displayed as it is loaded by

the browser.

•By coding both, you provide the user with a more

pleasing visual experience

The background-attachment

property•Use the background-attachment property to

configure whether the background image remains

in place or scrolls along with the page in the

browser.

•Values can be fixed or scroll (default)

body {background-image:url(flower.gif);

background-attachment:fixed }

Control how the background image displays in the browser

• Use the background-repeat property to specify

something other than the default tiling of the image.

• Values are:

repeat - this is default that tiles the image to fill up the entire background of the element

no-repeat – image does not repeat and will display only once

in the top left of the background

repeat-x – repeats the image across the top of the page

horizontally.

repeat-y – repeats the image down the left side vertically

CSS background-repeat propertyh2 { background-color: #d5edb3;

color: #5c743d;

background-image:url(trilliumbullet.gif);

background-repeat: no-repeat; }

Positioning the Background Image•You can specify other locations for the background image besides the default top left location using the background-position property.

•Valid values include percentages, pixel values or left, top, center, bottom, right.

The first value indicates horizontal position. The second value indicates vertical position. If only one value is provided, the second value defaults to center

CSS3 Multiple Background Images

• Current versions of most popular web browsers support

the use of multiple background images

• Use the background property to configure multiple

background images.

• Each image declaration is separated by a comma.

33

Progressive Enhancement

• Start with a web page that displays well in most browsers and

then add new design techniques, such as multiple background

images, in a way that enhances the display for visitors using

browsers that support the new technique.

• Configure a separate background-image property with a single

image (rendered by browsers that do not support multiple background images) prior to the background property

configured for multiple images (to be rendered by supporting

browsers and ignored by non-supporting browsers)

body { background-color: #f4ffe4;

color: #333333;

background-image: url(trilliumgradient.png);

background: url(trilliumfoot.gif) no-repeat bottom

right, url(trilliumgradient.png);

}

36

Wrapping text around an image

• To wrap text to either side of an image on a web page use

the style attribute with the float property along with the

values right or left

Example:

<img src="pic1.jpg" alt="alt text" style="float:right" />

Fonts with CSS

•The font-family property configures font

typefaces.

•When a font, that is not installed on your

web visitor’s computer, is specified, the

default font is substituted.

•Times New Roman is the default font used

by most browsers

A common practice is to use serif fonts for headings and a

sans-serif font for detailed text content.

•Create a built-in backup plan by listing multiple

fonts and categories for the value of the font-

family property.

•The browser will attempt to use the fonts in the

order listed.

p { font-family: Verdana, Arial, sans-serif }

The browser will attempt to apply Verdana (if

installed) , then Arial(if installed) or the default

installed sans-serif font.

@ font-face

•CSS3 introduced @font-face to “embed”

other fonts within web pages if you own the

rights to the font.

•The font would need to be stored in a file

with the .woff extension and saved in the

same location as the file that uses it (or

indicate a path to get to it)

Use fonts you downloaded

@font-face { font-family: fontName;

src: url(teen.woff); }

Then use font and apply to any selector

h1 { font-family: fontName, Georgia, serif }

Use fonts you downloaded

•Pay attention to copyright issues. When you

purchase a font for use on your own computer

you do not necessarily purchase the right to freely

distribute it.

•Visit fontsquirrel.com to browse a selection of

commercial –use free fonts available for

download and use.

Using Google Fonts

•Visit fonts.google.com to search for a collection of

free hosted embeddable web fonts.

•Once you find a font, just use the link tag provided

by Google in the head section of your document

and configure your CSS font-family with the

Google web font name.

Using Google fonts

CSS Properties for Formatting Text

•font-size: – sets the size of the font.

•Value can be measured in:

•Text value – xx-small, x-small, small, medium,

large, x-large, xx-large.

•Pixel Unit – 10px, 24px. May not scale in

every browser if text is resized.

•Point Unit – 10pt, 24pt. Used to configure

print version of page.

The font-weight Property

•The font-weight

property configures

the boldness of text.

•The font-

weight:bold

declaration has an

effect similar to the

<strong> tag.

The font-style Property

•The font-style property is typically used to

configure text displayed in italics.

•The font-style:italic declaration has the

same effect as the <em> html element

•Valid values are: normal, italic and oblique

footer { font-style:italic; }

The font-variant property

•Can be used to configure text with small capital

letters

h1 { font-variant: small-caps; }

The line-height Property

•Modifies the default

height of a line of text

and is often

configured using a

percentage value.

• To configure a paragraph

with double spaced lines:

p { line-height: 200%; }

The font shorthand

• There is a shorthand CSS property for declaring certain

typographical properties that is well-supported across

all common browsers, but a little quirky to work with.

• It combines 6 properties into one.

• Syntax:

The font shorthand

• Written Longhand:

Here is the same thing written using the font shorthand property

The font-style, font-variant, and font-weight are all optional

values. If they are included, they must be placed before the

font-size. But if one or more are omitted, they do not default

to the value of their parent; their value will default to the

initial value for each property.

• The font-style, font-variant, and font-weight are

all optional values. If they are included, they must be placed before the font-size. But if one or more are

omitted, they do not default to the value of their

parent; their value will default to the initial value for

each property.

• If you omit the font-size or font-family values in the

shorthand declaration, the entire line of code will

become null in relation to its application of styles

because these are mandatory elements.

The text-align Property

•This property configures the alignment of text

and inline elements within block elements, such

as headings, paragraphs, and divs.

•Valid values are: left, center, right and justify

h1 { text-align: center; }

The text-decoration Property

•This property is used to modify the display of text.

•Valid values are: none, underline, overline, and

line-through.

•One common use is to remove an underline from

a hyperlink.

a { text-decoration: none; }

The text-indent Property

•This property configures the indentation of the

first line of text within an element.

•The value can be numeric (with pt, px, or em) or

a percentage.

• An em is equal to the current font-size, for instance, if the font-

size of the document is 12pt, 1em is equal to 12pt.

p { text-indent: 5em; }

The text-transform Property

•This property configures the capitalization of text.

•Valid values are: none, capitalize, uppercase,

lowercase.

h1 { text-transform: uppercase; }

The letter-spacing Property

•This property configures the space between text

characters.

•Valid values are: normal, and a numeric pixel or

em unit.

h3 { letter-spacing: 3px; }

Configure List Markers with CSSTo change the type of bullet or number you want to use for your list, we will use the property list-style-type:to describe the type of bullet or numbering we want.

An unordered list can have the none, disc, circle or square as the value of this property to change the style of the bullet used.

Examples of each:ul { list-style-type: none;} no list markers are displayed

ul { list-style-type: disc;} filled circle (This is default)

ul { list-style-type: circle;} empty circle ul { list-style-type: square;} square

60

An ordered list can have the following type of numbering:

Lower case roman numeral: i.,ii,iii,iv etc

<ol style="list-style-type: lower-roman">

Upper case roman numeral: I,II,III,IV,V etc..

<ol style="list-style-type: upper-roman">

Lower alphabetic: a,b,c,d…

<ol style="list-style-type: lower-alpha">

Upper alphabetic: A,B,C, D…

<ol style="list-style-type: upper-alpha">

Numeric values – a number (this is default)

<ol style="list-style-type: decimal">

61

Using an image as a bullet in a list

Use an image for a bullet in a list:

Ul { list-style-image: url(bluebead.gif); }

Name of the image

you want to use

Identify placement of list markers

•Use list-style-position to specify where you

want the list marker to be placed.

•Values:

inside Markers are indented, text wraps under

the markers

outside this is default, in front of each item

Practice using CSS text properties•Add style rules to your external style sheet that will:

• Center all heading size ones.

• Change the font of the paragraphs, hyperlinks and

heading 2’s to Arial. Use similar backup fonts for full

browser support.

• Indent the paragraphs under the heading 2’s by 15px.

• Remove the underlines under the hyperlinks by using the

text-decoration property, but make them a different

color so they stand out somehow as a link.

• Format links to be a size 14pt.

• Change the bullets on the home page to use the

hammerbullet.png image found of the L drive.

• Place the list marker so that it displays indented, with the text

wrapping under it.

The Favorites Icon

•The small icon you see in the address bar or

tab of a browser is the Favorites Icon.

•A more modern way to associate a

favorites icon with a web page is to use the

<link> element.

•Three attributes are used: rel, href and type. <link rel=“icon” href=“favicon.ico” type=“image/x-

icon”>

The Favorites Icon•Using a graphics program, create an image that is 16 x

16 pixels and save it as a .gif.

•You can save the image as any image file type you

like, but many icon generators can only support GIF

or BMP files. PNG is gaining support by many.

•Also, GIF files use flat colors, and these often show up

better in the small space than JPG photographs do.

•Once you have an acceptable image, you need to

convert it to the icon format (.ICO).

Converting to .ico

•You can use an application program such as photoshop, with the ico format plug in.

•An online converter can often be more efficient if you do not have a large quantity of icons to convert.

•favicon.cc

•favicongenerator.com

•freefavicon.com

•ficoneditor.com

67

Image Maps•Unlike putting a link tag around an image to

make the entire image a link, in an image map,

the entire image does not have to be clickable,

instead either a specific area or several areas

serve as the hotspots

• Image maps can be used for navigation. A

single image is divided into many hotspots that,

when clicked, sends the visitor to another

location, often within the same site

68

Image Map Components

•Image maps consist of two components:

1. The image that you want to use for the image

map

2. A Map Definition that describes the hotspots

•There are 4 steps in creating an image map.

69

1. Selecting Images•Not all images are

appropriate to use

•Appropriate images are

ones with obvious visual

selections.

•Use the <img> element to

place the image on the

page where you want it to

display.

70

2. Determine the Borders of Clickable Areas

• Decide the shape of the hotspot you want

to use and where on the map it will be.

• Image maps can configure clickable areas

in three shapes:

• Rectangle

• Circle

• Polygon

71

Sketching the Borders of Clickable Areas

Link to

Huntington

Beach

Web page

Link to

Maui

Web pageLink to

Ft. Lauderdale

Web page

72

3. Finding the Coordinates of each hotspot• Find the x- and y- coordinates for the images, relative to

the x-axis and y-axis

• In a coordinate pair, the first number is the x-coordinate

and the second number is the y-coordinate

Finding the Coordinates• Using Pixlr or Photoshop you can find the x and y coordinates by either

drawing a box around the shape or just placing your mouse in the

areas where the coordinates are and writing them down.

73

What coordinates do we use?

•Finding coordinates for:•A rectangle shape:

• Uses 4 coordinates: The top left corner and the bottom right corner

•A polygon shape:• Uses the x & y coordinates for every point in the shape. – 5 points, 5 x’s and 5 y’s

•A circle shape: • Uses 3 coordinates: The center point x and y are the first two. The radius is used for the third point.

74

75

Mapping Image Coordinates

Example of a circle1. Find the x & y of the

Center point

2. Then move along the y-axis to the border.

3. Find the x coordinate there

4. Subtract the two x coordinatesand that is the radius or the third point

5. Our three points in this example would be “388, 154, 71”

76

•

X and y of

the center X of the

border

459388,154

459- 388 = 71

77

4. Coding the Map

•Mapping tags

•<map> and </map>

• Creates a client-side image map

•<area />

• One area tag is used for each hotspot you have on

your map

78

Attributes•Attribute of the <map> </map> tag

1. name– defines the name of the map2. id - must be the same as the name.

•Attributes of the <area /> tag1. shape – indicates the shape of the hotspot.

shape = “rect”shape = “poly”shape = “circle”shape = “point”

2. coords – indicates the points bounding the hotspotmake sure to use the appropriate number for the shape you chose.

Attributes

3. href – indicates the URL for the hotspot

4. alt – gives alternate text description for screen readers.

5. title – to specify text that some browsers will display as a tooltip when the mouse is placed over the hotspot

79

Attribute of the <img> tag

The <img> tag also needs an attribute added so the browser knows what image is being used as the map

1. usemap – used with the # symbol and a name you give it.

<img src=“skier.jpg” alt=“ski” usemap=“#ski” />

Example of coding a mapCode for the Image to be used:

<img src=“surfmap.gif” alt=“surf” usemap = “#surf”>

* placed in the spot where you want the image to appear.

Code for the Map Definition:

<map id=“surf” name=“surf”>

<area shape=“rect” coords=“15, 190,119,345” href=“page2.htm” alt=“text to display” title=“Surf Miami” />

<area shape=“circle” coords=“388,154,71” href=“page3.htm” alt=“text to display” title=“Surf Huntington Beach”/>

</map>

81

Names must match