1. Lesson 3 — HTML Power Techniques
Unit 1 — HTML BASICS
Lesson 3 — HTML Power Techniques

2. 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.
Turn pictures into hyperlinks.
Insert a variety of data input options into a Web page.
HTML BASICS

3. 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
HTML BASICS

4. 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
HTML BASICS

5. 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

6. Downloading and Inserting Graphics (cont.)
Choose Save Picture As in Internet Explorer.
Choose Save Image in Netscape Navigator.
HTML BASICS

7. Downloading and Inserting Graphics (cont.)
<IMG SRC = “LEVY.GIF”>
Image Source tag:
Image tag
SOURCE attribute
Graphic filename in quotes
HTML BASICS

8. Downloading and Inserting Graphics (cont.)
The Final Result
HTML BASICS

9. <IMG SRC = “LEVY.GIF” HEIGHT=100 WIDTH=100>
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
HTML BASICS

10. Pictures of All Sizes (cont.)
ALIGN=RIGHT
HEIGHT=200 WIDTH=200
HEIGHT=100 WIDTH=100
HEIGHT=150 WIDTH=150
HTML BASICS

11. 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
HTML BASICS

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

13. Orderly Tables (cont.)
Create the title or first row of a table with these tags:
<TR>
<TH>Dragons</TH>
<TH>Colors</TH>
<TH>Fonts</TH>
</TR>
HTML BASICS

14. 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

15. 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>
HTML BASICS

16. Extraordinary Extras
A few simple tags will create a variety of data input options.
Text box
Drop-down list
Radio button
Check box
HTML BASICS

17. 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:
<P>
HTML BASICS

18. 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>
HTML BASICS

19. 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
<INPUT TYPE=“RADIO” NAME=“BEST”>McDonald’s<BR>
<P>
HTML BASICS

20. Extraordinary Extras (cont.)
Create a check box input option with these tags:
I like to eat:
<INPUT TYPE=
“CHECKBOX”>Hamburgers
<BR>
“CHECKBOX”>Tacos<BR>
<P>
HTML BASICS

21. 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.
HTML BASICS