Panduan Lengkap Belajar HTML Untuk Pemula (GRATIS)

Jika kamu telah membuka artikel ini, maka kamu pasti ingin belajar HTML dasar.

Selamat! Kamu berkesempatan untuk bisa membangun sebuah website secara mandiri.

Meskipun pada dasarnya pembuatan sebuah website bukanlah proses yang mudah.

Sebab, kamu harus memahami dasar coding atau pengkodean program.

Di luaran sana memang sudah banyak sekali template dan plugin yang bisa kamu gunakan untuk membangun sebuah website secara instan.

Kamu tinggal menyesuaikan tampilan template yang ada dengan kebutuhan website yang akan kamu buat.

Namun, itu semua juga butuh proses belajar HTML dasar.

Jika kamu mencari panduan lengkap untuk belajar HTML dasar, maka kamu telah membuka artikel yang tepat.

Kali ini DomaiNesia sebagai penyedia layanan web hosting terbaik di Indonesia akan merangkum untuk kamu bisa belajar HTML dasar yang mudah dipahami oleh pemula.

Konsep Dasar Apa itu HTML

Sebelum belajar HTML dasar, kamu harus tahu apa itu HTML.

Jadi, HTML yang merupakan singkatan dari Hypertext Markup Language adalah bahasa markup yang mendefinisikan struktur dasar halaman website.

HTML memberi tahu browser cara memproses teks dan menyajikannya kepada pengguna website menggunakan suatu tag dan atribut.

Nanti kita juga akan belajar tentang tag dan atribut.

Dengan HTML, kamu dapat menentukan bagian dokumen mana yang merupakan judul atau daftar atau gambar dan seterusnya.

Kamu juga dapat membuat hyperlink kata, menyematkan gambar, membuat huruf miring, dan melakukan lebih banyak lagi.

Kini, HTML sudah digunakan oleh sekitar 92% populasi website yang ada di internet.

Perlu kamu ketahui bahwa HTML bukanlah bahasa pemrograman.

Sebab, bahasa pemrograman memiliki beberapa tujuan fungsional atau hal yang perlu dilakukan, seperti mendeklarasikan variabel atau memodifikasi data.

Sedangkan HTML hanya memberi perintah ke browser terkait konten yang perlu ditampilkan.

Tak peduli bagaimana cara browser menampilkan konten tersebut.

Sehingga bila disimpulkan, HTML memiliki tujuan struktural, bukan fungsional.

Fungsi HTML

Pada dasarnya, HTML digunakan untuk membuat halaman web.

Karena bersifat open-source dan didukung oleh semua browser modern, HTML bebas digunakan dan memastikan teks, gambar, dan elemen lain pada website ditampilkan dengan benar di browser.

Tanpa HTML, semua halaman web akan menjadi file teks biasa seperti tulisan kata-kata di Microsoft Word.

Dengan belajar HTML dasar, kamu tidak hanya dapat memformat dokumen dengan judul, paragraf, daftar, dan elemen lainnya.

Tetapi juga dapat menyematkan gambar, video, file audio, dan multimedia lainnya melalui hyperlink.

Bagi yang belum tahu, Hyperlink memungkinkan kamu untuk pergi ke mana saja di web dengan mengklik mouse.

Selain itu, kamu bisa menautkan ke halaman web lain di website yang sama atau dari website lain.

HTML juga digunakan untuk membuat hal-hal selain halaman website.

Kamu dapat menggunakan HTML untuk membuat tabel untuk mengatur data.

Selain itu, kamu dapat membuat formulir untuk mengumpulkan informasi pengguna, memproses transaksi, membuat reservasi, atau melakukan pemesanan.

Kamu juga bisa membuat email dengan HTML.

Dengan konsisten belajar HTML dasar hingga tahap profesional, kamu sudah punya konsep membangun website impianmu.

Syntax Dasar HTML

Seperti yang sudah disebutkan sebelumnya, HTML hanyalah teks biasa yang dianotasi dengan markup. Lebih tepatnya, markup ini terdiri dari tag dan atribut.

