Announcement #1 1 Lecture 9

Announcement #2  Midterm exam will be on Oct. 12 (Tuesday)  pm – 1.45 pm  Exam will cover all materials till Oct. 5 2 Lecture 9

Developing a Web Site 3 Lecture 9

Web Site Structures  A well-designed structure ensures users  navigate the site with ease  not get lost  not miss important information 4 Lecture 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! 5 Lecture 9

Different types of Website Structures 6 Lecture 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 7 Lecture 9

Linear Structures 8 Lecture 9

Advantages & Disadvantages? 9 Lecture 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 10 Lecture 9

Hierarchical Structures 11 Lecture 9

Advantages & Disadvantages? 12 Lecture 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??? 13 Lecture 9

Mixed Structures 14 Lecture 9

(4) Protected Structures 15 Lecture 9

How to link multiple pages?

Linking pages…Hyperlinks 17 Lecture 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?  …,  Necessary attribute is href  href = “a link destination”  example Tutorial link label, visible on a Web page, where you will click link destination

Specifying a Folder Path 19 Lecture 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 20 Lecture 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 21 Lecture 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.,  Name id links to a different location on the same Web page links to a different location on the different Web page 22 Lecture 9

Relative URL Lecture 9 23 My Page 2 link label, visible on a Web page, where you will click link destination My Page 3 link label, visible on a Web page, where you will click link destination

Absolute URL Lecture 9 24 Instructor’s website 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 content e.g., Welcome to MAT 279  Note:  id names must be unique  id names are NOT case sensitive 25 Lecture 9

Creating hyperlinks to locations in same document  use id attribute to identify the destination of the hyperlinks  syntax content e.g., Go to the top of the page. 26 Lecture 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 content  filename is the file name of destination HTML file  id is the id name of an element in the destination file  e.g Go to the second paragraph of the tutorial 28 Lecture 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 tag Lecture 9