Belajar HMTL - Dasar Persiapan • • •

•

Biarkan window browser ini tetap terbuka. Buka program aplikasi pengolah kata seperti Wordpad (MS-Windows), vi (Unix/Linux), Edit (DOS) yang dapat menyimpan file dalam format teks ASCII biasa. Atur ukuran dan letak window browser dan window pengolah kata agar keduanya dapat mudah terlihat, sehingga kita dapat belajar membuat file HTML sambil membaca panduan pada browser ini. Sintaks tag-tag di dalam tulisan ini merupakan tag umum dengan atribut umum pula. Untuk lebih detailnya dapat dicari menggunakan web search dengan search word "HTML Reference".

Pengenalan HTML singkatan dari Hyper Text Mark-up Language. Merupakan bahasa pemrograman yang biasa digunakan untuk membuat file-file internet atau web. File-file ini biasanya berekstensi .htm atau .html. File HTML sebenarnya berformat teks ASCII biasa sehingga dapat dibuka, dibaca, dan diedit menggunakan program aplikasi pengolah kata yang umum seperti Wordpad, MS-Word, vi, edit dan sebagainya. Untuk mengakses file-file HTML biasanya digunakan program internet browser seperti Internet Explorer, Netscape, Opera dan sebagainya. Kelebihan HTML adalah kita dapat membuat "link" ke sebuah objek. Objek tersebut dapat berupa sebuah file teks biasa, program, arsip, multimedia maupun ke situs-situs internet lainnya. HTML dikembangkan oleh Tim Beners-Lee saat dia bekerja di CERN (sebuah laboratorium fisika partikel) di Jenewa Swiss.

Tag HTML Tag HTML merupakan kode khusus yang menunjukkan elemen-elemen khusus dalam file HTML. Format tag : isi_elemen

Tag harus selalu berpasangan. Contoh, untuk menampilkan header (tulisan berukuran besar dan tebal) :

Judul-Judulan

Perhatikan bahwa tag

selalu berpasangan dengan

. Demikian pula dengan tag-tag yang lainnya. Penulisan tag dapat menggunakan huruf kecil maupun huruf kapital atau campuran keduanya. Tag-tag yang wajib ada dalam sebuah file HTML adalah : • • • •

menunjukkan bahwa file yang bersangkutan adalah file HTML. menunjukkan elemen head yang mengandung informasi tentang file HTML. <TITLE> menunjukkan elemen judul dari file HTML yang akan muncul di jendela browser. menunjukkan elemen batang tubuh / isi dari file HTML.

Membuat File HTML Sederhana Pada program pengolah kata yang telah anda siapkan, ketiklah tag-tag seperti di bawah ini :

<TITLE> Contoh HTML sederhana Selamat, Anda telah membuat HTML paling pelit sedunia...

Kemudian save-as dengan nama "contoh.html". bukalah sebuah window browser baru kemudian open file contoh.htm dengan window browser baru tersebut. Maka tampilannya adalah :

Catatan : Penulisan contoh-contoh program ditulis dalam format indent untuk mempermudah pembacaan tag-tag dan pasangannya masing-masing. Untuk selanjutnya penulisan contoh program hanya akan ditulis pada bagian BODY saja. Penulisan pada program pengolah kata tetap harus mengikuti pola baku penulisan HTML.

Membuat Judul (Heading)

Format sintaksnya : teks_judul

x : bilangan bulat 1 sampai 6 Ketiklah contoh berikut pada program pengolah kata : <TITLE> Contoh Heading

Judul Level

Judul Level

Judul Level

Judul Level

Judul Level

Judul Level

1

2 3 4 5 6

Kemudian save as sebagai judul.htm dan bukalah dengan internet browser, outputnya :

Ganti Baris

Untuk melakukan ganti baris pada HTML ada beberapa cara : 1. Dengan menggunakan tag

isi_paragraf

2. Dengan menggunakan tag
(tanpa pasangan) di akhir baris yang dimaksud. Teks panjang pada penulisan HTML dianggap sebagai satu baris teks meskipun anda menuliskannya dalam beberapa baris pada program pengolah kata. Misalnya :

Tampilan pada browser :

.

Penulisan HTML yang benar :

Tampilan pada browser :

Teks yang menggunakan tag

dianggap sebagai sebuah paragraf satu baris. Pasangan

menunjukkan akhir dari paragraf dan secara otomatis akan berpindah pada baris baru. Jadi tampilan HTML pada program pengolah kata belum tentu sama dengan tampilan pada browser.

Teks Preformatted

