Introductory Guide To Web Development (2)

Explore

Introductory Guide To Web Development

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

⁠

Content: The main body of your webpage, everything inside the <body> tag

Padding: The space between the border and the outside edge of main content, can be adjusted with CSS

Border: A invisible or visible line surrounding content and padding, can be adjusted with CSS

Margin: The space between the edge of the browser/webpage and the border, can be adjusted with CSS

⁠

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

Continue 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

⁠

Raw Code: All About Animals Webpage

Note ~ the following code is not indented correctly due to copy paste issues,

<!DOCTYPE html>

<head>

<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

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.