1 HTML HTML(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web. Meskipun saat ini sudah ban...
HTML HTML(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web. Meskipun saat ini sudah banyak aplikasiaplikasi yang menawarkan kemudahan dalam pembuatan halaman web seperti a DreamWeafer ataupun Frontpage, sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML.
DASAR DASAR HTML HTTP(Hypertext Transfer Protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini akan mentransfer dokumendokumen web yang berformat HTML. Elemen-elemen yang terdapat didalam HTML sering disebut sebagai tag. Elemen HTML biasanya berupa tag-tag yang saling berpasangan, setiap tag di tandai dengan simbol “ < ” dan “ > ”, dan pasangannya ditandai dengan “ / ” . Misalnya pasangan dari tag <example> adalah . Selain tag atau elemen, terdapat juga istilah atribut, yang berfungsi untuk mengatur tag atau elemen tersebut. Jadi misalnya elemen <example> bila ditulis dengan atribut-atributnya adalah sebagai berikut <example atribut1=”nilaiAtribut1” atribut2=”nilaiAtribut2” …. >. Dalam menuliskan tag-tag HTML anda tidak perlu khawatir dengan perbedaan huruf besar maupun huruf kecil karena tag-tag HTML bersifat incaseinsensitive. Sebagai catatan, dalam penulisan pembahasan mengenai HTML ini mungkin tidak akan selengkap yang anda harapkan. Namun setidaknya beberapa contoh yang tertulis di buku ini akan dapat anda pahami. Penjelasan lengkap mengenai HTML dapat anda baca pada buku khusus yang membahas tentang HTML.
STRUKTUR DASAR HTML Sebelum mempelajari HTML, akan terlebih dahulu diulas mengenai aturan penulisan dalam buku ini. Script dituliskan
Pak Guru Eka
1
melalui text editor seperti Notepad, kemudian disimpan dengan ekstensi .htm atau .html. kemudian untuk melihat hasilnya langsung melalui web browser, seperti Internet Exploler atau web browser yang lain dengan mengetikkan lokasi penyimpanan file HTML anda atau anda simpan pada root web server sehingga dapat anda panggil dengan nama komputernya dan nama filenya. Sebelum menuliskan script-script HTML dan PHP, terlebih dahulu anda install webServer, php dan mySql. Atau anda langsung menggunakan AppServ. Setiap dokumen HTML memiliki struktur dasar sebagai berikut : Contoh01.html -berisi yang akan luncul di bagian judul web browser -berisi tentang text, gambar, atau apapun yang akan ditampilkan di halaman web- Hasil dari script diatas adalah sebagai berikut : title File dipanggil melalui address
body
Gb. 1.1: Struktur dasar HTML
Pak Guru Eka
2
Seperti yang telah anda lihat, tag HTML akan diawali dengan tag dan diakhiri . Didalam tag html terdapat bagian header yang tandai dengan tag … yang mana script yang tertulis pada bagian ini tidak akan tampil pada web broeser seperti … dan yang lain. Dan bagian body yang ditandai dengan tag … , bagian body nantinya adalah bagian yang akan sering anda gunakan. Dalam bagina body ini anda akan melakukan desain halaman web yang akan menampung bergai macam format teks dan gambar.
KODE WARNA Pengaturan pengunaan warna di halaman HTML, dapat anda gunakan mode kombinasi dari warna dasar (RED, GREEN, BLUE) yang mana tiap-tiap kode warna ditampilkan dua digit nilai hexadesimal. Setiap dua bagian kode mewakili banyaknya intensitas warna. Supaya lebih jelasnya lihat tabel dibawah ini: Table 1.1: Kode Warna
Warna White Black Red Green Blue Yellow Magenta Cyan
Kode #FFFFFF #000000 #FF0000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF
PENGATURAN PROPERTI BODY Pengaturan halaman web dapat anda lakukan pada tag dengan menambahkan bebrapa atribut didalamnya. Sebagai contoh adalah mengatur warna latar balakang, warna teks, warna link, dll. Atribut elemen body : Background = lokasi dan nama file (latar belakang image) Bgcolor = warna (warna latar belakang) Text = warna ( warna teks)
Pak Guru Eka
3
Link = warna (warna link) Vlink = warna (warna visited link) Alink = warna (warna active link) Cobalah script berikut : Contoh02.html -berisi yang akan luncul di bagian judul web browser- -berisi tentang text, gambar, atau apapun yang akan ditampilkan di halaman web-
Gb. 1.3: Penggunaan elemen pada body.
HEADING, PARAGRAPH, HORISONTAL RULER DAN BREAK Tag heading digunakan untuk memformat judulsub judul dari suatu halaman web. Di HTML terdapat enam buah macam heading dimulai dari
hingga
yang mana tiap-tiap heading akam mempunyai ukuran sendirisendiri. Tag paragraph
digunakan layaknya pengaturan sebuah paragraf dalam halaman web. Dalam elemen paragraf tersebut dapat anda masukkan atribut align = [left / right / center] yang berfungsi untuk mengatur perataan paragraf. Jika nilai atributnya adalah left maka paragraf tersebut akan rata kiri, jika bernilai center maka paragraf tersebut akan rata
Pak Guru Eka
4
tengah dan jika bernilai right maka akan rata ke sebalah kanan. Tag break berfungsi untuk memberikan baris baru di halaman web. Tag ini tidak memerlukan penutup seperti tag yang lain. Tag horisontal ruler
digunakan untuk memberikan garis horisontal. Tag ini juga tidak memerlukan penutup. Anda dapat menambahkan beberapa atribut pada tag ini. Atribut tag horisontal ruler : Align = [left / right / center] Size = pixel (tebal garis) Width = n% (panjang garis) Salin script berikut untuk mencoba heading, paragraf, break dan horisontal ruler. Jangan lupa untuk menyimpannya dengan ekstensi .html atau .htm. setelah itu cobalah anda ubah nilai atribut-atributnya dan perhatikan perubahannya. Contoh03.html contoh-03
PENGERTIAN HTML
HTML(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web.
Meskipun saat ini sudah banyak aplikasi-aplikasi yang menawarkan kemudahan dalam pembuatan halaman web seperti a DreamWeafer ataupun Frontpage, sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML.
perangkat yang kita butuhkan untuk belajar web adalah : Notepad Php AppServ
Pak Guru Eka
5
Hasil tampilannya adalah seperti berikut :
Gb. 1.4: Penggunaan Heading, Paragraf, Break, Horisontal Ruler
PENGATURAN KARAKTER Karakter yan terdapat di halama HTML juga dapat anda atur sesuai dengan desain yang telah anda buat, baik dari ukuran, jenis maupun warna dengan menggunakan tag … . Atribut elemen font : Size = angka (ukuran huruf) Color = warna (warna huruf) Face = jenis huruf (jenis huruf) Elemen karakter : … = huruf tebal … = huruf miring … = huruf garis bawah <sub> … = huruf subscript <sup> … = huruf superscript Tulislah script berikut ini untuk mengetahui penggunaan tag font dan tag ragam karakter. Dan lihat hasilnya melalui web browser.
Pak Guru Eka
6
Contoh04.html contoh-04
PENGERTIAN HTML
HTML<sup>(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web.
Meskipun saat ini sudah banyak aplikasi-aplikasi yang menawarkan kemudahan dalam pembuatan halaman web seperti a <sup>DreamWeafer ataupun Frontpage, sebaiknya anda mengenal dan menguasai tag-tag HTML terlebih dahulu karena mau tidak mau anda akan bekerja dalam mode editor bilamana akan menyisipkan script program dalam script HTML.
perangkat yang kita butuhkan untuk belajar web adalah : Notepad Php AppServ
Pak Guru Eka
7
Gb. 1.5: Pemformatan karakter
LISTING Elemen listing
digunakan untuk menampilkan informasi dalam bentuk list atau daftar. Di dalam HTML dikenal dua macam bentuk list yaitu list dengan format bullet (unordered list
) dan list dengan format nomor (ordered list ). Adapun atribut yang terdapat didalam elemen list adalah : Type = [1 / A / a / I / i] (untuk list dengan format nomor) Type = [disc / square / circle] (untuk list dengan format bullet) Salin script HTML dibawah ini untuk mencoba tag listing dengan format unordered list maupun ordered list.
Pak Guru Eka
8
Contoh05.html contoh-05
Ardhi”ant” Soft
Buku yang sedang kami rancang :
Microsoft Office :
MS Word.
MS Exel.
MS Access.
MS Power Point.
Programming :
Visual Basic.
Visual Foxpro.
Visual C++.
Delphi.
Java.
Data Base :
SQL Server.
MySQL.
Oracle.
Internet dan Web Development :
HTML.
PHP.
WAP.
Macromedia Dreamweaver.
Pak Guru Eka
9
Gb. 1.6: Penggunaan elemen listing.
MENAMPILKAN GAMBAR Di halam web, anda juga dapat menampilkan gambar dengan format JPG atau GIF dengan menggunakan tag . Penulisan tag ini di ikuti dengan beberapa atribut yaitu : Src = lokasi dan nama file gambar. Alt = teks alternatif. Width = pixel (lebar gambar) Height = pixel (tinggi gambar) Align = [top / middle / bottom / left / right] (perataan gambar) Border = pixel (garis tepi gambar) Untuk lebih jelasnya dalam penggunaan tag img, salinlah script dibawah ini dan amati hasilnya, serta alkukan perubahan-perubahan pada atribut-atribut di dalam tag img tersebut.
Pak Guru Eka
10
Contoh06.html contoh-06
Gb. 1.7: Menampilkan gambar ke halaman web.
MEMBUAT LINK Elemen link difungsikan untuk menghubungkan antara halaman web yang satu dengan halaman web yang lain atau ke URL yang lain. Format tag link adalah sebagai berikut : text HalamanTujuan berisi lokasi dan nama file yang akan dituju, sedangkan text berisi sebuah teks yang akan ditampilkan pada halaman web sebagai text link atau penghubung. Untuk mencoba membuat link, yang anda perlikan adalah membuat dua buah file HTML. Sebagai contoh, tulislah script dibawah ini dan kemudian simpan dengan nama contoh07a.html.
MEMBUAT TABEL Tabel digunakan untuk menampilkan data dalam bentuk kolom dan baris yang mana data tersebut dimasukkan kedalam kotak yang disebut sel. Untuk membuat tabel di halaman HTML, gunakan elemen
…
. Elemen tabel berisi properti
…
yang difungsikan untuk membuat baris (table row) dan properti
…
yang dogunakan untuk mengisikan data (table data). Struktur dasar tabel dapat anda lihat di script berikut ini : Contoh08.html contoh-08
Hasil dari script diatas sepertinya memang tidak tampak selayaknya sebuah tabel, hal ini dikarenakan atribut-atribut yang terdapat didalam tag table belum diatur sehingga secara otomatis akan di set dengan nilai defaultnya. Adapun atribut elemen tabel dalah sebagai berikut : Caption = teks (judul tabel) Width = panjang (lebar tabel dalam pixel atau persen) Height = panjang (tinggi tabel dlam pixel atau persen) Border = pixel (tebal garis tepi) Cellspacing = pixel (spasi antar cell) Cellpadding = pixel (spasi di dalam cell) Align = [left / center / right] (perataan tabel) Bgcolor = warna (warna latar belakang tabel) Selain itu anda dapat mengatur tabel, lebih spesifik anda juga dapat mengatur kolom dan baris melalui atribut yang terdapat pada elemen tabel row dan table data. Atribut table row : Align = [left / center / right] (perataan baris cell secara horisontal) Valign = [top / middle / bottom] (perataan baris cell secara vertikal) Bgcolor = warna (warna latar belakang baris) Atribut table data : Rowspan = angka (baris yang di-merger oleh cell) Colspan = angka (kolom yang di-merger oleh cell) Align = [left / right / center] (perataan horisontal)
Pak Guru Eka
14
Valign = [top / bottom / middle] (perataan vertikal) Width = pixel (lebar cell dalam pixel atau persen) Height = pixel (tinggi cell dalam pixel atau persen) Bgcolor = warna (warna latar belakang cell) Untuk mencoba, salinlah script berikut dan lihat hasilnya melalui web browser. Contoh09.html contoh-09
Tabel percobaan
hasil colspan
hasil align right
hasil align right
hasil rowspan
baris ke-3, kolom ke-2
baris ke-4, kolom ke-2
Gb. 1.10: Penggunaan atribut dalam table, table row dan table data
Pak Guru Eka
15
MEMBUAT FORM Elemen FORM dalam HTML merupakan bagian terpenting dalam pemrograman, khususnya dalam pembuatan aplikasi yang berbasiskan web. Form dalam HTML sama layaknya form di bahasa pemrograman yang lain seperti Delphi, VB, Foxpro, dll. Elemen ini juga menyediakan properti textbox, combo box, button, check bok dan option button. Untuk membuat sebuah form, anda cukup dengan menggunakan tag
. Selain atribut dan properti yang dimiliki form, anda juga dapat menuliskan teks dan menambahkan image didalamnya. Atribut elemen form : Action = lokasi dan nama file (file yang menangani form) Method = [get / post] (methode HTTP untuk men-submit form) Berikut adalah properti beserta atribut properti yang dimiliki oleh elemen form : 1. Text Box Digunakan untuk memasukkan input yang berupa teks. Size = ukuran dari text box dalam karakter. Maxsize = maksimal banyaknnya karakter yang dapat diterima. Name = nama dari variabel text box yang dikirim ke suatu aplikasi. Value = nilai yang ditampilkan dalam text box sebagai nilai default. 2. Password Digunakan untuk memasukkan password Size = ukuran dari text box dalam karakter. Maxsize = maksimal banyaknnya karakter yang dapat diterima. Name = nama dari variabel text box yang dikirim ke suatu aplikasi. 3. Hidden Digunakan untuk mengirim data ke suatu aplikasi yang tidak untuk dilihat oleh browser. Name = nama yang dikirim ke suatu aplikasi. Value = nilai dari variabel yang dikirim.
Pak Guru Eka
16
4. Check Box digunakan untuk melakukan pilihan yang lebih dari satu. Name = nama dari suatu variabel yang dikirim ke suatu aplikasi. Value = nilai dari suatu variabel. Checked (check box yang sudah ditandai) 5. Radio Button Digunakan untuk melakukan pilihan yang hanya satu pilihan saja. Name = nama dari suatu variabel yang dikirim ke suatu aplikasi. Value = nilai dari suatu variabel. Checked (check box yang sudah ditandai) 6. Push Button Elemen ini biasanya digunakan dengan java script atau VBscript untuk menghasilkan sebuah aksi. Name = nama dari variabel yang dikirim ke suatu aplikasi. Value = label teks di atas tombol. 7. Submit Digunakan unutk mengirimkan data ke suatu aplikasi yang nilai FORMnya sudah diatur dalam atribut ACTION. Name = nama variabel yang dikirim ke suatu aplikasi. Value = label teks di atas tombol. 8. Image Submit Button Digunakan untuk menggantikan tombol standar submit. Name = nama dari variabel yang dikirim ke suatu aplikasi. 9. Reset Digunakan untuk mereset semua masukan di dalam form. Value = text label di atas tombol. 10. Text Area Elemen yang digunakan menuliskan teks secara leluasa seperti Notepad atau sebuah listbox. Name = nama dari variabel yang dikirimkan ke suatu aplikasi. Rows = panjang baris dalam karakter.
Pak Guru Eka
17
Cols = tinggi dalam karakter. 11. Select <select> … Digunakan seperti layaknya combo box, yang mana didalamnya terdapat properti
