Web Design

Objectives

Developing Programming and Development (learning strand) skills, specifically:

  • Understand and be able to use tags to format data in a web page.
  • Understand that web pages are linked by hyper links.
  • Be able to create hyper links to external web sites as well as to local files, such as images and files

Hyperlinks

Learn It

  • Create a second web page just like what you have done with the web page index.html. If you forgot how to do it, just go back and follow the instructions. Save your second page as mySecondPage.html inside the same folder as your index.html.
  • This is my second page. Yours may be different:

page-2.png

  • You should now have two html files in your folder:

folder-2.png

  • We add a hyperlink on the body of our first web page to link it to our second web page.
  • Type a line like the following in your first web page:
<a href="mySecondWebPage.html">Click here to see many photos when Jack growing up!</a>
  • In between the <a> and </a> tags is where you put the hyperlinked text. A hyperlinked text when clicked will take you to another page. In this we want to go to our second web page.
  • The href is called an attribute. An attribute is used to give more information about a tag. In this case it tells the browser where our second page is. href stands for hypertext reference.
  • The new line for the link must be placed somewhere inside the body pairs.
<head>
<title>My Dog Jack</title>
</head>
<body>
<p>My dog Jack is a minature schnauzer. He is 8 months old.</p>
<a href="mySecondWebPage.html">Click here to see many photos when Jack growing up!</a>
</body>
</html>
  • After you added the hyperlink in your index.html file, save it. Go to your folder,open the index.html file by either double clicking on it or right click then choose Open with a browser of your choice. You should see something similar to the image shown below.

page-3.png

  • Test if the hyperlink works by clicking on it. You know it is working if your second page opens up in a browser window.
  • After you added the hyperlink in your index.html file and have tested it successfully, try to add a hyperlink in your second web page that links to your first page independently first.

Badge It

For this lesson’s assessment you are marking your own work. This will allow you see your own progress. This process is often used for online training programmes and is called the ‘honour’ or ‘trust system’. Obviously the key to these systems is being honest. Your teacher will randomly check some students work to moderate their marking.

learning strand: Programming and Development

  • Develop a pair of web pages, called page1.html and page2.html
    • They should link to one another.
    • Include a link to two of your favourite websites.

learning strand: Data and Data Representation

  • Complete all the above tasks, AND change the font on the page to 'Arial'.

Once you have done above tasks and tested they are working as intended, click here for the self assessment.