1. HTML Introduction (cont.) 10/01/2009 1 Lecture 8, MAT 279, Fall 2009

2. What we have learned so far:  2.1 Network Protocol Stack and application layer  2.2 Client-server model  2.3 Basic HTML page development  2.4 Text Handling  2.5 Image Handling  2.6 Created multiple pages… 10/01/2009 2 Lecture 8, MAT 279, Fall 2009

3. Next Level: Developing a Web Site 10/01/2009 3 Lecture 8, MAT 279, Fall 2009

4. Web Site Structures  A well-designed structure ensures users  navigate the site with ease  not get lost  not miss important information 10/01/2009 4 Lecture 8, MAT 279, Fall 2009

5. Web Site Structures  Storyboard  is a diagram 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  Very important for the websites projects! 10/01/2009 5 Lecture 8, MAT 279, Fall 2009

6. Different types of Website Structures 10/01/2009 6 Lecture 8, MAT 279, Fall 2009

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 10/01/2009 7 Lecture 8, MAT 279, Fall 2009

8. Linear Structures 10/01/2009 8 Lecture 8, MAT 279, Fall 2009

9. Advantages & Disadvantages? 10/01/2009 9 Lecture 8, MAT 279, Fall 2009

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/01/2009 10 Lecture 8, MAT 279, Fall 2009

11. Hierarchical Structures 10/01/2009 11 Lecture 8, MAT 279, Fall 2009

12. Advantages & Disadvantages? 10/01/2009 12 Lecture 8, MAT 279, Fall 2009

13. (3) Mixed Structures  hierarchical allows the user to move from general to specific  linear allows users to move through the site in a linear fashion  How about mixing the both??? 10/01/2009 13 Lecture 8, MAT 279, Fall 2009

14. Mixed Structures 10/01/2009 14 Lecture 8, MAT 279, Fall 2009

15. (4) Protected Structures 10/01/2009 15 Lecture 8, MAT 279, Fall 2009

16. Linking the pages…Hyperlinks 10/01/2009 16 Lecture 8, MAT 279, Fall 2009  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.”

17. Hyperlinks 10/01/2009 Lecture 8, MAT 279, Fall 2009 17  Use tags …, and href attribute  href = “a link destination”  example Tutorial link label, visible on a Web page, where you will click link destination

18. 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 10/01/2009 18 Lecture 8, MAT 279, Fall 2009

19. Relative URL 10/01/2009 Lecture 8, MAT 279, Fall 2009 19 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

20. Absolute URL 10/01/2009 Lecture 8, MAT 279, Fall 2009 20 Instructor’s website link label, visible on a Web page, where you will click link destination

21. 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 10/01/2009 21 Lecture 8, MAT 279, Fall 2009

22. 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. 10/01/2009 22 Lecture 8, MAT 279, Fall 2009

23. 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 10/01/2009 23 Lecture 8, MAT 279, Fall 2009