Supaya semakin paham, berikut ini DomaiNesia beri contoh syntax HTML yang umum digunakan.

<p class="coba">Belajar HTML Dasar di DomaiNesia</p>


Penjelasan tiap bagian syntax

<p> sampai </p> adalah Elemen syntax

<p> atau <p...> adalah Tag pembuka untuk fungsi paragraf

class adalah Atribut

“coba” adalah Value atribut

Kata Belajar HTML Dasar di DomaiNesia adalah Konten

</p> adalah Tag penutup

Tag HTML

Elemen HTML ditunjuk oleh tag. Sebagian besar elemen memiliki tag pembuka dan penutup.

Tag pembuka akan selalu di awal teks dan berisi nama elemen yang diapit oleh tanda kurung “<” dan ‘>”.

Tag penutup identik dengan tag pembuka, hanya saja ada tambahan garis miring yang mendahului nama elemen.

Tidak hanya terbatas pembuatan konten paragraf, kamu juga bisa membuat unsur konten HTML lain dengan elemen HTML yang sama, terdiri dari tag pembuka, tag penutup, dan konten di antaranya.

Namun, di beberapa kasus seperti <br> yang berfungsi untuk pemberian spasi antara paragraf, ia hanya memiliki tag pembuka yang juga disebut tag kosong.

Nama elemen tidak bersifat case sensitive. Artinya, mereka dapat ditulis dalam huruf besar, huruf kecil, atau kombinasi keduanya.

Misalnya, tag <p> juga dapat ditulis sebagai <P>. Namun, ada baiknya untuk selalu menulis tag dalam huruf kecil.

Tag Atribut

Sementara semua elemen HTML membutuhkan tag, di sisi lain hanya beberapa elemen yang membutuhkan atribut.

Atribut memberikan informasi tambahan tentang elemen HTML yang mana informasi ini bisa penting atau tidak penting.

Misalnya, elemen gambar harus selalu memiliki atribut sumber yang nilainya adalah URL gambar atau file path.

Contoh:

<img src="https://www.domainesia.com/logo.png" alt="logo DomaiNesia" />


Kadang kalanya atribut lain tidak penting untuk disertakan tetapi jika kamu tetap menyertakan atribut yang semestinya, maka dianggap sebagai praktik yang baik.

Misalnya, browser dapat merender gambar tanpa atribut alt, yang berisi teks alternatif gambar.

Namun, pembaca dengan gangguan penglihatan mungkin mengalami kesulitan memahami apa yang disampaikan gambar tanpa deskripsi teks alternatif.

Elemen HTML Umum

Versi pertama HTML hanya terdiri dari 18 tag. Namun, seiring kemunculan 4 versi HTML yang dirilis setelahnya, membuat hingga kini terdapat lusinan tag pada HTML.

Dalam versi terbaru HTML5, sudah ada 110 tag HTML yang digunakan dalam pengembangan website.

Di bawah ini kami akan meninjau elemen dan tag yang paling umum agar kamu bisa belajar HTML dasar dengan lebih jelas.

• Tag Paragraf (<p></p>)

Elemen paragraf HTML ini mewakili penulisan sebuah paragraf. Dengan menempatkan tag <p></p> di sekitar teks, kamu dapat membuat teks tersebut dimulai pada baris baru.

Contoh:

<p>Ini adalah paragraf pertama.</p>

<p>Ini adalah paragraf kedua pada baris baru.</p>

• Tag Gambar (<img>)

Elemen gambar HTML menyematkan gambar ke dalam dokumen. Tag ini membutuhkan atribut src (sumber) untuk di render dengan benar.

Atribut alt juga harus disertakan jika gambar tidak dimuat oleh browser dengan benar atau pembaca memiliki gangguan penglihatan.

Contoh:

<img src="https://assets.codepen.io/6093409/sprocket.svg" alt="the HubSpot sprocket logo"/>


• Tag Heading (<h1><h1> sampai <h6></h6>)

