Assalamu'alaikum poinreaders,
Pada kesempatan kali ini kita akan belajar sebuah materi mengenai HTML, yaitu tentang Style dan Semantic Tag. Materi kali ini merupakan lanjutan dari materi sebelumnya yaitu tentang Table Tag. Style merupakan satu dari banyak cara yang dapat digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah dokumen HTML. Sedangkan Semantic merupakan sebuah tag yang menjelaskan secara spesifik fungsi dari tag tersebut. Untuk lebih jelasnya tentang Style dan Semantic Tag, yuk simak ulasan berikut...
Pada kesempatan kali ini kita akan belajar sebuah materi mengenai HTML, yaitu tentang Style dan Semantic Tag. Materi kali ini merupakan lanjutan dari materi sebelumnya yaitu tentang Table Tag. Style merupakan satu dari banyak cara yang dapat digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah dokumen HTML. Sedangkan Semantic merupakan sebuah tag yang menjelaskan secara spesifik fungsi dari tag tersebut. Untuk lebih jelasnya tentang Style dan Semantic Tag, yuk simak ulasan berikut...
TAG STYLE
1. <style>
Tag <style> mendefinisikan informasi style untuk dokumen HTML. Di dalam tag <style> kita menentukan bagaimana tag HTML harus di-render dalam browser. Tag <style> harus diletakan di dalam tag <head>, kecuali jika tag <style> tersebut diberi atribut scoped, maka tag tersebut boleh diletakkan dimana saja di dalam dokumen HTML.
Format Penulisan :
Format Penulisan :
<style>...</style>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| media | media_query | optional | Menentukan media/perangkat apa yang akan dioptimalkan oleh kode css yang terdapat pada tag <style>. |
| scoped | scoped | optional | Digunakan untuk menentukan bahwa tag <style> hanya berlaku untuk tag induk (parent) dan tag anak (child). |
| type | text/css | optional | Menentukan tipe media dari tag <style> tersebut. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag style</title>
<style>
h1 {color:red;}
</style>
</head>
<body>
<h1>Ini adalah contoh teks berwarna merah.</h1>
</body>
</html>
TAG SEMANTIC
1. <div>
Tag <div> merupakan kepanjangan dari division, digunakan untuk mendefinisikan sebuah divisi atau bagian dalam dokumen HTML.Format Penulisan :
<div>...</div>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| align | left right center justify |
optional | Digunakan untuk mensejajarkan isi teks / konten di dalam tag <div>. Atribut ini tidak didukung di HTML5. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag division</title>
</head>
<body>
<div style="color:blue">
<h3>Ini adalah teks berwarna biru.</h3>
</div>
</body>
</html>
2. <span>
Tag <span> digunakan untuk kelompok element inline (elemen yang hanya terdapat satu baris saja). Tag ini tidak memberikan perubahan visual apapun.Format Penulisan :
<span>...</span>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag span</title>
</head>
<body>
<h2>Ini adalah teks berwarna <span style="color:blue">biru</span>.</h2>
</body>
</html>
3. <header>
Tag <header> merupakan wadah untuk konten pengantar atau satu set link navigasi. Sebuah tag <header> biasanya berisi satu atau lebih tag heading (h1 - h6), logo, banner, dll. Kita boleh menggunakan beberapa tag <header> dalam satu dokumen HTML.Format Penulisan :
<header>...</header>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag header</title>
</head>
<body>
<article>
<header>
<h1>Ini adalah heading di dalam tag <header></h1>
</header>
</article>
</body>
</html>
4. <footer>
Tag <footer> mendefinisikan sebuah footer atau bagian kaki dalam sebuah dokumen atau tag <section>. Sebuah tag <footer> biasanya berisi informasi kontak, hak cipta, sitemap, dll. Kita boleh menggunakan beberapa tag <footer> dalam satu dokumen HTML.Format Penulisan :
<footer>...</footer>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag footer</title>
</head>
<body>
<footer>
<p>Copyright © 2017 <a href="http://www.pointopoin.com/">Pointopoin</a> All Right Reserved.</p>
</footer>
</body>
</html>
5. <main>
Tag <main> digunakan untuk menentukan konten utama dari sebuah dokumen.Format Penulisan :
<main>...</main>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag main</title>
</head>
<body>
<main>
<h1>Pointopoin</h1>
<p>Tempat Belajar Pemrograman</p>
<article>
<h1>Tentang Pointopoin</h1>
<p>PoinToPoin adalah situs yang berisi kumpulan materi dan tutorial yang berhubungan dengan pemrograman. PoinToPoin menyediakan berbagai tutorial bahasa pemrograman dari berbagai platform. Semua artikel yang ditulis disini ditulis dengan bahasa yang ringan sehingga mudah dipahami oleh semua kalangan. Semua artikel disini sangat cocok bagi mereka yang baru mengenal dan belajar pemrograman.</p>
</article>
</main>
</body>
</html>
6. <section>
Tag <section> mendefinisikan bagian dalam sebuah dokumen, seperti bab, header, footer, atau bagian lain dari dokumen.Format Penulisan :
<section>...</section>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag section</title>
</head>
<body>
<section>
<h1>Pointopoin</h1>
<p>Tempat Belajar Pemrograman</p>
</section>
</body>
</html>
7. <article>
Tag <article> digunakan untuk membuat konten mandiri (self-contained content).Format Penulisan :
<article>...</article>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag article</title>
</head>
<body>
<article>
<h1>Pointopoin</h1>
<p>Tempat Belajar Pemrograman</p>
</article>
</body>
</html>
8. <aside>
Tag <aside> mendefinisikan beberapa konten aside (samping) dari konten utama.Format Penulisan :
<aside>...</aside>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag aside</title>
</head>
<body>
<aside>
<h4>Kategori Artikel</h4>
<ul>
<li>Bahasa C</li>
<li>FreeMat</li>
<li>HTML</li>
<li>MATLAB</li>
</ul>
</aside>
</body>
</html>
9. <details>
Tag <details> digunakan untuk menentukan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan konten yang berada pada tag <details>.Format Penulisan :
<details>...</details>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| open | open | optional | Menentukan bahwa rincian harus terlihat (terbuka) untuk pengguna. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag details</title>
</head>
<body>
<details>
<summary>Tentang Pointopoin.</summary>
<p>PoinToPoin adalah situs yang berisi kumpulan materi dan tutorial yang berhubungan dengan pemrograman. PoinToPoin menyediakan berbagai tutorial bahasa pemrograman dari berbagai platform. Semua artikel yang ditulis disini ditulis dengan bahasa yang ringan sehingga mudah dipahami oleh semua kalangan. Semua artikel disini sangat cocok bagi mereka yang baru mengenal dan belajar pemrograman.</p>
</details>
</body>
</html>
10. <dialog>
Tag <dialog> mendefinisikan sebuah kotak dialog atau jendela (window).Format Penulisan :
<dialog>...</dialog>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| open | open | optional | Menentukan bahwa tag <dialog> aktif dan bahwa pengguna dapat berinteraksi dengan itu. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag dialog</title>
</head>
<body>
<dialog open>Ini adalah contoh dialog<br><br>note* : Hanya support di browser Chrome dan Opera saja.</dialog>
</body>
</html>
11. <summary>
Tag <summary> mendefinisikan judul untuk tag <details>. Judul tersebut dapat diklik untuk melihat/menyembunyikan rincian (details).
Format Penulisan :
<summary>...</summary>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag summary</title>
</head>
<body>
<details>
<summary>Tentang Pointopoin</summary>
<p>PoinToPoin adalah situs yang berisi kumpulan materi dan tutorial yang berhubungan dengan pemrograman. PoinToPoin menyediakan berbagai tutorial bahasa pemrograman dari berbagai platform. Semua artikel yang ditulis disini ditulis dengan bahasa yang ringan sehingga mudah dipahami oleh semua kalangan. Semua artikel disini sangat cocok bagi mereka yang baru mengenal dan belajar pemrograman.</p>
</details>
</body>
</html>
12. <data>
Tag <data> merujuk konten pada sebuah data yang dapat dibaca oleh mesin penterjemah (contoh mesin scan barcode). Tag ini menyediakan baik nilai yang dapat dibaca mesin untuk memproses data maupun nilai yang dapat dibaca oleh manusia untuk ditampilkan pada browser.Format Penulisan :
<data>...</data>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| value | machine-readable format | optional | Menentukan isi konten yang dapat dimengerti oleh mesin penterjemah. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag data</title>
</head>
<body>
<h3>Daftar judul buku :</h3>
<ul>
<li><data value="21053">1 Minggu Mahir Bahasa C</data></li>
<li><data value="21054">Belajar Bahasa Pemrograman MATLAB</data></li>
</ul>
</body>
</html>
Semoga materi yang saya sampaikan tentang HTML dapat dipahami poinreaders. Silakan tulis pertanyaan seputar materi yang telah dibahas pada kolom komentar. jangan lupa follow akun sosial kami agar poinreaders bisa mendapatkan materi terbaru tentang pemrograman.