HTML Lists & Llinks

WEB ENGINEERING

Subject Teacher: Nisa Soomro [email protected]://sites.google.com/site/neisa1207/

mailto:[email protected]

OUTLINE Lists

Ordered List Un-Ordered List Description List

Adding Links

Adding Images

HTML LISTHumans are natural list makers, and HTML provides elements for marking

up three types of lists:

Unordered lists. Collections of items that appear in no particular order.

Ordered lists. Lists in which the sequence of the items is important.

Description lists. Lists that consist of name and value pairs, including but not limited to terms and definitions.

UN-ORDERED LIST<ul>

<li><a href="">Serif</a></li>

<li><a href="">Sans-serif</a></li>

<li><a href="">Script</a></li>

<li><a href="">Display</a></li>

<li><a href="">Dingbats</a></li>

</ul>

<ul>...</ul> Unordered list

<li>...</li> List item within an unordered list

ORDERED LIST<ol>






</ol>

ORDERED LIST<ol type=“i”>






</ol>

ORDERED LIST<ol type=“I”>






</ol>

ORDERED LIST<ol type=“a”>






</ol>

ORDERED LIST<ol type=“A”>






</ol>

ORDERED LIST<ol type=“A” start=“3”>






</ol>

ORDERED LIST<ol start=“3”>






</ol>

UN-ORDERED LIST<ul type=“circle”>






</ul>

UN-ORDERED LIST<ul type=“square”>






</ul>

UN-ORDERED LIST<ul type=“disc”>






</ul>

By default un-ordered list is the type of DISC

DESCRIPTION LISTSDescription lists are used for any type of name/value pairs, such as terms and their definitions, questions and answers, or other types of terms and their associated information. Their structure is a bit different from the other two lists that we just discussed.

<dl>...</dl> A description list

<dt>...</dt> A name, such as a term or label

<dd>...</dd> A value, such as a description or definition

DESCRIPTION LISTS

dl = description Listsdt = data term dd = data definition

DESCRIPTION LISTS<dl><dt>Linotype</dt><dd>Line-casting allowed type to be selected, used, then recirculatedinto the machine automatically.</dd><dt>Photocomposition</dt><dd>Typefaces are stored on film then projected onto photo-sensitivepaper. Lenses adjust the size of the type.</dd><dt>Digital type</dt><dd>Digital typefaces store the outline of the font in shape. </dd></dl>

DESCRIPTION LISTS

;

ADDING LINKS

Anchor SyntaxThe simplified structure of the anchor element is:

<a href="url"> linked text or element </a>

<a href="http://www.google.com">Google</a>

ADDING LINKSTo make an image a link, simply put the img element in the anchor element:

<a href="http://www.google">

<img src=“gogo.gif" alt=“GoogleLogo">

</a>

ADDING LINKSall graphical browsers display linked text as blue and underlined by default.

Visited links generally display in purple. Users can change these colors in their browser references, and, of course, you can change the appearance of links for your sites using style sheets.

ADDING LINKS

The href AttributeThe href (hypertext reference) attribute provides the address of the page or resource (its URL) to the browser. The URL must always appear in quotation marks. Most of the time you’ll point to other HTML documents; however, you can also point to other web resources, such as images, audio, and video files.

ADDING LINKS

The href Attribute

There are two ways to specify the URL:Absolute URLs provide the full URL for the document.

Relative URLs describe the pathname to a file relative to the current document.

ADDING LINKS

LINKING TO PAGES ON THE WEBa link to a page that you’ve found on the Web. This is known as an “external” link because it is going to a page outside of your own server or site. To make an external link, you need to provide the absolute URL, beginning with http:// (the protocol). This tells the browser, “Go out on the Web and get the following document.”

<a href="http://www.foodnetwork.com">The Food Network</a>

LINKING WITHIN YOUR OWN SITEA large portion of the linking you’ll do will be between pages of your own site: from the home page to section pages, from section pages to content pages, and so on. In these cases, you can use a relative URL—one that calls for a page on your own server. Without “http://”, the browser looks on the current server for the linked document. A pathname, the notation used to point to a particular file or directory, tells the browser where to find the file. A relative pathname describes how to get to the linked document. starting from the location of the current document.

SITE STRUCTURE

IMPORTANT PATHNAME DON’TSWhen you are writing relative pathnames, it is critical that you follow these rules to avoid common errors: Don’t use backslashes (\). Web URL pathnames use forward slashes (/) only.

Don’t start with the drive name (D:, C:, etc.). Although your pages will link to each other successfully while they are on your own computer, once they are uploaded to the web server, the drive name is irrelevant and will break your links.

