This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
. Dengan tag ini kita bisa menentukan alignment (posisi) dari dokumen HTML. Untuk mengatur posisi tulisan kita menggunakan atribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. Selain tag
ada pula tag
untuk pindah baris,
untuk membuat kutipan,untuk menampilkan text sama dengan yang anda ketikkan dalam dokumen HTML, misal anda mengetikkan : <TITLE>TEST Hallo Hallo Hallo
Maka yang akan ditampilkan oleh browser adalah HalloHalloHallo
Gambar 1. Tampilan Latihan 1
3
Alga Musa
4
Hal itu terjadi karena HTML tidak mengenali tombol Enter sehingga tombol tersebut diabaikan. Untuk mengatasi hal tersebut maka kita menggunakan tagtersebut. <TITLE>Latihan Menggunakan ParagrafTulisan ini rata kanan.
Tulisan ini akan berada di tengah dokumen
Tulisan ini rata kiri
Hallo,
Apakah anda sudah bisa HTML
Kalau sudah bisa, baguslah
<---------> | u u | | u | | --| <--------->
Alga Musa
5
Untuk mengatur jenis, ukuran, warna suatu font, kita bisa menggunakan tag , tag ini memiliki beberap atribut diantaranya FACE dan COLOR. Atribut FACE digunakan untuk menentukan jenis font yang akan kita gunakan, semisal kita akan menggunakan jenis font Comic Sans MS, maka kita dapat menuliskan . Sedangkan COLOR berfungsi untuk menentukan warna font, bisa dengan cara menyebutkan nama warna seperti red, green dan blue atau menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk red, 00FF00 untuk green dan 0000FF untuk blue. Ada juga atribut SIZE untuk menentukan ukuran font <TITLE>Latihan Font Ini Menggunakan Font Comic Sans, warna merah dan ukurannya 1
Ini menggunakan Font Monotype Corsiva, warna biru dan ukurannya 3
Gambar 2. Tampilan Latihan 2
Font
Gambar 3. Contoh Latihan Font
Alga Musa
6
Warna Dokumen Suatu dokumen web akan terlihat lebih menarik jika diberi warnawarna atau gambar sebagai backgroundnya. Untuk itu, pada HTML tersedia atribut-atribut untuk mengatur hal tersebut, atribut tersebut diletakkan pada tag sehingga efeknya akan dapat dilihat di seluruh dokumen. Atribut yang digunakan dalam tag yaitu : Atribut Fungsi BGCOLOR Menentukan warna background suatu halaman web BACKGROUND Menentukan gambar/images yang akan dipasang sebagai background halaman web TEXT Menentukan warna teks normal LINK Menentukan warna teks yang berfungsi sebagai link ALINK Menentukan warna teks link ketika diklik VLINK Menentukan warna teks link ketika selesai diklik Link
Dalam web, selalu ada yang dinamakan link, link berfungsi menghubungkan antara satu halaman dengan halaman lainnya. Untuk link ini HTML menyediakan tag (Anchor). Tag memiliki beberapa atribut mis : HREF untuk menghubungkan antara satu halam dengan halaman lainnya, dan NAME untuk memberikan nama pada suatu paragraf/tulisan dalam dokumen HTML, sehingga mempermudah navigasi dalam suatu halaman web. <TITLE>Latihan Link Bagian ini ditandai dengan top Link ke latihan1.html Link ke tempat yang ditandai
List
Terkadang dalam website yang kita buat, kita ingin membuat sebuah daftar, misalnya saja kita membuat daftar barang inventaris sbb : • Meja • Kursi
Alga Musa
7
• Komputer HTML menyediakan tag untuk membuat list seperti diatas. Jenis list dalam HTML dibagi menjadi : • Ordered List • Unordered List • Directory List • Menu List • Definition List List yang paling sering dipakai adalah Ordered List dan Unordered List, untuk Directory List, Menu List dan Definition List jarang sekali dipakai. Ordered List Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list diawali dengan tagdan setiap item dalam list selalu diawali dengan
- . List yang memakai tag
ini tidak harus 1,2,3,dst tetapi bisa saja a,b,c,dst, i,ii,iii,dst, tergantung pada atribut TYPE yang dituliskan dalam tag
. Tipe penomoran yang dimiliki oleh tag
yaitu : • 1 -> 1,2,3,… • A -> A,B,C,… • A -> a,b,c,… • I -> I,II,III,… • I -> i,ii,iii,… Unordered List Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai setiap item dalam list. Unordered list diawali dengan tag
. Sama seperti dalam Ordered list, pada Unordered list setiap item dalam list selalu diawali dengan
- dan juga memiliki beberapa type, yaitu : • TYPE = circle -> Tanda lingkaran • TYPE = disk -> Tanda cakram • TYPE = square -> Tanda kotak <TITLE>Latihan menggunakan List Dibawah ini menggunakan Ordered List
Dibawah ini menggunakan Unordered List
- Apel
- Mangga
- Semangka
Alga Musa
8
Dibawah ini menggunakan Ordered List mulai 10
- Apel
- Mangga
- Semangka
- Sepuluh
- Sebelas
- Duabelas
Gambar 4. Contoh Penggunaan List MENAMPILKAN GAMBAR Suatu situs web yang bagus, biasanya menampilkan gambargambar untuk menarik pengunjung masuk kedalamnya, bayangkan saja jika situs tersebut hanya menampilkan tulisan saja, tentu amat membosankan. HTML menyediakan fasilitas untuk menampilkan gambar di halaman web kita menggunakan tag . Tag memiliki bermacam atribut seperti SRC yang digunakan untuk menentukan lokasi gambar yang akan ditampilkan, ALT sebagai teks pengganti apabila ada browser yang tidak mendukung grafik, BORDER berfungsi untuk memberikan suatu border di sekeliling gambar, Height dan weight berfungsi untuk menentukan tinggi atau lebar suatu gambar dalam halaman web kita (dalam ukuran pixel), HSPACE dan VSPACE berfungsi menentukan jarak spasi dengan objek disekitar gambar secara horiontal maupun vertikal.
Alga Musa
9
<TITLE>Latihan Penggunaan IMG KlikPHP.com adalah situs yang ditujukan bagi para penggemar/pemakai PHP di Indonesia.
Anda dapat menemukan Tutorial, Tips 'n Trick, Contoh Script, berdiskusi masalah PHP, dll.
TABEL
Gambar 5. Contoh penggunaan tag IMG
Untuk membuat tampilan website yang bagus, kebanyakan para desainer web menggunakan tabel untuk mempermudah pengerjaan mereka, coba saja lihat situs www.detik.com, www.kompas.com, www.astaga.com, dan masih banyak lagi situs yang menggunakan tabel untuk mempercantik website-nya. Untuk membuat tabel, HTML menyediakan tag. Dalam tag
terdapat banyak atribut, yaitu : Atribut Fungsi Menentukan ukuran border/garis BORDER tabel WIDTH Menentukan lebar tabel HEIGHT Menentukan tinggi tabel BGCOLOR Menentukan background tabel Menentukan gambar yang BACKGROUND digunakan untuk background tabel
Alga Musa
10
Untuk membuat baris, setelah menuliskan tagmaka digunakan tag
. Sedangkan untuk membuat kolom digunakan tag . Sebagian besar atribut dalam tag dapat digunakan dalam tag
maupun dalam tag . Penggabungan baris/kolom Untuk menggabungkan baris/kolom (merge) digunakan atribut COLSPAN dan ROWSPAN. COLSPAN digunakan untuk menggabungkan beberapa kolom menjadi 1 sedangkan ROWSPAN menggabungkan beberapa baris menjadi 1. CELLPADING dan CELLSPACING CELLPADING digunakan untuk mengatur spasi antara border dengan tulisan, sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua buah sel. <TITLE>Contoh Penggunaan Tabel
Kelas Ket 1 2 Andi Nina Lunas
Alga Musa
Form
11
Gambar 6. Contoh Penggunaan Tabel
Untuk melakukan interaksi dengan user, biasanya suatu situs menggunakan form untuk menerima masukan/input dari user dan memproses hasil inputan tersebut di server. Misalkan saja :
Lusiana
Gambar 7. Web dengan Form Dalam gambar diatas dapat dilihat untuk nama, kita menggunakan tipe textbox, password menggunakan tipe password, untuk jenis kelamin menggunakan radio button dan untuk hobi menggunakan checkbox. Untuk mengatur tipe form, menggunakan atribut TYPE, struktur form dapat dibuat sbb :
Alga Musa
12
Untuk membuat form seperti pada gambar.7 dalam HTML dapat ditulis : <TITLE> Penggunaan Form