2. David Lash Web Site Design Development SNL 262 Lists and Links In HTML Instructor: David A. Lash

3. David Lash 2 What We Covered Last Week 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. David Lash 3 First A few items … zAlthough either upper case or lower case works, standard prefers lower case. (E.g., My title ) zYou can find html validator and ws_ftp at download.com (search for “html validator lite” and “ws_ftp”) zA few “warnings” worth repeating … yDon’t save filenames with spaces (myfile.html NOT my file.html) yDon’t use capitals in filenames (myfile.html NOT MyFile.HTML). yAlways publish files to webserver inside public_html directory.

5. David Lash 4 A Little More On FTP … First review Don’t worry profile name Enter your machine name. students.depaul.edu Uncheck anonymous Enter your email handle and password Click OK when everything is filled in

6. David Lash 5 A Little more on FTP… After connecting you can use these buttons Use to make a directory on web server. For example may need to make a public_html folder. Use to rename a file. It is a way to get rid of capital letters or spaces in filenames right on webserver Remember to check this area for status on transfers or other operations you do. If hit mkdir, then can enter the name of new folder on fileserver

7. David Lash 6 What we will cover … today zMore on aligning text right, center and left zCreating ordered, bullet and definition lists zCreating hyperlinks yCreating regular links yUsing relative addresses yLinking email addresses

8. David Lash 7 Using To Align Text z We have seen can use to align text. zCan also use... y Stands for divide or division. yCan create logical divisions of the text you are formatting and treat them as 1 group. yIt really does nothing unless you use arguments. yOften 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

9. David Lash 8 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 This text will be aligned left by default http://condor.depaul.edu/~dlash/extra/Webpage/examples/divtag.html http://24hourHTMLcafe.com/hour5/bohemia.htm

10. David Lash 9 List Management 101 zHTML supports 3 different types yOrdered lists - numbered, 1. Baseball 2. Hotdgs 3. Apple Pie yUnordered lists - bullet lists, –Baseball –Hotdogs –Apple Pie yDefinition 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

11. David Lash 10 Ordered Lists zThis 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. How do you remember these? OL – stands for ordered list LI – stands for List Item

12. David Lash 11 Ordered Lists zFor example: This is the first element This is the second line This is the third line zWould 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 &

13. David Lash 12 Attributes For Ordered Lists zUsing 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) zFor Example, see this Roman Numeral Example, see also this http://condor.depaul.edu/~dlash/extra/Webpage/examples/ABCExample.htmlRoman Numeral Example, http://condor.depaul.edu/~dlash/extra/Webpage/examples/ABCExample.html

14. David Lash 13 Unordered Lists zUnordered Lists - These would be bullet lists, For example  This is the first element  This is the second line  This is the third line zTo format above use the following tags y... Starts & ends the ordered list section y … - Starts & ends each individual item.

15. David Lash 14 Unordered Lists zFor example, This is the first element This is the second line This is the third line zWould 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 &

16. David Lash 15 Unordered Lists Use An Attribute TYPE= zE.g.,......... Creates a small disc list........ Solid circles......... Solid Squares zFor Example, See this Unordered List Example.Unordered List Example.

