LIST
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).
- 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:
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
 |
| Ordered List |
 |
| 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>
<li>Lain-lain</li>
</ol>
</body>
</html>
Unordered List
Unorderd list displays the list of items with
Bullets and images
Bullets and images
Tag <ul> ………….. </ul>
# List item <li> ……….</li>
Example :
By using styles, <ol> and <ul>
can be displayed with different variations
# For <ol> can use various
character
# For <ul> can use the image / images
# HTML
CSS
Definition List
Definition List each item contains a pair# List item <li> ……….</li>
Example :
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Another form of unordered list
Used attribute type :
Used attribute type :
#With a choice of either: disc, circle, square, none
Example :
<html>
<body>
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
character
# For <ul> can use the image / images
# HTML
<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>
CSS
# navlist {list-style-image: url (images / arrow.gif);}
Definition List
(term and definition)
Tag <dl> ... ... ... ... ... </ dl>
# For the Term / Term <dt> ... ... ... ... </ dt>
# To Definition / Definition <dd> ... ... ... ... </ dd>
# Example:
<html>
<body>
<h4> A Definition List: </ h4>
<dl>
<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 :
<html>
<body>
<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
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
appoint
# The tags are used: <a>
Component link
There are two components of the link:
- Descriptor
- Reference target (form url)
<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
http:
<a href="http://www.akakom.ac.id"> STMIK AKAKOM </ a>
# ftp:
<a href="ftp://ftp.server.com/data/bab1.doc"> Chapter 1
Introduction </ a>
# mailto:
Simple:
<a href="mailto:donyunt@gmail.com"> Contact Me </ a>
# Complex:
<a href = "mailto: donyunt10061@gmail.com?Target attribute determines where the document intended it to be opened / displayed
cc = & bcc = donyunt10061@yahoo.com herni.asih18@gmail.com
& subject = Content% 20Kuliah% 20Web & body = Thank% 20Kasih
% 20ya% 20Kirimannya! "> Send an e-mail! </ A>
# _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)
Posting Komentar
.: Terimakasih telah berkunjung di web blog saya, silahkan tinggalkan pesan untuk kemajuan web blog ini dimasa mendatang :.