Mengenal Apa Itu Css

Sebelum kita berguru ada baik nya kita mengenal dan mengerti dulu apa yang akan kita pelajari semoga lebih gampang nantinya untuk teman-teman sanggup mengerti, dalam perkara ini kita akan mempelajari wacana css, pertanyaan yang paling fundamental yaitu apa itu css?.

CSS yaitu abreviasi dari Cascading Style Sheet. CSS merupakan salah satu aba-aba pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS yaitu sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan sampai ketika ini. CSS telah mendukung banyak bahasa markup menyerupai HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke CSS3. CSS dipakai oleh web programmer dan juga blogger untuk memilih warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa aba-aba css.

Dalam mempelajari website teman-teman harus tau apa itu css dan bagaimana cara menggunakannya, dengan demikian teman-teman akan sangat gampang nantinya untuk menciptakan dan merancang website teman-teman.

Yang harus dimengerti dalam berguru CSS

Cascading Style Sheet atau CSS setiap penulisannya terdiri dari Selektor, Properti dan Value,seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga mempunyai hukum dalam penulisan nya semoga lebih terang maka teman-temanharus tau dulu apa itu Selektor, Attribut, Value.

Selektor yaitu elementatau tag HTML di definisikan atau yang ingin kita ubah baik itu letak, warna, tinggi, besar dan lain sebagainya, properti yaitu attribut yang ingin di ubah nilai nya, sedangkan Value yaitu Nilai yang akan di berikan kepada attribut, apakah nilai nya itu berupa warna, ukuran, letak, dan lain sebagainya. Agar lebih gampang dipahami mari kita liat pola CSS berikut ini :

Body {background-color: white;}

‘Body’ yaitu Selektor, ‘{ }’ yaitu deklarasi, ‘background-color’ yaitu Attribut dan ‘white’ yaitu nilai. Maksud dari aba-aba diatas yaitu mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.

Sekian pengenalan kita wacana css, untuk penggunaan CSS selanjutnya akan aku bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Cara Menghubungkan File Html Dengan Css

Untuk menghubungkan file HTML dengan CSS, Bisa di lakukan dengan 3 cara, adalah Inline Style, Embedded Style, Link Style. Nah untuk terang nya mari kita liat rujukan dibawah ini.

1. Inline Style

Inline Style merupakan cara menghubungkan file CSS pribadi ke dalam element HTML

Berikut rujukan untuk penulisannya.

<html>

                <head>

                                <body style="background-color:#DFDFDF;">

                        <h1 style="color:red; font-size;15px ;text-align:center;"> Ini rujukan memakai inline style </h1>

                                </body>

                </head>

</html>

2. Internal Style

Internal Style hampir sama dengan Inline Style merupakan cara menghubungkan file CSS Tepat di didalam syntax HTML, Penulisannya sempurna diantara pembuka tag <head> dan epilog tag </head>.

Berikut rujukan untuk penulisannya.

<html>

                <head>

                                <style>

                                                                body        {

                                                                background-color:#DFDFDF;

                                                                }

                                                               

                                                                h1 {

                                                                text-align:center;

                                                                font-family:Century;

                                                                font-size:16pt;

                                                                }

                                                               

                                                                p {

                                                                text-align:left;

                                                                font-family:Century;

                                                                font-size:14pt;

                                                                }

                                </style>

               </head>

                                                <body>

                                                                <h1> Contoh Penulisan syntax untuk Internal Style </h1>

                                                                <h2>Contoh lain nya dari </h2>

                                                </body>

               

</html>

Pada rujukan diatas sanggup kita liat Syntax CSS berada sempurna di antara tag pembukan <head> dan tag epilog </head>

3. Eksternal Style

Sama menyerupai nama nya, Eksternal Style merupakan cara menghubungkan file CSS terpisah dengan HTML dan penghubungannya memakai link, Penulisan linknya sempurna berada di antara pembuka tag <head> dan epilog tag head </head>.

Berikut rujukan penulisannya dari file CSS nya.

body {

     background-color:#DFDFDF;

     }

                               

h1  {

    text-align:center;

    font-family:Centuryl

    font-size:16pt;

    }

                               

