ITSE 1411 Beginning Web
Assignment 2

Reading

Design Text, Chapter 9, pages 149 - 177 (Linking)
JavaScript Text, Chapter 1, pgs 26-46

Discussion

• Hyperlinks
  • Links (hyperlinks) are used to go from page to page.
  • Links can go to any type of file or page that is uploaded to the web such as another web page, an image, pdf, music, video, text files, word files, spreadsheets, etc.
  • The HTML tag used to define a hyperlink is the anchor or <a> tag.
    • The syntax of the anchor tag is
      <a href="url">Some link</a>
      • The attribute href stands for hyperlink reference and is assigned the address of the link.
      • url (Uniform Resource Locator or Universal Resource Locator) is the address of the link. The standard form of an address to a page is
        http://www.austincc.edu/jscholl/
        
      • http means HyperTextTransferProtocol
      • :// is a separator between the protocol and the address
      • www stands for World Wide Web
      • austincc is the domain name for Austin Community College
      • edu is the domain extension and describes the domain as being an educational institution
      • / is another separator and designates another folder
      • jscholl is my account on the Austin Community College server and has the name jscholl
      • When no page (or other file) is designated in the address, the default page is displayed. Each server sets the allowable names for default pages and the order of precedence. Common default pages are
        index.html
        index.htm
        index.shtml
        index.php
        index.php5
        index.php4
        index.php3
        index.cgi
        default.html
        default.htm
        home.html
        home.htm
        Index.html
        Index.htm
        Index.shtml
        Index.php
        Index.cgi
        Default.html
        Default.htm
        Home.html
        Home.htm
        placeholder.html
        
      • We will only use index.htm or index.html for our default page names.
      • The words between the open and close a tag are what appear on the page for the user to see and click on for access to the page. There are four states of a link called link, visited, hover, and active. The default for the link in the "link" state is underlined and blue.
  • When a url contains a full Internet address, it is called an absolute path or absolute link.
    • When you are linking to a page located on a different server, you must always use an absolute link.
  • When pages or files are stored on the same server as your page resides, you can use a relative path or relative link.
    • The format for a relative path is
      <a href="somePage.htm">Some page on the same server in the same folder</a>
      <a href="subfolder/somePage.htm">Some page on the same server in a sub folder of the current folder</a>
      <a href="../somePage.htm">Some page on the same server in a folder above the current folder</a>
    • Use the / separator for each folder in the path.
    • Use ../ for each hierarchical level higher than the current folder. For example from the page
      http://www.austincc.edu/jscholl/summer2009/javascript/teachers/HTML/links.htm you could link to the testing center page using the relative path
      <a href="../../../../../testctr/hours.php
      to reach the testing center hours page on the ACC server.
  • Linking to a specific place on a page uses a named anchor.
    • A named anchor requires 2 parts.
      1. a link to a specific place on the page
      2. code at the location where the link is directed
      for example view my syllabus
    • The menu at the top of the page links to locations within the page.
    • View the source code of the syllabus page.
      The menu code links to different locations on the page
      <a href="#courseInfo">Course Information</a> |
      <a href="#policies">Policies</a> |
      <a href="#catalog">Catalog</a> |
      <a href="#text">Text</a> |
      <a href="#rationale"> Rationale</a> |
      <a href="#objectives"> Objectives</a> |
      <a href="#requirements"> Requirements</a> |
      <a href="#grades">Grades</a> |
      <a href="#homework"> Assignments</a> |
      <a href="#exams">Exams</a>
      
    • Each location is coded with an anchor and a name, for example:
      <a name="courseInfo"></a>
    • Since there is not text between the opening and closing a tag, nothing is displayed on the screen.
    • You can link to a specific location on a different page as long as the specific location has a name and you add the # and the name to the end of the address in the link.
  • Opening a page in a new window
    • By default a link will open in the same window. You can code the link to open in a new window. Prior to XHTML strict, the target attribute was used to instruct the browser to open the link in a new window. When using XHTML strict, you cannot use the target="_blank" attribute. The following link will open in a new window and complies with XHTML strict coding guidelines:
      <a href="http://www.htmlhelp.com/reference/html40/entities/" onclick="window.open(this.href,'_blank');return false;"> Character Entities</a>
    • Values for instructing how links are to open
      name -- opens a link in a window of the name used
      _blank -- opens a new window
      _parent -- when using frames, opens in the current window (frameset)
      _self -- opens in the same window
      _top -- opens a window in the original window and cancels all frames
      new -- opens a window named new
