0

0

0

share

#Tutorial

Reactions0 Reactions

0 Komentar

Membuat Quote dengan HTML dan CSS

Profile

Zen • 7 Desember 2016

Membuat Quote dengan HTML dan CSS

Kali ini kita akan membuat quote, yaitu tulisan yang berada di tengah layar dan diberi simbol di akhir, seperti gambar di bawah ini:

screenshot quote di muhammadzaini.com

Oke, mari kita buat...

Yang pertama, buat file html lalu isi dengan kode berikut: (dasar kerangka html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Quote</title>
</head>
<body>

</body>
</html>

Penjelasan:

  • <!DOCTYPE html> menandakan bahwa kita menggunakan HTML 5
  • <meta charset="utf-8"> kita gunakan supaya file HTML ini dapat menampung semua jenis huruf dari berbagai bahasa
  • <meta content="width=device-width, initial-scale=1" name="viewport"> digunakan supaya bisa responsive di tampilan mobile (mobile first)
Kemudian, kita tulis kontennya sehingga menjadi: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Quote</title>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="isi">
                <p>I hate when people ask me, "Why are you so quiet?"</p>
                <p>Because I am. That's how I function.</p>
                <p>I don't ask others, "Why are you so noisy? Why do you talk so much?"</p>
                <p>It's rude.</p>
                <p>Ψ</p>
            </div>
        </div>
    </div>
</body>
</html>
Di sini kita menggunakan div bertingkat yaitu kalau dituliskan dalam syntax Zen Coding: body > .outer > .inner > .isi. Nah, di masing-masing bagian ini akan kita beri style tertentu sehingga membentuk seperti quote.

Setelah membuat kerangka, maka kita sekarang akan membuat stylenya:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Quote</title>
    <style>
    body {
       margin: 0;
    }
    .outer {
       display: table;
       position: absolute;
       width: 100%;
       height: 100%;
    }
    .inner {
       display: table-cell;
       vertical-align: middle;
       text-align: center;
    }
    .isi {
       display: inline-block;
       width: 80%;
       margin: auto;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="isi">
                <p>I hate when people ask me, "Why are you so quiet?"</p>
                <p>Because I am. That's how I function.</p>
                <p>I don't ask others, "Why are you so noisy? Why do you talk so much?"</p>
                <p>It's rude.</p>
                <p>Ψ</p>
            </div>
        </div>
    </div>
</body>
</html>

Penjelasan Script

body {
    margin: 0;
}
Digunakan untuk menghilangkan margin yang ada di bagian atas dan kiri body 
.outer {
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
}
.outer adalah class yang berada di dalam body. Nah, tugas dari class ini adalah mendefinisikan dirinya sebagai table lalu memberi lebar dan tinggi sepanjang 100%. 
.inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
Maksud dari class .inner ini adalah dia mendefinisikan dirinya sebagai selnya tabel lalu rata tengah secara vertikal. 
.isi {
    display: inline-block;
    width: 80%;
    margin: auto;
}
Dan sampailah kita kepada class yang terakhir yaitu class .isi. Kalau class ini nggak dicantumkan, maka nggak akan jadi yang namanya elemen di tengah halaman.

Kemudian, supaya enak dipandang, kita pun memerlukan sedikit permainan tipografi di sini. Berikut adalah kode final setelah ditambahkan font dari Google Fonts:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Quote</title>
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
    <style>
    * {
       font-family: 'Dancing Script', cursive;
       font-size: 35px;
    }
    body {
       margin: 0;
    }
    .outer {
       display: table;
       position: absolute;
       width: 100%;
       height: 100%;
    }
    .inner {
       display: table-cell;
       vertical-align: middle;
       text-align: center;
    }
    .isi {
       display: inline-block;
       width: 80%;
       margin: auto;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="isi">
                <p>I hate when people ask me, "Why are you so quiet?"</p>
                <p>Because I am. That's how I function.</p>
                <p>I don't ask others, "Why are you so noisy? Why do you talk so much?"</p>
                <p>It's rude.</p>
                <p>Ψ</p>
            </div>
        </div>
    </div>
</body>
</html>

Untuk melihat hasil jadinya, kamu bisa membuka muhammadzaini.com/quote-css