HTML (Hyper Text Markup Language) adalah sebuah teks markup yang digunakan untuk membangun elemen-elemen sebuah halaman website, yang dapat ditampilkan di laman web browser sebagai komponen pasif maupun interaktif bagi user. Tutorial kali ini membahas step-by-step bagaimana membangun elemen HTML mulai dari nol.

• Requirements:
• Materi Pembelajara HTML:
  • #1 Intro: Mengenal HTML & cara memulai project dengan Visual Studio Code
  • #2 Text Tag: Mengenal text tag & text formatting di HTML
  • #3 List Tag: Membuat unordered list, ordered list & description list
  • #4 Table Tag: Membuat tabel di laman website
  • #5 Link Tag: Membuat pranala luar/link di laman website
  • #6 Media Tag: Menyisipkan media (image, audio, video, maps) di laman web
  • #7 Form Tag: Membuat formulir di laman website
  • #8 Wrapper Tag: Mempelajari special tag pembungkus tag HTML
• Notes:
  • Materi total berdurasi 1 jam 57 menit 32 detik. Tersedia timestamp link di description video YouTube, jadi Anda dapat memanfaatkannya jika ingin rehat sejenak. Disediakan pula source code lengkap dari tutorial ini, link menuju GitHub repo tersedia di description video YouTube. Selamat belajar 😎
     

Lintang Wisesa 💌 [email protected]
Facebook | Twitter | LinkedIn | Youtube | GitHub | Hackster

Ingin membuat website sendiri tapi bingung harus mulai dari mana? Jawabannya adalah kamu harus belajar HTML terlebih dahulu.

HTML adalah singkatan dari Hypertext Markup Language, yakni bahasa pemrograman untuk membuat website.

HTML bisa dipelajari oleh siapa saja, termasuk pemula yang masih baru di bidang ini. Oleh karenanya, Jagoan Hosting telah menyajikan panduan belajar HTML dasar untuk kamu yang ingin mendalami hal berikut.

Check it out!

Apa itu HTML?

Kepanjangan HTML adalah Hypertext Markup Language atau bahasa markah yang digunakan untuk membuat sebuah website sesuai dengan standar pengkodean tag HTML.

Meskipun HTML tidak termasuk ke dalam bahasa pemrograman, namun HTML adalah dasar yang wajib diketahui sebelum memulai pemrograman web.

HTML menyediakan bermacam-macam tag untuk mendeskripsikan tipe konten atau elemen pada website kamu, misalnya

Hal ini memungkinkan browser kamu untuk membaca dan menginterpretasikan tiap-tiap tag.

“In conclusion, HTML is like a place where all the languages are written.”

Belajar HTML dan Macam-Macam Editor HTML

Setelah paham sekilas tentang apa itu HTML, maka langkah belajar HTML yang patut Sobat Jagoan ambil adalah mengenal masing-masing editor HTML yang tersedia di market.

Berikut adalah macam-macam editor yang harus kamu ketahui.

1. Sublime Text

Saat belajar HTML, maka kamu wajib tahu apa itu Sublime text. Sublime text adalah editor HTML yang paling banyak digunakan oleh programmer. Editor ini bisa digunakan pada berbagai macam sistem operasi seperti Linux, Windows, dan Mac.

Kelebihan: Cocok digunakan untuk pemula, easily customizable, dan memiliki banyak skema warna yang bisa dipilih.

Kekurangan: Tidak dapat mencetak dokumen atau kode dan tidak adanya toolbar dan dashboard.

2. Notepad ++

Editor ini dapat digunakan pada sistem operasi Windows dengan lisensi gratis. Ciri khas dari editor ini adalah Sobat Jagoan dapat dengan bebas menginstal fitur-fitur tambahan yang sudah disediakan. Pastikan kamu tidak melewatkan editor ini ya saat belajar HTML.

Kelebihan: Distraction-free interface, fitur auto-completion, dan tersedianya plugin-options.

Kekurangan: Kurang cocok digunakan untuk pemula dan tidak dapat digunakan pada sistem operasi Mac.

3. Komodo Edit

Editor yang patut kamu ketahui saat belajar HTML selanjutnya adalah komodo edit. Ini merupakan editor yang sederhana, menawarkan berbagai macam ekstensi dan language support.

Kelebihan: Memiliki coding interface yang mudah dipahami, dapat digunakan pada sistem operasi Mac, Windows, dan Linux, dan tersedianya language support yang mumpuni.

Kekurangan: Tidak memiliki fitur auto-completion dan tampilan settings yang sulit dipahami.

Tag dan Atribut HTML

Saat belajar HTML, kamu tentu akan sering mendengar istilah tag dan atribut. Namun, apa itu tag dan atribut HTML?

HTML membutuhkan cara untuk mendeskripsikan text−baik berupa list, paragraf, atau link−yang ditulis di dalamnya kepada browser.

Di sinilah dibutuhkan peran tag. Tag adalah kode yang dipakai untuk menginformasikan pada browser untuk apa HTML ditulis.

Berikut contoh tag yang sering digunakan beserta dengan fungsinya.

• berfungsi untuk menunjukkan isi dokumen HTML;
• berfungsi untuk menunjukkan halaman;
• berfungsi untuk membuat baris dalam sebuah tabel; dan sebagainya.

Atribut HTML adalah informasi tambahan yang dicantumkan pada tag pembuka, biasanya berupa instruksi untuk menambahkan efek warna, ketebalan, dan sebagainya.

Atribut memiliki dua bagian yaitu nama dan nilai yang ditulis name=“value”. Penulisan atribut pada HTML diawali dengan tag, misalnya

align=“center”>Panduan Belajar HTML

Dalam kasus di atas, h2 adalah tag heading 2 dan align dan center adalah nama atribut.

Baca juga: HTML5 Adalah: Pengertian dan Perbedaannya dari HTML Biasa

Belajar HTML: 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