MEMBUAT TAMPILAN LAYOUT SEDERHANA HTML DAN CSS

-
kali ini saya akan memberikan tips membuat tampilan layout sederhana menggunakan html dan css.
langsung saja anda menuju ke langkah yang pertama :

Membuat file index

  • Buat file baru dengan nama index.html
  • Isikan source code berikut dalam file index.html.
<html>
  <head>
    <title>Layout Web News</title>
    <link href="style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
  <center>
  <div id="wrapper">
    <div id="menu">
     MENU
    </div>
    <div id="pencarian">
     PENCARIAN
    </div>
    <div id="logo">
     LOGO
    </div>
    <div id="header">
    HEADER
    </div>
    <div id="nav">
    NAV
    </div>
    <div id="berita1">
    BERITA 1
    </div>
    <div id="berita2">
    BERITA 2
    </div>
    <div id="berita3">
    BERITA 3
    </div>
    <div id="login">
    LOGIN
    </div>
    <div id="footer">
    FOOTER
    </div>
  </div>
  </center>
</html>



File style dengan nama file: style.css


#wrapper{ width:1000px;
                   height:750px;
                   background:grey;
                   margin-top:10px;
                   margin-left:10px;
                   margin-bottom:10px;
                   margin-right 10px;
                   padding:10px;        
}
#menu { margin-bottom:10px;
               height:50px;
               width:750px;
               background:aqua;
               float:left;
}
#pencarian { margin-bottom:10px;
                      margin-left:50px;
                      height:50px;
                      width:200px;
                      background:red;
                      float:left;
}
#logo { margin-bottom:10px;
             margin-right:20px;
             height:150px;
             width:150px;
             background:yellow;
             float:left;
}
#header { margin-bottom:10px;
                 height:150px;
                 width:810px;
                 background:green;
                 float:left;
                 padding:10px;   
}
#nav {margin-bottom:10px;
               height:50px;
               width:1000px;
               background:aqua;
               float:left;}
#berita1 { margin-bottom:10px;
                 margin-right:20px;
                 height:250px;
                 width: 250px;
                 background:blue;
                 float:left;
                 clear:both;
}
#berita2 {  margin-bottom:10px;
                  margin-right:20px;
                  margin-left:260px;
                  margin-top:-260px;
                  height:250px;
                  width: 250px;
                  background:blue;
                  float:left;
                  clear:both;
} 
#berita3 { margin-bottom:10px;
                margin-right:20px;
                margin-left:520px;
                margin-top:-260px;
                height:250px;
                width: 250px;
                background:blue;
                float:left;
                clear:both;
}
#login { margin-bottom:10px;
             margin-left:800px;
             margin-top:-260px;
             height:200px;
             width:200px;
             background:brown;
             float:left;
}
#footer { margin-bottom:10px;
               height:150px;
               width:1000px;
               background:aqua;
               float:left;
               padding:0px;     
}


Save semua file dalam 1 folder.
Untuk Melihat hasilnya yaitu dengan cara buka file index.html di browser seperti Mozilla Firefox,Google Chrome dan lain sebagainya.

Dan inilah hasilnya :



Demikian sedikit artikel mengenai belajar membuat layout sederhana menggunakan html dan css.
Semoga artikel saya ini dapat memberikan manfaat untuk anda dalam menyusun sebuah web.

Comments

Post a Comment

Popular posts from this blog

cara menggunakan hero kagura mobile legends

-
Image
Pasti Anda sudah tahu siapa Kagura? Ya, Kagura adalah hero mage dalam permainan mobile legends yang indah dan penampilan yang ramai. anda dapat membeli hero ini dengan 32.000 battle poin atau dengan berlian 599. Lalu bagaimana cara untuk menggunakan pahlawan ini dengan baik dan benar? Mari kita lihat secara langsung  Sebelum kita mulai tips-nya, di sini adalah sedikit latar belakang dari hero Kagura:  Onmyouji Master adalah seorang master seni Yin Yang, dikendalikan oleh Roh-roh yang kuat, yin dan yang. Keluarga Kagura adalah yang tertua dan terkuat dari klan Onmyouji, yang terkuat di antara nenek moyang. Kagura, sebagai salah satu  Keluarga Onmyouji paling ampuh , dia diberikan Seimei payung (Seimei Umbrella), pusaka yin seni telah diturunkan dari generasi ke generasi. Legenda mengatakan bahwa payung telah disaring Seimei besar dengan menggunakan kekuatan dari ribuan hantu, yang sekarang memiliki hidup dan kebijaksanaan yang hanya dapat dikontrol oleh ...
Read more

CARA MENGATUR UKURAN KERTAS DI MICROSOFT WORD

-
Image
pada kesempatan kali ini saya akan memberikan tip atau trik untuk mengatur ukuran kertas di microsoft word. mengatur ukuran kertas pada Microsoft word adalah hal yang penting dan perlu dilakukan. Terlebih lagi ketika anda membuat makalah, tugas akhir atau skripsi. Biasanya ada aturan dan syarat tertentu yang harus dipenuhi diantaranya yaitu ukuran kertas yang pas. ok langsung saja kita menuju tutorialnya..... mengatur ukuran kertas. 1. Nyalakan komputer anda dan segera jalankan Microsoft Word yang anda miliki 2. Dari jendela kerja Microsoft Word, klik Tab Menu "Page layout" kemudian klik "Size". setelah anda klik size maka tampilan link nya akan seperti ini. nah setelah keluar tampilan sepeti ini anda bisa memilih ukuran kertas yang di rekomendasikan. Sampai di sini saya kira anda sudah tahu dan paham caranya kan ? Oke sekarang kita lanjutkan ! Apabila anda tidak menemukan atau tidak tersedia pada menu Microsoft Word ? Seperti jika anda sering men...
Read more

MEMBUAT AKUN DI PADLET

-
Image
pada postingan sebelumnya saya telah membahas apa itu padlet. kali ini saya akan memberikan sedikit tips untuk membuat akun di padlet. ok langsung saja menuju link berikut  https://id.padlet.com/ setelah anda masuk nanti tampilannya akan seperti di bawah ini kemudian anda pilih menu login, tampilannya seperi berikut sebaiknya pilih akun google+ jika anda punya, jadi secara otomatis terhubung dengan gmail atau akun facebook. mudah dan simple kan... Demikian sedikit artikel mengenai membuat akun baru di padlet. semoga bermanfaat ....
Read more