HTML adalah bahasa yang digunakan untuk membuat halaman web. Bagi yang berkecimpung di dunia perangkat gadget dan ilmu komputer, pasti sudah tidak asing lagi dengan berbagai kode di dalamnya. HTML adalah kependekan dari Hypertext Markup Language.
Berbeda dengan orang awam, mungkin hanya sekedar mendengar istilah HTML semata. Tanpa tahu makna pengertian HTML dan kegunaan sebenarnya. Terutama maksud di balik kode-kode yang tersusun.
Kode HTML tersebut memastikan format teks dan gambar yang tepat untuk browser Internet. Tanpa HTML, browser tidak akan tahu bagaimana menampilkan teks sebagai elemen atau memuat gambar atau elemen lainnya.
Pengertian HTML
HTML adalah bahasa standar pemrogaman yang digunakan untuk membuat halaman website, yang diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau "bahasa markup".
Dilansir Techterms, "Hypertext" mengacu pada hyperlink yang mungkin terdapat dalam halaman HTML. Bahasa markup ini mengacu pada cara tag yang digunakan, untuk menentukan tata letak halaman dan elemen di dalam halaman.
HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan dalam sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar komputer. Dan bisa dipahami oleh para pengguna internet.
Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan sebagai metode yang digunakan untuk berpindah laman web ke laman lain. Usai mengklik tulisan atau simbol yang muncul di halaman website.
Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap teks didalamnya. Contoh jika mengetik suatu teks dengan tanda tag . Maka teks tersebut akan muncul dengan huruf tebal atau bold di laman website.
Fungsi HTML
Dikutip dari Computerhope, HTML digunakan untuk membuat dokumen elektronik (disebut halaman) yang ditampilkan di World Wide Web (www). Setiap halaman berisi serangkaian koneksi ke halaman lain yang disebut hyperlink. Setiap halaman web yang Anda lihat di Internet ditulis menggunakan satu versi kode HTML atau yang lain.
Kode HTML memastikan format teks dan gambar yang tepat untuk browser Internet. Tanpa HTML, browser tidak akan tahu bagaimana menampilkan teks sebagai elemen atau memuat gambar atau elemen lainnya. HTML juga menyediakan struktur dasar halaman, di mana Cascading Style Sheets dihamparkan untuk mengubah tampilannya.
1. Fungsi utama HTML, untuk membuat suatu halaman website yang bisa dibaca dan dipahami dengan lebih mudah. Seluruh laman website yang ada di internet, dibuat dengan HTML dan tak ada pengecualian.
2. Menandai teks pada suatu laman. HTML ditulis pada suatu halaman dokumen dengan tag atau simbol tertentu. Simbol dan tag tersebut akan membuat tampilan teks menjadi tebal, miring, bergaris tebal dan sebagainya. Semisal jika membuat suatu teks menjadi teks miring atau italic, di laman HTML harus ditulis kode , untuk teks tebal dan - - untuk teks bergaris bawah.
3. Sebagai dasar website. Website yang dibuat tentu memiliki beberapa fitur. Dibuat menggunakan java script untuk mengatur perilaku web, implemetasi bahasa pemrograman server PHP, dan mendesain web menggunakan CSS. Semua bahasa ini dapat diaplikasikan jika web memiliki bahasa HTML sebagai dasarnya.
4. Menampilkan tabel, gambar, video dan lainnya. Umumnya di halaman website atau blog kita tidak bisa langsung meletakkan tabel, gambar maupun video. Sehingga butuh komponen yang diletakkan pada web menggunakan bahasa HTML.
5. Menandai elemen dan membuat online form. HTML berfungsi menandai bagian-bagian dalam website di antaranya header, footer, main, navigation dan sebagainya. Selain itu HTML juga digunakan sebagai bahasa dalam membuat formulir digital atau online form.
Contoh Sedikit tentang HTML
1. Dokumen HTML
Sebelum menuliskan kode, ada baiknya Anda mengetahui cara membuat dokumen HTML. Yuk kita mulai dengan membuka Notepad atau TextEdit. Lalu, tuliskan kode seperti di bawah ini:
Setelah itu, Anda bisa menyimpan dokumennya dengan format ekstensi .htm, .html, atau .xhtml. Jika tidak, maka dokumen Anda tidak akan terbaca oleh web browser.
Sangat mudah, kan? Sekarang, mari kita bahas sedikit tentang kode yang sebelumnya Anda tulis.
Pertama, dokumen diawali dengan tulisan <!DOCTYPE html>. Kode ini menandakan bahwa dokumen ditulis menggunakan HTML. Nantinya, browser bisa membaca kode tersebut.
Selanjutnya, terdapat tag <html>. Setiap dokumen HTML wajib memiliki tag tersebut. Nantinya, dokumen harus ditutup dengan </html> seperti yang dapat Anda lihat di kode terakhir.
Berikutnya, ada tag <head>. Tag ini menunjukkan kepala dokumen. Nantinya akan menjadi bagian pada judul tab browser Anda. Jangan lupa ditutup dengan </head>.
Setelah itu, Anda menuliskan tag <body>. Ini artinya bagian dari halaman web browser. Isinya bisa berupa heading, paragraf, dan lain-lain. Jika sudah selesai, pastikan Anda menutupnya dengan </body>.
Lalu, bagaimana dengan heading dan paragraf yang tadi sempat kita sebut? Anda akan mempelajarinya di bagian berikutnya. Yuk kita simak ulasannya!
2. Heading
Contoh HTML yang kedua adalah heading.
Hal ini sangat penting untuk menjelaskan isi halaman web. Mulai dari judul, sub-judul, dan seterusnya.
Selain itu, heading juga berfungsi untuk aspek SEO. Hal ini dikarenakan Google menyukai halaman web yang tertata dengan rapi dan jelas. Sehingga, mesin pencarian tersebut dapat merekomendasikan website Anda kepada pengguna.
Heading memiliki banyak jenis. Ada H1, H2, H3, dan seterusnya. Semakin tinggi angkanya, semakin kecil tulisannya.
Penulisan heading terdapat dalam. Berikut adalah contoh penulisannya.
3. Paragraf
Contoh HTML berikutnya adalah paragraf.
Misalkan Anda membuat website berisi artikel. Pastinya, artikel tersebut berisi banyak paragraf, bukan? Jika tidak, maka artikel Anda akan sulit untuk dibaca. Hal ini juga akan menurunkan skor SEO pada website.
Untuk itu, yuk kita gunakan tag <p> untuk membuat paragraf. Jangan lupa menutup baris tersebut dengan </p> supaya bisa menuliskan kode lain. Kira-kira, penulisan kodenya seperti iBagaimana kalau ingin
Dalam HTML, sebuah link dapat dicantumkan dengan menuliskan tag <a> dan diakhiri dengan tag </a>. Contoh penulisannya seperti ini:
<a href="https://rf.production/id/">Kunjungi RF Production!</a>
Nah, di dalam tag <a>, terdapat atribut href. Atribut ini menunjukkan link yang Anda cantumkan. Dilihat dari contoh di atas, link nya menuju ke website Alterra Academy.
Berikutnya, terdapat tulisan “Kunjungi RF Production!”. Tulisan tersebutlah yang akan terbaca oleh pengguna. Jika diklik, maka akan menuju ke link yang telah dicantumkan.
5. Button
Anda ingin membuat link, tapi dalam bentuk button? Bisa!
Penulisan kodenya cukup mudah. Di bawah penulisan kode untuk membuat link, Anda cukup menuliskan tag dengan awalan <button> dan diakhiri dengan </button>.
Contoh HTML nya seperti ini:
<a href="https://rf.production.id/"target="_blank">
6. Garis Horizontal
Apa itu garis horizontal?
Penjelasannya persis seperti namanya. Biasanya, garis ini digunakan untuk memisahkan paragraf. Jadi, penulisan kodenya akan seperti ini:
Tag <hr> di atas menunjukkan garis horizontal. Anda tidak perlu memberikan penutup seperti </hr>. Hal tersebut tidak diperlukan untuk membuat garis horizontal.
7. Quotes
Terkadang, quotes atau kutipan dibutuhkan di sebuah artikel.
Misalkan, Anda menulis tentang perusahaan Apple. Lalu, Anda ingin mengutip perkataan Steve Jobs. Bagaimana caranya?
Cukup mudah. Anda hanya perlu mengawali kutipan tersebut dengan tag <q>. Setelah itu, jangan lupa ditutup dengan tag </q>. Contohnya seperti:
8. Bold
Contoh HTML selanjutnya adalah bold.
Dengan membuat teks menjadi bold, Anda bisa membuat beberapa bagian dari tulisan Anda menjadi lebih menonjol. Caranya sangat mudah. Anda hanya perlu menggunakan tag <b> dan </b>.
Contohnya seperti ini:
9. Italic
Bagaimana jika Anda ingin membuat tulisan miring?
Caranya sama persis seperti bold. Anda tinggal menggunakan <i> dan </i> untuk membuat tulisan menjadi italic. Kira-kira, seperti ini contohnya:
10. Images
Sebuah artikel akan lebih menarik jika ada gambar, bukan?
Hal ini juga memberikan gambaran kepada pembaca tentang apa yang sedang Anda bicarakan di sebuah artikel.
Dalam HTML, memasukkan image ditandai dengan tag <img>. Kira-kira, begini contohnya:
Jika kalian perhatikan, ada atribut ‘src’, ‘alt’, dan ‘style’. Apa artinya?
Src artinya url atau lokasi penyimpanan gambar. Sedangkan Alt adalah atribut berisi teks. Jika gambar tidak muncul, maka teks tersebut yang akan dilihat oleh pengunjung website.
Lalu, bagaimana dengan Style?
Style menunjukkan ukuran dari gambar yang Anda masukkan. Tentunya, Anda bisa mengatur ukuran yang Anda mau melalui atribut tersebut.
11. Background Color
Bosan dengan warna background halaman website yang selalu putih?
Anda bisa menggantinya loh. Seperti mengatur ukuran image, mengganti warna background juga menggunakan atribut Style. Seperti ini contohnya:
Kata ‘orange’ bisa Anda sesuaikan dengan warna yang Anda mau. Nantinya, background halaman website akan mengikuti warna tersebut.
12. Jenis Font
Contoh HTML berikutnya adalah jenis font.
Anda bisa menggantinya dengan menggunakan atribut Style seperti contoh HTML sebelumnya. Jenis font tersebut bisa Anda ganti di manapun, baik di heading ataupun paragraf.
Inilah contoh penulisannya:
13. Ukuran Font
Tidak hanya ukuran gambar nih yang bisa diubah. Ukuran font juga bisa loh.
Atribut yang dipakai tetap Style. Anda bisa langsung mengatur ukuran font yang Anda inginkan. Contohnya seperti di bawah ini:
14. Warna Font
Selain warna background, warna font juga bisa Anda ganti.
Caranya, Anda bisa menggunakan atribut Style. Setelah itu, Anda bisa menulis warna yang Anda inginkan. Contohnya seperti ini:
Perlu diingat bahwa warna yang Anda masukkan harus sesuai dengan kode warna HTML. Selain menuliskan nama warna seperti ‘orange’ atau ‘red’, Anda juga bisa menuliskan kode Hex, RGB, dan HSL.
15. Text Alignment
Contoh HTML yang terakhir adalah Text Alignment. Atau kita sebut juga dengan posisi teks.
Cara mengubah posisi teks sangat mudah. Anda hanya perlu mengikuti contoh di bawah ini:
0 Komentar