Sekilas Mengenai HTML

Transkripsi

1 Sekilas Mengenai HTML Halaman di website-website yang sering anda lihat di internet pada umumnya dibuat dengan menggunakan bahasa HTML. Tidak seperti bahasa lainnya, untuk membuat halaman HTML, kita tidak memerlukan program khusus. Cukup dengan bermodalkan program Notepad dari Windows atau word editor lainnya, kita dapat membuat sebuah halaman HTML. Ya benar, HTML hanya menggunakan karakter-karakter latin biasa, sama seperti yang kita gunakan sehari-hari. Karakter-karakter tersebut nantinya akan diterjemahkan oleh browser (Internet Explorer dan lainnya) menjadi sebuah objek tertentu. Struktur HTML Pada HTML ada yang disebut dengan sebuah tag. Tag adalah sebuah perintah yang diapit oleh tanda kurung siku. Tag penutup adalah tag yang menentukan batas akhir tag pertama. Mirip dengan tag yang pertama, hanya saja didalamnya ditambahkan tanda garis miring ( / ). Sebuah tag pada umumnya harus ditutup dengan tag penutup yang sejenis, tapi ada juga yang tidak harus ditutup. Contoh : Sebuah tag <html> harus ditutup dengan </html> Sebuah tag <hr> tidak perlu ditutup dengan </hr> Sekarang kita akan melihat struktur yang esensial (harus digunakan) dalam sebuah halaman HTML. Ada 3 bagian utama dalam struktur HTML : 1. Tag HTML 2. Tag Head dan Title 3. Tag Body Struktur bakuya adalah sebagai berikut : <html> <head><title>judul Halaman</title></head> <body> Isi Halaman </body> </html> Kini bukalah sebuah program text editor, misalnya Notepad. Biasanya terletak di Start > Programs > Accessories. Sekarang berdasarkan struktur yang ada di atas, buatlah sebuah halaman HTML seperti di bawah ini :

2 <html> <head><title>hello World!</title></head> <body> Hello World! </body> </html> Setelah itu pilih File > Save dan pada saat anda diminta menuliskan nama filenya, tambahkan ekstensi htm atau html setelah nama filenya. Misalkan kita save menjadi belajar.html. Jangan lupa, kalau anda tidak menambahkan.html dibelakangnya, maka browser tidak akan mengenali halaman HTML melainkan hanya menampilkan apa yang anda ketik, yaitu sebagai teks biasa. Setelah disave, bukalah browser anda, misalkan Internet Explorer. Pilih File > Open dan carilah file belajar.html ditempat anda menyimpannya tadi. Lalu pilih OK. Hasilnya kirakira akan terlihat seperti gambar di bawah ini : Selamat, kini anda sudah tahu struktur dasar dari sebuah halaman HTML.! Tag HTML memerintahkan browser untuk mengenali halaman ini sebagai suatu halaman HTML! Tag Head adalah tempat dimana kita menempatkan script ataupun judul halaman HTML! Tag Title adalah tempat dimana kita menempatkan judul halaman kita yang nantinya akan muncul di bagian atas browser (lihat gambar)! Tag Body adalah tempat dimana kita menempatkan isi dari suatu halaman (teks, gambar, tabel, dll.) Anda dapat mencoba mengganti-ganti atau sekedar menambahkan isi dari halaman tadi dan lihatlah dimana perbedaannya.

3 Menggunakan Tag-Tag HTML Umum Sekarang kita coba menambahkan sedikit bumbu-bumbu ke dalam dokumen belajar.html tadi. Bukalah file tadi dengan menggunakan Notepad, ATAU pada browser yang sudah membuka file belajar.html tadi, pilihlah View > Source. Sekarang kita akan menambahkan beberapa tag baru ke dalamnya, yaitu : <hx>, untuk membuat bentuk judul ; dimana x bernilai 1-6 <hr>, untuk membuat garis horizontal <br>, untuk melanjutkan ke baris di bawah baris sebelumnya <font>, untuk mendefinisikan jenis font yang akan digunakan <p>, untuk membuat paragraf baru <img>, untuk memanggil file gambar <a href>, untuk membentuk hyperlink ke halaman lain Perhatikan bahwa tag yang berwarna merah artinya harus ditutup, sedangkan yang biru tidak perlu. Sekarang buatlah file belajar.html menjadi seperti di bawah ini <html> <head><title>hello world!</title></head> <body> <h1>hello world!</h1> <hr color="blue"> <p align="left">sekarang saya sedang belajar HTML. <br> Kunjungi <a href=" target="_blank">website kami</a> </p> <p align="center"><img src="logopax1.gif"></p> <hr color="blue"> </body> </html> Kemudian save dan bukalah dengan browser, ATAU refresh browser yang sudah membuka file belajar.html. Jadinya akan seperti gambar di bawah ini :

