HyperText markup language
Dari Wikipedia bahasa Indonesia, ensiklopedia bebas
HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). [1]
- Tahun 1986, ISO menyatakan bah
- Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
- wa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML ( Standard Generalized Markup Language ).
PERINTAH DASAR HTML
Tag
Dalam HTML, hampir seluruh perintah dituliskan secara berpasangan, yaitu perintah pembuka dan perintah penutup yang disebut sebagai tag.
Sebagai contoh:
Perintah pembuka <b> dan diakhiri perintah penutup </b>, akan memberikan efek tebal atau bold dalam tulisan.
Prakteknya: <b> alislam </b> akan menghasilkan kata alislam dengan jenis huruf tebal.
Properti
Properti adalah perintah tambahan yang langsung ditambahkan dalam perintah utama yang punya efek khusus terhadap perintah tersebut.
Struktur Halaman HTML
Bila mengacu kepada aturan baku pembuatan halaman HTML, maka setidaknya sebuah halaman HTML terdiri dari dua bagian, yaitu HEAD dan BODY, berikut adalah anatomi baku sebuah halaman HTML.
<html>
<head>
(di sini anda bisa menuliskan perintah HTML yang lain)
</head>
<body>
(di sini anda bisa menuliskan perintah HTML yang lain)
</body>
</html>
HEAD
Properti untuk perintah <head> </head>
Beberapa properti untuk pengaturan <head> </head> adalah sebagai berikut:
dir=“” : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) seperti dalam bahasa Inggris, Indonesia ataupun latin, ataukah RTL (Right to Left) seperti dalam bahasa Arab, Ibrani dan Jepang.
lang=”" : Menentukan bahasa yang digunakan, seperti “EN-US” untuk menyatakan English-United States atau “AR-SA” untuk menyatakan Arabic-Saudi Arabia. Untuk bahasa-bahasa yang lain, silahkan merujuk HTML Manual.
Perintah-perintah di dalam <head> </head>
Beberapa perintah yang sebaiknya hanya diletakkan di bagian HEAD adalah sebagai berikut:
<title> </title> : Membuat Judul halaman web yang akan ditampilkan pada baris judul pada program browser.
<script> </script> : Meletakkan javascript, jscript, vbscript.
Meta Tagging
Meta Tagging adalah istilah untuk tag-tag spesial yang hanya ditulis pada bagian HEAD. Aturan penulisannya adalah sebagai berikut:
<meta http-equiv=”FUNCTION” content=”COMMAND”>
Function adalah fungsi yang dipanggil untuk dijalankan pada browser tersebut. Beberapa fungsi yang sering dipakai adalah; fungsi Refresh otomatis, penentuan Keywords, Description, Author dan lain sebagainya.
Command adalah perintah yang akan dijalankan oleh browser berdasar fungsi yang ditentukan. Berikut beberapa contoh penggunaan meta tag.
<meta http-equiv=”REFRESH” content=”7; url=http://www.web.com/”>
Untuk Autorefresh setelah 7 detik dan langsung mengarah ke alamat http://www.web.com/
<meta http-equiv=”KEYWORDS” content=”Islam, Allah, Muhammad”>
BODY
Properti untuk perintah <body> </body>
Beberapa properti untuk pengaturan <body> </body> adalah sebagai berikut:
background=”" : Menentukan gambar background halaman, dalam hal ini berbentuk image file, untuk menentukan gambar background, isikan alamat file gambar yang diinginkan dengan format “http://alamatfile/folder/namafile.jpg” atau “C:\alamatfile\folder\namafile.jpg” atau bisa digunakan alamat non-absolut seperti “../foldergambar/namafile.jpg”. Format alamat file tergantung sistem yang digunakan, apakah berbasis Windows yang menggunakan Slash sebagai pemisah folder atau UNIX like Systems yang menggunakan Backslash sebagai pemisah folder. Kemudian format gambar yang bisa ditampilkan adalah jpg, gif dan png.
bgcolor=”" : Menentukan warna latar tabel, dengan format heksadesimal #000000 hingga #ffffff. Warna putih misalnya, diwakili oleh #ffffff, hitam oleh #000000, biru oleh #0000ff, merah oleh #ff0000. Untuk warna-warna yang lain anda bisa bereksperimen dengan mengkombinasikan 6 angka heksadesimal untuk membuat warna yang anda inginkan.
bottommargin=”" : Menentukan batas tepi di bawah halaman menggunakan satuan piksel.
dir=”" : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) ataukah RTL (Right to Left).
lang=”" : Menentukan bahasa yang digunakan.
leftmargin=”" : Menentukan batas tepi di kiri halaman menggunakan satuan piksel.
onload=”" : Menjalankan script yang didefinisikan pada bagian HEAD dan meletakkannya di memori komputer ketika halaman HTML dijalankan.
onunload=”" : Menghentikan dan menghapus script yang didefinisikan pada bagian HEAD dari memori komputer ketika berpindah halaman.
rightmargin=”" : Menentukan batas tepi di kanan halaman menggunakan satuan piksel.
topmargin=”" : Menentukan batas tepi di atas halaman menggunakan satuan piksel.
Perintah Untuk Bagian Tulisan
<center> </center> : Meletakkan tulisan atau kalimat di tengah halaman.
<b> </b> : Membuat tulisan tebal/bold.
<i> </i> : Membuat tulisan miring/italic.
<u> </u> : Membuat tulisan bergaris bawah/underline.
<h1> </h1> : Membuat tulisan dengan ukuran huruf nomor 1 (terbesar).
<h2> </h2> : Membuat tulisan dengan ukuran huruf nomor 2.
<h3> </h3> : Membuat tulisan dengan ukuran huruf nomor 3.
<h4> </h4> : Membuat tulisan dengan ukuran huruf nomor 4 (dan seterusnya sampai nomor 7).
<br> : Berpindah baris tanpa berpindah paragraf dan tanpa memberi jarak spasi antar dua baris.
<p> : Membuat paragraf baru dengan jarak satu spasi dari paragraf sebelumnya.
<hr> : Membuat garis vertikal.
Membuat daftar (list) dengan nomor urut
Membuat daftar (list) dengan nomor urut
Membuat daftar atau list juga merupakan hal yang mudah. Dalam HTML, daftar/list dibagi menjadi dua, yaitu Ordered list (Daftar bernomor urut) dan Unordered List (Daftar tanpa nomor urut).
Berikut adalah perintah HTML untuk membuat Ordered List.
<ol> : Mengawali sebuah daftar.
<li> : Membuat baris/paragraf daftar.
</ol> : Mengakhiri sebuah daftar.
Contoh:
Untuk membuat daftar seperti di bawah ini,
Daftar menu
1. Soto Ayam
2. Gule Kambing
3. Sate
4. Nasi Rawon
Maka perintahnya adalah sebagai berikut:
<p>Daftar menu (judul daftar)
<ol> (perintah pembuka awal daftar)
<li>Soto Ayam (baris isi daftar)
<li>Gule Kambing (baris isi daftar)
<li>Sate (baris isi daftar)
<li>Nasi Rawon (baris isi daftar)
</ol> (perintah penutup)
Menampilkan file gambar
Untuk menampilkan file gambar anda dapat menggunakan perintah di bawah ini:
<img> : Memulai peletakan file gambar dalam halaman HTML.
Namun perintah di atas tidak akan menghasilkan apa-apa sampai kita menentukan properti yang tepat.
Properti yang berlaku untuk perintah <img> adalah:
src=”" : Menentukan alamat file gambar yang ingin ditampilkan, adapun format gambar yang bisa ditampilkan adalah jpg, gif dan png.
alt=”" : Komentar dari gambar sebagai antisipasi apabila gambar tersebut ternyata tidak bisa ditampilkan.
border=”" : Border dari gambar yang ditampilkan yang dinyatakan dalam satuan piksel.
width=”" : Lebar gambar yang ditampilkan yang dinyatakan dalam satuan piksel.
height=”" : Tinggi gambar yang ditampilkan yang dinyatakan dalam satuan piksel.
Contoh:
Untuk menampilkan sebuah file gambar di My Document gunakan perintah berikut:
<img src=”C:\My Documents\namafilegambar.jpg” alt=”Ini fotoku waktu masih bayi” width=”650″ height=”400″ border=”0″>
Untuk menampilkan sebuah file gambar di UNIX system gunakan perintah berikut:
<img src=”/usr/fatah/home/namafilegambar.jpg” alt=”Ini fotoku waktu masih bayi” width=”650″ height=”400″ border=”0″>
Untuk menampilkan sebuah file gambar di internet gunakan perintah berikut:
<img src=”http://www.situsku.com/images/namafilegambar.jpg” alt=”Ini fotoku waktu masih bayi” width=”650″ height=”400″ border=”0″>
Membuat Link
Perintah untuk membuat link adalah sebagai berikut:
<a> </a> : Teks/Gambar yang diapit perintah ini akan menjadi link
Sedangkan properti-nya adalah:
href=”" : Menunjukkan alamat file HTML yang ditunjuk, bisa juga diganti dengan file-file non-HTML yang akan dieksekusi bila memang file tersebut executable, bila tidak maka file tersebut akan didownload ke dalam komputer pemakai. Link bisa juga untuk mengarahkan email ke alamat email tertentu.
Contoh:
Untuk berpindah ke halaman HTML lain, maka perintahnya adalah:
<a href=“../folder/file.html”>Buka File.html</a>
Agar pemakai bisa mendownload suatu file, maka perintahnya adalah:
<a href=“../folder/file.zip”>Download File.Zip</a>
Perintah dasar membuat tabel
Berikut perintah dasar pembuatan tabel:
<table> </table> : Memulai membuat tabel.
<tr> </tr> : Membuat table row atau sebuah baris dalam tabel.
<td> </td> : Membuat table data atau sebuah sel dalam tabel.
Contoh:
Untuk membuat tabel dengan dua baris dan dua kolom/sel per barisnya, maka perintahnya adalah sebagai berikut:
<table> (memulai sebuah tabel)
<tr> (memulai baris pertama)
<td></td> (memulai kolom/sel pertama dari baris pertama)
<td></td> (memulai kolom/sel kedua dari baris pertama)
</tr> (mengakhiri baris pertama)
<tr> (memulai baris kedua)
<td></td> (memulai kolom/sel pertama dari baris kedua)
<td></td> (memulai kolom/sel kedua dari baris kedua)
</tr> (mengakhiri baris kedua)
</table> (mengakhiri sebuah tabel)
Perintah lanjutan dalam membuat tabel
Contoh:
Untuk membuat tabel dengan lebar 650 piksel misalnya, maka perintah yang diperlukan adalah:
<table width=”650″>
(di baris ini anda bisa letakkan perintah pembuatan baris, kolom dan sebagainya).
</table>
Jelaslah sudah, untuk membuat tabel dengan lebar 650 piksel, kita cukup menambahkan properti width=”650″.
Properti dasar untuk perintah <table> </table>
align=”" : Menentukan perataan tabel, apakah center, left atau right.
background=”" : Menentukan background tabel, dalam hal ini berbentuk image file. Isikan alamat file gambar yang diinginkan sebagai background (format jpg, gif dan png).
bgcolor=”" : Menentukan warna latar belakang tabel, dengan format heksadesimal #000000 hingga #ffffff.
border=”" : Menentukan lebar garis tepi sebuah tabel yang dinyatakan dalam satuan piksel. Semakin besar piksel yang dimasukkan, semakin lebar garis tepi tabel tersebut.
bordercolor=”" : Menentukan warna border dari tabel, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
cellpadding=”" : Menentukan jarak teks/gambar dalam sebuah sel dengan tepi sel tersebut yang dinyatakan dalam satuan piksel.
cellspacing=”" : Menentukan jarak antar sel yang dinyatakan dalam satuan piksel.
dir=”" : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) ataukah RTL (Right to Left).
lang=”" : Menentukan bahasa yang digunakan dalam tabel.
height=”" : Menentukan tinggi tabel yang dinyatakan dalam satuan piksel.
width=”" : Menentukan lebar tabel yang dinyatakan dalam satuan piksel.
Properti dasar untuk perintah <tr> </tr>
align=”" : Menentukan perataan table row, apakah center, left, right atau justify.
bgcolor=”" : Menentukan warna latar dari table row, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
bordercolor=”" : Menentukan warna border dari table row, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
dir=”" : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) ataukah RTL (Right to Left).
lang=”" : Menentukan bahasa yang digunakan dalam table row.
valign=”" : Menentukan vertical align, yaitu perataan secara vertikal dari tiap obyek yang ada dalam table row tersebut. Opsinya adalah: bottom, middle, top dan baseline.
Properti dasar untuk perintah<td> </td>
align=”" : Menentukan perataan table data, apakah center, left, right atau justify.
background=”" : Menentukan background dari table data, dalam hal ini berbentuk image file, untuk menentukannya isikan alamat file gambar yang diinginkan (format jpg, gif atau png).
bgcolor=”" : Menentukan warna latar belakang dari table data, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
bordercolor=”" : Menentukan warna border dari table data, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
colspan=”" : Menggabungkan satu atau beberapa sel sekaligus yang berada dalam satu baris, dinyatakan dengan angka desimal yang menunjukkan berapa banyak sel yang akan digabungkan secara horisontal.
rowspan=”" : Menggabungkan satu atau beberapa sel sekaligus yang berada pada baris-baris yang berbeda namun berada pada satu kolom, dinyatakan dengan angka desimal yang menunjukkan berapa banyak sel yang akan digabungkan secara vertikal.
dir=”" : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) ataukah RTL (Right to Left).
lang=”" : Menentukan bahasa yang digunakan dalam table data.
valign=”" : Menentukan vertical align, yaitu perataan secara vertikal dari tiap obyek yang ada dalam table data tersebut. Opsinya adalah: bottom, middle, top dan baseline.
height=”" : Menentukan tinggi sel yang dinyatakan dalam satuan piksel.
width=”" : Menentukan lebar sel yang dinyatakan dalam satuan piksel.
