Halo teman-teman, pada postingan kali ini kita akan membahas tentang Semantic Tag yang terdapat pada HTML 5. Masihkah kalian ingat apa itu HTML? Iya, HTML atau Hypertext Markup Language adalah bahasa markup yang digunakan dalam membangun halaman website. HTML menjadi komponen mendasar dalam membuat web karena HTML berfungsi untuk mendeskripsikan dan mendefinisikan struktur konten dari halaman web yang kemudian ditampilkan ke browser.
Setelah kita mengingat kembali tentang HTML mari kita melangkah ke pembahasan mengenai semantic tag. Apa itu semantic tag? Bila diartikan per kata semantic memiliki makna "arti" bisa juga "makna" sedangkan tag adalah "tanda". Jadi semantic tag dapat didefinisikan sebagai tanda/tag dalam HTML yang memiliki arti sesuai dengan kegunaannya. Berikut ini adalah beberapa semantic tag yang perlu kita ketahui:
<article> |
Mendefinisikan sebuah artikel |
<aside> |
Mendefinisikan konten selain dari konten halaman |
<details> |
Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan |
<figcaption> |
Mendefinisikan sebuah caption untuk <figure> elemen |
<figure> |
Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll |
<footer> |
Mendefinisikan footer untuk dokumen atau bagian |
<header> |
Menentukan header untuk dokumen atau bagian |
<main> |
Menentukan isi utama dokumen |
<mark> |
Mendefinisikan ditandai atau teks yang disorot |
<nav> |
Mendefinisikan link navigasi |
<section> |
Mendefinisikan sebuah bagian dalam sebuah dokumen |
<summary> |
Mendefinisikan sebuah judul terlihat untuk <details> elemen |
<time> |
Mendefinisikan tanggal/waktu |
Untuk memahaminya lebih dalam mari kita buat sebuah project website sederhana dengan langkah-langkah sebagai berikut:
- Buat folder baru dengan nama ekstraWeb.
- Buka text editor (saya menggunakan atom text editor)
- Klik File pilih Open Folder
- Arahkan ke folder ekstraWeb dan klik Select Folder
- Setelah itu muncul tab Project di sebelah kiri layar
- Klik kanan pada ekstraWeb di tab Project, pilih New File
- Masukkan nama file index.html
- Setelah itu ketikkan kode berikut
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sejarah</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Bagian Header -->
<header>
<div class="jumbotron">
<h1>Sejarah</h1>
<h4>Jangan sekali-kali melupakan sejarah</h4>
</div>
<nav>
<ul>
<li><a href="#irsoekarno">Ir.Soekarno</a></li>
<li><a href="#kehidupan">Kehidupan</a></li>
<li><a href="#kiprahpolitik">Kiprah Politik</a></li>
</ul>
</nav>
</header>
<!-- Bagian main -->
<main>
<article id="irsoekarno" class="card">
<h3>Ir. Soekarno</h3>
<figure>
<img src="Presiden_soekarno.png" alt="Photo Ir. Soekarno">
<figcaption>Photo Ir. Soekarno</figcaption>
</figure>
<p>Dr. Ir. H. Soekarno adalah Presiden pertama Republik Indonesia yang menjabat pada periode 1945–1967. Ia memainkan peranan penting dalam memerdekakan bangsa Indonesia dari penjajahan Belanda. Ia adalah Proklamator Kemerdekaan Indonesia yang terjadi pada tanggal 17 Agustus 1945.... </p>
</article>
<article id="kehidupan" class="card">
<h3>Kehidupan</h3>
<p>Soekarno dilahirkan dengan seorang ayah yang bernama Raden Soekemi Sosrodihardjo dan ibunya yaitu Ida Ayu Nyoman Rai. Keduanya bertemu ketika Raden Soekemi yang merupakan seorang guru ditempatkan di Sekolah Dasar Pribumi di Singaraja, Bali. Nyoman Rai merupakan keturunan bangsawan dari Bali dan beragama Hindu, sedangkan Raden Soekemi sendiri beragama Islam. Mereka telah memiliki seorang putri yang bernama Sukarmini sebelum Soekarno lahir. Ketika kecil Soekarno tinggal bersama kakeknya, Raden Hardjokromo di Tulung Agung, Jawa Timur....</p>
</article>
<article id="kiprahpolitik" class="card">
<h3>Kiprah Politik</h3>
<p>Soekarno untuk pertama kalinya menjadi terkenal ketika dia menjadi anggota Jong Java cabang Surabaya pada tahun 1915. Bagi Soekarno sifat organisasi tersebut yang Jawa-sentris dan hanya memikirkan kebudayaan saja merupakan tantangan tersendiri. Dalam rapat pleno tahunan yang diadakan Jong Java cabang Surabaya Soekarno menggemparkan sidang dengan berpidato menggunakan bahasa Jawa ngoko (kasar). Sebulan kemudian dia mencetuskan perdebatan sengit dengan menganjurkan agar surat kabar Jong Java diterbitkan dalam bahasa Melayu saja, dan bukan dalam bahasa Belanda....</p>
</article>
</main>
<!-- Bagian Footer -->
<footer>
Deptics © 2020
</footer>
</body>
</html>- Kemudian buat file baru dengan cara klik kanan ekstraWeb pad tab Project
- Masukkan nama file styles.css
- Lalu ketikkan kode berikut
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.jumbotron {
padding: 60px;
color: white;
text-align: center;
background-image: linear-gradient(#bf7ca7, #444278);
font-size: 20px;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
border: 1px solid white;
border-radius: 4px;
padding: 8px;
margin-right: 8px;
}
nav li:hover a {
color: black;
font-weight: bold;
}
nav li:hover {
background-color: white;
}
nav a {
text-decoration: none;
color: white;
font-size: 18px;
}
nav {
background-color: #f64a8c;
margin: 0;
padding: 2px;
}
main {
padding: 20px;
}
img {
display: block;
max-height: 300px;
margin: 0 auto 0 auto;
}
figcaption {
text-align: center;
}
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 4px;
padding: 20px;
margin-top: 20px;
}
footer {
background-color: #f64a8c;
padding: 10px;
color: white;
text-align: center;
font-size: 18px;
}Pada file index.html masih ada kode yang perlu disesuaikan tepatnya pada kode berikut
<img src="Presiden_soekarno.png" alt="Photo Ir. Soekarno">Silahkan kalian ubah value dari atribut src dengan nama gambar kalian. Lalu pastikan gambar tersebut berada satu folder dengan file index.html yaitu tepatnya berada di folder ekstraWeb.
Selanjutnya buka folder ekstraWeb dan cari file index.html, klik kanan Open With pilih browser yang kalian suka (Firefox, Chrome, Opera, dll) .
Berikut ini adalah tampilan hasil dari project di atas
Untuk menambah pemahaman tentang semantic tag HTML5, kalian bisa lihat video berikut
Demikian postingan kali ini semoga bermanfaat. Bila ada pertanyaan maupun kritik atau saran yang membangun silahkan komen di bawah.
0 Komentar