Belajar HTML Dasar Part 1: Pengertian

HTML
Jika anda ingin mempelajari bagaimana cara membuat website, langkah pertama adalah
mempelajari HTML. HTML merupakan dasar dari semua halaman web yang kita lihat di
Internet. Tetapi, apa sebenarnya HTML itu? dalam tutorial pertama Belajar HTML Dasar ini
kita akan membahas Pengertian HTML.

Pengertian HTML
HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di
dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang
dapat berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut.
Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak
hanya text yang dapat dijadikan link.
Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai
bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal,
dan jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai HTML tag.
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web,
jika hanya menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa
pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan
PHP. Akan tetapi sebelum anda belajar JavaScript maupun PHP, memahami HTML
merupakan hal yang paling awal.
HTML bukanlah bahasa pemograman (programming language), tetapi bahasa markup (markup
language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal bahasa pemograman lain,
dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemograman
seperti IF, LOOP, maupun variabel. HTML hanya sebuah bahasa struktur yang fungsinya untuk
menandai bagian-bagian dari sebuah halaman.
Selain HTML, dikenal juga xHTML yang merupakan singkatan dari eXtensible Hypertext
Markup Language. xHTML merupakan versi lama dari HTML (sebelum era HTML5 seperti
saat ini). xHTML menggunakan aturan penulisan yang lebih ketat. Jika anda menemukan artikel
yang membahas xHTML, bisa disamakan dengan HTML, karena perbedaannya tidak terlalu
banyak.
File HTML harus dijalankan dari aplikasi web browser. Dalam tutorial belajar HTML dasar
selanjutnya, kita akan membahas tentang Fungsi Web Browser.

Belajar HTML Dasar Part 2: Mengenal

Fungsi Web Browser
Setelah mempelajari Pengertian HTML dalam tutorial sebelumnya. Pada tutorial belajar HTML
kali ini kita akan mengenal fungsi dari web browser, pengertian web browser dan kaitannya
dengan standar HTML oleh W3C.

Pengertian Web Browser

Web Browser (atau biasa disebut browser) adalah sebuah software aplikasi untuk menerima,
menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia). Dan salah satu
informasi itu dibuat dalam format HTML.
Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti yang
dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML sama baiknya,
namun jika sudah berbicara mengenai desain halaman, tiap-tiap browser memiliki beberapa
perbedaan.
HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus menangani web,
yaitu W3C (World Wide Web Consortium). Hal ini dikarenakan tiap-tiap program web
browser menerjemahkan kode-kode HTML secara berbeda-beda, sehingga di perlukan sebuah
standar yang sama untuk seluruh browser.
Namun pada penerapannya, standar ini hanya merupakan rekomendasi. Beberapa web browser
membuat aturannya sendiri.
Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an. Hampir 90%
web browser yang digunakan saat itu adalah Internet Explorer, dan IE tidak sepenuhnya
mengikuti rekomendasi W3C. Sedangkan web browser Opera yang mencoba menerapkan
standar W3C tidak terlalu populer. Perbedaan aturan penerjemahan HTML di antara web
browser inilah yang terus menjadi tantangan bagi programmer web.
Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser Mozilla Firefox dan Google
Chrome telah menguasai lebih dari 50%, dan IE juga telah berusaha menerapkan standar W3C.

Fungsi Web Browser

Untuk mempelajari HTML, web browser adalah perangkat utama yang kita butuhkan. Ibarat
bahasa pemograman lainnya, Web Browser adalah compiler dan intrepreter HTML. Anda bebas

menggunakan web browser yang disukai, namun dalam tutorial Belajar HTML ini saya akan
menggunakan Mozilla Firefox.
Selain web browser, aplikasi lain yang kita butuhkan untuk mempelajari HTML adalah sebuah
text editor, untuk pembahasan mengenai text editor HTML ini akan kita bahas pada tutorial
selanjutnya: Memilih Aplikasi Editor HTML.

Belajar HTML Dasar Part 3: Memilih

Aplikasi Editor HTML (Notepad++)
Setelah web browser berhasil diinstal, untuk membuat kode HTML, kita membutuhkan sebuah
aplikasi text editor. Dalam tutorial HTML kali ini kita akan membahas tentang cara memilih
aplikasi text editor yang sesuai, salah satunya adalah Notepad++.

