Belajar HTML: Pahami Materi HTML untuk Pemula Web Developer
Muthiatur Rohmah
•
23 April 2024
•
7234
Jika Sobat MinDi ingin menjadi web developer, Belajar HTML merupakan suatu kewajiban, sebab HTML merupakan bahasa dasar dalam pembuatan website.
Bagi IT enthusiast, HTML merupakan materi yang sudah sering dipelajari dan tidak asing lagi. Namun bagi pemula web development, mengenal dan mempelajari HTML mungkin akan terlihat agak ribet.
Namun tenang saja, pada kesempatan kali ini, yuk bersama-sama belajar HTLM sebagai dasar pengembangan website.
Pelajari berbagai materi dasar HTML yang sangat berguna saat proses web development, berikut ini!
Apa itu HTML?
HyperText Markup Language (HTML) adalah bahasa markup standar yang digunakan untuk membuat dan mendesain halaman web.
HTML memungkinkan pembuat konten untuk strukturisasi teks, gambar, dan elemen media lainnya pada halaman web dengan menggunakan tag.
Tag-tag ini digunakan untuk menandai bagian teks sebagai judul, paragraf, link, list, dan banyak lagi, serta meng-embed gambar dan video ke dalam halaman.
HTML berfungsi sebagai kerangka dasar untuk hampir semua situs web dan berinteraksi dengan bahasa pemrograman web lain seperti CSS dan JavaScript untuk meningkatkan tampilan dan fungsi situs.
Versi terkini, HTML5, telah diperkenalkan dengan fitur-fitur baru yang mendukung multimedia dan aplikasi web yang lebih kompleks, membuat HTML tetap relevan di era modern pengembangan web yang terus berkembang.
HTML merupakan bahasa dasar dari internet, sehingga pemahaman tentang HTML adalah hal yang penting bagi siapa saja yang ingin terlibat dalam pembuatan atau pengelolaan konten web.
Perkembangan HTML
Sejarah HTML dimulai pada akhir 1980-an, ketika Tim Berners-Lee, seorang fisikawan di CERN, menciptakan HTML sebagai bagian dari usahanya untuk memudahkan pertukaran informasi antar ilmuwan di berbagai universitas dan institut di seluruh dunia.
Versi Awal HTML
HTML pertama kali dikembangkan pada tahun 1990, dan versi pertamanya, yang sangat dasar, hanya mendukung link antar halaman dan beberapa tag dasar untuk formatting teks.
Pada tahun 1991, Tim Berners-Lee mempublikasikan dokumen yang disebut "HTML Tags," yang mencantumkan 18 tag yang meliputi tag dasar untuk judul, paragraf, link, dan beberapa list.
Pengembangan dan Standardisasi
Selama dekade berikutnya, HTML berkembang dengan penambahan berbagai elemen dan atribut baru.
HTML 2.0 dirilis pada November 1995 dan mulai memasukkan dukungan untuk form yang memungkinkan komunikasi dua arah antara pengguna dan situs web. Versi ini mulai dikelola oleh Internet Engineering Task Force (IETF).
Kemudian, kontrol atas pengembangan HTML berpindah ke World Wide Web Consortium (W3C), yang didirikan oleh Tim Berners-Lee.
W3C merilis HTML 3.2 pada tahun 1997, yang menandai adopsi resmi beberapa fitur yang telah digunakan secara luas tetapi belum distandarisasi, seperti tabel dan script.
HTML 4.0 muncul pada Desember 1997, membawa struktur yang lebih baik, dukungan untuk stylesheet (CSS), dan lebih banyak kemampuan interaktif.
HTML5
Pengembangan terbesar selanjutnya adalah HTML5, yang dirilis sebagai draft pertama pada Januari 2008 oleh WHATWG (Web Hypertext Application Technology Working Group) dan kemudian diadopsi oleh W3C.
HTML5 adalah versi HTML yang paling kuat hingga saat ini, memperkenalkan fitur-fitur baru yang mendukung video dan audio, elemen-elemen semantik yang lebih baik, grafik dan efek canggih, serta fitur aplikasi web yang lebih kaya, seperti API untuk geolocation, drag-and-drop, dan local storage.
HTML terus berkembang untuk memenuhi tuntutan web yang selalu berubah, dengan HTML5.2 yang dirilis pada tahun 2017 sebagai versi terbaru.
HTML tidak hanya fundamental dalam pembuatan konten web tetapi juga terus beradaptasi dengan kebutuhan pengembangan web modern, menegaskan posisinya sebagai salah satu teknologi inti dalam pengembangan web.
Pemahaman mendalam tentang HTML adalah kunci untuk karier di bidang teknologi informasi dan pengembangan web.
Baca Juga: Cara Upload HTML ke Blog
Apa Saja yang Dipersiapkan untuk Belajar HTML?
Belajar HTML adalah langkah pertama yang bagus untuk memasuki dunia pengembangan web.
Berikut ini adalah beberapa hal yang perlu disiapkan untuk memulai belajar HTML secara efektif:
1. Komputer
2. Editor Teks
Meskipun bisa menulis kode HTML menggunakan notepad biasa, editor teks yang lebih canggih seperti Sublime Text, Atom, atau Visual Studio Code akan membuat pekerjaan lebih mudah dan efisien.
3. Browser Web
Browser seperti Google Chrome, Firefox, Safari, atau Microsoft Edge diperlukan untuk melihat hasil dari kode HTML yang telah ditulis.
Browser ini juga dilengkapi dengan alat pengembang (developer tools) yang berguna untuk memeriksa dan meng debug kode HTML dan CSS.
4. Koneksi Internet
Meskipun HTML dapat dipelajari dan diuji secara offline, koneksi internet diperlukan untuk mengakses sumber belajar, dokumentasi, dan komunitas online.
Internet juga memungkinkan Sobat MinDi untuk menggunakan sumber daya seperti Google Fonts atau CDN untuk JavaScript libraries.
5. Buku dan Sumber Belajar
Ada banyak buku dan sumber online yang dapat membantu belajar HTML. Website seperti MDN Web Docs, W3Schools, dan freeCodeCamp menyediakan tutorial dan referensi lengkap yang bisa sangat berguna bagi pemula.
Dengan mempersiapkan hal-hal di atas, Sobat MinDi akan siap untuk memulai perjalanan belajar HTML dan mengembangkan dasar yang kuat dalam pengembangan web.
Cara membuat Dokumen HTML
Membuat dokumen HTML pertama adalah langkah penting untuk memulai belajar pengembangan web.
Berikut adalah langkah-langkah dasar untuk membuat dokumen HTML sederhana:
1. Siapkan Editor Teks
Pertama, Sobat MinDi memerlukan editor teks untuk menulis kode HTML. Beberapa editor teks yang populer untuk pengembangan web termasuk Visual Studio Code, Sublime Text, Atom, atau bahkan Notepad (Windows) dan TextEdit (Mac) dalam mode teks murni.
2. Buat File Baru
Buka editor teks Anda dan buat file baru. Simpan file tersebut dengan ekstensi .html. Sebagai contoh, bisa menyimpannya sebagai index.html.
3. Tulis Struktur Dasar HTML
Setiap dokumen HTML dimulai dengan struktur dasar yang sama. Berikut adalah contoh struktur dasar:
<!DOCTYPE html> mendeklarasikan versi HTML (HTML5 di sini)
Elemen `<html>` mengelilingi seluruh konten halaman.
<head> berisi informasi tentang dokumen yang tidak ditampilkan di browser, seperti <title>.
<title> menetapkan judul yang muncul di tab browser.
<body> berisi konten yang dapat dilihat pengguna seperti teks, gambar, video, dll.
<h1> adalah heading, dan <p> adalah paragraf.
4. Simpan dan Pratinjau File
Setelah menulis kode, simpan file tersebut. Kemudian, buka file HTML yang Anda simpan tadi dengan browser web pilihan (seperti Chrome, Firefox, atau Safari) dengan cara mengklik dua kali file tersebut atau membukanya melalui menu File di browser.
5. Eksperimen dengan Konten
Setelah melihat hasilnya di browser, kembali ke editor teks dan modifikasi atau tambahkan elemen HTML lain seperti gambar, link, atau daftar.
Setiap kali melakukan perubahan, simpan file dan muat ulang halaman di browser untuk melihat perubahan tersebut.
6. Pelajari Lebih Lanjut
Sebagai langkah berikutnya, kamu bisa belajar tentang menambahkan CSS untuk memperbaiki tampilan halaman dan JavaScript untuk menambahkan interaktivitas.
Dengan mengikuti langkah-langkah ini, Sobat MinDi akan dapat membuat dan bereksperimen dengan dokumen HTML pertama kamu, untuk pembelajaran lebih lanjut dalam pengembangan web.
Hal-hal yang Perlu Diperhatikan saat Menamai HTML
Saat membuat nama file HTML, ada beberapa pertimbangan yang penting untuk diingat untuk memastikan aksesibilitas, kompatibilitas, dan efisiensi dalam pengelolaan file.
Berikut adalah beberapa aspek penting yang harus diperhatikan saat menulis nama HTML.
1. Gunakan Ekstensi yang Tepat
Pastikan untuk menyimpan file dengan ekstensi `.html` atau `.htm`. Ekstensi ini memberitahu sistem bahwa file tersebut adalah dokumen HTML dan memungkinkannya dibuka dengan browser web.
2. Hindari Spasi
3. Gunakan Karakter Alfanumerik
Tetap gunakan karakter alfanumerik (huruf dan angka). Hindari penggunaan karakter khusus, karena bisa menyebabkan masalah kompatibilitas, terutama pada server yang berbeda.
4. Nama yang Deskriptif dan Singkat
Berikan nama file yang deskriptif yang menjelaskan isi dari file tersebut namun tetap singkat. Misalnya, `about.html` untuk halaman tentang atau `contact.html` untuk halaman kontak.
5. Gunakan Huruf Kecil
Disarankan untuk menggunakan semua huruf kecil dalam penamaan file untuk menghindari kebingungan atau kesalahan karena perbedaan huruf besar dan kecil (case sensitivity) pada beberapa sistem operasi dan server.
6. Struktur Folder yang Baik
Jika situs web memiliki banyak halaman, pertimbangkan untuk mengorganisir file dalam folder yang sesuai. Misalnya, simpan semua file HTML yang terkait dengan blog di dalam folder /blog/.
7. SEO Friendly
Dalam konteks website, menggunakan kata kunci yang relevan dalam nama file bisa membantu SEO (Search Engine Optimization).
Misalnya, gunakan nama tips-gardening.html daripada hanya gardening.html yang dapat memberikan konteks yang lebih baik kepada mesin pencari tentang isi halaman.
Dengan memperhatikan aspek-aspek ini, Sobat MinDi bisa memastikan bahwa file HTML mudah dikelola, diakses, dan dioptimalkan untuk pengguna serta mesin pencari.
Struktur HTML
Struktur dasar HTML terdiri dari beberapa bagian utama yang membentuk kerangka dasar setiap halaman web.
Bagian-bagian ini termasuk deklarasi jenis dokumen, head , dan body. Berikut adalah penjelasan dari struktur HTML:
1. Deklarasi Jenis Dokumen (Doctype)
Deklarasi Doctype berada di baris pertama dari setiap dokumen HTML dan digunakan untuk memberitahu browser tentang versi HTML yang digunakan pada dokumen tersebut.
Hal ini penting karena membantu browser menampilkan konten dengan benar sesuai dengan standar HTML yang berlaku. Untuk HTML5, deklarasi doctype ditulis sebagai:
Deklarasi ini adalah deklarasi sederhana dan digunakan secara universal untuk semua dokumen HTML5, yang merupakan standar terbaru.
2. Head
Elemen head mengandung informasi tentang dokumen yang tidak ditampilkan secara langsung pada halaman web.
Head digunakan oleh browser untuk memahami bagaimana halaman harus ditangani. Informasi yang dimasukkan di bagian ini termasuk judul dokumen, link ke file CSS, meta tag untuk SEO dan karakter set.
Contoh elemen <head> adalah sebagai berikut:
<meta charset="UTF-8"> menentukan set karakter yang digunakan, yang dalam kasus ini adalah UTF-8 yang mendukung sebagian besar bahasa di dunia.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> membantu memastikan bahwa halaman web dioptimalkan untuk tampilan pada perangkat mobile.
<title> menentukan judul halaman yang muncul di tab browser.
<link> digunakan untuk menghubungkan dokumen HTML dengan file CSS eksternal, yang mengontrol tampilan halaman.
3. Body
Elemen body berisi semua konten halaman yang terlihat oleh pengguna, seperti teks, gambar, video, formulir, dan lain-lain. Ini adalah bagian dari dokumen di mana sebagian besar isi yang berinteraksi dengan pengguna ditempatkan.
Contoh elemen <body> adalah:
<h1> adalah heading yang memberikan judul atau penekanan penting pada bagian tertentu dari halaman.
<p> adalah elemen paragraf yang digunakan untuk teks.
<img> digunakan untuk menyertakan gambar dalam halaman, dengan atribut `src` yang menunjukkan lokasi file gambar dan alt yang memberikan deskripsi gambar jika gambar tidak dapat ditampilkan.
Ketiga bagian ini membentuk struktur dasar dari dokumen HTML yang penting untuk pembuatan setiap halaman web.
Sobat MinDi, itulah beberapa penjelasan mengenai materi dasar HTML yang perlu dipelajari dan dipahami, ingat bahwa belajar HTML merupakan langkah awal dalam pengembangan website.
Baca Juga: 6 Cara Menambahkan Foto di HTML
Ingin belajar lebih lanjut tentang HTML dalam pengembangan website?
Yuk ikuti bootcamp web developer dibimbing.id, sebuah bootcamp terbaik dengan pembelajaran inovatif dan intensif. Bootcamp ini didampingi oleh mentor profesional dan terbaik yang bakal bantu kamu jadi web developer sukses.
Belum memiliki pengalaman tentang pengembangan web sama sekali?
Tenang saja, dibimbing.id siap bimbing kamu mulai dari nol, dengan kurikulum terlengkap, update serta beginner friendly.
Sebanyak 94% alumni bootcamp dibimbing.id telah berhasil mendapatkan kerja sesuai bidang mereka. Nah, jangan khawatir nganggur setelah lulus bootcamp ya, dibimbing.id juga menyediakan job connect ke 570+ hiring partner khusus buat Sobat MinDi.
Tunggu apalagi? buruan konsultasi di sini, apapun tujuan karirmu dibimbing.id siap #BimbingSampeJadi karir impianmu.
Tags
Muthiatur Rohmah
Muthia adalah seorang Content Writer dengan kurang lebih satu tahun pengalaman. Muthia seorang lulusan Sastra Indonesia yang hobi menonton dan menulis. Sebagai SEO Content Writer Dibimbing, Ia telah menulis berbagai konten yang berkaitan dengan Human Resources, Business Intelligence, Web Development, Product Management dan Digital Marketing.