pemrograman web modul - aktivitasshodiq · modul 2 1. tag font untuk memodifikasi sebuah font...

PEMROGRAMAN WEB

MODULMODULMODULMODUL

OLEH : Yunita Prastyaningsih, S.Kom

Modul 2 1. Tag FONT

Untuk memodifikasi sebuah font digunakan tag sebagai pembuka dan tag 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> Tulisan ini berwarna hijau,berukuran 10,dan jenisnya impact Tulisan ini berwarna merah,berukuran 6,dan jenisnya arial </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> definisi list <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

pemrograman web modul - aktivitasshodiq · modul 2 1. tag font untuk memodifikasi sebuah font...

Documents