Pada tutorial kali ini kita akan mencoba mengimplementasikan css untuk mendesain halaman web html.
Kita pernah membuat web html sederhana pada tutorial lengkap belajar html.
Sekarang kita akan coba membuatnya menjadi terlihat menarik dan modern dengan css.
Yuk kita mulai tutorialnya.
Penting: Sebelum membaca tutorial ini pastikan kalian sudah membaca tutorial mendesain web dengan html.
Membuat desain web dengan software painting
Sebagai acuan ketika kita mulai menulis code css, kita bisa membuat desain web kita terlebih dahulu menggunakan software painting seperti corel draw, adobe ilustrator atau bahkan photoshop.
Disini kita akan membuat web single page dengan struktur yang sudah kita buat sebelumnya pada tutorial membuat web html.
Desain web yang akan kita buat kurang lebih seperti gambar berikut,
Mendesain web dengan css
Disini kita akan menulis code cssnya bagain per bagian dari halaman web.
Kita analisa apa yang harus kita atur dari elemen, kemudian kita tulis kode cssnya sesuai desain yang menjadi acuan tadi.
Kita mulai dari elemen headernya,
Kode css header
Berikut kode css untuk elemen header
#header{padding:3px;margin-bottom:9px;background-color:#006d68;color:white;font-family: sans-serif;}
#header img {vertical-align:middle;margin:3px}
#header h1 {margin:0}
Kode css navigasi menu
Berikut kode css untuk elemen menu
nav{text-align:center;}
nav a{font-family: sans-serif;text-decoration: none;font-weight: bold;color:#006d68;text-align:center;}
Kode css about
Berikut kode css untuk elemen about us
#about{text-align:center;padding:37px;margin:9px 0 9px 0;background-color:#006d68;color:white;font-family: sans-serif;}
#about strong {font-size:28px;}
#about p {line-height:2}
Kode css service
Berikut kode css untuk elemen our service
#service{padding:3px;margin-bottom:9px;font-family: sans-serif;text-align:center;}
#service strong {font-size:28px;color:#006d68;}
.container{display:flex;flex-wrap:wrap;}
.card{margin:3px;text-align:center;padding-top:57px;padding-bottom:57px;background-color:#4f9065;color:white;font-family: sans-serif;border-radius:9px;width:calc(33.333333% - 9px)}
@media screen and (max-width: 600px) {
.card{width:100%}
}
Kode css contact
Berikut kode css untuk elemen contact us
#contact{text-align:center;padding:37px;margin:9px 0 9px 0;background-color:#006d68;color:white;font-family: sans-serif;justify}
#contact strong {font-size:28px;color:white;}
form{display: grid;grid-template-columns: 93px 250px;display: grid;justify-content: center;align-content: center;gap: 3px;}
input{border-radius:3px;height:24px;border:none}
Kode css footer
Berikut kode css untuk elemen footer
footer{text-align:center;padding:37px;background-color:black;color:white;font-family: sans-serif;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deretcode.com</title>
<style>
#header{padding:3px;margin-bottom:9px;background-color:#006d68;color:white;font-family:sans-serif;text-align:center;}
#header img {vertical-align:middle;margin:3px}
#header h1 {margin:0}
nav{text-align:center;}
nav a{font-family:sans-serif;text-decoration:none;font-weight:bold;color:#006d68;text-align:center;}
#about{text-align:center;padding:37px;margin:9px 0 9px 0;background-color:#006d68;color:white;font-family:sans-serif;}
#about strong {font-size:28px;}
#about p {line-height:2}
#service{padding:3px;margin-bottom:9px;font-family:sans-serif;text-align:center;}
#service strong {font-size:28px;color:#006d68;}
.container{display:flex;flex-wrap:wrap;}
.card{margin:3px;text-align:center;padding-top:57px;padding-bottom:57px;background-color:#4f9065;color:white;font-family:sans-serif;border-radius:9px;width:calc(33.333333% - 9px)}
@media screen and (max-width: 600px) {
.card{width:100%}
}
#contact{text-align:center;padding:37px;margin:9px 0 9px 0;background-color:#006d68;color:white;font-family:sans-serif;justify}
#contact strong {font-size:28px;color:white;}
form{display:grid;grid-template-columns:93px 250px;display:grid;justify-content:center;align-content:center;gap:3px;}
input{border-radius:3px;height:24px;border:none}
footer{text-align:center;padding:37px;background-color:black;color:white;font-family:sans-serif;}
</style>
</head>
<body>
<header id="header">
<h1><img src="DeretCode.png" width="49px" /> Deretcode.com</h1>
</header>
<nav><a href="#service">About Us</a> | <a href="#about">Our Service</a> | <a href="#contact">Contact Us</a></nav>
<div id="about">
<strong>About Us</strong>
<p>Deretcode adalah blog berisi tutorial pemrograman <br/>dan semua yang berkaitan dengan teknologi informasi.</p>
</div>
<div id="service">
<strong>Our Service</strong>
<div class="container">
<div class="card">
Jasa desain web
</div>
<div class="card">
Jasa Seo
</div>
<div class="card">
Jasa Mencintaimu
</div>
</div>
</div>
<div id="contact">
<strong>Contact Us</strong><br/><br/>
<form>
<label>Nama</label><input type="text"/>
<label>Email</label><input type="text"/>
<label>Pesan</label><textarea></textarea>
<br/><input type="submit" value="kirim">
</form>
</div>
<footer>
Copyright © 2020<br/>Template by deretcode.com<br/>
</footer>
</body>
</html>
Contohnya seperti berikut
*{margin:0}
body{margin:0;font-family: sans-serif;text-align:center;}
body > *{padding:3px;margin-bottom:9px;}
#header{background-color:#006d68;color:white;}
#header img {vertical-align:middle;margin:3px}
nav a{text-decoration: none;font-weight: bold;color:#006d68;}
#about{padding:37px;background-color:#006d68;color:white;}
#about strong {font-size:28px;}
#about p {line-height:2}
#service strong {font-size:28px;color:#006d68;}
.container{display:flex;flex-wrap:wrap;}
.card{margin:3px;padding-top:57px;padding-bottom:57px;background-color:#4f9065;color:white;border-radius:9px;width:calc(33.333333% - 9px)}
@media screen and (max-width: 600px) {
.card{width:100%}
}
#contact{padding:37px;background-color:#006d68;color:white;}
#contact strong {font-size:28px;color:white;}
form{display: grid;grid-template-columns: 93px 250px;display: grid;justify-content: center;align-content: center;gap: 3px;}
input{border-radius:3px;height:24px;border:none}
footer{padding:37px;margin:0px;background-color:black;color:white;}
Sampai disini tutorial mendesain halaman web dengan css. Silahkan buat desain web kalian sendiri semenarik mungkin.
Jika kalian merasa artikel ini bermanfaat siahkan kalian bagikan.
Jika ada pertanyaan atau ada hal yang ingin disampaikan, tulis di kolom komentar.
Good luck!
0 Komentar untuk " Tutorial belajar css # Mendesain web html dengan css"
Silahkan berkomentar dengan baik dan bijak!