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.

Headings

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 will load the new page - be sure you are entering the correct name for the page...

<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

  • In the above examples the a stands for anchor tag <a>
  • href is the address or page that you want to go to
  • target="_blank" means to open to new page in a new tab
  • The text between the opening and ending of the anchor tag is what will be displayed on the screen


 

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 rather than trying to just copy lesson 1

The finished lesson_2.html will include the following:

  • A title tag that indicates what lesson the page is demonstrating
  • Examples of the six different styles for headings
  • A hyperlink that takes you to your lesson_1.html
  • A hyperlink that takes you to Google and opens a new window
  • A hyperlink that takes you to a site of your choice and opens a new windows
  • Upload your file to Google Drive so I can view the page