Skip to content
Create your school schedule using HTML tables and use CSS to style it. Try to include classes, times, days, locations, pictures, and more cool things inside of your webpage. (Hint: looking at the bonus extension material uploaded above can help)Create a toy store items and price table using HTML links and tables. Use tables to create the layout of the table, then styling it with CSS, but later use links to link each item to a picture of the toy. An example could be seen below with my fruits store webpage code belowContinue adding to an existing webpage of yours from before, but now add links and tables which you just learned today
Session #3
In session #3, we covered the concepts of html links and tables. We also looked at the usage and applications of this in web development along with styling it with css.
Session #3 Summary Notes
Session#3-SummaryNotes.pdf
106.2 kB
Extension Reading Material: HTML Links & Tables
Here are some extra materials you can look at if you want to go deeper into todays topic
HtmlLinksTextbook.pdf
1.2 MB
HtmlTablesPpt.pdf
1.1 MB
HtmlTablesTextbook.pdf
262.4 kB
Coding Challenges
Here are some ways you can practice the skills you learned :)
Raw Code: All About Animals Webpage
Note ~ the following code is not indented correctly due to copy paste issues,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animals</title>
<style>
body {
background: rgb(255, 252, 195);
margin-left: 13px;
margin-right: 13px;
}
h1 {
font-size: 60px;
font-family: Chalkduster;
text-align: center;
background-color: rgb(255, 127, 81);
border: rgb(161, 43, 0) 25px dotted;
margin-top: 10px;
}
#firsttable {
background-color: aqua;
}
#firsthead {
background-color: rgb(0, 92, 5);
color: rgb(255, 205, 4);
}
#firstbody {
background-color: rgb(142, 78, 0);
color: rgb(255, 142, 255);
}
th {
padding: 10px;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<!--
HTML LINKS!
Will bring you from one place to another in the WWW
Two Types of Links:
- External Link: Bring the user from one webpage to a totally different webpage
- Internal Link: Bring the user from one part of the webpage to another part of the SAME webpage
Both types of links use the <a> tag
-->
<!--
HTML TABLES!
- regular table seen every table, like in MC Word
- with rows and columns
- used to hold data, schedule, information, and more...
- A lot of tags that make up an HTML table, memorization
-->
<h1>The Animals On Planet Earth</h1>
<p id = "introPara">Welcome to this <span id = "bl">bootiful</span> animals webpage! Made by Jacob! Enjoy! :)</p>
<h3>Table Of Contents:</h3>
<ul>
<li><a href = "#catHead">Cats</a></li>
<li><a href = "#dogHead">Dogs</a></li>
<li><a href = "#pigHead">Pigs</a></li>
<li><a href = "#cowHead">Cows</a></li>
<li><a href = "#rabbitHead">Rabbits</a></li>
<li><a href = "#chickenHead">Chickens</a></li>
<li><a href = "#butterHead">Butterflies</a></li>
<li><a href = "#dolphinHead">Dolphins</a></li>
<li><a href = "#sharkHead">Sharks</a></li>
</ul>
<hr>
<!--VARIATION 1: TABLE-->
<table id = "firsttable">
<thead id = "firsthead">
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.