Clawson-Creating a Table using HTML

Student Choice Board-1.2.5

Web Design

Creating a Table

Start

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

Goal for this Assignment You will create a table by following the provided step-by-step directions. You have the option to use the provided data sets or you can go ahead and choose your own data and pictures. Remember, you only need to choose ONE data set and only complete ONE web page. If you want to make more than one, you may do so but it's optional.

Creating a Table and Adding Images using HTML

Rubric for this assignment

Choice Board index

Favorite Animal Data

Steelers Quarterbacks Data

Rubric for Assignment

Favorite Flowers Data

Custom Data Option

Creating the web page code

Start Here

Remember: Choose only ONE data set to use.

Creating the web page code

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

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th> </th> <th> </th> <th> </th> </tr> <tr> <td> # </td> <td> # </td> <td> </td> </tr> <tr> <td> # </td> <td> # </td> <td> </td> </tr> <tr> <td> # </td> <td> # </td> <td> </td> </tr> </table> </body> </html>

Step 1: Create A File

Creating the web page code

1. Open a New Notepad File2. Save the file as: table.html

+ info

Saving a File in Notepad 1. Press/Click on File 2. Press/Click on Save As 4. In the Save as dialog box, locate the folder Websites_Assignments 3. Then in the File Name box, type the name of your file. Example: table_assignment 4. Press/Click Save Sample of the Save As Dialog Box

+ info

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Step 2: Create the HTML Web Page Structure

Creating the web page code

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.

+ info

<!DOCTYPE html> <html> <head> </head> <body> <table> </table> </body> </html>

Step 3: Add the <table> tag

Creating the web page code

1. Place your cursor by the Opening Body tag <body> and press the Enter key two times2. Add the Opening <table> tag underneath the body tag, hit Enter and add the Closing </table> tag.

+ info

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th> </th> <th> </th> <th> </th> </tr> </table> </body> </html>

Creating the web page code

1. Place your cursor next to the <table> tag and press enter 2 times2. Type the <tr> and <th> tags to create your header row.See the image to your right for help. You can also press/click on the info button for help with the code.

Step 4: Add the Table Headings

+ info

Step 5: Adding <tr>, </tr>, <td>, and </td>

Creating the web page code

1.Click to the right of the </tr> tag and press enter 2 times.2. Add the code needed to add three rows to the table.

You can also Press/Click on the info button below to see the code.

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th> </th> <th> </th> <th> </th> </tr> <tr> <td> # </td> <td> # </td> <td> </td> </tr> <tr> <td> # </td> <td> # </td> <td> </td> </tr> <tr> <td> # </td> <td> # </td> <td> </td> </tr> </table> </body> </html>

Step 6: Adding Borders

Creating the web page code

1. Place your cursor to the right of the <head> Opening Tag and Press Enter Twice. 2. Type the following code to add borders to the table:<style>table, tr, th, td {border: 2px solid black;padding: 3px;}</style>

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.

+ html colors

Quick Check! What have you done?

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.

Press/Click on the example button to see an image of what your page should look like so far.

Creating the web page code

Teacher Help

example

HTML Code

Schedule a Zoom Meetup

Press/Click on the HTML Code button to check over the code you should have in your Notepad.

Press/Click on the Teacher Help button to watch the video again.

Need Help?

Press/Click here to finish

Does your web page looks similar to this one below? If not, go back and double check your code.

Coding is done

Now go back to the choice board and pick the data set you want to use

Student Choice Board

Good job

1. What have I learned? Main concepts and ideas. 2. How did I learn it? Steps followed to learn it: group work, research, analysis of information, in-depth study, etc. 3. What has been the easiest and the most difficult part? 4. What was it useful for? Usefulness of what I have learned 5. In what other situations can I use it? Extrapolation of what I have learned to other subjects, daily life, etc.

Choose a Topic

Favorite Animal Data

Steelers Quarterbacks Data

Rubric for Assignment

Favorite Flowers Data

Custom Data Option

Creating the web page code

Start Here

Remember: Choose only ONE data set to use.

Steelers Quarterbacks

Data Set

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

Data Set Option-01

Here is the completed assignment web page. Note that your colors may not match the example if you decided to change them.

+ info

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> </table> </body> </html>

Step 1: Adding the heading data.

Steelers Data Set Directions

See the image to your right for help. You can also press/click on the info button for help with the code.

1. Add the following headings between each of the <th> </th> tags. Remember we already created these tags in the earlier steps of the assignment.

NameRankTeam

+ info

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th> </th> <th> </th> <th> </th> </tr> <tr> <td>Tom Brady</td> <td>1</td> <td> </td> </tr> <tr> <td>Aaron Rodgers</td> <td>2</td> <td> </td> </tr> <tr> <td>Josh Allen</td> <td> 3</td> <td> </td> </tr> </table> </body> </html>

Step 2: Adding in your row data

Steelers Data Set Directions

1. 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 RodgersJosh Allen2. Now add the following ranks, to the second <td> </td> in each set of <tr> elements.Rank123

You can also Press/Click on the info button below to see the code.

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> <tr> <td>Tom Brady</td> <td>1</td> <td> <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> </tr> <tr> <td>Aaron Rodgers</td> <td>2</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> </tr> <tr> <td>Josh Allen</td> <td>3</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> </tr> </table> </body> </html>

Step 3: Add Images to Your Table

Steelers Data Set Directions

1. Add the following image tags between the <td> tags that are currently blank.

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

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

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

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.

+ image

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> <tr> <td style = "background-color: yellow"> Tom Brady </style> </td> <td>1</td> <td> <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> </tr> <tr> <td style= "background-color: lightblue"> Aaron Rodgers</style> </td> <td>2</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> </tr> <tr> <td style = "background-color: Lime">Josh Allen</style></td> <td>3</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> </tr> </body> </html>

Step 4: Add Background Color to a cell

Steelers Data Set Directions

1. Replace each lin of code with the Quarterback name with the html line below to add a color shading to the cell. <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.

You can also Press/Click on the info button below to see the code.

+ html colors

Final Check of your work!

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.

Press/Click on the example button to see an image of what your page should look like so far.

Steelers Data Set Directions

Teacher Help

example

HTML Code

Schedule a Zoom Meetup

Press/Click on the HTML Code button to see the final code for your web page.

Press/Click on the Teacher Help button to watch the final steps on making the web page.

Need Help?

Rubric for Assignment

Here is the completed assignment web page. Note that your colors may not match the example if you decided to change them.

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> <tr> <td style = "background-color: yellow"> Tom Brady </style> </td> <td>1</td> <td> <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> </tr> <tr> <td style= "background-color: lightblue"> Aaron Rodgers</style> </td> <td>2</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> </tr> <tr> <td style = "background-color: Lime">Josh Allen</style></td> <td>3</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> </tr> </table> </body> </html>

Table Completed!

Make sure to go back to edio to submit and reflect.

Home

Good job

Data Set Option-02

Favorite Animals

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.

Go to Directions

Video Help

Final Preview

Data Set

This is what your table should look like in your web page. Colors may vary if you change them. You will need to go through the steps to create this web page.

+ info

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th>Animal Name</th> <th>Rank</th> <th>Image</th> </tr> </table> </body> </html>

Step 1: Adding the heading data.

Favorite Animal Data Set Directions

See the image to your right for help. You can also press/click on the info button for help with the code.

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 NameRankImage

+ info

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th>Animal Name </th> <th>Rank</th> <th>Image</th> </tr> <tr> <td>Penguins</td> <td>1</td> <td> </td> </tr> <tr> <td> Giraffes </td> <td>2</td> <td> </td> </tr> <tr> <td>Hyenas</td> <td>3</td> <td> </td> </tr> </table> </body> </html>

Step 2: Adding in your row data

Favorite Animal Data Set Directions

1. Add the following Animals, to the first <td> </td> in each set of <tr> elements.

Remember to erase the # (hashtag) before typing this information into your web page.

Animal NamePenguinsGiraffesHyenas2. Now add the following ranks, to the second <td> </td> in each set of <tr> elements.Rank123

You can also Press/Click on the info button below to see the code.

Keep in mind that the last <td> </td> will be blank for now.

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; </style> </head> <body> <table> <tr> <th>Animal Name </th> <th>Rank</th> <th>Image</th> </tr> <tr> <td>Penguins</td> <td>1</td> <td><img src= "https://upload.wikimedia.org/wikipedia/commons/b/be/Pygoscelis_papua.jpg" width="200" height ="200"></td> </tr> <tr> <td> Giraffes </td> <td>2</td> <td><img src= "https://upload.wikimedia.org/wikipedia/commons/3/3a/Girafee_ue.jpg" width="200" height="200"> </td> </tr> <tr> <td>Hyenas</td> <td>3</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"> </td> </tr> </table> </body> </html>

Step 3: Add Images to Your Table

Favorite Animal Data Set Directions

1. Add the following image tags between the <td> tags that are currently blank.

<img src= "https://upload.wikimedia.org/wikipedia/commons/b/be/Pygoscelis_papua.jpg" width="200" height ="200">

<img src= "https://upload.wikimedia.org/wikipedia/commons/3/3a/Girafee_ue.jpg" width="200" height="200">

<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">

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.

+ image

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> <tr> <td style="background-color:lightblue">Penguins</style></td> <td>1</td> <td> <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> </tr> <tr> <td style="background-color: lime">Giraffes</style></td> <td>2</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> </tr> <tr> <td style="background-color: beige">Hyenas</style></td> <td>3</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> </tr> </body> </html>

Step 4: Add Background Color to a cell

Favorite Animal Data Set Directions

1. Replace each lin of code with the Animal name with the html line below to add a color shading to the cell. <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.

You can also Press/Click on the info button below to see the code.

+ html colors

Final Check of your work!

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.

Press/Click on the example button to see an image of what your page should look like so far.

Favorite Animal Data Set Directions

Teacher Help

example

HTML Code

Schedule a Zoom Meetup

Press/Click on the HTML Code button to see the final code for your web page.

Press/Click on the Teacher Help button to watch the video again.

Need Help?

Rubric for Assignment

Here is the completed assignment web page. Note that your colors may not match the example if you decided to change them.

Table Completed!

Make sure to go back to edio to submit and reflect.

Home

Good job

Data Set Option -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

Data Set

Here is the completed assignment web page. Note that your colors may not match the example if you decided to change them.

+ info

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th>Flower Name</th> <th>Rank</th> <th>Image</th> </tr> </table> </body> </html>

Step 1: Adding the heading data.

Favorite Animal Data Set Directions

See the image to your right for help. You can also press/click on the info button for help with the code.

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 NameRankImage

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Flower Name </th> <th>Rank</th> <th>Image</th> </tr> <tr> <td>Tulip</td> <td>1</td> <td> </td> </tr> <tr> <td> Orchid </td> <td>2</td> <td> </td> </tr> <tr> <td>Lily</td> <td>3</td> <td> </td> </tr> </table> </body> </html>

Step 2: Adding in your row data

Favorite Animal Data Set Directions

1. Add the following flowers, to the first <td> </td> in each set of <tr> elements. Remember to erase the # (hashtag) before typing this information into your web page.Flower NameTulipOrchidLily2. Now add the following ranks, to the second <td> </td> in each set of <tr> elements.Rank123

You can also Press/Click on the info button below to see the code.

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Flower Name </th> <th>Rank</th> <th>Image</th> </tr> <tr> <td>Tulip</td> <td>1</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/d/de/Tulip_Helmar.jpg" width="200" height "200"></td> </tr> <tr> <td> Orchid </td> <td>2</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/9/90/Phalaenopsis_%28aka%29.jpg" width="200" height "200"></td> </tr> <tr> <td>Lily</td> <td>3</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/d/dd/White_Lily_flower.jpg" width="200" height "200"></td> </tr> </table> </body> </html>

Step 3: Add Images to Your Table

Favorite Animal Data Set Directions

1. Add the following image tags between the <td> tags that are currently blank.

<image src="https://upload.wikimedia.org/wikipedia/commons/d/de/Tulip_Helmar.jpg" width="200" height "200">

<image src="https://upload.wikimedia.org/wikipedia/commons/9/90/Phalaenopsis_%28aka%29.jpg" width="200" height "200">

<image src="https://upload.wikimedia.org/wikipedia/commons/d/dd/White_Lily_flower.jpg" width="200" height "200">

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.

+ image

Your table on you web page should look similar to this image below.

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Flower Name </th> <th>Rank</th> <th>Image</th> </tr> <tr> <td style="background-color: Lightpink">Tulip</style></td> <td>1</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/d/de/Tulip_Helmar.jpg" width="200" height "200"></td> </tr> <tr> <td style="background-color: ivory">Orchid</style></td> <td>2</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/9/90/Phalaenopsis_%28aka%29.jpg" width="200" height "200"></td> </tr> <tr> <td style="background-color: deepskyblue">Lily</style></td> <td>3</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/d/dd/White_Lily_flower.jpg" width="200" height "200"></td> </tr> </table> </body> </html>

Step 4: Add Background Color to a cell

Favorite Animal Data Set Directions

1. Replace each lin of code with the Flower name with the html line below to add a color shading to the cell. <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.

You can also Press/Click on the info button below to see the code.

+ html colors

Final Check of your work!

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.

Press/Click on the example button to see an image of what your page should look like so far.

Favorite Animal Data Set Directions

Teacher Help

example

HTML Code

Schedule a Zoom Meetup

Press/Click on the HTML Code button to see the final code for your web page.

Press/Click on the Teacher Help button to watch the video again.

Need Help?

Rubric for Assignment

Here is the completed assignment web page. Note that your colors may not match the example if you decided to change them.

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Flower Name </th> <th>Rank</th> <th>Image</th> </tr> <tr> <td style="background-color: Lightpink">Tulip</style></td> <td>1</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/d/de/Tulip_Helmar.jpg" width="200" height "200"></td> </tr> <tr> <td style="background-color: ivory">Orchid</style></td> <td>2</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/9/90/Phalaenopsis_%28aka%29.jpg" width="200" height "200"></td> </tr> <tr> <td style="background-color: deepskyblue">Lily</style></td> <td>3</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/d/dd/White_Lily_flower.jpg" width="200" height "200"></td> </tr> </table> </body> </html>

Table Completed!

Make sure to go back to edio to submit and reflect.

Good job

Data Set Option -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

Data Set

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding; 3px; </style> </head> <body> <table> <tr> <th> </th> <th> </th> <th> </th> </tr> <tr> <td>#</td> <td>#</td> <td> </td> </tr> <tr> <td>#</td> <td>#</td> <td> </td> </tr> <tr> <td>#</td> <td>#</td> <td> </td> </tr> </table </body> </html>

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.

Press/Click on the example button to see an image of what your page should look like so far.

Custom data set Directions

Image Website

example

HTML Code

Schedule a Zoom Meetup

Press/Click on the HTML Code button to see the final code for your web page.

Press/Click on the Teacher Help button to watch the video again.

Need Help?

Rubric for Assignment

Here are some examples:

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Flower Name </th> <th>Rank</th> <th>Image</th> </tr> <tr> <td style="background-color: Lightpink">Tulip</style></td> <td>1</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/d/de/Tulip_Helmar.jpg" width="200" height "200"></td> </tr> <tr> <td style="background-color: ivory">Orchid</style></td> <td>2</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/9/90/Phalaenopsis_%28aka%29.jpg" width="200" height "200"></td> </tr> <tr> <td style="background-color: deepskyblue">Lily</style></td> <td>3</td> <td><image src="https://upload.wikimedia.org/wikipedia/commons/d/dd/White_Lily_flower.jpg" width="200" height "200"></td> </tr> </table> </body> </html>

Table Completed!

Make sure to go back to edio to submit and reflect.

Home

Good job

Data Set Option -05

Challenge Yourself-Optional

You have chosen to use the Favorite Flowers Data Set. Follow the directions to add this data information to your table. 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

Data Set

Lorem ipsum dolor sit amet consectetur Adipiscing elit erat dictum interdum, vestibulum litora proin imperdiet integer habitasse semper id vulputate, inceptos senectus urna mi odio nec penatibus mus cubilia. Felis pretium cras eros cubilia fermentum varius sociis condimentum suscipit cursus, auctor molestie pellentesque suspendisse feugiat ridiculus vivamus sapien pulvinar at quisque, primis blandit nunc morbi eget pharetra sociosqu venenatis fusce. Vehicula tristique magna feugiat eget dictumst auctor natoque accumsan interdum pharetra erat, et etiam egestas condimentum sem aliquam pellentesque quisque hendrerit mattis. Erat sodales orci risus rutrum taciti suspendisse augue vivamus mauris, nec elementum tellus bibendum auctor massa pulvinar pharetra dis fermentum, nisi id viverra aliquam sed egestas ultricies dictumst. Fames ultricies per dapibus elementum condimentum ad nam mus, faucibus magnis maecenas habitant integer nisl mi mollis facilisi, metus ridiculus himenaeos quis euismod vulputate fusce. Magna auctor leo aliquam nisi viverra justo curabitur aenean class, purus cras posuere cubilia facilisis vestibulum facilisi lectus, orci conubia elementum phasellus varius sociis pretium fermentum.

Adipiscing elit erat dictum interdum, vestibulum litora proin imperdiet integer habitasse semper id vulputate, inceptos senectus urna mi odio nec penatibus mus cubilia. Felis pretium cras eros cubilia fermentum varius sociis condimentum suscipit cursus, auctor molestie pellentesque suspendisse feugiat ridiculus vivamus sapien pulvinar at quisque, primis blandit nunc morbi eget pharetra sociosqu venenatis fusce:

