Membuat Gallery Foto Dengan HTML Dan CSS

membuat gallery foto dengan html dan css

Membuat gallery foto dengan html dan css sederhana - artikel kali ini akan menjelaskan tutorial bagaimana cara mudah membuat gallery dengan HTML dan CSS. Gallery foto merupakan gambar atau foto yang dipasang pada halaman website sebagai data atau informasi yang diupload atau disimpan di dalam folder direktori web. Jadi file-file gambar harus tersimpan lebih dulu di dalam direktori agar dapat ditampilkan ke halaman website. Baik ditampilkan berdasarkan single image atau menjadi sebuah tampilan galeri foto sehingga tampil menarik dan elegan.

Tutorial dasar belajar membuat galeri foto dengan HTML dan CSS ini cukuplah mudah, karena memang masih dasar namun tetap dapat dijadikan referensi kedepannya. Alangkah baiknya sebelum beralih ke desain galeri foto yang lebih profesional, sebaiknya pelajari terlebih dulu dasar cara membuat gallery foto dengan html dan css. Ada 2 hal dalam kasus galeri foto ini yaitu kasus untuk mengetahui cara menampilkan gambar dengan HTML, kemudian yang kedua design tampilan gallery foto tersebut dengan CSS agar tampil lebih menarik.

Oke, langsung ke pokok materi tutorial cara membuat gallery foto dengan html dan css kali ini dengan melihat langsung source code html dan css berikut ini.

Membuat Gallery Foto Dengan HTML Dan CSS

Perhatikan kode html dan css berikut dan simpan sebagai html file;

<html>
<head>
    <title>Cara Membuat Gallery Foto Dengan HTML Dan CSS</title>
    <style type="text/css">
        body{
            width: 50%;
        }
        div.gallery {
            border: 1px solid #ffa800;
        }
        div.gallery:hover {
            border: 2px solid skyblue;
        }
        div.gallery img {
            width: 100%;
            height: auto;
        }
        div.desc {
            padding: 15px;
            text-align: center;
            color:#fff;
            background:silver;
        }
        * {
            box-sizing: border-box;
        }
        .responsive {
            padding: 0 6px;
            float: left;
            width: 24.99999%;
        }
        @media only screen and (max-width: 700px){
            .responsive {
                width: 49.99999%;
                margin: 6px 0;
            }
        }
        @media only screen and (max-width: 500px){
            .responsive {
                width: 100%;
            }
        }
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <h2>Gallery Foto Dengan HTML Dan CSS</h2>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="foto1.png">
                <img src="foto1.png" width="600" height="400">
            </a>
            <div class="desc">Foto 1</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="foto2.png">
                <img src="foto2.png" width="600" height="400">
            </a>
            <div class="desc">foto 2</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="foto3.png">
                <img src="foto3.png" width="600" height="400">
            </a>
            <div class="desc">Foto 3</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="foto4.png">
                <img src="foto4.png" width="600" height="400">
            </a>
            <div class="desc">Foto 4</div>
        </div>
    </div>
    <div class="clearfix"></div>
</body>
</html>

Jalankan file kode html di atas jika menampilkan galeri foto seperti pada gambar di bawah ini, maka tutorial membuat gallery foto dengan html dan css kita kali ini berhasil.
membuat gallery foto dengan html dan css

Membuat Gallery Foto Dengan HTML Dan CSS

Jika tidak berhasil, perhatikan pada kode html gallery foto css di atas, pastikan tag css berada di antara tag <head> dan tag </head>, karena ini adalah dasar pemasangan kode css di dalam html.

Sampai di sini tutorial bagaimana cara membuat gallery foto dengan html dan css sehingga tampil galeri foto menarik di halaman website. Silahkan teman-teman kembangkan menjadi lebih profesional lagi daripada galeri foto sederhana tersebut. Semoga dapat bermanfaat.

Belum ada Komentar untuk "Membuat Gallery Foto Dengan HTML Dan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel