Belajar Html Daftar Urutan | CEMPAKA: Belajar Html Daftar Urutan

Wednesday, 14 January 2015

Belajar Html Daftar Urutan


Hallo Teman. Pada hari yang indah ini saya akan memberikan materi HTML Daftar Urutan. Langsung saja kita lihat pembahasan mengenai HTML Daftar Urutan dibawah ini.

:: 3-HTML DAFTAR URUTAN ::
OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.
MATERI:
Element OL(ordered list), Element UL(unordered list), Element LI(list item).


ELEMENT OL (Orderd List)
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.

Sintaks:
<ol start="number" type="A"|"a"|"I"|"i"|"1">
........................
< /ol>



ELEMENT UL (Unordered List)
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.

Sintaks:
<ul  type="circle"|"square"|"disc">
      ..........................
</ul>



ELEMENT LI (List Item)
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value berisikan nilai nomor urutan dari attribute type.

Sintaks:
<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">
      ..........................
</li>


LATIHAN

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.


Latihan 1:
Menampilkan teks dengan daftar urut (element OL):

                           Matakuliah TKJ Semester 1:
                           1. Bahasa Inggris  1
                           2. Matematika 1
                           3. Jaringan Komputer 1
                           4. Konsep Teknologi Informasi
                           5. Keterampilan Komputer dan Pengelolaan Informasi
                           6. Perangkat Keras Komputer
                           7. Sistem Operasi
                         

Nama file: latihan3_1.html
<html>
<head>
<title>Latihan3-1</title>
</head>
<body>
Matakuliah TKJ Semester 1:
< ol>
     <li>Bahasa Inggris 1</li>
     <li>Matematika 1</li>
     <li>Jaringan Komputer 1</li>
     <li>Konsep Teknologi Informasi</li>
     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>
     <li>Perangkat Keras Komputer</li>
     <li>Sistem Operasi</li>
< /ol>
</body>
</html>


Latihan 2:
Menampilkan teks dengan daftar urut (element OL):

                           Matakuliah TKJ Semester 1:
                           a. Bahasa Inggris  1
                           b. Matematika 1
                           c. Jaringan Komputer 1
                           d. Konsep Teknologi Informasi
                           e. Keterampilan Komputer dan Pengelolaan Informasi
                           f. Perangkat Keras Komputer
                           g. Sistem Operasi
                         

Nama file: latihan3_2.html
<html>
<head>
<title>Latihan3-2</title>
</head>
<body>
Matakuliah TKJ Semester 1:
< ol start="1" type="a">
     <li>Bahasa Inggris 1</li>
     <li>Matematika 1</li>
     <li>Jaringan Komputer 1</li>
     <li>Konsep Teknologi Informasi</li>
     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>
     <li>Perangkat Keras Komputer</li>
     <li>Sistem Operasi</li>
< /ol>
</body>
</html>


Latihan 3:
Menampilkan teks dengan daftar urut (element OL):

                       I. Matakuliah TKJ Semester 1:
                           a. Bahasa Inggris  1
                           b. Matematika 1
                           c. Jaringan Komputer 1
                           d. Konsep Teknologi Informasi
                           e. Keterampilan Komputer dan Pengelolaan Informasi
                           f. Perangkat Keras Komputer
                           g. Sistem Operasi
                         

Nama file: latihan3_3.html

<html>
<head>
<title>Latihan3-3</title>
</head>
<body>
<ol start="1" type="I">
<li>Matakuliah TKJ Semester 1:</li>
     <ol start="1" type="a">
        <li>Bahasa Inggris 1</li>
        <li>Matematika 1</li>
        <li>Jaringan Komputer 1</li>
        <li>Konsep Teknologi Informasi</li>
        <li>Keterampilan Komputer dan Pengelolaan Informasi</li>
        <li>Perangkat Keras Komputer</li>
        <li>Sistem Operasi</li>
     </ol>
</ol>
</body>
</html>
Ya mungkin hanya ini yang bisa saya sampaikan. Semoga Materi diatas dapat bermanfaat. Kalau ada yang mau ditannyakan bisa ditulis pada kolom komentar yang tersedia. Jangan lupa berkunjung lagi ya.


Semoga artikel Belajar Html Daftar Urutan bermanfaat bagi Anda. Jika kamu suka dengan artikel Belajar Html Daftar Urutan ini, like dan bagikan ketemanmu.

Post a Comment

CEMPAKA - All Right Reserved.Powered By Blogger
My Link by Creating Website Edit by : Cempakateknikinfo Blogspot