Vehicula tristique magna feugiat eget dictumst auctor natoque accumsan interdum pharetra erat, et etiam egestas condimentum sem aliquam pellentesque quisque hendrerit mattis.
Erat sodales orci risus rutrum taciti suspendisse augue vivamus mauris, nec elementum tellus bibendum auctor massa pulvinar pharetra dis fermentu.
Nisi id viverra aliquam sed egestas ultricies dictumst. Fames ultricies per dapibus elementum condimentum ad nam mus, faucibus magnis maecenas habitant integer nisl mi mollis facilisi.
Metus ridiculus himenaeos quis euismod vulputate fusce.
Magna auctor leo aliquam nisi viverra justo curabitur aenean class, purus cras posuere cubilia facilisis vestibulum facilisi lectus, orci conubia elementum phasellus varius sociis pretium fermentum.

CONTENIDOS DE LA SESIÓN DE APRENDIZAJE

Vehicula tristique magna feugiat eget dictumst auctor natoque accumsan interdum pharetra erat, et etiam egestas condimentum sem aliquam pellentesque quisque hendrerit mattis.
Erat sodales orci risus rutrum taciti suspendisse augue vivamus mauris, nec elementum tellus bibendum auctor massa pulvinar pharetra dis fermentu.
Nisi id viverra aliquam sed egestas ultricies dictumst. Fames ultricies per dapibus elementum condimentum ad nam mus, faucibus magnis maecenas habitant integer nisl mi mollis facilisi.
Metus ridiculus himenaeos quis euismod vulputate fusce.
Magna auctor leo aliquam nisi viverra justo curabitur aenean class, purus cras posuere cubilia facilisis vestibulum facilisi lectus, orci conubia elementum phasellus varius sociis pretium fermentum.

Step 1: Create Folders

Steelers Data Set Directions

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: Websites_Assignments

Step 2: Create a new file

1. Open a New Notepad File2. Save the file as: table_assignment.htmlMake sure to save your file in the Websites_Assignments folder you just made.

Press/Click the info button for tips on how to save

+ info

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Step 3: Create the HTML Web Page Structure

Steelers Data Set Directions

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

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> </table> </body> </html>

Step 4: Add the <table> and <tr> tag.

Steelers Data Set Directions

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.

1. Press the Enter Key after the Opening <table> tag.2. Space over two times.3. Type <tr> and press Enter4. Press the Tab Key once to indent.5. Type the table headings provided in the image to the right.See the image to your right for help. You can also press/click on the info button for help with the code.

Step 5: Add the Table Headings

+ info

Step 6: Adding <tr>, </tr>, <td>, and </td>

Steelers Data Set Directions

In Step 5, you added three <th> tags to create three headings. This automatically created three columns.

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.

You can also Press/Click on the info button below to see the code.

Keep in mind that the last <td> </td> will be blank for now.

+ info

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> </table> </body> </html>

Step 4: Add the <table> and <tr> tag.

Steelers Data Set Directions

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

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> <tr> <td>Tom Brady</td> <td>1</td> <td> </td> </tr> <tr> <td>Aaron Rodgers</td> <td>2</td> <td> </td> </tr> <tr> <td>Josh Allen</td> <td>3</td> <td> </td> </tr> </table> </body> </html>

Step 7: Add Borders

Steelers Data Set Directions

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.

1. In the <head> element section, press the Enter Key.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>

You can also Press/Click on the info button below to see the code.

Quick Check! What have you done?

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.

Press/Click on the example button to see an image of what your page should look like so far.

Steelers Data Set Directions

Teacher Help

example

HTML Code

Schedule a Zoom Meetup

Press/Click on the HTML Code button to check over the code you should have in your Notepad.

Press/Click on the Teacher Help button to watch a video on the steps we have completed so far

Need Help?

Video will go here

Does your web page looks similar to this one below? If not, go back and double check your code.

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> <tr> <td>Tom Brady</td> <td>1</td> <td> </td> </tr> <tr> <td>Aaron Rodgers</td> <td>2</td> <td> </td> </tr> <tr> <td>Josh Allen</td> <td>3</td> <td> </td> </tr> </body> </html>

+ info

Step 8: Add Images to Your Table

Steelers Data Set Directions

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>

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.

+ image

+ info

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> <tr> <td style = "background-color: yellow"> Tom Brady </style> </td> <td>1</td> <td> <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> </tr> <tr> <td style= "background-color: lightblue"> Aaron Rodgers</style> </td> <td>2</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> </tr> <tr> <td style = "background-color: Lime">Josh Allen</style></td> <td>3</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> </tr> </body> </html>

Step 9: Add Background Color to a cell

Steelers Data Set Directions

1. Move your in between the "d" and ">" of your opening <td> tag.2. Use the following code to apply background color to each of the players names.<td style="background-color: yellow">Tom Brady</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 to use.

You can also Press/Click on the info button below to see the code.

+ html colors

Final Check of your work!

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.

