Panduan Belajar HTML Lengkap Bagi Pemula

Saat ini banyak sekali muncul beragam aplikasi digital baik di smartphone maupun laptop. Dan  dibalik sebuah aplikasi, terdapat bahasa pemrograman yang membentuk sebuah tampilan aplikasi. Bahasa pemrograman digunakan untuk menjalankan instruksi didalam komputer. Apabila tidak suka menggunakan bahasa pemrograman terstruktur, maka dapat menggunakan bahasa pemrograman yang lebih fleksibel. Misal HTML, yang dapat dengan mudah dpelajari karena ekstensi ini mempunyai kumpulan tags yang mudah diingat. Seorang programmer pasti sudah tidak asing dengan istilah HTML. Namun, bagi seorang pemula, sangat disarankan untuk mempelajari dasar–dasar yang membentuk sebuah program terlebih dahulu. Agar dalam membuat aplikasi, sudah dapat mengerti logika aplikasi tersebut. Karena hampir semua orang bisa membuat website tanpa memahami coding. Padahal, penting sekali untuk memahami pondasi pembentuk website, yaitu HTML.

Misal dapat dibayangkan website yang masih polos, kemudian melakukan instal tema. Namun, layout website terlihat jauh dari harapan. Header terlalu besar, posisi menu hanya bisa di tengah, tampilan konten kurang cocok. Bahkan saat berusaha memodifikasinya dengan plugin, hasilnya tetap tidak maksimal. Agar hal tersebut tidak terjadi, maka perlu belajar HTML. Sehingga, kemampuan tidak dibatasi oleh fitur dan template yang sudah tersedia. Dan mampu menciptakan fungsi yang tidak dimiliki website tetangga.

Baca juga : Rekomendasi Aplikasi Pendukung Terbaik Untuk Jualan Online

Pengertian HTML

HTML (Hypertext Markup Language) merupakan gabungan dari dua istilah: hypertext dan markup language. Hypertext yaitu dokumen berisi tautan yang memungkinkan pengguna terhubung ke halaman lain. Sedangkan markup language merupakan bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan menyajikan informasi. HTML adalah bahasa markup untuk membuat struktur halaman website. Hypertext Markup Language (HTML) adalah bahasa pemrograman standar dalam pembuatan halaman web. HTML merupakan sebuah bahasa mark up web yang utama dan dijalankan secara alami di setiap browser serta di-maintain oleh World Wide Web Consortium. HTML juga merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa ditambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript. Saat ini dalam pengembangannya HTML, sudah memasuki HTML 5 dan masih dikembangkan lagi untuk berbagai fiturnya. Fungsi utama HTML adalah untuk membangun struktur sebuah halaman web dengan berbagai elemen di dalamnya. Agar dapat menjalani fungsi yang diinginkan manusia, komputer perlu menerima arahan dalam bentuk program yang ditanamkan di dalamnya. Hal ini akan terus berlaku saat mempelajari HTML. Namun ingat, HTML bukan bahasa pemrograman

Kegunaan HTML

Awalnya HTML hanya digunakan untuk membantu peneliti memindahkan dokumen ke komputer lain, namun kini kegunaannya sudah semakin beragam. Beberapa kegunaan HTML yang perlu diketahui adalah:

• Dapat digunakan untuk membuat struktur website, seperti format judul, heading, paragraf, bahkan hingga tabel, list, formulir, dan media seperti gambar atau video.
• Berguna untuk membungkus elemen HTML dan menampilkannya di halaman browser.
• Membuat linkyang bisa mengarahkan ke halaman lain menggunakan kode tertentu yang disebut dengan hyperlink.
• Mengingat HTML menggunakan karakter ASCII (American Standard Code for Information Interchange), maka dapat digunakan di banyak OS, seperti MacOS, Windows hingga Linux.

