Belajar HTML dari Nol untuk Pemula (Mudah dan Cepat)

Jika ingin menjadi seorang developer website, seseorang tentu harus mempelajari hal-hal mendasar dari website itu sendiri. Salah satunya adalah dengan belajar HTML yang notabene merupakan bahasa pemrograman untuk menyusun sebuah website.

Setelah melihat bagaimana sebuah HTML tersusun, mungkin kamu akan merasa bahwa bahasa pemrograman ini begitu rumit dan sulit dipelajari. Hal itu membuat semangat belajar jadi kendor.

Tak perlu khawatir, sebenarnya ada banyak cara mudah untuk mempelajari HTML bagi para pemula, Sob. Untuk itu, mari simak pembahasan dan cara belajar HTML dengan mudah berikut ini!

Pengertian HTML

HTML, singkatan dari Hyper Text Markup Language, merupakan bahasa pemrograman atau bahasa markah yang menjadi dasar dalam pembuatan website. Di dalamnya, kita juga akan menemukan penanda atau tag untuk membangun struktur website.

Setiap elemen dalam HTML diapit oleh tag, yang memberi tahu browser cara menampilkan konten tersebut. Misalnya, untuk membuat judul, kamu dapat menggunakan tag <h1> hingga <h6>, dengan <h1> sebagai judul paling utama.

Untuk mengakhiri sebuah judul atau sesi tertentu, kita perlu menambahkan tag </h1>. Jadi, syntax tersebut harus dilakukan di semua sesi, yaitu dibuka dengan <> dan ditutup dengan </>, mulai dari title, body, dan seterusnya.

Jadi, jika kamu melihat struktur tulisan, termasuk letak dan urutannya, di dalam sebuah website, maka semua itu diatur menggunakan HTML. Itulah kenapa kita harus belajar HTML dari nol agar bisa menguasai pengembangan website ke depannya.

Sampai hari ini, tampilan website sudah berkembang sedemikian rupa sehingga memiliki tampilan yang jauh lebih menarik. Hal itu berkat adanya dukungan dari bahasa pemrograman lain seperti CSS hingga JavaScript.

Bahasa CSS berguna untuk memberi tampilan yang indah atau menarik pada sebuah website. Sementara JavaScript sangat berguna untuk membuat tampilan website menjadi lebih hidup. 

Inilah Langkah Mudah Belajar HTML untuk Pemula

Dengan kita belajar HTML, CSS, dan JavaScript, tentu kita bisa menghasilkan tampilan website yang jauh lebih menarik dengan berbagai fitur-fiturnya bukan?

Jika tampilan website tidak menarik, tentu tidak banyak orang mau mengunjunginya, Sob. Berikut cara mudah mempelajari bahasa pemrograman HTML:

Belajar HTML Dasar

Nah, sekarang kamu sudah bisa membayangkan peran HTML bukan? Singkatnya, HTML adalah sebuah bahasa pemrograman dengan format penulisan, urutan dengan kode dan juga tag tertentu (syntax) sehingga menghasilkan tampilan website yang utuh.

Di dalam membuat sebuah website, nantinya kamu akan membutuhkan dua buah tools, yaitu text editor untuk menuliskan syntax atau barisan kode dalam proses coding dan juga browser untuk menjalankan atau melihat perintah yang telah kamu buat.

Untuk bisa menghasilkan tampilan website yang semakin kompleks, tentu kamu harus belajar HTML lebih jauh lagi, Sob. Karena di dalam pembuatan syntax, kita bisa mengatur besar kecilnya tulisan, posisinya, hingga animasi yang akan ditampilkan.

Di dalam proses belajar bahasa pemrograman html, dua aplikasi text editor yang bisa kamu gunakan adalah Notepad++ dan Visual Studio Code. Keduanya memiliki spesifikasi yang dibutuhkan untuk membuat kode HTML.

Jika kamu tidak memiliki kedua aplikasi tersebut, sebenarnya kamu juga bisa menggunakan aplikasi bawaan Windows, yaitu Notepad. Dengan aplikasi ini, kamu sudah bisa membuat kode HTML sesuai dengan keinginan.

