Html Tag: Struktur dasar HTML
HTML atau Hyper Text Markup Language adalah bahasa markup yang digunakan untuk membuat suatu halaman web. Pada umumnya, isi dari sebuah web terdiri atas teks, gambar, video, dan elemen lainnya yang terstruktur menjadi satu kesatuan. HTML berfungsi untuk memformat konten tersebut, sehingga dapat diketahui oleh browser dan ditampilkan secara benar.
Untuk membangun sebuah halaman web, terdapat tiga struktur dasar bagian HTML yang harus diketahui oleh setiap pengembang web, yaitu:
1. Struktur Dasar HTML
Struktur Dasar HTML merupakan kerangka dasar dari setiap halaman web. Struktur ini terdiri atas beberapa elemen seperti tag <html>, <head>, dan <body> yang digunakan untuk membuat sebuah struktur yang terorganisir dengan baik.
– Tag <html>
Tag <html> adalah tag pertama yang harus didefinisikan di dalam sebuah halaman web. Tag ini menunjukkan bahwa dokumen yang sedang dibuat menggunakan bahasa HTML. Semua elemen lain di dalam dokumen ditulis dalam tag ini. Contohnya:
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Isi Halaman
</body>
</html>
– Tag <head>
Tag <head> digunakan untuk menuliskan informasi mengenai halaman web, seperti judul, tautan ke file CSS, dan meta tag. Tag ini diletakkan di awal halaman sebelum tag <body>. Contohnya:
<head>
<title>Judul Halaman</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
– Tag <body>
Tag <body> ini digunakan untuk menampilkan isi halaman web, seperti teks, gambar, dan video. Semua elemen yang ditampilkan di halaman web akan ditulis di dalam tag ini. Contohnya:
<body>
<h1>Judul Halaman</h1>
<p>Isi Halaman</p>
<img src="gambar.jpg" alt="Gambar">
</body>
Itulah struktur dasar HTML yang harus diketahui oleh setiap pengembang web. Dalam membangun sebuah halaman web, sebaiknya struktur HTML dibuat dengan rapi dan terstruktur agar mempermudah pembacaan kode dan perawatan halaman web di masa depan.
Html Tag: Heading atau judul
Html memiliki tiga struktur dasar bagian diantaranya, yaitu heading atau judul. Heading dalam html merupakan tag yang digunakan untuk membuat teks menjadi lebih besar dan bold untuk memperjelas perbedaan antara konten yang satu dengan konten yang lainnya. Pada dasarnya, tag heading dibagi menjadi enam level atau ukuran teks yang berbeda, dimulai dari h1 hingga h6.
Level pertama atau h1 digunakan untuk judul halaman utama atau bagian paling penting dari suatu halaman web. Selanjutnya h2 digunakan untuk sub judul atau section pertama di bawah judul utama, kemudian diikuti oleh h3 untuk sub section selanjutnya, dan seterusnya hingga h6 untuk sub section terakhir.
Penggunaan heading yang tepat membantu SEO dan pengalaman pengguna pada halaman web. dari segi SEO, judul utama atau h1 sangat penting karena memberi sinyal utama kepada mesin pencari tentang topik halaman web tersebut. Selain itu, penggunaan heading yang benar juga memudahkan pengguna untuk memahami isi konten halaman web dengan cepat, sehingga mereka dapat menemukan informasi yang sedang dicari dengan mudah.
Selain itu, penggunaan heading yang terstruktur juga membuat halaman web menjadi lebih mudah dibaca dan dimengerti. Hal ini membuat pengunjung website lebih lama berada pada halaman tersebut, yang pada gilirannya mempengaruhi tingkat konversi dan kredibilitas jenis website.
Berdasarkan manfaat yang diuraikan di atas, maka penting bagi para web developer untuk menguasai teknik-teknik penggunaan heading yang baik dalam html sehingga website yang dibuat dapat memberikan pengalaman pengguna terbaik. Selain itu juga berguna untuk menentukan strategi SEO dari situs web tersebut.
Html Tag: Paragraf atau Teks
HTML merupakan bahasa markup yang digunakan untuk membuat sebuah halaman web. HTML memiliki tiga struktur dasar bagian diantaranya adalah paragraf atau teks. Paragraf atau teks adalah struktur dasar pertama dalam pembuatan halaman web dengan HTML.
HTML memiliki tag atau kode yang digunakan untuk mengelompokkan konten menjadi sebuah paragraf. Tag yang digunakan adalah tag <p> dan </p>. Tags ini harus ada pada setiap awal dan akhir paragraf untuk mengindikasikan awal dan akhir content paragraf.
Berikut adalah contoh kode HTML untuk membuat sebuah paragraf:
<p>Ini adalah sebuah paragraf.</p>Setelah kode di atas dijalankan, maka secara otomatis akan terbentuk sebuah paragraf pada hasil tampilan website.
Contoh hasilnya seperti ini:
Ini adalah sebuah paragraf.Selain tag <p> dan </p>, terdapat juga beberapa tag lain yang dapat digunakan untuk mengatur tampilan teks pada halaman web. Berikut adalah beberapa contoh tag tersebut:
<b>dan</b>: digunakan untuk membuat teks menjadi tebal<i>dan</i>: digunakan untuk membuat teks menjadi miring atau italic<u>dan</u>: digunakan untuk membuat teks menjadi bergaris bawah<strike>dan</strike>: digunakan untuk membuat teks tercoret
Berikut adalah contoh kode HTML untuk mengaplikasikan tag <b> pada sebuah paragraf:
<p><b>Ini adalah teks tebal</b> pada sebuah paragraf.</p>Contoh hasilnya seperti ini:
Ini adalah teks tebal pada sebuah paragraf.Dalam penggunaannya, dianjurkan untuk tidak berlebihan menggunakan tag-tag tersebut agar content dari website tetap mudah dibaca.
Itulah tiga struktur dasar dalam pembuatan halaman web menggunakan HTML. Dengan memahami struktur dasar tersebut, kita dapat membuat sebuah halaman web yang menarik dan mudah dibaca.
Html Tag: Gambar atau media lainnya
Html memiliki tiga struktur dasar bagian diantaranya adalah tag yang digunakan untuk membangun sebuah website atau halaman web. Salah satunya adalah tag untuk gambar atau media lainnya. Tag ini diawali dengan <img> dan diikuti dengan atribut yang dihubungkan dengan tanda sama dengan (=) dan nilai atribut yang dihubungkan dengan tanda kutip satu (‘). Berikut adalah beberapa atribut yang harus diketahui dalam tag ini:
- Src: merupakan atribut yang wajib diisi dan berisi alamat atau URL gambar. Contoh: <img src=”https://www.example.com/logo.png”>
- Alt: merupakan atribut yang berisi teks alternatif yang akan muncul ketika gambar tidak dapat ditampilkan atau ketika pengguna menggunakan pembaca layar untuk website. Contoh: <img src=”https://www.example.com/logo.png” alt=”Logo perusahaan”>
- Width: merupakan atribut yang berisi lebar gambar dalam piksel. Contoh: <img src=”https://www.example.com/logo.png” width=”200″>
- Height: merupakan atribut yang berisi tinggi gambar dalam piksel. Contoh: <img src=”https://www.example.com/logo.png” height=”200″>
Jangan lupa untuk memberikan deskripsi pada gambar agar lebih mudah dipahami pengunjung website. Selain itu, gunakan format gambar yang umum seperti JPEG, PNG, atau GIF dan hindari menggunakan gambar dengan ukuran yang terlalu besar karena akan memperlambat waktu loading halaman website.
Selain menggunakan tag <img>, terdapat juga tag <video> dan <audio> untuk menampilkan media audio atau video pada website. Tag <video> diawali dengan <video> dan diakhiri dengan </video>. Sedangkan, tag <audio> diawali dengan <audio> dan diakhiri dengan </audio>. Kedua tag ini memiliki beberapa atribut seperti <img> untuk menentukan sumber atau URL media, lebar, dan tinggi.
Contoh penggunaan tag <video>:
<video src="https://www.example.com/video.mp4" width="640" height="480" controls></video>
Contoh penggunaan tag <audio>:
<audio src="https://www.example.com/audio.mp3" controls></audio>
Sekarang kita dapat menampilkan gambar atau media lainnya pada website yang kita buat. Jangan lupa selalu memperhatikan kualitas dan ukuran gambar agar halaman website tetap ringan dan mudah diakses oleh pengunjung. Dan ingat, semakin menarik tampilan website, semakin besar konversi pelanggan.
Html Tag: Link atau tautan ke halaman lain
Link atau tautan ke halaman lain memungkinkan pengguna untuk dengan mudah melompat dari satu halaman atau situs web ke situs web atau halaman lain dengan informasi yang saling terkait. Tautan ini memungkinkan pengguna untuk membuka halaman lain atau sumber daya dengan mengklik atau menyentuh teks atau gambar yang diberikan. Html memiliki tag khusus untuk membuat tautan atau link ini.
Tag dasar untuk membuat link dalam html adalah <a>, yang juga dikenal sebagai tag anchor. Format standar untuk menambahkan link adalah:
<a href=”URL”>Link text</a>
Contoh:
<a href=”https://www.google.com”>klik disini</a>
Ini akan menempatkan teks “klik disini” sebagai tautan pada halaman web Google. Jika pengguna mengklik teks “klik disini”, maka halaman web Google akan terbuka.
1. Jenis Tautan
Terdapat 3 jenis tautan dalam HTML:
- Tautan Internal / Local
- Tautan Eksternal / Global
- Tautan Paket / Relative
1.1. Tautan Internal / Local
Tautan internal merujuk pada halaman web atau sumber daya yang ada pada server yang sama dengan halaman saat ini. Ini berarti ketika pengguna mengklik tautan ini, halaman lain yang terkait akan dimuat pada browser. Tautan internal biasanya digunakan untuk mengarahkan pengguna ke bagian tertentu di dalam halaman yang sama atau ke halaman lain pada situs web yang sama.
1.2. Tautan Eksternal / Global
Tautan eksternal merujuk pada halaman web atau sumber daya yang ada pada server yang berbeda dari halaman saat ini. Ini berarti ketika pengguna mengklik tautan ini, halaman yang berbeda dengan halaman saat ini akan dimuat pada browser. Tautan eksternal biasanya digunakan untuk mengarahkan pengguna ke situs web lain yang terkait dengan topik yang sama atau sumber daya lain di web yang berguna untuk pengguna.
1.3. Tautan Paket / Relative
Tautan paket atau relative merujuk pada halaman web atau sumber daya yang memiliki jalur yang sama atau relatif pada server yang sama dengan halaman saat ini. Ini berarti ketika pengguna mengklik tautan seperti itu, halaman lain atau sumber daya yang terkait akan dimuat pada browser. Tautan paket biasanya digunakan untuk mengarahkan pengguna ke halaman lain atau sumber daya dalam direktori atau folder yang sama pada server.
2. Atribut Tautan
Berikut adalah atribut yang paling umum digunakan pada tag a:
- href : The URL of the page the link goes to
- target : Where to open the linked URL, bisa di-set menjadi “_blank” untuk membuka halaman di tab berbeda
- title : Descriptive text to display in a popup when hovering over the link
2.1. Atribut Href
Atribut href pada tag <a> harus digunakan untuk memberikan alamat URL ke halaman atau sumber daya lain. Dalam kasus tautan internal, URL bisa dalam bentuk path relatif ke halaman web lain atau sumber daya server. Ini adalah atribut yang paling penting, karena menghubungkan dua halaman web atau sumber daya yang berbeda.
2.2. Atribut Target
Atribut target pada tag <a> menentukan di mana halaman web baru akan dimuat ketika pengguna mengklik tautan. Biasanya, target yang paling banyak digunakan adalah “_blank”. Jika target ini digunakan, ketika pengguna mengklik tautan, halaman akan dimuat pada tab baru dalam browser. Sebagai contoh, langkah-langkahnya seperti ini:
<a href=”https://example.com” target=”_blank”>Klik disini</a>
2.3. Atribut Title
Atribut title pada tag <a> Memberikan deskripsi yang merinci informasi terkait dengan tautan tertentu. Ketika pengguna mengarahkan kursor pada tautan, deskripsi tersebut akan tampil.
3. Tautan dalam Dokumen
Tautan internal pada halaman web biasanya digunakan untuk mengarahkan pengguna ke bagian tertentu di dalam halaman yang sama atau ke halaman lain pada situs web yang sama. Ini sangat berguna jika ada banyak informasi pada halaman yang sama dan pengguna ingin melompat ke bagian tertentu di dalamnya. Untuk membuat tautan internal pada halaman web, file html harus diberikan ID untuk elemen tertentu.
Contoh:
HTML:
<h2 id=”section-one”>Section One</h2>
<h2 id=”section-two”>Section Two</h2>
<p>This is section one. </p>
<p>This is section two. </p>
Tautan untuk mengarahkan ke elemen tersebut :
<a href=”#section-one”>Go to Section One</a>
<a href=”#section-two”>Go to Section Two</a>
4. Styling Tautan
Tautan atau link di html dapat disesuaikan dengan CSS. Ini memungkinkan penulis untuk memodifikasi tampilan tautan sesuai dengan kebutuhan desain mereka.
Contoh:
<style>
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
Ini akan memberikan tampilan tautan di mana teks tautan akan berwarna biru dan kalau hover pada tautan maka teks tersebut akan berubah warna menjadi merah.
5. Link Bekerja Dengan JavaScript
Tautan bisa dikombinasikan dengan JavaScript untuk memberikan pengalaman pengguna yang lebih interaktif pada halaman web. Penggunaan JavaScript pada tautan biasanya untuk pengujian fungsi pada tautan, true dan false pada tautan, dan juga untuk mengirim data pada halaman web.
Contoh :
<input type=”button” value=”Go to Google” onclick=”document.location.href=’http://www.google.com'” />
Demikianlah artikel tentang Tautan atau link ke halaman lain di html. Kita telah membahas tentang jenis-jenis link, atribut link, tautan dalam dokumen, tautan di css, dan tautan bekerja dengan JavaScript. Semoga bermanfaat bagi pembaca.
Jelaskan Macam Macam Jurnal Khusus
Apa Sih PCB Itu? Mengenal Pengertian dan Kepanjangan dari PCB
Strategi Menarik dalam Pembelajaran PJOK untuk Kelas 3 SD Semester 2
