List and HyperLink

Sabtu, 19 November 2011


In HTML has three kinds of lists :
- Ordered list (numbered);
- Unordered list (bulleted commonly)
- Definition list (For a couple of terms and definition / term and definition).

Ordered List
An ordered list displays the list of items with numbers, letters, roman numerals,
On Ordered List tag begins with <ol> .....</ p>, and to list items using <li> ....</ li>
Example of Ordered List: 

<h4>An Ordered List:</h4>

Ordered List
For other forms such as A, B, C, etc. can use the attribute type:

Attribut Ordered List
An example to start from letter C:
<ol type="A" start="3">

Examples of <OL> with type :
<ol type=”A”>
<li>Visual C++</li>
<li>Visual Basic</li>
<li>Borland Delphi</li>

Unordered List
Unorderd list displays the list of items with
Bullets and images
Tag <ul> ………….. </ul>
# List item <li> ……….</li>
Example :

<h4>An Unordered List:</h4>

Another form of unordered list
Used attribute type :
#With a choice of either: disc, circle, square, none
Example :

Shape "disc" (default)
<ul type="disc">
<li> Mango </ li>
<li> Bananas </ li>
</ ul>
Shape "circle"
<ul type="circle">
<li> Mango </ li>
<li> Bananas </ li>
</ ul>
Shape "square"
<ul type="square">
<li> Mango </ li>
<li> Bananas </ li>
</ ul>
</ body>
</ html>

By using styles, <ol> and <ul>
can be displayed with different variations

# For <ol> can use various
# For <ul> can use the image / images


<div id="navcontainer">
<ul id="navlist">
<li id="active"> <a href="#" id="current"> Item one </ a> </ li>
<a href="#"> Item two </ a> </ li>
<a href="#"> Item three </ a> </ li>
<a href="#"> Item four </ a> </ li>
<a href="#"> Item five </ a> </ li>
</ ul>
</ div>


# navlist {list-style-image: url (images / arrow.gif);} 

Definition List
Definition List each item contains a pair
(term and definition) 

Tag <dl> ... ... ... ... ... </ dl>
# For the Term / Term <dt> ... ... ... ... </ dt>
# To Definition / Definition <dd> ... ... ... ... </ dd>
# Example:


<h4> A Definition List: </ h4>
<dt> Coffee </ dt>
<dd> Black hot drink </ dd>
<dt> Milk </ dt>
<dd> White cold drink </ dd>
</ dl>
</ body>
</ html>

Contains display format with multilevel
Example :


<h2> System Requirements </ h2>
<ol type="I">
<li> Software </ li>
<ol type="A">
<li> Programming Language
<ul type="square">
<li> PHP </ li>
<li> ASP.NET </ li>
</ ul>
<li> Database </ li>
<ul type="square">
<li> MySQL </ li>
<li> Oracle </ li>
<li> PostgreSQL </ li>
</ ul>
</ ol>
<li> Hardware </ li>
</ ol>
</ body>
</ html>


Hyperlink (or link) is a word,
set of words, or images that can be
use (clickable) to go to the document
new or other parts of the document
html The link connecting one
document with other documents
# When the cursor is directed to a link in
web page, then the arrow cursor will
turns into a hand shape
# The tags are used: <a>

Component link
There are two components of the link:

  1. Descriptor 
  2. Reference target (form url)
General Form Link:
<a href="url_of_target"> descriptor </ a>
# Descriptor can be either text or image
# url_of_target could contain protocol:
# http
# ftp
# mailto

Link with various protocols
<a href=""> STMIK AKAKOM </ a>
    <a href=""> Chapter 1
Introduction </ a>
# mailto:
   <a href=""> Contact Me </ a>
# Complex:

<a href = "mailto:
cc = & bcc =
& subject = Content% 20Kuliah% 20Web & body = Thank% 20Kasih
% 20ya% 20Kirimannya! "> Send an e-mail! </ A>
Target attribute determines where the document intended it to be opened / displayed

# _blank           : link in a new browser window or tab new (depending on browser used)
# _self              :Opens link in the page / frame the same
# _parent          :Opens link in a frame on it
# _top              :Opens link in the main window of the browser
#name window :Opening a link in the browser window with the name certain (javascript required)


Artikel Terkait

Posting Komentar

.: Terimakasih telah berkunjung di web blog saya, silahkan tinggalkan pesan untuk kemajuan web blog ini dimasa mendatang :.


Enter your email to subscribe to article And do not forget to follow my blog!

Delivered by BlogKu InspirasiKu

Flickr Images

Tabloid PULSA