Sementara itu, browser yang bisa kamu gunakan untuk menjalankan kode HTML di aplikasi text editor bisa dari mana saja. Kamu bisa menggunakan Google Chrome, Microsoft Edge, Mozila Firefox, Opera Mini, dan sebagainya.

Membuat Kode HTML Sederhana

Jika kamu sudah belajar HTML secara benar dan yakin tidak ada kesalahan dalam proses coding, maka tampilannya di browser akan sesuai dengan apa yang kamu kehendaki, tak peduli browser apa yang kamu gunakan.

Jadi, dua alat yang harus kamu persiapkan untuk membuat sebuah dokumen HTML dan mengujinya adalah sebagai berikut:

• Aplikasi text editor seperti Notepad, Notepad++, Visual Studio Code, atau sejenisnya. Alat ini berguna untuk membuat coding atau tulisan HTML yang nantinya akan kita jalankan.
• Browser seperti Chrome, Edge, Safari, dan sebagainya. Browser berguna untuk menjalankan dan menguji dokumen HTML apakah berfungsi atau tidak.

Nah, cara cepat belajar HTML adalah dengan menguasai baris kode HTML yang kita buat. Sekarang, cobalah untuk membuat beberapa baris kode HTML menggunakan text editor. Buka salah satu aplikasi text editor di atas dan tuliskan kode berikut:

<!DOCTYPE html>

<html lang=”eng”>

<head>

<title>Belajar HTML dengan Mudah</title>

</head>

<body> 

<p>Ini adalah tulisan isi</p>

</body>

</html>

Jika sudah, kamu bisa menyimpan terlebih dahulu file tersebut. Silakan klik File, lalu pilih Save as, kemudian beri nama file dengan “index.html” atau “belajar.html”. Jika sudah, klik Save atau Simpan.

Untuk menguji apakah dokumen html tersebut berfungsi atau tidak, maka kamu harus menjalankannya di sebuah browser. Langsung saja, klik dua kali file tersebut. Jika ada opsi untuk memilih browser, kamu bisa memilih salah satunya.

Setelah terbuka di browser, maka kamu akan melihat tulisan “Ini adalah tulisan isi” di bagian atas. Hal ini menandakan bahwa kita sudah bisa membuat kode HTML yang bisa terbaca di dalam browser.

Belajar HTML dan Strukturnya

Dari contoh pembuatan kode HTML di atas, kita sudah belajar coding HTML sederhana, yaitu membuat tulisan “Ini adalah tulisan isi”. Dari kode tersebut, kita tahu ada beberapa bagian yang cukup penting, yaitu <html>, <head>, dan <body>.

Ketiga bagian tersebut adalah struktur utama dalam pembuatan HTML. Ke depannya, kita bisa mengembangkannya lebih jauh lagi sehingga tampilannya akan jauh lebih menarik dari yang kita lihat dari contoh tersebut.

Sekarang kita masuk ke dalam konten HTML yang terdiri dari beberapa bagian sehingga menjadikannya satu kesatuan yang utuh. Adapun bagian-bagian tersebut bisa kamu lihat dalam penjelasan berikut:

1. Deklarasi

Saat kita belajar HTML, sebuah deklarasi akan menginformasikan web browser tentang jenis kode HTML yang digunakan. Pada contoh di atas, kita menggunakan jenis kode <!DECOTYPE html>. 

Kode tersebut mendeklarasikan kepada web browser bahwa dokumen menggunakan HTML versi 5. Jika kita menggunakan HTML versi 4 atau lainnya, maka beda lagi cara deklarasinya sehingga penting untuk belajar HTML lengkap.

Selanjutnya, ada juga tag  <html lang=”en”> yang terdiri dari dua elemen, yaitu tag <html> dan lang=”eng”. Tag <html> sendiri harus ada di dalam sebuah dokumen HTML yang kita buat karena tag HTML akan mendefinisikan setiap strukturnya. 

