HTML - Web Slide Deck

Pendahuluan Web Slide Deck

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan mengemban perjalanan menarik ke dalam dunia HTML dan membuat slide deck web pribadi kita sendiri. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam proses ini, bahkan jika Anda belum pernah menulis baris kode sebelumnya. Jadi, sabikan dan mari kita masuk ke dalam!

HTML - Web slide Desk

Apa Itu Web Slide Deck?

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

Menyiapkan Dokumen HTML

Mari kita mulai dengan struktur dasar dokumen HTML kita. Jangan khawatir jika ini terlihat menakutkan pertama kali - kita akan membongkar itu langkah demi langkah.

<!DOCTYPE html>
<html lang="en">
<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 beberapa CSS di sini nanti */
</style>
</head>
<body>
<!-- Slide kita akan berada di sini -->
</body>
</html>

Mari kita membongkar ini:

<!DOCTYPE html> memberitahu browser ini adalah dokumen HTML5.
<html lang="en"> adalah elemen root halaman HTML kita, dengan "en" menentukan bahasa Inggris.
Bagian <head> berisi informasi meta tentang dokumen.
<meta charset="UTF-8"> menentukan pengkodean karakter untuk dokumen.
<meta name="viewport"...> memastikan rendering yang proper 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 menampung semua slide kita.
Membuat <section> dengan kelas "slide" untuk slide pertama kita.
Menambahkan heading <h1> dan paragraf <p> ke slide kita.

Menambahkan Slide Lain

Mari 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.

Menyempurnakan Slide dengan CSS

Sekarang, mari kita tambahkan beberapa 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 kita membongkar CSS ini:

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

Menambahkan Tombol Navigasi

Untuk membuat slide deck kita lebih user-friendly, mari 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 onclick event.
Fungsi changeSlide di JavaScript untuk menghandle navigasi.

Mari 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>

Sentuhan 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 mengintegrasikan animasi.

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

Selamat mengoding, para ahli web masa depan!

Credits: Image by storyset