Membuat Layout Sederhana Dengan Menggunakan CSS dan DIV

Assalaualaikum wr.wb~
Kali ini saya akan membagikan tutorial bagaimana membuat layout web sederhanana dengan menggunakan tag

, langsung saja kita lihat kebawah …
Untuk membuat sebuah layout sederhana sebenarnya kita juga bisa medesain nya dengan menggunakan Photoshop atau corel draw lalu dikonversi ke notepad++ atau aplikasi lainnya yang anda gunakan untuk menuliskan coding.
Tapi kali ini kita akan menggunakan cara manual dengan menuliskan codingnya sendiri; yang pertama harus kita lakukan adalah membuat coding html nya terlebih dahulu.




.:CSS div:.


Reach The World With Word | study hard and than you can do anythings

Kategori

Novel
puisi
Drama


Lalu setelah itu kita bisa membuat css nya. Penulisa script css kita lakukan diluar dari script html ini dilakukan agar script lebih rapi dan juga memudahkan kita dalam melihat atau merubah script hingga kita tidak merasa dipusingkan dengan kompleksnya script yang ada.

.kiri {
float:left;
background-color:#ffe4c4;
width:98px;
padding:40px;
border: 2px solid;
height:600px;
margin-left:15%;

}
.tengah{
float:left;
background-color:#fa8072;
width:358px;
padding:40px;
border: 2px solid;
height:600px;

}
.kanan{
float:left;
background-color:#ffe4c4;
width:195px;
padding:40px;
border: 2px solid;
height:600px;

}
.header {
background-color:blue;
width:900px;
height:345px;
border: 2px solid;
margin-left:15%;
}
.footer {
background-color:#ff69b4;
float:left;
padding:30px;
border:0px solid;
margin:1px;
width:840px;
margin-left:15%;
}
.a:hover {color:blue;}
div {
text-align:center;
}
.running-text {
background-color : #ffb6c1;
width:902px;
border: 2px solid;
width:900px;
margin-left:15%;}

Kita hubungkan kedua script diatas dengan link;

Link tersebut kita letakkan di file html yang secara otomatis akan menghubungkannya dengan file css yang telah kita buat. Setelah itu bisa kita jalankan pada browser.

Sekian tutorial sederhana yang dapat saya bagikan, silahkan kunjungi chanel youtube dibawah ini jika anda tertarik untuk mempeljari pemograman lebih jauh: CukupCahya.

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*