1.Luas segi4

Program luas_segi4;
uses wincrt;var
panjang:integer;
lebar:integer;
luas:integer;
Begin
writeln('panjangnya');
readln(panjang);
writeln('lebarnya');
readln(lebar);
luas:=panjang*lebar;
writeln('luas segi4=',luas);
End.


2. Konversi jam ke detik
program konversi_jam_ke_detik;
uses wincrt;
var
jam:real;
detik:real;
begin
write('masukkan jam=');
readln(jam);
detik:=jam*3600;
writeln('total detik=',detik:10:2);
end.


3.Konversi detik ke jam

program konversi_detik_ke_jam;
uses wincrt;
var
detik:real;
jam:real;
begin
write('masukkan detik=');
readln(detik);
jam:=detik/3600;
writeln('jam=',jam:10:2);
end.


Dari soal diatas merupakan program berurut.program berurut adalah menjalankan proses secara berurutan. dari proses satu dilanjutkan proses kedua dan dilanjutkan ke proses berikutnya,tidak ada percabangan dan tidak ada perulangan.
Contoh soal lainnya :

Apabila diketahui waktu mulai telepon(jam,menit,detik) dan waktu selesai telepon(jam,menit,detik), berapakah lamanya telepon dalam detik.

Program Durasi_Telepon;
uses wincrt;
var j1, j2, m1, m2, d1, d2, j, m, d, sisa, durasi:integer;
begin
write ('jam mulai=');read(j1,m1,d1);
write ('jam selesai =');readln(j2,m2,d2);
Durasi:=(j2-j1)*3600+(m2-m1)*60+(d2-d1);
j:=Durasi div 3600;
sisa:=Durasi mod 3600;
m:=sisa div 60;
d:=sisa mod 60;
writeln ('durasi jam=',j);
writeln ('durasi menit=',m);
writeln ('durasi detik=',d);
end.

Biaya telepon apabila diinput mulai telepon dan selesai telepon, dan biaya pulsa per Rp 200,- dan 1 pulsa adalah 5 detik ( sisa < 5 detik diabaikan).

Program Menghitung_Biaya_Telepon;
Uses Wincrt;
Var
hh1,mm1,ss1,hh2,mm2,ss2,Total_Detik,Biaya_Telepon:longint;
Begin
Writeln ('Waktu mulai telepon:');
Write ('Jam =');read (hh1);
Write ('Menit=');read (mm1);
Write ('Detik=');read (ss1);
Writeln ('Waktu selesai telepon:');
Write ('Jam =');read (hh2);
Write ('Menit=');read (mm2);
Write ('Detik=');read (ss2);
Total_Detik:=(hh2-hh1)*3600+(mm2-mm1)*60+(ss2-ss1);
Biaya_Telepon:=(Total_Detik div 5)*200;
Writeln ('Lama Waktu Telepon dalam Detik adalah ',(Total_Detik), (' detik.'));
Writeln ('Biaya Telepon adalah Rp ',Biaya_Telepon);
End.

Konversi Suhu dari Celcius ke Kelvin dan Fahrenhet.

Program suhu;
uses wincrt;
var
celcius,kelvin:integer;
fahrenheit:real;
begin
write('Masukkan suhu dalam celcius = ');readln(celcius);
fahrenheit:=(9/5*celcius)+32;
kelvin:=celcius+273;
writeln('Suhu dalam fahrenheit = ',fahrenheit:5:2);
writeln('Suhu dalam kelvin = ',kelvin);
end.

Menghitung umur seseorang apabila diasumsikan dalam 1 bulan ada 30 hari dan dalam 1 tahun ada 365 hari.

Program Menghitung_Umur_Seseorang;
uses wincrt;
var
d1,d2,m1,m2,y1,y2,H,I,J,K,L:integer;
begin
writeln('Menghitung umur seseorang');
write('Masukkan tanggal lahir = ');readln(d1,m1,y1);
write('Masukkan tanggal sekarang = ');readln(d2,m2,y2);
H:=(y2-y1)*365+(m2-m1)*30+(d2-d1);
I:=H div 365;
J:=H mod 365;
K:=J div 30;
L:=J mod 30;
write('umur anda sekarang adalah = ',I,' tahun ',K,' bulan ',L,' hari');
end.


Volum Kubus dan luas permukaan kubus.