Tentunya kita cukup repot bila kita memiliki teks yang panjang dan memerlukan banyak ganti baris. Kita harus banyak pulan membubuhkan tag
setiap teks yang ganti baris. Selain itu akan menambah ukuran file HTML. Cara untuk menuliskan teks tanpa perlu repot-repot memikirkan di mana kita harus menambahkan tag
agar teks ganti baris, adalah dengan menggunakan teks preformatted yang memungkinkan kita bebas menulis dengan format sesuai dengan keinginan kita. Sintaks tag preformatted :

teks

Ditampilkan oleh browser :

Catatan : • •

Tag-tag HTML tidak dapat bekerja sesuai fungsinya dalam tag

 dan dianggap sebagai teks biasa bukan sebagai tag. Ketentuan ini tidak berlaku bagi tag link. Karakter "<", ">", "&" dianggap sebagai karakter khusus dalam HTML. Agar karakter ini tampak maka penulisannya harus dengan escape sequence-nya, seperti %lt, %gt, %amp



Membuat Daftar (List)



 Ada tiga macam list pada HTML yaitu list tanpa nomor dan menggunakan nomor serta list definisi.



List Tanpa Nomor 
 
teks_daftar 
teks_daftar 




List Dengan Nomor 
 
teks_daftar 
teks_daftar 




Contoh :



Tampilan masing-masing :



Catatan :  bersifat opsional, bisa ditulis atau tidak.



List Definisi



 Contoh :



tampilannya adalah ;



Mengubah Bentuk Font Secara Fisik



 



teks berhuruf tebal  



teks berhuruf miring teks berhuruf yang memiliki ukuran lebar yang sama



Escape Sequence (Entitas Karakter Khusus) Entitas karakter khusus mempunyai dua fungsi : • •



Menampilkan karakter khusus Menampilkan karakter lain yang tidak terdapat pada kelompok karakter ASCII



Membuat Hypertext Link Seperti yang telah disebutkan sebelumnya, kekuatan utama HTML adalah dapat menghubungkan ke sebuah objek seperti dokumen teks, alamat e-mail, direktori, multimedia, yang tersimpan secara lokal maupun remote (intranet/internet). Istilah ini biasa dikenal sebagai "hypertext link" atau "link" saja. Tanda link pada browser biasanya adalah teks yang digarisbawahi. Namun hal tersebut tidak mutlak. Sintaks sederhananya : tampilan_teks nama_objek : nama objek yang akan di-link tampilan_teks : teks yang akan ditampilkan



pada browser



Contoh : Visit SeWiWi online



tampilannya : Visit SeWiWi online Jika kita klik teks di atas, maka browser akan me-link dan membuka web site SEWIWI online.



Alamat Link dengan Path Absolut dan Path Relatif Misalkan di dalam server internet kita memiliki direktori bernama "SEEBoox" di dalamnya ada file bernama "index.htm" dan "sp_html.htm", jika kita ingin membuat link di dalam file index.htm ke file sp_html.htm, maka link-nya adalah : Path absolut : Belajar HTML



Path relatif : • •



Belajar HTML Belajar HTML



Keuntungan menggunakan path relatif dibandingkan path absolut : • • •



Lebih sedikit huruf yang diketik. Proses di server lebih cepat dan effisien, karena tak perlu mengecek alamat web, hanya perlu pindah direktori saja. Lebih mudah dipindah-pindahkan ke server atau lokasi lain, karena alamatnya masih bisa digunakan.



Perhatikan penulisan path! Path pada HTML mengikuti sifat sistem operasi UNIX, yaitu menggunakan garis miring dan membedakan huruf kecil dangan huruf besar.



Link Ke Bagian Lain Dalam Satu File Yang Sama.



 Belajar HTML



Di dalam file yang sama, di dalamnya harus terdapat tag yang menunjukkan bagian tersebut : Top



Contohnya kliklah link ini goto top dan kemudian kembali ke bagian ini dengan klik "Link ke bagian lain dalam satu file yang sama" pada Index



Link Ke Bagian Lain Dalam File Lain Yang Berbeda. Belajar HTML



Di dalam file index.htm harus ada tag yang menunjukkan bagian tersebut : Isi



Menampilkan Gambar (Image) Format file image umum yang biasa ditampilkan adalah .bmp, .gif, .jpg, .tif. Namun harap bersikap bijaksana untuk menampilkan file-file image. Perhatikan ukuran file-nya serta resolusinya. Menampilkan gambar di ssitus web kita memang akan menambah daya tarik tetapi juga akan menambah bandwidth dan menambah waktu suatu halaman akan ditampilkan. Dengan kata lain menampilkan image dapat membuat akses internet lambat dan memboroskan waktu dan sumber daya. Sintaks umum :  Pertimbangkanlah juga resolusi layar monitor yang mungkin digunakan oleh para pengguna internet. Resolusi yang umum ditemukan adalah 640x400, 800x600, dan 1024x764. Jangan sampai image kita terlalu kecil atau terlalu besar nampak di layar monitor.



