In session #1 and session #2, we will look at and cover the anatomy of a webpage, important vocabulary related to web development, the basics of HTML, and the basics of CSS.
Introduction To HTML & CSS Ppt Notes
Session1-Notes.pdf
556.5 kB
Syntax & Semantics Definitions
Learner Edition Notes
Ses1Notes.pdf
2.2 MB
Coding Challenges
Here are some ways you can practice the skills you learned :)
Create a basic webpage introducing motor vehicles, use HTML tags you learned to create the content and use the CSS techniques you learned to make it look beautiful. Information can be found online and try to use everything you learned from the past two sessions and incorporate it into this challenge. As an example, please see my all about animals webpage code and output, it could look something really similar to that. To access example code, scroll down below.
Raw Code: HTML Lesson Code
Note ~ the following code is not indented correctly due to copy paste issues,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro Lesson</title>
</head>
<body>
<!--Header Tags-->
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
<!--Paragraph Tag-->
<p>Although once considered rodents, lagomorphs like rabbits have been discovered to have diverged separately and earlier than their rodent cousins and have a number of traits rodents lack, like two extra incisors.</p>
<!--Inline Text Tags-->
<p>Although once considered <strong>rodents</strong>, lagomorphs like rabbits have been <em>discovered</em> to have diverged separately and earlier than their rodent cousins and have a number of traits rodents lack, like two extra incisors.</p>
<!--List Tags-->
<ul>
<li>Chapter #1</li>
<li>Chapter #2</li>
<li>Chapter #3</li>
<li>Chapter #4</li>
<li>Chapter #5</li>
</ul>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Peaches</li>
<li>Grapes</li>
</ol>
<!--Image Tag-->
<img src = "https://www.charlotte.providencevets.com/files/providence-animal-hospital-charlotte-are-rabbits-rodents-blog.jpeg" width = "200px" alt = "An image of a rabbit">
</body>
</html>
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>
</head>
<body>
<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>Cats</li>
<li>Dogs</li>
<li>Pigs</li>
<li>Cows</li>
<li>Rabbits</li>
<li>Chickens</li>
<li>Butterflies</li>
<li>Dolphins</li>
<li>Sharks</li>
</ul>
<hr>
<h2>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>
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (