Web 1 - HTML Lesson 2 - Headings, Hyperlinks

Before you get started: take a good look at your lesson one code: remember the html, head and body sections?

They need to be in every webpage that you create, so get used to typing these in each time.

The Headings and Hyperlinks below will be placed into the body section of the page.

I know it seems like a heading would go in the <head> section - but it does not. Just about all the new code you add to your page will be going into the <body> section (at least for now)


You already know how to add a paragraph to your page. Headings are used to help organize your web page and create visual cues. Remember that visitors often skim a page quickly so it is always best to break up your page into easy to read sections.

There are six (6) types of headings that you can use in your pages. The style for each has a default setting but you can override these to assign specific styles to each of them. For now we will just be adding the default headings to a page.

The syntax for a heading is as follows:

<h1>This is an example of heading style one</h1>

You can use numbers 1, 2, 3, 4, 5, or 6 - each has a different default size.

<h6> This is an example of heading style six</h6>


Adding Hyperlinks

A hyperlink is simply text that will take to you to another place - that could be another place on the same page, a page within your site, or a completely new website.

You can choose to have the link stay in the same browser window, or open a new one. Think about it - if you are linking to a website away from your own then you would want a new window - so the visitor can still see your site. If it is your own site then you simply want the new page to replace the other, and not open a new window for each and every link, right?

The syntax for a link is as follows:

<p><a href="lesson_1.html">Take me to Lesson One</a></p>

The code above should load your file from the first lesson
(note that you need to use whatever name you gave the file if it is not lesson_1)

<p><a href="http://www.google.com" target="_blank">Take me to Google</a></p>

The code above will open a new browser tab with the website you entered


W1_HTML_2 Assignment

Create a new html page and call it lesson_2.html
this, and all pages from now on, will include the required tags that you already know from lesson 1
-- be sure to write your code each time rather than just making a copy of the previous lessons

The finished lesson_2.html will include the following: