Web Site Design Development Lists and Links In HTML

What Was Covered Last Week 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

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)

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

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

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

Using To Align Text We have seen can use to align text. Can also use... Stands for divide or division. Block element. 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 !

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

List Management 101 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

Ordered Lists 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 !

Ordered Lists For example: This is the first element This is the second line This is the third line 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 &

An Ordered List Example An Ordered List Example 3. 4.Some different endings for Lord of the Rings Gollum gets the ring and defeats Saron himself! 8. 9.Frodo jumps in the lava with the ring Sauron gets the ring and there is no more middle earth

Attributes For Ordered Lists 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 !

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

Unordered Lists For example, This is the first element This is the second line This is the third line 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 !

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

An Unordered List Example John Adams 3. 4.Some information about John Adams He was a moral man and was against slavery He was friends with Tom Jefferson and then bitter political enemies and then friends again He and Tomas Jefferson died on the same day!

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

An Unordered Example An Ordered List Example 3. 4.A few definitions Baseball 8. A only played well in NY Hotdogs 11. A substance resembling meat 12. Apple Pie 13. What Sara Lee now makes instead of Mom

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

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

HTML Hyperlinks Hyperlinks are the means which HTML lets you branch from 1 file to another. You can link to any file, that includes but not limited to: wav files, picture files (gif, jpg, etc), powerpoint files, Xls (excel files) html files. Or even a link to preaddressed letter (mailto:

Anatomy of a Hyperlink 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 !

A Link Example RivaStudio 2. 3.You can visit this course at the Indelible Website 4.YOu can also see lots of Disney Stuff at the w3school website

Note A common link problem Sometimes, people forget the in an absolute address... Home Page DON’T DO THIS. It will look for a file called in the current directory structure (which of coarse will not be there) Common Problem Area! People seem to forget this

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

Specify links that are portable Specifying complete URL works well but what happens when … You need to change domain names or userids? For example, move site from to 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

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. more info Frequently Asked Questions This document contains more information. Here is lots of stuff … Go back home click for home. Frequently asked questions... Go back home click for home. faq.html myhome.html moreinfo.html All 4 links in 3 different files must change if I move my site.

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

So Use Relative Addresses 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

Using Relative Links 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

Using Relative Links between directories... How link from myfile.html to hw.html? [public_html] index.html \ myfile.html \ \ [homework] hw.html 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 !

Linking up … to the parent directory 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

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

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

Linking to a pre-addressed A Link that when clicked, opens a page automatically to a pre-addressed mail form General Format: Click here For example: me! 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 client. If the user’s definition is wrong, no gets sent!

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

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

Lab 2 - Hands-on Exercise

One Possible Solution A few of my favorite things 3. 4.Top three things Frodo should have done with the ring Not taken it from Bilbo 8. 9.Sold it on e-bay Bury it back in the lake After all it was there for hundreds of years I don't think Sauron could swim since he was a fireball

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.