Singkatnya, HTML berguna untuk mengelola serangkaian data sehingga suatu dokumen atau informasi dapat dibagikan atau diakses ke perangkat lain melalui website yang diakses dengan internet. Namun dalam aplikasinya, HTML masih membutuhkan bantuan dari CSS dan Javascript untuk mengembangkan sebuah website.

Cara Kerja HTML 

Dokumen HTML adalah file yang diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini dapat dilihat dengan menggunakan web browser apa pun (Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan merender kontennya sehingga user internet bisa melihat dan membacanya. Untuk cara kerja HTML, bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web. Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contoh, beranda utama, halaman ‘tentang kami’, halaman kontak yang semuanya memiliki dokumen HTML terpisah. Masing-masing halaman HTML terdiri atas seperangkat tags (elements), yang mengacu pada building block halaman website. Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.

Baca juga : Manfaat Google Search Console dan Cara Menggunakannya 

Kelebihan dan Kekurangan HTML 

Kelebihan HTML

1. HTML merupakan bahasa yang bersifat cross-platform(bisa digunakan dibanyak platform) seperti: Linux, macOS, Windows, da lainnya. Karena HTML sendiri memiliki karakter ASCII, sehingga cukup ditulis dalam text editor,
2. HTML juga bersifat open-source (gratis),
3. Merupakan bahasa markup yang rapih dan konsisten,
4. Tidak memerlukan kopiler sehingga dijalankan secar alami disetiap web browser,
5. HTML sudah terintegrasi dengan bahasa lain seperti: Node.js, Php, Backend, Active Server Pages, VBScript, Tcl, Perl dan lainnya. Maka akan memperbagus dan memepercantik halaman web, standar web resmi oleh world wide web consortium (W3C),
6. Bisa menyisipkan gambar, animasi berupa java applet, hyperlink, dan banyak lagi.

Kekurangan HTML

1. Halaman yang dihasilkan statis, jika ingin membuat halaman web yang dinamis memerlukan pemrograman lain seperti: Javascript, VBScript dan lainnya,
2. Kurang cepat untuk fitur-fitur baru di beberapa browser,
3. Memiliki banyak tag yang harus dipelajari.
4. Halaman tidak interaktif, maka perlu pemrograman lain seperti: Perl atau Tcl.
5. Perilaku web browser dalam membaca document html susah diprediksi, contohnya browser lama yang tidak bisa merender tag-tag html yang baru.

Komponen Utama HTML

Agar lebih mudah mempelajari HTML, ada tiga komponen utama yang membentuk HTML, yaitu tag, elemen, dan atribut. Ketiga komponen ini akan sering ditemukan saat mempelajari hingga menggunakan HTML. Berikut tiga komponen utama HTML:

1. Tag

Tag pada HTML berarti penanda awal dan akhiran dari sebuah elemen, inilah yang disebut “markup”. Bagian ini berguna sebagai perintah atau instruksi yang dibaca oleh browser. Ada dua jenis tag yang perlu diperhatikan, yaitu tag dengan penutup seperti <p > … </p >, <body > … </body >, atau <title > … </title > dan tag tanpa penutup seperti <link >, <br >, <img >, atau <hr >, digunakan sebagai awalan instruksi atau perintah yang akan dibaca web browser. Misalnya: tag <bold >. Tag ini akan meminta browser menampilkan teks dalam format tebal;

2. Elemen (Element)

Elemen adalah bagian yang lebih luas dari tag. Karena elemen berisi keseluruhan tag, mulai dari tag pembuka (< >), isi hingga penutup tag (< / >) dan atribut yang melengkapi. Contohnya: <h1 > Contoh Elemen </h1 >. Tapi, tidak semua tag memiliki penutup, maka perhatikan kembali jenis kodenya saat melakukan identifikasi sebuah elemen HTML.

3. Attribute

Attribute yaitu informasi atau perintah tambahan yang berada di dalam elemen. Misal: <img src=”pantai.jpg” alt=”Pantai Baron.” > yang menggunakan tag <img > dengan atribut sumber gambar (src) dan alt text (alt). Atribut merupakan informasi tambahan dalam sebuah tag. Tidak semua tag memiliki atribut, namun beberapa tag wajib memerlukan atribut agar dapat bekerja, misalnya <a >, <img >, atau <video >.

Baca juga : Cara Menambahkan Website ke Google Search Console

Kerangka Inti HTML

Jika atom-atom penyusun HTML dikumpulkan, maka terbentuklah dokumen HTML. Namun, hilangkan bayangan dokumen HTML yang dipenuhi ratusan tag. Karena kali ini akan membahas tentang bentuk dokumen HTML paling sederhana dan menjadi kerangka inti yang menyusun setiap dokumen HTML di dunia ini.

• <!DOCTYPE html >berfungsi untuk mendeklarasikan kepada komputer bahwa akan menuliskan perintah dalam kode HTML;
• <htm ></html > merupakan tag yang menandakan bahwa aksn memulai dan mengakhiri dokumen dalam kode HTML;
• <head ><head >diisi dengan metadata dari dokumen HTML. Seperti judul tab, deskripsi, dan lain-lain;
• <body ></body > diisi dengan konten halaman website.

Setelah mengantongi kerangka inti HTML, maka dapat melengkapinya sesuai dengan tujuan dan kebutuhan halaman website. Untuk melihat dokumen HTML sebuah halaman website: klik kanan pada mouse dan pilih ‘View page source’. Atau sederhananya dengan menekan Ctrl + U.

Belajar Membuat HTML

Simulasi yang akan dilakukan berikut tidak sekompleks pembuatan website, hanya kode mendasar yang bisa dipraktikkan sendiri dengan perangkat komputer atau laptop.

1. Pertama, buka aplikasi Notepad di komputermu.
2. Copy dan paste kode berikut ke Notepad.

<!DOCTYPE html ><html ><head ><title > Belajar HTML di Dewaweb </title ></head ><body ><p > Hello World! </p ></body ></html >

3. Simpan dokumen tersebut dan akhiri dengan ekstensi “.html” agar komputer dapat membacanya sebagai file HTML, dan bukan text.
4. Buka fileHTML yang disimpan, kemudian akan diarahkan ke browser untuk mengakses file tersebut. Dan selesai. Tapi saat ini, alamat hanya bisa diakses oleh perangkat komputer pribadi, alias belum bisa diakses oleh publik. Jadi memerlukan layanan cloud hostinguntuk mengaktifkan wensite agar dapat diakses secara umum melalui internet.

Tips Belajar HTML

• Gunakan huruf non kapital saat menyusun kode HTML agar terlihat rapi, kecuali untuk mendeklarasikan dokumen HTML dengan “DOCTYPE”.
• Ketika menyimpan dokumen HTML, pastikan menambahkan akhiran “.html” di nama file agar komputer tidak menyimpan dalam format “.txt” yang tidak bisa diterjemahkan komputer sebagai kode HTML.
• Jika ragu, bisa mengecek apakah penulisan HTML sudah benar atau belum, melalui w3.org.
• W3 Schools telah membuat kamus berisi elemen yang bisa digunakan di HTML, bisa mengeceknya dari HTML Element Reference.
• Agar nama URL untuk web terlihat rapi, jangan gunakan spasi ketika memberi nama file. Namun bisa menggunakan simbol strip (-) atau underscore(_).
• Jika ingin melihat contoh dokumen HTML di halaman website yang dikunjungi, klik kanan di halaman tersebut, lalu klik “View Page Source”.

Selain beberapa tips bermanfaat tersebut, pelajari juga beragam jenis tema atau template yang cocok untuk website HTML, karena template website HTML berbeda dengan template untuk WordPress yang bisa langsung digunakan. Templat website HTML juga cenderung lebih sederhana dan masih perlu dimodifikasi lagi.

Baca juga : Tools Untuk Mengecek Server Down

Belajar HTML dengan Editor HTML

Sekarang saatnya menyiapkan editor HTML, yang merupakan lembar kerja untuk membuat dan mengedit dokumen HTML. Ada berbagai editor HTML yang bisa digunakan secara gratis. Seperti Notepad++, Atom, Bracket, dan banyak lagi. Namun sebelum memilih editor HTML, pastikan OS komputer kompatibel. Setelah menginstal editor HTML, maka bisa belajar HTML dengan lebih mudah, karena fitur yang ditawarkan editor HTML akan mempercepat proses kerja. Berikut Tips Belajar HTML dengan Editor HTML :

1. Memilih Browser Terbaik

Untuk melihat hasil dari dokumen HTML, pastikan  sudah memiliki web browser. Web browser merupakan aplikasi untuk mengakses dan menampilkan halaman website. Oleh web browser, bahasa komputer yang telah dibuat di editor HTML akan diterjemahkan ke dalam tampilan yang dipahami manusia. Sebaiknya siapkan minimal dua web browser. Meski sudah memiliki standarisasi HTML, bisa saja terjadi error sehingga tampilan antara satu web browser dengan browser lainnya berbeda.

2. Membuat Halaman Website Pertama

Saat ini, sudah bisa membuat dan melihat eksekusi syntax HTML pada browser. Namun, halaman HTML belum bisa diakses oleh publik. Karena file HTML masih tersimpan dalam direktori komputer pribadi saja. Maka, perlu untuk mengonlinekan project tersebut. Atau dengan membuat website melalui layanan web hosting. Tak hanya cepat, cara pengoperasiannya juga mudah. Upload file HTML ke WordPress ataupun langsung melakukan kustomisasi melalui WordPress Editor.

3. Melengkapi Halaman Website

Cobalah membuat komponen tambahan pada halaman website. Masukkan bumbu-bumbu pelengkap agar halaman website semakin sedap dan informatif. Bisa memasukkan gambar, tabel, form, ataupun komponen pelengkap lainnya. Maka, halaman website yang disajikan akan lebih mudah dipahami, lebih menjaring peminat, dan mendatangkan keuntungan yang tidak diduga.

4. Mengatur Template Halaman Website

Selanjutnya, perlu juga mengatur template halaman website sehingga project akan tampil lebih kece. Untuk mengatur template halaman website, bisa membuat sendiri tema HTML-nya ataupun menggunakan template HTML yang sudah siap pakai. Kedua cara ini sama-sama akan mempercantik layout halaman website.

5. Kode Warna HTML

Mengetahui kode warna HTML merupakan hal yang penting, apalagi saat belajar HTML pemula. Agar dapat memodifikasi warna teks, border, dan media lain dalam dokumen HTML. Mengapa harus dalam bentuk kode warna? Misal, saat seseorang sedang duduk dalam sebuah restoran. Setelah membaca menu, kemudian memesan nasi goreng. Oleh pelayan, kertas order akan dibawa ke dapur untuk dieksekusi oleh koki agar hidangan bisa lekas disajikan. Artinya, bukan hanya sendiri yang terjun langsung untuk menggoreng nasi. Sama halnya dengan cara kerja kode warna HTML, yang membutuhkan pelayan atau perantara agar permintaan dapat disajikan alias tampil pada browser. Berhubung komputer berbicara dalam bahasa mark up, mereka tidak akan paham jika langsung memerintah dengan bahasa manusia.  Maka, berikan perintah berupa kode warna. Setelah kode warna tersebut diproses, browser akan menampilkan warna yang diinginkan.

Baca juga : Memahami Psikologi Marketing Untuk Meningkatkan Penjualan

Jika Anda pebisnis yang menjual produk/jasa apapun dan ingin meningkatkan penjualan bisnis, maka Anda perlu memiliki situs website toko online untuk mempromosikan produk. Anda dapat membuat website toko online di Jasa Pembuatan Website Toko Online Profesional. Dengan bantuan dari jasa pembuatan website akan membatu anda untuk mewujudkan situs website yang di dambakan.

Terimakasih dan semoga bermanfaat… Salam sukses untuk kita semua ?