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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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