HTML Introduction (cont.)

10/01/2009 1Lecture 8, MAT 279, Fall 2009

What we have learned so far:

2.1 Network Protocol Stack and application layer 2.2 Client-server model

2.3 Basic HTML page development 2.4 Text Handling 2.5 Image Handling

2.6 Created multiple pages…

10/01/2009 2Lecture 8, MAT 279, Fall 2009

Next Level: Developing a Web Site

10/01/2009 3Lecture 8, MAT 279, Fall 2009

Web Site Structures

A well-designed structure ensures users

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

10/01/2009 4Lecture 8, MAT 279, Fall 2009

Web Site Structures

Storyboard

is a diagram 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

Very important for the websites projects!

10/01/2009 5Lecture 8, MAT 279, Fall 2009

Different types of Website Structures

10/01/2009 6Lecture 8, MAT 279, Fall 2009

(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

10/01/2009 7Lecture 8, MAT 279, Fall 2009

Linear Structures

10/01/2009 8Lecture 8, MAT 279, Fall 2009

Advantages & Disadvantages?

10/01/2009 9Lecture 8, MAT 279, Fall 2009

(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

10/01/2009 10Lecture 8, MAT 279, Fall 2009

Hierarchical Structures

10/01/2009 11Lecture 8, MAT 279, Fall 2009

Advantages & Disadvantages?

10/01/2009 12Lecture 8, MAT 279, Fall 2009

(3) Mixed Structures

hierarchical allows the user to move from general to specific

linear allows users to move through the site in a linear fashion

How about mixing the both???

10/01/2009 13Lecture 8, MAT 279, Fall 2009

Mixed Structures

10/01/2009 14Lecture 8, MAT 279, Fall 2009

(4) Protected Structures

10/01/2009 15Lecture 8, MAT 279, Fall 2009

Linking the pages…Hyperlinks

10/01/2009 16Lecture 8, MAT 279, Fall 2009

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

10/01/2009 Lecture 8, MAT 279, Fall 2009 17

Use tags <a>…</a>, and href attribute href = “a link destination”

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

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

link destination

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

10/01/2009 18Lecture 8, MAT 279, Fall 2009

Relative URL

10/01/2009 Lecture 8, MAT 279, Fall 2009 19

<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

10/01/2009 Lecture 8, MAT 279, Fall 2009 20

<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

10/01/2009 21Lecture 8, MAT 279, Fall 2009

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>

10/01/2009 22Lecture 8, MAT 279, Fall 2009

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>

10/01/2009 23Lecture 8, MAT 279, Fall 2009