TUTORIAL CSS PART 5 : MEMBUAT WIDTH DAN HEIGHT PADA CSS - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Sunday, May 15, 2016

TUTORIAL CSS PART 5 : MEMBUAT WIDTH DAN HEIGHT PADA CSS


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

7 comments:

  1. Assalamualaikum om saya baru buka web om . alhamdulillah tutorialnya sangan mudah dimengerti. oh ya mau nanya

    yang script ini sengaja ga dikasih ya soalnya eror kalo langsung docopy hehe #bewok {
    max-width:100%;
    height:80px;
    background:#1abc9c;
    color:#ffffff;
    }

    makasih om

    ReplyDelete
    Replies
    1. halo bro samsul pajar apa nih nama panggilanya pajar ya ? eh atau samsul ye. apa aja dah

      hehe ga error kok bro, bisa cek lg deh artikelnya terus menuju ke jsfiddle lihat di tulisan result nya hehe.

      selamat berkoding bro

      Delete
    2. 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 )

      si 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

      Delete
  2. 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 )

    si 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

    ReplyDelete
    Replies
    1. haha iya harus pake style

      lupa 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

      Delete
    2. siap siap om, nanti pasti bertanya. makasih udah membalas comemd samsul hehe

      Delete
  3. oh 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

    ReplyDelete