Struktur Head
Melalui kelas ini, kamu diajak untuk:
- Mengidentifikasi elemen-elemen dalam struktur style HTML Web Story.
- Memahami fungsi dari setiap elemen dalam struktur style HTML Web Story.
Struktur Head HTML Web Story
Elemen <style> adalah bagian penting dalam sebuah web page. Style berguna untuk mengatur visualisasi halaman web sesuka kita, tidak terkecuali pada konten web story.
Dalam struktur HTML Web Story, elemen <style> dipasang di dalam elemen <head>. Elemen ini terdiri dari tiga bagian:
- AMP Boilerplate
- No Script
- AMP Custom
Elemen AMP Boilerplate
AMP Boilerplate adalah elemen styling yang digunakan untuk membuat kerangka halaman web berbasis AMP. Deklarasi susunan kode AMP Boilerplate juga berfungsi untuk memastikan halaman web tervalidasi oleh AMP. Bagian ini adalah elemen wajib yang tidak boleh diubah.
Salin dan tempel kode ini persis di bawah link rel tautan font.
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes coverPan {
0% {
transform: translate(2.5rem, 4.1875rem) scale(1.25);
}
100% {
transform: translate(-2.5rem, 0.625rem) scale(1.35);
}
}
</style>Elemen No Script
Bagian styling selanjutnya adalah elemen <noscript>. Bagian ini juga adalah deklarasi AMP Boilerplate. Sama seperti elemen sebelumnya, elemen <noscript> juga tidak boleh diubah dengan alasan yang sama.
Salin dan tempel kode ini di bawah <style amp-boilerplate>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>Elemen AMP Custom
Bagian terakhir adalah AMP Custom. Elemen ini memungkinkan pembuat konten berkreasi dengan pilihan style CSS yang diinginkan.
AMP Custom memiliki beberapa selector yang wajib dicantumkan seperti amp-story, amp-story-page, dan beberapa selector lainnya. Setelah para selector wajib dicantumkan, pembuat konten bisa menambahkan selector-selector lainnya.
Lihat susunan di bawah ini:
<style amp-custom>
/* Selector-selector di bawah ini harus ada */
amp-story {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased
}
amp-story-page {
background-color: #000
}
amp-story-grid-layer {
padding: 0
}
amp-story-grid-layer.bottom {
align-content: end
}
amp-story-grid-layer.middle {
align-content: center
}
amp-story-grid-layer.noedge {
padding: 0
}
amp-story-grid-layer.center {
text-align: center
}
amp-story {
font-size: 18px;
line-height: 1.4;
font-family: Inter, system-ui, Arial, Helvetica, sans-serif;
background: #000;
color: #fff;
letter-spacing: -.016em;
}
/* Di sini kita bisa menambahkan selector class dan id sesuai kebutuhan */
.title {
font-size: 32px;
line-height: 1.125;
margin-bottom: 8px;
font-weight: 700;
letter-spacing: -.032em;
}
.subtitle {
font-size: 18px;
}
.box {
position: relative;
padding: 24px;
}
</style>AMP Custom sekaligus mengakhiri bagian dari struktur <noscript>. Jangan lupa tutup elemen head dengan tag akhir </head>.
Selayang Pandang
- Header mengandung elemen inti Web Story yakni
- Jika teks berada di dalam box atau mepet dengan konten, gunakan padding atau margin.
Kuis
Komponen manakah yang menjadi tempat penyusunan kerangka Web Story?