Langsung ke konten utama

HTML DAFTAR URUTAN

Oleh

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>


 

Tugas tambahan:
Ubahlah tampilannya dalam format kombinasi ordered list dan unordered list.

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Daftar Instruksi Bahasa Assembly - Perintah Perpindahan Data

Oleh
Dalam program bahasa assembly terdapat 2 jenis yang kita tulis dalam program: 1. Assembly Directive (yaitu merupakan kode yang menjadi arahan bagi assembler/compiler untuk menata program) 2. Instruksi (yaitu kode yang harus dieksekusi oleh CPU mikrokontroler dengan melakukan operasi tertentu sesuai dengan daftar yang sudah tertanam dalam CPU) Daftar Assembly Directive Assembly Directive Keterangan EQU Pendefinisian konstanta DB Pendefinisian data dengan ukuran satuan 1 byte DW Pendefinisian data dengan ukuran satuan 1 word DBIT Pendefinisian data dengan ukuran satuan 1 bit DS Pemesanan tempat penyimpanan data di RAM ORG Inisialisasi alamat mulai program END Penanda akhir program CSEG Penanda penempatan di code segment XSEG Penanda penempatan di e...
2 komentar
lanjut baca??

Memahami Fungsi-Fungsi dalam MS Exel 2003

Oleh
UNTUK FILE PDF-NYA ADA DISINI Menggunakan Fungsi IF       Fungsi   IF  digunakan   untuk  mengisi   sel  dengan  syarat   tertentu.  Disini  hasilnya minimal ada 2 alternatif. Bentuk umumnya adalah:  =if(syarat,hasil1,hasil2)       Jika   syaratnya  terpenuhi,  yang   muncul   adalah   hasil1,  sebaliknya  kalau  tidak memenuhi syarat    akan muncul hasil2 Perhatikan Contoh berikut:  Untuk mengisi kolom keterangan berdasarkan nilai yang dimiliki siswa jika nilai lebih besar 50 (>50) maka akan Lulus dan jika kurang dari 50 (<50) maka Gagal. Pada kolom keterangan dituliskan rumus: =if(c2>50;”Lulus”;”Gagal) Latihan Kerjakan soal dibawah ini: Upah Lembur = jam lembur * 1500 Tunjangan   = 10% * gaji pokok Gaji Bersih = Gaji Pokok + Upah Lembu...
Posting Komentar
lanjut baca??

HTML FORMAT TEKS

Oleh
OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks. MATERI: Element BR(line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), Element U(underline), Element PRE(preformated text), Element CENTER, Element BASEFONT, Element FONT, Element HR(horizontal rule) ELEMENT BR (Line Break) Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup. Sintaks: <br> ELEMENT P (Paragraph) Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf. Element P mempunyai attribute yaitu align yang bernilai "left" , "center" , "right" yang menspesifikasikan posisi tepi horizontal dar...
Posting Komentar
lanjut baca??