david lash web site design development snl 262 lists and links in html instructor: david a. lash

David Lash

Web Site Design Development

SNL 262

Lists and Links In HTML

Instructor: David A. Lash

2David Lash

What We Covered Last Week What we talked about

1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page

- What is HTML - Basic HTML document - How to publish your basic document (FTP)3. Understanding basics of HTML document4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

3David Lash

First A few items …

Although either upper case or lower case works, standard prefers lower case.

(E.g., <html><head><title>My title </title> ) You can find html validator and ws_ftp at

download.com (search for “html validator lite” and “ws_ftp”)

A few “warnings” worth repeating … Don’t save filenames with spaces (myfile.html NOT

my file.html) Don’t use capitals in filenames (myfile.html NOT

MyFile.HTML). Always publish files to webserver inside public_html

directory.

4David Lash

A Little More On FTP … First review

Don’t worry profile name

Enter your machine name. students.depaul.edu

Uncheck anonymous

Enter your email handle and password

Click OK when everything is filled in

5David Lash

A Little more on FTP… After connectingyou can use these

buttons

Use to make a directory on web server. For example may need to make a public_html folder.

Use to rename a file. It is a way to get rid of capital letters or spaces in filenames right on webserver

Use to rename a file. It is a way to get rid of capital letters or spaces in filenames right on webserver

Remember to check this area for status on transfers or other operations you do.

If hit mkdir, then can enter the name of new folder on fileserver

6David Lash

What we will cover … today

More on aligning text right, center and left

Creating ordered, bullet and definition lists

Creating hyperlinks Creating regular links Using relative addresses Linking email addresses

7David Lash

Using <DIV> To Align Text

We have seen can use <p align=right> to align text.

Can also use <DIV> ... </DIV> Stands for divide or division. Can create logical divisions of the text you are

formatting and treat them as 1 group. It really does nothing unless you use arguments. Often use align attribute to with <DIV> to adjust

text to left, right or center.

Note: a subtle different between using <p> VS <div> to align text. • <p align=right> will give an extra line break. •<div align=right> will not

8David Lash

Using <DIV> To Align Text For example,

<div align=“center”> My Home Page

</div>

<div align=center> This is a test of center adjusted text. </div> <div align=right> Of Coarse, this is a Right sample </div> <br> By the way I can use a <i>align=left</i> but I don't need it because the default is to put the text to the extreme left anyway. <P align=right> Still there is a difference between using <i> paragraph </i> and <i> div </i> tags. </p>

This text willbe aligned right

This text willbe centered

This text will be aligned left by default

http://condor.depaul.edu/~dlash/extra/Webpage/examples/divtag.html

http://24hourHTMLcafe.com/hour5/bohemia.htm

9David Lash

List Management 101 HTML supports 3 different types

Ordered lists - numbered, 1. Baseball2. Hotdgs3. Apple Pie

Unordered lists - bullet lists, – Baseball– Hotdogs– Apple Pie

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

10David Lash

Ordered Lists

This is an ordered list: 1. This is the first element 2. This is the second line 3. This is the third line

To format above use the <OL>, <LI> tags<OL> ... </OL> --- Marks the start and end of the ordered list section <LI> ... </LI> - Indicates start and end of each ordered list item.

How do you remember these? OL – stands for ordered listLI – stands for List Item

11David Lash

Ordered ListsFor example: <ol>

<li> This is the first element </li> <li> This is the second line </li><li> This is the third line

</li></ol>

Would look like:1. This is the first element 2. This is the second line 3. This is the third line

List item has start <LI> & </LI>

List is containedin <OL> & </OL>

12David Lash

Attributes For Ordered Lists

Using Type = E.g.,

<OL TYPE=1> ......... For 1,2,3 Ordering <OL TYPE=A> .....… For A,B,C Ordering <OL TYPE=a> ......... For a,b,c ordering <OL TYPE=I> ........... For Roman Numeral (E.g,

I, II, III, IV) <OL TYPE=i> ........... For small Roman Numerals (E.g., i, ii, iii, iv)

For Example, see this Roman Numeral Example, see also this http://condor.depaul.edu/~dlash/extra/Webpage/examples/ABCExample.html

13David Lash

Unordered Lists

Unordered Lists - These would be bullet lists,

For example This is the first element This is the second line This is the third line

To format above use the following tags <UL> ... </UL> Starts & ends the ordered list

section <LI> … </LI> - Starts & ends each individual item.

14David Lash

Unordered Lists

For example, <UL>

<LI> This is the first element </LI> <LI>This is the second line </LI><LI> This is the third line </LI> </UL>

Would create the following This is the first element This is the second line This is the third line

List is containedin <UL> & </UL>

List item has start <LI> & </LI>

