bewoksatukosong.com - Halo teman - teman, Kali ini om bewok bakal bahas Mengenai Widht dan Height, jadi kalau kalian telah membuat background, color tapi kalian gatau caranya membuat width dan height hmmm belum afdol rasanya. Untuk itu mari kita pelajari dengan santai tapi serius.
width : lebar
height : tinggi
Siapa tau ada yang ga tau artinya. hehe
Jadi intinya fungsi ini untuk membuat lebar dan tinggi seperti yang kita mau, oh iya mungkin bakal om bewok jelasin lagi mengenai konsep % di width dan height, mungkin kalian sering banget liat untuk panjang dan lebar menggunakan (px), nah bukan berarti ga bagus sih, tapi sekarang jamanya mulai ke mobile, Sehingga kita harus mengikuti ukuran layar semua hp agar mudah di lihat, untuk itu kita menggunakan persen %, Jadi jari kita ga cape buat geser- geser hehe. Langsung aja ya om bewok kasih contohnya
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
#bewok {
max-width:100%;
height:80px;
background:#1abc9c;
color:#ffffff;
}
</head>
<body>
<div id="bewok">
<h1>
halo lagi pada ngapain semuanya ?
</h1>
</div>
</body>
</html>
Maka hasilnya bisa lihat dibawah ini
 |
| Gambar 1.1 width & height menggunakan % |
Nah mungkin masih bertanya - tanya kenapa menggunakan
max-width :
max : maksimal
widht : lebar
Lebar maksimal maksudnya yang mana ketika kita sudah ketikan maksimal, berarti lebar maksimalnya hanya 100% ga bakal bisa lebih,
Tapi kalau menggunakan width saja, bisa sampai ujung jika menggunakan 100% atau menggunakan px.
Kalau px bakal nempel sama ujungnya, tapi kalau yang % tanpa menggunakan margin atau padding tidak akan sampai ujung, tapi kalau sudah di kasih margin, dan padding pasti bakal sampai ujung.
Nah bedanya dengan si max-width ini, kita kasih margin, padding tidak akan sampai ujung agar dapat mengikuti layar mobile
Itu saja TUTORIAL MENGENAI WIDTH DAN HEIGHT PADA CSS, Selanjutnya kita akan mempelajari TUTORIAL CSS PART 6 : BELAJAR BORDER PADA CSS
Tapi kalau menggunakan width saja, bisa sampai ujung jika menggunakan 100% atau menggunakan px.
Kalau px bakal nempel sama ujungnya, tapi kalau yang % tanpa menggunakan margin atau padding tidak akan sampai ujung, tapi kalau sudah di kasih margin, dan padding pasti bakal sampai ujung.
Nah bedanya dengan si max-width ini, kita kasih margin, padding tidak akan sampai ujung agar dapat mengikuti layar mobile
Itu saja TUTORIAL MENGENAI WIDTH DAN HEIGHT PADA CSS, Selanjutnya kita akan mempelajari TUTORIAL CSS PART 6 : BELAJAR BORDER PADA CSS
Assalamualaikum om saya baru buka web om . alhamdulillah tutorialnya sangan mudah dimengerti. oh ya mau nanya
ReplyDeleteyang script ini sengaja ga dikasih ya soalnya eror kalo langsung docopy hehe #bewok {
max-width:100%;
height:80px;
background:#1abc9c;
color:#ffffff;
}
makasih om
halo bro samsul pajar apa nih nama panggilanya pajar ya ? eh atau samsul ye. apa aja dah
Deletehehe ga error kok bro, bisa cek lg deh artikelnya terus menuju ke jsfiddle lihat di tulisan result nya hehe.
selamat berkoding bro
samsul aja om bewok, kalo dipisah html sama css mah ga eror om hehe tp pas pertama samsul langsung copy yang script pertama kan nyatu tuh itu eror ( kya css internal )
Deletesi koding ininya
#bewok {
max-width:100%;
height:80px;
background:#1abc9c;
color:#ffffff;
}
harus pake style baru jalan, kirain samsul sengaja biar pembaca bisa belajar karena erornya hehe
tp lumayan jd inget ke css internal hehe
siap om. samsul pastipantengin nih web om. ampe bisa bikin web terus dihosting hehe makasih om ilmunya bermanfaat
samsul aja om bewok, kalo dipisah html sama css mah ga eror om hehe tp pas pertama samsul langsung copy yang script pertama kan nyatu tuh itu eror ( kya css internal )
ReplyDeletesi koding ininya
#bewok {
max-width:100%;
height:80px;
background:#1abc9c;
color:#ffffff;
}
harus pake style baru jalan, kirain samsul sengaja biar pembaca bisa belajar karena erornya hehe
tp lumayan jd inget ke css internal hehe
siap om. samsul pastipantengin nih web om. ampe bisa bikin web terus dihosting hehe makasih om ilmunya bermanfaat
haha iya harus pake style
Deletelupa om bewok, makasih udah di ingetin, nanti om bewok perbaikin hehe.
wah om bewok seneng nih kalau ada yang betah, makasih ya , ayo semangat - semangat belajarnya, kalau ga ngerti tanya aja hehe
siap siap om, nanti pasti bertanya. makasih udah membalas comemd samsul hehe
Deleteoh ya om bewok mw nanya nih, kalo samsul udha beres nih css bagusnya diterusin belajar apa ? bootsrap bisa ? soalnya kemaren teh mw belajar bootstrap tp pas baca bootstrap harus bisa dulu css hehe
ReplyDeleteAs a Newbie, I am always exploring online for articles that can be of assistance to me. Thank you web design in new york
ReplyDeleteAw, this was a very nice post. In thought I want to put in writing like this moreover ?taking time and actual effort to make a very good article?however what can I say?I procrastinate alot and certainly not appear to get one thing done. nyc web designer
ReplyDelete