Membuat website pertama dengan HTML dan CSS

Kali ini akan belajar Membuat website pertama dengan HTML dan CSS, sebagai bahan latihan dan belajar koding html dan css tentunya.

Script HTML dan CSS dibawah ini dalam satu halaman, ini di buat satu halaman agar mudah untuk di pahami.

Script dibawah bisa Anda Copy Paste pada Notepad atau editor sejenis yang kemudian disimpan dengan ekstensi .html (dot html).

Script website dasar

<!DOCTYPE html>
<html>
<head>
<title>WEBSITE KU</title>
<style>
html, body {
    font-family: verdana;
    color:#333;
}
#bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    z-index: -999;
    top: 0;
    left: 0;
}
.box {
    background-image: url("https://my-id.site/images/ios-linen-white.jpg");
    width: 500px;
    height: 240px;
    border: 4px #eee solid;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 6px #000;
    margin-top: 40px;
}
h1 {
    color: #dc102c;
    text-shadow: 0 2px 4px #333;
}
a.button {
    box-shadow: inset 0px 1px 0px 0px #fff;
    background-color: #fad000;
    border-radius: 6px;
    border: 1px solid #ff9100;
    display: inline-block;
    color: #000;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #fff;
}
a.button:hover {
    background-color: #f5f500;
    color: #f00;
    box-shadow: 0 1px 2px #f00;
}
.footer {
    background-color: #eee;
    margin-top: 40px;
    font-size: 10pt;
    color: #dc102c;
    text-align: center;
    border: 1px #666 solid;
    border-radius: 12px;
    padding: 10px;
    width: 480px;
    opacity: 0.8;
}
</style>
</head>
<body>

<img src="https://my-id.site/images/bg.jpg" id="bg">

<table border="0" width="100%"><tr>
<td width="100%" align="center">
<div class="box">
    <h1>WEBSITEKU</h1>
        <p>
            <strong>SELAMAT DATANG</strong>
        </p>
            Ini adalah website pertama buatanku
        <hr>
        <p>
        <a class="button" href="#" title="Menu 1">Menu 1</a> <a class="button" href="#" title="Menu 2">Menu 2</a>
        </p>
        <hr>
</div>

<div class="footer">
    Copyright © 2019 Websiteku
</div>
</td>
</tr></table>

</body>
</html>


Untuk melihat dan mengeditnya secara langsung, silahkan gunakan Realtime HTML Editor ↗, disana script diatas otomatis terbuka dihalaman tersebut.

Semoga bermanfaat, sampai jumpa lagi di artikel berikutnya, dan selamat belajar, semoga sukses selalu teruntuk Anda…. 🙂

Mungkin Anda Menyukai