Memilih Aplikasi Editor HTML

Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi editor HTML digunakan
untuk mempermudah kita membuat kode HTML. HTML sendiri pada dasarnya hanya text biasa
yang ditulis dalam kode-kode khusus. Web Browser-lah yang akan menerjemahkan kode HTML
ini menjadi sebuah tampilan halaman web.
Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu menggunakan
aplikasi yang besar dan berat. Aplikasi Notepad bawaan Windows sudah cukup untuk membuat
kode HTML. Namun untuk tutorial belajar HTML ini saya akan menggunakan aplikasi
Notepad++.
Aplikasi Notepad++ bisa di download secara gratis dari http://notepad-plus-plus.org/download/
dimana pada saat tutorial ini diupdate pada Agustus 2016, versi terakhir adalah 6.9.2, berukuran
sekitar 4MB. Notepad++ merupakan aplikasi editor text gratis ringan namun memiliki banyak
fitur. Salah satunya adalah fitur pewarnaan code (syntax highlighting). Fitur ini akan
memudahkan penulisan HTML.

Bagaimana dengan Adobe Dreamweaver?

Aplikasi Adobe Dreamweaver merupakan aplikasi web editor yang paling populer.
Dreamweaver menyediakan fitur melimpah untuk sekedar membuat halaman web dengan kode
HTML. Dreamwever tidak hanya sebuah text editor untuk HTML saja, namun juga untuk
berbagai bahasa pemograman web lainnya.
Dibalik keunggulannya, menurut saya Dreamweaver tidak cocok untuk proses belajar. Aplikasi
ini cenderung berat dan berharga jutaan rupiah untuk versi legalnya. Sekarang hanya bisa
didapat dengan cara berlangganan setiap bulan. Dreamweaver lebih cocok digunakan jika anda
telah memahami kode-kode program yang ada dibaliknya (dan mampu membeli versi
originalnya).
Tetapi apapun text editor yang digunakan, hal ini tidak menjadi masalah. Karena selama text
editor itu dapat menulis dan menyimpan text, aplikasi tersebut sudah lebih dari cukup sebagai
editor HTML.

Sebagai alternatif, aplikasi text editor gratis lain yang bisa anda coba adalah Komodo Edit,
Bracket, Atom, Aptana Studio, Eclipse atau Net Beans.
Setelah aplikasi web browser dan text editor telah tersedia dalam komputer, saatnya untuk
mencoba menjalankan file HTML pertama kita.

Belajar HTML Dasar Part 4: Cara

Menjalankan File HTML
28 Apr 13 | Andre | Tutorial HTML | 10 Comments
Setelah Web Browser selesai diinstal, dan Text Editor sudah tersedia, kali ini kita akan membahas
tentang cara menjalankan file HTML dari web browser.

Untuk memudahkan dalam mengakses file, sebaiknya buat sebuah folder BelajarHTML di
Drive D. Folder ini akan kita jadikan tempat seluruh halaman HTML yang akan dibuat.
Selanjutnya, buka aplikasi Notepad++ , atau aplikasi text editor lainnya, lalu ketik text berikut
ini:
1 Selamat Pagi Dunia, Hello World!
Save teks diatas sebagai hello.html pada folder BelajarHTML. Setelah itu jalankan file
hello.html kita dengan cara double klik file tersebut, atau klik kanan > Open With > Firefox
(jika anda menggunakan web browser firefox)

Selamat! file HTML kita sudah dapat berjalan, walaupun sebenarnya belum ada satupun kode
HTML didalamnya.

Dari percobaan ini kita dapat melihat bahwa setiap halaman HTML harus diakhiri dengan extensi
.html. Anda mungkin juga akan menemukan beberapa halaman juga memiliki ekstensi .htm,
eksetensi ini digunakan untuk mendukung Windows versi lama yang masih menggunakan
ekstensi 3 huruf di belakang sebuah file.

Apa yang kita lakukan disini adalah menjalankan file HTML dari komputer lokal. Perhatikan
bagian alamat pada web browser, diawali dengan file:/// lalu diikuti dengan alamat file HTML
yang disimpan dalam komputer, misalnya: D:/BelajarHTML/hello.html. Artinya, kita tidak
mesti online untuk membuat dan menjalankan file HTML.
Setelah mempelajari cara menjalankan file HTML dari komputer lokal, Pada tutorial selanjutnya,
kita akan mulai mempelajari kode-kode HTML, yakni Pengertian tag, elemen, dan atribut dalam
HTML.

