Skip to content
Content: The main body of your webpage, everything inside the <body> tagPadding: The space between the border and the outside edge of main content, can be adjusted with CSSBorder: A invisible or visible line surrounding content and padding, can be adjusted with CSSMargin: The space between the edge of the browser/webpage and the border, can be adjusted with CSSContinue adding the new concepts you learned today to an existing webpage project of yours. Alternatively, you should also try making a fun webpage with overflows scroll bars inside overflows scroll bars, it could maybe be weird funhouse style webpage with weird things happening but all is funny
Session #4
In session #4 we covered some more extension material on HTML tables, then we were introduced to the concept of CSS layout along with the box model, HTML grouping tags, width property, height property, and the overflow property.
The CSS Box Model
A very important web development model that shows the structure of a webpage
REMINDER ABOUT THE OVERFLOW SCROLLBAR PROPERTY!!!!!!
The overflow property can be useful and user friendly to a certain extent, and it can also be fun to play around with or mess around with on a webpage, but you should not abuse using it and put scrollbar inside or scrollbars as it can get very user not friendly. One of the things we have to keep in mind as web developers is making our webpages user friendly meaning every user should know how to use it with minimal tutorial and everything on the webpage is easy for the user. Obviously for fun reasons, making a webpage with overflows scrollbars inside of overflow scrollbars could be possible, definitely try it :)
Session #4 Summary Notes
Session4SummaryNotes.pdf
501.6 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;
}
#redWord {
color: red;
}
.catColor {
color: rgb(130, 0, 0);
}
#animalInfo {
background-color: rgb(255, 183, 249);
width: 700px;
height: 800px;
overflow: auto;
}
</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
-->
<!--
HTML GROUPING TAGS
- <span>: inline text tag
- <div>: block grouping tag
IMPORTANT
- HTML grouping tags don't do anything on its own, only with CSS will it have usage
-->
<h1>The Animals On Planet Earth</h1>
<p id = "introPara">Welcome to this <span id = "redWord">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>
<div id = "animalInfo">
<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><span class = "catColor">Cat</span>, (Felis catus), also called house <span class = "catColor">Cat</span> or domestic <span class = "catColor">Cat</span>, domesticated member of the family Felidae, order Carnivora, and the smallest member of that family. Like all felids, domestic <span class = "catColor">Cat</span> 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.<span class = "catColor">Cats</span> 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 id = "doggyList">
<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 id = "doggyPara">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 id = "doggyLink" 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>
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.