</> Pemrograman Web Dasar

Pesantren Teknologi Informasi dan Komunikasi

Tahun Akademik 2022/2023
‫عل ًْما َس َّه َل الل َّ ُه ل َُه ِب ِه ط َ ِريقًا ِإل َى ال َْجن َِّة‬
ِ ‫َو َم ْن َسل ََك ط َ ِريقًا يَل ْ َت ِم ُس ِفي ِه‬
“ Barangsiapa yang menempuh jalan untuk mencari ilmu, maka Allah akan mudahkan baginya
jalan menuju surga.“
Mengelola Multimedia
Mengelola Multimedia
Untuk media digital, HTML mendukung elemen untuk menyisipkan suara dan video ke
dalam halaman web untuk menambahkan informasi kepada pengguna
Menambahkan audio
untuk memasukkan audio, gunakan elemen <audio>. Seperti elemen img,
<audio> harus memberikan nilai tempat menyimpan file audio melalui atribut src
lalu untuk menampilkan elemen <audio> juga perlu menambahkan atribut
controls

Contoh :
<audio src="audio/piano.mp3" controls> </audio>

Pesantren Teknologi Informasi

dan Komunikasi
Mengelola Multimedia

Menambahkan audio
Kemudian jika ingin memastikan audio dapat dimainkan secara otomatis ketika
halaman diakses, maka dapat menggunakan atribut autoplay

Contoh :
<audio src="audio/piano.mp3" controls autoplay> </audio>

Pesantren Teknologi Informasi

dan Komunikasi
Mengelola Multimedia

Menambahkan video
untuk memasukkan video, gunakan tag <video> mirip dengan elemen <audio>.
Atribut-atribut yang dapat digunakan pada elemen <audio> juga digunakan pada
elemen <video>

Contoh :
<audio src="audio/piano.mp3" controls autoplay> </audio>

Pesantren Teknologi Informasi

dan Komunikasi
Elemen Semantik
Elemen Semantik
Adalah elemen-elemen yang menyatakan makna atau tujuan dari elemen itu
sendiri. Misalnya tag <footer>, tag ini digunakan untuk membuat elemen footer
atau bagian kaki dari web. Jangan gunakan tag ini di bagian paling atas, karena
maknanya sudah jelas untuk footer.

Pesantren Teknologi Informasi

dan Komunikasi
Daftar Elemen Semantik

<article>
untuk membuat elemen artikel
<aside>
untuk membuat elemen bagian samping
<details>
untuk membuat elemen datail atau spoiler
<footer>
untuk membuat elemen bagian kaki dari web

Pesantren Teknologi Informasi

dan Komunikasi
Daftar Elemen Semantik
<header>
untuk mebuat kepala kop dari web
<main>
untuk membuat elemen utama
<mark>
untuk menandai teks
<summary>
untuk membuat ringkasan artikel atau isi spoiler
<time>
untuk membuat elemen yang menyatakan waktu Pesantren Teknologi Informasi
dan Komunikasi
Let’s Code