Download - Lesson 3 Power Techniques
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.