Categories: Basic Programming

Belajar HTML Lengkap untuk Pemula

Saat ini, hampir semua orang bisa membuat website tanpa memahami coding. Padahal, penting juga lho untuk memahami pondasi pembentuk website, yaitu HTML.

Sekarang, coba bayangkan website Anda masih polos. Lalu, Anda pun menginstal tema. Sayangnya, layout website terlihat jauh dari harapan. Header terlalu besar, posisi menu hanya bisa di tengah, tampilan konten kurang cocok. Bahkan saat Anda berusaha memodifikasinya dengan plugin, hasilnya tetap tidak maksimal.

Nah supaya itu tidak terjadi, Anda perlu belajar HTML. Sehingga, kemampuan Anda tidak dibatasi oleh fitur dan template yang sudah tersedia. Jadi, Anda mampu menciptakan fungsi yang tidak dimiliki website tetangga. Menarik, bukan?

Nah, Anda sudah datang ke tempat yang tepat! Di sini, kami akan mendampingi Anda belajar HTML pemula dengan cara yang sederhana. Dalam sekali baca, Anda akan memahami:

  1. Apa Itu HTML?

  2. Sejarah HTML

  3. Apa Itu Tag, Elemen, dan Atribut?

  4. Kerangka Inti HTML

  5. Belajar HTML dengan Editor HTML

  6. Memilih Browser Terbaik

  7. Membuat Halaman Website Pertama

  8. Melengkapi Halaman Website

  9. Mengatur Template Halaman Website

  10. Kode Warna HTML

Tanpa berlama-lama lagi, yuk kita mulai perjalanan belajar HTML pemula ini!

Apa Itu HTML?

HTML (Hypertext Markup Language) merupakan gabungan dari dua istilah: hypertext dan markup language. Apa sih itu?

Hypertext yaitu dokumen berisi tautan yang memungkinkan pengguna terhubung ke halaman lain.

Sedangkan markup language merupakan bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan menyajikan informasi.

Jadi, HTML adalah bahasa markup untuk membuat struktur halaman website.

Sejarah HTML

Tahun 1991 adalah saksi kelahiran HTML. Dibuat oleh seorang ilmuwan bernama Tim Berners-Lee, HTML awalnya menjadi solusi untuk memudahkan para ilmuwan dalam mengakses dokumen satu sama lain.

Namun, siapa sangka HTML berkembang dan menjelma sebagai pondasi untuk membuat website di era terkini? Bahkan, 90.8% website di dunia menggunakan bahasa markup ini, lho. Menakjubkan, bukan?

Tentunya, kepopuleran HTML tersebut didapat setelah melalui sejarah yang panjang. Secara singkatnya, Anda bisa mengikuti sekilas perjalanan HTML pada tabel berikut.

VersiTahun PembuatanTujuan Pembuatan
HTML11991Memudahkan ilmuwan mengakses dokumen satu sama lain di berbagai komputer.
HTML21995Menghubungkan dokumen dan menyajikan informasi dengan berbagai format atau gaya.
HTML31997Memperbaiki bug pada versi sebelumnya. Versi ini juga mulai mendukung styling dengan penggunaan CSS.
HTML41997-2000Standarisasi kode HTML secara universal sehingga browser apapun dapat menampilkan hasil yang sama.
HTML52014Penyederhanaan syntax dengan efek error yang lebih minimal. Fitur-fitur juga lebih disempurnakan.

Seperti yang Anda lihat, HTML5 merupakan versi paling update. Dibandingkan leluhurnya, HTML5 membawa sistem yang paling sempurna.

Karena itu, kami sarankan Anda mempelajari HTML5 supaya wawasan Anda lebih up to date dan eksekusi belajar HTML Anda juga lebih maksimal. Apalagi dengan syntax yang lebih sederhana, HTML5 sangat cocok untuk belajar HTML pemula.

Apa Itu Tag, Elemen, dan Atribut?

Agar lebih mudah belajar HTML, Anda harus berkenalan dengan tag, elemen, dan atribut. Mereka adalah tiga sekawan yang menjadi atom pembentuk HTML.

Berikut masing-masing penjelasannya.

  • Tag, digunakan sebagai awalan instruksi atau perintah yang akan dibaca web browser. Misalnya: tag <bold>. Tag ini akan meminta browser menampilkan teks dalam format tebal;
  • Element, merupakan keseluruhan kode yang terdiri dari tag pembuka (<>) hingga tag penutup (</>). Contohnya: <h1> Contoh Elemen </h1>. Meski demikian, tidak semua tag HTML memiliki pasangan penutup;
  • Attribute, yaitu informasi atau perintah tambahan yang berada di dalam elemen. Misalnya: <img src=”pantai.jpg” alt=”Pantai Baron.”> Elemen ini menggunakan tag <img> dengan atribut sumber gambar (src) dan alt text (alt).