Sementara tulisan lang=”eng” di dalamnya menunjukkan bahwa dokumen tersebut menggunakan bahasa Inggris. Selain itu, ada dua elemen lain yang juga penting di dalam tag HTML, yaitu head dan juga body.

2. HEAD

Struktur HEAD merupakan salah satu bagian penting dalam dokumen HTML yang mana akan menunjukkan kepala dari file HTML bersangkutan. Bagian HEAD selalu diawali dengan tag <head> dan ditutup dengan </head>.

Tag ini akan menuliskan berbagai hal yang akan dibaca oleh mesin, dalam hal ini browser. Adapun macam-macam tag untuk bagian HEAD antara lain:

• Tag meta untuk keperluan SEO atau optimasi website.
• Tag <title> untuk bagian judul.
• Sebagai tempat untuk menuliskan kode-kode CSS atau JavaScript.

3. BODY

Bagian penting lainnya saat kita belajar HTML tentu saja adalah bagian BODY. Pasalnya, bagian inilah yang akan kita tampilkan dalam sebuah website. Jika kode yang kita buat salah, maka tampilan website akan rusak dan tak beraturan.

Untuk memulai bagian Body, kita akan mengawalinya dengan <body> dan mengakhirinya dengan </body>. Dalam praktiknya, akan ada banyak sekali tag bisa kita masukkan di dalam bagian BODY ini.

Namun, pada contoh di atas kita hanya menggunakan tag <p> saja yang menyatakan sebuah paragraf. Menambahkan tag <p> berarti kita menambahkan jumlah paragraf ke depannya. 

Dari contoh di atas, tulisan yang ditampilkan memang sangat sederhana sehingga kita harus belajar HTML dan CSS agar font tulisan, warna, dan sebagainya bisa lebih menarik lagi sehingga website jadi lebih hidup.

Mengenal Tag, Element, dan Atribut

Jika kita belajar lebih jauh lagi tentang HTML, maka kita juga akan mengenal tag, elemen, dan atribut dalam sebuah dokumen HTML. Untuk tahu lebih jauh dengan ketiga hal tersebut, silakan simak pembahasan singkat berikut ini:

1. Tag

Tag adalah perintah awal yang akan terbaca oleh web browser sehingga dapat menampilkan website sesuai dengan keinginan developernya. Sebagai contoh, kita bisa menambahkan tag <bold> untuk menebalkan tulisan.

2. Element

Satu elemen dalam struktur kode HTML adalah serangkaian code yang diawali dengan tag pembuka <> dan diakhiri dengan tag penutup </>. Semua atribut yang melekat pada tag tersebut juga merupakan bagian dari elemen yang bersangkutan.

3. Atribut

Atribut adalah perintah atau informasi pelengkap di dalam sebuah element. Sebagai contoh, kita bisa menambahkan atribut berupa <img src=”elephant.jpg” alt=”Gajah Sumatera”>. 

Atribut tersebut berusaha menambahkan gambar pada element tertentu yang berasal dari sumber gambar “elephant.jpg” dan menambahkan alternatif tulisan berupa “Gajah Sumatera”.

Cara Membuat HTML Page untuk Pemula

Pada tahapan belajar HTML untuk pemula ini, kami akan menjelaskan lebih lanjut cara membuat HTML Page dengan mudah, terlebih jika Sobat Jagoan adalah orang awam yang sebelumnya belum pernah mencoba membuat HTML.

1. Header

Untuk membuat bagian header halaman, kamu bisa menulis tag <header>. Tag ini bisa ditulis lebih dari sekali sesuai dengan kebutuhan.

Tag <header> paling tepat diletakkan di bagian atas web di mana kita biasa meletakkan judul situs, misalnya Jagoan Hosting, seperti contoh berikut ini:

<h1>Jagoan Hosting</h1>

2. Paragraf

Di bawah bagian header Jagoan Hosting, Sobat Jagoan bisa menambahkan sebuah paragraf dengan mencantumkan <p>. Berikut adalah contoh text paragraf yang bisa kalian coba.