Press/Click on the example button to see an image of what your page should look like so far.

Steelers Data Set Directions

Teacher Help

example

HTML Code

Schedule a Zoom Meetup

Press/Click on the HTML Code button to see the final code for your web page.

Press/Click on the Teacher Help button to watch the final steps on making the web page.

Need Help?

Rubric for Assignment

Here is the completed assignment web page. Note that your colors may not match the example if you decided to change them.

<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: 2px solid black; padding: 3px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>Rank</th> <th>Team</th> </tr> <tr> <td style = "background-color: yellow"> Tom Brady </style> </td> <td>1</td> <td> <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> </tr> <tr> <td style= "background-color: lightblue"> Aaron Rodgers</style> </td> <td>2</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> </tr> <tr> <td style = "background-color: Lime">Josh Allen</style></td> <td>3</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> </tr> </table> </body> </html>

Table Completed!

Make sure to go back to edio to submit and reflect.

Home

Good job

Nunc platea enim nulla leo inceptos ornare ante, nisl et dignissim purus egestas metus convallis eu, porta curabitur facilisis torquent suspendisse rutrum. Venenatis risus est mollis torquent penatibus morbi congue facilisis ac, suspendisse semper sociosqu sollicitudin inceptos sed praesent quam, aenean cum donec consequat facilisi ad faucibus elementum.

¿Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet?

Activities on the case

+ info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

¿Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet?

Steelers Data SEt Directions

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Goal: You will create a table following step-by-step directions. The best part is you get to choose which data set you would like to use.

Creating a Table and Adding Images using HTML

When you go to the next page, you will see a choice board with 5 different data set options.Three of those options are provided data for you to add in ad you follow through the directions. One option is for you to use your own custom data of your choosing once you have the HTML code in place.There is also a challenge option you can do if you would prefer that one-you will have to troubleshoot that one on your own.

Presentation

+ info

Conceptual map ofthe unit

Lorem ipsum dolor sit amet

Lorem ipsum dolor

Lorem ipsum dolor sit amet

Lorem ipsum dolor

Presentation

Lorem ipsum dolor sit amet Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learning sessions

Session 01Lorem ipsum dolor

Session 02Lorem ipsum dolor

Session 03Lorem ipsum dolor

Dapibus senectus consequat ridiculus ligula

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nisl placerat.

Dapibus senectus consequat ridiculus ligula

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nisl placerat.

+ info

Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

+ info

learning session / 01

Lorem ipsum dolor sit amet consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nisl placerat, mattis odio in, ullamcorper dolor. In aliquet purus at odio ullamcorper egestas. Nunc nec semper enim. Cras vel metus nisl. Nullam ut turpis id lorem viverra dictum. Aenean elementum, lectus nec mattis euismod, enim diam cursus diam,id gravida erat turpis in risus. Nulla tellus metus, lobortis at iaculis, posuere at diam. Quisque lacinia commodo augue ut lobortis.

Pellentesque sagittis enim tempus enim elementum tempor. Nulla facilisi. Sed at justo malesuada enim fringilla aliquam nec in felis. Curabitur luctus libero nec vulputate interdum. Donec eu lectus nec lectus interdum tristique ac eu urna.Duis congue lectus imperdiet, venenatis dolor eget, rutrum nisi.

+ info

learning session / 01

Donec eu lectus nec lectus interdum tristique ac eu urna.Duis congue lectus imperdiet, venenatis dolor eget, rutrum nisi.

Nunc lobortis dui in feugiat fames mattis sodales ridiculus sed metus

Pellentesque sagittis enim tempus enim elementum tempor. Nulla facilisi. Sed at justo malesuada enim fringilla aliquam nec in felis. Curabitur luctus libero nec vulputate interdum.

+ info

learning session / 01

Dapibus senectus consequat ridiculus ligula

learning session / 01

learning session / 02

key ideas

Nunc lobortis dui in feugiat fames mattis sodales ridiculus sed

examples

Nunc lobortis dui in feugiat fames mattis sodales ridiculus sed metus, elementum cubilia imperdiet erat id accumsan magnis vivamus luctus pulvinar, eget massa tempus ligula hac at congue habitasse mauris vivamus torquent leo.

reflect

Cubilia feugiat dignissim mauris curabitur scelerisque conubia turpis ullamcorper Nullam posuere platea, metus urna vivamus gravida nec condimentum montes etiam imperdiet natoque est, aliquet mollis per euismod maecenas dictum blandit placerat magna himenaeos:

