Just Enough HTML To Be Dangerous
TIME LIMIT: 1 HOUR
You’ve already made a few webpages, so you already know some HTML. Let’s add some structure to your knowledge.
HTML stands for HyperText Markup Language. HTML’s main purpose is to mark up the content of your webpage. HTML tells browsers how to identify content for what it is. Identifying your content comes in handy for styling and interactivity later, too.
Imagine yourself talking to the browser:
Hey, this piece of data is a paragraph.
This other piece of data is a list. It’s holding a bunch of list items.
This data is a headline…let’s name it ‘big-headline’.
And so forth and so on. HTML is how you add structure to your content.
Example: The Webpage For Our Freshman English class:
Take a look at
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.css" rel="stylesheet" > <title>English Class Books</title> </head> <body> <div> <h1 class="big-headline"> Freshman English Class Books </h1> </div> <div> <ul class="Authors"> <li>Tom Sawyer</li> <li>Journey to the West</li> <li>Things Fall Apart</li> <li>Moby Dick</li> </ul> <p>Thought of the day: Your democracy is only as good as your educational system.</p> </div> </body> </html>
The First 8 Things You Need To Know About HTML
All HTML documents use the file extension
.html. For example:
The HTML language is just a way to mark up webpage content using tags. The webpage above contains the following tags:
A discrete and identifiable piece of content, once properly marked up, is known as an HTML element. The website above has a head element, a body element, four list item elements, etc.
HTML elements generally (but not always) have both opening and closing tags, e.g.
linkelements do not have closing tags. Neither do
imgelements, as you will see in later chapters.
Elements with opening and closing tags can have other elements nested inside of them. For example, a list (
olfor ordered lists,
ulfor unordered lists) will usually contain at least a few nested list items (
Every HTML document begins with an opening and closing
htmltag always has two children nested in it -
body. The head is for storing or linking to metadata, whereas the raw content is marked up in the body.
The opening tag of an HTML element may include any number of attributes. The
h1tag above has a
classattribute with a value of “big-headline”. The class attribute is the most commonly used attribute. It is handy, in that it helps you identify the content you will later want to style with CSS.
You now know enough about HTML to get dangerous.
Write down all of the italicized words in this chapter in your Coding Journal. Give them definitions.
Also in your Coding Journal, make a list of the HTML tags used in this chapter.
Read “Getting Started With HTML” on the Mozilla Developer Network and use it to answer the next four questions. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
What is an empty element? Which elements in the webpage above are empty elements?
Name 5 different attributes you might find in HTML opening tags.
How do you nest HTML elements inside each other?
How does a browser’s HTML parser treat whitespace? Why do we use extra whitespace if its going to be ignored? How can we use whitespace to make nesting easier on the eyes?
Spend 5 minutes skimming “What’s In The Head” https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML. Don’t forget to star the repo!