Setelah memahami komponen pembentuk HTML, silakan pelajari coding HTML dasar. Dengan mengetahui coding HTML dasar, Anda akan lebih siap untuk menggunakan tag HTML yang lebih menantang.

Kerangka Inti HTML

Sampai sini, Anda sudah mengetahui apa saja atom penyusun HTML. Jika atom-atom tersebut dikumpulkan, terbentuklah dokumen HTML.

Namun, mari usir bayangan dokumen HTML yang dipenuhi ratusan tag. Kita akan mengulik bentuk dokumen HTML paling sederhana dan menjadi kerangka inti yang menyusun setiap dokumen HTML di dunia ini.

  • <!DOCTYPE html> berfungsi untuk mendeklarasikan kepada komputer bahwa Anda akan menuliskan perintah dalam kode HTML;
  • <html></html> merupakan tag yang menandakan bahwa Anda memulai dan mengakhiri dokumen dalam kode HTML;
  • <head><head> diisi dengan metadata dari dokumen HTML. Seperti judul tab, deskripsi, dan lain-lain;
  • <body></body> diisi dengan konten halaman website.

Setelah mengantongi kerangka inti HTML, Anda dapat melengkapinya sesuai dengan tujuan dan kebutuhan halaman website Anda.

Bonus info, jika Anda penasaran untuk melihat dokumen HTML sebuah halaman website, silakan lakukan trik berikut: klik kanan pada mouse dan pilih ‘View page source’. Atau sederhananya dengan menekan Ctrl + U.

Belajar HTML dengan Editor HTML

Dari tadi, kita sudah mempelajari teori belajar HTML dasar. Pasti, Anda sudah tidak sabar untuk segera mempraktikkannya.

Kalau begitu, sekarang saatnya Anda menyiapkan editor HTML. Editor HTML merupakan lembar kerja untuk membuat dan mengedit dokumen HTML.

Ada berbagai editor HTML yang bisa Anda gunakan secara gratis. Seperti Notepad++, Atom, Bracket, dan banyak lagi. Namun sebelum memilih editor HTML, pastikan OS komputer Anda kompatibel.

Nah setelah menginstal editor HTML, Anda bisa belajar HTML dengan lebih mudah. Sebab, fitur yang ditawarkan editor HTML akan mempercepat proses kerja Anda.

Memilih Browser Terbaik

Setelah membuat dokumen HTML, Anda pasti ingin melihat hasilnya, bukan? Karena itu, pastikan Anda sudah memiliki web browser. Web browser merupakan aplikasi untuk mengakses dan menampilkan halaman website.

Oleh web browser, bahasa komputer yang telah Anda buat di editor HTML akan diterjemahkan ke dalam tampilan yang dipahami manusia.

Nah untuk berjaga-jaga, sebaiknya siapkan minimal dua web browser. Meski sudah ada standarisasi HTML, bisa saja terjadi error sehingga tampilan antara satu web browser dengan browser lainnya berbeda.

Membuat Halaman Website Pertama

Sekarang, Anda sudah bisa membuat dan melihat eksekusi syntax HTML pada browser Anda. Sayangnya, halaman HTML Anda belum bisa diakses oleh publik. Alasannya, file HTML masih tersimpan dalam direktori komputer Anda saja.

Karena itu, perlu untuk mengonlinekan project tersebut. Jalan tercepatnya yaitu dengan membuat website melalui layanan web hosting.

Tak hanya cepat, cara pengoperasiannya juga mudah, lho. Anda bisa segera mengupload file HTML ke WordPress ataupun langsung melakukan kustomisasi melalui WordPress Editor.

Melengkapi Halaman Website

Supaya ilmu belajar HTML dasar Anda semakin top, cobalah membuat komponen tambahan pada halaman website. Masukkan bumbu-bumbu pelengkap agar halaman website Anda makin sedap dan informatif.

Anda bisa memasukkan gambar, tabel, form, ataupun komponen pelengkap lainnya. Dijamin, halaman website yang Anda sajikan akan lebih mudah dipahami, lebih menjaring peminat, dan mendatangkan keuntungan yang tidak Anda duga.

