web site design development lists and links in html
TRANSCRIPT
Web Site Design Development
Lists and Links In HTML
What Was Covered Last Week
bull What we will talk about1 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 document3 New paragraphs Horizontal rule and header 4 Validating HTML code
Review - HTML Overview - Example
lthtmlgtltheadgtlttitlegt Mypage lttitlegtltheadgtltbodygt Welcome to Website Design Stuff you write here becomes your HTML documentltbodygtlthtmlgt
Indicates startand 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 ltbodygt hellip ltbodygt 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 amp Display
1 From your PC goto Start-gtrun enter notepad2 Enter your tags and document3 From notepad window goto file-gtsaveas 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 file-gtopen page -gt choose file (Find
the file you just saved and display it)
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Competency Objectives1 Can center text using the ltdivgt tag2 Lists - Can create a ltulgt and ltolgt list with attributes3 Links
1 Can create a link to another page outside of current web page2 Can create a lsquorelativersquo link to another page within current web
page
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Using ltDIVgt To Align Text
bull We have seen can use ltp align=rightgt to align text bull Can also use ltDIVgt ltDIVgt
bull Stands for divide or division Block elementbull Can create logical divisions of the text you are formatting and treat them as 1 group bull It really does nothing unless you use arguments bull Often use align attribute to with ltDIVgt to adjust text to left right or center
Note a subtle different between using ltpgt VS ltdivgt to align text bull ltp align=rightgt will give an extra line break bull ltdiv align=rightgt will not
Note2 We will see ltdivgt againbull Will see div again in various places eg CSS
Competency AlertYou need to
know this
Using ltDIVgt To Align Text
For example
My Home Page
ltdiv align=centergt This is a test of center adjusted text ltdivgt ltdiv align=lsquorightrsquogt Of Coarse this is a Right sample ltdivgt ltbrgt By the way I can use a ltigtalign=leftltigt but I dont need it because the default is to put the text to the extreme left anyway ltP align=lsquorightrsquogt Still there is a difference between using ltigt paragraph ltigt and ltigt div ltigt tags ltpgt
This text will be aligned right
This text will be centered
Text will be aligned left by default
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
What Was Covered Last Week
bull What we will talk about1 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 document3 New paragraphs Horizontal rule and header 4 Validating HTML code
Review - HTML Overview - Example
lthtmlgtltheadgtlttitlegt Mypage lttitlegtltheadgtltbodygt Welcome to Website Design Stuff you write here becomes your HTML documentltbodygtlthtmlgt
Indicates startand 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 ltbodygt hellip ltbodygt 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 amp Display
1 From your PC goto Start-gtrun enter notepad2 Enter your tags and document3 From notepad window goto file-gtsaveas 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 file-gtopen page -gt choose file (Find
the file you just saved and display it)
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Competency Objectives1 Can center text using the ltdivgt tag2 Lists - Can create a ltulgt and ltolgt list with attributes3 Links
1 Can create a link to another page outside of current web page2 Can create a lsquorelativersquo link to another page within current web
page
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Using ltDIVgt To Align Text
bull We have seen can use ltp align=rightgt to align text bull Can also use ltDIVgt ltDIVgt
bull Stands for divide or division Block elementbull Can create logical divisions of the text you are formatting and treat them as 1 group bull It really does nothing unless you use arguments bull Often use align attribute to with ltDIVgt to adjust text to left right or center
Note a subtle different between using ltpgt VS ltdivgt to align text bull ltp align=rightgt will give an extra line break bull ltdiv align=rightgt will not
Note2 We will see ltdivgt againbull Will see div again in various places eg CSS
Competency AlertYou need to
know this
Using ltDIVgt To Align Text
For example
My Home Page
ltdiv align=centergt This is a test of center adjusted text ltdivgt ltdiv align=lsquorightrsquogt Of Coarse this is a Right sample ltdivgt ltbrgt By the way I can use a ltigtalign=leftltigt but I dont need it because the default is to put the text to the extreme left anyway ltP align=lsquorightrsquogt Still there is a difference between using ltigt paragraph ltigt and ltigt div ltigt tags ltpgt
This text will be aligned right
This text will be centered
Text will be aligned left by default
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Review - HTML Overview - Example
lthtmlgtltheadgtlttitlegt Mypage lttitlegtltheadgtltbodygt Welcome to Website Design Stuff you write here becomes your HTML documentltbodygtlthtmlgt
Indicates startand 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 ltbodygt hellip ltbodygt 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 amp Display
1 From your PC goto Start-gtrun enter notepad2 Enter your tags and document3 From notepad window goto file-gtsaveas 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 file-gtopen page -gt choose file (Find
the file you just saved and display it)
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Competency Objectives1 Can center text using the ltdivgt tag2 Lists - Can create a ltulgt and ltolgt list with attributes3 Links
1 Can create a link to another page outside of current web page2 Can create a lsquorelativersquo link to another page within current web
page
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Using ltDIVgt To Align Text
bull We have seen can use ltp align=rightgt to align text bull Can also use ltDIVgt ltDIVgt
bull Stands for divide or division Block elementbull Can create logical divisions of the text you are formatting and treat them as 1 group bull It really does nothing unless you use arguments bull Often use align attribute to with ltDIVgt to adjust text to left right or center
Note a subtle different between using ltpgt VS ltdivgt to align text bull ltp align=rightgt will give an extra line break bull ltdiv align=rightgt will not
Note2 We will see ltdivgt againbull Will see div again in various places eg CSS
Competency AlertYou need to
know this
Using ltDIVgt To Align Text
For example
My Home Page
ltdiv align=centergt This is a test of center adjusted text ltdivgt ltdiv align=lsquorightrsquogt Of Coarse this is a Right sample ltdivgt ltbrgt By the way I can use a ltigtalign=leftltigt but I dont need it because the default is to put the text to the extreme left anyway ltP align=lsquorightrsquogt Still there is a difference between using ltigt paragraph ltigt and ltigt div ltigt tags ltpgt
This text will be aligned right
This text will be centered
Text will be aligned left by default
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Review - Steps To Create HTML Document amp Display
1 From your PC goto Start-gtrun enter notepad2 Enter your tags and document3 From notepad window goto file-gtsaveas 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 file-gtopen page -gt choose file (Find
the file you just saved and display it)
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Competency Objectives1 Can center text using the ltdivgt tag2 Lists - Can create a ltulgt and ltolgt list with attributes3 Links
1 Can create a link to another page outside of current web page2 Can create a lsquorelativersquo link to another page within current web
page
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Using ltDIVgt To Align Text
bull We have seen can use ltp align=rightgt to align text bull Can also use ltDIVgt ltDIVgt
bull Stands for divide or division Block elementbull Can create logical divisions of the text you are formatting and treat them as 1 group bull It really does nothing unless you use arguments bull Often use align attribute to with ltDIVgt to adjust text to left right or center
Note a subtle different between using ltpgt VS ltdivgt to align text bull ltp align=rightgt will give an extra line break bull ltdiv align=rightgt will not
Note2 We will see ltdivgt againbull Will see div again in various places eg CSS
Competency AlertYou need to
know this
Using ltDIVgt To Align Text
For example
My Home Page
ltdiv align=centergt This is a test of center adjusted text ltdivgt ltdiv align=lsquorightrsquogt Of Coarse this is a Right sample ltdivgt ltbrgt By the way I can use a ltigtalign=leftltigt but I dont need it because the default is to put the text to the extreme left anyway ltP align=lsquorightrsquogt Still there is a difference between using ltigt paragraph ltigt and ltigt div ltigt tags ltpgt
This text will be aligned right
This text will be centered
Text will be aligned left by default
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Competency Objectives1 Can center text using the ltdivgt tag2 Lists - Can create a ltulgt and ltolgt list with attributes3 Links
1 Can create a link to another page outside of current web page2 Can create a lsquorelativersquo link to another page within current web
page
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Using ltDIVgt To Align Text
bull We have seen can use ltp align=rightgt to align text bull Can also use ltDIVgt ltDIVgt
bull Stands for divide or division Block elementbull Can create logical divisions of the text you are formatting and treat them as 1 group bull It really does nothing unless you use arguments bull Often use align attribute to with ltDIVgt to adjust text to left right or center
Note a subtle different between using ltpgt VS ltdivgt to align text bull ltp align=rightgt will give an extra line break bull ltdiv align=rightgt will not
Note2 We will see ltdivgt againbull Will see div again in various places eg CSS
Competency AlertYou need to
know this
Using ltDIVgt To Align Text
For example
My Home Page
ltdiv align=centergt This is a test of center adjusted text ltdivgt ltdiv align=lsquorightrsquogt Of Coarse this is a Right sample ltdivgt ltbrgt By the way I can use a ltigtalign=leftltigt but I dont need it because the default is to put the text to the extreme left anyway ltP align=lsquorightrsquogt Still there is a difference between using ltigt paragraph ltigt and ltigt div ltigt tags ltpgt
This text will be aligned right
This text will be centered
Text will be aligned left by default
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Competency Objectives1 Can center text using the ltdivgt tag2 Lists - Can create a ltulgt and ltolgt list with attributes3 Links
1 Can create a link to another page outside of current web page2 Can create a lsquorelativersquo link to another page within current web
page
Competency AlertYou need to
know this
Common Problem Area
People seem to forget this
Using ltDIVgt To Align Text
bull We have seen can use ltp align=rightgt to align text bull Can also use ltDIVgt ltDIVgt
bull Stands for divide or division Block elementbull Can create logical divisions of the text you are formatting and treat them as 1 group bull It really does nothing unless you use arguments bull Often use align attribute to with ltDIVgt to adjust text to left right or center
Note a subtle different between using ltpgt VS ltdivgt to align text bull ltp align=rightgt will give an extra line break bull ltdiv align=rightgt will not
Note2 We will see ltdivgt againbull Will see div again in various places eg CSS
Competency AlertYou need to
know this
Using ltDIVgt To Align Text
For example
My Home Page
ltdiv align=centergt This is a test of center adjusted text ltdivgt ltdiv align=lsquorightrsquogt Of Coarse this is a Right sample ltdivgt ltbrgt By the way I can use a ltigtalign=leftltigt but I dont need it because the default is to put the text to the extreme left anyway ltP align=lsquorightrsquogt Still there is a difference between using ltigt paragraph ltigt and ltigt div ltigt tags ltpgt
This text will be aligned right
This text will be centered
Text will be aligned left by default
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Using ltDIVgt To Align Text
bull We have seen can use ltp align=rightgt to align text bull Can also use ltDIVgt ltDIVgt
bull Stands for divide or division Block elementbull Can create logical divisions of the text you are formatting and treat them as 1 group bull It really does nothing unless you use arguments bull Often use align attribute to with ltDIVgt to adjust text to left right or center
Note a subtle different between using ltpgt VS ltdivgt to align text bull ltp align=rightgt will give an extra line break bull ltdiv align=rightgt will not
Note2 We will see ltdivgt againbull Will see div again in various places eg CSS
Competency AlertYou need to
know this
Using ltDIVgt To Align Text
For example
My Home Page
ltdiv align=centergt This is a test of center adjusted text ltdivgt ltdiv align=lsquorightrsquogt Of Coarse this is a Right sample ltdivgt ltbrgt By the way I can use a ltigtalign=leftltigt but I dont need it because the default is to put the text to the extreme left anyway ltP align=lsquorightrsquogt Still there is a difference between using ltigt paragraph ltigt and ltigt div ltigt tags ltpgt
This text will be aligned right
This text will be centered
Text will be aligned left by default
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Using ltDIVgt To Align Text
For example
My Home Page
ltdiv align=centergt This is a test of center adjusted text ltdivgt ltdiv align=lsquorightrsquogt Of Coarse this is a Right sample ltdivgt ltbrgt By the way I can use a ltigtalign=leftltigt but I dont need it because the default is to put the text to the extreme left anyway ltP align=lsquorightrsquogt Still there is a difference between using ltigt paragraph ltigt and ltigt div ltigt tags ltpgt
This text will be aligned right
This text will be centered
Text will be aligned left by default
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
List Management 101
bull HTML supports 3 different types bull Ordered lists - numbered
1 Baseball2 Hotdgs3 Apple Pie
bull Unordered lists - bullet lists bull Baseballbull Hotdogsbull Apple Pie
bull Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Ordered Lists
bull This is an ordered list 1 This is the first element 2 This is the second line 3 This is the third line
bull To format above use the ltOLgt ltLIgt tagsltOLgt ltOLgt --- Marks the start and end of the ordered list section ltLIgt ltLIgt - Indicates start and end of each ordered list item
Note How do you remember these OL ndash stands for Ordered ListLI ndash stands for List Item
Competency AlertYou need to
know this
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Ordered Lists
bull For example ltolgt ltligt This is the first element ltligt ltligt This is the second line ltligtltligt This is the third line
ltligtltolgt
bull Would look like1 This is the first element 2 This is the second line 3 This is the third line
List item has start ltLIgt amp ltLIgt
List is containedin ltOLgt amp ltOLgt
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
An Ordered List Example
1 lthtmlgt2 ltheadgt lttitlegt An Ordered List Example lttitlegt 3 ltheadgt ltbodygt
4 Some different endings for Lord of the Rings
5 ltOLgt 6 ltligt7 Gollum gets the ring and defeats Saron himself8 ltligt ltligt 9 Frodo jumps in the lava with the ring10 ltligt ltligt11 Sauron gets the ring and there is no more middle earth12 ltlIgt13 ltolgt ltbodygt lthtmlgt
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Attributes For Ordered Lists
bull Using Type = Eg
ltOL TYPE=lsquo1rsquogt For 123 Ordering ltOL TYPE=lsquoArsquogt hellip For ABC Ordering ltOL TYPE=lsquoarsquogt For abc ordering ltOL TYPE=lsquoIrsquogt For Roman Numeral (Eg
I II III IV) ltOL TYPE=lsquoirsquogt For small Roman
Numerals (Eg i ii iii iv)
Competency AlertYou need to
know this
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Unordered Lists
bull Unordered Lists - These would be bullet lists For example
middot This is the first element middot This is the second line middot This is the third line
bull To format above use the following tags bull ltULgt ltULgt Starts amp ends the ordered list section bull ltLIgt hellip ltLIgt - Starts amp ends each individual item
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Unordered Lists
bull For example ltULgt
ltLIgt This is the first element ltLIgt ltLIgtThis is the second line ltLIgtltLIgt This is the third line ltLIgt ltULgt
bull Would create the followingmiddot This is the first element middot This is the second line middot This is the third line
List is contained in ltULgt amp ltULgt
List item has start ltLIgt amp ltLIgt
Competency AlertYou need to
know this
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Unordered Lists Use An Attribute TYPE
bull Eg ltUL TYPE=lsquoDISCrsquogt Creates a small disc list ltUL TYPE=lsquoCIRCLErsquogt Solid circles ltUL TYPE=lsquoSQUARErsquogt Solid Squares
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
An Unordered List Example
1 lthtmlgt
2 ltheadgt lttitlegt John Adams lttitlegt
3 ltheadgt ltbodygt
4 Some information about John Adams
5 ltul type=squaregt
6 ltligt
7 He was a moral man and was against slavery
8 ltligt ltligt
9 He was friends with Tom Jefferson and then bitter political enemies and then friends again
10ltligt ltligt
11He and Tomas Jefferson died on the same day
12ltlIgt
13ltulgt ltbodygt lthtmlgt
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Definition Lists
middot 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 PieWhat Sara Lee now makes instead of Mom
middot ltDLgt ltDLgt A Definition List middot ltDTgt hellip ltDTgt A Definition Term as part of a definition list
- Level 1 term middot ltDDgt hellip ltDDgt - A Definition to Definition term - level 2
term
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
An Unordered Example1 lthtmlgt
2 ltheadgt lttitlegt An Ordered List Example lttitlegt
3 ltheadgt ltbodygt
4 A few definitions
5 ltdlgt
6 ltdtgt
7 Baseballltdtgt
8 ltddgt A only played well in NY ltddgt
9 ltdtgt
10Hotdogs ltdtgt
11ltddgt A substance resembling meat ltddgt
12ltdtgtApple Pie ltdtgt
13ltddgt What Sara Lee now makes instead of Mom ltddgt
14ltdlgt
15ltbodygt
16lthtmlgt
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Lists Within Lists
bull Lists Within Lists bull You can put lists within lists if you wish creating an outline feel
for your text
1 Baseball White Sox Cubs
2 Football Bears
bull Corresponding HTML CodeltolgtltligtBaseballgtltligt ltULgtltLIgtWhiteSoxltLIgt ltLIgtCubsltLIgt ltULgtltLIgt FootballltLIgt ltULgtltLIgtBearsltLIgt ltULgtltolgt
Bullet list wI numblist
Separate Bullet list
1 Major Number list
Note It greatly helpsto indent to keep things straight
Competency AlertYou need to
know this
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
lthtmlgtltheadgtlttitlegt A Roman Numeral Example lttitlegt ltheadgtltbodygtAttention attention attentionltul type=squaregtltligt Chicago Professional Sports Teamsltligtltolgt ltligt Baseball ltligt ltol type=agt ltligt Cubs ltilgt ltligt White Sox ltilgt ltolgt ltligt Footballltilgt ltol type=agt ltligt Bears (well sort-of professional)ltilgt ltolgt ltligt basketballltilgt ltol type=agt ltligt Bulls (Well that is a stretch) ltligt ltolgt
ltolgt ltulgt ltbodygt
Again It helps to indent when using lists within lists
Lists Within Lists ndash Things can get confusing quickly
Common Problem Area
People seem to forget this
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
HTML Hyperlinks
bull Hyperlinks are the means which HTML lets you branch from 1 file to another
bull You can link to any file that includes but not limited tobull wav files bull picture files (gif jpg etc) bull powerpoint files bull Xls (excel files)bull html files bull Or even a link to preaddressed letter (mailto dlashindelible-learningcom)
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Anatomy of a Hyperlink
bull HTML hyperlinks have the following format ltA HREF=ldquoWeb Addressrdquogt Click Here ltAgt
Anchor tag can be used for links
HREF attribute specifies Internet address of file to link to
The ldquoclickable textrdquo
lta href=httpwwwrivastudiocnp=17 gt Home Page ltAgt
Clickable text displayed on page
Page to load when link is clicked
Competency AlertYou need to
know this
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
A Link Example 1 ltHTMLgtltHEADgtltTITLEgtRivaStudio ltTITLEgtltHEADgt
2 ltBODYgt
3 You can visit this course at the lta href=httpwwwrivastudiocngt Indelible Website ltagt
4 YOu can also see lots of Disney Stuff at the lta href=ldquohttpwwww3schoolcomcnrdquogt w3schoolltagt website
5 ltBODYgt
6 ltHTMLgt
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Note A common link problem
bull Sometimes people forget the http in an absolute address
lta href= httpwwwrivastudiocnp=17 gt Home Page ltAgt
bull DONrsquoT DO THIS It will look for a file called httpwwwrivastudiocnp=17 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
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Linking to non-HTML Files
bull Linking to non-html files if no different than linking to HTML files
1 ltHTMLgtltHEADgtltTITLEgtDePaul Link ltTITLEgtltHEADgt
2 ltBODYgt The picture can be found at
3 ltA HREF=linkpnggt
4 this link ltAgt
5 ltBODYgt
6 ltHTMLgt
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Specify links that are portable
bull Specifying complete URL works well but what happens when hellip
bull You need to change domain names or userids bull For example move site from wwwecnueducn to wwwamazoncom
bull For example suppose had a site with 3 files myhomehtml moreinfohtml and faqhtml)
bull myhomehtml has link to moreinfohtml and faqhtmlbull moreinfohtml and faqhtml each link back to myhomehtml
[public_html]
myhomehtmlmoreinfohtmlfaqhtml
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Specify links that are portable
bull If change domain name would have to change 2 lines in myhomehtml and 1 each in moreinfohtml and faqhtml
lta href=httpwwwrivastudiocnmoreinfohtmlgt more info ltagt
lta href=httpwwwrivastudiocnfaqhtmlgtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=httpwwwrivastudiocnmyhomehtmlgt
click for home ltagt
Frequently asked questions Go back home lta href=httpwwwrivastudiocnmyhomehtmlgt click for home
ltagt
faqhtml
myhomehtml
moreinfohtml
All 4 links in 3 different files must change if I move my site
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Soln Use relative Internet addresses
bull Absolute addresses ndash Specify the complete address of the file to link to
bull Eg ltA href=ldquohttpwwwrivastudiocnfilehtmlrdquogt
The file is hereltAgt
bull Relative Address ndash Specify just file name (relative to current site)
bull Eg lta href=rdquofilehtmlrdquogt The file is hereltAgt
bull So can now move directories wo link changes hellip
Note leave off http and domain name
Competency AlertYou need to
know this
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
So Use Relative Addresses
bull So these pages can change directories or domains wo changes
lta href=ldquomoreinfohtmlrdquogt more info ltagt
lta href=ldquofaqhtmlrdquogtFrequently Asked Questions ltagt
This document contains more information Here is lots of stuff hellipGo back home lta href=ldquomyhomehtmlrdquogt
click for home ltagt
Frequently asked questions Go back home
lta href=ldquomyhomehtmlrdquogt click for home ltagt
faqhtml
myhomehtml
moreinfohtml
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Using Relative Links
bull So relative links work well when file to connect to are in the same directories hellip
bull But how to link from myfilehtml to hwhtml
[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
indexhtml and myfilehtml are in public_html
hwhtml is in homework
Note Link from indexhtml to myfilehtmllta href=ldquomyfilehtmlrdquogt my personal fileltagt
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Using Relative Links between directories
bull How link from myfilehtml to hwhtml[public_html]
indexhtml
myfilehtml
[homework]
hwhtml
bull Precede the file to link to by a forward slash (lsquorsquo) and directory name
lta href=ldquohomeworkhwhtmlrdquogt my homework ltagt
indexhtml and myfilehtml are in public_html
hwhtml 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 AlertYou need to
know this
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Linking up hellip to the parent directory
bull To link to file in a parent directory (a directory above your current)
bull Use to access the parent directory Eg[public_html]
indexhtml
[homework]
hwhtml
bull Link from hwhtml to back indexhtml
lta href=ldquoindexhtmlrdquogt my home page ltagt
indexhtml is in public_html
hwhtml is in homework
Go u p 1 level to parent
Get this file in parent directory
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Relative Link Examples
bull Assume the following file structure[public_html]indexhtml [labs] [homework]lab1html hw1html
hw2html bull What is the URL of hw2html if web server wwwecnueducn
bull How would you link from hw2html to lab1html
bull How would you link from hw2html to indexhtml
Lab1html is in ldquolabsrdquo
hw1html and hw2html is in homework
httpwwwecnueducnhomeworkhw2html
lta href=ldquolabslab1htmlrdquogt Lab1 ltagt
lta href=ldquoindexhtmlrdquogt Lab1 ltagt
Competency AlertYou need to
know this
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Objectives
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Linking to a pre-addressed email
bull A Link that when clicked opens a page automatically to a pre-addressed mail form
bull General FormatltA href=ldquomailtoemailaddressgt Click here ltAgt
bull For examplelta href=mailtohzhouecnueducngt email me ltAgt
Email address
Text to display
Note This construct is not often used in on Web sitesWhy It opens to a window using the users defined default email client If the userrsquos definition is wrong no email gets sent
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Summary
bull A short section on aligning text bull right center and left with ltdivgt
bull Creating ordered bullet and definition listsbull Creating Lists within lists
bull Creating hyperlinksbull Creating regular linksbull Using relative addressesbull Linking email addresses
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
A Hyperlink Review What file does each of the following load
1 ltA href=ldquohttpwwwrivastudiocnpicturessimplehtmlrdquogt Click Here ltAgt
2 ltA href=ldquohttpwwwrivastudiocnpicturesrdquogt pick one of these out ltAgt
3 ltA href=ldquohttpwwwrivastudiocnrdquogt home ltAgt
4 lta href=ldquomyfilexlsgt Here are the results ltagt
5 lta href=ldquosamandfrodojpgrdquogt The boys ltagt
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Lab 2 - Hands-on Exercise
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
One Possible Solution1lthtmlgt
2ltheadgt lttitlegt A few of my favorite things lttitlegt
3ltheadgt ltbodygt
4Top three things Frodo should have done with the ring
5ltol start=Igt
6ltligt
7Not taken it from Bilbo ltligt
8ltligt
9Sold it on e-bay ltligt
10ltligt
11Bury it back in the lake
12ltulgt
13ltligt
14After all it was there for hundreds of years
15ltligt
16ltligt
17I dont think Sauron could swim since he was a fireball ltligt ltulgt
18ltligt
19lthtmlgt
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-
Lab 2 ndash b Create an HTML page that looks like
Put link to each homeworkAnd lab work for course
When click link automaticallyopen your completed lab
You will need to continue to add to this page to link in each assignment as you finish it
- Web Site Design Development
- What Was Covered Last Week
- Slide 3
- Review - Steps To Create HTML Document amp Display
- Objectives
- Competency Objectives
- Using ltDIVgt To Align Text
- Using ltDIVgt To Align Text (2)
- List Management 101
- Ordered Lists
- Ordered Lists (2)
- An Ordered List Example
- Attributes For Ordered Lists
- Unordered Lists
- Unordered Lists (2)
- Unordered Lists Use An Attribute TYPE
- An Unordered List Example
- Definition Lists
- An Unordered Example
- Lists Within Lists
- Slide 21
- HTML Hyperlinks
- Anatomy of a Hyperlink
- A Link Example
- Note A common link problem
- Linking to non-HTML Files
- Specify links that are portable
- Specify links that are portable (2)
- Soln Use relative Internet addresses
- So Use Relative Addresses
- Using Relative Links
- Using Relative Links between directories
- Linking up hellip to the parent directory
- Relative Link Examples
- Objectives (2)
- Linking to a pre-addressed email
- Summary
- A Hyperlink Review
- Lab 2 - Hands-on Exercise
- One Possible Solution
- Lab 2 ndash b Create an HTML page that looks like
-