2. 1 Web Site Design Development Lists and Links In HTML

3. 2 What We Covered Last Time What we talked about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document (FTP) 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

4. 3 Instructor Info l David Lash l Email: dlash@condor.depaul.edudlash@condor.depaul.edu l Phone: 630.370.9313 l Call if any questions...

5. 4 The Course Requirements l Homework - 30% - Lab exercises based on lecture material. »E.g., create a web page that has an HTML table. l Midterm Test - 20% - Multiple guess 25-30 questions about the 6 th week. l Major project - 50% - Select a project topic early. Send email to dlash@condor.depaul.edu with topic (or approve during class).dlash@condor.depaul.edu »Page must have 5 sub-pages an be of ‘reasonable’ size. –Don’t select anything too hard requiring databases, or advanced graphics –Try to select something useful (e.g., a club site, church site or hobby) –More details next week.

6. 5 How to do well in this class l Download and review class PowerPoint lectures. (They will be on class web site (http://condor.depaul.edu/~dlash)http://condor.depaul.edu/~dlash l Do homework on time (don’t let it pile up) l Ask questions when not understand. l Use lab time when needed »Immediately after lecture, will go to the lab, ask questions there is needed.

7. 6 Using the course home page l Course homepage: http//condor.depaul.edu Any announcements will be posted here. E.g., A homework assignment problem/clarification. On-line syllabus Links to book websites Links to get books on-line Talk more about these next week

8. 7 More on course web page As material becomes ready will change status here Click link to download power point slides Home work assignments are at end of PowerPoint slides.

9. 8 One more item... l In order to get space on the DePaul Web Server. 1.Contact the DePaul O’hare Lab Assistant (outside of lab) 2.Ask to activate your email account. 3.Do this even if you ‘have’ an email account (all students have depaul email accounts) (Note: Its routine practice for them to suspend inactive accounts). You will need to do this to publish your pages on DePaul's web server. You won’t need this for a couple weeks BUT DON’T DELAY. It can take up to a week to set up!!!!

10. 9 Details on Final Project... l Can find details at: http://condor.depaul.edu/~dlash/website/ FinalWebDesignProj.htm Talk to or email about what you are going to do.

11. 10 What Was Covered Last Week l What we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. New paragraphs, Horizontal rule, and header. 4. Validating HTML code

12. 11 Review - HTML Overview - Example Mypage Welcome to Website Design. Stuff you write here becomes your HTML document. Indicates start and end of HTML document The header section of document This title appears in the upper left hand corner of browser. Not in the body of the document Inside the … tags is the main portion of your document. Note how new lines in file are ignored in web page display (because HTML did not indicate line break)

13. 12 Review - Steps To Create HTML Document & Display 1. From your PC goto S tart->run enter n otepad 2. Enter your tags and document 3. From notepad window, goto f ile->saveas 4. Enter a filename with HTML suffix (SECOND WARNING!! No spaces or caps please!). 5. Start Netscape (or IE, or Firefox). 6. From Netscape, goto f ile->open page -> choose file. (Find the file you just saved and display it!) Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

14. 13 Objectives l A short section on aligning text »right, center and left with l Creating ordered, bullet and definition lists »Creating Lists within lists l Creating hyperlinks »Creating regular links »Using relative addresses »Linking email addresses

15. 14 Competency Objectives 1. Can center text using the tag 2. Lists - Can create a and list with attributes 3. Links: 1.Can create a link to another page outside of current web page 2.Can create a ‘relative’ link to another page within current web page Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

16. 15 Using To Align Text l We have seen can use to align text. l Can also use... » Stands for divide or division. »Can create logical divisions of the text you are formatting and treat them as 1 group. »It really does nothing unless you use arguments. »Often use align attribute to with to adjust text to left, right or center. Note: a subtle different between using VS to align text. will give an extra line break. will not Note2: We will see again. Will see div again in various places, e.g., CSS Competency Alert: You need to know this !

17. 16 Using To Align Text For example, My Home Page This is a test of center adjusted text. Of Coarse, this is a Right sample By the way I can use a align=left but I don't need it because the default is to put the text to the extreme left anyway. Still there is a difference between using paragraph and div tags. This text will be aligned right This text will be centered Text will be aligned left by default

18. 17 Objectives l A short section on aligning text »right, center and left with l Creating ordered, bullet and definition lists »Creating Lists within lists l Creating hyperlinks »Creating regular links »Using relative addresses »Linking email addresses

19. 18 List Management 101 l HTML supports 3 different types »Ordered lists - numbered, 1. Baseball 2. Hotdgs 3. Apple Pie »Unordered lists - bullet lists, »Baseball »Hotdogs »Apple Pie »Definition Lists - indented lists without numbers or symbols Baseball A only played well in NY Hotdogs A substance resembling meat Apple Pie What Sara Lee now makes instead of Mom

20. 19 Ordered Lists l This is an ordered list: 1. This is the first element 2. This is the second line 3. This is the third line To format above use the, tags... --- Marks the start and end of the ordered list section... - Indicates start and end of each ordered list item. Note: How do you remember these? OL – stands for ordered list LI – stands for List Item Competency Alert: You need to know this !

21. 20 Ordered Lists l For example: This is the first element This is the second line This is the third line l Would look like: 1. This is the first element 2. This is the second line 3. This is the third line List item has start & List is contained in &

22. 21 An Ordered List Example... 1. 2. An Ordered List Example 3. 4.Some different endings for Lord of the Rings 5. 6. 7.Gollum gets the ring and defeats Saron himself! 8. 9.Frodo jumps in the lava with the ring 10. 11.Sauron gets the ring and there is no more middle earth 12. 13.

23. 22 Attributes For Ordered Lists l Using Type = E.g.,......... For 1,2,3 Ordering.....… For A,B,C Ordering......... For a,b,c ordering........... For Roman Numeral (E.g, I, II, III, IV)........... For small Roman Numerals (E.g., i, ii, iii, iv) Competency Alert: You need to know this !

24. 23 Unordered Lists l Unordered Lists - These would be bullet lists, For example  This is the first element  This is the second line  This is the third line l To format above use the following tags »... Starts & ends the ordered list section » … - Starts & ends each individual item.

25. 24 Unordered Lists l For example, This is the first element This is the second line This is the third line l Would create the following  This is the first element  This is the second line  This is the third line List is contained in & List item has start & Competency Alert: You need to know this !

26. 25 Unordered Lists Use An Attribute TYPE= E.g.,......... Creates a small disc list........ Solid circles......... Solid Squares

27. 26 An Unordered List Example... 1. 2. John Adams 3. 4. Some information about John Adams 5. 6. 7. He was a moral man and was against slavery. 8. 9. He was friends with Tom Jefferson and then bitter political enemies and then friends again. 10. 11. He and Tomas Jefferson died on the same day! 12. 13.

28. 27 Definition Lists  Indented lists without any numbers or symbol in front of each item Baseball A only played well in NY Hotdogs A substance resembling meat Apple Pie What Sara Lee now makes instead of Mom ... A definition list  … A definition term as part of a definition list - Level 1 term  … - A Definition to definition term - level 2 term

29. 28 An Unordered Example 1. 2. An Ordered List Example 3. 4. A few definitions 5. 6. 7. Baseball 8. A only played well in NY 9. 10. Hotdogs 11. A substance resembling meat 12. Apple Pie 13. What Sara Lee now makes instead of Mom 14. 15. 16.

30. 29 Lists Within Lists l Lists Within Lists »You can put lists within lists if you wish creating an outline feel for your text. 1. Baseball  White Sox  Cubs 2. Football  Bears l Corresponding HTML Code: Baseball> WhiteSox Cubs Football Bears Bullet list w/I numb list Separate Bullet list 1 Major Number list Note: It greatly helps to indent to keep things straight. Competency Alert: You need to know this !

31. 30 A Roman Numeral Example Attention, attention, attention: Chicago Professional Sports Teams Baseball Cubs White Sox Football Bears? (well sort-of professional) basketball Bulls? (Well that is a stretch) Again It helps to indent when using lists within lists Lists Within Lists – Things can get confusing quickly Common Problem Area! People seem to forget this

32. 31 Objectives l A short section on aligning text »right, center and left with l Creating ordered, bullet and definition lists »Creating Lists within lists l Creating hyperlinks »Creating regular links »Using relative addresses »Linking email addresses

33. 32 HTML Hyperlinks l Hyperlinks are the means which HTML lets you branch from 1 file to another. l You can link to any file, that includes but not limited to: »wav files, »picture files (gif, jpg, etc), »powerpoint files, »xcl (excel files) »html files. »Or even a link to preaddressed letter (mailto: dlash@indelible- learning.com)

34. 33 Anatomy of a Hyperlink l HTML hyperlinks have the following format: Click Here Anchor tag can be used for links HREF attribute specifies Internet address of file to link to The “clickable text” Home Page Clickable text displayed on page Page to load when link is clicked Competency Alert: You need to know this !

35. 34 A Link Example... 1. DePaul Link 2. 3. You can visit this course at the Indelible Website 4. YOu can also see lots of Disney Stuff at the Disney website. 5. 6.

36. 35 Note A common link problem l Sometimes, people forget the http:// in an absolute address... Home Page l DON’T DO THIS. It will look for a file called www.depaul.edu/~dlash/index.html in the current directory structure (which of coarse will not be there) Common Problem Area! People seem to forget this

37. 36 Linking to non-HTML Files l Linking to non-html files if no different than linking to HTML files 1. DePaul Link 2. The picture can be found at 3. 4. this link 5. 6.

38. 37 Specify links that are portable l Specifying complete URL works well but what happens when … »You need to change domain names or userids? –For example, move site from www.depaul.edu to www.aol.com?www.depaul.eduwww.aol.com »For example, suppose had a site with 3 files: myhome.html, moreinfo.html, and faq.html ) –myhome.html has link to moreinfo.html and faq.html –moreinfo.html and faq.html each link back to myhome.html [public_html] myhome.html moreinfo.html faq.html

39. 38 Specify links that are portable If change domain name would have to change 2 lines in myhome.html and 1 each in moreinfo.html and faq.html. http://www.depaul.edu/~dlash/moreinfo.html more info http://www.depaul.edu/~dlash/faq.html Frequently Asked Questions This document contains more information. Here is lots of stuff … Go back home http://www.depaul.edu/~dlash/myhome..html click for home. Frequently asked questions... Go back home click for home.http://www.depaul.edu/~dlash/myhome..html faq.html myhome.html moreinfo.html All 4 links in 3 different files must change if I move my site.

40. 39 Soln: Use relative Internet addresses l Absolute addresses – Specify the complete address of the file to link to: »E.g., http://www.depaul.edu/~dlash/file.html The file is here l Relative Address – Specify just file name (relative to current site.) »E.g., The file is here file.html l So can now move directories w/o link changes … Note leave off http:// and domain name Competency Alert: You need to know this !

41. 40 So Use Relative Addresses l So these pages can change directories or domains w/o changes moreinfo.html more info faq.html Frequently Asked Questions This document contains more information. Here is lots of stuff … Go back home myhome..html click for home. Frequently asked questions... Go back home click for home.myhome..html faq.html myhome.html moreinfo.html

42. 41 Using Relative Links l So relative links work well when file to connect to are in the same directories … »But how to link from myfile.html to hw.html? [public_html] index.html \ myfile.html \ \ [homework] hw.html index.html and myfile.html are in public_html hw.html is in homework Note: Link from index.html to myfile.html: my personal file

43. 42 Using Relative Links between directories... How link from myfile.html to hw.html? [public_html] index.html \ myfile.html \ \ [homework] hw.html l Precede the file to link to by a forward slash (‘/’) and directory name: my homework index.html and myfile.html are in public_html hw.html is in homework Link to this file that is in this directory Note: the forward slash is used on both UNIX a MircoSoft web servers Competency Alert: You need to know this !

44. 43 Linking up … to the parent directory l To link to file in a parent directory (a directory above your current): »Use.. to access the parent directory. E.g., [public_html] index.html \ \ [homework] hw.html Link from hw.html to back index.html: my home page index.html is in public_html hw.html is in homework Go u p 1 level to parent Get this file in parent directory

45. 44 Relative Link Examples... l Assume the following file structure [public_html] index.html / \ [labs] [homework] lab1.html hw1.html hw2.html l What is the URL of hw2.html if web server students.depaul.edu l How would you link from hw2.html to lab1.html? l How would you link from hw2.html to index.html? Lab1.html is in “labs” hw1.html and hw2.html is in homework http://students.depaul.edu/~jsmith/homework/hw2.html Lab1 Competency Alert: You need to know this !

46. 45 Objectives l A short section on aligning text »right, center and left with l Creating ordered, bullet and definition lists »Creating Lists within lists l Creating hyperlinks »Creating regular links »Using relative addresses »Linking email addresses

47. 46 Linking to a pre-addressed email l A Link that when clicked, opens a page automatically to a pre-addressed mail form l General Format: Click here l For example: email me! Email address Text to display Note: This construct is not often used in on Web sites. Why? It opens to a window using the users defined default email client. If the user’s definition is wrong, no email gets sent!

48. 47 Summary l A short section on aligning text »right, center and left with l Creating ordered, bullet and definition lists »Creating Lists within lists l Creating hyperlinks »Creating regular links »Using relative addresses »Linking email addresses

49. 48 A Hyperlink Review... What file does each of the following load? 1. Click Here 2. pick one of these out 3. home. 4. Here are the results 5. The boys

50. 49 Lab 2 - Hands-on Exercise

51. 50 One Possible Solution 1. 2. A few of my favorite things 3. 4. Top three things Frodo should have done with the ring. 5. 6. 7. Not taken it from Bilbo 8. 9. Sold it on e-bay 10. 11. Bury it back in the lake 12. 13. 14. After all it was there for hundreds of years 15. 16. 17. I don't think Sauron could swim since he was a fireball. 18. 19.

52. 51 Lab 2 – b Create an HTML page that looks like: Put link to each homework And lab work for course. When click link automatically open your completed lab. You will need to continue to add to this page to link in each assignment as you finish it.