Sapien conubia montes sociosqu cum pulvinar cubilia elementum lacinia porttitor libero parturient.
- Faucibus litora euismod felis accumsan potenti lacus vestibulum risus id.
Aliquet justo velit et enim mauris sociis mus nam gravida.
Donec tellus senectus suspendisse mollis dui orci bibendum aliquet quam quis
- Natoque auctor rhoncus.
- Neque fermentum habitant sapien suscipit nunc
  - Etiam blandit laoreet interdum tincidunt ut magna massa id.

Cubilia feugiat dignissim mauris curabitur scelerisque conubia turpis ullamcorper nullam posuere platea, metus urna vivamus gravida nec condimentum montes etiam imperdiet natoque est, aliquet mollis per euismod maecenas dictum blandit placerat magna himenaeos. Sapien conubia montes sociosqu cum pulvinar cubilia elementum lacinia porttitor libero parturient. Faucibus litora euismod felis accumsan potenti lacus vestibulum risus id, aliquet justo velit et enim mauris sociis mus nam gravida.

Massa mattis tempor bibendum netus felis augue nec, vehicula suscipit non dignissim neque nascetur at, parturient elementum condimentum ridiculus tincidunt faucibus. Cubilia feugiat dignissim mauris curabitur scelerisque conubia turpis ullamcorper nullam posuere platea, metus urna vivamus gravida nec condimentum montes etiam imperdiet natoque est, aliquet mollis per euismod maecenas dictum blandit placerat magna himenaeos. Sapien conubia montes sociosqu cum pulvinar cubilia elementum lacinia porttitor libero parturient, faucibus litora euismod felis accumsan potenti lacus vestibulum risus id, aliquet justo velit et enim mauris sociis mus nam gravida.

Lorem ipsum dolor Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

learning session / 02

Dapibus senectus consequat ridiculus ligula

learning session / 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Question 1/5

True ✓

False

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Question 2/5

learning session / 02

Write thewrong option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write thecorrect option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write thewrong option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

Write thewrong option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write thecorrect option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write thewrong option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Question 3/5

learning session / 02

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

Write the wrong option here

Write the correct option here

Write the wrong option here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Question 4/5

learning session / 02

Write the wrong option here

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

Write the wrong option here

Write the correct option here

Write the wrong option here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Question 5/5

learning session / 02

Write the wrong option here

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

congratulations!

You have answered everything correctly

What knowledgehave you acquired?

Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpis,
Lobortis nulla vehicula ultrices egestas. Eu metus quam luctus rutrum eleifend ornare egestas dictumst velit.
Vulputate mauris lacinia commodo diam dignissim nisi tempor quis integer fermentum lobortis imperdiet.

Summary

Question 01 - Correct answer Lorem ipsum dolor sit amet consectetur adipiscing elit lacus elementum aenean nisl class, suspendisse euismod? Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpis, lobortis nulla vehicula ultrices egestas. Question 02 - Correct answer Lorem ipsum dolor sit amet consectetur adipiscing elit lacus elementum aenean nisl class, suspendisse euismod? Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpis, lobortis nulla vehicula ultrices egestas. Question 03 - Correct answer Lorem ipsum dolor sit amet consectetur adipiscing elit lacus elementum aenean nisl class, suspendisse euismod? Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpis, lobortis nulla vehicula ultrices egestas. Question 04 - Correct answer Lorem ipsum dolor sit amet consectetur adipiscing elit lacus elementum aenean nisl class, suspendisse euismod? Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpis, lobortis nulla vehicula ultrices egestas. Question 05 - Correct answer Lorem ipsum dolor sit amet consectetur adipiscing elit lacus elementum aenean nisl class, suspendisse euismod? Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpis, lobortis nulla vehicula ultrices egestas.

learning session / 02

learning session / 03

20XX

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo, insolens complectitur te eos.

LOREM IPSUM DOLOR SIT AMER

Lorem ipsum dolor

learning session / 03

Nunc lobortis dui in feugiat fames mattis sodales

learning session / 03

Lorem ipsum dolor sit amet

Egestas mus quis etiam lacus hac facilisis integer felis senectus vehicula, cum pharetra magnis parturient

+ info

Write a title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nisl placerat, mattis odio in, ullamcorper dolor. In aliquet purus at odio ullamcorper egestas. Nunc nec semper enim. Cras vel metus nisl. Nullam ut turpis id lorem viverra dictum. Aenean elementum, lectus nec mattis euismod, enim diam cursus diam,id gravida erat turpis in risus. Nulla tellus metus, lobortis at iaculis quis, posuere at diam. Quisque lacinia commodo augue ut lobortis.

learning session / 03

key ideas

example

Lorem ipsum dolor sit amet consectetur adipiscing elit

reflect

learning session / 03