Belajar HTML Dasar Part 5: Pengertian Tag,

Elemen, dan Atribut pada HTML
28 Apr 13 | Andre | Tutorial HTML | 36 Comments
Setelah berhasil menjalankan file HTML pada web browser, dalam lanjutan tutorial belajar
HTML dasar kali ini kita akan membahas apa yang dimaksud dengan Tag, Elemen, dan Attribut
pada HTML. Ketiganya merupakan dasar dari HTML, dan dasar dari seluruh halaman web yang
ada di Internet.

Pengertian Tag dalam HTML

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser
untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai
link? Dalam HTML, tanda ini dikenal dengan istilah tag.
Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag
penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup
ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua
kurung siku: < dan >.
Berikut adalah format dasar penulisan tag HTML:
<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>

<p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.

</p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda
forward slash (/)

Jika lupa memberikan penutup tag, umumnya browser akan memaafkan kesalahan ini dan
tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun ini sepertinya
memudahkan, tidak jarang malah bikin bingung.
Sebagai contoha lain, jika ingin membuat suatu text dalam sebuah paragraf yang di tulis tebal
atau miring, di dalam HTML dapat ditulis sebagai berikut:
1 <p>Ini adalah sebuah paragraf. <i>Hanya kumpulan beberapa kalimat</i>.
2 Paragraf ini terdiri dari <b>3 kalimat</b></p>.
Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:
Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari
3 kalimat.
Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text
secara garis miring (i, singkatan dari italic), dan tag <b> untuk menebalkan tulisan (b, singkatan
dari bold).

Terdapat pengecualian beberapa tag yang tidak berpasangan, seperti <br> untuk break (pindah
baris) atau <hr> untuk horizontal line (garis horizontal). Tag ini dikenal juga dengan sebutan
self closing tag atau void tag, untuk penulisannya bisa ditulis dengan <br>, maupun <br />.

HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>. Pada awal
kemunculan HTML, programmer web umumnya menggunakan huruf besar untuk seluruh tag
agar membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML
mewajibkan huruf kecil untuk semua tag.
Dalam HTML5, aturan ini kembali tidak diharuskan. Akan tetapi kebiasaan web programmer
saat ini adalah menggunakan huruf kecil untuk seluruh tag.

Pengertian Element dalam HTML

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu
sendiri dan atribut yang dimikinya (jika ada). Sebagai contoh perhatikan kode HTML berikut:
1 <p> Ini adalah sebuah paragraf </p>
Pada contoh diatas, <p>Ini adalah sebuah paragraf</p> merupakan element p.
Element tidak hanya berisi text, namun juga bisa tag lain.
Contoh:
1 <p> Ini adalah sebuah <em>paragraf</em> </p>
Dari contoh diatas,<p> Ini adalah sebuah <em>paragraf</em> </p> merupakan elemen p.
Dalam pembahasan atau tutorial tentang HTML, tidak jarang istilah tag dan element saling
dipertukarkan.

Pengertian Atribut dalam HTML

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa
instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama
dan nilai (value), dan ditulis dengan name=value. Value diapit tanda kutip, boleh
menggunakan tanda kutip satu () atau dua ().
Contoh kode HTML:
1 <a href="http://www.duniailkom.com">ini adalah sebuah link</a>
Pada kode HTML diatas, href=http://www.duniailkom.com adalah atribut. href merupakan
nama dari atribut, dan http://www.duniailkom.com adalah value atau nilai dari atribut tersebut.
Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag dengan atribut,
terutama atribut id dan class yang sering digunakan untuk manipulasi halaman web
menggunakan CSS maupun JavaScript.
HTML memiliki banyak atribut yang beberapa diantaranya hanya cocok untuk tag tertentu saja.
Sebagai contoh, atribut href diatas hanya digunakan untuk tag <a> saja (dan beberapa tag
lain). Penjelasan tentang tujuan dan pengertian dari atribut seperti href ini akan kita bahas pada
tutorial-tutorial selanjutnya.

Pada tutorial kali ini, kita telah mempelajari salah satu aspek terpenting di dalam HTML, yakni
Pengertian Tag, Elemen, dan Atribut pada HTML. Dalam tutorial HTML dasar selanjutnya, kita
akan mempelajari tentang Struktur Dasar Halaman HTML.