WEB 3
Hyperlink dan Navigasi
• Hyperlink dan navigasi adalah elemen penting dalam HTML yang
memungkinkan pengguna untuk berpindah antar halaman web serta
menjelajahi konten dengan mudah.
• Hyperlink , yang dibuat dengan tag <a> , digunakan untuk
menghubungkan satu halaman web ke halaman lainnya atau sumber
eksternal. Navigasi yang efektif membantu pengguna menemukan
informasi dengan cepat dan meningkatkan pengalaman pengguna
secara keseluruhan.
Hyperlink dan Navigasi
• Tag <a> dan Atribut href
• Tag <a> digunakan untuk membuat tautan. Atribut href menentukan
tujuan tautan.
<a href="[Link]
Website</a>
• Membuat Tautan ke Halaman Lain
• Kamu dapat membuat tautan ke halaman lain pada website yang
sama.
<a href="[Link]">Halaman
Lain</a>
Gambar dan Multimedia
• Gambar dan elemen multimedia adalah komponen kunci yang dapat
memperkaya konten halaman web, menjadikannya lebih menarik dan
interaktif. Dalam coding HTML, kamu dapat
menggunakan tag <img> untuk menyisipkan gambar, serta elemen-
elemen, seperti <audio> dan <video>, untuk menambahkan file audio
dan video ke halaman web.
• Menyertakan gambar dan multimedia tidak hanya membuat situs web
lebih menarik secara visual, tetapi juga membantu dalam
menyampaikan informasi dengan lebih efektif.
Gambar dan Multimedia
• Tag <img> dan Atribut src serta alt
• Tag <img> digunakan untuk menampilkan gambar.
Atribut src menentukan sumber gambar, sedangkan alt memberikan
deskripsi alternatif pada gambar.
Ada 2 type jika ingin meletakan gambar dan mengambil dari perangkat kalian.
• Yang pertama, file gambar berada di dalam folder yang sama dengan file .html
kalian. Contoh codingnya seperti ini
• Jadi disini, dia langsung bisa membaca file gambar yang berada dalam 1 folder.
type yang kedua yaitu mengambil dari folder lain. Contoh programnya seperti ini
Disini dijelaskan bahwa, file di ambil dari drive F, lalu gambar berada di folder “gambar” dan nama file
nya adalah [Link]. Lalu untuk ukurannya width (lebar) itu 300 dan height (tinggi) nya itu 200.
Untuk gambar sesuaikan saja sesuai lokasi yang ada di perangkat kalian.
Gambar dan Multimedia
• Menambahkan Video dan Audio dengan Tag <video> dan <audio>
• <video> : Menambahkan video.
• <audio>: Menambahkan audio.
<video src="video.mp4" controls></video> XHTML
<audio src="audio.mp3" controls></audio>
• Untuk video dan audio, kalian bisa ikutin cara memasukan image, jadi
sesuaikan dengan lokasi yang ada di perangkat kalian
Gambar dan Multimedia
• Untuk menambahkan gambar secara online di HTML, kamu cukup
menggunakan tag <img> dengan atribut src yang mengarah ke URL gambar
(bukan file lokal). Berikut contoh sederhananya
Gambar dan Multimedia
• Karena tingkat keamanan dari google sekarang sudah semakin ketat, maka
saya sarankan kalian mengupload file terlebih dahulu di imgur
berikut link nya = [Link]
kalian bisa upload foto terlebih dahulu disitu setelah itu kalian bisa salin link
gambar kalian.
Daftar
• List atau daftar adalah cara efektif untuk menyusun informasi dalam
format yang mudah dibaca dan dipahami. Dalam coding HTML, kamu
memiliki beberapa pilihan untuk membuat daftar, mulai dari daftar
berurutan ( ordered list ) menggunakan tag <ol> , daftar tidak
berurutan ( unordered list ) menggunakan tag <ul> , hingga daftar
istilah ( Description list ) menggunakan tag <dl> .
• Setiap jenis daftar memiliki kegunaan tersendiri, misalnya untuk
menampilkan langkah-langkah dalam suatu proses,
mencantumkan item yang tidak memiliki urutan tertentu, atau
memberikan definisi.
Daftar
• Daftar Tidak Berurut
• Tag <ul> digunakan untuk membuat daftar tidak berurutan
( unordered list ) dan setiap item dalam daftar menggunakan tag <li> .
• <ul>
• <li>Item Pertama</li>
• <li>Item Kedua</li>
• <li>Item Ketiga</li>
• </ul>
Daftar
• Daftar Berurut
• Kamu dapat menggunakan tag <ol> untuk membuat sebuah daftar berurutan (dengan nomor urut, baik
berupa angka maupun huruf).
• <ol>
• <li>Item Pertama</li>
• <li>Item Kedua</li>
• <li>Item Ketiga</li>
• </ol>
Untuk daftar berurut ini kalian bisa membuat pilihan berdasarkan keinginan kalian, bisa berbentuk angka
atau abjad. Tinggal tambahkan type saja. Contohnya
• <ol type=‘’1’’>
• <li>Item Pertama</li>
• <li>Item Kedua</li>
• <li>Item Ketiga</li>
• </ol>
Daftar
Daftar Deskripsi
• Description list adalah sebuah daftar istilah ( term ), yang ada di
dalamnya setiap istilah ( term ) disertai dengan deskripsinya
( Description ). Description list digunakan untuk memberikan
penjelasan atau definisi yang jelas dan terstruktur bagi setiap istilah
yang terdaftar.
• Format ini membantu pembaca memahami konteks dan makna dari
setiap istilah secara lebih mendalam. Tag <dl> digunakan untuk
membuat daftar deskripsi , <dt> untuk istilah, dan <dd> untuk
deskripsi.
Daftar Deskripsi
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>