My First Table

ÐÏà¡±á>þÿ QSþÿÿÿ456789:;<=>?@ABCDEFGHIJKLMNOPÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿì¥Á#` ø¿:;bjbj5G5G @ðW-W-Ç0Xÿÿÿÿÿÿ¤JJJJ& & & 44T5ÐóÐóÐóh8ô¤ÜôüˆDæ<päùØ¼ûÒûÒûÒû1nŸ´S\e<g<g<g<g<g<g<$V?h¾A^‹<& [Ç j1[[‹<JJÒûÒûõ <www[ØJVÒû& Òûe<w[e<wwª)| †& e*ÒûØùÀ'ê:€ËÐó3)i+ü¶<0æ<Ÿ)ÆB;&B$e*e*tB& Ù*¯„3^w‘LÝ~¯¯¯‹<‹<a¯¯¯æ<[[[[ˆDˆDˆDDwÌ»8ˆDˆDˆDÌ»Z nÂ0JJJJJJÿÿÿÿHTML Web Sites Tables TOC \o "1-3" \h \z \u HYPERLINK \l "_Toc255890654" Do Now’s PAGEREF _Toc255890654 \h 2 HYPERLINK \l "_Toc255890655" Website Code Homework: PAGEREF _Toc255890655 \h 4 HYPERLINK \l "_Toc255890657" “Creating a Table” using HTML Code PAGEREF _Toc255890657 \h 5 HYPERLINK \l "_Toc255890658" Do Now: Type the following code into a new notepad: PAGEREF _Toc255890658 \h 6 HYPERLINK \l "_Toc255890659" Extraordinary Extras PAGEREF _Toc255890659 \h 7 HYPERLINK \l "_Toc255890660" “Creating an Animal Table” using HTML Code PAGEREF _Toc255890660 \h 8 HYPERLINK \l "_Toc255890661" Animal Table Handout PAGEREF _Toc255890661 \h 9 HYPERLINK \l "_Toc255890662" New Table Codes (others) PAGEREF _Toc255890662 \h 10 HYPERLINK \l "_Toc255890663" Table HTML Website Checklist PAGEREF _Toc255890663 \h 12 HYPERLINK \l "_Toc255890664" Presentation Day PAGEREF _Toc255890664 \h 13 HYPERLINK \l "_Toc255890665" Project Self Assessment PAGEREF _Toc255890665 \h 15 HYPERLINK \l "_Toc255890666" Table HTML Website Checklist PAGEREF _Toc255890666 \h 15 What is a table used on a website? Think of one website that uses a table and why did they use it? Do Now’s Website Code Homework: Name________________________________________________ Period________ Look at a few websites online. Then list below 5 websites with codes and information that you may like to use in your next website. Web site urlInformation that is usefulWhat codes I may use on my website “Creating a Table” using HTML Code Directions: Type this into notepad. Start>Programs>Accessories>Notepad. Save this notepad into your Project 3 folder. Call it: YourNameTable.html Test your page by saving and close notepad. Find you file and open it. Internet Explorer will open. Click View>Source to see your notepad page. If you are done, add a “new” row with a new image, font and color. My First Table Your table will be listed below:

Images Colors Fonts
Red Times
GREEN Courier

Do Now: Type the following code into a new notepad:

peaches grapes oranges

watermelon limes watermelon

Directions: Click on the link below and copy and paste the code for a three by three table. HYPERLINK "http://www.htmlcodetutorial.com/tables/_TR.html" http://www.htmlcodetutorial.com/tables/_TR.html peachesgrapesorangeswatermelonlimeswatermelon Add the following: color to each cell to reflect fruit’s color a heading row a picture row change the cell padding Extraordinary Extras-A few simple tags will create variety of data input options. Create a text box input option with these tags: Enter your first name:
Enter your last name:

Create a drop-down list option with these tags:

Create a radio button option with these tags: The best place to eat is:
Wendy’s
McDonald’s

Create a check box input option with these tags: I like to eat:
Hamburgers
Tacos

“Creating an Animal Table” using HTML Code Name:_______________________________Date_________ Your assignment today is to create a one page website: An Australian zoo has hired you to create a web page that describes some of the animals they currently have on display. They want your web page to be well organized they also want you to include images of the animals along with a short descriptive paragraph about each. You will add an image, an appropriate title and description for each animal. Directions: Type this into notepad. Start>Programs>Accessories>Notepad. Save this notepad into your Project 3 folder. Call it: YourNameTable.html Test your page by saving and close notepad. Find you file and open it. Internet Explorer will open. Click View>Source to see your notepad page. If you are done, add a “new” row with a new image, font and color. Animal Table Handout My First Table

Web Page Title New Table Codes (others) Add an Hyperlink to a New Page New Page Directions 1. Save a new page into your project folder called 2ndpage.html 2. Add a hyperlink code to a new page: 2nd page Basic Table Tags The three most important tags for tables is the opening table tag,

Image	Animal	Fact
	Red	Times
	GREEN	Courier
	GREEN	Jokerman

and the table row and table data tags - and tag represents a row for the table The tags indicate two rows and the three opening

respectively. The

tag represents a cell inside the row. Now, with that in mind, let's create a simple table:

A	B	C
X	Y	Z

And this is what the table would look like published: ABCXYZNotice that by looking at the code, you can tell how many rows and columns are included just by looking at the code. The two opening

tags on each line represents three data cells (or three columns). Adding Table Borders Adding a border simply involves inserting the border attribute to the opening table tag. So in the above table the code would be adjusted accordingly:

A	B	C
X	Y	Z

Notice the "2" represents the thickness of the border. If you had set it to "0" then there would have been no border at all. If you wanted it very thick then you could set it to 8, for example. So now your table will look like this: ABCXYZChanging a Table's Border Color You can change the color of a table border by simply adding the bordercolor attribute.

A	B	C
X	Y	Z