h2  {

    text-align:left;

    font-family:Century;

    font-size:14pt;

    }

File di atas simpan dengan nama file.css ( Nama terserah anda, yang penting ekstensinya .css )

Berikut rujukan penulisan untuk Link penghubung pada HTML nya.

<html>

                <head>

                <link href="file.css" rel="stylesheet" type="text/css">

                </head>

                        <body>

                                <h1> Contoh penulisan syntax untuk Eksternal Style </h1>

                                <h2> </h2>

                        </body>

</html

Untuk menggabungkan kedua file tersebut memakai Tag <link href=”nama file css yang anda buat” rel=”stylesheet” type=”text/css”>.

Sekian tutorial CSS dasar ihwal Cara menghubungkan CSS dengan HTML, Untuk penggunaan CSS selanjutnya akan saya bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Mengenal Selector, Property Dan Value Pada Css

Pengertian Selector CSS

Karena instruksi CSS digunakan untuk mengubah atau memanipulasi tampilan dari element HTML, CSS membutuhkan sebuah cara untuk mengaitkan atau menghubungkan instruksi CSS dengan tag HTML yang sesuai atau yang diinginkan. Hal inilah yang dimaksud dengan Selector dalam CSS.

Pengertian Property CSS

Property CSS yaitu jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS mempunyai puluhan property yang sanggup digunakan semoga menampilkan hasil tamat yang kita inginkan. Hampir semua property dalam CSS sanggup digunakan untuk seluruh selector. Jika selector digunakan contohnya untuk “mencari seluruh tag <p>“, maka property yaitu “efek apa yang ingin dimanipulasi dari tag p tersebut“, menyerupai ukuran text, warna text, jenis fontnya, dll.

Pengertian Value CSS

Value CSS yaitu nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya sanggup berupa red, blue, black, white dan lain-lain.

Untuk lebih jelasnya wacana selector, property dan value pada CSS, sanggup dilihat pada gambar dibawah ini:

Untuk lebih memudahkan teman-teman sanggup mencoba nya silahkan buka text editor teman-teman dan tulis code HTML di bawah ini dan simpan dengan nama index.html.

<!DOCTYPE html>
<html>
  <head>
     <title></title>
     <link href="style.css" rel="stylesheet">
  </head>
  <body>
<h1 id="judul">Judul Artikel</h1>

<p id="paragraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

kemudin kita tulis code untuk CSS nya menyerupai berikut :

#judul {

       font-size:30px;
       color: blue;
}

#paragraf {

       color:red;
       font-size: 1em;
}

Pada code di atas kita menghubungkan HTML dan CSS mengunakan Eksternal Style untuk yang belum mengerti wacana Eksternal Style sanggup dibaca tutorial nya disini. Oke kita lanjutkan sehabis teman-teman menuliskan code CSS diatas, teman-teman sanggup menyimpan nya dengan nama style.css dan letakkan pada folder yang sama dengan index.html dan silahkan teman-teman menjalankan nya pada browser. 

Sedikit klarifikasi wacana code CSS di atas, yang menjadi Selector nya yaitu #judul dan #paragraf, yang menjadi Property nya yaitu font-size dan color, dan lalu yang menjadi value nya yaitu red, 30px, blue, dan 1em.

Sekian pengenalan kita wacana Selector,Property dan Value untuk penggunaan CSS selanjutnya akan aku bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Cara Menciptakan Komentar Pada Html

Seperti halnya bahasa pemogram lain HTML juga mempunyai sintak untuk menulis comentar, dimana comentar ini sangat berkhasiat sebagai penanda pada file HTML. Untuk menciptakan komentar pada HTML, kita memakai awalan <!-- dan epilog -->. Agar lebih gampang dipahami, eksklusif saja kita simak dalam bentuk contoh. Silahkan tulis instruksi HTML berikut.

Contoh penggunaan tag komentar HTML :

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<!-- <p>Ini berada di dalam tag komentar, dan tidak akan tampil di browser</p> -->

<p>Ini bukan komentar, dan akan tampil di browser</p>

                <!-- <p>Ini berada di dalam tag komentar,

