1. Web Page Creation Part II ST: Introduction to Web Interface Design Prof. Angela Guercio Spring 2007

2. Web Page Creation: Hyperlinks Absolute URL Absolute URL connects a local web server with a remote web server connects a local web server with a remote web server http://www.cs.kent.edu http://www.cs.kent.edu Relative URL Relative URL Connects one page to another page in the same Web server Connects one page to another page in the same Web server Named anchor Named anchor Connects 2 locations on the same Web Page Connects 2 locations on the same Web Page

3. Absolute URL The URL is the destination link The URL is the destination link A link is created by using the tags … A link is created by using the tags … The destination link is added with the attribute HREF inside The destination link is added with the attribute HREF inside Department of Computer Science Department of Computer Science

4. Important Always check each link that you add to a Web page to be sure that it works! Always check each link that you add to a Web page to be sure that it works! Maintain you page! Pages that are out there today might not be there tomorrow! Maintain you page! Pages that are out there today might not be there tomorrow!

5. Relative URL You need only the file’s name and its location relative to the current directory where your page is. You need only the file’s name and its location relative to the current directory where your page is. Absolute URL Absolute URL HREF=“http://www.personal.kent.edu/D ocuments/booklist.html” HREF=“http://www.personal.kent.edu/D ocuments/booklist.html” Relative URL (if my current folder is Documents) Relative URL (if my current folder is Documents) HREF=“booklist.html” HREF=“booklist.html”

6. Advantages of Relative URL Choose either absolute or relative URL but…. Choose either absolute or relative URL but…. URL is best because it makes your page portable. URL is best because it makes your page portable. Page Portability: the ability to relocate a page on a new server Page Portability: the ability to relocate a page on a new server Moving a page: Moving a page: If your links were absolute URLs, then edit them one by one to replace the old domain with the new domain server name If your links were absolute URLs, then edit them one by one to replace the old domain with the new domain server name If your links were relative URLs, they will work on the new server (unless you change the directory structure) If your links were relative URLs, they will work on the new server (unless you change the directory structure)

7. Named Anchors If you add a bulleted list on top of your page, you can add an anchor to link in which part pf the page you explain those items If you add a bulleted list on top of your page, you can add an anchor to link in which part pf the page you explain those items You need: You need: a tag with the link’s name a tag with the link’s name A tag with the attribute NAME=“name” A tag with the attribute NAME=“name”…..<UL> First thing First thing Second thing Second thing </UL>…… First Thing First Thing …… Second Thing Second Thing ….

8. Using other editors Let’s redo everything we have done so far with a user-friendly editor. Let’s redo everything we have done so far with a user-friendly editor. Open the web page of HW4 with Frontpage Open the web page of HW4 with Frontpage Attention: Web pages that work well with one browser, do not necessarily work well another browser! Attention: Web pages that work well with one browser, do not necessarily work well another browser! The design does not depend on the type of machine you are working with (Mac. IBM,…) but rather on the browser you are using The design does not depend on the type of machine you are working with (Mac. IBM,…) but rather on the browser you are using That is why is very important to understand the HTML Language and not to rely on the automatic translation of a software. That is why is very important to understand the HTML Language and not to rely on the automatic translation of a software.

9. Tables Tables contain rows and columns Tables contain rows and columns table row table row table data table data<TABLE><TR><TD> insert here the content of a table cell </TD></TR></TABLE> REMEMBER: Lynx, which is a fast text-only Web browser, does not support tables or image or graphics REMEMBER: Lynx, which is a fast text-only Web browser, does not support tables or image or graphics

10. Rows and Columns Each creates a column Each creates a column Each is a table cell Each is a table cell<TABLE><TR><TD> insert here the content of a table cell </TD></TR><TR><TD> </TD></TR></TABLE> It is a table with 2 rows and 1 column It is a table with 2 rows and 1 column

11. Tables with images Tables are great to organize images. Tables are great to organize images.<TABLE><TR><TD> </TD></TR></TABLE> The attribute ALT in IMG replaces the image with the text in “” if the browser cannot display the image The attribute ALT in IMG replaces the image with the text in “” if the browser cannot display the image

12. Add a border and resize images Add the attribute BORDER=5 to the TABLE tag. Add the attribute BORDER=5 to the TABLE tag. A frame is added to the cell A frame is added to the cell Add now WIDTH and HEIGHT Add now WIDTH and HEIGHT use percent. The table will dynamically adjust itself according to the percent value whenever the browser window is resized use percent. The table will dynamically adjust itself according to the percent value whenever the browser window is resizedExample: Be sure to have a nice background and look at the effect! Be sure to have a nice background and look at the effect! Resizing an image does not change the memory size or the bandwidth Resizing an image does not change the memory size or the bandwidth Only compression reduces that amount! Only compression reduces that amount!

13. More attributes for Tables CELLPADDING: adds space between the item in the cell and the cell frame CELLPADDING: adds space between the item in the cell and the cell frame CELLSPACING: adds space between cells CELLSPACING: adds space between cells BORDERCOLOR: change the color of the border BORDERCOLOR: change the color of the border Try this table: <TR><TD> </TR></TABLE>

14. Practice Tables 1. Make a table with two columns 2. Set the width to 40% 3. Add a thick border in green 4. Add additional space by modifying the CELLPADDING and CELLSPACING attributes 5. Observe the results

15. More practice: What tables offer…. Feel free to add your creativity. Use tables to: Change the layout of a page Change the layout of a page Add margins around your text Add margins around your text Create a small gallery of images that have clickable regions Create a small gallery of images that have clickable regions Create 2 columns display Create 2 columns display Override busy background pattern with regions of solid colors Override busy background pattern with regions of solid colors Add 3-D frames around a picture Add 3-D frames around a picture Center an image no matter how the browser is resized. Center an image no matter how the browser is resized. Display table of numbers Display table of numbers