Belajar HTML Dari Dasar dengan Logika Paling Sederhana!

Internet saat ini sudah jadi kebutuhan primer bagi banyak orang, terutama bagi kaum urban yang tinggal di kota.

Penyebab utama internet sangat populer karena ada banyak jenis hiburan, fitur dan layanan yang bisa dipakai. Misalnya:

Email, untuk berkirim surat online (google mail, ymail)
Sosial media, untuk menjalin hubungan sosial dengan orang lain (facebook, twitter, IG)
Chatting, untuk berkirim kabar dengan orang lain, bisa sharing gambar, video, telpon, hingga video call (Line, Whatsapp, Telegram), dll

Masih banyak lagi dunia yang ada di internet saat ini.

Daftar Isi

Apa itu HTML?
Apakah HTML saja cukup?
Software yang Dibutuhkan
- Teks Editor HTML
- Web Browser
Dasar-dasar HTML
- Struktur Penulisan dan Syntax
- Mengenal Elemen dan Atribut
  - Elemen HTML
  - Atribut HTML
Praktek Koding HTML
Kesimpulan

Kebanyakan aplikasi tersebut gratis untuk digunakan, sebut saja gmail, fb, IG, WA, dll.

Untuk membuat banyak layanan keren tersebut tentu menggunakan bahasa pemrograman yang rumit.

Bahasa pemrograman tersebut salah satunya adalah HTML.

Apa itu HTML?

Pengertian HTML adalah singkatan dari Hyper Text Markup Language yaitu bahasa markah yang digunakan untuk membangun sebuah web.

Jadi, mudahnya adalah HTML ini bahasa wajib yang harus dikuasai oleh setiap programmer web.

Apapun bahasa pemrograman website yang kamu gunakan, entah react, php, vue, dll. Kamu tetap wajib bisa HTML.

Mengapa?

Ibarat badan manusia, HTML itu kerangkanya. Jika tidak ada kerangka, maka manusia tidak bisa bergerak dan tidak ada bentuknya.

Atau, juga bisa dilogikan seperti kita membangun rumah. HTML adalah pondasi dan tiang rumah tersebut.

Kalau tidak ada tiang dan pondasinya, rumah bakal sangat mudah ambruk bukan?

Apakah HTML saja cukup?

O tentu saja tidak cukup verguso :P.

Seperti yang telah saya jelaskan diatas, HTML ini hanya bahasa dasar. Ya sangat dasar dan harus dikuasai oleh setiap web developer.

Ibarat, kamu ingin jadi akuntan. Syarat wajibnya ya kamu harus bisa hitung-hitungan dan aljbar.

Kalau berhitung aja tidak bisa, bagaimana bisa menjadi akuntan?

Lebih detailnya akan saya bahas di artikel selanjutnya, seperti tutorial css.

Software yang Dibutuhkan

Sebelum kamu belajar, pastikan 2 jenis software ini sudah ada di laptop atau komputer kamu, yaitu:

HTML editor
Web Browser

Teks Editor HTML

Sublime HTML Editor Terbaik — Screenshot tampilan aplikasi Sublime

Untuk menulis kode HTML dibutuhkan aplikasi, atau biasa disebut dengan HTML editor.

Contoh HTML editor yang umum digunakan adalah:

Editor tersebut berjenis WYSIWYG atau What You See is What You Get.

Web Browser

Google chrome untuk mendisplay HTML — Tampilan browser Google Chrome

Browser adalah jenis aplikasi untuk membuka situs website. Browser yang populer adalah:

Sebelum kamu belajar HTML, pastikan 2 jenis aplikasi tersebut (html editor & web browser) sudah terinstall semuanya.

Pilih salah satu yang menurutmu enak dan nyaman. Semuanya punya kelebihan dan kekurangannya masing-masing, tergantung seleramu.

Dasar-dasar HTML

Untuk belajar html dari dasar, saya berusaha menulis dengan gaya bahasa dan alur pembelajaran saya sendiri berdasar pengalaman pribadi.

Pembahasan ini saya buat supaya sangat mudah dimengerti, walau kamu seorang pemula sekalipun.

Jika serius, bahasa HTML bisa dikuasai dalam sehari saja

Serius? Ya saya serius! Asal kamu serius ya!!!

Struktur Penulisan dan Syntax

Sebuah file HTML harus disimpan dengan ekstensi .html.

Apa itu ekstensi? Ekstensi adalah jenis format suatu file, misal jika jenis dokumen ada ekstensi .DOC, .PDF, kalau audio format .mp3, dll.

