sumber : Tutorial Pembuatan Website dengan Menggunakan Html Dan Css (garudacyber.co.id)
1. Desain Layout Website
Dalam membuat satu website pastikan kita sudah membuat contoh layout atau bagannya, biasanya penulis membuat Layout website di kertas tulis, Ms Paint, atau di Adobe Photoshop.
Setelah membuat desain template website kita, selanjutna ialah kita harus menentukan section HEADER, MAIN BODY atau FOOTER.
2. Hard Coding Layout Website
Setelah kita telah selesai membuat layoutnya, saatnya kita membuat kode Html nya kedalam Notepad++ atau pun sejenisnya. Silahkan lihat kode yang dibawah ini:
- Buat file HTML dengan nama ‘index.html‘ setelah itu masukkan kode dibawah ini :
<html>
<head>
<!--Element-elemen tag <head> tulis disini-->
<title>WEBSITE PERDANA SAYA</title>
</head>
<body>
<!--Element-elemen tag <body> tulis disini-->
</body>
</html>
- Kode yang diatas ini merupakan kode yang harus dibuat agar kita dapat membuat suatu website. Kita juga harus memperhatikan disetiap tag HTML harus ada tag pembuka (Contoh : <html>; <header>; <footer>) dan tag penutup (Contoh : </html>; </header>; </footer>).
- Berikut contoh penulisan kode HTML yang BENAR :
<body>
<!--Element-elemen tag <body> tulis disini-->
<main>
<div></div>
</main>
</body>
- Setelah itu kita membuat Layout website yang kita buat tadi pada Layout tersebut ada 3 section, yaitu section HEADER, MAIN BODY dan FOOTER, Lalu tugas kita adalah memasukkan 3 section tersebut ke dalam tag <body>.
<body>
<!--Element-elemen tag <body> tulis disini-->
<header> <!--Section HEADER-->
</header>
<main> <!--Section MAIN BODY-->
</main>
<footer> <!--Section FOOTER-->
</footer>
</body>
- Setelah Section telah kita buat, saat ini kita akan mendalami lagi, jika kalian perhatikan di gambar Layout untuk section HEADER terdapat 2 elemen (LOGO dan NAVIGASI), MAIN BODY 2 elemen (KONTEN dan SIDEBAR), lalu FOOTER tidak memiliki elemen. Silahkan kalian masukan elemen-elemen tersebut ke section-nya masing-masing.
<body>
<!--Element-elemen tag <body> tulis disini-->
<header> <!--Section HEADER-->
<div>LOGO</div>
<div>NAVIGASI</div>
</header>
<main> <!--Section MAIN BODY-->
<div>KONTEN</div>
<div>SIDEBAR</div>
</main>
<footer> <!--Section FOOTER-->
<div>FOOTER</div>
</footer>
</body>
- Setelah kita selesai membuat struktur Html website kita, Setelah itu kita simpan perubahannya dan mari kita coba membuka file index.html di Browser yang kita pakai kurang lebih tampilannya akan seperti gambar dibawah ini:
Secara penglihatan kita ini memang tampak belum sesuai Layout yang kita buat tadi karena kita belum melakukan Styling Layout, namun secara struktur HTML sudah sesuai.
3. Styling Layout dengan CSS
Setelah itu kita akan melakukan Styling Layout CSS agar tampilannya sesuai dengan Layout yang kita buat tadi sebelumnya. Mari ikuti langkah-langkah berikut ini:
- Setelah itu kita harus membuat file CSSnya dengan nama ‘Style.css‘ setelah itu kita simpan di folder
- yang ada file index.html yang kita buat tadi.Setelah itu kita buka lagi file index.html yang tadi terus kita tambahkan kode ini kedalam tag<head>.
<link rel="stylesheet" href="layout.css" />Kode ini yang akan mmemanggil kode CSS supaya kita dapat menggunakan kode CSS. Setelah itu kita harus tambahkan class ke dalam tag dari elemen yang kita buat tadi karena bahasa pemrograman CSS hanya memanggil ID atau Class yang sudah di definisikan ke dalam elemen.
<body>
<!--Element-elemen tag <body> tulis disini-->
<header> <!--Section HEADER-->
<div class="logo">LOGO</div>
<div class="navigasi">NAVIGASI</div>
</header>
<main> <!--Section MAIN BODY-->
<div class="konten">KONTEN</div>
<div class="sidebar">SIDEBAR</div>
</main>
<footer> <!--Section FOOTER-->
<div class="footer">FOOTER</div>
</footer>
</body>
Untuk nama CLASS kita bebas mau buat namanya apa.
- Selanjutnya kita buka file *CSS yang telah kita buat tadi lalu kita letakkan kembali nama-nama CLASS pada elemen HMTL sebelumnya pada file *CSS.berikut dalam format:
.logo {}
.navigasi {}
.konten {}
.sidebar {}
.footer {}
- Setiap nama class yang kita buat pada file *.CSS harus di mulai dengan simbol ‘titik‘ ( . ) di depan nama class-nya, kalau kita memakai ID pada element HTML (id = “nama_id”), maka penulisan di file *.CSS harus di mulai dengan simbol ‘pagar‘ ( # ).
- Lalu kita masukkan kode CSS berikut untuk tiap class tersebut agar membentuk Layout seperti pada gambar Layout yang sudah kita buat sebelumnya.
body {
width: 960px; /*set lebar body website*/
margin: 30px auto; /*set posisi body (auto; left; right; center)*/
}
main {
display: flex;
}
.logo,
.navigasi,
.konten,
.sidebar,
.footer {
margin-bottom: 5px;
padding: 15px 0;
}
.logo {
width: 100%;
height: auto;
background: #99D9EA;
text-align: center;
}
.navigasi {
width: 100%;
height: auto;
background: #99D9EA;
text-align: center;
}
.konten {
width: 70%;
background: #EFE4B0;
}
.sidebar {
width: 30%;
background: #FD7E00;
}
.footer {
width: 100%;
background: #C3C3C3;
text-align: center;
}
Lalu kita mengisi konten-konten yang ingin kita gunakan untuk website kita nanti pada elemen-elemen HTML tadi agar benar-benar sesuai dengan Layout yang kita buat. Berikut saya memberikan link untuk anda yang ingin lebih belajar lagi.
https://www.w3schools.com/css/
Hasil akhir pembuatan website :
Komentar Terbaru