17.53
Unknown
Cara Belajar Membuat HTML Dasar
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.
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 :
|
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 :
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.
Belajar HTML Dasar : Struktur 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.
