Website Development I

Course Info Class Notes Resources Student Websites

Class No. 7:

Using Hyperlinks

Today’s Goal

To begin working with hyperlinks.


Class Resources

Web Programming book reading for THIS class

Web Programming book reading for NEXT class


Review and Follow-Ups

Questions from our last class or the readings?

Cursor Properties

selector:hover { cursor: property; }


source:  http://www.javascripter.net/faq/stylesc.htm

Clearing the Browser Cache

If CtrlShiftDel does not bring up the Clear browsing data dialog box on your screen, try to get to that dialog box as follows:

  1. click the three dots (•••) at the top right of your browser window
  2. click Settings
  3. type clear in the search settings box
  4. scroll down to find the Choose what to clear button and click that button
  5. leave all checkboxes checked and click the Clear now button
  6. type CtrlW to close the Settings window


Linking

Linking Examples

source:  Connolly & Hoar (2018), Fundamentals of Web Development, fig. 3.14, p. 89, slide 30 for Chapter 3 (updated by JMH)

source:  Connolly & Hoar (2018), Fundamentals of Web Development, fig. 3.14, p. 89, slide 31 for Chapter 3

source:  Connolly & Hoar (2018), Fundamentals of Web Development, slide 32 for Chapter 3


The index.html File

If a file named index.html is present in a directory, it is automatically loaded when the user navigates to that directory.

This is how our course website works.

  1. when you go to http://cssdweb.edu the web server’s configuration file tells it to go to directory \\PI\cssd.local\D\Dropboxes\Website Development I\cssdweb.edu
  2. that directory contains an index.html file that redirects the web browser to file index.php
  3. index.php runs on the web server behind the scenes — it does not output anything to the user’s browser — and figures out which term we’re in
  4. index.php then redirects the user’s browser to the Course Information page for the current term

That may sound like a lot of processing, but it all begins with the index.html file.


Additional Material Covered in Our Textbook

Our textbook contains a wealth of information that we don’t have time to cover in class.

There is a rather extensive discussion of an excellent example of a menu that links to various places on a page that is similar to what our course website does on the Course Information page.

The book also discusses how to apply CSS to links.  Everyone should be able to read and understand that section.


Anchor Demonstration

Without CSS – With CSS  (developed in response to a question from a previous student in this class)

Making a link button

<p><a href="#"><button>Return To Top of Page</button></a></p>


Today’s Exercises

Goal:  To create a web page that incorporates hyperlinks.

Preamble:  There are two exercises described here.  You are welcome to do either or both or something similar of your own design.


Exercise #1:

By now you have created a number of web pages.  In this exercise you will create an index page that links to each of those pages.

  1. Start by viewing the directory of all the pages you have created.  To do this, go to the Student Websites page and click the link next to your name.
  2. Create a new page — laid out however you wish — that lists your pages with a hyperlink to each one.

    3. You might choose to list your pages as a numbered (ordered) or an unordered list, or you might choose to list them using a completely different structure.

    You also don’t have to use your page’s file names in your list.  You can list each page with a descriptive title and only use the file name in the href attribute of the enclosing a tag.

    For example, this page might be coded as:

          <a href="ClassPanel-07.php" target="_blank">
        Class No. 7: Using Hyperlinks</a>
  3. Test each link to ensure that when you click on them, they go where you want them to go.


Exercise #2:

Alternatively, add a menu of internal links to one of your pages as done at the top of this page.  Remember that to do this, there are two steps:

  1. Add id attributes to the page elements that you want to link to.
  2. Use the # followed by an id value as the target of the link that you create in your menu.
  3. In addition, as for Exercise #1, you don’t have to use a page element’s exact text in your menu.  Your menu can display descriptive text to the user and only use the internal id value as the href attribute of the enclosing a tag.


 


This is Class No. 7.  It was last modified on Saturday, October 21, 2023 at 4:38 PM.  Copyright © 2010-2024 by Jesse M. Heines.  All rights reserved, but may be freely copied or excerpted for educational purposes with credit to the author.