4 Gampang bukan? Sekarang kita akan membahas masing-masing tag tadi <h1>hello World!</h1> Teks yang diapit oleh tag <h1> akan membentuk tulisan besar dan tebal seperti judul. Angka 1 tersebut bisa diganti menjadi <h2>,<h3> sampai <h6>. Besar tulisan akan semakin kecil bila angkanya semakin besar. <hr color="blue"> Tag ini akan membentuk garis horizontal sepanjang layar browser anda. Color= blue menyatakan garis tersebut akan diberi warna biru. <p align="left"> </p> Menyatakan paragraf baru dimana semua bagian yang diapit oleh tag ini akan dirata kiri. <p align= center > menyatakan akan dirata tengah. <br>kunjungi Menyatakan bahwa teks Kunjungi dan selanjutnya akan dibuat dibawah baris sebelumnya sejauh 1 spasi. <a href=" target="_blank">website kami</a>

5 Membuat hyperlink ke website pada teks website kami dimana target= _blank menyatakan bahwa apabila link tsb di klik, maka browser akan membuka window baru. <img src="logopax1.gif"> Memanggil gambar logopax1.gif untuk ditampilkan di browser. File gambar harus berada dalam folder/directory yang sama dengan file belajar.html. Untuk penggunaan yang tidak berada dalam folder yang sama akan dibahas nanti.!! Gunakan tag <p> dan <br> dengan efektif. Kalau kita ingin membuat suatu elemen di bawah baris yang sedang dikerjakan, kita akan memakai tag <br>, sedangkan kalau kita mau menggunakan paragraf baru atau ingin melompat 1 baris, gunakan tag <p>. Bullet/Numbering Sekarang kita akan menggunakan tag <UL> dan <LI> yang dapat kita gunakan untuk membuat bullet/numbering. 1. Tag <UL> berfungsi untuk membuat kepala bullet/number. 2. Tag <LI> berfungsi untuk membuat bullet/number dalam ruang lingkup <UL> Contoh : Tambahkan teks berikut pada file belajar.html <UL type=1>hari dalam Seminggu <LI>Senin <LI>Selasa <UL type=i> <LI>Janji kencan </UL> <LI>Rabu </UL> Hasilnya akan tampak seperti bawah ini Hari dalam Seminggu 1. Senin 2. Selasa i.janji kencan 3. Rabu Perhatikan tag <UL> yg terdapat pada hari Selasa. Di sini ia memberitahukan kepada browser untuk menuliskan <LI>Janji kencan sebagai bagian dari hari Selasa yang didefinisikan dalam <LI>Selasa

6 Tag <UL> dan <IL> dapat diikuti type yg menunjukkan jenis bullet/item yang akan digunakan. Seperti pada contoh di atas, kita memakai : <UL type=1>,berarti kita akan memulai penomoran mulai dari 1,2,3, dst.. <UL type=a>,berarti kita akan memulai penomoran mulai dari A,B,C,dst. <UL type=a>,berarti kita akan memulai penomoran mulai dari a,b,c, dst. <UL type=i>,berarti kita akan memulai penomoran mulai dari i, ii, iii, dst. Kalau kita tidak mendefiniskan type nya, maka otomatis akan dibuat lingkaran kecil (bullet) pada tiap komponen <LI>. Tag <UL> harus ditutup dengan </UL> sedangkan <LI> tidak perlu ditutup dengan </LI> Tabel Nah, sekarang kita akan belajar menggunakan tabel. Pembuatan tabel dapat dilakukan dengan menggunakan tag <table>, <td> dan <tr>. Tabel banyak digunakan untuk membuat layout atau membantu penempatan komponenkomponen yang terdapat dalam suatu halaman HTML. Katakan saja kita ingin membuat halaman HTML seperti di bawah ini : Halo Halo Selamat datang di homepage saya Semoga anda menyukainya. <foto anda disini> Kita tidak dapat membuat nya tanpa menggunakan tabel. Oleh karena itu kita memerlukan tabel untuk membantu merapikan tampilan halaman kita. Pembuatan tabel dimulai dengan perintah <table> dan ditutup dengan </table>. Sedangkan untuk membuat baris dan kolomnya kita menggunakan <tr> dan <td>. Pemakaian <tr> dan <td> juga harus ditutup dengan </tr> dan </td> Buatlah sebuah halaman HTML baru menggunakan Notepad seperti di bawah ini <html> <head><title>tabel</title> </head> <body bgcolor= text= FFFFFF > <table width= 90% > <tr>