Don’t start with file://. This also indicates that the file is local and causes the link to break when it is on the server.

LINKING WITHIN A DIRECTORYThe most straightforward relative URL points to another file within the same directory. When link to a file in the same directory, you only need to provide the name of the file (its filename). When the URL is a single filename, the server looks in the current directory (that is, the directory that contains the document with the link) for the file.

LINKING WITHIN A DIRECTORYA link to just the filename indicates the linked file isin the same directory as the current document.

In this example, I want to make a link from my home page (index.html) to a general information page (about.html). Both files are in the same directory (jenskitchen). So from my home page, I can make a link to the information page by simply providing its filename in the URL.

<a href="about.html">About the site...</a>

LINKING WITHIN A DIRECTORY

LINKING TO A LOWER DIRECTORY

LINKING TO A LOWER DIRECTORYGetting back to our example, my recipe files are stored in a subdirectory called recipes. If you want to make a link from index.html to a file in the recipes directory called salmon.html. The pathname in the URL tells the browser to look in the current directory for a directory called recipes, and then look for the file salmon.html

LINKING TO A LOWER DIRECTORY

LINKING TO A HIGHER DIRECTORY

LINKING TO A HIGHER DIRECTORYLet’s start by making a link from salmon.html back to the home page (index.html). Because salmon.html is in the recipes subdirectory, we need to back up a level to jenskitchen to find index.html. This pathname tells the browser to “go up one level,” then look in that directory for index.html

<a href="../index.html">[Back to home page]</a>

Note that we don’t need to write out the name of the higher directory (jenskitchen) in the pathname. The ../ stands in for it.

LINKING TO A HIGHER DIRECTORY

LINKING TO A HIGHER DIRECTORYCan you guess how you’d back your way out of two directory levels?

Simple: just use the dot-dot-slash twice

A link on the couscous.html page back to the home page (index.html) would look like this:

<a href="../../index.html">[Back to home page]</a>

The first ../ backs up to the recipes directory;

the second ../ backs up to the top-level directory where index.html can be found.

Again, there is no need to write out the directory names; the ../ does it all.

LINKING TO A HIGHER DIRECTORYCan you guess how you’d back your way out of two directory levels?

Simple: just use the dot-dot-slash twice

A link on the couscous.html page back to the home page (index.html) would look like this:

<a href="../../index.html">[Back to home page]</a>

The first ../ backs up to the recipes directory;

the second ../ backs up to the top-level directory where index.html can be found.

Again, there is no need to write out the directory names; the ../ does it all.

IT’S THE SAME FOR IMAGESThe src attribute in the img element works the same as the href attribute in anchors when it comes to specifying URLs. Since you’ll most likely be using images from your own server, the src attributes within your image elements will be set to relative URLs.

Let’s look at a few examples from the Jen’s Kitchen site. First, to add an image to the index.html page, the markup would be:

<img src="images/jenskitchen.gif" alt="">

The URL says, “Look in the current directory (jenskitchen) for the images directory; in there you will find jenskitchen.gif.”

LINKING TO A SPECIFIC POINT IN A PAGEThis is useful for providing shortcuts to information at the bottom of a long, scrolling page or for getting back to the top of a page with just one click or tap. Linking to a specific point in the page is also referred to as linking to a document fragment.

LINKING TO A SPECIFIC POINT IN A PAGEStep 1: Identifying the destination

<h1 id="startH">H</h1>

Step 2: Linking to the destination

<a href="#startH">H</a>

TARGETING A NEW BROWSER WINDOWSetting target="_blank" always causes the browser to open a fresh window.

For example:<a href="http://www.oreilly.com" target="_blank">O'Reilly</a>

If you target “_blank” for every link, every link will launch a new window, potentially leaving your user with a mess of open windows.

MAIL LINKSBy using the mailto protocol in a link, you can link to an email address. When the user clicks on a mailto link, the browser opens a new mail message preaddressed to that address in a designated mail program.

A sample mailto link is shown here:

<a href="mailto:[email protected]">Contact Al Klecker</a>

As you can see, it’s a standard anchor element with the href attribute. But the value is set to mailto:[email protected].

TELEPHONE LINKSKeep in mind that the smartphones people are using to access your website can also be used to make phone calls! Why not save your visitors a step by letting them dial a phone number on your site simply by tapping on it on the page? The syntax uses the tel: scheme and is very simple.

<a href="tel:+18005551212">

Call us free at (800) 555-1212

</a>

TEST YOURSELF

TEST YOURSELF

TEST YOURSELF

Education

HTML Lists & Llinks