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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Linking the pages…Hyperlinks 10/01/ 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.”

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

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

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

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

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