![Page 1: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/1.jpg)
Announcement #1
1Lecture 9
![Page 2: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/2.jpg)
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
![Page 3: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/3.jpg)
Developing a Web Site
3Lecture 9
![Page 4: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/4.jpg)
Web Site Structures
A well-designed structure ensures users
navigate the site with ease not get lost not miss important information
4Lecture 9
![Page 5: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/5.jpg)
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
![Page 6: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/6.jpg)
Different types of Website Structures
6Lecture 9
![Page 7: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/7.jpg)
(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
![Page 8: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/8.jpg)
Linear Structures
8Lecture 9
![Page 9: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/9.jpg)
Advantages & Disadvantages?
9Lecture 9
![Page 10: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/10.jpg)
(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
![Page 11: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/11.jpg)
Hierarchical Structures
11Lecture 9
![Page 12: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/12.jpg)
Advantages & Disadvantages?
12Lecture 9
![Page 13: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/13.jpg)
(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
![Page 14: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/14.jpg)
Mixed Structures
14Lecture 9
![Page 15: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/15.jpg)
(4) Protected Structures
15Lecture 9
![Page 16: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/16.jpg)
How to link multiple pages?
![Page 17: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/17.jpg)
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.”
![Page 18: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/18.jpg)
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
![Page 19: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/19.jpg)
Specifying a Folder Path
19Lecture 9
![Page 20: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/20.jpg)
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
![Page 21: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/21.jpg)
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
![Page 22: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/22.jpg)
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
![Page 23: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/23.jpg)
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
![Page 24: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/24.jpg)
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
![Page 25: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/25.jpg)
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
![Page 26: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/26.jpg)
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
![Page 27: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/27.jpg)
Download assign1.htm from course website and create hyperlinks to locations inside the same
document
complete this assignment as per instructor’s instruction
![Page 28: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/28.jpg)
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
![Page 29: Announcement #1 1 Lecture 9. Announcement #2 Midterm exam will be on Oct. 12 (Tuesday) 12.30 pm – 1.45 pm Exam will cover all materials till Oct](https://reader031.vdocuments.net/reader031/viewer/2022032523/56649d7f5503460f94a63105/html5/thumbnails/29.jpg)
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