HTML akan selalu didahului dengan tag <HTML>. Tag ini akan membuat web browser
mencoba untuk membaca file yang ada didalam tag tersebut untuk ditampilkan dalam web
browser. Pada akhir baris jangan lupa Anda harus selalu mengakhiri tag <HTML> dengan
</HTML>. Sehingga akan kelihatan bahwa pada setiap tag HTML akan selalu :
<HTML>
untuk mengakhiri :
</HTML>
Penulisan Tag HTML adalah incasesensitive. Artinya, <HTML> akan sama dengan <html> atau
<Html>.
Untuk selanjutnya akan dibagi menjadi 2 seksi: head dan body.
<HEAD>
Header akan berfungsi sebagai tanda pengenal pada halaman yang akan Anda buat. Untuk
mendefinisikan header dalam tag HTML maka anda harus menambahkan <HEAD> dan
</HEAD> tag di bawah tag <HTML> dan akan menjadi seperti berikut :
<HTML>
<HEAD>
</HEAD>
</HTML>
<BODY>
Pada bagian body merupakan bagian dimana Anda dapat menuliskan berbagai text yang ingin
Anda tampilkan pada halaman web. Untuk mendefinisikan body harus diketikan tag <BODY>
dan ditutup dengan tag </BODY> dibawah tag header, sehingga akan terlihat :
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka
digunakan tag <TITTLE> dan </TITTLE>. Judul ini akan terlihat pada sudut kiri atas pada
halaman web. Tag <TITTLE > akan berada di dalam tag <HEAD>. Kini saatnya Anda membuat
halaman web Anda yang pertama. Bukalah Notepad dari Start Menu dan ketik kode
html yang Anda inginkan.
HTML Tingkat Lanjut
Mengapa disebut tingkat lanjut ? Hal ini dikarenakan pada bahasan ini akan dilanjutkan
bagaimana menggunakan grafik dalam halaman web. Tabel merupakan salah satu yang akan
digunakan dalam pembuatan web. Dan dalam pembuatan tabel nanti Anda akan mempelajari
bagian yang penting dalam pembuatan web yang dinamis yaitu tabel dan form.
Ordered List <ol>
Digunakan untuk membuat daftar dimana tiap bagian memiliki nomor secara berurut. Tag ini
menggunakan tag <OL> dan diakhiri dengan </OL>. Sedangkan untuk tiap bagiannya
digunakan tag <LI>, dan tidak menggunakan penutup.
Ketika menggunkan OL ini maka penomoran dimulai 1,2,3,… , namun hal ini dapat diubah
dengan menggunkan atribut TYPE pada tag <OL>
TYPE=1; daftar berurut dengan 1, 2, 3,
TYPE=I; daftar berurut dengan I, II, III,
TYPE=a; daftar berurut dengan a, b, c,
Unordered List <ul>
Dalam unordered list, tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list
ditandai dengan bullet yang merupakan default dari unordered list. Untuk membuat tag ini
digunakan tag <UL> dan diakhiri dengan </UL> dan tiap bagiannya digunakan <LI>. Juga bisa
digunakan tanda cakram/disk, lingkaran, dll.
Grafik dalam Halaman Web <img>
gambar yang paling sering digunakan dalam halaman web yaitu GIF dan JPEG, dengan format
penulisan : <IMG SRC=”file_gambar” ALT=”nama_alternatif”>. Atribut SRC digunakan untuk
menentukan sumber gambar. Sedangkan ALT digunakan sebagai teks pengganti gambar.
Ada beberapa atribut dalam tag <IMG> yaitu :
• BORDER: memberikan suatu batas atau border pada gambar defaultnya=0
• HEIGHT,WEIGHT: menentukan tinggi dan lebar gambar dalam pixel
• HSPACE,VSPACE: menentukan jarak spasi horizontal dan spasi vertical antara gambar
dengan obyek sekitarnya.
• ALIGN: mengatur perataan gambar terhadap obyek disekelilingnya.
Table <table>
Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang ringkas dan
mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya </TABLE>.
Tag <TABLE> mewakili beberapa bagian penting :
• <CAPTION> …</CAPTION> digunakan untuk membentuk judul table. Judul table
akan terletak di luar table di bagian atas atau di bagian bawah.
• <TH>…</TH> digunakan untuk meletakkan judul table di bagian paling atas atau
bagian paling kiri dari table.
• <TD> …</TD> digunakan sebagai tempat menulis data atau informasi dalam table.
Table ALIGN dan WIDTH
Dalam perataan horizontal menggunakan atribut ALIGN, dimana bisa bernilai left untuk
perataan kiri, right untuk perataan kanan. Untuk perataan vertical Anda dapat menggunakan
VALIGN, bernilai TOP untuk perataan atas, bernilai MIDDLE untuk perataan tengah dan
BOTTOM untuk perataan bawah. Sedangkan untuk WIDTH digunakan untuk mengatur lebar
table biasanya dinyatakan dalam (%) atau dinyatakan dengan pixel yang berarti ukuran
sesungguhnya.
Table CELLSPACING dan CELLPADDING
Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua
buah cell. CELLPADDING digunakan untuk mengatur jumlah spasi yang terdapat antar batas/
border dengan isi atau teks di dalam cell tersebut.
Table COLSPAN dan ROWSPAN
Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom.
ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu.
Table COLOR
Selain warna pada background, border juga bisa ditentukan warnanya. Untuk background
digunakan atribut BGCOLOR dan untuk memberi warna pada border digunakan atribut
BORDER COLOR.
Form <form>…</form>
Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukan dari user untuk
dikirim ke server. Tag <FORM> membuat kerangka dan tag <INPUT> menyediakan elemen
antarmuka dengan user. Untuk standar penulisan form adalah sebagai berikut :
<FORM METHOD =”POST/GET” ACTION =”URL”>
…
…
…
</FORM>
Atribut METHOD memiliki 2 nilai POST dan GET. Metode GET mengirimkan data pada server
dengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Metode POST mengirimkan
datanya secara terpisah. Jika masukan banyak maka disarankan Anda menggunakan POST.
ACTION akan berisi URL dari program yang dipanggil form tersebut.
Input teks <input type=”text”>
Textbox adalah salah satu jenis control untuk memasukkan data. HTML menyediakan tag
<INPUT> dengan atribut TYPE=”text” untuk membuat kotak input. Untuk atribut VALUE
digunakan untuk memberi nilai input, dan SIZE digunakan utuk menentukan batas terpanjang
dari sebuah masukan.
Input Checkbox <input type=”checkbox”>
Anda juga bisa memberikan atribut TYPE dengan menggunakan Checkbox yang berfungsi
untuk memberikan user pilihan.
Input Radio Button <input type=”radio”>
Jika atribut TYPE=”checkbox” diganti dengan TYPE=”radio”, maka user harus memilih salah
satu pilihan yang tersedia. User tidak bisa memilih lebih dari satu pilihan. Atribut CHECKED
digunakan memberi tanda bahwa pilihan tersebut sedang diaktifkan.
Tidak ada komentar:
Posting Komentar