Cara Belajar Membuat HTML Dasar
by irfan sodikin
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 :
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Hallo, selamat belajar HTML.
</body>
</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.
Belajar HTML Dasar : Dasar 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.
Belajar HTML Dasar : Pengenalan
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.
Belajar HTML Dasar : Atribut
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 :
<a
href="http://kuliah.imadewira.com">Contoh Link</a>
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'
Belajar HTML Dasar : Element
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 :
1 |
<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 :
1 |
<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 :
1 |
<p>Ini sebuah
paragraf |
2 |
<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.
Pengenalan Website
Kata dan istilah
“internet” pada dasarnya mengacu pada rangkaian dan jaringan di internet, bukan
program atau aplikasi tertentu. Maka dari itu, tanpa adanya aplikasi yang
sesuai maka internet tidak akan ada gunanya. Saat ini di internet terdapat
berbagai macam aplikasi dan layanan yang tersedia. Setiap aplikasi tersebut
berjalan sesuai dengan protokol tertentu.
Protokol ini
adalah sebuah kumpulan aturan yang mengatur tentang bagaimana aplikasi tersebut
berkomunikasi di internet. Ada 5 macam aplikasi atau layanan yang sering
digunakan di internet yaitu : WWW (web), Email, Chatting, File Transfer, Remote
Login.
WWW merupakan
singkatan dari World Wide Web atau sering disebut “website” atau cukup “web”
saja. Website merupakan layanan yang paling populer dan paling berkembang dalam
perkembangan internet. Website begitu populer bahkan banyak orang awam yang
mengidentikkan website dengan internet.
Secara teknis
website bisa dikatakan adalah sebuah sistem yang menyediakan berbagai
informasi. Informasi yang disediakan pada website dapat berupa teks, gambar,
suara, viedo dan lain-lain. Semua informasi yang tersedia di website tersimpan
di sebuah internet webserver atau disebut webserver saja.
Informasi yang
tersimpan di webserver tersebut umumnya akan ditampilkan dalam bentuk HTML
(Hypertext Markup Language). Dari komputer yang kita gunakan, website dapat
diakses dengan menggunakan sebuah software atau program aplikasi yang disebut
web browser atau disebut browser saja.
Browser akan
membaca dan menampilkan halaman website yang tersimpan di webserver dengan
protokol yang disebut HTTP (Hypertext Transfer Protocol). Terdapat banyak
browser yang tersedia saat ini, contohnya : Internet Explorer, Mozilla Firefox,
Opera dan lainnya.
Seiring pesatnya
perkembangan dunia internet, jumlah website yang ada juga semakin banyak bahkan
melebihi miliaran. Untuk memudahkan pencarian dan penelusuran halaman website,
user dapat menggunakan website yang disebut search engine (mesin pencari).
Contoh website search engine seperti Google, Yahoo, dan lainnya.
Tidak ada komentar:
Posting Komentar