Modul 3: More About HTML
Daftar Isi :- Atribut HTML
- Paragraf
- Heading
- List
- Menambahkan List pada Halaman Profil
- Gambar
- Menambahkan Gambar pada Halaman Profil
- Teks Terformat
- Inline Formatting Text - Bagian 1
- Inline Formatting Text - Bagian 2
- Menerapkan Anchor pada Navigasi Halaman Profil
- Semantic HTML - Mengorganisasikan Halaman Konten
- Header, Footer, dan Nav
- Articles, Aside, dan Section
- Generic Element
- Mengorganisasikan Konten pada Halaman Profil
- Menetapkan Elemen Header, Main, dan Footer
- Menggunakan Div, Aside, Article, dan Section pada Konten
- Table
- Struktur Dasar Sebuah Tabel
- Spanning Cell
- Elemen dan Atribut pada Tabel
- Menerapkan Elemen Tabel pada Halaman Profil
- Special Character
Silakan buka kembali berkas index.html pada text editor. Tambahkan elemen anchor di setiap item list.
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Geografis</a></li>
<li><a href="#">Wisata</a></li>
</ul>
Setelah menambahkan elemen anchor pada item list, maka tampilan item list akan nampak menjadi hyperlink.
Namun ketika salah satu item dipilih, tidak akan terjadi apa apa, karena pada atribut href kita belum menetapkan sebuah target. Nilai href dapat berupa sebuah URL untuk mengarahkan ke sebuah halaman yang berbeda. Selain itu juga berupa tanda pagar (#) diikuti dengan id elemen untuk mengarahkan tampilan pada elemen sesuai id yang ditentukan (masih dalam satu halaman).
Maka dari itu, mari kita berikan atribut id pada sebuah elemen yang akan menjadi target navigasi. Berikan atribut id pada seluruh elemen <h2> dengan id sesuai dengan kontennya.
<body>
.......
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Geografis</a></li>
<li><a href="#">Wisata</a></li>
</ul>
<h2 id="sejarah">Sejarah</h2>
.......
<h2 id="geografis">Geografis</h2>
.......
<h2 id="wisata">Wisata</h2>
.......
</body>
Kemudian tuliskan juga id elemen target setelah tanda pagar (#) pada tiap elemen anchor yang terdapat pada item list.
<body>
.......
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
<h2 id="sejarah">Sejarah</h2>
.......
<h2 id="geografis">Geografis</h2>
.......
<h2 id="wisata">Wisata</h2>
.......
</body>
Setelah menuliskan id elemen pada target anchor, maka hypertext di navigasi sudah dapat digunakan.
Seperti yang sudah disebutkan pada modul sebelumnya, sebuah website memiliki hierarki konten yang sama seperti dokumen sehari-hari yang kita baca, misalnya seperti majalah, dan koran. Sehingga, hierarki pada sebuah website merupakan hal yang penting. Namun, tentu saja elemen yang terdapat pada HTML perlu kita kelompokkan menjadi beberapa bagian.
Sebelum HTML5, kita mengelompokan suatu elemen HTML yang memiliki konten serupa dalam sebuah generic element <div> (kita akan membahas div secara dalam nanti). Kita mengelompokkan sebuah header website dengan menggunakan <div>, membuat sebuah navigation dengan menggunakan <div> juga, artikel atau section yang lainnya. Kita biasa gunakan atribut class atau id untuk mengindikasikan peran dari elemen tersebut. Hal ini membuat struktur pada website hilang (semantic meaningless).
Pada HTML5 kita dikenalkan pada beberapa elemen yang dapat digunakan dalam mengelompokkan sebuah elemen dengan lebih jelas dan memiliki arti (semantic HTML). Elemen-elemen ini memiliki nama sesuai dengan fungsi atau peran dari elemen tersebut.
Kedua contoh gambar di atas menunjukkan struktur halaman yang sama. Di mana, pada contoh yang pertama banyak elemen <div> yang dapat diubah dengan layout elemen HTML5.
Mari kita bahas satu per satu elemennya.
13. Header dan FooterElemen ini dapat kita gunakan untuk:
- Sebuah header dan footer utama yang muncul pada awal dan akhir di sebuah halaman <body>.
- Header digunakan sebagai pengantar atau pembuka konten dalam sebuah elemen <article> atau <section>.
Footer digunakan sebagai catatan kaki pada sebuah elemen <article> atau <section>.
Pada contoh dibawah ini elemen <header> digunakan untuk menampilkan nama situs dan navigasi utama.
<header>
<h1>Bandung</h1>
<p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
Dan elemen <footer> digunakan sebagai informasi hak cipta.
<article>
<header>
<h1>Judul Artikel</h1>
<h2>Oleh: Dicoding Indonesia</h2>
</header>
<p>....... Konten artikel dimulai dari sini ......</p>
<footer>
<p>Bagikan artikel ini melalui</p>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>......</li>
</ul>
</footer>
</article>
Perlu kita ketahui bahwa elemen <header> dan <footer> tidak boleh ditulis di dalam elemen <header> dan <footer> lainnya (bertumpuk/nested).
Nav
Elemen <nav> digunakan untuk menampung sebuah navigasi yang sifatnya penting (major), contohnya navigasi utama pada sebuah website.
Tapi tidak menjamin pada sebuah website hanya ada satu navigasi. Contohnya, sebuah akhir artikel pada blog terdapat tautan navigasi menuju artikel yang dianggap relevan dengan artikel yang telah kita baca. Navigasi tersebut tidak dianggap sebagai navigasi yang penting, sehingga kita tidak perlu menggunakan elemen <nav> untuk menampilkannya.
Pada pembahasan header dan footer, kita sudah melihat contoh penggunaan dari elemen <nav> yang diletakkan pada elemen <header>.
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>Sebuah navigation pada dasarnya sangat berguna untuk aksesibilitas website kita. Contohnya ketika pengguna website kita menggunakan screen reader dalam mengunjungi website, pengguna akan mudah mencari bagian yang dia inginkan tanpa harus menelusuri seluruh konten website.
14. Articles
Elemen <article> bertindak sebagai container untuk independen konten pada sebuah halaman, artinya konten utuh yang tidak terkait dengan konten lain. Bisa saja konten yang dimasud berupa artikel blog, komentar, forum post, dan konten lainnya.
Jika sebuah halaman terdapat beberapa artikel, maka tiap artikel tersebut seharusnya berada pada elemen article-nya masing-masing.
<article>
<h2>Sejarah</h2>
<img src="img/history.jpg">
<p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava
Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>
</article>
<article>
<h2>Geografis</h2>
<img src="img/geografis.jpg">
<p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok
raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat..</p>
</article>
<article>
<h2>Wisata</h2>
<img src="img/farm-house.jpg">
<p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan
akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya...</p>
</article>
Elemen <article> dapat berada pada elemen <article> lainnya (nested) selama artikel tersebut berkaitan dengan induk elemen <article> yang menampungnya.
Aside
Elemen <aside> memiliki dua tujuan, tergantung kita menempatkannya di dalam sebuah elemen <article> atau tidak.
Ketika elemen ini ditempatkan di dalam elemen <article>, pada elemen ini dapat berisikan informasi yang berhubungan dengan artikel tersebut, tetapi bukan bagian dari konten artikelnya itu sendiri (dipisahkan dari konten utama).
Ketika elemen ini ditempatkan di luar dari elemen <article>, pada elemen ini dapat berisikan informasi yang berhubungan pada keseluruhan halaman.
Elemen <aside> biasanya terletak di samping dari sebuah elemen yang menampungnya.
<main>
<article>
......
</article>
<aside>
<article>
<header>
<h2>Kota Bandung</h2>
<p>Kota Kembang Paris van Java</p>
<figure>
<img src="img/bandung-badge.png">
<figcaption>Lambang</figcaption>
</figure>
</header>
</article>
</aside>
</main>Section
Sebuah elemen yang memiliki kesamaan konten dan memiliki sebuah heading di dalamnya dapat dikelompokkan dengan menggunakan elemen <section>. Dengan begitu elemen ini dapat digunakan pada sebuah elemen <article> yang memiliki konten panjang dan berpotensi untuk dikelompokkan.
Di dalam sebuah <section> sebaiknya terdapat elemen heading (h1 - h6), yang menjadi elemen pertama yang dituliskan pada sebuah section untuk menunjukkan judul atau tema dari bagian konten yang dikelompokkan.
<article>
<section>
<h2 >Wisata</h2>
<p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan
akhir
pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja,
kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.</p>
</section>
<section>
<h3>Farm House Lembang</h3>
<img src="img/farm-house.jpg">
<p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok
raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada
ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan
ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan
ketinggian 675 meter di atas permukaan laut.</p>
</section>
<section>
<h3>Observatorium Bosscha</h3>
<img src="img/bosscha.jpg">
<p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk
meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut
harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapa pun, tanpa tiket. Namun, bagi yang ingin
menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan
jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.
</p>
</section>
</article>15. Generic Element
Setelah mengenal beberapa elemen yang ada, bagaimana jika tidak terdapat elemen sesuai yang mampu menggambarkan konten kita? Dalam dunia nyata, jenis informasi sangat beragam dan mungkin tidak semua semantik elemen yang kalian ketahui dapat menggambarkan jenis informasinya. Untungnya, HTML menyediakan dua tipe elemen umum (generic element) yang bisa kita kustomisasi untuk menggambarkan konten kita dengan tepat.
Terdapat dua generic elemen yang dapat kita manfaatkan.
Div
Yang pertama elemen <div>, elemen ini merupakan sebuah wadah (container) yang bersifat umum untuk menampung beberapa konten. Elemen ini tidak akan memberikan efek apapun pada konten atau layout sebelum menerapkan sebuah style menggunakan CSS.
Sebagai sebuah wadah yang murni, elemen <div> tidak merepresentasikan apapun. Elemen ini lebih sering digunakan untuk mengelompokkan sebuah konten sehingga dapat memudahkan styling dengan menggunakan atribut class atau id.
<!DOCTYPE html>
<html>
<head>
<title>Div Element</title>
<style>
.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
</style>
</head>
<body>
<div class="shadowbox">
<p>Paragraf ini berada di dalam elemen div, namun akan ditampilkan sama seperti paragraf biasanya. Elemen ini lebih sering digunakan untuk mengelompokkan sebuah konten sehingga dapat memudahkan styling dengan menggunakan atribut class atau id.
</p>
</div>
</body>
</html>
Nah, jika kita menerapkan styling seperti di atas, maka akan terlihat efek dari penggunaan div ini.
Span
Yang kedua elemen <span>, elemen ini memberikan manfaat yang sama seperti <div>, bedanya elemen ini digunakan sebagai phrase elements dan tidak terdapat line breaks ketika menggunakannya. Sederhananya, <span> merupakan sebuah <div> yang digunakan dalam sebuah baris teks yang dapat diwadahi oleh paragraf, list, heading atau lainnya.
Mari kita ambil contoh. Tidak ada elemen pada inline element yang memiliki arti untuk menampung sebuah informasi telepon. Maka dari itu, tiap item pada nomor telepon bisa ditampung dalam elemen <span> dan diklasifikasikan (menggunakan atribut class) dengan nilai “phone”.
<ul> <li>Agil: <span class="phone">08123xxx</span></li> <li>Widy: <span class="phone">08222xxx</span></li> <li>Gilang: <span class="phone">08333xxx</span></li> </ul>
Dengan menggunakan elemen <span>, kita dapat menentukan sebuah styling pada teks tersebut.
<style>
.phone {
font-weight: bold;
}
</style>
<ul>
<li>Agil: <span class="phone">08123xxx</span></li>
<li>Widy: <span class="phone">08222xxx</span></li>
<li>Gilang: <span class="phone">08333xxx</span></li>
</ul>
Jika kita coba lihat pada browser, akan tampak seperti ini:
Contoh lainnya, kita juga bisa gunakan elemen <span> dalam sebuah paragraf.
<style>
.bahan {
color: red;
}
</style>
<p>Untuk membuat sebuah bakso kita membutuhkan <span class="bahan">daging sapi</span>, <span
class="bahan">tepung tapioka</span>, <span class="bahan">bawang merah</span> dan <span class="bahan">bawang
putih</span> kemudian satu sendok makan <span class="bahan">gula</span> dan <span class="bahan">garam.</span></p>
Jika kita coba lihat pada browser, akan tampak seperti ini:
Kita sudah mengenal beberapa elemen yang digunakan untuk mengorganisasikan halaman, seperti <header>, <footer>, <article>, dan yang lainnya. Dan juga kita sudah mengenal generic elemen yang digunakan untuk mengelompokkan elemen secara umum. Sekarang saatnya kita mengorganisasikan pada halaman profil yang sudah kita buat sebelumnya.
Sebelum mengorganisasikan konten, mari kita tambahkan sebuah konten untuk diterapkan pada elemen <aside> nantinya. Unduh terlebih dahulu aset gambar yang akan digunakan pada tautan berikut: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Bandung_coa.png/279px-Bandung_coa.png
Simpanlah gambar tersebut pada folder assets -> images bersama dengan empat gambar yang lain dan beri nama bandung-badge.png.
Kemudian tuliskan konten berikut di dalam elemen <body> (tuliskan tepat sebelum penutup tag </body>).
<body>
.......
<h2>Kota Bandung</h2>
<p>Kota Kembang Paris van Java</p>
<figure>
<img src="assets/image/bandung-badge.png">
<figcaption>Lambang</figcaption>
</figure>
</body>
Tuliskan juga konten copyright berikut tepat setelah tag penutup </figure>.
<body> ....... </figure> <p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p> </body>
Setelah menambahkan beberapa konten tersebut, mari saatnya kita organisasikan konten-konten yang ada agar dapat tercipta struktur halaman yang baik.
Mari kita buat konten yang berada pada body menjadi tiga bagian besar yaitu heading, main dan footer. Kelompokkan konten judul besar dan navigasi menggunakan elemen <header>.
<body>
<header>
<h1>Bandung</h1>
<p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</header>
.......
</body>
Sebelumnya, kita mengetahui bahwa elemen list yang dibuat nantinya akan dijadikan sebuah navigasi, maka di dalam elemen header ini, kita tambahkan elemen <nav> untuk membungkus elemen list.
<body>
<header>
<h1>Bandung</h1>
<p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
.....
</body>
Kemudian pada konten copyright (konten paragraf paling akhir pada sebuah body) yang kita tambahkan sebelumnya, masukkan konten tersebut ke dalam elemen <footer>.
<body>
....
<footer>
<p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p>
</footer>
</body>
Terakhir, kelompokkan seluruh konten yang terdapat di antara elemen <header> dan elemen <footer> dengan menggunakan elemen <main>.
<body>
<header>
......
</header>
<main>
<h2 id="sejarah">Sejarah</h2>
<img src="assets/image/history.jpg" alt="sejarah">
<p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava Gunung
Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di
Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang
diikat
berdampingan yang disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk
melayari Ci Tarum dalam mencari tempat kedudukan kabupaten yang baru untuk
menggantikan ibu kota yang lama di Dayeuhkolot. </p>
<p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang
merupakan
kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau
bersaksi.
Banda adalah segala sesuatu yang berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun
benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi
tempat Banda berada.</p>
<h2 id="geografis">Geografis</h2>
<img src="assets/image/geografis.jpg" alt="geografis">
<p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok
raksasa,[9] secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada
ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan
ketinggian
1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter
di
atas permukaan laut.</p>
<p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak
sungainya
yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citarum. Dengan kondisi yang
demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.</p>
<h2 id="wisata">Wisata</h2>
<p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir
pekan
terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja,
kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.</p>
<h3>Farm House Lembang</h3>
<img src="assets/image/farm-house.jpg" alt="farm house">
<p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung.
Selain
karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan
dalam
bentuk spot swafoto Instagramable.</p>
<h3>Observatorium Bosscha</h3>
<img src="assets/image/bosscha.jpg" alt="bosscha">
<p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
Cassegrain
GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang.
Benda
ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut harus dibuka. Observatorium
Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin
menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan
jadwal
hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.</p>
<h2>Kota Bandung</h2>
<p>Kota Kembang Paris van Java</p>
<figure>
<img src="assets/image/bandung-badge.png">
<figcaption>Lambang</figcaption>
</figure>
</main>
<footer>
........
</footer>
</body>
Maka struktur body pada HTML menjadi seperti ini:
Kita sudah membagi konten pada elemen <body> secara besar menjadi tiga bagian. Tetapi belum sampai disitu, pada salah satu bagiannya yaitu pada elemen <main>, masih terdapat konten yang dapat kita kelompokan. Di sini kita akan menerapkan generic elemen seperti <div> dan semantic elemen lainnya seperti <aside>, <article>, dan <section> dalam mengelompokkan elemennya.
Dimulai dari hierarki teratas, dalam elemen <main> kita bagi konten menjadi dua bagian, yang pertama sebuah konten utama yang dikelompokan menggunakan <div> dan konten samping yang dikelompokkan menggunakan <aside>.
<main>
<div>
<h2 id="sejarah">Sejarah</h2>
<img src="assets/image/history.jpg" alt="sejarah">
<p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari tempat kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama di Dayeuhkolot. </p>
<p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda berada.</p>
<h2 id="geografis">Geografis</h2>
<img src="assets/image/geografis.jpg" alt="geografis">
<p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa, secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter di atas permukaan laut.</p>
<p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citarum. Dengan kondisi yangdemikian, Bandung selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.</p>
<h2 id="wisata">Wisata</h2>
<p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.
</p>
<h3>Farm House Lembang</h3>
<img src="assets/image/farm-house.jpg" alt="farm house">
<p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable.</p>
<h3>Observatorium Bosscha</h3>
<img src="assets/image/bosscha.jpg" alt="bosscha">
<p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.</p>
</div>
<aside>
<h2>Kota Bandung</h2>
<p>Kota Kembang Paris van Java</p>
<figure>
<img src="assets/image/badung-badge.png">
<figcaption>Lambang</figcaption>
</figure>
</aside>
</main>
Dengan begitu, konten elemen <main> terbagi menjadi dua, yaitu elemen <div> dan <aside>. Selanjutnya, kita mulai kelompokkan konten lebih detail lagi pada elemen <div>.
Kita bisa lihat, di dalam elemen <div> terdapat konten yang dapat digolongkan sebagai artikel. Artikel pertama memuat konten mengenai sejarah, yang kedua mengenai geografi dan selanjutnya mengenai wisata. Dengan hasil identifikasi tersebut, maka kita memerlukan tiga buah elemen <article> untuk mengelompokkan masing-masing konten yang terkait. Masing-masing elemen <article> akan terdiri dari heading, gambar dan paragraf.
<div>
<article>
<h2 id="sejarah">Sejarah</h2>
<img src="assets/image/history.jpg" alt="sejarah">
<p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari tempat kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama di Dayeuhkolot. </p>
<p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda berada.</p>
</article>
<article>
<h2 id="geografis">Geografis</h2>
<img src="assets/image/geografis.jpg" alt="geografis">
<p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa,secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter di atas permukaan laut.</p>
<p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citarum. Dengan kondisi yang demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.</p>
</article>
<article>
<h2 id="wisata">Wisata</h2>
<p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.</p>
<h3>Farm House Lembang</h3>
<img src="assets/image/farm-house.jpg" alt="farm house">
<p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable.</p>
<h3>Observatorium Bosscha</h3>
<img src="assets/image/bosscha.jpg" alt="bosscha">
<p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.</p>
</article>
</div>
Coba kita lihat pada elemen <article> terakhir, konten tersebut memiliki subjudul lainnya yaitu membahas tentang wisata Farm House dan Observatorium Bosscha. Maka pada konten ini kita dapat mengelompokkan juga subjudul beserta kontennya dengan menggunakan elemen <section>. Sehingga seluruh konten yang berada pada elemen <div> memiliki struktur seperti ini:
<div>
<article>
<h2 id="sejarah">Sejarah</h2>
<img src="assets/image/history.jpg" alt="sejarah">
<p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di
Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari tempat kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama di Dayeuhkolot. </p>
<p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda berada.</p>
</article>
<article>
<h2 id="geografis">Geografis</h2>
<img src="assets/image/geografis.jpg" alt="geografis">
<p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa, secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter di atas permukaan laut.</p>
<p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citarum. Dengan kondisi yang demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.</p>
</article>
<article>
<h2 id="wisata">Wisata</h2>
<p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.</p>
<section>
<h3>Farm House Lembang</h3>
<img src="assets/image/farm-house.jpg" alt="farm house">
<p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable.</p>
</section>
<section>
<h3>Observatorium Bosscha</h3>
<img src="assets/image/bosscha.jpg" alt="bosscha">
<p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.</p>
</section>
</article>
</div>
Sebelumnya, kita sudah menetapkan atribut id pada elemen heading untuk dijadikan target navigasi, setelah mengorganisasikan konten seperti ini, pindahkan atribut id dari heading ke elemen <article> yang membungkus konten tersebut. Karena elemen <article> lebih menunjukkan keseluruhan dari konten artikelnya.
Kemudian pada elemen <div> kita juga bisa tambahkan atribut id dan beri nilai “content.” Hal ini nantinya akan digunakan dalam membantu penyusunan tata letak (layouting) menggunakan CSS.
<div id="content">
<article id="sejarah">
<h2>Sejarah</h2>
<img src="assets/image/history.jpg" alt="sejarah">
<p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua di Bandung mengatakan bahwa nama Bandung diambil dari sebuah kendaraan air yang terdiri dari dua perahu yang diikat berdampingan yang disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A. Wiranatakusumah II,
untuk melayari Ci Tarum dalam mencari tempat kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama di Dayeuhkolot. </p>
<p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda berada.</p>
</article>
<article id="geografis">
<h2>Geografis</h2>
<img src="assets/image/geografis.jpg" alt="geografis">
<p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa, secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat, serta berada pada ketinggian ±768 m di atas permukaan laut, dengan titik tertinggi di berada di sebelah utara dengan ketinggian 1.050 meter di atas permukaan laut dan sebelah selatan merupakan kawasan rendah dengan ketinggian 675 meter di atas permukaan laut.</p>
<p>Kota Bandung dialiri dua sungai utama, yaitu Sungai Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada umumnya mengalir ke arah selatan dan bertemu di Sungai Citarum. Dengan kondisi yang demikian, Bandung selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.</p>
</article>
<article id="wisata">
<h2>Wisata</h2>
<p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir pekan terutama dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar bangunan lama berarsitektur peninggalan Belanda.</p>
<section>
<h3>Farm House Lembang</h3>
<img src="assets/image/farm-house.jpg" alt="farm house">
<p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung. Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam bentuk spot swafoto Instagramable.</p>
</section>
<section>
<h3>Observatorium Bosscha</h3>
<img src="assets/image/bosscha.jpg" alt="bosscha">
<p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar untuk meneropong bintang. Benda ini diletakkan pada atap kubah sehingga saat teropong digunakan, atap tersebut harus dibuka. Observatorium Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap hari Sabtu.</p>
</section>
</article>
</div>
Selanjutnya kita perhatikan konten yang berada pada elemen <aside>. Konten ini tidak terlalu kompleks seperti pada elemen <div>. Sehingga saat ini, kita cukup mengelompokkan dengan menggunakan satu elemen <article>.
<aside>
<article>
<h2>Kota Bandung</h2>
<p>Kota Kembang Paris van Java</p>
<figure>
<img src="assets/image/badung-badge.png">
<figcaption>Lambang</figcaption>
</figure>
</article>
</aside>
Good job! Sekarang konten sudah terorganisir dengan baik. Sampai sejauh ini, struktur pada elemen <main> akan nampak seperti diagram berikut:
Ada beberapa jenis informasi yang perlu ditampilkan dalam bentuk tabel, contohnya klasmen olahraga atau sebuah jadwal layaknya kalender. Ketika kita membuat sebuah tabel, pastinya kita akan banyak bermain dengan baris dan kolom. Pada materi ini kita akan belajar bagaimana cara membuat dan mengorganisir sebuah tabel pada HTML.
Tapi sebelum itu, apa sih sebenarnya tabel dalam HTML itu? Elemen <table> pada HTML merepresentasikan data tabular atau informasi yang disajikan dalam sebuah tabel. Tabel sendiri disajikan dalam dua dimensi yang terdiri dari baris dan kolom (cell) yang berisikan sebuah data. Berikut contoh data sepakbola yang disajikan dalam bentuk tabel.
wikipedia.org
20. Struktur Dasar Sebuah TabelTabel pada HTML disusun dari tiga buah elemen, yaitu <table>, <tr> ,dan <td> atau <th>. Elemen <table> digunakan untuk menandakan dimulai dan diakhirinya sebuah konten tabel dan juga sebagai wadah untuk tabel itu sendiri. Kemudian, elemen <tr> digunakan untuk membuat sebuah baris baru yang di dalamnya terdapat elemen <td> atau <th> sehingga menghasilkan sebuah cell.
Elemen <td> yang berarti “table data” selain membuat cell elemen ini juga merupakan tempat di mana data pada tabel ditampung. Selanjutnya untuk elemen <th> atau “table header” digunakan untuk menentukan sebuah header pada kolom datanya. Untuk lebih jelasnya perhatikan ilustrasi berikut:
Cukup mudah, kan? Sekarang mari kita ubah menjadi penerapan elemen HTML.
Berdasarkan ilustrasi di atas, kita dapat menuliskan sebuah struktur dasar tabel pada HTML seperti berikut:
<h1>Pemenang Piala Dunia tiga tahun terakhir</h1>
<table>
<tr>
<th>Tahun</th>
<th>Juara 1</th>
<th>Juara 2</th>
<th>Juara 3</th>
</tr>
<tr>
<td>2018</td>
<td>Prancis</td>
<td>Kroasia</td>
<td>Belgium</td>
</tr>
<tr>
<td>2014</td>
<td>Jerman</td>
<td>Argentina</td>
<td>Belanda</td>
</tr>
<tr>
<td>2010</td>
<td>Spanyol</td>
<td>Belanda</td>
<td>Jerman</td>
</tr>
</table>
Jika dibuka pada browser, maka akan tampak seperti ini:
Perlu kita ingat, bahwa seluruh konten atau data dituliskan pada elemen <td> ataupun <th>. Kita bisa memberikan konten apa saja di dalamnya seperti teks, gambar, atau tabel lainnya.
Terkadang kita membutuhkan sebuah sel yang mencakup untuk dua kolom ataupun dua baris sekaligus. Dalam aplikasi seperti Microsoft Word, hal ini biasa kita kenal sebagai merging cell atau menggabungkan sebuah sel. Ini memang menjadi sebuah fitur dasar dalam membuat sebuah tabel. Sehingga, pada HTML pun kita dapat melakukan hal tersebut.
Pada HTML hal ini lebih dikenal sebagai Spanning cell yang artinya menjangkau atau merentangkan sebuah ukuran sel lebih dari ukuran yang biasanya. Dengan spanning cell kita dapat membuat sebuah tabel yang lebih kompleks, tetapi akan membuat markup yang kita tulis menjadi sedikit sulit dibaca.
Column Spans
Untuk merentangkan sebuah kolom (column spanning) kita bisa menggunakan atribut colspan pada elemen <td> atau <th>. Berikut contoh untuk penggunaan colspan sehingga sebuah header mencangkup dua kolom.
<table>
<tr>
<th>18:00</th>
<th>19:00</th>
<th>20:00</th>
</tr>
<tr>
<td colspan="2">Avenger Infinity Wars</td>
<td>It Chapter 2</td>
</tr>
<tr>
<td>One Piece: Stampede</td>
<td>Weathering With You</td>
<td>Gundala</td>
</tr>
<tr>
<td>Gundala</td>
<td colspan="2">Avenger Infinity Wars</td>
</tr>
</table>
Maka sebuah elemen yang menggunakan atribut colspan akan mencakup ruang kolom sesuai nilai dari atribut itu sendiri.
Untuk lebih jelasnya, kita bisa tambahkan atribut border pada elemen <table> agar terdapat garis pada tepi selnya.
<table border="1">
<tr>
<th>18:00</th>
<th>19:00</th>
<th>20:00</th>
</tr>
<tr>
<td colspan="2">Avenger Infinity Wars</td>
<td>It Chapter 2</td>
</tr>
<tr>
<td>One Piece: Stampede</td>
<td>Weathering With You</td>
<td>Gundala</td>
</tr>
<tr>
<td>Gundala</td>
<td colspan="2">Avenger Infinity Wars</td>
</tr>
</table>
Tampilan pada browser:
Row Spans
Untuk merentangkan sebuah baris (row spanning) kita dapat menggunakan atribut rowspan. Sama seperti column spanning, tetapi atribut ini akan merentangkan sebuah sel ke bawah. Berikut contohnya.
<table border="1">
<tr>
<th rowspan="3">18:00</th>
<td>Avenger Infinity Wars</td>
</tr>
<tr>
<td>One Piece: Stampede</td>
</tr>
<tr>
<td>Gundala</td>
</tr>
</table>
Perhatikan elemen <th> yang diberi nilai atribut rowspan. Elemen tersebut berada pada baris pertama dan akan memakan tiga baris ke bawahnya. Jadi pada baris tersebut kita membutuhkan dua buah elemen (<th> dan <td>) dan pada baris selanjutnya (baris dua dan tiga) kita hanya perlu satu buah elemen <td> saja. Sehingga jika dilihat pada browser akan nampak seperti ini:
Sejauh ini, Anda sudah mengetahui penerapan dasar untuk sebuah tabel pada HTML. Sebenarnya masih terdapat beberapa anggota elemen dan atributnya yang dapat digunakan pada tabel. Karena elemen ini jarang digunakan sehingga kita akan mengenal secara ringkas dan merangkumnya dalam sebuah tabel berikut:
Elemen dan Atribut | Description | |
table | Menetapkan elemen tabel. | |
td | Menetapkan sebuah sel dalam baris tabel. | |
colspan=”number” | Jumlah kolom yang dicakup oleh sel. | |
rowspan=”number” | Jumlah baris yang dicakup oleh sel. | |
headers=”nama header” | Mengasosiasikan data sel dengan header. | |
th | Menetapkan header yang terkait dengan baris atau kolom. | |
colspan=”number” | Jumlah kolom dicakup oleh header. | |
rowspan=”number” | Jumlah row yang dicakup oleh header. | |
headers=”nama header” | Mengasosiasikan header dengan header lain. | |
scope=”row|col|rowgroup|colgroup” | Mengasosiasikan header dengan baris, kelompok baris, kolom atau kelompok kolom. | |
tr | Menetapkan sebuah baris pada tabel. | |
caption | Memberikan judul pada sebuah tabel. | |
col | Menetapkan sebuah kolom. | |
colgroup | Menetapkan sebuah kelompok kolom. | |
tbody | Mengidentifikasi sebuah body dalam tabel. | |
tfoot | Mengidentifikasi sebuah footer dalam tabel. | |
thead | Mengidentifikasi sebuah header dalam tabel. | |
Setelah kita mengetahui cara menerapkan tabel pada website, mari kita perkaya kembali konten pada halaman profil, khususnya konten pada elemen <aside> yang sudah kita buat. Kita akan menambahkan detail informasi dari kota Bandung seperti negara luas, bahasa daerah, dan kode telepon.
Tapi sebelum itu mari kita atur kembali struktur elemen yang di dalam elemen <aside> tersebut. Saat ini elemen <aside> memiliki struktur seperti ini:
Karena kita akan menambahkan konten lain, maka kita perlu mengelompokan kembali elemen yang ada di dalam elemen <article>. Kelompokan seluruh elemen yang ada pada elemen <article> saat ini sebagai header, dan buat elemen baru yaitu <section> setara dengan elemen <header> tersebut. Pada elemen <section> ini konten tabel akan ditempatkan. Silakan buka kembali berkas index.html dan sesuaikan struktur elemen <aside> seperti berikut:
<aside>
<article>
<header>
<h2>Kota Bandung</h2>
<p>Kota Kembang Paris van Java</p>
<figure>
<img src="assets/image/bandung-badge.png">
<figcaption>Lambang</figcaption>
</figure>
</header>
<section></section>
</article>
</aside>
Sehingga struktur pada elemen <aside> akan menjadi seperti ini:
Selanjutnya pada elemen <section> kita masukkan konten berikut:
Informasi Lainnya Negara Indonesia Hari jadi 25 September 1810 Luas Total 167.67 km2 Bahasa Daerah Sunda Kode Telepon +62 22
Sesuaikan konten tersebut dengan menerapkan elemen yang sesuai, salah satunya gunakan elemen tabel untuk menampung sebagian kontennya.
<section>
<h3>Informasi Lainnya</h3>
<table>
<tr>
<th>Negara</th>
<td>Indonesia</td>
</tr>
<tr>
<th>Hari jadi</th>
<td>25 September 1810</td>
</tr>
<tr>
<th>Luas Total</th>
<td>167.67 km<sup>2</sup></td>
</tr>
<tr>
<th>Bahasa Daerah</th>
<td>Sunda</td>
</tr>
<tr>
<th>Kode Telepon</th>
<td>+62 22</td>
</tr>
</table>
</section>
Maka pada browser akan tampak seperti gambar berikut:
Terdapat beberapa karakter spesial seperti copyright symbol © yang tidak termasuk ke dalam standar kelompok ASCII characters, di mana ASCII characters hanya menyediakan karakter seperti huruf, nomor, dan beberapa simbol dasar. Karakter lain seperti lebih dari (>) atau kurang dari (<) walaupun tersedia dalam ASCII character, karakter tersebut tidak dapat digunakan secara langsung sebagai konten pada HTML. Hal tersebut dikarenakan karakter tersebut akan terbaca sebagai sebuah tag.
Untuk menampilkan karakter seperti yang disebutkan tadi, HTML memerlukan sebuah “escaped” karakter. Escaping artinya adalah tidak menuliskan karakter itu sendiri, melainkan menggantinya dengan nilai numeric atau character reference pada karakternya.
Terdapat dua cara untuk melakukannya, yakni dengan menetapkan nilai numerik (numeric entity) atau menggunakan nama singkatan yang sudah ditetapkan untuk masing-masing karakternya (named entity). Semua referensi karakter dimulai dengan “&” dan diakhiri dengan “;”.
Contohnya untuk menggunakan simbol copyright, kita dapat menggunakan “©”
<p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p>
atau “©”.
<p>Belajar Dasar Pemrograman Web © 2019, Dicoding Academy</p>
Alhasil, tampilannya sama.
Berikut daftar karakter spesial dengan karakter referensinya.
Karakter | Deskripsi | Named Entity | Numeric Entity |
non-breaking space | |   | |
& | Ampersand | & | & |
’ | Apostrophe | ' | ' |
< | Kurang dari (less-than) | < | < |
> | Lebih dari (greater-than) | > | > |
© | Hak cipta (copyright) | © | © |
® | Merek dagang terdaftar (registered trademark) | ® | ® |
™ | Merek dagang (trademark) | ™ | ™ |
£ | Pound | £ | £ |
¥ | Yen | ¥ | ¥ |
€ | Euro | € | € |
– | En-dash | – | – |
— | Em-dash | — | — |
‘ | Kutip tunggal kiri | ‘ | ‘ |
’ | Kutip tunggal kanan | ’ | ’ |
“ | Kutip ganda kiri | “ | ” |
” | Kutip ganda kanan | ” | ” |
• | Bullet | • | • |
... | Horizontal ellipsis | … | … |
No comments:
Post a Comment