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

2. Using HTML editors There are several user-friendly HTML editors. There are several user-friendly HTML editors. WYSIWYG editor (What You See Is What You Get) WYSIWYG editor (What You See Is What You Get) WYSIWYG editors are usually easier to use and don't require a knowledge of HTML WYSIWYG editors are usually easier to use and don't require a knowledge of HTML use WYSIWYG editors when pressed. use WYSIWYG editors when pressed. TEXT editor. TEXT editor. Text editors are usually faster to edit HTML changes, Text editors are usually faster to edit HTML changes, they don't add in unexpected tags they don't add in unexpected tags they can easily support new formats like XML. they can easily support new formats like XML. Attention: Web pages that work well with one browser, do not necessarily work well another browser!

3. Review: URL A URL (Uniform Resource Locator) is the global address of documents and other resources that are on the Web. A URL (Uniform Resource Locator) is the global address of documents and other resources that are on the Web. It is formed by a IP address or the domain name and the protocol (ex. http) that should be used to access the page It is formed by a IP address or the domain name and the protocol (ex. http) that should be used to access the pageEx: http://www.cnn.com http://www.cnn.com http://www.cnn.com ftp://cs.kent.edu/~aguercio/index.html ftp://cs.kent.edu/~aguercio/index.html ftp://cs.kent.edu/~aguercio/index.html

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

5. 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 Example: Example: Department of Computer Science Department of Computer Science

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

7. Advantages of Relative URL Choose either absolute or relative URL but…. Choose either absolute or relative URL but…. Relative URL is best because it makes your page portable. Relative 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 to a new server: Moving a page to a new server: If your links were absolute URLs, any link that uses the old server full address needs to be reedited with the new domain server address If your links were absolute URLs, any link that uses the old server full address needs to be reedited with the new domain server address 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.

8. Named Anchors Anchors are very useful to reach parts of the same web page. in long pages that do not fit the screen. Anchors are very useful to reach parts of the same web page. in long pages that do not fit the screen. Ex. Titles of sections can be anchors that can be reached from an index of content at the top of the web page. Ex. Titles of sections can be anchors that can be reached from an index of content at the top of the web page. Anchor Syntax: A tag with the attribute NAME=“name” Anchor Syntax: A tag with the attribute NAME=“name” To reach the anchor, a tag with the link’s name is used To reach the anchor, a tag with the link’s name is used Example: The index of content and the anchors <UL> First Thing First Thing Second Thing Second Thing </UL>… First Section First Section … Second Section Second Section

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

10. Tables Tables contain rows and columns Tables contain rows and columns table row table row table data table dataSyntax:<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

11. Rows and Columns Each … creates a row Each … creates a row Each … creates a cell (i.e. a column) Each … creates a cell (i.e. a column) Many columns can be obtained by creating many cells in the same row Many columns can be obtained by creating many cells in the same row<TABLE><TR><TD> insert here the content of a table cell </TD></TR><TR><TD> </TD></TR></TABLE> The code creates a table with 2 rows and 1 column The code creates a table with 2 rows and 1 column

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

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

14. 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> </td></tr></table>

15. What tables offer…. Feel free to add your creativity! Use tables to: Make the layout of a page more appealing Make the layout of a page more appealing 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

16. Practice with 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

17. The div tag The tag defines a division or a section in an HTML document. The tag defines a division or a section in an HTML document. The tag is often used to group block-elements to format them with styles. The tag is often used to group block-elements to format them with styles. The div element is very often used with CSS to layout a web page. The div element is very often used with CSS to layout a web page. This is a header This is a paragraph. This is a header This is a paragraph. </div>

18. Use of class in Use of class in My first styled page Google Yahoo Ask Dogpile Google Yahoo Ask Dogpile

19. Add style…. My first styled page body { padding-left: 11em; font-family: Georgia, "Times New Roman", serif; color: purple; background-color: #d8da3d } ul.navbar { position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, sans-serif }

20. A CSS file You can use a different style for each class! You can use a different style for each class! @charset "utf-8"; /* CSS Document */ body { padding-left: 11em; font-family: Georgia,Times, serif; color: purple; background-color: #affeaf } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: realtive; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } ul.navbar1 li { background: green; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black }

21. Where to learn more? http://www.w3schools.com/