Nine TKJ

Disarankan menggunakan mode gelap.
Beranda
Belajar HTML

Belajar HTML dari Nol untuk Pemula (Mudah dan Cepat)



Mengutip dari Jagoanhosting 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. 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. 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:

1. 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.

2. 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:


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 kamu 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 Nine TKJ, seperti contoh berikut ini:

<h1>Nine TKK</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>Nine TKJ</h1>
<p>Selamat pagi!<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>PackageA</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.

Kamu 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 kamu 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 kamu 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.

FAQ

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.

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.