Chapter 4 Internet Applications (Dr.Mona)

7/31/2019 Chapter 4 Internet Applications (Dr.Mona)

1/37

Web Development & DesignFoundations with XHTML

Chapter 4Key Concepts


2/37

2

LearningOutcomes

In this chapter, you will learn to: Create and format lines and borders on Web

pages

Decide when to use graphics and what graphics

are appropriateApply the image element to add graphics to Web

pages

Configure images as backgrounds on Web pageelements

Configure images as hyperlinks

Find free and fee-based graphics sources

Follow recommended Web design guidelineswhen using graphics on Web pages


3/37

3

The Horizontal RuleElement

Configures a horizontal line


4/37

The CSS border Property

Configures a border on the top, right,bottom, and left sides of an element

Consists of

border-width border-style

border-color

h2 { border: 2px solid #ff0000 }


5/37

CSS Borders:Block / Inline Elements

Block element default width of element content extends to

browser margin (or specified width)

Inline element

Border closely outlines the element content

h2 { border: 2px solid #ff0000; }

a { border: 2px solid #ff0000; }


6/37

Browser Display Can Vary


7/37

Configuring SpecificSides of a Border

Use CSS to configure a line on one or moresides of an element

border-bottom

border-left

border-right

border-top

h2 { border-bottom: 2px solid #ff0000 }


8/37

The CSS padding Property

Configures empty space between thecontent of the XHTML element and theborder

Set to 0px by default

h2 { border: 2px solid #ff0000;

padding: 5px; }

No padding configured:


9/37

Configuring Padding onSpecific Sides of an Element

Use CSS to configure padding on one ormore sides of an element

padding-bottom

padding-left

padding-right

padding-top


background-color: #cccccc;

padding-left: 5px;

padding-bottom: 10px;

padding-top: 10px;}


10/37

CSS padding PropertyShorthand: two values

Two numeric values or percentages first value configures top and bottom padding

the second value configures left and right padding



padding: 20px 10px;

}


11/37

CSS padding PropertyShorthand: four values

Four numeric values or percentages Configure top, right, bottom, and left padding


width: 250px;


padding: 30px 10px 5px 20px;

}


12/37

Hands-On Practice

h1 { background-color:#191970;color:#E6E6FA;

padding: 15px;

font-family: Georgia, "Times New Roman", serif; }

h2 { background-color:#AEAED4;

color:#191970;

font-family: Georgia, "Times New Roman", serif;

border-bottom: 2px dashed #191970; }


13/37

13

Checkpoint 4.1

1.

Is it reasonable to try to code a Web page thatlooks exactly the same on every browser andevery platform? Explain your answer.

2. When a Web page containing the style rules

below is rendered in a browser, the border doesnot display. Describe what is incorrect with thefollowing code:

h2 { background-color: #ff0000

border-top: thin solid #000000}}

3. True or False? CSS can be used to configurevisual elements such as rectangular shapes and

lines on Web pages.


14/37

14

Types ofGraphics

Graphic types commonly used onWeb pages:

GIF JPG

PNG


15/37

15

GIF

Graphics Interchange Format

Best used for line art and logos

Maximum of 256 colors

One color can be configured as transparent Can be animated

Uses lossless compression

Can be interlaced


16/37


17/37

17

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

Use lossless compression

Combines the best of GIF & JPEG

Browser support is growing


18/37

18

XHTML Image Element

Configures graphics on a Web page

src Attribute

File name of the graphic alt Attribute

Configures alternate text content (description)

height Attribute Height of the graphic in pixels

width Attribute Width of the graphic in pixels

XHTML i /


19/37

XHTMLAlignment

Note: In Chapter 6 youll learn to use CSS to configure image alignment.


20/37

XHTML MoreAttributes

Adding Vertical Space vspace Attribute

Adding Horizontal Space hspace Attribute

Note: A more modern approach is touse the CSS padding property


21/37

Accessibility & Images

Required: Configure the alt attribute

Alternate text content to convey the meaning/intentof the image

NOT the file name of the image

Use alt= for purely decorative images

Optional:

Configure the longdesc attribute Used when meaning cannot be conveyed in the alt

text

Usually a URL to a Web page with text

I


22/37

22

ImageLinks

To create an image link use an anchorelement to contain an image element

Browsers automatically add a border toimage links.

Configure CSS to eliminate the borderimg {border:0 }

Home


23/37

CSS background-imageProperty

Configures a background-image By default, background images tile (repeat)

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

CSS b k d P


24/37

CSS background-repeat Property


25/37

Using background-repeat

h2 { background-color: #d5edb3;

color: #5c743d;

font-family: Georgia, "Times New Roman", serif;padding-left: 30px;

background-image: url(trilliumbullet.gif);

background-repeat: no-repeat;

}

trilliumbullet.gif:

h k


26/37

26

Checkpoint 4.2

1. Describe the CSS to configure a graphic namedcircle.jpg to display once in the background of all elements. Code sample CSS todemonstrate this.

2. Describe the CSS that configures a file namedbg.gif to repeat vertically down the background ofa Web page. Code sample CSS to demonstratethis.

3. True or False? When coding image links, youmust configure the image tag with border="0" toavoid the default blue border.


27/37

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

O i i


28/37

28

OrganizingYour Site

Place images intheir own folder

Code the path tothe file in the srcatttribute


29/37

Other Image Topics

Thumbnail Images Image Maps

Sources for Graphics

Guidelines for Using Images

Accessibility


30/37

30

Thumbnail Image

A small image configured to link to alarger version of that image.

Image


31/37

31

ImageMaps

element Defines the map

element Defines a specific area on a map

Can be set to a rectangle, circle, orpolygon href Attibute

shape Attribute coords Attribute

Sample


32/37

SampleImage Map

Sources


33/37

33

Sourcesfor Graphics

Create them yourself using a graphics application: Adobe Photoshop

Adobe Fireworks

Googles Picasa (http://picasa.google.com/)

Download graphics from a free site Purchase/download professional-quality graphics

Purchase a graphics collection on a CD

Take digital photographs

Scan your photographs Scan your drawings

Hire a graphic designer to create graphics


34/37

34

Guidelinesfor

UsingImages

Consider image load time

Reuse images

Consider image file size with image quality Screen Resolution

Specify dimensions

Gamma brightness & contrast


35/37

35

Images and Accessibility Don't rely on color alone.

Some visitors may have color perception deficiencies.Use high contrast between background and text color.

Provide a text equivalent for non-text

elements. Use the alt attribute on your image elements

If your site navigation uses image links,

provide simple text links at the bottom ofthe page.


36/37

36

Checkpoint 4.3

1. Search for a site that uses image links to provide

navigation. List the URL of the page.

What colors are used on the image links?

If the image links contain text, is there good contrastbetween the background color and letters on the image

links?Would the page be accessible to a visitor who is sight-

challenged?

How have accessibility issues been addressed?

Is the alt attribute used to describe the image link?

Is there a row of text links in the footer section of the page?

Answer the questions above and discuss your findings.


37/37

37

Summary

This chapter introduced the use of visual elementsand graphics on Web pages.

As you continue to create web pages, look back atthe guidelines and accessibility issues related to

graphics.

The number one reason for visitors to leave webpages is too long of a download time. When using

images, be careful to minimize this issue.

Provide alternatives to images (such as text links)and use the alt attribute on your pages.

Documents

Chapter 4 Internet Applications (Dr.Mona)