HTML
Membuat halaman website dengan menggunakan HTML gampang-gampang susah. Gampang
karena pelaksanaannya cukup sederhana, susah karena banyak kode yang perlu
dipahami agar sebuah halaman website terlihat indah dipandang mata dan
informatif. Pemahaman dasar untuk membuat halaman website dengan menggunakan
HTML adalah memahami kode HTML dasar dan memahami bagaimana kode-kode tersebut
bekerja. Pada post ini saya ingin berbagi bagaimana cara membuat halaman
website dengan menggunakan HTML dari yang paling dasar yang saya ketahui.
HTML adalah singkatan dari HyperText
Markup Language yang merupakan bahasa untuk membuat tampilan halaman
website dengan format tertentu.
Penggunaan kode HTML yang baik dan
baku akan menghasilkan sebuah halaman website yang rapi dan terstruktur. Secara
manual, pembuatan halaman website menggunakan HTML tidak memerlukan software
khusus. Cukup berbekal Notepad, browser, dan memahami kode-kode HTML. Persiapan
yang perlu dilakukan adalah membuat file dengan Notepad (atau software lain
pengolah text seperti notepad++, KEdit, dsb) kemudian mengganti ekstensi .txt
menjadi .html. Setelah itu, isi file tersebut dengan kode HTML.
Mari kita mulai belajar membuat
halaman website dengan HTML. Beri nama file yang kamu buat tadi dengan nama
pilihan masing-masing. Saya misalkan nama filenya adalah index.html.
Kode yang wajib ada pada halaman
website HTML adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
DOCTYPE maksudnya adalah Document Type atau jenis dokumen,
dalam hal ini adalah html. Kata yang berada di antara < dan > disebut
tag. Kode HTML terdiri dari pembuka dan penutup. Pada keduanya terdapat tag
yang sama, yang membedakan bahwa kode tersebut pembuka atau penutup adalah
terletak pada tanda garis miring. Pada pembuka kodenya hanya berupa <tag>
sedangkan pada penutup, dengan tag yang sama ditambahkan garis miring menjadi
</tag>. Pada kode di atas, tag pembuka utama adalah html. Di antara tag
html terdapat tag head dan tag body. Kode yang diletakan di antara tag head
tidak akan muncul dan terlihat pada halaman. Kode di antara tag head berupa
informasi seperti tag title (muncul sebagai judul pada browser), meta
tag, CSS, Javascript, dan sebagainya. Di antara tag body kita bisa meletakan konten
yang ingin kita tampilkan pada hamalan web.
Menambahkan Tag Title
Telah dijelaskan sebelumnya bahwa di antara tag head diletakan tag yang tidak muncul pada halaman. Salah satu tag yang diletakan di antara tag head adalah tag title. Tulisan di antara tag title muncul sebagai judul pada browser.
Telah dijelaskan sebelumnya bahwa di antara tag head diletakan tag yang tidak muncul pada halaman. Salah satu tag yang diletakan di antara tag head adalah tag title. Tulisan di antara tag title muncul sebagai judul pada browser.
Contoh penggunaannya adalah sebagai
berikut.
<title>Judul Website<title>
Judul, Paragraf, dan Garis Baru
Pengaturan tampilan tulisan pada halaman web HTML tidak seperti membuat tulisan di Ms Word. Secara garis besar, tampilan tulisan dibagi dalam dua bagian yaitu judul dan paragraf. Judul diletakan di antara tag h (heading). Sedangkan tulisan yang dibagi-bagi ke dalam beberapa paragraf di bawahnya diletakan di antara tag p.
Pengaturan tampilan tulisan pada halaman web HTML tidak seperti membuat tulisan di Ms Word. Secara garis besar, tampilan tulisan dibagi dalam dua bagian yaitu judul dan paragraf. Judul diletakan di antara tag h (heading). Sedangkan tulisan yang dibagi-bagi ke dalam beberapa paragraf di bawahnya diletakan di antara tag p.
Adakalanya kita butuh menuliskan baris
baru pada suatu paragraf. Garis baru tersebut tidak bisa dibuat dengan hanya
menekan enter, tapi harus diawali dengan tag br. Tag br ini tidak
seperti kode HTML pada umumnya yang terdiri atas bagian pembuka dan bagian
penutup. Tag br hanya terdiri dari satu bagian saja dan diletakan di
depan tulisan yang ingin tampil sebagai garis baru.
Berikut adalah contoh penggunaan
judul, paragraf, dan garis baru pada halaman website HTML.
<h1>Judul</h1>
<p>Paragraf pertama.
<br/>Garis baru pada paragraf pertama.</p>
<p>Paragraf pertama.
<br/>Garis baru pada paragraf pertama.</p>
Formating Teks
Pada sebuah tulisan, kadang diperlukan adanya penegasan terhadap suatu kata, frase, atau kalimat tertentu. Penegasan tersebut biasanya dilakukan dengan cara menebalkan huruf, memiringkan huruf, atau mengarisbawahi huruf. Untuk menebalkan huruf, caranya adalah dengan menambahkan tag b atau tag strong pada huruf/kata/frase/kalimat yang hendak ditebalkan. Untuk memiringkan huruf adalah dengan menggunakan tag i atau tag em. Sedangkan untuk mengarisbawahi huruf adalah dengan menggunakan tag u.
Pada sebuah tulisan, kadang diperlukan adanya penegasan terhadap suatu kata, frase, atau kalimat tertentu. Penegasan tersebut biasanya dilakukan dengan cara menebalkan huruf, memiringkan huruf, atau mengarisbawahi huruf. Untuk menebalkan huruf, caranya adalah dengan menambahkan tag b atau tag strong pada huruf/kata/frase/kalimat yang hendak ditebalkan. Untuk memiringkan huruf adalah dengan menggunakan tag i atau tag em. Sedangkan untuk mengarisbawahi huruf adalah dengan menggunakan tag u.
Huruf tebal ini diletakan di antara
tag b.
Huruf miring ini diletakan di antara tag i.
Sedangkan Huruf yang bergaris bawah ini diletakan di antara tagu.
Huruf miring ini diletakan di antara tag i.
Sedangkan Huruf yang bergaris bawah ini diletakan di antara tagu.
Contoh Penggunaan kodenya adalah
sebagai berikut.
<b>Tulisan yang mau ditebalkan</b>
<i>Tulisan yang mau dimiringkan</i>
<u>Tulisan yang diberi garis bawah</u>
<i>Tulisan yang mau dimiringkan</i>
<u>Tulisan yang diberi garis bawah</u>
Perataan Teks
Perataan teks yang dimaksud di sini adalah bagaimana kita menampilkan teks agar terletak di kiri (kalau yang ini otomatis tanpa kode html pun teks pasti terletak di kiri), di tengah, dan di kanan.
Perataan teks yang dimaksud di sini adalah bagaimana kita menampilkan teks agar terletak di kiri (kalau yang ini otomatis tanpa kode html pun teks pasti terletak di kiri), di tengah, dan di kanan.
Untuk perataan teks ini, kita
gunakan tag p yang di dalam tag pembukanya ditambahkan attribute align="left/right/center".
Teks
ini berada di tengah halaman
Teks
ini berada di kanan halaman
Contoh penggunaannya adalah sebagai
berikut.
<p align="center">Membuat teks di
tengah</center>
<p align="right">Membuat teks di kiri</right>
<p align="right">Membuat teks di kiri</right>
Membuat Daftar
Telah dijelaskan sebelumnya, bahwa untuk membuat baris baru adalah dengan menambahkan tag br pada awal tulisan yang ingin ditampilkan di garis baru. Tapi adakalanya kita perlu menuliskan beberapa garis baru tersebut sebagai sebuah daftar yang memiliki tanda di depannya. Dalam HTML, dikenal dua istilah untuk menampilkan daftar bertanda, yaitu unordered list disingkat ul (daftar yang tidak berurutan, tanda depannya bukan berupa urutan nomor) dan ordered list disingkat ol (daftar berurutan dan tanda depannya berupa nomor berurutan).
Telah dijelaskan sebelumnya, bahwa untuk membuat baris baru adalah dengan menambahkan tag br pada awal tulisan yang ingin ditampilkan di garis baru. Tapi adakalanya kita perlu menuliskan beberapa garis baru tersebut sebagai sebuah daftar yang memiliki tanda di depannya. Dalam HTML, dikenal dua istilah untuk menampilkan daftar bertanda, yaitu unordered list disingkat ul (daftar yang tidak berurutan, tanda depannya bukan berupa urutan nomor) dan ordered list disingkat ol (daftar berurutan dan tanda depannya berupa nomor berurutan).
Contoh Daftar Tidak Berurutan
- Bawang Merah
- Bawang Putih
- Cabe Merah
Contoh Daftar Berurutan
Pancasila
Pancasila
- Ketuhanan yang Maha Esa
- Kemanusiaan yang Adil dan Beradab
- Persatuan Indonesia
- Kerakyatan yang Dipimpin oleh Hikmah Kebijaksanaan dalam Permusyawaratan/Perwakilan
- Keadilan Sosial Bagi Seluruh Rakyat Indonesia
Berikut ini adalah contoh
penggunaannya
<ul>
<li>Daftar pertama</li>
<li>Daftar kedua</li>
</ul>
<li>Daftar pertama</li>
<li>Daftar kedua</li>
</ul>
Untuk daftar berurutan yang ditandai
dengan nomor berurut di depannya tinggal ganti ul dengan ol.
Link atau Tautan
Dengan adanya link atau tautan kita bisa membuat sebuah tulisan menjadi hidup dan terhubung dengan halaman atau bagian lain sebuah website. Kode HTML yang digunakan untuk menghubungkan suatu halaman dengan halaman lainnya adalah tag a. Kita bisa menghubungkan suatu halaman dengan halaman lain melalui suatu huruf/kata/frase/kalimat yang terlihat hidup dan jika kita klik akan muncul halaman lain yang dikaitkan. Istilah ini disebut sebagai link atau tautan.
Dengan adanya link atau tautan kita bisa membuat sebuah tulisan menjadi hidup dan terhubung dengan halaman atau bagian lain sebuah website. Kode HTML yang digunakan untuk menghubungkan suatu halaman dengan halaman lainnya adalah tag a. Kita bisa menghubungkan suatu halaman dengan halaman lain melalui suatu huruf/kata/frase/kalimat yang terlihat hidup dan jika kita klik akan muncul halaman lain yang dikaitkan. Istilah ini disebut sebagai link atau tautan.
Secara sederhana kode untuk
menyisipkan tulisan bertaut adalah sebagai berikut.
<a href="http://membangunwebsite.com">Teks
Link</a>
Pada kode tersebut terdapat tag a
kemudian di bagian pembuka terdapat attribute href yang diikuti oleh tanda sama
dengan dan dilanjutkan dengan alamat di dalam tanda "". Alamat
yang terdapat di antara tanda "" adalah alamat tujuan dari
tautan pada tulisan yang dibuat. Di antara pembuka dan penutup kode HTML ada
tulisan Teks Link. Tulisan tersebut adalah tulisan yang muncul berupa
tautan menuju alamat yang dituju. Kode tersebut pada post akan tampil sebagai
berikut.
Tulisan bertaut tersebut apabila
diklik akan menuju halaman tujuan yang terbuka di tab yang sama. Jika kita
ingin alamat tujuan terbuka di tab baru, kita tambahkan target="_blank"
pada bagian pembuka. Berikut ini adalah contoh penggunaannya.
<a href="http://membangunwebsite.com"
target="_blank">Teks Link</a>
Tampilan kode tersebut pada post
akan menjadi seperti berikut ini.
Silakan dicoba, link tersebut pasti
akan terbuka pada tab baru.
Kita juga bisa menambahkan attribute title="..." yang berfungsi untuk menampilkan informasi berupa tulisan ketika link tersebut ditunjuk oleh pointer mouse. Penempatannya diletakan pada pada bagian pembuka.
Kita juga bisa menambahkan attribute title="..." yang berfungsi untuk menampilkan informasi berupa tulisan ketika link tersebut ditunjuk oleh pointer mouse. Penempatannya diletakan pada pada bagian pembuka.
<a href="http://membangunwebsite.com" target="_blank"
title="Tulisan muncul ketika ditunjuk pointer">Teks Link</a>
Kode di atas akan tampil seperti
berikut ini.
Silakan coba tunjuk oleh pointer,
pasti akan muncul tulisan "Tulisan muncul ketika ditunjuk pointer"
sesuai dengan yang kita tuliskan pada kode html di atas.
Menyisipkan Gambar
Konten sebuah halaman web tidak hanya terdiri dari tulisan. Kita bisa menambahkan berbagai macam komponen seperti gambar, video, animasi dari flash, dan sebagainya. Kode HTML yang perlu diketahui berikutnya adalah bagaimana menambahkan gambar pada halaman website HTML. Tag HTML yang digunakan untuk menyisipkan gambar adalah tag img. Berikut adalah penjelasan mengenai bagaimana menyisipkan gambar pada halaman website HTML.
Konten sebuah halaman web tidak hanya terdiri dari tulisan. Kita bisa menambahkan berbagai macam komponen seperti gambar, video, animasi dari flash, dan sebagainya. Kode HTML yang perlu diketahui berikutnya adalah bagaimana menambahkan gambar pada halaman website HTML. Tag HTML yang digunakan untuk menyisipkan gambar adalah tag img. Berikut adalah penjelasan mengenai bagaimana menyisipkan gambar pada halaman website HTML.
Untuk menampilkan gambar
alakadarnya, kita hanya perlu menggunakan kode berikut ini.
<img
src="http://i150.photobucket.com/albums/s103/sopandiahmad/Gambar Lucu/00238.jpg"/>
Maksud dari kode tersebut adalah tag
img menunjukkan bahwa kode HTML tersebut adalah untuk menampilkan image.
Kode src menunjukkan url source (sumber) gambar yang akan
ditampilkan. Kode tersebut akan tampil sebagai berikut.
Karena sifat internet yang labil,
mungkin saja gambar yang ingin kita tampilkan tidak dapat diatasi dengan baik
oleh server dan tidak dapat tampil. Untuk mengatasinya, kita bisa mengganti
gambar tersebut dengan teks. Ini juga berfungsi sebagai salah satu metode SEO
gambar agar dapat tampil di hasil pencarian mode gambar. Kita bisa menambahkan
kode berikut untuk menampilkan alternatif teks menggunakan tag alt jika
gambar tidak dapat tampil.
<img
src="http://membangunwebsite/gambartidakada.jpg"
alt="Stop-Contact"/>
Jika gambar tidak dapat muncul
karena server gambar sedang bermasalah, posisi yang seharusnya diisi gambar
akan diganti oleh tulisan "Stop-Contact".
Kita juga bisa menambahkan
keterangan gambar pada saat gambar tersebut ditunjuk oleh pointer mouse.
Caranya adalah dengan menambahkan tag title seperti berikut.
<img
src="http://i150.photobucket.com/albums/s103/sopandiahmad/Gambar
Lucu/00238.jpg" alt="Stop-Contact"
title="Stop-Contact"/>
Coba tunjuk gambar berikut, akan
muncul tulisan sesuai dengan yang teks yang tertera pada tag title.
Kita juga bisa menggabungkan kode
untuk link atau dan gambar sekaligus agar gambar yang kita tampilkan tertaut
pada alamat tertentu. Caranya adalah dengan menggunakan kode HTML untuk link
dan meletakan kode HTML untuk gambar di antara kode pembuka dan penutup kode
HTML link. Berikut adalah contoh kodenya.
<a
href="http://membangunwebsite.com"><img
src="http://i150.photobucket.com/albums/s103/sopandiahmad/Gambar
Lucu/00238.jpg" alt="Stop-Contact"
title="Stop-Contact"/></a>
Tampilan halaman html yang dibuat
akan tampak penuh satu halaman layar. Pada tulisan kali ini saya akan
menjelaskan bagaimana membuat tampilan halaman website HTML dengan lebar
tertentu tampil secara vertikal di bagian tengah layar.
Katakanlah kita telah membuat
halaman website HTML dengan kode sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>
Pada browser, kode di atas akan
menampilkan tulisan diantara tag title pada bar browser dan menampilkan
tulisan diantara tag body pada tampilan utama browser. Tulisan akan
tampak memenuhi layar dan ini kurang enak dipandang mata. Untuk membuat tulisan
tampil secara vertikal dengan lebar tertentu di tengah layar, kita perlu menambahkan
kode css diantara tag head. Metode ini adalah metode menambahkan CSS
secara internal (menyatu dengan file HTML). Bisa juga kode CSS diletakan secara
eksternal (terpisah dengan file html).
Untuk menambahkan css secara
internal adalah dengan menambahkan tag style diantara tag head
sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
<style type="text/css">
...
</style>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Judul Tampil di Bar Browser</title>
<style type="text/css">
...
</style>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>
Titik-titik diantara tag style
tersebut adalah tempat diletakannya kode css untuk mengatur tampilan halaman
website HTML.
Untuk membuat tulisan (konten)
tampil di tengah layar secara vertikal dengan lebar tententu, tambahkan kode
css berikut.
body {
width: 800px;
margin: auto;
}
body {
width: 800px;
margin: auto;
}
Sekarang tampilan halaman website
HTML yang telah dibuat akan tampil dengan lebar 800px secara vertikal di tengah
layar pada browser apa pun dan ukuran layar berapa pun.
Untuk membuat CSS secara eksternal,
caranya adalah dengan membuat file baru berekstensi CSS, misalnya style.css.
Letakan kode diantara tag style pada file style.css tersebut.
Kemudian kode style diantara tag head, yaitu
<style type="text/css">
body {
width: 800px;
margin: auto;
}
</style>
ganti dengan
<link rel="stylesheet" type="text/css" href="style.css">
sehingga kode di antara tag head menjadi seperti berikut.
<head>
<title>Judul Tampil di Bar Browser</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style type="text/css">
body {
width: 800px;
margin: auto;
}
</style>
ganti dengan
<link rel="stylesheet" type="text/css" href="style.css">
sehingga kode di antara tag head menjadi seperti berikut.
<head>
<title>Judul Tampil di Bar Browser</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
