1 Desain Web HTML Lanjut Oleh : Ady Purna Kurniawan, ST., MT.2 Materi HTML Lanjut 1. List 2. Fontasi 3. Image 4. Hyperlink 5. Form3 Tag LIST Membuat d...
Materi HTML Lanjut Materi HTML Lanjut 1. 2 2. 3. 4. 5 5.
List Fontasi Image Hyperlink Form
Tag LIST Tag LIST • •
Membuat Memb at daftar urutan r tan berupa ber pa bullet b ll t dan numbering. b i Terdiri dari 2 (dua) macam, yaitu Unorderlist (untuk Bullet) dan Orderlist (untuk Numbering).
Syntaks : Orderlist (OL)
Unorderlist (UL)
Daftar pertama
Daftar kedua
........
Daftar terakhir
/
Atribut : type
= memilih jenis/bentuk list
Daftar pertama
Daftar kedua
........
Daftar terakhir
Tag LIST Tag LIST • Value l untukk atribut ib type pada d tag list li : – Orderlist (OL) : • • • • •
1 untuk penomoran 1, 2, 3,... I untuk penomoran I, II, III, ... A untuk penomoran A, B, C, ... a untuk penomoran a, b, c, ... i untukk penomoran i, i ii, ii iii, iii ...
– Underlist (UL) : • • •
Disc (default) : lingkaran tidak berlubang Circle untuk lingkaran berlubang S Square untuk t k bentuk b t k kotak k t k
Tag LIST Tag LIST Contoh C t h1: Nama buah :
Apel
Jeruk
Mangga
Nama buah :
Apel
Jeruk
Mangga
H il : Hasil
Tag LIST Tag LIST Contoh C t h2: Nama buah :
Apel
Jeruk
Mangga
Nama buah :
Apel
Jeruk
Mangga
H il : Hasil
Tag FONT Tag FONT •
Digunakan i k untukk memodifikasi difik i fontasi f i
Syntaks : Teks disini Atribut At ib t : size color face
= mengatur ukuran teks = mengatur warna teks = menentukan jjenis font
Tag FONT Tag FONT Contoh : Desain Web Hasil :
Tag IMAGE Tag IMAGE • •
Digunakan Di k untuk t k memasukkan kk gambar b kke ddalam l dokumen d k HTML Tag image tidak memiliki tag penutup
= lokasi dan nama file gambar = menentukan lebar gambar = menentukan tinggi gambar = memberi bingkai pada gambar = memberi ruang kososng di sebelah kanan dan kiri gambar = memberi b i ruang kososng k di sebelah b l h atas t dan d bawah b h gambar = menentukan perataan gambar
Tag IMAGE Tag IMAGE Contoh 1 : Gambar di samping kiri Gambar di tengah tengahGambar di tengah Gambar di samping kanan
Tag IMAGE Tag IMAGE Hasil 1:
Tag IMAGE Tag IMAGE Contoh 2 : Jarak bagian atas Jarak bagian kiriJarak bagian kanan Jarak bagian bawah
Tag IMAGE Tag IMAGE Hasil 2:
Tag HYPERLINK Tag HYPERLINK •
Digunakan i k untukk menghubungkan h b k satu halaman h l web dengan halaman lain, atau satu website ke website b it lain, l i atau t posisi i i lain l i dalam d l satu t halaman. h l
Gambar di samping kiri