HTML 58.51A

LINKING & LISTS

Linking to local files

• <a href="file.html">name of destination</a>

• <a>....</a> anchor tag

• HREF attribute. This attribute identifies the location of the link and stands for "Hyper reference".

• <a href="file.html">....</a>

Naming the Link

• The message you type between the <a> and </a> tags will be displayed on your page as underlined and colored text (default is blue).

• The filename you identify in a link is case-sensitive!

• I recommend you create all file names using lower case.

More on naming the Link

• If I have a file which needs 2 words in the name, I use one of these two formats.* filename.html * file-name.html

Navigation system

• <a href="syllabus.html">Syllabus</a> | • <a href="homework.html">Homework • Assignments</a> | • <a href="reading.html">Reading

Assignments</a> |• <a href="grades.html">Grades</a> |

• <a href="instructor.html">Instructor</a> | Links

NN

Linking to Local Files in Different Folders/Directories

NN

Linking to Local Files in Different Folders/Directories

• These type of links are known as Relative Links• Going forward:• <a href=”level2/filename.html">List Two</a> • <a href=”level2/level3/filename.html">List

Three</a>• Going back• <a href=”../index.html">Home</a>• <a href=”../../index.html">Home</a>

N

Linking to WWW

• These type of links are known as Absolute links.

• <a href="http://www.tnc.org/">The Nature Conservancy </a>

• You can also create this type of link for ones inside your own site, but it will take longer to work.

• <a href="http://www.tnc.org/” target=“_blank”>

N

Links with in the same page(Jump Links/Anchors)

• Jump Links are used for creating a link inside a web page.

• First you create the position of the link:<a name="principal">Principal's Message</a>

• Then you create the link :<a href="#principal">Principal's Message</a>

• Using a jump link coming from another page:

• <a href=”news.html#principal"> Principal's Message</a>

Email Links (Mailto:)

• Also Known as "Contact us”• <a href="mailto:”?">

• <a href="mailto:help@sudadesign.com">Contact us</a>

• Or Contact us at:

• <a href="mailto:help@sudadesign.com"> help@sudadesign.com </a>

• If the visitor's browser has not been configured to send mail, the mailto will not work.

Creating List

• There are three different types of list:1 Unordered2 Ordered3 Definition

Unordered List

• Also Known as a bullet list

• <ul>I like Green because:

• <li>That's the color of trees. </li>

• <li>It's the color of money</li>

• </ul>

• Disc (default), Square & Circle

Ordered List

• <ol>

• <li>this is one. (default)</li>

• <li>this is two.</li>

• <li>this is three</li>

• </ol>

• Arabic (default), letter and Roman

• Starting attributes

Definition List

• Indents without symbols

• <dl>This is a definition list

• <dd>First item </dd>

• </dl>

Homework

• 3 relative links (inside your web site) [10 points], 3 www links (outside of the web site) [10 points], 2 jump links (inside the same page) [10 points], 1 mailto links [10 points], 2 lists (one ordered & one unordered) [20 points]

• Next week will be FTP’ing homework

• Fetch for MAC

• WS_FTP for Windows

• In the Lab