announcement #1 1 lecture 9. announcement #2 midterm exam will be on oct. 12 (tuesday) 12.30 pm...
Post on 22-Dec-2015
218 Views
Preview:
TRANSCRIPT
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
top related