Program Volume_Kubus_dan_Luas_Permukaan_Kubus;
uses wincrt;
var
alas, volume, luas_permukaan:real;
begin
write('masukkan alas =');readln(alas);
volume:=alas*alas*alas;
luas_permukaan:=6*(alas*alas);

writeln('volume=',volume:5:2);
writeln('luas_permukaan=',luas_permukaan:5:2);
end.

Luas daerah lingkaran dan keliling lingkaran.

Program Luas_Lingkaran_dan_Keliling_Lingkaran;
uses wincrt;
const
phi=3.142857;
var
r, Luas, Keliling:real;
begin
write ('masukkan jari-jari lingkaran: ');readln(r);
Luas:=(phi*r*r);
Keliling:=(phi*2*r);

writeln ('luas:', Luas:10:3);
writeln ('keliling:', Keliling:10:3);
end.

Mempertukarkan nilai A dan B, nilai A dan B diinput.

Program Mempertukarkan_Nilai;
uses wincrt;
var
A:integer;
B:integer;
temp:integer;
begin
write('masukkan nilai A =');readln(A);
write('masukkan nilai B =');readln(B);
temp:=A;
A:=B;
B:=temp;

writeln('A =',A);
writeln('B =',B);
end.

5. Luas permukaan tabung dan kerucut.

Program Luas_Permukaan_Tabung_dan_Kerucut;
uses wincrt;
const
phi=3.142857;
var
r, t, s, luas_permukaan_tabung, luas_permukaan_kerucut:real;
begin
write('masukkan jari-jari =');readln(r);
write('masukkan tinggi =');readln(t);
write('masukkan selimut_kerucut =');readln(s);
luas_permukaan_tabung:=((2*phi*r*r)+(2*phi*r*t));
luas_permukaan_kerucut:=((phi*r*r)+(phi*r*s));
writeln('luas_permukaan_tabung=',luas_permukaan_tabung:5:2);
writeln('luas_permukaan_kerucut=',luas_permukaan_kerucut:5:2);
end.

Penjumlahan, pengurangan, perkalian, pembagian, pembagian bulat, dan sisa hasil bagi dalam sebuah program.

Program Operasi_Bilangan;
uses wincrt;
var
a,b,c,d,e,h:integer;
f,g:real;
begin
write('masukkan nilai pertama = ');readln(a);
write('masukkan nilai kedua = ');readln(b);
c:=a+b;
d:=a-b;
e:=a*b;
f:=a/b;
g:=a div b;
h:=a mod b;
writeln('hasil penjumlahan = ',c);
writeln('hasil pengurangan = ',d);
writeln('hasil perkalian = ',e);
writeln('hasil pembagian = ',f:0:2);
writeln('hasil pembagian bulat = ',g:0:2);
writeln('sisa hasil bagi = ',h);
end.

Meghitung gaji karyawan apabila diinput nama orang, gaji pokok, tunjangan istri 15 % dari gaji pokok, tunjangan tiap anak 20 % dari gaji pokok, pajak 15 % dari gaji keseluruhan.

Program Gaji_Karyawan;
uses wincrt;
var
nama_orang:string;
gaji_pokok:real;
tunjangan_istri:real;
tunjangan_tiap_anak:real;
n:integer;
pajak:real;
total_gaji:real;
begin
write ('masukkan nama orang =');readln(nama_orang);
write ('masukkan gaji pokok =');read(gaji_pokok);
write ('masukkan banyaknya anak =');readln(n);
tunjangan_istri:=(0.15*gaji_pokok);
tunjangan_tiap_anak:=(0.2*n*gaji_pokok);
pajak:=(0.15*(gaji_pokok+tunjangan_istri+tunjangan_tiap_anak));
total_gaji:=(gaji_pokok+tunjangan_istri+tunjangan_tiap_anak-pajak);
writeln('tunjangan_istri=',tunjangan_istri:10:2);
writeln('tunjangan_tiap_anak=',tunjangan_tiap_anak:10:2);
writeln('pajak=',pajak:10:2);
writeln('total_gaji=',total_gaji:10:2);
end.

Koordinat titik tengah dari kedua titik yang diketahui.

