Lesson Fifteen: Adding links

  1. You can link your Webpage to other Webpages or to pages within your own site.
    To link to the Public Domain site and see more animal pictures enter this HTML code just before the ending body tag.
    <h2><a href="http://www.public-domain-image.com/fauna-animals-public-domain-images-pictures/"> Visit this Public Domain Website to see more Animal Pictures</a></h2>

    Your page should look like this: Sample

  2. Notice that the color of the link text is different than the green theme colors that you have been using. The browser uses its own default colors for the three states that exist for links. The three states are:
    1. link (the state of the link prior to its being visited.)
    2. visited (the state after the link has been visited.)
    3. hover (the state that exists when the curser is located over the link.)

  3. You can specify your own colors for the various states with pseudo-classes.
    Enter these pseudo-classes (in your css file) to keep the links in compliance with the green color theme
    (do not use spaces in the pseudo-classes - this is the correct syntax - a:link )
    a:link { color: darkgreen; }
a:visited { color: darkgreen; }
a:hover { background: darkgreen; color: lightgreen; }

    Your page should look like this: Sample

  4. Use Power Point to resize your hippo1.jpg image (use width of 4" and height of 4") and save the image as hippo2.jpg in your images folder.

  5. Create a new Webpage for your Website with the following steps:

    1. Create a new html file as ak2.html and add this skeleton code:
      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="text.css">
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>
    2. Enter the title The Animal Kingdom inside the header <title> tags. Inside the body element add the title: The Animal Kingdom inside <h1> tags. Also, inside the body element add the sub-title The African Hippopotamus inside <h2> tags:


  6. The great thing about using a CSS file is that you already have your existing design. All you need to do is link your html file to the existing CSS file. In the header of your html file update your link code: 
    <link rel="stylesheet" type="text/css"  href="ak1.css">

    Your new page should look like this: Sample

Lesson Sixteen: Ordered Lists