Bro, lu pasti sering banget kan liat website? Nah, website itu dibuat pake bahasa yang namanya HTML alias Hypertext Markup Language. Pake HTML, lu bisa nentuin tampilan dan fungsi dari elemen yang ditampilin di website. Nah, biar lu lebih paham lagi, kali ini kita bakal bahas tentang tag dan atribut di HTML.
Apa itu Tag di HTML?
Tag di HTML itu kayak tanda buat bilang "Ini elemen apa". Misalnya, kalo lu mau nampilin teks, lu bisa pake tag <p> buat ngasih tau kalau itu paragraf. Atau kalo lu mau nampilin gambar, lu bisa pake tag <img> buat ngasih tau kalau itu gambar.
Jenis-Jenis Tag di HTML
Ada banyak banget jenis tag di HTML, tapi yang paling umum digunakan itu antara lain:
1. Tag Heading
Tag heading itu kayak teks yang digedein dan dibuat bold gitu deh, biar keliatan kayak judul-judul gitu. Tingkatannya ada 6, yang paling gede tingkatannya itu h1, terus yang paling kecil tingkatannya itu h6. Jadi kalo mau bikin judul yang paling penting, pake H1, kalo yang kurang penting, bisa pake yang tingkatannya lebih kecil.
Untuk cara nulisnya sendiri gampang kok bro, lo tulis aja begini <h1>Judul Halaman</h1>. Untuk h2,h3,h4 dst, ya sama aja tinggal diganti aja.
2. Tag Paragraph
Yo, bro! selanjutnya Gue mau jelasin nih tentang Tag Paragraph di HTML. Jadi, tag ini tuh fungsinya buat bikin paragraf atau tulisan jadi keliatan rapi dan terstruktur di halaman website. Kalo lo pengen tulisan di website lo keliatan kece, pastiin lo pake tag ini, ya bro!
Nah, tag <p> ini ga cuma bisa dipake buat bikin tulisan biasa, tapi juga bisa dipake buat ngasiin gaya atau style ke tulisan. Misalnya, kalo lo mau bikin tulisan tebal, lo bisa pake tag <strong> atau <b> di dalam tag <p>. Atau kalo lo mau bikin tulisan miring, lo bisa pake tag <em> atau <i>.
Jadi, intinya tag paragraph ini penting banget buat bikin halaman website lo keliatan rapi dan mudah dibaca sama pengunjung website lo. Jangan lupa buat perhatiin juga tata letak dan gaya tulisan di halaman website lo biar keliatan lebih menarik dan professional, ya bro!
3. Tag Image
Bro, Tag Image dalam HTML tuh fungsinya buat nampilin gambar atau image di halaman website, loh. Jadi, kalo kita mau masukin gambar ke halaman website, kita bisa pakai tag ini.
Nah, tag <img> ini punya beberapa atribut, misalnya atribut src buat nunjukin alamat URL gambar yang mau ditampilin, atribut alt buat deskripsi alternatif gambar kalo gambar ga bisa ditampilin, dan atribut width/height buat ngatur ukuran gambar yang mau ditampilin.
Contohnya gini bro:
<img src="gambar.jpg" alt="Ini contoh gambar" width="300" height="200"> Di situ, tag <img> dipake buat nunjukin gambar dengan file sumber dari gambar.jpg sama deskripsi alternatif "Ini contoh gambar". Ukuran gambar juga diatur jadi lebar 300 pixel sama tinggi 200 pixel.
Jadi, kalo lo mau bikin halaman website yang lebih menarik, pastiin buat masukin gambar yang relevan dengan konten yang lo tampilin ya bro. Tapi, jangan lupa juga buat perhatiin ukuran file gambarnya biar ga kegedean dan ga bikin loading halaman website jadi lama.
4. Tag Link
Jadi, tag ini tuh fungsinya buat bikin link atau tautan ke halaman lain di website atau bahkan ke website lain.
Kalo lo pake tag link, lo bisa ngasiin hyperlink ke gambar, teks, atau bahkan ke bagian-bagian tertentu di halaman website. Keren, kan?
Nah, tag link ini di HTML biasanya ditulis dengan <a> dan lo bisa kasih atribut href buat ngasiin URL yang mau lo tuju. Misalnya, kalo lo mau link ke halaman "About Us" di website lo, lo bisa tulis
<a href="https://website.com/about">About Us</a>Jangan lupa juga buat kasih deskripsi atau title di tag link biar pengunjung website lo tau kemana mereka bakal diarahin kalo ngeklik link tersebut. Gitu aja sih penjelasannya, bro. Semoga membantu!
Apa itu Atribut di HTML?
Atribut di HTML itu kayak info tambahan buat elemen yang ditampilin di website. Misalnya, kalo lu mau ngasih judul buat gambar, lu bisa pake atribut "alt" di tag <img>. Atribut "alt" ini bakal nampilin judul gambar kalo gambarnya gagal dimuat atau kalo orang yang liat website lu pake program screen reader.
Eh bentar-bentar, kamu pengen punya website tapi belum punya laptop atau komputer? Artikel dibawah ini mungkin dapat membantu
Jenis-Jenis Atribut di HTML
Sama kayak tag, atribut di HTML juga ada banyak jenisnya. Ini dia beberapa yang paling umum digunakan:
1. Atribut "src"
"src" itu kayak kunci buat nunjukin gambar atau media lainnya di website kita. Jadi, kalo kita mau tampilin gambar di website, kita harus kasih tau ke browser sumber filenya ada dimana.
Nah, kalo lo mau pake tag gambar di HTML, lo harus kasih atribut "src" biar browser bisa baca sumber filenya. Misalnya, kalo lo punya file gambar yang namanya "logo.png" di folder "images" di website lo, lo bisa tulis atribut "src" kayak gini:
<img src="images/logo.png">.Jadi intinya, "src" itu harus diisi dengan URL atau alamat file yang bener, biar gambar atau media lainnya bisa keliatan di website kita. Jangan lupa juga buat kasih deskripsi di atribut "alt" biar pengunjung website kita bisa tau kalo gambar nggak muncul karena masalah teknis atau koneksi internet. Semoga jelas ya!
2. Atribut "href"
Hayuk lanjut, kita bahas tentang atribut "href" di HTML nih! Jadi, "href" ini itu adalah atribut yang digunakan untuk nunjukin alamat atau URL dari halaman web atau file yang kita mau link-kan di website kita.
Misalnya, kita mau link-kan ke halaman "about.html" di website kita, kita bisa tulis atribut "href" kayak gini:
<a href="about.html">Tentang Kami</a>Kita juga bisa link-kan ke halaman web lain atau file yang ada di luar website kita. Contohnya, kalo kita mau link-kan ke halaman "https://www.google.com", kita bisa tulis atribut "href" kayak gini:
<a href="https://www.google.com">Google</a>Jangan lupa juga buat ngasih tahu user kalo link-nya bakal buka halaman di tab baru, kalo emang begitu. Caranya tinggal tambahin atribut "target" dengan value "_blank" di tag <a>. Misalnya:
<a href="https://www.google.com" target="_blank">Google</a>Jadi, intinya "href" itu penting banget buat nunjukin alamat atau URL dari halaman web atau file yang mau kita link-kan di website kita. Semoga jelas ya!
3. Atribut "class"
Kamu pernah denger tentang atribut "class" pada HTML gak sih? Jadi, atribut ini biasanya digunakan untuk memberikan nama pada sebuah elemen, jadi kita bisa membedakan antara elemen satu dengan yang lainnya.
Misalnya, kamu bisa memberikan nama "header" untuk elemen yang berisi header dari website kamu, atau memberikan nama "menu" untuk elemen yang berisi menu navigasi website.
Dengan menggunakan atribut "class", kamu bisa mengakses elemen tersebut dengan lebih mudah dan lebih spesifik saat melakukan styling dengan CSS. Selain itu, kamu juga bisa membuat beberapa elemen memiliki class yang sama, jadi styling CSS yang kamu terapkan akan berlaku untuk semua elemen yang memiliki class yang sama tersebut.
Jadi, pokoknya atribut "class" ini berguna banget deh buat mempermudah kita dalam mengakses dan melakukan styling pada elemen di website kita.
4. Atribut "id"
Jadi atribut "id" di HTML tuh gunanya untuk memberikan identifier yang unik ke suatu elemen pada halaman web kita. Identifier ini nantinya bisa kita gunakan untuk menargetkan elemen tersebut dengan CSS atau JavaScript.
Kita bisa memberikan nilai apa saja pada atribut "id", tapi harus memenuhi beberapa kriteria. Misalnya, nilai yang kita berikan haruslah unik dan tidak boleh mengandung spasi atau karakter khusus tertentu.
Contoh penggunaan atribut "id" ini bisa kita lihat pada navigasi menu pada sebuah website. Biasanya, setiap link menu pada navigasi itu punya atribut "id" yang unik, sehingga kita bisa menargetkan link-menu tersebut dengan mudah menggunakan CSS atau JavaScript.
Nah, udah paham kan tentang tag dan atribut di HTML? Kalo masih bingung, lu bisa coba liat contoh kode HTML di website lain atau coba praktek langsung bikin website sederhana. Semoga artikel ini bisa ngebantu lu lebih ngerti lagi tentang tag dan atribut di HTML.
Tips Memakai Tag dan Atribut di HTML
Kalo lu mau bikin website yang rapi dan mudah dimengerti, ada beberapa tips nih buat pake tag dan atribut di HTML:
1. Pakai tag yang sesuai
Pake tag yang sesuai sama elemen yang mau ditampilin di website. Misalnya, kalo lu mau nampilin paragraf, jangan pake tag <h1> atau tag <img>. Ini biar website lu lebih rapi dan mudah dimengerti.
2. Pakai atribut yang sesuai
Pake atribut yang sesuai sama elemen yang mau ditampilin di website juga penting. Misalnya, kalo lu mau ngasih judul buat gambar, jangan pake atribut "title" yang buat nampilin tooltip.
3. Pakai atribut "alt" di tag <img>
Pake atribut "alt" di tag <img> itu penting banget buat aksesibilitas. Kalo gambarnya gagal dimuat, atribut "alt" bakal nampilin judul gambar. Kalo orang yang liat website lu pake program screen reader, atribut "alt" juga bakal dibacain.
4. Pakai atribut "class" sama "id" buat style CSS
Kalo lu mau ngasih style CSS ke elemen di website, pake atribut "class" atau "id". Atribut "class" dipake buat ngasih style ke beberapa elemen sekaligus, sedangkan atribut "id" cuma buat satu elemen aja.
Video Tentang Tag dan Atribut pada Script HTML
Biar makin ngerti Mimin sudah siapin video tentang tag dan atribut pada script html, tentunya dari sumber yang terpercaya
Kesimpulan
Jadi, tag dan atribut di HTML itu penting banget buat bikin website. Tag dipake buat nentuin elemen apa yang mau ditampilin, sedangkan atribut dipake buat ngasih info tambahan buat elemen itu. Kalo lu pake tag dan atribut yang sesuai, website lu bakal lebih rapi dan mudah dimengerti. Yuk, coba praktek bikin Website HTML Sederhana!
Posting Komentar