Program Koordinat_Titik_Tengah;
uses wincrt;
var
x1, x2, y1, y2, a, b, titik_tengah_x, titik_tengah_y:real;
begin
write('masukkan nilai x1 =');readln(x1);
write('masukkan nilai x2 =');readln(x2);
write('masukkan nilai y1 =');readln(y1);
write('masukkan nilai y2 =');readln(y2);
titik_tengah_x:=((x1+x2)/2);
titik_tengah_y:=((y1+y2)/2);
writeln('titik_tengah_x=',titik_tengah_x:10:2);
writeln('titik_tengah_y=',titik_tengah_y:10:2);
end.

       Dalam praktikum kali ini, Anda akan mempelajari
penggunaan dari beberapa tag dasar yang hampir akan
selalu digunakan dalam setiap praktikum Anda
nantinya. Perhatikan daftar tag di bawah ini, serta
kegunaan utamanya dalamsebuah halaman HTML.

Tag HTML dasar
Start Tag NN IE W3C Kegunaan
<html> 3.0 3.0 3.2 Mendefinisikan sebuah dokumen html
<body> 3.0 3.0 3.2 Mendefinisikan isi/badan suatu dokumen
<h1>-<h6> 3.0 3.0 3.2 Mendefinisikan heading ke 1 s/d heading ke 6
<p> 3.0 3.0 3.2 Mendefinisikan sebuah paragraf
<br> 3.0 3.0 3.2 Menyisipkan sebuah line break
<hr> 3.0 3.0 3.2 Mendefinisikan sebuah garis horisontal
<!--> 3.0 3.0 3.2 Mendefinisikan komentar dalam kode sumber HTML

Setelah itu, Anda akan mempelajari penggunaan dari
beberapa tag yang digunakan dalam melakukan
pemformatan tampilan halaman web supaya lebih
sesuai dengan keinginan atau agar lebih rapi dan
terstruktur. Perhatikan beberapa daftar tag di bawah
ini, serta kegunaan utamanya dalam sebuah halaman
HTML. Beberapa diantaranya telah dihilangkan dari
daftar tag HTML standar, namun masih
memungkinkan untuk ditampilkan pada beberapa
browser tertentu atau browser lama.
Tag untuk pemformatan teks dasar
Start Tag NN IE W3C Kegunaan
<b> 3.0 3.0 3.2 Mendefinisikan teks tebal
<big> 3.0 3.0 3.2 Mendefinisikan teks yang lebih besar
<em> 3.0 3.0 3.2 Mendefinisikan teks yang dimiringkan
<i> 3.0 3.0 3.2 Mendefinisikan teks yang dimiringkan
<small> 3.0 3.0 3.2 Mendefinisikan teks yang lebih kecil
<strong> 3.0 3.0 3.2 Mendefinisikan teks tebal
<sub> 3.0 3.0 3.2 Defines subscripted text
<sup> 3.0 3.0 3.2
Mendefinisikan teks yang posisinya lebih ke
atas
<ins> 4.0 4.0 Mendefinisikan teks yang bergaris bawah
<del> 4.0 4.0 Mendefinisikan teks yang hendak dihapus
<s> Dihilangkan. Gunakan saja <del>
<strike> Dihilangkan. Gunakan saja <del>
<u> Dihilangkan. Gunakan saja style
Tag untuk tampilan ‘hasil keluaran
komputer’
Start Tag NN IE W3C Kegunaan
<code> 3.0 3.0 3.2 Mendefinisikan teks kode komputer
<kbd> 3.0 3.0 3.2 Mendefinisikan teks dari keyboard
<samp> 3.0 3.0 3.2 Mendefinisikan teks contoh kode komputer
<tt> 3.0 3.0 3.2 Mendefinisikan teks model teletype
<var> 3.0 3.0 3.2 Mendefinisikan sebuah variabel
<pre> 3.0 3.0 3.2 Mendefinisikan teks preformatted
<listing> Dihilangkan. Gunakan saja <pre>
<plainte
xt>
Dihilangkan. Gunakan saja <pre>
<xmp> Dihilangkan. Gunakan saja <pre>
10/25/2009
2
Tag untuk Citation, Quotation, dan
Definisi
Start Tag NN IE W3C Kegunaan
<abbr> 4.0 Mendefinisikan suatu kependekan
<acronym> 4.0 4.0 Mendefinisikan suatu singkatan
<address> 4.0 4.0 3.2 Mendefinisikan suatu elemen alamat
<bdo> 4.0 Mendefinisikan arah teks
<blockquote> 3.0 3.0 3.2 Mendefinisikan quotation panjang
<q> 4.0 4.0 Mendefinisikan quotation pendek
<cite> 3.0 3.0 3.2 Mendefinisikan suatu kutipan
<dfn> 3.0 3.2 Mendefinisikan suatu istilah
Contoh tag untuk Entitas karakter
Tampilan Deskripsi Nama Entitas Nomor Entitas
spasi kosong &nbsp; &#160;
< kurang dari &lt; &#60;
> lebih dari &gt; &#62;
& dan (ampersand) &amp; &#38;
"
tanda petik/kutip (quotation
mark)
&quot; &#34;
' koma atas (apostrophe) &#39;
¢ Cent &cent; &#162;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
§ Section &sect; &#167;
© Copyright &copy; &#169;
® registered trademark &reg; &#174;
× Multiplication &times; &#215;
÷ Division &divide; &#247;

