Announcement #1

1Lecture 9

Announcement #2

Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm

Exam will cover all materials till Oct. 5

2Lecture 9

Developing a Web Site

3Lecture 9

Web Site Structures

A well-designed structure ensures users

navigate the site with ease not get lost not miss important information

4Lecture 9

Web Site Structures

Storyboard

is a display of a Web site’s structure shows all pages in a site indicates how the pages are linked together defines a structure that works best for the

type of information of the site

Requirement for the websites projects!

5Lecture 9

Different types of Website Structures

6Lecture 9

(1) Linear Structures

each page is linked with the page follows and the page precedes it in a chain

works best for Web pages with a clearly defined order

commonly, each page contains an additional link back to an opening page

7Lecture 9

Linear Structures

8Lecture 9

Advantages & Disadvantages?

9Lecture 9

(2) Hierarchical Structures

pages are linked going from the home page down to more specific pages

users easily move from general to specific and back

a user can move quickly to a specific page without moving through each page in order

10Lecture 9

Hierarchical Structures

11Lecture 9

Advantages & Disadvantages?

12Lecture 9

(3) Mixed Structures

Adv. From hierarchical allows the user to move from general to

specific

Adv. From linear allows users to move through the site in a

linear fashion

How about mixing the both???

13Lecture 9

Mixed Structures

14Lecture 9

(4) Protected Structures

15Lecture 9

How to link multiple pages?

Linking pages…Hyperlinks

17Lecture 9

Hyperlink “A clickable HTML element that will direct the web

browser to display a different Web page or a different location on the current Web page.”

Hyperlinks

Lecture 9 18

What is the tag? <a>…</a>,

Necessary attribute is href href = “a link destination”

example <a href = “tutorial.html”> Tutorial </a>

link label, visible on a Web page, where you will click

link destination

Specifying a Folder Path

19Lecture 9

Specifying a Folder Path

To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path

An absolute path specifies a file’s precise location within a computer’s entire folder structure

A relative path specifies a file’s location in relation to the location of the current document

If the file is in the same location as the current document, you do not have to specify the folder name

If the file is in a subfolder of the current document, you have to include the name of the subfolder

20Lecture 9

Specifying a Folder Path

If you want to go one level up the folder tree, you start the relative path with a double period (..), a forward slash, and then provide the name of the file

To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder

21Lecture 9

Hyperlinks

Three type of Hyperlinks Relative URL

• links to a Web page on the same Web server• only need relative directory for the linked file

Absolute URL• links to a Web page on a different Web server• a complete URL should be used e.g., http://jjcweb.jjay.cuny.edu/ssengupta/

Name id• links to a different location on the same Web page• links to a different location on the different Web page

22Lecture 9

Relative URL

Lecture 9 23

<a href = “page2.html”> My Page 2 </a>

link label, visible on a Web page, where you will click

link destination

<a href = “../page3.html”> My Page 3 </a>

link label, visible on a Web page, where you will click

link destination

Absolute URL

Lecture 9 24

<a href=“http://jjcweb.jjay.cuny.edu/ssengupta/”> Instructor’s website </a>

link label, visible on a Web page, where you will click

link destination

Hyperlink to a certain location id attribute assigns a name (or an ID) to an element with the ID, an element can be referred to easily syntax <tag id=“name”> content </tag>

e.g., <h1 id=“welcome”> Welcome to MAT 279 </h1>

Note: id names must be unique id names are NOT case sensitive

25Lecture 9

Creating hyperlinks to locations in same document

use id attribute to identify the destination of the hyperlinks

syntax<a href=“#id_name ”> content </a>

e.g., <a href=“#welcome”> Go to the top of the page. </a>

26Lecture 9

Download assign1.htm from course website and create hyperlinks to locations inside the same

document

complete this assignment as per instructor’s instruction

Creating hyperlinks between documents

use id attribute to identify the destination of the hyperlinks

create a hyperlink specific location in another file with syntax<a href=“filename.html#id">content</a> filename is the file name of destination HTML file id is the id name of an element in the destination file e.g

<a href=“tutorial.html#para2”>Go to the second paragraph of the tutorial </a>

28Lecture 9

Working with Hypertext Attribute (target)

29

You can force a document to appear in a secondary window or tab by adding the target attribute to the tag <a> tag

Lecture 9