Bikin Website Sekarang
Belajar Coding HTML untuk Membangun Website Sendiri!
Selain untuk mempromosikan produk jualan, website juga berguna untuk membantu profile branding sebuah perusahaan. Tidak heran jika kini kebutuhan akan website terus meningkat. Oleh sebab itu, jika kamu ingin membangun website, belajar coding HTML adalah hal utama yang tidak boleh dilewatkan.
HTML adalah bahasa pemrograman yang menjadi dasar untuk membangun halaman website. Bahasa markup ini digunakan komputer untuk membuat struktur teks maupun media dalam web. Menurut data W3Techs, HTML bahkan digunakan oleh 94.7% dari total seluruh website di dunia.
Jika kamu ingin membuat website atau berkarir sebagai seorang programmer, pastikan untuk mengikuti artikel ini sampai selesai, ya. Yuk, simak pembahasannya langsung di bawah ini!
Contents
Apa Itu Coding HTML?
Untuk mulai belajar coding HTML, kamu perlu mengenal apa itu HTML terlebih dahulu. HTML adalah singkatan dari Kypertext Markup Language. Bahasa pemrograman HTML digunakan untuk membangun halaman sebuah website.
Dalam praktiknya, HTML digunakan untuk mengatur format teks, gambar yang tepat, dan elemen lainnya yang perlu dimuat dalam halaman. Output dari coding HTML akan ditampilkan dalam tampilan halaman website yang dimuat oleh web browser.
Untuk mempelajari coding HTML, kamu perlu mengenali beberapa istilah yang sering digunakan. Di antaranya adalah tag, elemen, dan atribut/property. Tag merupakan awalan instruksi yang akan dibaca web browser. Penulisan tag dituliskan seperti ini: tag <body>.
Sementara itu, elemen merupakan keseluruhan kode mulai dari tag pembuka (<>) hingga tag penutup (</>). Untuk menambahkan informasi atau instruksi tambahan, kamu perlu menggunakan atribut./property. Contohnya seperti atribut alt.
Baca Juga: Ini Situs Untuk Latihan Coding
Manfaat Belajar Coding HTML
Ada banyak manfaat yang bisa kamu dapatkan dengan mempelajari coding HTML, lho. Bisa membangun website hanya salah satunya! Ketahui beberapa manfaatnya berikut:
- Memudahkan belajar bahasa pemrograman lain. HTML adalah dasar dari berbagai bahasa pemrograman, lho. Jika kamu ingin mengembangkan kemampuan pengembangan front-end dengan bahasa CSS, SQL, dan sebagainya, sebaiknya pelajari HTML lebih dulu.
- Memperbaiki performa web yang buruk. Jika kamu sudah mengetahui cara coding HTML, kamu tentu dapat melakukan modifikasi kode halaman web. Hal ini dapat kamu terapkan untuk memperbaiki atau meningkatkan performa website dengan lebih baik.
- Menambahkan fitur pada website. Setelah kamu memahami pengetahuan dasar belajar coding HTML, kamu dapat mengembangkan berbagai fitur dalam website.
- Membuat produk digital siap jual. Selain bisa membuat website, kamu juga bisa membuat template maupun fitur website yang menarik. Ciptaanmu ini bisa kamu jual dan menghasilkan pundi-pundi rupiah, lho!
Persiapan Belajar Coding HTML
Sudah siap praktik coding HTML? Eitss, tunggu dulu. Sebelum kamu belajar coding HTML dan langsung mempraktikkannya, kamu harus mempersiapkan dua alat terlebih dahulu. Kedua alat tersebut adalah teks editor dan web browser.
1. Teks Editor
Teks editor adalah tool yang diperlukan untuk menuliskan kode HTML. Umumnya, setiap sistem operasi memiliki teks editor bawaan yang berbeda-beda. Untuk pengguna perangkat Windows bisa menggunakan teks editor Notepad. Sementara pengguna MacOS dapat menggunakan TextEdit.
2. Web Browser
Setelah selesai menulis, tentu kamu perlu membuka kode HTML dengan menggunakan web browser. Kamu dapat menggunakan berbagai web browser dalam versi terbaru. Sebagai contoh kamu bisa menggunakan Mozilla Firefox, Opera Mini, Internet Explorer, atau Google Chrome.
Baca Juga: Panduan Ngoding Untuk Pemula
Contoh Coding HTML Dasar
Untuk mulai belajar coding HTML, berikut ini akan kamu berikan beberapa contoh coding HTML pemula. Mulai dari mempelajari coding dasar, heading, format teks, dan lain-lain. Yuk simak langsung contoh dan pembahasannya di bawah ini!
1. Coding HTML Dasar
Penulisan kode HTML harus diawali dengan <!DOCTYPE html>. Selanjutnya, penuliskan diteruskan dengan tag <html>, untuk menampung seluruh tag HTML.
Usai menuliskan tag <html>, kamu dapat langsung masuk ke tag <head> untuk membuat bagian kepala dokumen. Tag ini akan ditampilkan sebagai judul di bagian tab browser. Selesai dengan bagian kepala, kamu bisa melanjutkan ke inti dokumen dengan mengawalinya menggunakan tag <body>.
Selesai menuliskan inti dari isian website, kamu dapat mengakhiri kode. Tidak diakhiri begitu saja, kamu perlu menggunakan tag penutup yang sesuai. Jika sebelumnya kamu sudah menggunakan tag <body> maka tutup dengan tag </body> dan baru diikuti dengan tag </html>.
2. Coding HTML Heading
Bagi pengikut trend SEO, heading adalah bagian yang tidak boleh dilewatkan dalam pengaturan struktur artikel. Heading dapat membantu pengunjung untuk lebih mudah memahami inti atau konteks dari informasi yang disampaikan dalam halaman website.
Tag heading akan menyesuaikan ukuran yang sesuai. Semakin spesifik sebuah topik sub-judul maka akan semakin kecil juga ukuran dari heading. Adapun contoh penulisan kode heading adalah seperti di bawah ini:
<h1> Contoh Heading 1 </h1>
<h2> Contoh Heading 2 </h2>
<h3> Contoh Heading 3 </h3>
3. Coding HTML Paragraf
Untuk memudahkan pengunjung dalam membaca informasi atau artikel yang ingin disampaikan, kamu dapat membuatnya dalam format paragraf. Untuk memisahkan satu paragraf dengan paragraf lainnya, gunakan kode <p> teks 1 paragraf </p>.
Setelah menutup kode di atas, kamu dapat melanjutkan penulisan teks pada baris selanjutnya. Tuliskan kembali teks dalam format kode seperti di atas.
4. Coding HTML Format Gaya Teks
Adakalanya teks perlu dituliskan dalam cetak tebal, miring, atau dipisahkan dari satu baris dengan baris selanjutnya. Untuk membuat format gaya penulisan demikian, format kode yang diperlukan sebagai berikut:
- Cetak tebal teks: <b> contoh teks </b>
- Cetak miring teks: <i> contoh teks </i>
- Membuat cross-through text: <del> contoh teks </del>
- Mengutip teks panjang: <blockquote> contoh teks </blockquote>
- Mengutip teks pendek: <q> contoh teks </q>
- Membuat teks di baris baru:
<p> <br> contoh teks
<br> contoh teks </p>
5. Coding HTML Mencantumkan Link
Selain bisa mengatur format gaya penulisan teks, kamu juga bisa memasukkan link dalam artikel di websitemu. Untuk mencantumkan link gunakan kode seperti pada contoh berikut:
<a href=”https://idwebhost.com/”> Beli Hosting Paling Murah di IDwebhost! </a>
“href” yang tertulis dalam kode merupakan sebuah atribut. Ini menandakan atribut link yang kamu cantumkan. Sebagai contoh di atas, atribut link yang dicantumkan mengarahkan pengunjung ke website IDwebhost. Sedangkan teks “Beli Hosting Paling Murah di IDwebhost!” adalah anchor text yang akan terbaca oleh pengunjung.
6. Coding HTML Memasukkan Gambar
Memasukkan gambar dalam coding HTML menggunakan tag khusus, yakni tag <img>. Berikut adalah contoh kode memasukkan gambar dan pembahasannya:
<img src =”url atau lokasi penyimpanan gambar” alt=”deskripsi gambar” style=”width:80px;height:80px; “>
“src” dalam kode di atas adalah atribut yang menandai url link atau lokasi penyimpanan dari gambar. Sementara itu “alt” adalah atribut untuk deskripsi gambar, yang dapat membantu pengunjung memahami gambar. Pada bagian akhir juga terdapat atribut “style” yang menandakan ukuran dari gambar.
Itulah sedikit pengetahuan dasar dan contoh-contoh untuk kamu yang baru mulai belajar coding HTML. Kamu bisa mulai belajar membuat kode sederhana dengan menggunakan contoh-contoh di atas. Jangan lupa baca artikel dan panduan lain untuk mempertajam kemampuan codingmu juga, ya!
Jika kamu masih ragu atau bingung, IDwebhost menyediakan jasa bikin website super cepat dan murah, lho. Dengan harga termurah, dapatkan website mulai dari Rp 50 ribuan saja per bulan sudah termasuk dengan domain gratis dan hosting selamanya!