Ketika Anda menulis suatu dokumen, mungkin
terkadang Anda menuliskan kalimat dalam bentuk
poin-poin yang menerangkan tentang suatu hal.
Dalam suatu halaman web, terkadang Anda juga ingin
melakukan hal yang sama. Terdapat tag khusus untuk
penulisan dalam format poin-poin, perhatikan daftar
di bawah ini.
Tag untuk list
Start Tag NN IE W3C Kegunaan
<ol> 3.0 3.0 3.2 Mendefinisikan sebuah list ordered
<ul> 3.0 3.0 3.2 Mendefinisikan sebuah list unordered
<li> 3.0 3.0 3.2 Mendefinisikan sebuah item dalam list
<dl> 3.0 3.0 3.2 Mendefinisikan sebuah list definisi
<dt> 3.0 3.0 3.2 Mendefinisikan sebuah istilah list definisi
<dd> 3.0 3.0 3.2 Mendefinisikan sebuah keterangan list definisi
<dir> Dihilangkan. Gunakan saja <ul>
<menu> Dihilangkan. Gunakan saja <ul>
LATIHAN
Dalam modul ini Anda akan berlatih untuk menggunakan
berbagai tag dasar untuk pemrograman web menggunakan
HTML. Ketikkan setiap kelompok tag dalam sebuah file,
simpan dalam folder Anda sendiri yang telah ditentukan,
kemudian jalankan di web browser yang telah terinstall.
Ketikkan setiap kode sumber apa adanya terlebih dahulu
(termasuk spasi kosong). Perhatikan hasil tampilannya,
kemudian belajar untuk memodifikasi setiap kelompok tag
untuk mengetahui maksud dari setiap baris tag HTML
yang Anda ketikkan. Jangan lupa untuk menyimpan setiap
modifikasi Anda sebelum menjalankan ulang di dalam
browser.

Bagian terakhir adalah list. List adalah salah satu
komponen yang cukup sering digunakan dalam suatu
halaman Web. Dalam bentuk aslinya, mungkin sudah
tidak terlalu banyak digunakan lagi dan digantikan
fungsinya dengan image (gambar), tetapi ada perlunya
juga Anda mengetahui list saat tidak memiliki gambar
yang akan dijadikan bullet.

1. Paragraf dan line break
<html>
<body>
<p>
Paragraf ini
mengandung banyak spasi dan baris
dalam kode sumbernya,
tetapi browser
akan mengabaikannya.
</p>
<p>
Sedangkan yang ini memiliki &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; spasi panjang.
</p>
<p align =”center”>
Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda. Bila
Anda mengubah ukuran window browser, jumlah baris dalam paragraf akan berubah.
</p>
<p align=”right”>
Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
</p>
</body>
</html>

2. Background color dan heading
<html>
<body>
<body bgcolor="yellow">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna kuning.
</p>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan
menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal.
Gunakan tag lain untuk keperluan itu. </p>
<h1 align="center">Ini adalah heading 1</h1>
<p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p>
</body>
</html>

3. Garis horisontal dan komentar
    tersembunyi
