Home css Point-Point Penting Dalam Mengatur Letak elemen HTML Dengan CSS

Point-Point Penting Dalam Mengatur Letak elemen HTML Dengan CSS

Pada kesempatan kali ini Point Website akan memberikan tutorial cara mengatur elemen HTML dengan CSS, tutorial ini sangat sederhana namun sangat penting untuk dipelajari. Fungsi kita mempelajari cara mengatur sebuah elemen HTML dengan CSS ini, agar memudahkan kita dalam membuat layout website nantinya. Oleh sebab itu sebelum teman-teman membuat layout website ada baiknya teman-teman mengenal Point-Point Penting Dalam Mengatur Tataletak elemen HTML Dengan CSS. Dibawah ini saya sudah membuat contoh code HTML dan CSS dalam mengatur beberapa elemen, silahkan teman-teman tulis cede berikut ini, dan simpan dengan nama index.html.
<!DOCTYPE html>
<html>
<head>
 <title>Point Website</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="wrapper"> 
  <div id="kiri1">KIRI</div>
  <div id="tengah1">TENGAH</div>
  <div id="kanan1">KANAN</div>

  <div id="kiri2">KIRI</div>
  <div id="tengah2">TENGAH</div>
  <div id="kanan2">KANAN</div>

  <div id="kiri3">KIRI</div>
  <div id="tengah3">TENGAH</div>
  <div id="kanan3">KANAN</div>

  <div id="vertikal1">KIRI</div>
  <div id="vertikal2">KIRI</div>
  <div id="vertikal3">KIRI</div>

  <div id="vertikal4">TENGAH</div>
  <div id="vertikal5">TENGAH</div>
  <div id="vertikal6">TENGAH</div>

  <div id="vertikal7">KANAN</div>
  <div id="vertikal8">KANAN</div>
  <div id="vertikal9">KANAN</div>
  </div>
</body>
</html> 
Jika teman-teman jalankan pada browser maka dapat kita lihat setiap alemen HTML yang sudah kita buat akan berada di sisi kiri, itu disebabkan karena elemen HTML nya belum diatur. Untuk mengatur nya kita menggunakan CSS. Silahkan teman-teman tulis code CSS berikut ini dan disimpan dengan nama style.css kemudian diletakan pada folder yang sama dengan index.html yang sudah kita buat sebelumnya.
#wrapper {
 background-color: #989898;
 width: 960px;
 height: 522px;
 border: 1px solid black;
 margin: auto;
}

#kiri1 {
 background-color: #70c2fd;
 float: left; 
 width: 400px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#tengah1 {
 background-color: #1fc5ae;
 float: left;
 width: 400px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#kanan1 {
 background-color: #FF9800;
 float: left;
 width: 142px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#kiri2 {
 background-color: #70c2fd;
 float: left; 
 width: 500px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#tengah2 {
 background-color: #1fc5ae;
 float: left;
 width: 342px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#kanan2 {
 background-color: #FF9800;
 float: left;
 width: 100px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#kiri3 {
 background-color: #70c2fd;
 float: left; 
 width: 340px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#tengah3 {
 background-color: #1fc5ae;
 float: left;
 width: 102px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#kanan3 {
 background-color: #FF9800;
 float: left;
 width: 500px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#vertikal1 {
 background-color: #70c2fd;
 float: left; 
 width: 102px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#vertikal2 {
 background-color: #1fc5ae;
 float: left;
 width: 340px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
 clear: both;
}

#vertikal3 {
 background-color: #FF9800;
 float: left;
 width: 500px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
 clear: both;
}

#vertikal4 {
 background-color: #70c2fd;
 float: left;
 width: 102px;
 border: 1px solid black;
 margin-top: 2px;
 padding: 10px 0px;
 margin-left: 400px;
 text-align: center;
}

#vertikal5 {
 background-color: #1fc5ae;
 float: left;
 width: 340px;
 border: 1px solid black;
 margin-top: 2px;
 padding: 10px 0px;
 margin-left: 400px;
 text-align: center;
}

#vertikal6 {
 background-color: #FF9800;
 float: left;
 width: 500px;
 border: 1px solid black;
 margin-top: 2px;
 padding: 10px 0px;
 margin-left: 400px;
 text-align: center;
}

#vertikal7 {
 background-color: #70c2fd;
 float: right; 
 width: 102px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
}

#vertikal8 {
 background-color: #1fc5ae;
 float: right;
 width: 340px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
 clear: both;
}

#vertikal9 {
 background-color: #FF9800;
 float: right;
 width: 500px;
 border: 1px solid black;
 margin: 2px;
 padding: 10px 0px;
 text-align: center;
 clear: both;
}
jika teman-teman jalankan pada browser maka hasil nya akan seperti ini.

mengatur letak elemen html

Jika teman-teman perhatikan dalam code css nya, pada bagian #wrapper width (lebar) sudah kita buat yaitu 960px, maka dari itu tidak boleh ada elemen yang melewati batas tersebut, jika teman-teman mau menambahkan element lain pada html yang sudah teman-teman buat kemudia menambahkan css nya pastikan element tersebut tidak boleh lebar nya lebih dari elemen wrapper (pembungkus luar), agar lebih mudah dalam memahami nya coba teman-teman ganti value-value yang ada pada code CSS tersebut kemudian teman-teman amati hasilnya.
Tutorial ini hanya dasar untuk mengatu elemen HTML masih banyak property-property lain dari CSS yang dapat digunakan untuk mengatur elemen HTML, contoh position, overflow,z-index dan lain sebagainya. Sekian tutorial tentang Point-Point Penting Dalam Mengatur Letak elemen HTML Dengan CSS semoga dapat membantu teman-teman dalam membuat dan mempelajari website.

7 comments:

  1. AnonymousNovember 26, 2016 at 10:17 AM

    bermanfaat nih bro, jadi tambah ilmu

    ReplyDelete
  2. Alex MarcoNovember 26, 2016 at 12:21 PM

    thanks gan..

    ReplyDelete
  3. TechNovember 26, 2016 at 1:13 PM

    Pas banget buat pemula kaya saya. Thx y

    ReplyDelete
  4. AnonymousNovember 26, 2016 at 2:53 PM

    Rumit juga ya gan.. main kode css 😃

    ReplyDelete
  5. X-DreamerNovember 26, 2016 at 2:59 PM

    Kalo css web jauh lebih rumit di banding wap.

    ReplyDelete
  6. AdminDecember 5, 2016 at 6:04 AM

    Lumayan punyeng saya... Hauftt....

    ReplyDelete
  7. Alex MarcoDecember 5, 2016 at 7:15 AM

    hahahah...
    makasi gan udah mampir..
    jika teman-teman pusing berarti teman-teman udah mulai ngerti.. :D

    ReplyDelete

Subscribe to: Post Comments ( Atom )
(c) eLMarco94. Powered by Blogger.