Gabungan koding html, css dan JavaScript
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Artikel dengan Gambar</title>
<style>
/* CSS */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.article-content {
margin-bottom: 30px;
}
.navigation {
margin-bottom: 20px;
text-align: center;
}
.navigation a {
margin: 0 15px;
text-decoration: none;
color: #007BFF;
font-size: 16px;
}
.navigation a:hover {
text-decoration: underline;
}
.section {
margin-bottom: 20px;
}
.section img {
width: 100%;
height: auto;
margin-top: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.section p {
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<article class="article-content">
<h1>Judul Artikel dengan Gambar</h1>
<!-- Bagian artikel yang bisa diubah tampilannya -->
<div id="section1" class="section">
<h2>Bagian 1 dari Artikel</h2>
<p>Bagian 1 dari artikel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet libero nec lorem ullamcorper volutpat. Nullam ac justo sit amet augue elementum lacinia. Donec vehicula odio eu quam fermentum, in vehicula metus tincidunt.</p>
<img src="https://via.placeholder.com/800x400.png?text=Gambar+Bagian+1" alt="Gambar Bagian 1">
</div>
<div id="section2" class="section" style="display: none;">
<h2>Bagian 2 dari Artikel</h2>
<p>Bagian 2 dari artikel. Sed non metus nec nisi venenatis dignissim. Curabitur viverra ante quis ligula lobortis, non scelerisque ligula vulputate. Mauris varius cursus volutpat. Curabitur pretium placerat urna et condimentum. Integer ac velit in libero auctor sodales a sit amet risus.</p>
<!-- <img src="https://via.placeholder.com/800x400.png?text=Gambar+Bagian+2" alt="Gambar Bagian 2"> -->
</div>
<div id="section3" class="section" style="display: none;">
<h2>Bagian 3 dari Artikel</h2>
<p>Bagian 3 dari artikel. Fusce id ipsum at libero dictum hendrerit eget a nulla. Proin ut libero orci. Phasellus congue nulla at nunc tristique, ut dapibus lorem dictum. Sed elementum mauris vitae ligula fermentum, vel vulputate lorem egestas.</p>
<!-- <img src="https://via.placeholder.com/800x400.png?text=Gambar+Bagian+3" alt="Gambar Bagian 3"> -->
</div>
<!-- Link navigasi untuk berpindah antar bagian -->
<div class="navigation">
<a href="javascript:void(0)" onclick="showSection(1)">1</a>
<a href="javascript:void(0)" onclick="showSection(2)">2</a>
<a href="javascript:void(0)" onclick="showSection(3)">3</a>
</div>
</article>
</div>
<script>
// JavaScript
function showSection(sectionNumber) {
// Menyembunyikan semua bagian
var sections = document.querySelectorAll('.section');
sections.forEach(function(section) {
section.style.display = 'none';
});
// Menampilkan bagian yang dipilih
var selectedSection = document.getElementById('section' + sectionNumber);
selectedSection.style.display = 'block';
}
// Menampilkan Bagian 1 secara default ketika halaman pertama kali dimuat
document.addEventListener('DOMContentLoaded', function() {
showSection(1);
});
</script>
</body>
</html>
Komentari Tulisan Ini
Subhan ashari, S.Pd, Gr
- Kepala Sekolah -
"Hai, semuanya! Senang bertemu dengan kalian semua di sini. Sebagai guru BK, saya ingin kalian tahu bahwa kalian tidak sendirian.…
Tautan
Jajak Pendapat
Sudahkah anda memakai Gemini AI dalam mempermudah kegiatan sehari hari?
Berlangganan
Iklan