<h1>Jagoan Hosting</h1><p>Selamat pagi, Sobat Jagoan!<p>

3. List

Untuk menambahkan sebuah list, kamu perlu menambahkan dua tag berbeda yaitu <ul> dan <li>. <ul> adalah unordered list dan <li> adalah list item.

Kamu perlu menyisipkan <li> di dalam <ul>. Berikut adalah contoh sederhananya.

<ul>  <li>Package A</li>  <li>Features</li>  <li>Price</li></ul>

4. Gambar

Di era digital saat ini, gambar sangat diperlukan untuk menegaskan suatu pernyataan atau sekedar menambah nilai estetika pada website kamu.

Sobat Jagoan bisa menggunakan <img> untuk menampilkan gambar pada website kamu. <img> memiliki atribut lain yang berisi informasi lanjutan dari sebuah gambar seperti sumber, tinggi, lebar, dan sebagainya.

Untuk kamu yang masih kebingungan dalam mencari sebuah gambar yang berkualitas, kami mempunyai daftar situs yang menyediakan layanan tersebut.

5. Input Fields

Mencantumkan input-input pada website adalah sesuatu yang perlu dilakukan guna memperjelas informasi yang ingin disampaikan.

Berikut adalah contoh sederhana yang bisa Sobat Jagoan dengan mudah lakukan.

<input type=”text” placeholder=”Enter your email” />

6. Tabel

Penyisipan tabel pada HTML bisa jadi rumit untuk kamu yang baru belajar HTML. Untuk memudahkan kamu dalam belajar, simaklah daftar tag tabel di bawah ini.

Berikut contoh penggunaan tag tabel pada HTML.

<table>

<tr>

<td>Baris A – Kolom A</td>

<td>Baris A – Kolom B </td>

</tr>

<tr>

<td>Baris B – Kolom A</td>

<td>Baris B – Kolom B</td>

</tr>

</table>

Nah, setelah Sobat Jagoan memahami dan menerapkan langkah-langkah belajar HTML dasar di atas, kamu sebenarnya telah siap untuk terjun di area web development.

Setelah itu jangan lupa untuk langsung praktik bikin website dengan Hosting Developer Friendly yang mendukung bahasa pemrogramman dan framework terbaru.

Kenapa Kita Harus Belajar HTML?

Dari pembahasan di atas, kita semakin tahu jika mempelajari HTML adalah hal mendasar dari terciptanya website yang banyak kita lihat hari ini. Dengan kita belajar tentang HTML, kita tentu akan tahu lebih jauh tentang berbagai pengembangannya.

Jika kamu ingin menjadi seorang developer website yang handal, tentu saja pengetahuan dasar ini harus kamu kuasai terlebih dahulu, meskipun kamu bisa saja langsung belajar bahasa pemrograman yang jauh lebih praktis.

Agar kamu bisa lebih cepat dalam menguasai berbagai hal tentang HTML, tentu kamu harus mempelajarinya secara konsisten. Pasalnya, akan butuh waktu yang tidak sebentar untuk menguasai setiap bab pembelajarannya.

FAQ

Apa Langkah Pertama Belajar HTML?

Belajar HTML pemula atau mendasar bisa kamu mulai dengan membuat dokumen HTML sederhana seperti contoh di atas. Setelah itu, kamu bisa mempelajari atribut satu per satu untuk mengetahui fungsi dan kegunaannya.

Untuk Apa Kita Mempelajari HTML?

Kita belajar HTML adalah untuk memahami dasar-dasar pengembangan suatu website. Dengan begitu, kemampuan kita untuk membangun website sesuai dengan apa yang kita inginkan jadi lebih mudah tercapai.

Aplikasi Apa untuk Membuat HTML?

Pertama adalah text editor untuk menuliskan kode HTML, dan yang kedua adalah browser untuk menjalankan dan menguji apakah dokumen HTML bisa berfungsi atau tidak.