dan tidak akan tampil di browser</p> -->

<p>Ini bukan komentar, dan akan tampil di browser</p>

                <!-- <p>Ini berada di dalam tag komentar, 

dan tidak akan tampil di browser</p> -->

</body>

</html>

Hasil dari code HTML diatas akan menyerupai berikut ini :

Dari hasil code diatas sanggup kita lihat bahawa setiap yang memakai tag pembuka <!--dan tag epilog -->tidak akan ditampilkan dalam web browser sebab tag tersebut yakni sebuah comentar.Selain sebagai penanda atau catatan, tag komentar juga akan berkhasiat untuk menciptakan sebagian isi web tidak tampil untuk sementara. hal ini sangat berkhasiat bila kita ingin mencoba banyak sekali tampilan instruksi HTML yang akan dibuat, tetapi tidak ingin menghapus instruksi sebelumnya.

Perlu juga menjadi catatan bahwa walaupun komentar tidak ditampilkan pada web browser, tetapi seseorang masih sanggup membaca komentar tersebut dengan cara melihat source halaman HTML. Oleh sebab itu, sebaiknya kita tidak menambahkan komentar yang sensitif atau bersifat rahasia, sepertiusername atau password.

Sekian tutorial singkat wacana Cara Membuat Comentar pada HTML,semoga sanggup membantu teman-teman dalam mempelajari HTML. Untuk tutorial yang lain akan aku bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Cara Menciptakan Paragraf Dalam Html

Pada sebuah website niscaya mempunyai Paragraf, paragraf ialah komponen yang tidak sanggup dipisahkan dari sebuah halaman website baik itu digunakan pada postingan, komentar, dan lain sebagainya. Nah pada tutorial kita kali ini saya akan membahas cara menciptakan paragraf di HTML. 

HTML menyediakan tag khusus untuk menciptakan paragraf. Penulisannya memakai aksara p, sebagai berikut : <p>Isi dari sebuah paragraf</p>. Untuk lebih gampang di mengerti teman-teman sanggup menuliskan tumpuan coding dibawah ini :

<!DOCTYPE html>

<html>

<head>

<title>Point Website</title>

</head>

<body>

<p>Ini ialah paragfar saya yang pertama, Ini ialah paragfar saya yang pertama

  Ini ialah paragfar saya yang pertama, Ini ialah paragfar saya yang pertama.</p>

<p>Ini ialah paragfar saya yang kedua, Ini ialah paragfar saya yang kedua

  Ini ialah paragfar saya yang kedua, Ini ialah paragfar saya yang kedua.</p>

  Ini bukan sebuah paragraf,  ini bukan sebuah paragraf  Ini bukan sebuah paragraf, 

   Ini bukan sebuah paragraf,          ini bukan sebuah paragraf

             ini bukan sebuah paragraf         ini bukan sebuah paragraf

</body>

</html>

Save sebagai paragraf.html, kemudian jalankan pada web browser.  

Dari hasil tumpuan diatas kita sanggup melihat bahwa baris satu dan baris dua ialah paragraf, setiap tag paragraf, web browser akan menunjukkan spasi antar paragraf. Sedangkan pada baris ketiga itu bukan sebuah paragraf dikarenakan itu ditulis tanpa memakai tag <p>.

Perhatikan baris ketiga pada gambar hasil dari code html tadi, kita lihat bahwa hasil nya bahwa paragraf tersebut tidaklah berada pada baris berbeda, namun berada pada satu baris yang sama. Perlu teman-teman perhatikan bahwa Dalam HTMLspasi akan diabaikan.

Tag Break (<br>)

Pada HTML juga mempunyai tag<br> yang berfungsi untuk memisahkan paragraf satu dengan paragraf lain nya, <br> ialah abreviasi dari break. Agar gampang teman-teman untuk mengerti mari kita modifikasi code nya tadi menjadi menyerupai ini :

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<p>Ini ialah paragfar saya yang pertama, Ini ialah paragfar saya yang pertama<br>

  Ini ialah paragfar saya yang pertama, Ini ialah paragfar saya yang pertama.</p>