<html>
<body>
<p>Tag hr mendefinisikan sebuah garis horisontal, default-nya adalah rata
tengah:</p>
<hr color=”green” >
<p align=”left”>Terdapat paragraf disini</p>
<hr width=”80%” size=”10” align=”left”>
<p align=”right”>Terdapat paragraf disini</p>
<hr width=”400” size=”6” align=”right” color=”red”>
<center>
<p>Terdapat paragraf disini</p>
</center>
<!—Ini adalah komentar yang tidak akan ditampilkan di layar browser -->
</body>
</html>
4. Pemformatan teks
<html>
<body>
<b>Teks ini tebal </b>
<br>
<strong> Teks ini juga tebal </strong>
<br>
<big> Teks ini hurufnya besar </big>
<br>
<em> Teks ini miring </em>
<br>
<i> Teks ini juga miring </i>
<br>
<small> Teks ini hurufnya kecil </small>
<br>
Teks ini berisi _subscript
<br>
Teks ini berisi ^superscript
</body>
</html>

5. Teks yang di-preformat
<html>
<body>
<pre>
Ini adalah
Teks yang di-preformat.
Preformat akan menampilkan spasi dan
line break apa adanya.
</pre>
<p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

6. Tag “keluaran komputer”,
alamat, singkatan, dan
kependekan
<html>
<body>
<code>Kode Komputer </code>
<br>
<kbd>Masukan dari keyboard</kbd>
<br>
<tt>Teks jenis teletype </tt>
<br>
<samp>Teks contoh</samp>
<br>
<var>Variabel komputer </var>
<br>
<p>
<b>Catatan:</b> Tag-tag tersebut biasanya digunakan untuk menampilkan kode komputer/ pemrograman.
<p>
<address>
STIKI MALANG<br>
Jl. TIDAR 100<br>
Malang<br>
Jawa TImur
</address>

<br>
<abbr title=“Sekolah Tinggi Informatika dan
Komputer">STIKI</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>Atribut title digunakan untuk menampilkan versi yang dieja
ketika pointer mouse berada di atas kependekan atau
singkatan.</p>
<p>Dalam IE 5, hanya elemen acronym yang mau bekerja.</p>
<p>Dalam Navigator 6.2, elemen abbr dan acronym keduanya
dapat bekerja.</p>
</body>
</html>
7. Arah teks dan quotation <html>
<body>
<p>
Bila browser Anda mendukung kemampuan bi-directional override (bdo), baris berikut ini akan
dituliskan dari kanan ke kiri (rtl):
</p>
<bdo dir="rtl">
Anggap saja ini tulisan bahasa Arab
</bdo>
<br>
Ini adalah contoh quotation panjang:
<blockquote>
Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah
quotation panjang. Ini adalah quotation panjang.
</blockquote>
Ini adalah contoh quotation pendek:
<q>
Ini adalah quotation pendek.
</q>
<p>
Menggunakan elemen blockquote, browser menyisipkan line break dan margin, tetapi elemen q tidak
akan menampilkan apapun yang khusus.
</p>
</body>
</html>

8. Teks yang terhapus, disisipkan,
dan entitas karakter
<html>
<body>
<p>
satu dosin adalah
<del>duapuluh</del>
<ins>duabelas</ins>
buah
</p>
<p>
Hampir semua browser akan memberi garis (overstrike) pada teks yang (maksudnya) terhapus dan teks yang disisipkan
akan diberi garis bawah.
</p>
<p>
Tetapi beberapa browser yang lama akan menampilkan teks yang terhapus atau teks disisipkan sebagai suatu teks biasa
(plain text).
</p>
<p>Ini adalah entitas karakter: &#000;</p>
<p>
Coba untuk mengganti 000 dengan suatu angka (misalnya 169), dan muat ulang halaman Anda agar Anda dapat melihat
hasil dari perubahan yang dilakukan.
</p>
</body>
</html>

9. List unordered dan ordered
<html>
<body>
<h4>Sebentuk list unordered:</h4>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<br>
<h4>Sebentuk list ordered:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>

10. Jenis-<html> jenis list ordered
<body>
<h4>List bernomor:</h4>
<ol>
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan huruf:</h4>
<ol type="A">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan huruf kecil:</h4>
<ol type="a">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan angka romawi:</h4>
<ol type="I">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan angka romawi kecil:</h4>
<ol type="i">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
</body>
</html>

11. Jenis-jenis list unoredered <html>
<body>
<h4>List dengan bullet berbentuk disc:</h4>
<ul type="disc">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
<h4>List dengan bullet berbentuk lingkaran:</h4>
<ul type="circle">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
<h4>List dengan bullet berbentuk kotak:</h4>
<ul type="square">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
</body>
</html>
12. List bersarang dan list definisi <html>
<body>
<h4>Sebuah list bersarang:</h4>
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh hitam</li>
<li>Teh Hijau</li>
</ul>
</li>
<li>Susu</li>
</ul>
<br>
<h4>Contoh list definisi:</h4>
<dl>
<dt>Kopi</dt>
<dd>Minuman panas hitam</dd>
<dt>Susu</dt>
<dd>Minuman dingin putih</dd>
</dl>
</body>
</html>

