Skip to content
Gallery
Introductory Guide To Web Development (2)
Introductory Guide To Web Development
More
Share
Explore
Introductory Guide To Web Development

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 :)
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 below
Continue adding to an existing webpage of yours from before, but now add links and tables which you just learned today
⁠
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">
<tr>
<th>Animal</th>
<th>Color</th>
<th>Where Originated</th>
<th>More Info</th>
</tr>
</thead>
<tbody id = "firstbody">
<tr>
<td>Cats</td>
<td>Orange & Gray</td>
<td>North America</td>
<td>2 meals a day</td>
</tr>
<tr>
<td>Dogs</td>
<td>Orange & Gray</td>
<td>North America</td>
<td>2 meals a day</td>
</tr>
<tr>
<td>Pigs</td>
<td>Orange & Gray</td>
<td>North America</td>
<td>2 meals a day</td>
</tr>
</tbody>
</table>

<hr>

<h2 id = "catHead">Cats</h2>

<img id = "catImg" src = "https://cdn.fotofits.com/petzlover/gallery/img/l/farm-cat-876412.jpeg" alt = "cat" width = "200px">

<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>

<p>Cat, (Felis catus), also called house cat or domestic cat, domesticated member of the family Felidae, order Carnivora, and the smallest member of that family. Like all felids, domestic cats are characterized by supple low-slung bodies, finely molded heads, long tails that aid in balance, and specialized teeth and claws that adapt them admirably to a life of active hunting. Cats possess other features of their wild relatives in being basically carnivorous, remarkably agile and powerful, and finely coordinated in movement.</p>

<a href = "https://www.britannica.com/animal/cat">Read more about cats here :)</a>

<h2 id = "dogHead">Dogs</h2>
<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>

<img id="dogStuff" src = "https://bigfluffydogs.com/wp-content/uploads/2020/08/Saki-2.jpg" alt = "cat" width = "150px">

<p>Dogs are regarded differently in different parts of the world. Characteristics of loyalty, friendship, protectiveness, and affection have earned dogs an important position in Western society, and in the United States and Europe the care and feeding of dogs has become a multibillion-dollar business. Western civilization has given the relationship between human and dog great importance, but, in some of the developing nations and in many areas of Asia, dogs are not held in the same esteem. In some areas of the world, dogs are used as guards or beasts of burden or even for food, whereas in the United States and Europe dogs are protected and admired. In ancient Egypt during the days of the pharaohs, dogs were considered to be sacred.</p>
<a href = "https://www.britannica.com/animal/cat">Read more about dogs here :)</a>

<h2 id = "pigHead">Pigs</h2>
<img id = "pigImg" src = "https://www.pig333.com/3tres3_common/art/pig333/15343/hypor-magnus_150249.jpg" alt = "cat" width = "200">

<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>

<p>Many people who know pigs compare them to dogs because they are friendly, loyal and intelligent. Pigs are naturally very clean and avoid, if at all possible, soiling their living areas. When given the chance to live away from factory farms, pigs will spend hours playing, lying in the sun and exploring their surroundings with their powerful sense of smell. Pigs are very clever animals. The pig was domesticated approximately 5,000 to 7,000 years ago. Pigs are found across Europe, the Middle East and extend into Asia as far as Indonesia and Japan. Pigs are one of the oldest forms of livestock, pigs were domesticated earlier than cows. Nowadays, pigs are farmed for their meet called ‘pork’, although some keep them as pets.</p>
<a href = "https://www.britannica.com/animal/cat">Read more about pigs here :)</a>

<h2 id = "cowHead">Cows</h2>

<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>

<img src = "https://jooinn.com/images/a-friesian-cow.jpg" alt = "cat" width = "200">

<p>Cow, in common parlance, a domestic bovine, regardless of sex and age, usually of the species Bos taurus. In precise usage, the name is given to mature females of several large mammals, including cattle (bovines), moose, elephants, sea lions, and whales. Domestic cows are one of the most common farm animals around the world, and the English language has several words to describe these animals at various ages. A baby cow is called a calf. A female calf is sometimes called a heifer calf and a male a bull calf. A heifer is a female that has not had any offspring. The term usually refers to immature females; after giving birth to her first calf, however, a heifer becomes a cow. An adult male is known as a bull. Many male cattle are castrated to reduce their aggressive tendencies and make them more tractable. Young neutered males, which are primarily raised for beef, are called steers or bullocks, whereas adult neutered males, which are usually used for draft purposes, are known as oxen. A group of cows, cattle, or kine (an archaic term for more than one cow) constitutes a herd. English lacks a gender-neutral singular form, and so “cow” is used for both female individuals and all domestic bovines.</p>
<a href = "https://www.britannica.com/animal/cat">Read more about cows here :)</a>