15David Lash

Unordered Lists Use An Attribute TYPE=

E.g., <UL TYPE=DISC> ......... Creates a small disc list <UL TYPE=CIRCLE> ........ Solid circles <UL TYPE=SQUARE> ......... Solid Squares

For Example, See this Unordered List Example.

16David Lash

Definition Lists Indented lists without any numbers or symbol in front of each item

Baseball A only played well in NY

Hotdogs A substance resembling meat

Apple PieWhat Sara Lee now makes instead of Mom

<DL> ... </DL> A definition list <DT> … </DT> A definition term as part of a definition list - Level

1 term <DD> … <DD> - A Definition to definition term - level 2 term See (http://www.depaul.edu/~dlash/website/stuff.html) &

http://www.depaul.edu/~dlash/website/DD_lists_wi_lists_B.html

17David Lash

Lists Within Lists Lists Within Lists

You can put lists within lists if you wish creating an outline feel for your text.

1. Baseball –White Sox–Cubs

2. Football –Bears

Corresponding HTML Code:<ol><li>Baseball></li> <UL><LI>WhiteSox</LI> <LI>Cubs</LI> </UL><LI> Football</LI> <UL><LI>Bears</LI> </UL></ol>

Bullet list w/I numblist

Separate Bullet list

1 Major Numberlist

Note: It greatly helpsto indent to keep things straight.

18David Lash

Lists Within Lists This can get confusing quick … <html><head><title> A Roman Numeral Example </title> </head><body>Attention, attention, attention:<ul type=square><li> Chicago Professional Sports Teams</li><ol> <li> Baseball </li> <ol type=a> <li> Cubs </il> <li> White Sox </il> </ol> <li> Football</il> <ol type=a> <li> Bears? (well sort-of prefessional)</il> </ol> <li> basketball</il> <ol type=a> <li> Bulls? (Well that is a stretch) </li> </ol>

</ol> </ul> </body> (See example at http://condor.depaul.edu/~dlash/extra/Webpage/examples/listwithin.html)

It helps to indent when using lists within lists

19David Lash

More Lists Within Lists

Corresponding HTML Code: 1

http://www.depaul.edu/~dlash/extra/Webpage/examples/05sampleError.html

2http://www.depaul.edu/~dlash/extra/Webpage/examples/05sampleError2.html

3http://www.depaul.edu/~dlash/extra/Webpage/examples/05sample.html

20David Lash

What we will cover

More on aligning text right, center and left

Creating ordered, bullet and definition lists

Creating hyperlinks Creating regular links Using relative addresses Linking email addresses

21David Lash

What Are Links In HTML? Hyperlinks are the means which HTML lets you branch

from 1 file to another.

You can link to any file, that includes but not limited to: wav files, picture files (gif, jpg, etc), powerpoint files, xcl (excel files) html files.

22David Lash

What Are Links In HTML? Hyperlinks are used to link to

Another web page, excel file, power point, gif image

Or even a link to preaddressed letter (mailto: [email protected])

23David Lash

General Link Format

HTML hyperlinks have the following format:

<A HREF=“Web Address”> Click Here </A>

Anchor tag can be used for links

Internet address of file to link to

The “clickable text”

24David Lash

Link Examples

<a href="http://www.depaul.edu/~dlash/index.html"> Home Page

</A>

Clickable text displayed on pagePage to load when link is clicked

Example from book

http://www.24hourhtmlcafe.com/hour3/cams.htm

25David Lash

Link Examples

If you like to goto to my favorite page then <A HREF="http://www.disney.com"> Here is Disney Fun</A> Otherwise you need to <A HREF="http://www.depaul.edu”> Click here</A>

What is display onWeb Page(as link)

Page to load when link is clicked

http://www.depaul.edu/~dlash/extra/Webpage/examples/03SAMPLE.html

26David Lash

Linking to non-HTML Files

Linking to non-html files if no different than linking to HTML files

<HTML><HEAD><TITLE>DePaul Link </TITLE></HEAD><BODY><A HREF=" http://www.depaul.edu/~dlash/website/depaul.gif "> DePaul Logo</A></BODY></HTML>

(http://www.depaul.edu/~dlash/website/depaul.gif)

http://www.depaul.edu/~dlash/extra/Webpage/examples/03links.html

27David Lash

Specify links that are portableSpecifying complete URL works well but what

happens when … You need to change domain names or userids?

For example, move site from www.depaul.edu to www.aol.com?

For example, suppose had a site with 3 files: myhome.html, moreinfo.html, and faq.html)

myhome.html has link to moreinfo.html and faq.htmlmoreinfo.html and faq.html each link back to myhome.html

[public_html]myhome.htmlmoreinfo.htmlfaq.html

28David Lash

Specify links that are portable If change domain name would have to

change 2 lines in myhome.html and 1 each in moreinfo.html and faq.html.

<a href=http://www.depaul.edu/~dlash/moreinfo.html> more info </a>

<a href=http://www.depaul.edu/~dlash/faq.html>Frequently Asked Questions </a>

This document contains more information. Here is lots of stuff …Go back home <a href=http://www.depaul.edu/~dlash/myhome..html>

click for home </a>.

Frequently asked questions. . . Go back home <a href=http://www.depaul.edu/~dlash/myhome..html> click for home

</a>.

faq.html

myhome.html

moreinfo.html

All 4 links in 3 different files must change if I move my site.

29David Lash

So use relative addresses Absolute addresses – Specify the complete address

of the file to link to: E.g., <A href=http://www.depaul.edu/~dlash/file.html> The file is here</A>

Relative Address – Specify just file name (relative to current site.) E.g., <a href=” file.html”> The file is here</A>

So for example ….Can now move directories w/o link changes …

Note leave off http:// and domain name

30David Lash

So Use Relative AddressesSo for example ….Can use relative

addresses AND move directories w/o link changes …

<a href=“moreinfo.html”> more info </a>

<a href=“faq.html”>Frequently Asked Questions </a>

This document contains more information. Here is lots of stuff …Go back home <a href=“myhome..html”>

click for home </a>.

Frequently asked questions. . . Go back home

<a href=“myhome..html”> click for home </a>.

faq.html

myhome.html

moreinfo.html

31David Lash

Using Relative Links

So relative links work well when file to connect to are in the same directories … For example, assume your create a directory called homework under public_html[public_html]

index.html \

myfile.html \

\

[homework]

hw.html

Link from index.html to myfile.html:<a href=“myfile.html”> my personal file</a>

But how to link from myfile.html to hw.html?

index.html and myfile.html is in public_html

hw.html is in homework

32David Lash

Using Relative Links

How link from myfile.html to hw.html?[public_html]

index.html \

myfile.html \

\

[homework]

hw.html

Just include the directory name in the URL. So inside my.file.html can link to hw.html by the following:

<a href=“homework/hw.html”> my homework </a>

index.html and myfile.html is in public_html

hw.html is in homework

Goto this directory

Get this file

33David Lash

Ummm… but how link back up?

Suppose you want to access a in a directory above your current directory: Use .. To access the parent directory. For example,

[public_html]

index.html \

\

[homework]

hw.html

Link from hw.html to back index.html:

<a href=“../index.html”> my home page </a>

index.html is in public_html

hw.html is in hw.html

Go up one levelGet this file in parent directory

34David Lash

Relative Specification of Sub-Folder

OK assume the following file structure[public_html]

index.html

/ \

[labs] [homework]

lab1.html hw1.html

hw2.html What is the URL of hw2.html if web server students.depaul.edu

How would you link from hw2.html to lab1.html?

How would you link from hw2.html to index.html?

Lab1.html is in “labs”

hw1.html and hw2.html is in homework

students.depaul.edu/~jsmith/homework/hw2.html

<a href=“../labs/lab1.html”> Lab1 </a>

<a href=“../index.html”> Lab1 </a>

35David Lash

Linking to a pre-addressed email

A Link that when clicked, opens a page automatically to a pre-addressed mail form

General Format:<A href=“mailto:emailaddress"> Click here </A>

For example:<a href="mailto: [email protected]"> email me! </A>

Email address

Text todisplay

36David Lash

Some Miscellaneous Points

What file does each of the following load?

<A href=“http://www.depaul.edu/~dlash/pictures/simple.html”> Click Here </A>

<A href=“http://www.depaul.edu/~dlash/pictures/”> pick one of these out </A>

<A href=“http://www.depaul.edu/~dlash”> home. </A>

37David Lash

What this section was about ...

Creating HTML links Creating absolute links

<A href=“http://www.depaul.edu/~dlash/myfile.html”> my home page </A>

Creating relative links <A href=“myfaq.html”> my FAQ Page </A>

Creating email links <A href=“mailto:[email protected]"> Mail me please </A>

38David Lash

Quick review of publishing

Review using FTP …Review creating public_htmlReview making home page

By default on our webserver (students.depaul.edu) your home page is whatever is in the file index.html).

So http://students.depaul.edu/~jsmith IS THE SAME THING AS http://student.depaul.edu/~jsmith/index.html

So put homepage stuff into index.html.

39David Lash

Review of homework

Look at homework file at http://condor.depaul.edu/~dlash/website/Lab2.html

It is asking you create a homepage and link in your homeworks.

david lash web site design development snl 262 lists and links in html instructor: david a. lash

Documents