1. Announcement #1 1 Lecture 9

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

3. Developing a Web Site 3 Lecture 9

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

5. 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

6. Different types of Website Structures 6 Lecture 9

7. (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

8. Linear Structures 8 Lecture 9

9. Advantages & Disadvantages? 9 Lecture 9

10. (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

11. Hierarchical Structures 11 Lecture 9

12. Advantages & Disadvantages? 12 Lecture 9

13. (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

14. Mixed Structures 14 Lecture 9

15. (4) Protected Structures 15 Lecture 9

16. How to link multiple pages?

17. 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.”

18. 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

19. Specifying a Folder Path 19 Lecture 9

20. 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

21. 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

22. 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 22 Lecture 9

23. 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

24. Absolute URL Lecture 9 24 Instructor’s website link label, visible on a Web page, where you will click link destination

25. 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

26. 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

27. Download assign1.htm from course website and create hyperlinks to locations inside the same document complete this assignment as per instructor’s instruction

28. 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

29. 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