7 </tr> <tr> </tr> <tr> </tr> </table> </body> </html> <td>baris 1, kolom 1 </td> <td>baris 1, kolom 2 </td> <td bgcolor= #0066CC >Baris 2, kolom 1</td> <td bgcolor= #0066CC >Baris 2, kolom 2</td> <td>baris 3, kolom 1 </td> <td>baris 3, kolom 2 </td> Kemudian Save menjadi belajar2.html, dan coba buka dengan browser. Hasilnya akan menjadi halaman dengan warna latar hitam dan warna teks putih. Tabelnya juga terlihat dimana pada kedua kolom baris kedua, warna latarnya akan berwarna biru muda. Mari kita bahas tentang halaman tersebut : 1. <body bgcolor= # text= FFFFFF > Bagian ini menunjukkan bahwa warna latar (bgcolor) akan dibuat berwarna hitam (#FFFFFF adalah kode heksa untuk warna hitam, bisa juga memakai black ) dan warna teks untuk seluruh halaman dibuat berwarna putih (#FFFFFF = warna putih). 2. <table width=90%> Bagian ini adalah dimana kita memulai membuat tabel. Komponen width= 90% menunjukkan bahwa lebar tabel yang akan kita buat adalah maksimum 90 persen dari lebar browser yang sedang kita gunakan. Bila jendela browser dikecilkan, maka tabel dan komponen di dalamnya (teks) akan otomatis menyesuaikan. 3. Tag <tr> Bagian ini adalah hal yang harus pertama kali kita gunakan. Tag <tr> berfungsi membuat baris baru dalam tabel. Kita harus membuat baris terlebih dahulu sebelum membuat kolom : <tr> </tr> <td> </td> <- terlebih dahulu dibuat <- dibuat setelah <tr> 4. Tag <td>

8 Bagian ini untuk membuat kolom dalam satu baris. Satu lingkup <td> </td> menyatakan 1 buah kolom. Jadi kalau kita buat dua buah lingkup <td> akan ada 2 kolom dan bila 3 lingkup akan ada 3 buah kolom, dan seterusnya.!! Sama seperti tag <body>, maka tag <table>, <tr>, dan <td> sama-sama bisa menggunakan atribut bgcolor=#xxxxxx untuk membuat warna latarnya menjadi berbeda. Lihat contoh di atas, yaitu penggunaan bgcolor pada <td> Bagaimana kalau kita ingin mengatur perataan elemen pada tabel? Gampang. Kita cukup menambahkan atribut align= dalam tag <table>, <tr> dan <td> untuk membuat perataan sesuai yang diinginkan. Contohnya : <table align= center >, berarti tabel (bukan isinya) akan dibuat rata tengah <tr align= left >, berarti pada baris tersebut seluruh isinya akan rata kiri, termasuk isi pada kolom-kolom yang terdapat pada baris tersebut. <td align= right >, berarti pada kolom tersebut seluruh isinya akan rata kanan. Tabel secara default menggunakan border/garis pinggir. Kita dapat mengatur tebal garis pinggir tersebut melalui atribut border= Contoh : <table border= 2 >, berarti garis pinggir tabel dibuat setebal 2 pixel <table border= 0 >, berarti tabel tidak memakai garis pinggir. Hal ini banyak digunakan dalam tabel yang berfungsi untuk membantu merapikan halaman. Bersambung

9