• Email links
  • The mailto link is not as valuable as it once was since many users do not configure their computers to associate with a mail program and Internet Explorer does not allow the body of a message to send through a form using HTML and JavaScript. Most mail coding is now done through server-side scripting.
• JavaScript containing html tags
  • The examples of JavaScript coding in pages 34 - 44 of the JavaScript text show the inclusion of html tags within the string that is part of the document.write statement. Those statements will not validate using XHTML strict.
  • In order for your HTML tags to validate within your JavaScript code, you must follow the instructions shown on pages 44 and 45 of the text and include CDATA sections inside of every internal script tag. (Do not use a CDATA section when you are using an external JavaScript file.
• The write() and writeln() Methods
  • Text placed between quotes (single or double) is called a literal string. In JavaScript, you can use either single or double quotes, but you must be consistent.
  • When coding a string, you cannot just break the line and continue on the next line. You must close the string use the concatenation operator "+" and reopen the string. For example:
    • document.write("This line is too long to fit all on the width of my screen, so I want to break the string before "
      + "I am at the end of the line.");
      or put the concatenation operator on the first line.
      document.write("This line is too long to fit all on the width of my screen, so I want to break the string before " +
      "I am at the end of the line.");
• Using the pre tag
  • The pre tag described on page 37 of the JavaScript text has other uses than the writeln method. However, it is not recommended that you over use the pre element.

Practice:

• Linking within the page
  • Visit my syllabus. Notice the links across the top of the page that link within the page.
  • View your index page. There is a link at the top of the page to the template link. Create links across the top of your index page to link to:
    • Assignment 2
    • Assignment 3
    • Assignment 4
    • Assignment 5
    • Assigment 6
    • Assignment 7
    • Assignment 8
    • Assignment 9
    • Assignment 10
    • Project 1
    • Project 2
    • Final Project
  • Create anchors for all of the links (I prefer the anchors be in reverse order. Have the Final Project at the top and Assignment 1 at the bottom.)
• Adding JavaScript to your page
  • Create an assignment2 folder (no spaces in the name, no uppercase) in your public_html folder.
  • Open your forestvilleFunding.htm page from your assignment1 folder in your editor.
  • Save forestvilleFunding.htm to your assignment2 folder.
  • Add the script tags shown on the bottom of page 33 to your forestvilleFunding.htm document.
  • Add the document.write methods shown on page 38 to your forestvilleFunding.htm document.
  • Add the comments shown on page 39 to your forestvilleFunding.htm document.
  • Modify your forestvillefunding.htm document with the changes shown on pages 40 and 41 and pages 41 and 42.
  • Create the mortgage.js document described on page 43.
    • Do not start with a template.
    • Start with a blank page.
    • Do not add the script tags on the js page.
    • Be sure that you save with the js extension.
    • Do not use the LTS validation for a js page.
    • There is no JavaScript validator. If there are some errors, they may show up when you preview the page, but not with the validator. JavaScript errors are very hard to find.
  • Make the necessary changes to forestvilleFunding.htm to use the mortgage.js source just created.
  • Modify your forestvilleFunding.htm page to add CDATA to the script sections as shown on page 45.

Case Project:

• Complete Case Project 1-4 found on page 57 of your text.
  • Download the js_styles.css style sheet.
  • Open your template.htm page.
  • Save as jungleTours.htm in your assignment2 folder.
  • Follow the steps described in the text but start with the template so that you will have the validation icons on your page.

Update your index page:

• Add links on your index page to the pages in your assignment2 folder that are to be graded:
  • forestvilleFunding.htm
  • js_styles.css
  • mortgage.js
  • travel.js
  • forestvillefunding_styles.css
  • jungleTours.htm

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your assignment2 folder with the files:
  • forestvilleFunding.htm
  • js_styles.css
  • mortgage.js
  • travel.js
  • jungleTours.htm

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.