HTML - Web Slide Deck

Pengenalan Web Slide Deck

Halo sana, para pengembang web yang bersemangat! Hari ini, kita akan memulai perjalanan yang menarik ke dunia HTML dan membuat slide deck web pribadi kita sendiri. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam proses ini, bahkan jika Anda belum pernah menulis baris kode sebelumnya. Jadi, pasang sabuk keselamatan Anda dan mari kita masuk ke dalam!

HTML - Web slide Desk

Apa Itu Web Slide Deck?

Sebelum kita mulai mengoding, mari kita pahami apa yang akan kita buat. Web slide deck adalah presentasi yang berjalan di dalam browser web. Itu seperti PowerPoint, tapi lebih keren karena Anda membuatnya dari awal menggunakan HTML! Ini berarti Anda bisa mengaksesnya di mana saja, kapan saja, selama Anda memiliki akses internet.

Menyiapkan Dokumen HTML

Marilah kita mulai dengan struktur dasar dokumen HTML kita. Jangan khawatir jika ini terlihat menakutkan pada awalnya - kita akan membongkar ini langkah demi langkah.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Deck Web Saya yang Menakjubkan</title>
<style>
/* Kita akan menambahkan CSS di sini nanti */
</style>
</head>
<body>
<!-- Slide kita akan berada di sini -->
</body>
</html>

mari kitauraikan ini:

<!DOCTYPE html> memberitahu browser ini adalah dokumen HTML5.
<html lang="id"> adalah elemen root halaman HTML kita, dengan "id" menentukan bahasa Indonesia.
Bagian <head> berisi informasi meta tentang dokumen.
<meta charset="UTF-8"> menentukan pengkodean karakter untuk dokumen.
<meta name="viewport"...> memastikan rendering yang benar di perangkat mobile.
<title> menetapkan judul halaman web kita.
Tag <style> adalah tempat kita akan menambahkan CSS nanti.
<body> adalah tempat konten yang terlihat dari slide deck kita.

Membuat Slide Pertama

Sekarang, mari kita buat slide pertama. Kita akan menggunakan tag <section> untuk menentukan setiap slide.

<body>
<div class="slideshow-container">
<section class="slide">
<h1>Selamat Datang di Slide Deck Web Saya!</h1>
<p>Dibuat oleh [Nama Anda]</p>
</section>
</div>
</body>

Di sini, kita telah:

Menambahkan <div> dengan kelas "slideshow-container" untuk menahan semua slide kita.
Membuat <section> dengan kelas "slide" untuk slide pertama kita.
Menambahkan judul <h1> dan paragraf <p> ke slide kita.

Menambahkan Slide Lainnya

Marilah kita tambahkan beberapa slide lagi ke deck kita:

<div class="slideshow-container">
<section class="slide">
<h1>Selamat Datang di Slide Deck Web Saya!</h1>
<p>Dibuat oleh [Nama Anda]</p>
</section>

<section class="slide">
<h2>Apa yang Kita Akan Pelajari</h2>
<ul>
<li>Dasar HTML</li>
<li>Styling CSS</li>
<li>JavaScript Sederhana</li>
</ul>
</section>

<section class="slide">
<h2>Terima Kasih!</h2>
<p>Ada pertanyaan?</p>
</section>
</div>

Kita telah menambahkan dua slide lagi, masing-masing dengan struktur konten yang berbeda. Slide kedua menggunakan daftar tak terurut <ul> untuk menampilkan bullet points.

Menyusun Slide Dengan CSS

Sekarang, mari kita menambahkan gaya ke slide kita. Kita akan menaruh ini di tag <style> di bagian <head>:

<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.slideshow-container {
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
}
.slide:nth-child(1) { background-color: #f4f4f4; }
.slide:nth-child(2) { background-color: #e8e8e8; }
.slide:nth-child(3) { background-color: #dcdcdc; }
</style>

mari kitauraikan CSS ini:

Kita menset tinggi body dan html ke 100% dan menghapus margin default.
.slideshow-container menggunakan flexbox untuk layout dan scroll-snap-type untuk sliding yang halus.
Setiap .slide diatur ke tinggi dan lebar penuh, dengan konten yang diperpusat.
Kita menggunakan scroll-snap-align untuk memastikan slide menyusup ke tempat saat scrolling.
Warna latar belakang berbeda untuk setiap slide menggunakan :nth-child.

Menambahkan Tombol Navigasi

Untuk membuat slide deck kita lebih ramah pengguna, marilah kita tambahkan beberapa tombol navigasi:

<body>
<div class="slideshow-container">
<!-- ... slide di sini ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ Sebelumnya</button>
<button class="next" onclick="changeSlide(1)">Selanjutnya ❯</button>

<script>
function changeSlide(n) {
const slides = document.querySelectorAll('.slide');
const currentSlide = document.querySelector('.slide:target') || slides[0];
let index = Array.from(slides).indexOf(currentSlide);
index = (index + n + slides.length) % slides.length;
location.hash = '#' + slides[index].id;
}
</script>
</body>

Kita telah menambahkan:

Tombol "Sebelumnya" dan "Selanjutnya" dengan event onclick.
Fungsi changeSlide di JavaScript untuk menghandle navigasi.

Marilah kita gayakan tombol ini:

<style>
/* ... gaya sebelumnya ... */
.prev, .next {
position: fixed;
top: 50%;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

Penyempurnaan Akhir

Untuk membuat navigasi kita berjalan mulus, kita perlu menambahkan ID ke slide kita:

<section id="slide1" class="slide">
<h1>Selamat Datang di Slide Deck Web Saya!</h1>
<p>Dibuat oleh [Nama Anda]</p>
</section>

<section id="slide2" class="slide">
<h2>Apa yang Kita Akan Pelajari</h2>
<ul>
<li>Dasar HTML</li>
<li>Styling CSS</li>
<li>JavaScript Sederhana</li>
</ul>
</section>

<section id="slide3" class="slide">
<h2>Terima Kasih!</h2>
<p>Ada pertanyaan?</p>
</section>

Kesimpulan

Selamat! Anda telah membuat slide deck web pribadi Anda sendiri menggunakan HTML, CSS, dan sedikit JavaScript. Ini hanya awal - Anda sekarang dapat mencoba gaya yang berbeda, menambahkan elemen interaktif lebih banyak, atau bahkan menggabungkan animasi.

Ingat, pengembangan web adalah tentang praktik dan kreativitas. Jangan takut untuk mengubah kode dan melihat apa yang terjadi. Siapa tahu? Anda mungkin menemukan sesuatu yang menakjubkan!

Semangat coding, para ahli web masa depan!

Tabel Metode

Metode	Deskripsi
`document.querySelectorAll()`	Memilih semua elemen yang cocok dengan seletion CSS
`document.querySelector()`	Memilih elemen pertama yang cocok dengan seletion CSS
`Array.from()`	Membuat instance Array baru dari objek seperti array
`indexOf()`	Mengembalikan indeks pertama di mana elemen dapat ditemukan dalam array
`location.hash`	Mengambil/mengatur bagian URL yang diikuti tanda #

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Pemutar Video

Tutorial Selanjutnya:

HTML - Velocity Draw