17. David Lash 16 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  See (http://www.depaul.edu/~dlash/website/stuff.html ) & http://www.depaul.edu/~dlash/website/DD_lists_wi_lists_B.htmlhttp://www.depaul.edu/~dlash/website/stuff.html http://www.depaul.edu/~dlash/website/DD_lists_wi_lists_B.html

18. David Lash 17 Lists Within Lists zLists Within Lists yYou can put lists within lists if you wish creating an outline feel for your text. 1. Baseball –White Sox –Cubs 2. Football –Bears zCorresponding 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.

19. David Lash 18 Lists Within Lists zThis can get confusing quick … A Roman Numeral Example Attention, attention, attention: Chicago Professional Sports Teams Baseball Cubs White Sox Football Bears? (well sort-of prefessional) basketball Bulls? (Well that is a stretch) (See example at http://condor.depaul.edu/~dlash/extra/Webpage/examples/listwithin.html ) http://condor.depaul.edu/~dlash/extra/Webpage/examples/listwithin.html It helps to indent when using lists within lists

20. David Lash 19 More Lists Within Lists zCorresponding HTML Code: y1 http://www.depaul.edu/~dlash/extra/Webpage/exa mples/05sampleError.html http://www.depaul.edu/~dlash/extra/Webpage/exa mples/05sampleError.html y2http://www.depaul.edu/~dlash/extra/Webpage /examples/05sampleError2.htmlhttp://www.depaul.edu/~dlash/extra/Webpage /examples/05sampleError2.html y3http://www.depaul.edu/~dlash/extra/Webpage /examples/05sample.htmlhttp://www.depaul.edu/~dlash/extra/Webpage /examples/05sample.html

21. David Lash 20 What we will cover zMore on aligning text right, center and left zCreating ordered, bullet and definition lists zCreating hyperlinks yCreating regular links yUsing relative addresses yLinking email addresses

22. David Lash 21 What Are Links In HTML? z Hyperlinks are the means which HTML lets you branch from 1 file to another. zYou can link to any file, that includes but not limited to: ywav files, ypicture files (gif, jpg, etc), ypowerpoint files, yxcl (excel files) yhtml files.

23. David Lash 22 What Are Links In HTML? zHyperlinks are used to link to yAnother web page, excel file, power point, gif image yOr even a link to preaddressed letter (mailto: dlash@condor.depaul.edu)

24. David Lash 23 General Link Format zHTML hyperlinks have the following format: Click Here Anchor tag can be used for links Internet address of file to link to The “clickable text”

25. David Lash 24 Link Examples Home Page xClickable text displayed on page xPage to load when link is clicked Example from book http://www.24hourhtmlcafe.com/hour3/cams.htm

26. David Lash 25 Link Examples If you like to goto to my favorite page then Here is Disney Fun Otherwise you need to Click here What is display on Web Page (as link) Page to load when link is clicked http://www.depaul.edu/~dlash/extra/Webpage/examples/03SAMPLE.html

27. David Lash 26 Linking to non-HTML Files zLinking to non-html files if no different than linking to HTML files DePaul Link DePaul Logo (http://www.depaul.edu/~dlash/website/depaul.gif) http://www.depaul.edu/~dlash/extra/Webpage/examples/03links.html

28. David Lash 27 Specify links that are portable zSpecifying complete URL works well but what happens when … yYou need to change domain names or userids? xFor 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

29. David Lash 28 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.

30. David Lash 29 So use relative addresses zAbsolute addresses – Specify the complete address of the file to link to: yE.g., The file is here http://www.depaul.edu/~dlash/file.html zRelative Address – Specify just file name (relative to current site.) yE.g., The file is here file.html zSo for example ….Can now move directories w/o link changes … Note leave off http:// and domain name

31. David Lash 30 So Use Relative Addresses zSo for example ….Can use relative addresses AND move directories w/o link 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

32. David Lash 31 Using Relative Links zSo relative links work well when file to connect to are in the same directories …  For example, assume your create a directory called homework under public_html [public_html] index.html \ myfile.html \ \ [homework] hw.html Link from index.html to myfile.html: my personal file zBut how to link from myfile.html to hw.html? index.html and myfile.html is in public_html hw.html is in homework

33. David Lash 32 Using Relative Links  How link from myfile.html to hw.html? [public_html] index.html \ myfile.html \ \ [homework] hw.html Just include the directory name in the URL. So inside my.file.html can link to hw.html by the following: my homework index.html and myfile.html is in public_html hw.html is in homework Goto this directory Get this file

34. David Lash 33 Ummm… but how link back up? zSuppose you want to access a in a directory above your current directory: yUse.. To access the parent directory.  For example, [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 hw.html Go up one level Get this file in parent directory

35. David Lash 34 Relative Specification of Sub-Folder zOK assume the following file structure [public_html] index.html / \ [labs] [homework] lab1.html hw1.html hw2.html zWhat is the URL of hw2.html if web server students.depaul.edu zHow would you link from hw2.html to lab1.html? zHow would you link from hw2.html to index.html? Lab1.html is in “labs” hw1.html and hw2.html is in homework students.depaul.edu/~jsmith/homework/hw2.html Lab1

36. David Lash 35 Linking to a pre-addressed email zA Link that when clicked, opens a page automatically to a pre-addressed mail form zGeneral Format: Click here zFor example: email me! Email address Text to display

37. David Lash 36 Some Miscellaneous Points What file does each of the following load? y Click Here y pick one of these out y home.

38. David Lash 37 What this section was about... zCreating HTML links yCreating absolute links x my home page yCreating relative links x my FAQ Page yCreating email links x Mail me please

39. David Lash 38 Quick review of publishing zReview using FTP … zReview creating public_html zReview making home page y By default on our webserver (students.depaul.edu) your home page is whatever is in the file index.html). ySo http://students.depaul.edu/~jsmith IS THE SAME THING AS http://student.depaul.edu/~jsmith/index.htmlhttp://students.depaul.edu/~jsmith http://student.depaul.edu/~jsmith/index.html ySo put homepage stuff into index.html.

40. David Lash 39 Review of homework zLook at homework file at yhttp://condor.depaul.edu/~dlash/website/Lab2.htmlhttp://condor.depaul.edu/~dlash/website/Lab2.html zIt is asking you create a homepage and link in your homeworks.