1

Lesson 3Power Techniques

HTML and JavaScript BASICS, 4th Edition

Barksdale / Turner

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E22

Objectives

Control the size, style, and color of fonts. Download pictures from the Web. Insert pictures into your Web page. Change the size of graphics. Use tables to organize information.

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E33

Objectives (continued)

Turn pictures into hyperlinks. Insert a variety of data input options.

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E44

Vocabulary

.gif .jpg or .jpeg .png Graphics Interchange Format

Joint Photographic Experts Group Portable Network Graphics

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E55

Texting to Perfection

Fonts define the style for letters and numbers.

Each font has a unique, well-defined style. Fonts can be altered with HTML and CSS

styles, attributes, and values. You can change the size, color, or style of a

single paragraph, a single sentence, or even a single word, with the <style> tag.

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E66

Downloading and Inserting Graphics

Three common file types for graphics used in Web pages are GIF, JPEG, and PNG.

GIF files can be used as regular images, allow transparency, and can be animated.

JPEG images are compact enough for Internet use, and are supported by most digital cameras.

PNG was designed to replace GIF files.

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E

Downloading and Inserting Graphics (continued)

A GIF image as seen in the Internet Explorer browser

7

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E88

Creating Pictures of All Sizes

Pictures can be altered by changing a tag’s values.

They can be aligned in the center, to the left side, or to the right side of a page.

You can also change the size of the picture by using the height and width attributes.

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E

Creating Pictures of All Sizes (continued)

GIF images with changing attributes and values in a Firefox browser

9

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E1010

Creating Orderly Tables

Tables are a grid of columns and rows that create boxes that can contain text and images.

Each intersection of a column and a row creates a box or cell.

<tr> defines a table row <th> defines a table header <td> defines a table cell

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E

Creating Orderly Tables (continued)

An HTML table as seen in a Chrome browser

11

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E1212

Adding Extraordinary Extras

Data input or <form> tag options give you ways to ask questions of Web page visitors.– Text box: A box where visitors can enter responses.– Drop-down list: Appears when a Web site visitor clicks an

arrow to display a list of possible options. – Radio button: Circular button that allows a Web site visitor to

choose one option from a group of options.– Check box: Allows a user to select more than one option from

a group of options.

Le

sso

n 3

Barksdale / Turner HTML and JavaScript BASICS 4E1313

Summary

In this lesson, you learned: How to control the size, style, and color of fonts. How to download and insert graphics into your

Web page. How to change the size and placement of

graphics. How to create tables to organize information. How to insert a variety of data input options into

a Web page.