Berikut ini adalah struktur kode HTML yang paling dasar:

<!DOCTYPE html>
<html>
<head>
	<title>Ini Judul halaman yang lain</title>
</head>
<body>
	<h1>Ini heading satu</h1>
	<p>ini paragraf kedua</p>
</body>
</html>

Dari kode diatas didapat hasil seperti ini:

Screenshot file HTML — Hasil kode yang pertama

Catatan penulisan kode html:

Semua kode harus diawali dengan <!DOCTYPE html>
Setelah deklarasi, harus diawali dan diakhir dengan <html>....</html>
Semua yang ditampilkan di web browser ada di <body>...</body>
Semua identitas halaman ditaruh di <head>...</head>

Mengenal Elemen dan Atribut

Semua kode yang kamu tulis itu disebut dengan tag.

Untuk menulis sebuah tag kamu harus menulis awalan dan akhiran.

Contoh, elemen html diawali dengan kode <html> kemudian diakhiri dengan </html>

Elemen HTML

Elemen dalam html adalah satu blok kode yang mendeklarasikan suatu fungsi. Misal, elemen paragraf ditulis dengan tag <p> isinya disini </p>.

Lebih jelasnya, perhatikan gambar berikut:

Pokoknya, menulis elemen itu harus diawali dan diakhiri dengan tag. Awalan dan akhirannya sama cuma ditambahi slash / di tag akhir.
Lihat tag paragraf, diawali dengan <p> diakhir dengan kode yang sama tapi ditambahi / menjadi </p>

Berikut ini adalah elemen-elemen populer yang umum digunakan:

Elemen	Tag Penulisan
Teks Header	`<h1>` ..`</h1>` sampai `<h6>`.. `</h6>`
Paragraf	`<p>` … isi konten … `</p>`
Link	`<a href="#URL">`… teks link …`</a>`
List / daftar	`<ol>` (ordered list), `<ul>` (unordered list) dan `<li>` elemen dari keduanya
Gambar	`<img>`
Block div	`<div>`
Teks span	`<span>`

Atribut HTML

Sedangkan atribut HTML adalah sebuah blok kode yang berfungsi untuk memperkaya suatu elemen HTML.

Misal, kita ingin merubah jenis font, mengganti warna, ukuran, dll. Kita memerlukan yang namanya atribut.

Ketentuan menulis atribut:

Atribut diikuti dengan sama dengan = dan petik " "
Nilai dari atribut ditulis diantara dua tanda petik " "
Jika ada 2 jenis atribut, maka atribut ditulis dengan dikasih jarak spasi

Atribut yang populer digunakan adalah:

style=" " untuk menambah style / mempercantik tampilan
width=" " dan hight=" " untuk mengatur lebar (width) dan tinggi (height)
class=" " menambah kelas dari suatu elemen
id=" " menambah id suatu elemen
src=" " untuk mendeklarasikan sumber media (gambar / video) biasa digunakan untuk melengkapi elemen gambar, contoh <img src="gambarlucu.jpg"/>

Praktek Koding HTML

Terakhir adalah praktek langsung ngoding.

Terlalu banyak teori malah bikin pusing. Sebelum praktik camkan baik-baik kalimat berikut:

tag dan elemen kode yang rumit tidak usah dihafal, yang penting tahu kalau ada elemen itu, kalau lupa? ya tinggal googling saja misal: "html paragraph elemen tag"

Kata paragraf bisa kamu ganti dengan misal bold, italic, link, dll.

Yuk, langsung saja kita praktik ya.

Note: saya menggunakan macbook, jadi tampilannya berbeda ya jika kamu menggunakan windows.

1. Buka software html editor kamu, dan bikin file baru (File -> New File) dan save as dengan nama belajar.html dan simpan di hdd kamu, terserah bisa di C, my document atau D.

2. Tuliskan kode HTML berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Judul Halaman</title>
</head>
<body>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<p>ini paragraf kedua</p>
	<p>ini ditambah teks <b>bold</b></p>
</body>
</html>

3. Simpan ctrl+s file tersebut, kemudian buka file tadi dengan menggunakan web browser.

Maka hasilnya akan seperti gambar berikut:

Kesimpulan

Lantas, gimana kalau mau bikin web yang keren?

Ya sabar dulu bambang!

Ibarat, kamu gak bakal bisa ngitung persamaan rumit kalau kamu 1+1 saja belum bisa.

Next, di pertemuan selanjutnya akan kita bahas yang lebih detail lagi.

HTML Dasar-dasar