HTML Web Sites
HTML Web Sites
Tables
[pic][pic][pic]
Do Now’s 2
Website Code Homework: 4
“Creating a Table” using HTML Code 5
Do Now: Type the following code into a new notepad: 6
Extraordinary Extras 7
“Creating an Animal Table” using HTML Code 8
Animal Table Handout 9
New Table Codes (others) 10
Table HTML Website Checklist 12
Presentation Day 13
Project Self Assessment 15
Table HTML Website Checklist 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 url |Information that is useful |What codes I may use on my website |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
“Creating a Table” using HTML Code
Directions:
1. Type this into notepad. Start>Programs>Accessories>Notepad.
2. Save this notepad into your Project 3 folder. Call it:
YourNameTable.html
3. Test your page by saving and close notepad.
4. Find you file and open it. Internet Explorer will open.
5. Click View>Source to see your notepad page.
6. 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.
|peaches |grapes |oranges |
|watermelon |limes |watermelon |
Add the following:
1. color to each cell to reflect fruit’s color
2. a heading row
3. a picture row
4. 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:
Pick your Favorite Team from the list:
Chicago Bulls
Utah Jazz
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:
1. Type this into notepad. Start>Programs>Accessories>Notepad.
2. Save this notepad into your Project 3 folder. Call it:
YourNameTable.html
3. Test your page by saving and close notepad.
4. Find you file and open it. Internet Explorer will open.
5. Click View>Source to see your notepad page.
6. If you are done, add a “new” row with a new image, font and color.
Animal Table Handout
My First Table
Web Page Title
Image
Animal
Fact
Red
Times
GREEN
Courier
GREEN
Jokerman
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, and the table row and table data tags - and respectively.
The tag represents a row for the table
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:
|A |B |C |
|X |Y |Z |
Notice 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 indicate two rows and the three 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:
|A |B |C |
|X |Y |Z |
Changing 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
And here's what it would look like...
|A |B |C |
|X |Y |Z |
HTML Link Button Code
Code
Sample
Name:
Period:
|Date Started |Table HTML Website Checklist |Date Completed |
| |3 images minimum (backgrounds are included) | |
| |3 citations for images & information | |
| |1. Book or E-Book | |
| |2. Data Base | |
| |3. Websites | |
| |3 hyperlinks (minimum) | |
| |suggestion: zoo web cam | |
| |1 table | |
| |Different font styles and sizes | |
| |(especially for heading of table) | |
| |Text is easy to read (background does not interfer with text) | |
| |Good use of color in table, font, background | |
| |3 pts. Bonus: Add a second page with link | |
| |2 pts. for link back home with button | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
Presentation Day
Name:_____________________________________
1. What is unique about your site
| |
| |
2. What special codes did you include
| |
| |
3. How does your personality come through
| |
| |
4. What would you do differently next time?
| |
| |
| |
|Montgomery Upper Middle School |
|Web Design Presentation Rubric |
| |
|Name: ________________________ |
|Teacher: Mrs. Markmann |
| |
|Date Submitted: ____________ |
|Title of Work: ___________________ |
| |
| |
|Criteria |
| |
| |
| |
| |
|20 |
|15 |
|10 |
|5 |
| |
| |
| |
| |
| |
| |
| |
|Eye Contact |
|Holds attention of entire audience with the use of direct eye contact. |
|Consistent use of direct eye contact with audience. |
|Displayed minimal eye contact with audience. |
|No eye contact with audience. |
| |
|Introduction and Closure |
|Student delivers open and closing remarks that capture the attention of the audience and set the mood. |
|Student displays clear introductory or closing remarks. |
|Student clearly uses either an introductory or closing remark, but not both. |
|Student does not display clear introductory or closing remarks. |
| |
|Pacing |
|Good use of drama and student meets apportioned time interval. |
|Delivery is patterned, but does not meet apportioned time interval. |
|Delivery is in bursts and does not meet apportioned time interval. |
|Delivery is either too quick or too slow to meet apportioned time interval. |
| |
|Poise |
|Student displays relaxed, self-confident nature about self, with no mistakes. |
|Makes minor mistakes, but quickly recovers from them; displays little or no tension. |
|Displays mild tension; has trouble recovering from mistakes. |
|Tension and nervousness is obvious; has trouble recovering from mistakes. |
| |
|Voice |
|Use of fluid speech and inflection maintains the interest of the audience. |
|Satisfactory use of inflection, but does not consistently use fluid speech. |
|Displays some level of inflection throughout delivery. |
|Consistently uses a monotone voice. |
| |
| Points |
| |
| |
| Total----> |
|________ |
| |
| |
| |
|Teacher Comments: |
| |
| |
| |
|[pic] |
Project Self Assessment
Name:____________________________________ User #_________________
Directions: This is your Self Assessment. Write what was unique or creative about your site below.
|Date Started |Table HTML Website Checklist |Date Completed |
| |3 images minimum (backgrounds are included) | |
| |3 citations for images & information | |
| |3 hyperlinks (minimum) | |
| |1 table | |
| |Different font styles and sizes | |
| |Text is easy to read | |
| |Good use of color in table, font, background | |
| | | |
| |5 pts. Bonus: Add a second page and hyperlink | |
| |Exemplary – 4 |Adequate – 3 |Attempted – 2 |Inadequate – 1 |Student |Teacher |
| | | | | |Self-Assessment |Assessment |
|Work Ethic |Student always uses the|Student usually uses|Student does not |Student does not| | |
| |classroom project time |classroom project |use classroom time |use classroom | | |
| |well. Conversations |time well. Most |well OR typically |time well AND | | |
| |are primarily focused |conversations are |is disruptive to |typically is | | |
| |on the project and |focused on the |the work of others.|disruptive to | | |
| |things needed to get |project and things |Late to class |the work of | | |
| |the work done and are |needed to get the |twice. |others.. Late to| | |
| |held in a manner that |work done and are | |class three | | |
| |does not disrupt |held in a manner | |times. | | |
| |others. |that typically does | | | | |
| | |not disrupt others. | | | | |
| | |Late to class. | | | | |
|Mechanics (see |All requirements are |There are one or two|There are 3 – 5 |There are more | | |
|above) |included in the final |items missing in the|items missing in |than 5 items | | |
| |project. |final project. |the final project. |missing in the | | |
| | | | |final project. | | |
|Creativity |A great deal of |Thoughtful format |Put little creative|Put no creative | | |
| |creative energy was put|with many creative |energy into |energy into | | |
| |into the project; very |touches; somewhat |project; little |project; no | | |
| |original. |original. |originality. |originality. | | |
|TOTAL | | | | | |
| Grade |12/12 – 100 |10/12 – 83 |8/12 – 67 |6/12 – 50 |4/12 – 33 |
| |11/12 – 92 |9/12 – 75 |7/12 – 58 |5/12 – 42 |3/12 – 25 |
| |
|Additional Comments: |
| |
Computer Technology Rubric
-----------------------
Web Design
Name:
First Row
Second Row
Third Row
Presenter:________________________
One/two positive comment:
| |
| |
| |
| |
| |
One/Two specific recommendations:
| |
| |
| |
| |
| |
Presenter:________________________
One/two positive comment:
| |
| |
| |
| |
| |
One/Two specific recommendations:
| |
| |
| |
| |
| |
Presenter:________________________
One/two positive comment:
| |
| |
| |
| |
| |
One/Two specific recommendations:
| |
| |
| |
| |
| |
Presenter:________________________
One/two positive comment:
| |
| |
| |
| |
| |
One/Two specific recommendations:
| |
| |
| |
| |
| |
Due Date:
Type text here.
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.