Sapien conubia montes sociosqu cum pulvinar cubilia elementum lacinia porttitor libero parturient.
- Faucibus litora euismod felis accumsan potenti lacus vestibulum risus id.
Aliquet justo velit et enim mauris sociis mus nam gravida.
Donec tellus senectus suspendisse mollis dui orci bibendum aliquet quam quis
- Natoque auctor rhoncus.
- Neque fermentum habitant sapien suscipit nunc
  - Etiam blandit laoreet interdum tincidunt ut magna massa id.

case study resolution

Eget magnis eleifend lacinia pulvinar nunc morbi cras, vestibulum tellus odio inceptos ligula. Pellentesque tellus sociosque.

Write a title here

Mail: aliquet purus dignissim auctor erat habitant
Drive: feugiat vehicula ultrices taciti ad dis praesent
Dropbox: nostra himenaeos at mi luctus pharetra

CHECK

mail@mail.com

Check that the following elements are met in the resolution of the practical case: Evaluation criteriaYes / NoNumerical referenceLorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpisYes0Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpisNo0Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpisYes0Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpisNo0Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpisYes0Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpisNo0

summary

key ideas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

+ info

Lorem ipsum dolor sit amet consectetur adipiscing:

Donec tellus senectus suspendisse mollis dui orci bibendum aliquet quam quis, natoque auctor rhoncus neque fermentum habitant sapien suscipit nunc.
Etiam blandit laoreet interdum tincidunt ut magna massa id.
Nec sodales viverra aenean integer feugiat lacus euismod, habitant accumsan ligula per ante facilisis nisi malesuada.
Proin erat placerat in magnis donec. Aptent pulvinar blandit enim tincidunt nam id ligula.
Himenaeos dapibus torquent metus hac fermentum laoreet elementum, ullamcorper at donec ultricies venenatis montes.

Secondary ideas:

Lorem ipsum dolor sit amet consectetur adipiscing elit ante taciti, cursus egestas auctor nisi at porttitor orci euismod est ullap.
Cras rhoncus condimentum conubia eros maecenas nec ac facilisis malesuada cum montes purus feugiat.
Sapien maecenas ad feugiat accumsan dictumst enim dignissim curae litora, scelerisque per.
Massa mattis tempor bibendum netus felis augue nec, vehicula suscipit non dignissim neque nascetur at, parturient elementum condimentum.
Cubilia feugiat dignissim mauris curabitur scelerisque conubia turpis ullamcorper nullam posuere platea.

+ info

Lorem ipsum dolor sit amet

Self-evaluation

Start

Write thewrong option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write thecorrect option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write thewrong option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

1/5

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Write thecorrect option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write thewrong option hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

2/5

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Write the wrongoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write the correctoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write the wrongoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

3/5

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Write the wrongoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write the correctoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write the wrongoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

4/5

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua?

Write the wrongoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write the correctoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Write the wrongoption hereLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

5/5

His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo.

correctanswer

self-evaluation

congratulations

You have answered everything correctly

What knowledgehave you acquired?

Lorem ipsum dolor sit amet consectetur adipiscing, elit nunc taciti luctus consequat ultricies turpis,
Lobortis nulla vehicula ultrices egestas. Eu metus quam luctus rutrum eleifend ornare egestas dictumst velit.
Vulputate mauris lacinia commodo diam dignissim nisi tempor quis integer fermentum lobortis imperdiet.

Summary

Book titleAuthor's Name (2013), Book title. Place of publication: Publisher.

Título libroAuthor's Name (2013), Book title. Place of publication: Publisher.

For more information

Bibliography

Links to resources of interest

Recommended reading 1

Recommended reading 2

Recommended reading 3

Recommended reading 4

Learning unit completed

Reflect on what you have learned inthis module.

Home

Good job

Resources

Goals

Lorem ipsum dolor sit amet consectetur adipiscing elit rutrum tincidunt, sodales congue vitae pharetra ad erat scelerisque primis felis

Posuere nisl purus blandit nisi inceptos arcu litora integer placerat elementum, parturient at himenaeos diam molestie tristique neque aenean lacus, tortor urna volutpat lacinia erat ullamcorper eros vestibulum sollicitudin. Nostra dictum fames eu curabitur velit fusce pellentesque dui tempus tempor vehicula arcu sociosqu mi.

Clawson-Creating a Table using HTML

Over 30 million people build interactive content in Genially.

ANCIENT EGYPT

MONSTERS COMIC "SHARING IS CARING"

PARTS OF THE ANIMAL CELL

PARTS OF A PROKARYOTIC CELL

PARTS OF THE PLANT CELL

Transcript