Signed in as
- Sign out
You're seeing this because you're a teacher 🤓
🎯 Your main goal for this lesson
All we're trying to do is get their feet wet. Often, when they've been able to get into their editor for the first time, it's fun to just let them run and see what they can get rendered in a browser. They won't care if it looks bad. They won't care if it's unorganized. They'll simply feel invincible because they wrote some code and it appeared on the screen - guaranteed.
🧠Things to keep in mind when teaching
Tread lightly...this is their first time writing any code! Take it from anyone that has taught a class wherein an entire room of students are opening a text editor for the first time...patience is a virtue. They need a supportive teacher to help them stick with it when their code breaks. YOU can do this.
🚀 Lesson Plan
Activity One: 15 minutes
Start class by watching this clip from Iron Man 2. The most abstract concept in this lesson is the idea of the DOM. Students need to understand what it means to have a model, or a representation, of their code. In the clip, Tony Stark has Jarvis convert a physical model into a digital wireframe. He can then isolate, manipulate, and control that model separate from the physical version; this is the lesson we're trying to impart on students: your code can be read, interpreted, and manipulated by other users and the computer. Your goal in this portion of the lesson is to spark conversation about this concept. (If you can't do it with Iron Man...what can you do it with?)
Activity Two: 40 minutes
Guide students through the lesson's content. It can be helpful to work in chunks - much like the lesson is organized - and have them code with you. Depending on how long it takes to reach the end, let them have some freedom to experiment with adding things into an HTML file and seeing it render.
Activity Three: 10 minutes
Take the formative assessment and work towards mastery.
HTML Basics
By the end of this lesson, you'll be able to...
- Identify common HTML elements.
- Manipulate the DOM to edit existing HTML.
- Use a text editor to write a `hello world` page.
A Disclaimer
We are only going to scratch the surface of HTML in this lesson. The goal is to give you some foundational knowledge about the syntax, or the way the language is structured. By the end of today, you'll be just dangerous enough to write some (relatively) ugly looking HTML 🤪
In a couple of weeks, we'll take a deeper dive into creating semantic HTML that accurately explains to a browser what we want to have rendered for our users.
Top-down Approach
For all lessons this week, we'll take what's referred to as a top-down approach. This means we'll start at the widest, largest scope possible and, step-by-step, work our way down to smaller bits of detail.
The DOM
To begin, it's important to know what your browser is actually 'seeing' whenever it loads a webpage. While you're seeing rendered HTML and CSS, your browser is actually receiving something called the Document Object Model, or DOM.
The DOM is a representation of the data of the HTML that makes up a webpage. It's a programmatic incarnation of HTML that is meant to be processed and utilized by computers, not people.
The DOM represents different elements on the page as nodes and objects. These can be accessed and manipulated programmatically by languages (like JavaScript as we'll see later this week).
Broadly, our DOM will look like the following schema, or representation:
Starting with the HTML Element
To begin writing HTML, let's continue with our top-down approach and use the largest-scope possible: the <html> element.
All elements in HTML utilize a syntax of open and closing tags. These tags encapsulate an element; everything between them is 'inside' the element. You can see how to write an open- and close-tag below.
1<html> 2 <!-- This is a comment and won't be rendered. --> 3 <!-- Anything inside these <html> tags is a part of our document --> 4</html>
Adding the Head Element
Now that we have our <html> element, let's work from the top of the document to the bottom. We'll begin by introducing the <head> element.
The <head> element is for all of our metadata. This is information that, typically, isn't rendered to the browser, but helps programmatic interfaces (like search engines) know more about our page. One piece that will be rendered in the browser is the <title> tag; this will appear in the tab at the top of our browser's window.
1<html> 2 <head> 3 <!-- This is our <head> element and will be full of metadata --> 4 <!-- We'll include a <title> tag so our page displays one --> 5 <title>Hello, World!</title> 6 </head> 7</html>
There are many other important elements we'll add into our <head> element later.
Building Content with the Body Element
Now it's time to get some actual data rendered on our page! We'll use the <body> tag to denote what we want to be visible and rendered to our browser. Anything inside this element will be displayed by our browser.
1<html> 2 <head> 3 <title>Hello, World!</title> 4 </head> 5 <body> 6 <!-- Everything between these <body> tags will be rendered by the browser --> 7 </body> 8</html>
We could just start writing information in here, but the DOM is all about organization and structure. As such, we want to make sure we're being semantic - or using the syntax and elements correctly - and not just freestyling all over the web. Below, you can see we use the <h1> tag to denote a large heading of text that reads 'Hello, World!'
1<html> 2 <head> 3 <title>Hello, World!</title> 4 </head> 5 <body> 6 <!-- This header should be the only thing visible! --> 7 <h1>Hello, World!</h1> 8 </body> 9</html>
Content Sectioning
To continue with the idea of semantic HTML, we want to make sure we organize our content in a way that makes sense to both us and the browser.
We can achieve this through sectioning off our content using different types of elements. There are many HTML tags that we'll look at in the coming weeks, but for this lesson, we'll only focus on a few commonly used ones.
It can help to think of these elements as building blocks: they're tools we can use to assemble something; so long as we know how they fit together, the sky is the limit.
Using Divs
The <div> element is probably the most overused element in HTML. That's not a knock on it, just that people reach for it all the time. It's versatile and an easy way to section off content. In the example below, we put the <h1> we created earlier inside a <div>.
1<html> 2 <head> 3 <title>Hello, World!</title> 4 </head> 5 <body> 6 <!-- This div is a generic way of sectioning off blocks of code --> 7 <div> 8 <h1>Hello, World!</h1> 9 </div> 10 </body> 11</html>
When used in conjunction with comments, it can be a really quick and easy way for you as a developer to see how your page is organized.
1<html> 2 <head> 3 <title>Hello, World!</title> 4 </head> 5 <body> 6 <!-- This could be our greeting to the user --> 7 <div> 8 <h1>Hello, World!</h1> 9 </div> 10 <!-- Here's the main section of content --> 11 <div> 12 <p>I like HTML.</p> 13 </div> 14 </body> 15</html>
Text
Of course, text is probably the most common form of information on a webpage. There's many varieties that we'll see used to format text in different ways.
Paragraph Tags
These are the most common text element. Consider this for all your 'general' writing inside of elements.
1<div> 2 <!-- This is the most common text element you'll use --> 3 <p>I like HTML.</p> 4</div>
Header Tags
These are meant to be formatted as a larger font size or a heavier font weight. They go atop an element as headings. There are six flavors that get increasingly smaller with each subtraction.
1<div> 2 <!-- The BIGGEST! --> 3 <h1>Hello, World!</h1> 4 <h2>This is a bit smaller</h2> 5 <h3>And smaller</h3> 6 <!-- h4 nd h5 --> 7 <h6>And smallest</h6> 8</div>
Lists
We'll see two types of lists: unordered and ordered. Unordered lists are like bulleted items in that the order isn't necessarily important. However, ordered lists utilize numbers and are considered rank-ordered.
1<div> 2 <!-- Order doesn't matter --> 3 <ul> 4 <li>First Item</li> 5 <li>Second Item</li> 6 <li>Third Item</li> 7 </ul> 8</div> 9<div> 10 <!-- Items are rank-ordered --> 11 <ol> 12 <li>Numero Uno</li> 13 <li>Numero Dos</li> 14 <li>Numero Tres</li> 15 </ol> 16</div>
Images
Everyone loves a good image. This our first unique element compared to the others we've seen above.
<img> tags are what's referred to as self-closing. If you notice, there's no closing tag! As there isn't any text or other information that needs to be rendered 'between' the tags, we can just use attributes like src and alt to denote specific information relating to this image.
The src attribute is the path (where it can be found) to the image file. The alt attribute is used to provide alternate text for screen-readers so people of all accessibility levels can interact with our page.
1<div> 2 <!-- Images are self-closing --> 3 <img 4 src="https://secure.static.goal.com/187800/187825hp2.jpg" 5 alt="Ronaldo acting like himself" 6 /> 7</div>
Wrapping Up
While there's a lot more to writing HTML, you now know enough to be dangerous! Spend some time adding content to a document and getting the hang of organizing your documents. In our next lesson, we'll take a look at how to add some style to our pages.
Assignments:
Your teacher may elect to give you this assignment in conjunction with this lesson or at a different time. Pay attention to your teacher's instructions for how/when to complete this assignment!HTML Boilerplate