Assalamualaikum...
Pada kesempatan kali ini, kita akan membuat layout pada sebuah halaman website.
Oke, ceritanya kita akan membuat website dengan tampilan seperti ini.
1.Buatlah file HTML bernama "index.html", lalu buatlah folder css dan gambar. Jadikan semuanya dalam satu folder project. Tepat seperti gambar dibawah ini.
2.Nantinya, folder “css” berisi file yang berisi script kode css. Maka buatlah file dengan format .css pada folder ini. Sebagai contoh, disini kita buat filenya dengan nama “tampilan.css”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website Pondok </title>
<link rel="stylesheet" href="css/tampilan.css">
</head>
<body>
<div class="badan-utama">
<header>
<center><h2>YAYASAN PENDIDIKAN ISLAM <br> PONDOK PESANTREN ZULHIJJAH</h2></center>
<center><p>Jalan Gajah Mada (Simpang Koni) RT.17 RW.01 <br> Kelurahan Teratai Muara Bulian Kabupaten Batanghari Jambi</p></center>
</header>
<nav class="navigasi">
<ul>
<li><a class="active" href="#beranda">Beranda</a></li>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#visimisi">Visi Misi</a></li>
<li><a href="#pendidikan">Pendidikan</a></li>
<li><a href="#santri">Santri</a></li>
<li><a href="#alumni">Alumni</a></li>
<li><a href="#kontak">Kontak</a></li>
<li><a href="#tentang">Tentang Kami</a></li>
</ul>
</nav>
<div class="banner">
<img src="gambar/foto1.JPG" alt="gambarfoto1">
</div>
<div class="menu-kiri">
<div class="kotak">
<h3>Pendaftaran Santri Baru</h3>
<img src="gambar/pendaftaran.jpg" alt="pendaftaran">
<p>
Isi Form Pendaftaran dengan Klik Tombol di bawah ini
</p>
<a class="tombol tombol-pesan" href="#">Form</a>
</div>
<div class="kotak">
<h3>Berita Terbaru</h3>
<nav class="menu-artikel">
<img src="gambar/zulhijjah.jpg" alt="zulhijjah">
<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal. Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>
</nav>
</div>
</div>
<div class="menu-tengah">
<div class="kotak">
<h3>Pengumuman Libur Pondok</h3>
<span class="tanggal-posting">
Diposting pada 11.04 WIB, 15 April 2020
</span>
<img src="gambar/foto3.jpg" alt="foto3">
<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal.
Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>
<a class="tombol tombol-lengkap" href="#">Selengkapnya</a>
</div>
<div class="kotak">
<h3>Pengumuman</h3>
<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal.
Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>
<a class="tombol tombol-lengkap" href="#">Selengkapnya</a>
</div>
</div>
<div class="menu-kanan">
<div class="kotak">
<h3>Jadwal Pendaftaran</h3>
<img src="gambar/foto.jpg" alt="foto">
<h4 align="center">Jadwal Pendaftaran</h4>
<center>
<p>Senin-Sabtu 08.00WIB-18.00WIB</p>
</center>
</div>
<div class="kotak">
<h3>Berita Pondok</h3>
<nav class="menu-artikel">
<ul>
<li><a href="#">Pengumuman Libur Pondok</a></li>
<li><a href="#">Penerimaan Santri Baru</a></li>
<li><a href="#">Alumni Angkatan</a></li>
<li><a href="#">Santri Hits</a></li>
<li><a href="#">Pembangunan Masjid</a></li>
<li><a href="#">Haflah Akhir Sanah</a></li>
<li><a href="#">Pelepasan kelas VII</a></li>
</ul>
</nav>
</div>
</div>
<footer>
@copyright 2020 || by Juniyantoputrafajar
</footer>
</div>
</body>
</html>
Untuk pemanggilan file gambar di atas, sudah kita gunakan script kodenya yaitu <img>
<img src="gambar/foto1.JPG" alt="gambarfoto1">
5. Untuk file CSSnya (“tampilan.css”), ketikkan script kode berikut.
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body
{
background-color: gainsboro;
}
.badan-utama
{
max-width: 1080px;
margin: 20px auto;
background-color: white;
padding: 15px;
overflow: hidden;
}
header
{
background-color: teal;
color: white;
padding: 1px;
}
header h2
{
margin-bottom: 7px;
font-size: 35px;
}
.navigasi ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:green;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
}
.navigasi li
{
float: left;
}
.navigasi li a
{
display: block;
color: white;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.navigasi li a:hover
{
background-color:grey;
transition-duration: 2s;
}
.banner
{
margin-bottom: 15px;
}
.banner img
{
display: block;
width: 100%;
height: 330px;
}
.kotak
{
border: 1px solid gainsboro;
padding: 10px;
margin-bottom: 15px;
}
.kotak h3
{
background-color: crimson;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 13px;
}
.kotak img
{
display: block;
width: 100%;
margin-bottom: 10px;
}
.kotak p
{
margin-bottom: 10px;
}
.menu-kiri
{
width: 250px;
margin-right: 10px;
float: left;
}
.menu-tengah
{
width: 530px;
margin-right: 10px;
float: left;
}
.menu-tengah h3
{
background: none;
color: crimson;
margin-bottom: 0;
}
.tanggal-posting
{
color: gray;
text-align: right;
font-size: 12px;
margin-bottom: 10px;
display: block;
}
.tombol
{
display: block;
text-decoration: none;
padding: 10px;
width: 120px;
color: white;
border-radius: 5px;
text-align: center;
}
.tombol:hover
{
background-color: black;
transition-duration: 2s;
}
.tombol-pesan
{
background-color: green;
}
.tombol-lengkap
{
background-color: darkorange;
}
.menu-kanan
{
width: 250px;
float: left;
}
.menu-kanan, .menu-kiri, .menu-tengah
{
margin-bottom: 15px;
}
footer
{
clear: both;
background-color: crimson;
color: white;
padding: 15px;
text-align: center;
}
.menu-artikel ul
{
list-style-type: none;
}
.menu-artikel ul li a
{
text-decoration: none;
display: block;
padding: 13px;
border-bottom: 1px solid gainsboro;
margin-bottom: 12px;
color: black;
}
.menu-artikel ul li a:hover
{
color: darkorange;
border-bottom: 5px double chocolate;
transition-duration: 2s;
}
/*untuk tablet*/
@media screen and (max-width:1080px)
{
.badan-utama
{
width: 100%;
}
.menu-kiri
{
width: 25%;
}
.menu-tengah
{
width: 68%;
float: right;
}
.menu-kanan
{
clear: both;
float: none;
width: 100%;
}
}
/*untuk android*/
@media screen and (max-width:780px)
{
header h2, header p
{
text-align: center;
}
.menu-kiri, .menu-kanan, .menu-tengah
{
float: none;
width: 100%;
}
.navigasi li
{
float: none;
}
}
6.Lalu buka file “index.html” pada browser. Maka akan muncul tampilan seperti ini pada browser
Nah, pas banget kan seperti gambar awal tadi???
7.Selanjutnya kita coba kecilkan lebar layar browsernya, kita bisa lihat perubahan tampilannya.
Pada kesempatan kali ini, kita akan membuat layout pada sebuah halaman website.
Oke, ceritanya kita akan membuat website dengan tampilan seperti ini.
1.Buatlah file HTML bernama "index.html", lalu buatlah folder css dan gambar. Jadikan semuanya dalam satu folder project. Tepat seperti gambar dibawah ini.
3.Nah, pada folder “gambar”. Isinya adalah gambar-gambar pendukung konten dalam website.
Tepatnya seperti contoh di atas, contoh tampilan halaman yang akan kita buat. Kita isi dulu foldernya dengan gambar-gambar pendukung.
4.Lalu, pada file “index.html” kita ketikkan script kode berikut ini.
Sebelumnya, tambahkan juga script kode HTML untuk menghubungkan file HTML dengan file CSS yang sudah kita buat. Berikut ini adalah kode tersebut:
Sebelumnya, tambahkan juga script kode HTML untuk menghubungkan file HTML dengan file CSS yang sudah kita buat. Berikut ini adalah kode tersebut:
<link rel="stylesheet" href="css/tampilan.css">
Dan kode yang di atas tadi itu kita masukkan pada tag <tag></tag>.
Maka dari itu, ketikkan script kode ini secara keseluruhan.
Maka dari itu, ketikkan script kode ini secara keseluruhan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website Pondok </title>
<link rel="stylesheet" href="css/tampilan.css">
</head>
<body>
<div class="badan-utama">
<header>
<center><h2>YAYASAN PENDIDIKAN ISLAM <br> PONDOK PESANTREN ZULHIJJAH</h2></center>
<center><p>Jalan Gajah Mada (Simpang Koni) RT.17 RW.01 <br> Kelurahan Teratai Muara Bulian Kabupaten Batanghari Jambi</p></center>
</header>
<nav class="navigasi">
<ul>
<li><a class="active" href="#beranda">Beranda</a></li>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#visimisi">Visi Misi</a></li>
<li><a href="#pendidikan">Pendidikan</a></li>
<li><a href="#santri">Santri</a></li>
<li><a href="#alumni">Alumni</a></li>
<li><a href="#kontak">Kontak</a></li>
<li><a href="#tentang">Tentang Kami</a></li>
</ul>
</nav>
<div class="banner">
<img src="gambar/foto1.JPG" alt="gambarfoto1">
</div>
<div class="menu-kiri">
<div class="kotak">
<h3>Pendaftaran Santri Baru</h3>
<img src="gambar/pendaftaran.jpg" alt="pendaftaran">
<p>
Isi Form Pendaftaran dengan Klik Tombol di bawah ini
</p>
<a class="tombol tombol-pesan" href="#">Form</a>
</div>
<div class="kotak">
<h3>Berita Terbaru</h3>
<nav class="menu-artikel">
<img src="gambar/zulhijjah.jpg" alt="zulhijjah">
<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal. Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>
</nav>
</div>
</div>
<div class="menu-tengah">
<div class="kotak">
<h3>Pengumuman Libur Pondok</h3>
<span class="tanggal-posting">
Diposting pada 11.04 WIB, 15 April 2020
</span>
<img src="gambar/foto3.jpg" alt="foto3">
<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal.
Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>
<a class="tombol tombol-lengkap" href="#">Selengkapnya</a>
</div>
<div class="kotak">
<h3>Pengumuman</h3>
<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal.
Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>
<a class="tombol tombol-lengkap" href="#">Selengkapnya</a>
</div>
</div>
<div class="menu-kanan">
<div class="kotak">
<h3>Jadwal Pendaftaran</h3>
<img src="gambar/foto.jpg" alt="foto">
<h4 align="center">Jadwal Pendaftaran</h4>
<center>
<p>Senin-Sabtu 08.00WIB-18.00WIB</p>
</center>
</div>
<div class="kotak">
<h3>Berita Pondok</h3>
<nav class="menu-artikel">
<ul>
<li><a href="#">Pengumuman Libur Pondok</a></li>
<li><a href="#">Penerimaan Santri Baru</a></li>
<li><a href="#">Alumni Angkatan</a></li>
<li><a href="#">Santri Hits</a></li>
<li><a href="#">Pembangunan Masjid</a></li>
<li><a href="#">Haflah Akhir Sanah</a></li>
<li><a href="#">Pelepasan kelas VII</a></li>
</ul>
</nav>
</div>
</div>
<footer>
@copyright 2020 || by Juniyantoputrafajar
</footer>
</div>
</body>
</html>
Untuk pemanggilan file gambar di atas, sudah kita gunakan script kodenya yaitu <img>
<img src="gambar/foto1.JPG" alt="gambarfoto1">
5. Untuk file CSSnya (“tampilan.css”), ketikkan script kode berikut.
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body
{
background-color: gainsboro;
}
.badan-utama
{
max-width: 1080px;
margin: 20px auto;
background-color: white;
padding: 15px;
overflow: hidden;
}
header
{
background-color: teal;
color: white;
padding: 1px;
}
header h2
{
margin-bottom: 7px;
font-size: 35px;
}
.navigasi ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:green;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
}
.navigasi li
{
float: left;
}
.navigasi li a
{
display: block;
color: white;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.navigasi li a:hover
{
background-color:grey;
transition-duration: 2s;
}
.banner
{
margin-bottom: 15px;
}
.banner img
{
display: block;
width: 100%;
height: 330px;
}
.kotak
{
border: 1px solid gainsboro;
padding: 10px;
margin-bottom: 15px;
}
.kotak h3
{
background-color: crimson;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 13px;
}
.kotak img
{
display: block;
width: 100%;
margin-bottom: 10px;
}
.kotak p
{
margin-bottom: 10px;
}
.menu-kiri
{
width: 250px;
margin-right: 10px;
float: left;
}
.menu-tengah
{
width: 530px;
margin-right: 10px;
float: left;
}
.menu-tengah h3
{
background: none;
color: crimson;
margin-bottom: 0;
}
.tanggal-posting
{
color: gray;
text-align: right;
font-size: 12px;
margin-bottom: 10px;
display: block;
}
.tombol
{
display: block;
text-decoration: none;
padding: 10px;
width: 120px;
color: white;
border-radius: 5px;
text-align: center;
}
.tombol:hover
{
background-color: black;
transition-duration: 2s;
}
.tombol-pesan
{
background-color: green;
}
.tombol-lengkap
{
background-color: darkorange;
}
.menu-kanan
{
width: 250px;
float: left;
}
.menu-kanan, .menu-kiri, .menu-tengah
{
margin-bottom: 15px;
}
footer
{
clear: both;
background-color: crimson;
color: white;
padding: 15px;
text-align: center;
}
.menu-artikel ul
{
list-style-type: none;
}
.menu-artikel ul li a
{
text-decoration: none;
display: block;
padding: 13px;
border-bottom: 1px solid gainsboro;
margin-bottom: 12px;
color: black;
}
.menu-artikel ul li a:hover
{
color: darkorange;
border-bottom: 5px double chocolate;
transition-duration: 2s;
}
/*untuk tablet*/
@media screen and (max-width:1080px)
{
.badan-utama
{
width: 100%;
}
.menu-kiri
{
width: 25%;
}
.menu-tengah
{
width: 68%;
float: right;
}
.menu-kanan
{
clear: both;
float: none;
width: 100%;
}
}
/*untuk android*/
@media screen and (max-width:780px)
{
header h2, header p
{
text-align: center;
}
.menu-kiri, .menu-kanan, .menu-tengah
{
float: none;
width: 100%;
}
.navigasi li
{
float: none;
}
}
6.Lalu buka file “index.html” pada browser. Maka akan muncul tampilan seperti ini pada browser
Nah, pas banget kan seperti gambar awal tadi???
7.Selanjutnya kita coba kecilkan lebar layar browsernya, kita bisa lihat perubahan tampilannya.
Dari hasil seperti tampilan gambar di atas, bisa discroll lagi ke bawah untuk melihat isi kontennya lebih lanjut.
Demikianlah postingan kali ini. Akhir kata, semoga bermanfaat ya.
Wassalamualaikum...