Tujuan Pembelajaran :
1. Bisa menggunakan tag yang berfungsi untuk membuat Bullet dalam berbagai bentuk dan cara.
2. Bisa menggunakan tag yang berfungsi untuk membuat Numbering dalam berbagai bentuk dan cara.

Pendahuluan

    Pada tampilan dokumen HTML terkadang kita menginginkan terlihat lebih unik dan terlihat menarik. Selain itu mungkin kita hanya ingin memperjelas informasi tertentu, dalam hal ini misalnya kita ingin informasi tersebut diletakan pada poin-poin khusus atau list-list khusus. Untuk membuat poin atau list tersebut pada bab ini kita menggunakan dua model, yaitu Bullet dan Numbering. Bullet dan Numbering tersebut merupakan simbol atau karakter khusus yang diletakkan didepan suatu teks tertentu.

Daftar Item dengan Bullet

Pada HTML untuk membuat Bullet atau yang sering dikenal dengan tanda daftar list, kita dapat menggunakan tag <UL>. Dan untuk mengakhiri penggunaan tag <UL> diakhir teks yang diberi tanda bullet diberikan tanda </UL>. cara penulisan pada dokumen HTML dapat dilihat di bawah ini :

Bullet.html

<html>
<head>
<title>pemakaian tag ul</title>
</head>
<body>
<h2>Daftar Nama Ikan :</h2>
<ul>

Bullet And Numbering Pada Dokumen HTML

Louhan<br>
Sepat<br>
Betok<br>
Nila<br>
Lele Dumbo
</ul>
********
</body>
</html>

Pada netscape navigator, jenis bullet dapat ditentukan melalui atribut type pada tag <li>. Kemungkinan nilai untuk type diperlihatkan pada kode-kode dan hasil program berikut :

Bullet2.html

<html>
<head>
<title>pemakaian tag ul</title>
</head>
<body>
<h2>Daftar type li :</h2>
<ul>
<li>hasil li tanpa diberi atribut type</li><br>
<li type="circle">Circle<br>
<li type="disk">Disk<br>
<li type="square">Square<br>
</ul>
********
</body>
</html>

Numbering

        Adakalanya daftar suatu item dikehendaki agar ditampilkan dengan nomor urut. Dengan menggunakan tag <OL>, pemberian nomor dapat diotomatiskan tanpa anda harus menuliskannya. Untuk lebih jelasnya kerjakan latihan berikut :

Numbering.html
<html>
<head>
<title>pemakaian tag ol</title>
</head>
<body>
<b>Cara Memasak Mie Instant</b>
<ol>
<li>Masak air di panci sampai mendidih<br>
<li>Buka pembukus mie instant<br>
<li>Masukan Mie + bumbu kedalam Panci<br>
<li>Tunggu +- 3 menit<br>
<li>Mie siap dihidangkan
</ol>
</body>
</html>

Daftar Definisi

        HTML menyediakan jenis daftar khusus yang disebut daftar definisi (definition list). Daftar ini menyediakan tampilan dengan format mirip kamus, dengan definisi suatu istilah diletakan agak menjorok ke kanan.
Tiga buah pasangan tag yang terkait dengan daftar definisi dapat dilihat pada tabel berikut :

<DD>…<DD>
Digunakan untuk menyatakan wadah bagi definisi istilah
<DT>…</DT>
Digunakan untuk menyatakan wadah bagi istilah yang akan didefinisikan
<DL>…</DL>
Digunakan untuk menyatakan wadah bagi daftar

Sebagai contoh perhatikan kode berikut :

Definisi.html
<html>
<head>
<title>definisi</title>
</head>
<body>
<b>Kamus Teknologi Informasi</b>
<dl>
<dt>HTML</dt>
<dd>Bahasa yang digunakan untuk menyusun web</dd>
<dt>HTTP</dt>
<dd>Protokol yang dipakai untuk mentransfer HTML</dd>
</dl>
</body>
</html>

LIST HTML

List merupakan bentuk yang umum yang bisa kita gunakan untuk menguraikan daftara sesuatu, misalnya jenis-jenis list dalam HTML:

