Cara membuat layout website menggunakan CSS
Dalam pembuatan website diperlukan sebuah desain awal dari web yang akan kita
buat sebagai sebuah dasar dari pembuatan web untuk mempermudah kita membuat
website secara kompleks .Desain awal yang saya maksud adalah sebuah kerangka
atau pun layout dari website yang akan kita buat tujuan dari pembuatan layout
terlebih dahulu adalah untuk membantu kita mendesain tata letak dari website
mulai dari nama webite ,logo/gambar,konten,menu,link,footer dll.
Untuk cara pembuatan
layout website yang saya buat saya menggunakan aplikasi notepad++ untuk membuat
script html dan css ,selain menggunakan notepad++ anda juga bisa menggunakan
aplikasi lain seperti menggunakan dreamweaver versi apa saja,dan tentu saja
untuk menampilkan website yang kita buat bisa menggunakan browser jenis apa
saja. Pada pembuatan web menggunakan html dan juga css ini saya buat script
html dan css nya terpisah yang mana script htmlnya diberi nama dengan ekstensi
dot (.)html contoh: webgw.html ,dan cssnya dengan ekstensi dot (.) css contoh:
style.css.sebnarnya Untuk menggunakan CSS, ada dua cara
yang bisa dipakai, yaitu dengan cara memasukan langsung script CSS pada tag
<style> di dalam tag <head>…</head>, atau bisa juga dengan
mnggunakan link yang menghubungkan antara file HTML dengan file CSS.Berikut ini
adalah contoh script yang memakai cara pertama:
<head>
<title>Coba</title>
<style>
//script CSS
</style>
</head>
Lalu cara kedua :
<head>
<title>Coba</title>
<link type="text/css” rel="stylesheet” href="css/style.css" >
</head>
body {
background-color:gray;
font-size:20px;
text-align:center;
}
#wrapper {
background-color:black;
width:990px;
}
#nama {
margin-bottom:5px;
padding:15px;
background-color:green;}
#logo {
font-size:35px;
margin-bottom:5px;
padding:40px;
height:80px;
background:red
}
#menu {
margin-bottom:5px;
padding:15px;
background-color:green;
}
#kiri {
margin-right:5px;
margin-bottom:5px;
height:600px;
float:left;
width:180px;
background-color:blue;
}
#konten {
font-size:28px;
margin-bottom:5px;
height:600px;
float:left;
width:620px;
background-color:orange;
}
#kanan {
margin-left:5px;
margin-bottom:5px;
height:146px;
float:right;
width:180px;
background-color:blue;
}
#bawah{
margin-top:5px;
clear:both;
padding:15px;
height:50px;
background-color:chocolate;
}
Untuk penjeleasan scriptnya sebagai berikut:
background-color:gray;
digunakan untuk memberi warna background yang mana
pada perintah diatas backgroundnya berwarna gray atau abu-abu.
font-size:20px;
digunakan untuk memberi unruan font atau huruf
dengan nilai 2o pixel.
text-align:center;
digunakan untuk menentukan posisi text center atau
rata tengah.
width:990px;
digunakan untuk mendefinisikan ukuran lebar dengan
lebar 990 pixel.
margin-bottom:5px;
digunakan untuk memberi jarak dengan section
bawahnya denagn jarak 5 pixel.selain margin-bottom ada margin-top,margin-right
dan margin-left.
float:right;
digunakan untuk mendefinisikan posisi dari section
yaitu pada posisi kanan
height:600px;
digunakan untuk mengatur panjangnya dengan panjang
600 pixel.
clear:both;
digunakan untuk menonaktifkan float left dan right.
Lalu
jika sudah scriptnya harus disimpan dengan nama style.css jika anda ingin
membuat nama css yang berbeda silahkan anda ganti link css pada script htmlnya
dengan nama script css yang anda inginkan.jika sudah coba masuk ke folder dimana
anda meletakkan file html lalu anda klik 2 kali script htmlnya dan lihat
hasilnya akan sebagai berikut:
Membuat Tabs dengan CSS
Styling dengan CSS
Setelah kita membuat struktur html dari tab tersebut, tentu ini belum akan berbentuk tab, perlu di desain atau diberi style dengan menggunakan css, seperti ini lah kode css yang kita gunakan
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: #5B264E;
font-family: "Open Sans", "Arial";
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: #B7977B;
}
main {
background: #FFF;
width: 500px;
margin: 50px auto;
padding: 10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
font-size: 13px;
}
/* Important code */
input, section {
clear: both;
padding-top: 10px;
display: none;
}
label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
border-top: 2px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #DDD;
}
label:hover {
cursor: pointer;
text-decoration: underline;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
display: block;
}
input:checked + label {
border-top-color: #B7977B;
border-right-color: #DDD;
border-left-color: #DDD;
border-bottom-color: transparent;
text-decoration: none;
}
Kode CSS untuk Tab
Yang paling penting di perhatikan pada kode diatas adalah kode yang kami tandai dengan /* Important Code */ sampai dengan akhir.
Dimana kode tersebut lah yang merubah tag input menjadi berbentuk tab, kenapa menggunakan input tipe radio? karena tab biasanya hanya memiliki satu bagian yang aktif sedangkan yang lain akan tertutup, untuk itu hanya input bertipe radio yang memungkinkan untuk di pilih seperti itu.
Jadi logika sederhanya begini: tag section pada saat diload akan disembunyikan, ketika salah satu ID tab sedang aktif (salah satu input radio dipilih), maka konten dari ID tersebut akan ditampilkan, dengan menggunakan perintah display:block
Nama : Neng Sari
Kelas : XI RPL 1
No comments:
Post a Comment