<p>Ini ialah paragfar saya yang kedua, Ini ialah paragfar saya yang kedua<br>

  Ini ialah paragfar saya yang kedua, Ini ialah paragfar saya yang kedua.</p>

  Ini bukan sebuah paragraf,  ini bukan sebuah paragraf<br>  Ini bukan sebuah paragraf, 

   Ini bukan sebuah paragraf<br>         ini bukan sebuah paragraf,

             ini bukan sebuah paragraf <br>        ini bukan sebuah paragraf

</body>

</html>

Mari kita jalankan pada web browser. 

Pada gambar ditas kita sanggup melihat bahwa paragraf yang tadi nya satu baris sanggup dipisahkan dengan <br> hinga menjadi dua baris. Perhatikan juga kaliamat Ini bukan sebuah paragraf akibatnya hampir sama dengan memakai tag <p>. Namun yang perlu diperhatikan pemisahan paragraf memakai tag <br> bukanlah untuk menciptakan paragraf. Tag <br> berfungsi untuk memisahkan sebuah bab text dengan text lain. Jika yang kita butuhkan ialah struktur paragraf, maka gunakan tag <p>.

Perhatikan penulisan tag <br>, tag break ialah salah satu dari beberapa tag yang tidak mempunyai tag penutup, dan sanggup ditulis sebagai <br > atau </br>. Penulisan </br> merupakan bawaan dari xHTML yang dianggap lebih rapi. Namun dalam standar HTML5, penulisan <br> maupun </br> tetap dianggap valid.

Jika teman-teman mau menciptakan paragraf nya mempunyai aksara tebal teman-teman tinggal menambahkan <b>Ini Tebal</b>. kalau teman-teman mau menciptakan aksara miring teman-teman sanggup menambahkan <i>Ini aksara miring</i>. Selain dari yang di atas pada HTML masih mempunyai tag-tag lain nya yaitu :

Tag untuk penebalan dan pemiringan ( <strong> dan <em>).

Di dalam sebuah paragraf, kadang kita perlu untuk menciptakan pementingan pada kata-kata tertentu. Penekanan ini sanggup dilakukan dengan menebalkan kata, atau dengan kata yang dimiringkan. Penggunaan nya ialah sebagai berikut :

<!DOCTYPE html>

<html>

<head>

<title>Point Website</title>

</head>

<body>

<p>Ini ialah paragfar saya yang pertama, <strong>Ini ialah paragfar saya yang pertama</strong><br>

<em>Ini ialah paragfar saya yang pertama</em>, Ini ialah paragfar saya yang pertama.</p>

<p>Ini ialah paragfar saya yang kedua, <em>Ini ialah paragfar saya yang kedua</em><br>

<strong>Ini ialah paragfar saya yang kedua,</strong> Ini ialah paragfar saya yang kedua.</p>

</body>

</html>

jika dijalankan pada web browser maka akibatnya akan menyerupai berikut :

Selain dari tag <em> dan <strong> kita juga akan menemukan bahwa HTML memiliki tag <i> (italic) untuk memiringkan huruf, dan <b> (bold) untuk menebalkan huruf. Pakar HTML yang mendukung pemisahan konten dengan tampilan tidak menyarankan memakai tag <i> dan <b>, alasannya ialah kedua tag ini akan mensugesti tampilan dari HTML. Tampilan halaman web seharusnya di tangani oleh CSS, bukan di dalam instruksi HTML. Pada xHTML, tag <i> dan <b> sudah dianggap usang, dan tidak akan digunakan lagi, namun dalam spesifikasi HTML5, tag <i> dan <b> kembali dianggap relevan.

Sekian tutorial saya wacana Cara Membuat Paragraf dalam HTML, agar sanggup membantu teman-teman dalam mempelajari HTML. Untuk tutorial yang lain akan saya bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Cara Mengatur Rata Teks Html Dengan Css

Untuk mengatur rata text kita memakai property text-align. Property text-align mempunyai 4 nilai yang sanggup digunakan, yaitu : left, right, center, atau justify. Sesuai dengan namanya, jikalau memakai text-align : left maka text akan rata kiri dan jikalau memakai text-align : right maka text akan rata kanan. Untuk menciptakan text berada di tengah, kita mengunakan : text-align : center,  dan perintah text-align : justify dipakai untuk menciptakan text rata kiri dan kanan.