• List dengan nomor
• List tanpa nomor
• List definisi

List dengan nomor adalah model daftar yang setiap itemnya dibri nomor. Pada contoh kalimat di atas merupakan contoh list tanpa menggunakan nomor.

Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang memberi uraian terhadap sesuatu item dalam daftar ? disebut list definisi.

Untuk membuat list tanpa nomor, disebut juga bulleted list:

• Mulai dengan tag pembuka list <ul>
• Memasukkan setiap item list dengan menggunakan tag <li> kemudian tuliskan itemnya (satu saja), tag penutup item </li>, sebenarnya ini tidak harus dituliskan (tetapi sebaiknya dituliskan)
• Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
• Akhiri seluruh list dengan sebuah tag penutup </ul>.

Untuk list dengan nomor, disebut juga ordered list, tag <ul> diubah dengan <ol>, demikian juga </ul> diganti dengan </ol>

Contoh List

Contoh ini mendemonstrasikan list berurut dan tak berurut menggunakan nomor dan menggunakan billet.

<!-coba_list.html?
<html>
<body>
<h4>An Ordered List: </h4>
<ol>
<li>Coffe</i>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An Unordered  List:</h4>
<ul>
<li>Coffe</li>
<li>Tea</li>
<li>Milk</li>
</il>
</body>
</html>

Ordered List

Nomor item secara default adalah menggunakan angka 1,2,3,…, dan seterusnya sampai dengan sejumlah item dalam list tersebut.

Untuk keperluan penyajian tentu kita dapat mengubah nomor dalam order list dengan model angka yang lain, dengan mengisi atribut type pada tag <ol>.

Berikut ini adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam order list;

Type I Arti : Ditampilkan dengan angka Romawi huruf besar
Type i Arti : Ditampilkan dengan angka Romawi huruf kecil
Type a Arti : Diubah dengan menggunakan abjad huruf kecil
Type A rti : Diubah dengan menggunakan abjad huruf besar

Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin supaya list dimulai dari nomor 7, maka berikut adalah contoh penggunaannya <ol start=7>…</ol>

Contoh ini mendemonstrasikan berbagai jenis ordered list yang berbeda.

<!- -coba_listordered.html–>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list : </h4>
<ol type=”A”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list : </h4>
<ol type=”a”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type=”I”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list :</h4>
<ol type=”i”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>

Unordered List

Unordered list sering disebut sebagai bulleted list, mempunyai bulleted default berupa noktah. Jenis bulet bisa diubah, berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list:

• disk, bentuk noktah tetapi tidak diarsir ditengahnya
• box, bentuk kotak

untuk mengubah jenis bullet dapat didefinisikan pada atribut type pada tag <ul>, berikut adalah contoh untuk mengubah jenis bullet menjadi kotak <ul type=”box>…</u>

Contoh ini mendemonstrasikan berbagai jenis unoredered list.

<!-coba_listunordered.html?
<html>
<body>
<h4>Disc bullets list : </h4>
<ul type=”disc”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list : </h4>
<ul type=”circle”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Orange</li>
<h4>square bullets list : </h4>
<ul type=”square”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>

Nested List

Bullet dapat digunakan secara bersarang, maksudnya didalam list ada list lagi. Contoh ini mendemonstrasikan bagaimana membuat list yang bersarang (nested list).

<!–coba_listnested.html – - >
<html>
<body>
<h4>A nested List : </h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul>Black tea</li>
<li>Green tea</li>
</ul>
</body>
</html>

Definition List

Contoh ini mendemonstrasikan suatu definition list

<!-coba_listdef.html?
<html>
<body>
<h4>A Definition List : </h4>
<dl>
<dt>Coffee</dt>
<add>Black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
</body>
</html>

Tag Awal <ol> kegunaan sebagai Defines an ordered list
Tag Awal <ul> kegunaan sebagai Defines an unordered list
Tag Awal <li> kegunaan sebagai Defines a list item
Tag Awal <dl> kegunaan sebagai a Defines a definition list
Tag Awal <dt> kegunaan sebagai Defines a definition term
Tag Awal <dd> kegunaan sebagai Defines a definition description
Tag Awal <dir> kegunaan sebagai Deprecated. Use <ul> instead
Tag Awal <menu> kegunaan sebagai Deprecated. Use <ul> instead