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

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

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

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

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

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

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

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