Apakah Anda tahu apa itu HTML? Lalu apa fungsi dari HTML? Dan apakah hubungannya HTML dengan website? Bagi Anda yang ingin tahu jawaban dari pertanyaan tersebut, simak terus artikel ini hingga selesai. Karena di artikel ini Anda bisa belajar HTML Dasar bagi pemula secara singkat dan jelas.
HTML
Sekarang, hampir semua orang bisa bikin website sendiri tanpa harus memahami coding. Padahal, penting juga untuk mempelajari HTML supaya dapat memahami pondasi pembentuk website.
Coba bayangkan jika website Anda terlihat masih polos. Kemudian, Anda menginstal tema atau template untuk website. Namun sayangnya layout website terlihat jauh dari yang diharapan, seperti :
- header terlalu besar,
- posisi menu hanya bisa di tengah,
- tampilan konten kurang cocok.
Bahkan ketika Anda berusaha memodifikasinya dengan plugin, hasilnya tetap tak maksimal.
Agar hal tersebut tak terjadi, Anda perlu belajar HTML. Sehingga, kemampuan Anda tak terbatas oleh fitur dan tema / template yang telah tersedia. Jadi, Anda bisa menciptakan fungsi yang tak dimiliki website lain.
Belajar HTML Dasar Lengkap
Anda sudah berada di tempat yang tepat! Di sini, Anda bisa belajar HTML dasar dengan cara yang sederhana. Dalam sekali baca, Anda akan memahami, karena pembelajaran HTML dari Nol hingga paham :
Definisi HTML
Apa itu HTML? HTML (Hypertext Markup Language) adalah gabungan dari 2 istilah yaitu :
- Hypertext yakni dokumen berisi tautan yang memungkinkan pengguna bisa terhubung ke halaman lain.
- Markup language adalah bahasa komputer yang terdiri atas sekumpulan kode untuk mengatur struktur dan menyajikan suatu
Jadi, kesimpulan dari pengertian HTML yaitu bahasa markup untuk bikin struktur halaman website.
Unsur Pembentuk HTML
Supaya lebih mudah dalam belajar HTML dasar, Anda perlu berkenalan dengan tag, elemen, dan atribut. Mereka merupakan 3 sekawan yang jadi atom pembentuk HTML.
Berikut penjelasan dari 3 unsur pembentuk HTML :
- Tag, dipakai sebagai awalan instruksi atau perintah yang akan dibaca oleh web browser. Contohnya : tag <bold> yang digunakan untuk meminta browser menampilkan teks dalam format tebal.
- Element adalah keseluruhan kode yang terdiri dari tag pembuka (< >) sampai tag penutup (</ >). Misalnya : <H1>Contoh Elemen HTML</H1>. Meski demikian, tak semua tag HTML punya pasangan penutup.
- Attribute yakni informasi atau perintah tambahan yang ada di dalam elemen. Contohnya : <img src=“website.jpg” alt=“Website Toko Online”>. Elemen tersebut memakai tag <img> dengan atribut sumber gambar (src) dan alt text (alt).
Setelah Anda memahami apa saja komponen pembentuk HTML, silakan pelajari coding HTML dasar. Dengan mengetahui coding HTML dasar, Anda akan lebih siap untuk memakai tag HTML yang lebih menantang.
Kerangka Inti HTML
Saat belajar HTML dasar sampai sini Anda mungkin sudah tahu apa saja atom penyusun HTML. Bila atom-atom di atas dikumpulkan, maka terbentuklah dokumen HTML.
Tapi, mari usir bayangan dokumen HTML lengkap yang dipenuhi dengan ratusan tag. Kita akan mengulik bentuk dokumen HTML yang paling sederhana saja. Dan ini jadi kerangka inti penyusun tiap dokumen HTML di dunia ini.
- <!DOCTYPE html> berfungsi untuk mendeklarasikan pada komputer bahwa Anda akan menuliskan perintah dalam kode HTML.
- <html></html> adalah tag yang menandakan bahwa Anda memulai dan mengakhiri dokumen dalam kode HTML.
- <head><head> diisi dengan metadata dari dokumen HTML, seperti judul tab, deskripsi, dl
- <body></body> diisi dengan konten halaman website.
Setelah mengantongi kerangka inti HTML, Anda bisa melengkapinya sesuai dengan tujuan dan kebutuhan halaman website.
Bila Anda penasaran untuk melihat dokumen HTML suatu halaman website, silakan lakukan trik ini. Klik kanan pada mouse dan pilih “lihat sumber halaman (view page source)” atau tekan Ctrl + U.
Belajar dengan Editor HTML
Anda sudah mempelajari teori belajar HTML dasar di atas. Pasti, Anda sudah tak sabar untuk segera mempraktikkannya. Kalau begitu, sekarang saatnya Anda menyiapkan editor HTML.
Editor HTML adalah lembar kerja untuk membuat dan/atau mengedit dokumen-dokumen HTML. Ada berbagai macam editor HTML yang dapat Anda pakai secara gratis, seperti :
- Notepad++,
- Sublime text,
- Atom,
- Bracket,
- dan banyak lagi.
Tapi sebelum memilih editor HTML, pastikan Sistem Operasi (OS) komputer Anda kompatibel. Setelah menginstal editor HTML, Anda bisa belajar HTML dengan lebih mudah dan praktis. Karena, fitur yang ditawarkan editor HTML akan mempercepat proses kerja Anda.
Memilih Browser Terbaik
Setelah membuat dokumen saat belajar HTML dasar di atas, Anda pasti ingin melihat hasilnya, bukan? Karena itu, pastikan Anda sudah memiliki web browser.
Web browser adalah suatu aplikasi yang berguna untuk mengakses dan menampilkan halaman website. Oleh web browser, bahasa komputer yang sudah Anda bikin di editor HTML akan diterjemahkan ke dalam tampilan yang dipahami manusia.
Untuk berjaga-jaga, sebaiknya Anda siapkan minimal 2 web browser. Meski sudah ada standarisasi HTML, namun bisa saja terjadi error. Sehingga tampilan antara satu web browser dengan browser lainnya akan berbeda.
Membuat Halaman Website Pertama
Setelah belajar HTML dasar di atas, sekarang Anda sudah dapat membuat dan melihat eksekusi syntax HTML pada browser. Sayangnya, halaman HTML Anda belum dapat diakses oleh publik. Dengan alasan, file HTML Anda masih tersimpan dalam direktori komputer saja.
Oleh sebab itu, perlu untuk mengonlinekan project Anda tersebut. Jalan tercepatnya yakni dengan membuat website lewat layanan web hosting terpercaya.
Tidak hanya cepat, cara pengoperasiannya pun mudah. Anda dapat segera mengunggah / mengupload file HTML ke WordPress ataupun langsung melakukan kustomisasi lewat WordPress Editor.
Melengkapi Halaman Website
Agar ilmu belajar HTML dasar Anda makin top, cobalah bikin komponen tambahan pada halaman website. Masukkan bumbu-bumbu pelengkap supaya halaman website Anda semakin sedap dan informatif.
Anda dapat memasukkan gambar, tabel, form, maupun komponen pelengkap lainnya. Dijamin, halaman website yang Anda sajikan akan :
- lebih mudah dipahami,
- lebih menjaring peminat, dan
- mendatangkan keuntungan yang tak Anda duga.
Mengatur Template Halaman Website
Meski sudah dapat membuat halaman website yang lengkap, perjalanan belajar HTML dasar Anda belum tamat. Sebab, Anda pun perlu mengatur template halaman website. Sehingga project Anda akan tampil lebih kece.
Untuk mengatur template halaman website agar bisa mempercantik layout ada dua cara, yaitu :
- membuat template HTML sendiri.
- memakai template HTML yang telah siap pakai.
Kode Warna HTML
Mengetahui kode warna HTML adalah suatu hal yang penting. Apalagi ketika Anda belajar HTML dasar bagi pemula. Dengan begitu, Anda bisa memodifikasi mulai dari warna teks, border, dan media lain dalam dokumen HTML.
Kenapa harus dalam bentuk kode warna?
Misalnya Anda sedang duduk dalam sebuah restoran. Setelah baca buku menu, Anda kemudian memesan nasi goreng. Oleh pelayan, kertas order Anda akan dibawa ke dapur untuk dieksekusi oleh koki supaya hidangan bisa lekas disajikan.
Itu artinya, bukan Anda sendiri yang terjun langsung untuk menggoreng nasi, bukan?
Seperti itulah kira-kira cara kerja dari kode warna HTML. Kita memerlukan pelayan atau perantara agar permintaan kita bisa disajikan atau tampil pada browser.
Komputer berbicara dalam bahasa markup. Sehingga komputer tak paham bila Anda langsung memerintah dengan bahasa manusia. Oleh sebab itu, Anda harus memberikan perintah berupa kode warna. Setelah kode warna tersebut diproses, maka browser akan menampilkan warna yang Anda mau.
Sekian info tentang belajar HTML dasar bagi pemula lengkap, semoga post kali ini berguna untuk kawan-kawan semua. Tolong postingan pembelajaran pemrograman ini dibagikan supaya semakin banyak yang mendapat manfaat.
