HTML
HTML
Setiap
halaman website atau dokumen HTML yang baik pada umumnya memiliki struktur
tertentu. Secara umum dokumen HTML memiliki struktur yang dibagi menjadi 3
yaitu : HTML, HEAD, BODY. Secara struktur HTML akan terdiri dari dua bagian
utama yaitu HEAD dan BODY. Memang dianalogikan seperti manusia yang memiliki
kepala dan badan.
Untuk lebih
jelasnya silahkan perhatikan ilustrasi berikut ini :
Setiap
dokumen HTML diawali dengan tag pembuka <html> dan diakhiri tag penutup
</html>. Kemudian di dalam HTML terdiri dari dua bagian seperti
dijelaskan diatas yaitu HEAD dan BODY. Bagian HEAD diawali dengan tag pembuka
<head> dan diakhiri dengan tag penutup <head>. Bagian BODY diawali
dengan tag pembuka <body> dan diakhiri tag penutup </body>.
Bagian HEAD
atau kita sebut header biasanya mengantung tag-tag seperti tag TITLE, META dan
lain-lain. Tag TITLE digunakan untuk menampilkan judul halaman HTML pada title
di browser. Tag META digunakan untuk mengisikan informasi seperti author,
keyword dan lain-lain. Bagian BODY merupakan bagian yang digunakan untuk
menampilkan isi dokumen/halaman HTML. Isi yang ditampilkan informasi yang dapat
berupa teks, gambar, link dan lain sebagainya.
Jadi untuk
pemula atau yang baru belajar HTML, kita akan lebih banyak belajar pada bagian
BODY seperti tag-tag untuk heading, paragraf, tabel, link, images, form, list
dan lain sebagainya.
Definisi
HTML
HTML adalah
sebuah bahasa untuk menampilkan halaman sebuah website. HTML merupakan
singkatan dari Hyper Text Markup Language. HTML bukan termasuk dalam bahasa
pemrograman, tetapi HTML adalah “markup language“, “markup language”
ini merupakan sekumpulan “tag“. “tag” inilah yang digunakan untuk
menampilkan halaman website dalam tampilan tertentu.
Tag HTML
Tag adalah
teks khusus (markup) yang terdiri dari nama tag yang diapit oleh
karakter “<” (tanda lebih kecil) dan “>” (tanda lebih besar). Contoh tag
<body> : adalah tag dengan nama tag body. Tag umumnya ditulis secara
pasangan yaitu tag pembuka dan tag penutup. Contoh tag pembuka : <body>
dan tag penutup </body> (ditambah tanda “/”).
Tag HTML
tidak bersifat case sensitive, maksudnya tag HTML tidak membedakan huruf
besar/katipal dan huruf kecil. Jadi anda bisa menggunakan huruf kapital atau
pun huruf kecil ketika menuliskan tag HTML. Misalnya menuliskan <body>
dengan <BODY> maka hasilnya akan sama saja. Namun walaupun begitu, akan
lebih bagus jika kita konsisten memilih salah satu saja untuk semua tag di
halaman HTML yang kita buat.
Web Browser
dan Dokumen HTML
Web browser
adalah aplikasi atau software yang digunakan untuk menampilkan halaman website.
Contoh web browser adalah Internet Explorer, Mozilla Firefox, Opera dan
lainnya. Web browser memiliki tugas untuk membaca dokumen HTML dan menampilkan
sebagai halaman website. Web browser tidak menampilkan tag HTML tetapi
menggunakan tag HTML untuk menampilkan isi dari halaman HTML tersebut.
Dokumen HTML
sendiri terdiri dari tag-tag HTML dan teks biasa. Jadi dokumen HTML bisa
disamakan dengan halaman website. Artinya dokumen HTML juga bisa disebut dengan
halaman website.
Contoh HTML
sederhana :
|
1
|
<html>
|
|
2
|
<head>
|
|
3
|
<title>Judul
Halaman</title>
|
|
|
4
|
</head>
|
|
|
5
|
<body>
|
|
|
6
|
<h1>Heading</h1>
|
|
|
7
|
<p>Isi
paragraf disini.</p>
|
|
|
8
|
</body>
|
|
|
9
|
</html>
|
Hasil
tampilan kode HTML diatas pada browser adalah seperti berikut :
Ekstensi
HTML atau HTM?
Dokumen HTML
ada yang disimpan dengan ektensi HTM dan HTML. Mungkin ketika anda mencoba
latihan membuat HTML sederhana anda pernah bingung, apakah harus disimpan
dengan ekstensi “htm” atau “html”. Sebenarnya sama saja, tidak ada pengaruhnya
pada halaman HTML anda antara ektensi “htm” atau pun “html”, jadi anda bebas
memilihnya. Tapi disarankan anda konsisten dengan memilih salah satu untuk
mempermudah mengingat nama file. Karena misalnya ketika memanggil file tertentu
agar anda tidak salah mengetikkannya.
Untuk
diketahui bahwa pada awalnya ektensi “htm” digunakan karena berbagai sistem dan
software hanya mengijinkan 3 digit/karakter untuk dijadikan ekstensi sebuah
file/dokumen. Tapi untuk saat ini, kita sudah dapat menggunakan ekstensi “html”
sebagai ekstensi file/dokumen HTML.
Untuk mulai
belajar HTML tingkat dasar pada tutorial HTML ini, beberapa tag dasar harus
kita ketahui. Anda tidak perlu cemas apabila ada tag yang belum di mengerti
dalam tutorial HTML ini. Silahkan langsung coba saja beberapa contoh tag dasar
HTML yang dijelaskan di bawah ini.
Beberapa tag
dasar yang digunakan dalam dokumen HTML adalah heading, paragraf, link, dan
image.
Heading
Tag heading
umumnya digunakan untuk membuat header / pada halaman website. Tag untuk
heading terdiri dari tag <h1> sampai dengan tag <h6>. Sebagai
contoh heading pada HTML silahkan coba kode HTML berikut ini :
|
01
|
<html>
|
|
02
|
<head>
|
|
03
|
<title>Contoh
Heading</title>
|
|
|
04
|
</head>
|
|
|
05
|
<body>
|
|
|
06
|
<h1>Ini
heading 1</h1>
|
|
|
07
|
<h2>Ini
heading 2</h2>
|
|
08
|
<h3>Ini
heading 3</h3>
|
|
09
|
<h4>Ini
heading 4</h4>
|
|
10
|
<h5>Ini
heading 5</h5>
|
|
11
|
<h6>Ini
heading 6</h6>
|
|
|
12
|
</body>
|
|
|
13
|
</html>
|
Paragraf
Untuk
membuat teks dalam sebuah paragraf pada dokumen HTML digunakan tag <p>
yang merupakan tag pembuka dan diakhiri dengan tag penutup </p>.
Sebagai contoh membuat paragraf pada HTML, silahkan coba contoh kode HTML
berikut ini :
|
1
|
<html>
|
|
2
|
<head>
|
|
3
|
<title>Contoh
Paragraf</title>
|
|
|
4
|
</head>
|
|
|
5
|
<body>
|
|
|
6
|
<p>Ini
merupakan sebuah contoh paragraf dalam HTML.</p>
|
|
|
7
|
<p>Dan
ini merupakan contoh paragraf yang lainnya. Sebuah paragraf dapat terdiri
dari satu atau beberapa kalimat.</p>
|
|
|
8
|
</body>
|
|
|
9
|
</html>
|
Link
Hyperlink
atau link (tautan) adalah sebuah teks atau gambar yang jika di klik akan
membuat browser membuka halaman HTML lain. Jika sebuah link ditunjuk dengan
mouse, biasanya kursor akan berubah menjadi bentuk menyerupai tangan kecil.
Untuk membuat link digunakan tag <a>. Sebagai contoh link silahkan coba
kode HTML berikut ini :
|
1
|
<html>
|
|
2
|
<head>
|
|
3
|
<title>Contoh
Link</title>
|
|
|
4
|
</head>
|
|
|
5
|
<body>
|
|
|
6
|
||
|
7
|
</body>
|
|
8
|
</html>
|
Image
Seperti
dijelaskan sebelum, dokumen HTML selain bisa menampilkan teks bisa juga untuk
menampilkan gambar/foto/images. Untuk menampilkan image digunakan tag
<img>.
|
1
|
<html>
|
|
2
|
<head>
|
|
3
|
<title>Contoh
Image</title>
|
|
|
4
|
</head>
|
|
|
5
|
<body>
|
|
|
6
|
<img
src=”fotoku.jpg” />
|
|
|
7
|
</body>
|
|
8
|
</html>
|
Catatan : Untuk contoh kode HTML tentang
image diatas, anda harus menyediakan sebuah gambar bernama “fotoku.jpg” di
folder yang sama dimana anda menyimpan kode HTML tersebut.
Element Pada
HTML
Setiap
dokumen HTML terdiri dari satu atau beberapa element. Element terdiri dari atas
tiga bagian yaitu : Tag Pembuka, Isi dan Tag Penutup.
Berikut ini contoh Element HTML :
<title>Judul
Website</title>
Pada contoh
Element diatas :
- <title> adalah Tag Pembuka
- “Judul Website” adalah Isi (semua yang ada diantara Tag Pembuka dan Tag Penutup).
- </title> adalah Tag Penutup.
Isi element
adalah semua yang berada diantara Tag Pembuka dan Tag Penutup. Isi element
dapat saja berupa element lainnya, jadi sebuah element dapat terdiri dari
element lainnya. Inilah yang disebut dengan istilah “nested element”.
Dalam “nested element” yaitu element yang mengandung element lainnya, tag-tag
yang ditulis tidak boleh saling tumpang tindih. Berikut ini contoh penulisan
yang benar :
<p>Ini
contoh tulisan cetak <b>tebal</b></p>
Jika
penulisan skrip (kode) HTML salah atau kurang tepat, maka browser tidak dapat
membaca dengan sempurna (terjadi error) sehingga tampilan website menjadi tidak
sesuai dengan apa yang diinginkan.
Jangan lupa
untuk selalu menuliskan tag penutup
Contoh :
<p>Ini
sebuah paragraf
<p>Ini
contoh paragraf lain
Pada saat
ini sebagian besar browser akan menampilkan kode HTML diatas dengan baik
walaupun tanpa diisin dengan tag penutup </p>. Tetapi sebaiknya kita tetap
menuliskan dan melengkapi dengan tag penutup sebagaimana mestinya karena
kesalahan tanpa tag penutup itu akan menimbulkan error atau tampilan yang tidak
sesuai dengan yang kita harapkan ketika kode HTML yang kita buat semakin
kompleks.
Element
Kosong
Element
kosong adalah element HTML tidak memiliki Isi. Element kosong menggunakan tag
penutup pada tag pembuka. Jadi tag pembuka menjadi satu dengan tag penutup.
Contohnya adalah tag <br> yaitu tag yang digunakan untuk berpindah ke
baris baru. Pada XHTML, XML dan versi HTML yang lebih baru setiap element harus
menggunakan tag penutup. Untuk itu perlu ditambahkan tanda garis miring
pada tag tersebut menjadi <br />. Walaupun saat ini penulisan <br>
masih bisa diterima oleh semua browser, tetapi sebaiknya ditulis menjadi <br
/>.
Lowercase
Seperti
pernah dijelaskan sebelumnya, pada dasarnya tag HTML tidak bersifat case
sensitive, artinya penulisan tag HTML bisa menggunakan huruf kapital atau pun
huruf kecil. Tetapi lebih disarankan untuk menggunakan huruf kecil (lowercase)
atau setidaknya menggunakan huruf yang sama dalam sebuah dokumen.
Setiap
elemen HTML dapat memiliki atribut. Atribut menyediakan informasi tertentu
tentang elemen HTML tersebut. Penulisan atribut diletakkan pada tag pembuka.
Bentuk penulisan atribut pada HTML adalah seperti berikut ini :
nama_atribut = “nilai_atribut”
nama_atribut = “nilai_atribut”
Contoh
penggunaan atribut, misalnya pada tag <a>. Link/url target dituliskan
dalam sebuah atribut. Contoh :
|
1
|
Tag
<a> akan dijelaskan di tulisan tersendiri.
Selalu
Gunakan Tanda Petik
Nilai
atribut harus selalu ditulis diantara sepasang tanda petik. Umumnya digunakan
tanda petik ganda, tetapi menggunakan tanda petik tunggal juga diijinkan. Dalam
situasi tertentu, ketika nilai atribut tersebut mengandung tanda petik ganda
maka diperlukan penggunaan tanda petik tunggal. Misalnya :
name=’Made
“bagus” Wirautama’
Untuk
belajar membuat HTML, anda membutuhkan 2 buah program aplikasi yaitu HTML
editor dan web browser. Untuk HTML Editor, anda dapat menggunakan
yang paling mudah dan mungkin sudah ada di komputer anda yaitu Notepad.
Sedangkan untuk browser, silahkan nanti gunakan Internet Explorer atau Mozilla
Firefox yang mungkin juga sudah ada di komputer anda.
Jadi saat
ini kita bisa langsung mempraktekkan bagaimana cara membuat HTML dari yang
paling dasar. Notepad nantinya akan kita gunakan mengetikkan kode-kode atau tag
HTML. Sedangkan web browser atau biasa disebut “browser” saja, akan kita
gunakan untuk melihat hasil halaman HTML yang sudah kita buat. Langsung saja
kepada praktek cara membuat HTML dasar, silahkan ikuti langkah-langkah berikut
ini.
Buka
aplikasi Notepad di komputer anda lalu ketikkan kode HTML berikut ini :
|
1
|
<html>
|
|
2
|
<head>
|
|
3
|
<title>Belajar
HTML</title>
|
|
|
4
|
</head>
|
|
|
5
|
<body>
|
|
|
6
|
Hallo,
selamat belajar HTML.
|
|
|
7
|
</body>
|
|
8
|
</html>
|
Catatan :
Nomor yang muncul di setiap baris tidak perlu anda ketik, itu hanya tampilan
untuk menunjukkan nomor baris kode yang ada. Jadi ketikkan seperti gambar
berikut ini :
Selanjutnya
silahkan klik menu File-Save As untuk menyimpan file yang anda buat. Simpan
dokumen/file diatas dengan nama “latihan.html”. Pastikan anda mengetikkan
“latihan.html” (tanpa tanda petik) ketika menyimpan, karena jika tidak maka
file yang tersimpan otomatis menjadi file dengan ektension “txt”.
Kemudian
tutup aplikasi Notepad anda. Lalu buka windows explorer dan cari dimana file
tadi anda simpan. Jika sudah ditemukan, silahkan buka file HTML tersebut dengan
cara memilih dan klik double.
Jika sudah
benar, maka seharusnya file tersebut otomatis akan dibuka dengan menggunakan
aplikasi browser yang ada di komputer anda seperti Internet Explorer atau
Mozilla Firefox. Dan jika menggunakan Firefox tampilan akan menjadi seperti
berikut.
Sampai
disini anda diharapkan sudah mampu dan mengerti tentang bagaimana cara membuat
HTML. Artinya anda tahu dimana mengetikkan kode HTML lalu menyimpannya dan
bagaimana cara melihat tampilan HTML yang anda buat melalui browser.
Selanjutnya anda tinggal mengikuti tutorial HTML dan begitu melihat contoh kode
HTML yang diberikan maka anda tahu bagaimana mencobanya.
Pada tahap
belajar HTML yang lebih jauh, anda dapat menggunakan software editor HTML
seperti Dreamweaver. Dengan menggunakan editor yang memang khusus untuk HTML,
anda akan banyak dipermudah karena tersedia berbagai bantuan untuk membuat HTML
yang lebih kompleks.
Tidak ada komentar:
Posting Komentar