pemrograman web modul - aktivitasshodiq · modul 2 1. tag font untuk memodifikasi sebuah font...
Post on 19-Mar-2019
228 Views
Preview:
TRANSCRIPT
PEMROGRAMAN WEB
MODULMODULMODULMODUL
OLEH : Yunita Prastyaningsih, S.Kom
Modul 2 1. Tag FONT
Untuk memodifikasi sebuah font digunakan tag <font> sebagai pembuka dan tag </font> sebagai penutup. Tag ini mempunyai atribut,diantaranya “size” untuk menentukan besar ukuran huruf, atribut ‘color” untuk menentukan warnanya,serta atribut “face” untuk menentukan jenis hurufnya.
<html> <head> <title>Demo membuat Font</title> </head> <body> <font size="10" color="green" face="impact">Tulisan ini berwarna hijau,berukuran 10,dan jenisnya impact</font></br> <font size="6" color="red" face="arial">Tulisan ini berwarna merah,berukuran 6,dan jenisnya arial</font> </body> </html>
2. Background
Didalam tag terdapat beberapa atribut ,atribut tag berada dalam tanda tag tersebut. Atribut tersebut ada yang memiliki nilai tetapi ada juga yang tidak. Tag <body> memiliki atribut. Untuk diperhatikan, jika gambar tidak berhasil ditampilkan maka cobalah untuk memindahkan letak file gambar ke folder dimana file.html berada.
<body bgcolor=”…” >
Contoh background menggunakan warna <html> <head> <title>Atribut Tag</title> <body bgcolor=”red”> Demo menggunakan atribut tag </body> </html>
3. Membuat daftar List
Dalam menggunakan document HTML ,adaa kalanya kita perlu membuat suatu daftar (list) atau kumpulan item tertentu. Daftar item tersebut dapat ditulis secara berurutan atau tidak. Jenis-jenis daftar tersebut menggunakan tag-tag yang telah disediakan dalam HTML
Ø Jenis daftar dibedakan menjadi 2, yaitu:
a. daftar yang terurut
b. daftar yang tidak terurut
· Daftar yang terurut (Ordered List)
Daftar yang terurut biasanya ditandai dengan penggunaan aturan penomoran tertentu,contohnya menggunakan angka (1,2,3..) atau karakter alphabet tertentu (a,b,c.. atau i ii iii..) kita perlu menggunakan tag <ol> sebagai pembuka dan tag </ol> sebagai penutup. Masing-masing item harus dibuat menggunakan tag <li> yang kemudian harus ditutup dengan tag </li>
<html> <head> <title> demo membuat Ordered List</title> </head> <body> <ol>ordered list <li>satu</li> <li>dua</li> <li>tiga</li> </ol> </body> </html>
Dalam keadaan default penomoran <ol> akan menggunakan angka(1,2,3..) tetapi kita bisa menggantinya dengan karakter laen yakni menyertakan atribut TYPE pada tag <ol>
TYPE A : penomorannya berupa A,B,C….
TYPE a : penomorannya berupa a,b,c….
TYPE I : penomorannya berupa I,II,III….
TYPE i : penomorannya berupa i,ii,iii….
Salah satu contoh kode menggunakan atribut TYPE i
<html> <head> <title> demo membuat Ordered List</title> </head> <body> <ol type=i>ordered list <li>satu</li> <li>dua</li> <li>tiga</li> </ol> </body> </html>
Catatan: jika kita ingin memulai list dari nomor 8 maka penulisannya <ol start=8>
· Daftar yang tidak terurut (Unordered List)
Daftar yang tidak terurut adalah daftar yang item-itemnya dapat diubah posisinya secara acak yang menggunakan tag <ul> sebagai pembuka dan tag </ul> sebagai penutup, Masing-masing item harus dibuat menggunakan tag <li> yang kemudian harus ditutup dengan tag </li>
<html> <head> <title> demo membuat Unordered List</title> </head> <body> <ul>unordered list <li>satu</li> <li>dua</li> <li>tiga</li> </ul> </body> </html>
Dalam keadaan default <ul> akan menggunakan tanda bulat tetapi kita bisa
menggantinya dengan karakter laen yakni menyertakan atribut TYPE pada tag <ul>
TYPE DISK = gambar bulat yang diarsir (default)
TYPE CIRCLE = gambar bulat yang tidak diarsir
TYPE SQUARE = gambar kotak
<html> <head> <title> demo membuat Unordered List</title> </head> <body> <ul type=”square”>unordered list <li>satu</li> <li>dua</li> <li>tiga</li> </ul> </body> </html>
· Daftar bersarang ( Nested List )
Untuk membuat daftar bersarang (item maupun subitem) memiliki daftar lagi, untuk melakukan ini kita perlu menyertakan tag <ol> atau <ul> didalam item bersangkutan
<html> <head> <title> daftar bersarang</title> </head> <body> <ol> <li>nasi
<ul> <li>nasi putih</li> <li> nasi kuning</li> </ul> </li> <li>sayur</li> </ol> </body> </html>
· Definition List
Tag tag pada definition list:
<dl> ……….</dl> Tag ini digunakan untuk membuat sebuah definisi dari sebuah list,jenis daftar ini dibuat menggunakan tag <dl> sebagai pembuka dan tag </dl> sebagai penutup. <dt> ……….</dt> item yang menjelaskan list dari sebuah definisi <dd> ……….</dd> Tag ini menjelaskan item dari sebuah list definisi
<html> <head> <title>pemrograman web</title> </head> <body> <dl><b> definisi list</b> <dt> item pertama </dt> <dd> sub item pertama </dd> <dt> item kedua </dt> <dd> sub item kedua </dd>
<dt> item ketiga </dt> <dd> sub item ketiga </dd> </dl> </body> </html>
TUGAS KELOMPOK :
Buatlah kode html yang sesuai tampilan berikut dibawah ini · 1 kelompok terdiri 3 orang · Kode yang digunakan mecakup semua yang ada di modul 2
top related