Elemen heading HTML mewakili berbagai level heading bagian. <h1> adalah tingkat bagian tertinggi dan paling menonjol, sedangkan <h6> adalah yang terendah dan karenanya paling tidak menonjol.

Contoh:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>


Cara Membuat File HTML

Supaya kamu bisa belajar HTML dasar dengan membuat website HTML, kamu perlu membuat file HTML terlebih dahulu.

File ini akan berisi semua elemen dan syntax HTML untuk halaman web kamu yang akan diunggah ke web server.

Dengan begitu, ketika pengunjung mencari website kamu, server akan mengirimkan file HTML ke browser pengunjung dan browser akan merender halaman yang sesuai.

Karena file HTML berupa format teks standar, kamu dapat menggunakan editor teks dasar seperti Notepad++ untuk membuat dan mengedit file HTML.

1. <!DOCTYPE html> dan <html>...</html>

Untuk memulai, Anda perlu mendeklarasikan jenis dokumen sebagai HTML dengan menambahkan kode khusus pada baris pertama file.

Pada baris selanjutnya, tambahkan tag pembuka <html>. Jika penulisan syntax HTML telah selesai, kamu bisa tutup file HTML dengan tag penutup </html>.

Di dalam tag pembuka elemen html, kamu perlu menyertakan atribut lang untuk bahasa.

Atribut ini akan membantu screen reader menentukan bahasa apa yang digunakan dokumen, membuat website kamu lebih mudah diakses.

Tanpa atribut bahasa, screen reader akan menggunakan bahasa sistem operasi secara default, yang dapat mengakibatkan kesalahan pengucapan judul dan konten lain pada halaman.

2. <head>...</head> dan <body>...</body>

Dokumen HTML terdiri dari dua bagian, yaitu bagian kepala dan bagian tubuh. Kepala atau head berisi meta-informasi tentang halaman serta CSS internal apa pun.

Browser tidak menampilkan informasi ini kepada pembaca. Bagian isi berisi semua informasi yang akan terlihat di bagian depan, seperti paragraf, gambar, dan tautan.

Untuk membuat bagian ini, tambahkan tag <head> dan ditutup </head>, lalu tambahkan tag <body> dan ditutup </body> di antara tag <head> dan </head> di dokumen HTML.

3. <title>...</title>

Tag ini berguna ketika kamu ingin memberi nama dokumen HTML yang nantinya akan ditampilkan di browser. Tag ini berada di antara tag hingga .

Setelah kerangka utama dari hingga pembuatan judul dengan tag , kamu bisa menyusun isi konten website antara tag hingga .

Misalnya, kamu ingin membuat header dengan kata-kata tertentu dengan tag <h1></h1>, atau langsung membuat paragraf dengan tag <p></p>, atau bahkan dibuka dengan gambar dengan tag <img>.

Contoh:

<!DOCTYPE html>


<html>

<head>

<title>Dokumen HTML Pertama Saya</title>


</head>

<body>


--- Isi konten ---


</body>

</html>

Situs Belajar HTML Dasar

Langkah pertama dalam perjalanan pengkodean web adalah belajar HTML dasar.

Berikut ini DomaiNesia rekomendasikan 5 situs untuk belajar HTML dasar secara online sehingga kamu bisa memulai perjalanan pengkodean untuk membuat website idaman.

• Codecademy

Codecademy adalah platform yang mengajarkan HTML dasar dengan cara mudah. Layar terbagi menjadi dua sisi, dengan satu sisi yang menunjukkan efek pengkodean pada file HTML.

Semuanya otomatis dan ditandai, sehingga mudah untuk belajar HTML dasar melalui kurikulum mereka.

Namun, Codecademy tidak memberikan sertifikasi di akhir kursusnya sehingga paling baik digunakan sebagai titik awal belajar HTML dasar untuk mengejar karir.

Selain itu, sebagian besar pembelajaran di Codecademy bersifat teoritis sehingga kamu perlu menjelajahi konsep HTML.