<h2 id = "rabbitHead">Rabbits</h2>

<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>

<img src = "https://jooinn.com/images/european-rabbit-5.jpg" alt = "cat" width = "200">

<p>Many people who know pigs compare them to dogs because they are friendly, loyal and intelligent. Pigs are naturally very clean and avoid, if at all possible, soiling their living areas. When given the chance to live away from factory farms, pigs will spend hours playing, lying in the sun and exploring their surroundings with their powerful sense of smell. Pigs are very clever animals. The pig was domesticated approximately 5,000 to 7,000 years ago. Pigs are found across Europe, the Middle East and extend into Asia as far as Indonesia and Japan. Pigs are one of the oldest forms of livestock, pigs were domesticated earlier than cows. Nowadays, pigs are farmed for their meet called ‘pork’, although some keep them as pets.</p>
<a href = "https://www.britannica.com/animal/cat">Read more about rabbits here :)</a>

<h2 id = "chickenHead">Chickens</h2>

<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>

<img src = "https://cdn.britannica.com/s:700x500/07/183407-050-C35648B5/Chicken.jpg" alt = "cat" width = "200">

<p>Many people who know pigs compare them to dogs because they are friendly, loyal and intelligent. Pigs are naturally very clean and avoid, if at all possible, soiling their living areas. When given the chance to live away from factory farms, pigs will spend hours playing, lying in the sun and exploring their surroundings with their powerful sense of smell. Pigs are very clever animals. The pig was domesticated approximately 5,000 to 7,000 years ago. Pigs are found across Europe, the Middle East and extend into Asia as far as Indonesia and Japan. Pigs are one of the oldest forms of livestock, pigs were domesticated earlier than cows. Nowadays, pigs are farmed for their meet called ‘pork’, although some keep them as pets.</p>
<a href = "https://www.britannica.com/animal/cat">Read more about chickens here :)</a>

<h2 id = "butterHead">Butterflies</h2>

<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>

<img src = "https://www.worldatlas.com/r/w2000-h1125-q90/upload/3a/b8/9d/monarch-4689681-1280.jpg" alt = "cat" width = "200">

<p>Many people who know pigs compare them to dogs because they are friendly, loyal and intelligent. Pigs are naturally very clean and avoid, if at all possible, soiling their living areas. When given the chance to live away from factory farms, pigs will spend hours playing, lying in the sun and exploring their surroundings with their powerful sense of smell. Pigs are very clever animals. The pig was domesticated approximately 5,000 to 7,000 years ago. Pigs are found across Europe, the Middle East and extend into Asia as far as Indonesia and Japan. Pigs are one of the oldest forms of livestock, pigs were domesticated earlier than cows. Nowadays, pigs are farmed for their meet called ‘pork’, although some keep them as pets.</p>
<a href = "https://www.britannica.com/animal/cat">Read more about butterflies here :)</a>

<h2 id = "dolphinHead">Dolphins</h2>

<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>

<img src = "https://www.wallpapergeeks.com/wp-content/uploads/2014/02/bottlenose-dolphins-jumping-wallpaper-1024x761.jpg" alt = "cat" width = "200">

<p>Cow, in common parlance, a domestic bovine, regardless of sex and age, usually of the species Bos taurus. In precise usage, the name is given to mature females of several large mammals, including cattle (bovines), moose, elephants, sea lions, and whales. Domestic cows are one of the most common farm animals around the world, and the English language has several words to describe these animals at various ages. A baby cow is called a calf. A female calf is sometimes called a heifer calf and a male a bull calf. A heifer is a female that has not had any offspring. The term usually refers to immature females; after giving birth to her first calf, however, a heifer becomes a cow. An adult male is known as a bull. Many male cattle are castrated to reduce their aggressive tendencies and make them more tractable. Young neutered males, which are primarily raised for beef, are called steers or bullocks, whereas adult neutered males, which are usually used for draft purposes, are known as oxen. A group of cows, cattle, or kine (an archaic term for more than one cow) constitutes a herd. English lacks a gender-neutral singular form, and so “cow” is used for both female individuals and all domestic bovines.</p>
<a href = "https://www.britannica.com/animal/cat">Read more about dolphins here :)</a>

<h2 id = "sharkHead">Sharks</h2>

<ul>
<li>Fact #1</li>
<li>Fact #2</li>
<li>Fact #3</li>
</ul>
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.