Mengatur Template Halaman Website

Meski sudah bisa membuat halaman website yang lengkap, perjalanan belajar HTML dasar ini belum tamat. Karena, Anda juga perlu mengatur template halaman website sehingga project tampil lebih kece.

Untuk mengatur template halaman website, Anda bisa membuat sendiri tema HTML-nya ataupun menggunakan template HTML yang sudah siap pakai. Kedua cara ini sama-sama akan mempercantik layout halaman website Anda.

Kode Warna HTML

Mengetahui kode warna HTML merupakan hal yang penting, apalagi saat belajar HTML pemula. Dengan begitu, Anda dapat memodifikasi warna teks, border, dan media lain dalam dokumen HTML.

Mengapa harus dalam bentuk kode warna?

Katakanlah Anda sedang duduk dalam sebuah restoran. Setelah membaca menu, Anda memesan nasi goreng. Oleh pelayan, kertas order akan dibawa ke dapur untuk dieksekusi oleh koki agar hidangan bisa lekas disajikan. Ini artinya, bukan Anda sendiri yang terjun langsung untuk menggoreng nasi, kan?

Nah, kira-kira seperti itulah cara kerja kode warna HTML. Kita membutuhkan pelayan atau perantara supaya permintaan kita dapat disajikan alias tampil pada browser.

Berhubung komputer berbicara dalam bahasa mark up, mereka tidak paham jika Anda langsung memerintah dengan bahasa manusia.  Karena itu, Anda harus memberikan perintah berupa kode warna. Setelah kode warna tersebut diproses, browser akan menampilkan warna yang Anda inginkan.

Penutup

Tidak terasa, kita sudah sampai di penghujung artikel. Namun, perjalanan Anda untuk belajar HTML masih terus berlanjut.

Jangan khawatir, sebab kami akan terus mendampingi Anda dalam belajar. Jika Anda sudah kenyang belajar HTML pemula, silakan upgrade wawasan dengan memahami Pengertian CSS dan Cara Kerjanya serta Panduan Belajar Javascript untuk Pemula.

Kenapa CSS dan Javascript (JS)?

Alasannya, CSS dan JS saling berkaitan dengan HTML. Dengan menerapkan CSS, tampilan HTML Anda akan lebih cantik. Sedangkan JS berfungsi untuk membuat halaman website menjadi interaktif sehingga dapat digunakan.

Tapi, jika Anda ingin mempelajari bahasa pemrograman lainnya, kami juga sudah menyiapkan artikel ini untuk Anda → 15+ Bahasa Pemrograman yang Wajib Dipelajari Developer.

Akhir kata, jangan pernah bosan untuk belajar, ya! Selamat mencoba!

Benefita

Benefita is a Pisces girl. She dreams of living in the world of Harvest Moon.

Share
Published by
Benefita

Recent Posts

Faktor Apa Saja yang Mempengaruhi Google Ranking? (Edisi 2021)

Tahukah Anda bahwa ada lebih dari 200 faktor yang mempengaruhi peringkat website di Google? Itulah kenapa persaingan di halaman pertama…

18 hours ago

Ingin Website dengan Akses Tercepat? Pilih Niagahoster! Ini Buktinya..

Apa persamaan pemilik website dan pembalap? Keduanya sama-sama menganggap penting hitungan detik.  Jika pembalap memanfaatkan selisih detik untuk memenangkan pertandingan,…

2 days ago

Redirect PHP: Cara Membuat Redirect dengan Aman dan Mudah

Ketika mengelola website, redirect PHP kadang diperlukan. Tujuannya agar pengunjung dapat dialihkan dari suatu halaman ke halaman lainnya sesuai kebutuhan. …

3 days ago

14+ Ide Konten TikTok untuk Promosi Bisnis

Ide konten TikTok check~ Pernahkah Anda bertanya-tanya bagaimana orang-orang bisa membuat konten TikTok yang menarik? Dance viral, voiceover, duet with…

4 days ago

Customer Success Agent: Layani Pelanggan Sepenuh Hati Walau Diterpa Pandemi

Sejak munculnya COVID-19, hampir semua lini pekerjaan menghadapi tantangan. Terutama setelah adanya anjuran untuk bekerja dari rumah. Ada yang mampu…

5 days ago

13+ CMS Laravel Terbaik Untuk Developer!

Laravel merupakan salah satu framework PHP yang populer. Dengan framework ini pekerjaan developer dalam mengembangkan website jadi lebih mudah. Bahkan,…

5 days ago