• W3School

W3Schools adalah situs pembelajaran terbuka yang banyak digunakan pemula untuk belajar HTML dasar.

Tutorial HTML pada W3Schools berpusat pada pembelajaran konsep. Dengan editor kode online-nya, kamu bisa berlatih menulis HTML dari awal.

Seperti Codecademy, semua pelajaran tersedia gratis dan bisa diakses kapanpun.

Ada beberapa aktivitas interaktif yang tersedia dan bab baru ditambahkan setiap saat untuk mengikuti perubahan dalam dunia pengembangan web yang selalu berkembang.

• General Assembly Dash

Seperti Codecademy, General Assembly menawarkan proyek HTML gratis untuk belajar HTML dasar pemula.

Perbedaan besar antara keduanya adalah program belajar HTML dasar di General Assembly berbasis proyek dunia nyata, jadi kamu bisa membangun website berdasarkan permasalahan yang sebenarnya daripada hanya menjalankan konsep.

Selain itu, General Assembly menawarkan kursus HTML online dengan bimbingan setelah kamu menyelesaikan proyek tersebut dan setelah menyelesaikan rangkaian kursus kamu akan diberi sertifikat.

Namun, proyek HTML gratis yang ditawarkan General Assembly Dash masih sangat sederhana dan sebagian besar merupakan uji coba untuk kursus berbayar mereka. Mereka juga bukan lembaga terakreditasi.

• LinkedIn Learning (Sebelumnya Lynda.com)

LinkedIn Learning menawarkan ribuan kursus berbagai topik, termasuk HTML.

Situs ini menawarkan beberapa pelajaran video HTML gratis untuk memulai, kemudian jika kamu mendaftar untuk keanggotaan bulanan, kamu akan memiliki akses ke semua pelajaran video yang ditawarkan.

Kamu juga dapat mendaftar untuk keanggotaan premium yang akan memberi akses ke file proyek lainnya.

LinkedIn Learning bisa kamu akses melalui PC atau smartphone sehingga kamu bisa menonton video kelas dimanapun dan kapanpun.

• Team Treehouse

Kelas kursus belajar HTML dasar di Teamtreehouse menawarkan video, di sisi lain kamu perlu membayar lebih untuk mengakses materi lainnya.

Namun, tidak seperti Lynda, Situs ini terdapat kuis interaktif, ruang kerja online, dan kontennya lebih fokus pada pengembangan web.

Selain itu, Treehouse memiliki forum untuk setiap kursus di mana siswa dapat mengajukan pertanyaan.

• Learn HTML

Hampir sama seperti W3Schools, Learn HTML adalah situs belajar HTML dasar yang lengkap dengan tutorial interaktif gratis.

Learn HTML menawarkan panduan langkah demi langkah yang singkat untuk membangun halaman web.

Kamu bisa menguji apakah kamu memahami pelajaran dengan menyelesaikan latihan di editor kode online.

Jika kode pemrograman yang kamu kerjakan cocok dengan output yang diharapkan, maka kamu akan mendapatkan pesan sukses dan diarahkan untuk pindah ke pelajaran berikutnya.

Penutup

Memulai belajar HTML dasar tidak perlu harus mahal ataupun takut duluan.

Setelah membaca artikel panduan belajar HTML dasar dari DomaiNesia ini, harapannya kamu bisa mempraktekkan HTML dengan lebih mudah.

Dengan berlangganan web hosting di DomaiNesia, kamu juga akan diberi tahu cara upload HTML ke hosting website kamu. Meskipun itu adalah tugas pengelola web hosting kamu.

Namun, untuk membangun sebuah website idaman, kamu tidak hanya belajar HTML dasar, melainkan bahasa script dan pemrograman lainnya seperti CSS, PHP, JavaScript, dan pemrograman database misalnya MySQL.

Selain panduan secara tekstual, kamu bisa rajin mencari informasi seputar tahapan pemrograman HTML dengan pembelajaran berbasis video ataupun audio seperti podcast.