Lesson 2 Headings

We’re going to get more written on our website today. From now on, you should have Notebook (TextEdit) open on your computer for the lesson. It’s helpful to have your documents folder ready to go as well, so you can quickly get to where you are saving your lesson projects.

We’re going to add different sized writing to the page today. Later we’re going to learn how to choose for ourselves the font size, but HTML has some predefined headings which come in handy.

Open a new Notepad document. Yes, you could use the one from Lesson 1, but here’s why I don’t suggest it. If you don’t use this new language you are learning, you are going to forget it. You have to use it to be able to maintain it, so don’t be lazy and start fresh. (Later we’ll copy and paste, but don’t do it yet!)

How do we start our file?

With HTML tags <html></html>

Remember that tags always come in pairs. An opening tag must have a closing tag.

Put some space between your tags by hitting enter. In between you are going to make headings like this.

<html>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</html>

The tags are what communicate with your browser what should happen with the text. The words, Heading 1, Heading 2, etc. are just for us so that you can see the differences labeled on your webpage.

Save your file in your lessons folder as lesson2.html. In your documents folder click and drag it up to the browser. What’s the difference between the headings?

<h1> means heading 1. That’s the largest size. That’s the title at the top of the page. <h2> is heading 2 and would label major sections on your site. <h3> is a smaller heading which could be used above a paragraph to label its content, or maybe to display a quote.

You can go ahead and change the “Heading #” to anything you want and view it in your browser.

You can see what this all looks like in the browser by watching the video.