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)

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 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

  • 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 each time rather than just making a copy of the previous lessons

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 first lesson page
  • 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 window
  • Save and test your work
  • Go back to your lesson_1 page and add a link to lesson_2
  • Upload both files to your Google Folder so I can see them
    - until our x10 sites are working this is the way I will be able to view and grade your work