Menyelaraskan Image Dengan Teks Sintaks umum : 



Menyelaraskan image dengan teks dengan nilai ALIGN default ("bottom")



Menyelaraskan image dengan teks dengan nilai ALIGN="top"



Menyelaraskan image dengan teks dengan nilai ALIGN="center" Menyelaraskan image tanpa teks di tengah halaman : 




Contoh penginsertan gambar.



 Latar Belakang dengan Image Image dapat pula digunakan sebagai latar belakang tampilan web kita. Untuk menambah atau menggantinya ada pada tag . Sintaks : 



Mengganti Warna Latar Belakang Warna latar belakang dapat kita ubah sesuai keinginan kita. Tapi apabila kita menggunakan image sebagai latar belakang maka warna later belakang yang kita ubah tidak tampak karena tertutup oleh image latar belakang. Warna pada HTML menggunakan kode warna hexadesimal untuk mewakili nilai warna RGB (Red-Green-Blue). Sintaksnya :  RRGGBB



= kode warna hexadesimal yang mewakili nilai warna RGB (Red-Green-Blue).



Contoh : misalnya kita akan mengubah warna latar belakang menjadi biru, dengan huruf warna putih, dan link warna hijau maka kode HTML-nya adalah : 



Jangan lupa menuliskan tanda "#" di depan kode warna hexadesimal.



Teks Cadangan untuk Image Ada beberapa browser WWW yang tidak dapat menampilkan image. Ada pula user yang mematikan pilihan menampilkan image pada saat menjelajah dunia maya (karena alasan menghemat pulsa telepon dan kecepatan koneksi rendah). HTML menyediakan fasilitas teks cadangan (ALT) yang dapat membantu user apabila halaman yang mereka lihat tidak dapat menampilkan image. Misal : 



Image Sebagai Hyperlink Contoh : 



Bila kursor kita letakkan di atas image, maka kursor akan berubah menjadi gambar tangan. Hal itu merupakan salah satu indikasi bahwa image merupakan sebuah hyperlink dan dapat kita klik.



Tabel Elemen-Elemen Tabel Elemen



Keterangan



 ... 



Mendefinisikan sebuah tabel di HTML.



 ... 



Mendefinisikan keterangan judul dari sebuah tabel. Posisi defaultnya adalah tengah atas pada tabel. Atribut ALIGN=BOTTOM dapat digunakan untuk mengubah posisi.







... 



Membuat baris di dalam sebuah tabel dan mendefinisikan atribut-atribut (informasi atribut tabel akan diberikan di bawah).







... 



Mendefinisikan sebuah sel judul pada tabel. Atribut defaultnya adalah rata tengah dan berhuruf tebal. Judul tabel dapat pula menggunakan atribut-atribut tabel pada umumnya.



 



... 



Mendefinisikan sebuah sel data pada tabel. Atribut defaultnya adalah rata tengah untuk posisi vertikal dan rata kiri untuk posisi horizontal. sel data dapat juga menggunakan atribut-atribut tabel pada umumnya. Atribut-Atribut Tabel



CATATAN: Atribut didefinisikan di dalam tag  ...  atau  ...  akan menggantikan nilai default perataan pada  ... . Atribut



Keterangan



ALIGN (LEFT, CENTER, RIGHT)



Perataan horizontal sebuah sel



VALIGN (TOP, MIDDLE, BOTTOM)



Perataan vertikal sebuah sel.



COLSPAN=n



Jumlah kolom pada sebuah sel.



ROWSPAN=n



Jumlah baris pada sebuah sel.



NOWRAP



Mematikan ganti baris otomatis di dalam sebuah sel.



Format Umum Tabel 
  
 isi caption 
  
  
 isi sel header pertama 
 
 isi sel header terakhir 
 
  
  
 baris pertama, isi sel pertama 
 
 baris pertama, isi sel terakhir
 
  
  
 baris akhir, isi sel pertama 
 
 baris akhir, isi sel terakhir
 
  
 



Tag  dan  harus melingkupi keseluruhan definisi tabel. Untuk menambah jumlah baris, tambahkanlah tag  dan untuk menambahkan sel atau kolom gunakan tag  atau . Berikut ini link-link yang berkaitan dengan pengetahuan tentang HMTL lenih lanjut. Semuanyua berbahasa Inggris. • •



The HTML Quick Reference Guide Official HTML specification