Want to create interactive content? It’s easy in Genially!
Creating a Table using HTML-Using Notepad
HS: High School
Created on October 1, 2024
Web Design Assignment
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Web Design
Student Choice Board-1.2.6
Using Notepad
Creating a Table
Start
Creating a Table and Adding Images using HTML
Introduction
You will be using this Presentation to create a table in your web page. On the next page, you will see the assignment rubric. After that page, check out the Choice Board with 4 different data option sets to create your table. Three of those options have provided data for you to add in as you work through the directions. One option allows you to pick the data of your choosing while you create the web page. Press/click on the info button to learn more about the goal of this assignment.
+ info
Rubric for this assignment
Start Here
Creating The web page code ~ Notepad
Creating the web page code ~ Notepad
This is the beginning part of our assignment; creating the code Follow the step-by-step directions to help you create table. A video has been provided to help you if you should get stuck. Images of each step have also been provided.
Go to Directions
Video Help
Final Preview
Creating the web page code ~ Notepad
Step 1: Create Folders
1. Create a folder on your computer by going to File Explorer. 2. Press/Click on New Folder. (This will appear in the white area below the ribbon). 3. Name the folder: assignments
Step 2: Create a new file
1. Open a New Notepad File 2. Save the file as: table_assignment.html Make sure to save your file in the "assignments" folder you just made.
Press/Click the info button for tips on how to save
+ info
Creating the web page code ~ Notepad
Step 3: Create the HTML Web Page Structure
1. In your new Notepad file, type the HTML Skeleton structure. See the image on the right for help or press/click on the info button for the code. 2. Save the File by Pressing/Clicking File, then Save. .
+ info
Creating the web page code ~ NOtepad
Step 4: Add the <table>, <tr> and <th> tag.
1. Place your cursor by the Opening Body tag <body> 2. Press the Enter Key on your keyboard twice. 3. Add the Opening <table> tag underneath the body tag, hit Enter and add the Closing </table> tag.
Step 5: Add the Table Headings
1. Press the Enter Key after the Opening <table> tag. 2. Space over two times. 3. Type <tr> and press Enter 4. Press the Tab Key once to indent. 5. Type the table headings using <th> </th>. Will you make three lines of headings. See the image to your right for help. You can also press/click on the info button for help with the code.
+ info
Creating the web page code ~ Notepad
In Step 5, you added three <th> tags to create three headings. This automatically created three columns.
Step 6: Adding <tr>, </tr>, <td>, and </td>
1. Underneath the </tr> type <tr> to start a new row. 2. Press the Enter Key and press the Tab key to move your cursor over 1 space. 3. Type <td> # </td>. Press the Enter Key and then the Tab key. 4. Type <td> # </td>. Press the Enter Key and then the Tab key. 5. Type <td> # </td>. Press the Enter Key. 6. Type </tr> to end that table row. 7. Follow steps 1 through 6, two more times to create the image on the right.
Keep in mind that the last <td> </td> will be blank for now.
You can also Press/Click on the info button below to see the code.
+ info
Creating the web page code ~ Notepad
Step 7: Adding Borders
1. Go to the head element section. Place your cursor at the end of the <head> Opening Tag and Press Enter Twice. 2. Type <style> and Press the Enter Key. 3. Type underneath the <style> tag the following: table, tr, th, td { border: 2px solid black; padding: 3px; 4. Press the Enter Key and type </style>
Use the image to your right to help with adding this code. You can also change the color to something of your choosing if you desire.
You can also Press/Click on the info button below to see the code and press/click on the html colors button to see a list of color options.
+ info
+ html colors
Press/Click here to finish
Creating the web page code ~ Notepad
Quick Check! What have you done?
Need Help?
Take a moment to sit back and relax. Then double check your work so far. Use the links below, descriptions are provided after reach button.
Schedule a Zoom Meetup
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to check over the code you should have in your Notepad.
Teacher Help
Press/Click on the Teacher Help button to watch the video again.
Good job
Coding is done
Now go back to the choice board and pick the data set you want to use
Student Choice Board
Data Set Option-01 ~ Notepad
Data Set
01
Steelers Quarterbacks
You have chosen to use the Steelers Data Set. Follow the directions to add this data information to your table. You have already created the code structure for your web page. Now you are going to add in all the data that goes with this data set. Follow the directions and use the pictures for help. A video has been provided to help you if you should get stuck. Images have also been provided.
Go to Directions
Video Help
Final Preview
Steelers Data Set Directions ~ Notepad
Step 1: Adding the heading data.
Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.
NameRank Team
See the image to your right for help. You can also press/click on the info button for help with the code.
+ info
Steelers Data Set Directions ~ Notepad
Step 2: Adding in your row data
Now add the following quarterbacks, to the first <td> </td> in each set of <tr> elements. Remember to erase the # (hashtag) before typing this information into your web page. Quarterback Names Tom Brady Aaron Rodgers Josh Allen Now add the following ranks, to the second <td> </td> in each set of <tr> elements. Rank 1 2 3
Keep in mind that the last <td> </td> will be blank for now.
You can also Press/Click on the info button below to see the code.
+ info
Steelers Data Set Directions ~ Notepad
Step 3: Add Images to Your Table
1. Add the image for Tampa Bay Buccaneers under the team for Tom Brady. You will place this information between the <td> </td> that we left blank earlier in the directions. <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Tampa_Bay_Buccaneers_wordmark.svg/640px-Tampa_Bay_Buccaneers_wordmark.svg.png" width = "140" height = "70"> </td> 2. Add the image for Aaron Rodgers by using the link below. Remember this will go between <td> </td>. <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Green_Bay_Packers_wordmark.svg/640px-Green_Bay_Packers_wordmark.svg.png" width = "140" height = "70"> </td> 3. Add the image Josh Allen by using the link below. Remember this will go between <td> </td>. <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Buffalo_Bills_wordmark.svg/640px-Buffalo_Bills_wordmark.svg.png" width = "140" height = "70"> </td>
+ image
+ info
You can also Press/Click on the info button below to see the code and copy and paste the image links to your page. Press/Click the image button to see how your web page should look.
Steelers Data Set Directions ~ Notepad
Step 4: Add Background Color to a cell
1. Move your cursor in between the "d" and ">" of your opening <td> tag beside each player's name. 2. Use the following code to apply background color to each of the player's names. <td style="background-color: yellow">Tom Brady</style></td> <td style="background-color: lime">Aaron Rodgers</style></td> <td style="background-color: lightblue">Josh Allen</style></td> See the image to the right for help typing the code. Colors have been provided in the code but you can use any color that does not make the font hard to read. Press/Click on the html colors button for a list of colors that you can use.
You can also Press/Click on the info button below to see the code.
+ html colors
+ info
Steelers Data Set Directions ~ Notepad
Final Check of your work!
Need Help?
Take a moment to sit back and relax. Then double check your work so far. Use the links below, descriptions are provided after reach button.
Schedule a Zoom Meetup
Rubric for Assignment
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to see the final code for your web page.
Teacher Help
Press/Click on the Teacher Help button to watch the final steps on making the web page.
Good job
Table Completed!
Make sure to go back to edio to submit and reflect.
Submission
Data Set Option-02 ~ Notepad
Data Set
02
Favorite Animals
Go to Directions
You have chosen to use the Favorite Animals Data Set. Follow the directions to add this data information to your table. You have already created the code structure for your web page. Now you are going to add in all the data that goes with this data set. Follow the directions and use the pictures for help. A video has been provided to help you if you should get stuck. Images have also been provided.
Video Help
Final Preview
Favorite Animal Data Set Directions ~ Notepad
Step 1: Adding the heading data.
Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.
Animal NameRank Image
See the image to your right for help. You can also press/click on the info button for help with the code.
+ info
Favorite Animal Data Set Directions ~ Notepad
Step 2: Adding in your row data
Now add the following animal names, to the first <td> </td> in each set of the <tr> elements. Remember to erase the # (hashtag) before typing this information into your web page. Animal Name Penguins Giraffes Hyenas Now add the following ranks, to the second <td> </td> in each set of <tr> elements. Rank 1 2 3
Keep in mind that the last <td> </td> will be blank for now.
You can also Press/Click on the info button below to see the code.
+ info
Favorite Animal Data Set Directions ~ Notepad
Step 3: Add Images to Your Table
1. Add the image for Penguins by using the link bleow. You will place this information between the <td> </td> that we left blank earlier in the directions. <img src= "https://upload.wikimedia.org/wikipedia/commons/b/be/Pygoscelis_papua.jpg" width="200" height ="200"> 2. Add the image for Giraffes by using the link below. Remember this will go between <td> </td>. <img src= "https://upload.wikimedia.org/wikipedia/commons/3/3a/Girafee_ue.jpg" width="200" height="200"> 3. Add the image Hyenas by using the link below. Remember this will go between <td> </td>. <img src= "https://upload.wikimedia.org/wikipedia/commons/3/30/Spotted_Hyaenas_%28Crocuta_crocuta%29_adult_and_cubs_..._%2832883548180%29.jpg" width="200" height="200">
+ image
+ info
You can also Press/Click on the info button below to see the code and copy and paste the image links to your page. Press/Click the image button to see how your web page should look.
Favorite Animal Data Set Directions ~ Notepad
Step 4: Add Background Color to a cell
1. Move your cursor in between the "d" and ">" of your opening <td> tag beside each animal's name. 2. Use the following code to apply background color to each of the animal's names. <td style="background-color: lightblue">Penguins</style></td> <td style="background-color: lime">Giraffes</style></td> <td style="background-color: beige">Hyenas</style></td> See the image to the right for help typing the code. Colors have been provided in the code but you can use any color that does not make the font hard to read. Press/Click on the html colors button for a list of colors that you can use.
You can also Press/Click on the info button below to see the code.
+ html colors
+ info
Favorite Animal Data Set Directions ~ Notepad
Final Check of your work!
Need Help?
Take a moment to sit back and relax. Then double check your work so far. Use the links below, descriptions are provided after reach button.
Schedule a Zoom Meetup
Rubric for Assignment
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to see the final code for your web page.
Teacher Help
Press/Click on the Teacher Help button to watch the video again.
Good job
Table Completed!
Make sure to go back to edio to submit and reflect.
Submission
Data Set Option -03 ~ Notepad
Data Set
03
Favorite Flowers
You have chosen to use the Favorite Flowers Data Set. Follow the directions to add this data information to your table. You have already created the code structure for your web page. Now you are going to add in all the data that goes with this data set. Follow the directions and use the pictures for help.A video has been provided to help you if you should get stuck. Images have also been provided. A video has been provided to help you if you should get stuck. Images have also been provided.
Go to Directions
Video Help
Final Preview
Favorite Animal Data Set Directions ~ Notepad
Step 1: Adding the heading data.
Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.
Flower Name Rank Image
See the image to your right for help. You can also press/click on the info button for help with the code.
+ info
Favorite Animal Data Set Directions ~ Notepad
Step 2: Adding in your row data
Now add the following animal names, to the first <td> </td> in each set of the <tr> elements. Remember to erase the # (hashtag) before typing this information into your web page. Flower Name Tulip Orchid Lily Now add the following ranks, to the second <td> </td> in each set of <tr> elements. Rank 1 2 3
Keep in mind that the last <td> </td> will be blank for now.
You can also Press/Click on the info button below to see the code.
+ info
Favorite Animal Data Set Directions ~ Notepad
Step 3: Add Images to Your Table
1. Add the image for Tulip by using the link bleow. You will place this information between the <td> </td> that we left blank earlier in the directions. <image src="https://upload.wikimedia.org/wikipedia/commons/d/de/Tulip_Helmar.jpg" width="200" height "200"> 2. Add the image for Orchid by using the link below. Remember this will go between <td> </td>. <image src="https://upload.wikimedia.org/wikipedia/commons/9/90/Phalaenopsis_%28aka%29.jpg" width="200" height "200"> 3. Add the image Lily by using the link below. Remember this will go between <td> </td>. <image src="https://upload.wikimedia.org/wikipedia/commons/d/dd/White_Lily_flower.jpg" width="200" height "200">
+ image
+ info
You can also Press/Click on the info button below to see the code and copy and paste the image links to your page. Press/Click the image button to see how your web page should look.
Favorite Animal Data Set Directions ~ Notepad
Step 4: Add Background Color to a cell
1. Move your cursor in between the "d" and ">" of your opening <td> tag beside each flower's name. 2. Use the following code to apply background color to each of the flower's names. <td style="background-color: Lightpink">Tulip</style></td> <td style="background-color: ivory">Orchid</style></td> <td style="background-color: deepskyblue">Lily</style></td> See the image to the right for help typing the code. Colors have been provided in the code but you can use any color that does not make the font hard to read. Press/Click on the html colors button for a list of colors that you can use.
You can also Press/Click on the info button below to see the code.
+ html colors
+ info
Favorite Animal Data Set Directions ~ Notepad
Final Check of your work!
Need Help?
Take a moment to sit back and relax. Then double check your work so far. Use the links below, descriptions are provided after reach button.
Schedule a Zoom Meetup
Rubric for Assignment
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to see the final code for your web page.
Teacher Help
Press/Click on the Teacher Help button to watch the video again.
Good job
Table Completed!
Make sure to go back to edio to submit and reflect.
Submission
Data Set Option -04 ~ Notepad
Data Set
04
Custom-You choose
You have chosen to come up with your own data set to use in this assignment. Remember you have to locate the images you will use on your own. You have already created the code structure for your web page.You are not going to search for data that will fit into the theme you have chosen.
Go to Directions
Creating the code
Video Help
Rubric for Assignment
Custom data set Directions ~ Notepad
You have decided to use your own data for this assignment. You will need to provide the heading names, data that goes into each cell and an image to go in the third column that matches your theme. Below are finished products of the other options in the choice board. The provided HTML code is the code you should have made before selecting your data choice. The last button is a link to a free image website.
Need Help?
Schedule a Zoom Meetup
example
Press/Click on the example button to see an image of what your page should look like so far.
HTML Code
Press/Click on the HTML Code button to see the final code for your web page.
Image Website
Press/Click on the Teacher Help button to watch the video again.
Good job
Table Completed!
Make sure to go back to edio to submit and reflect.
Submission
Create a Zip Folder ~ Notepad
Follow these directions to Zip your Folder
Locating your folder
- Go to your web design folder.
- Go to the assignments folder.
- Choose the folder you want to Zip
Sample of image of a folder
Creating the Zipped Folder
- Right-click the file, and a menu will appear with several options.
- Click on the option that says Send to
- Then click on the Compressed (zipped) folder.
- After you click on the Compressed (zipped) folder, you will see a new file appear.
- The name will be highlighted in blue, you can hit enter on the keyboard.
- It will be named tables_assignment.zip
Image of right-clicked menu image
Don't forget to submit your assignment in edio.
+ info
Image of Zipped Folder
Image of Send to Menu
Template Code
Rubric for Assignment
Creating the web page code
Remember: Choose only ONE data set to use.
Favorite Animal Data
Favorite Flowers Data
Steelers Quarterbacks Data
Choice Board index
Custom Data Option