PPT Lesson 03

Downloading and Inserting Graphics (cont.)
<IMG SRC = “LEVY.GIF”>

Image Source tag:
– – –
Image tag SOURCE attribute Graphic filename in quotes
7
HTML BASICS
HTML BASICS
Extraordinary Extras (cont.)

Create a text box input option with these tags:
Enter your first name: <INPUT TYPE=“TEXT” SIZE=“25”> <BR> Enter your last name: <INPUT TYPE=“TEXT” SIZE=“25”> <P>
HTML BASICS
2
Font Attributes and Values
<FONT FACE=ARIAL SIZE=8 COLOR=ORANGE></FONT>

Font attributes:
– – – – –
Open font tag Font STYLE attribute=Arial value Font SIZE attribute=value of 8 Font COLOR attribute=orange value Close font tag
17
HTML BASICS
Extraordinary Extras (cont.)

Create a drop-down list option with these tags:
<SELECT> <OPTION SELECTED> Pick your Favorite Team from the list: <OPTION> Chicago Bulls <OPTION> Utah Jazz </SELECT> <P>
Orderly Tables
<TABLE BORDER=5 CELLPADDING=10 ALIGN=CENTER

Font attributes:
–
–
– –
Open table tag Add a narrow border Add space between cells Center the table
Downloading and Inserting Graphics (cont.)

The Final Result
8
HTML BASICS
Pictures of All Sizes
<IMG SRC = “LEVY.GIF” HEIGHT=100 WIDTH=100>

Image Source tag: – Image tag – SOURCE attribute – Graphic filename in quotes – The HEIGHT attribute – The HEIGHT attribute
18
HTML BASICS
Extraordinary Extras (cont.)

Create a radio button option with these tags:
The best place to eat is: <BR> <INPUT TYPE=“RADIO” NAME=“BEST”>Wendy’s <BR> <INPUT TYPE=“RADIO” NAME=“BEST”>McDonald’s <BR> <P>
9
HTML BASICS
Pictures of All Sizes (cont.)

ALIGN=RIGHT

HEIGHT=200 WIDTH=200
HEIGHT=100 WIDTH=100


HEIGHT=150 WIDTH=150
HEIGHT=200 WIDTH=200

10
HTML BASICS
11
HTML BASICS
Orderly Tables (cont.)

Center the table. Add a narrow border. Add space between cells.
12
HTML BASICS
Orderly Tables (cont.)

Create the title or first row of a table with these tags:
19
HTML BASICS
Extraordinary Extras (cont.)

Create a check box input option with these tags:
I like to eat: <INPUT TYPE= “CHECKBOX>Hamburgers <BR> <INPUT TYPE= “CHECKBOX>Tacos<BR> <P>
3
HTML BASICS
Font Attributes and Values (cont.)

A few simple tags can make a major difference in the look of your text.
–
–
– –
Red, size 4, Helvetica Green, size 6, Times Orange, size 8, Arial Black, size 2, Courier
20
HTML BASICS
Summary



You can control the size, style, and color of fonts. You can download pictures from the Web. You can insert pictures into your Web pages. You can change the size of graphics You can use tables to organize information. You can turn pictures into hyperlinks. You can insert a variety of data input options into a Web page.
14
HTML BASICS
Orderly Tables (cont.)

Create the third row of a table with these tags:
<TR> <TD><IMG SRC=“LEVY.GIF’ HEIGHT=75 WIDTH=50></TD> <TD BGCOLOR=GREEN ALIGN=CENTER>GREEN</TD> <TD ALIGN=CENTER><FONT FACE=COURIER SIZE=10 COLOR=GREEN>Courier</TD> </TR>
<TR> <TH>Dragons</TH> <TH>Colors</TH> <TH>Fonts</TH> </TR>
13
HTML BASICS
Orderly Tables (cont.)

Create the second row of a table with these tags:
<TR> <TD><IMG SRC=“LEVY.GIF’ HEIGHT=50 WIDTH=50></TD> <TD BGCOLOR=RED ALIGN=CENTER>Red</TD> <TD ALIGN=CENTER><FONT FACE=TIMES SIZE=7 COLOR=GREEN>Times</TD> </TR>
HTML BASICS
4
Downloading and Inserting Graphics


Download .gif or .jpg files from any Web page in Windows by right clicking on the graphic. With a Macintosh, click and hold down the mouse key.
HTML BASICS
21
HTML BASICS
5
Downloading and Inserting Graphics (cont.)


Choose Save Picture As in Internet Explorer. Choose Save Image in Netscape Navigator.
6
HTML BASICS
15
HTML BASICS
Extraordinary Extras

A few simple tags will create a variety of data input options.
– –
–
–
Text box Drop-down list Radio button Check box