HTML Dasar
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 :
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.
Untuk belajar membuat HTML, anda
membutuhkan 2 buah program aplikasi yaitu HTML editor dan web browser bisa juga sih
kalau test langsung pakai w3schools.com. Tapi
kamu 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.
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.
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.
eberapa 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.
