Belajar HMTL - Dasar Soni R. Hartanto

Daftar Isi              

Persiapan Pengenalan Tag HTML Membuat File HTML Sederhana Membuat Judul (Heading) Ganti Baris Teks Preformatted Membuat Daftar (list) Kuota Teks Garis Pembatas Mengubah Bentuk Font Membuat Hypertext Link Menampilkan Gambar (image) Tabel

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.htm". bukalah sebuah window browser baru kemudian open file contoh.htm dengan window browser baru tersebut. Maka tampilannya adalah : Selamat, Anda telah membuat HTML paling pelit sedunia... 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 :

Judul Level 1 Judul Level 2 Judul Level 3 Judul Level 4 Judul Level 5 Judul Level 6

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 : Daftar belanja ibu rumah tangga : 1. Beras. 2. Minyak.

3. Sabun.

Tampilan pada browser : Daftar belanja ibu rumah tangga :1. Beras.2. Minyak.3. Sabun. Penulisan HTML yang benar : Daftar belanja ibu rumah tangga :
1. Beras.
2. Minyak.
3. Sabun.


Tampilan pada browser : Daftar belanja ibu rumah tangga : 1. Beras. 2. Minyak. 3. Sabun. 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

 Setiap penumpang diharuskan membayar $100.00 Dengan rincian sbb. :



 Biaya pokok .... $ 75.00 Administrasi ... $ 20.00 Asuransi ....... $ 5.00 ----------------------------------- + Total = $100.00 

ditampilkan oleh browser : Setiap penumpang diharuskan membayar $100.00 Dengan rincian sbb. : Biaya pokok .... $ 75.00 Administrasi ... $ 20.00 Asuransi ....... $ 5.00 ----------------------------------- + Total = $100.00 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 :  
 Pepaya Mangga Pisang Jambu 
   
 Pepaya Mangga Pisang Jambu 
 



Tampilan masing-masing : 







Pepaya Mangga Pisang Jambu



1. 2. 3. 4.



Pepaya Mangga Pisang Jambu



 



Catatan :  bersifat opsional, bisa ditulis atau tidak.



List Definisi Contoh :  
 
SEEBoox Project



 
 SEEBoox Project merupakan project pribadi yang dikerjakan secara marathon dan tidak didanai oleh IMF (jadi bebas dari hutang hingga akhir jaman). 
Lingkup Project 
 Lingkup SEEBoox Project sampai saat ini masih dalam bidang teknologi informasi dan komputer. Namun tidak menutup kemungkinan untuk berkembang lebih besar dan mencakup hampir semua aspek kehidupan di dunia dan akhirat. 
 



tampilannya adalah ; SEEBoox Project SEEBoox Project merupakan project pribadi yang dikerjakan secara marathon dan tidak didanai oleh IMF (jadi bebas dari hutang hingga akhir jaman). Lingkup Project Lingkup SEEBoox Project sampai saat ini masih dalam bidang teknologi informasi dan komputer. Namun tidak menutup kemungkinan untuk berkembang lebih besar dan mencakup hampir semua aspek kehidupan di dunia dan akhirat.



List Dalam List Sebuah list dapat pula mengandung list di dalamnya, contoh : 
 
 Kota-kota di Jabotabek: 
 
 Jakarta 
 Bogor 
 Tangerang 
 Bekasi 
 
 Kota-kota di Jabar: 
 
 Bogor 
 Bandung 
 Bekasi 
 




tampilannya ; 







Kota-kota di Jabotabek: o Jakarta o Bogor o Tangerang o Bekasi Kota-kota di Jabar:



 o o o



Bogor Bandung Bekasi



Kuota Teks Yaitu teks yang dibatasi oleh space margin lebih lebar dari pada teks normal di sekitarnya. Berguna untuk memperjelas teks tersebut dalam sebuah tulisan. Tag yang digunakan 
. Contoh :  
Peribahasa yang terkenal sejak jaman nenek moyang.
 
 
 Berakit-rakit ke hulu, berenang-renang ke tepian. Bersakit-sakit dahulu, bersenang-senang kemudian. 
 
--(anonim)--
 
 



Tampilan pada browser : Peribahasa yang terkenal sejak jaman nenek moyang. Berakit-rakit ke hulu, berenang-renang ke tepian. Bersakit-sakit dahulu, bersenangsenang kemudian. --(anonim)--



Garis Pembatas Contoh : 
 (tanpa tag pasangan) Outputnya :



 Mengubah Bentuk Font Secara Logik 



untuk definisi. Ditampilkan dengan huruf miring. (NCSA Mosaic is a World Wide Web browser.) <EM>



untuk penekanan. Ditampilkan dengan huruf miring. (Consultants cannot reset your password unless you call the help line.) 



untuk judul buku, film, dsb.Ditampilkan dengan huruf miring. (A Beginner's Guide to HTML) 



untuk kode komputer. Ditampilkan dengan huruf berukuran lebar sama. (The <stdio.h> header file) 



untuk entri keyboard. Ditampilkan dengan huruf berukuran lebar sama. (Enter passwd to change your password.) <SAMP>



untuk urutan karakter. Ditampilkan dengan huruf berukuran lebar sama. (Segmentation fault: Core dumped.) <STRONG>



untuk penekanan yang kuat. Ditampilkan dengan huruf tebal (NOTE: Always check your links.) 



untuk variabel, di mana kita akan mengganti variabel dengan informasi tertentu. Ditampilkan dengan huruf miring. (rm filename deletes the file.)



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



Tiga karakter ASCII ( "<", ">", "&") mempunyai arti khusus bagi HTML sehingga tidak dapat ditampilkan pada browser apa adanya. Tanda "<" dan ">" digunakan sebagai bagian dari tag dan tanda "&" (ampersand) digunakan sebagai indikasi escape sequences. Tanda kutip dua dapat digunakan baik pada HTML maupun browser. < > & ö ñ È



= = = = = =



< > & ö ñ È



Perhatian : Pada penulisan escape sequence ini, huruf besar dibedakan dengan huruf kecil.



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



Link Untuk Mengirimkan E-mail teks



Contoh : Kirim E-mail



Tampilan dilayar (dan coba diklik) : Kirim E-mail



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 : 




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-GreenBlue). 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 atributatribut (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 ALIGN (LEFT, CENTER, RIGHT)



Keterangan 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 .