Download Lesson 3 Power Techniques

Lesson 3
Power Techniques
HTML and JavaScript
BASICS, 4th Edition
1
Barksdale / Turner
Objectives



Lesson 3

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.

2
Barksdale / Turner
HTML and JavaScript BASICS 4E
Objectives (continued)

Lesson 3

Turn pictures into hyperlinks.
Insert a variety of data input options.
3
Barksdale / Turner
HTML and JavaScript BASICS 4E
Vocabulary



Lesson 3

4
.gif
.jpg or .jpeg
.png
Graphics
Interchange Format
Barksdale / Turner


Joint Photographic
Experts Group
Portable Network
Graphics
HTML and JavaScript BASICS 4E
Texting to Perfection


Lesson 3

5

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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Downloading and Inserting
Graphics

Lesson 3



6
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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Downloading and Inserting
Graphics (continued)
A GIF image as seen in the Internet Explorer
browser
Lesson 3

7
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating Pictures of All Sizes

Lesson 3

8

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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating Pictures of All Sizes
(continued)
GIF images with changing attributes and values in a
Firefox browser
Lesson 3

9
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating Orderly Tables

Lesson 3

10



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
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating Orderly Tables
(continued)
An HTML table as seen in a Chrome browser
Lesson 3

11
Barksdale / Turner
HTML and JavaScript BASICS 4E
Adding Extraordinary Extras

Data input or <form> tag options give you ways to ask
questions of Web page visitors.
–
–
Lesson 3
–
12
–
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.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Lesson 3
Summary
13
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.
Barksdale / Turner
HTML and JavaScript BASICS 4E