Announcement 1 Lecture 9 1 Announcement 2 q

Announcement #1 Lecture 9 1

Announcement #2 q Midterm exam will be on Oct. 12 (Tuesday) v 12. 30 pm – 1. 45 pm v Exam will cover all materials till Oct. 5 Lecture 9 2

Developing a Web Site Lecture 9 3

Web Site Structures q A well-designed structure ensures users navigate the site with ease v not get lost v not miss important information v Lecture 9 4

Web Site Structures q Storyboard is a display of a Web site’s structure v shows all pages in a site v indicates how the pages are linked together v defines a structure that works best for the type of information of the site v v Requirement for the websites projects! Lecture 9 5

Different types of Website Structures Lecture 9 6

(1) Linear Structures q each page is linked with the page follows and the page precedes it in a chain q works best for Web pages with a clearly defined order q commonly, each page contains an additional link back to an opening page Lecture 9 7

Linear Structures Lecture 9 8

Advantages & Disadvantages? Lecture 9 9

(2) Hierarchical Structures q pages are linked going from the home page down to more specific pages q users easily move from general to specific and back q a user can move quickly to a specific page without moving through each page in order Lecture 9 10

Hierarchical Structures Lecture 9 11

Advantages & Disadvantages? Lecture 9 12

(3) Mixed Structures q Adv. From hierarchical v allows the user to move from general to specific q Adv. From linear v allows users to move through the site in a linear fashion q How about mixing the both? ? ? Lecture 9 13

Mixed Structures Lecture 9 14

(4) Protected Structures Lecture 9 15

How to link multiple pages?

Linking pages…Hyperlinks q 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. ” Lecture 9 17

Hyperlinks q What is the tag? q <a>…</a>, q Necessary attribute is href v href = “a link destination” link destination q example <a href = “tutorial. html”> Tutorial </a> link label, visible on a Web page, where you will click Lecture 9 18

Specifying a Folder Path Lecture 9 19

Specifying a Folder Path q 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 q An absolute path specifies a file’s precise location within a computer’s entire folder structure q A relative path specifies a file’s location in relation to the location of the current document q If the file is in the same location as the current document, you do not have to specify the folder name q If the file is in a subfolder of the current document, you have to include the name of the subfolder Lecture 9 20

Specifying a Folder Path q 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 q 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 Lecture 9 21

Hyperlinks q Three type of Hyperlinks v Relative URL • links to a Web page on the same Web server • only need relative directory for the linked file v 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/ v Name id • links to a different location on the same Web page • links to a different location on the different Web page Lecture 9 22

Relative URL link destination <a href = “page 2. html”> My Page 2 </a> link label, visible on a Web page, where you will click link destination <a href = “. . /page 3. html”> My Page 3 </a> link label, visible on a Web page, where you will click Lecture 9 23

Absolute URL link destination <a href=“http: //jjcweb. jjay. cuny. edu/ssengupta/”> Instructor’s website </a> link label, visible on a Web page, where you will click Lecture 9 24

Hyperlink to a certain location q id attribute assigns a name (or an ID) to an element q with the ID, an element can be referred to easily q syntax <tag id=“name”> content </tag> e. g. , <h 1 id=“welcome”> Welcome to MAT 279 </h 1> q Note: v id names must be unique v id names are NOT case sensitive Lecture 9 25

Creating hyperlinks to locations in same document q use id attribute to identify the destination of the hyperlinks q syntax <a href=“#id_name ”> content </a> e. g. , <a href=“#welcome”> Go to the top of the page. </a> Lecture 9 26

Download assign 1. 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 q use id attribute to identify the destination of the hyperlinks q create a hyperlink specific location in another file with syntax <a href=“filename. html#id">content</a> v filename is the file name of destination HTML file v id is the id name of an element in the destination file v e. g <a href=“tutorial. html#para 2”>Go to the second paragraph of the tutorial </a> Lecture 9 28

Working with Hypertext Attribute (target) q 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 29