Agar lebih gampang untuk dimengerti, aku sudah sediakan satu teladan dimana pada teladan ini mempunyai 4 paragraf, setiap paragraf nya mempunyai instruksi CSS text-align, yang disematkan dengan motode internal style sheets CSS. Berikut teladan penggunaan property text-align:

<!DOCTYPE html>

<html>

<head>

<title>Point Website</title>

<style type="text/css">

   .kiri    {

      text-align: left;

   }

   .kanan   {

    text-align: right;

   }

   #tengah  {

      text-align: center;

   }

   #kiri-kanan {

      text-align: justify;

   }

</style>

</head>

<body>

   <h2>Belajar  CSS  Mengatur Text dengan text-align</h2>

 

   <h3> Membuat Paragraf Rata Kiri </h3>

   <p class="kiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>

  <hr>

   <h3> Membuat Paragraf Rata kanan </h3>

   <p class="kanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>

  <hr>

   <h3>Membuat Paragraf Rata Tengah</h3>

   <p id="tengah">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>

  <hr>

   <h3> Membuat Paragraf Rata Kiri-Kanan</h3>

   <p id="kiri-kanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>

   <hr>

</body>

</html>

Jika dijalankan pada web browser akan menghasilkan ibarat gambar berikut ini :

 penggunaan property text-align untuk tata letak paragraf

Namun Yang perlu diperhatikan dalam penggunaan justify ini adalah. Membuat text rata kiri dan kanan sekaligus akan menciptakan web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang. Hal ini sanggup menciptakan goresan pena akan susah dibaca, terutama jikalau diakses dari smartphone yang mempunyai layar kecil. 

Dari hasil gambar diatas teman-teman sanggup melihat bahwah dengan mengatur rata text sanggup memperindah tampilan dan lebih menarik untuk dibaca. Sekian tutorial dari aku agar sanggup bermanfaat buat kita semua. Terimakasi atas kunjungan nya.

Sumber http://pointwebsite.blogspot.com/

Point-Point Penting Dalam Mengatur Letak Elemen Html Dengan Css

Pada kesempatan kali ini akan memperlihatkan 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, supaya memudahkan kita dalam menciptakan layout website nantinya. Oleh lantaran itu sebelum teman-teman menciptakan layout website ada baiknya teman-teman mengenal Point-Point Penting Dalam Mengatur Tataletak elemen HTML Dengan CSS. Dibawah ini aku sudah menciptakan pola 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></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 sanggup kita lihat setiap alemen HTML yang sudah kita buat akan berada di sisi kiri, itu disebabkan lantaran elemen HTML nya belum diatur. Untuk mengatur nya kita memakai CSS. Silahkan teman-teman tulis code CSS berikut ini dan disimpan dengan nama style.css lalu 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; } 

jikalau teman-teman jalankan pada browser maka hasil nya akan ibarat ini.

Jika teman-teman perhatikan dalam code css nya, pada belahan #wrapper width (lebar) sudah kita buat adalah 960px, maka dari itu dilarang ada elemen yang melewati batas tersebut, jikalau teman-teman mau menambahkan element lain pada html yang sudah teman-teman buat kemudia menambahkan css nya pastikan element tersebut dilarang lebar nya lebih dari elemen wrapper (pembungkus luar), supaya lebih gampang dalam memahami nya coba teman-teman ganti value-value yang ada pada code CSS tersebut lalu teman-teman amati hasilnya.

Tutorial ini hanya dasar untuk mengatu elemen HTML masih banyak property-property lain dari CSS yang sanggup dipakai untuk mengatur elemen HTML, pola position, overflow,z-index dan lain sebagainya. Sekian tutorial perihal Point-Point Penting Dalam Mengatur Letak elemen HTML Dengan CSS semoga sanggup membantu teman-teman dalam menciptakan dan mempelajari website.

Sumber http://pointwebsite.blogspot.com/