SQLmateri

HTML & CSS
Oleh        : Kresno
Date        : 20-03-2015

Untuk membuat sebuah webpage digunakan tag-tag HTML dan CSS/style sheet.
Berikut adalah tag HTML yg umum digunakan :


<html></html>

Root dr dokumen HTML


<head></head>

Berisi informasi mengenai dok HTML, bisa judul, meta information, css, javascript dll


<title></title>

Judul dr dok HTML, akan muncul di bagian atas Browser


<body></body>

Badan/kanvas dari dok HTML yg akan diisi untuk ditampilkan


<h1></h1>..<hn></hn>

Mengatur heading, kondisi default, angka makin besar, ukuran heading makin kecil


<div> </div>

Bagian atau bisa dideskripsikan sebagai layer didalam dok HTML


<table> </table>

Membuat table


<tr></tr>

Membuat baris didalam table


<td></td>

Membuat kolom didalam row


Untuk tag lain berserta atributnya dapat dipelajari di http://www.w3schools.com/tags/default.asp

       Contoh pertama dinamakan Standard HTML.html, berikut code-nya :

<html>

<head>

<title>Coba coba

</title>

</head>
<body bgcolor="#ccc">

<h1>Coba coba yuks</h1>

</br>

Selamat pagi, ini adalah warna abu abu bakso

</body>

</html>


       Contoh kedua dinamakan Simple HTML with Style.html, berikut code-nya :

<html>

<head>

<title>Coba coba

</title>

<style>

body

{

  background-color:#E3F983;

}

 h1

 {

  color:#5D4A57;

  font-SIZE:100px;

 }

</style>

</head>

<body>

<h1>Coba coba yuks</h1>

</br>

Selamat pagi, ini adalah warna ijo

</body>

</html>


       Dapat dilihat untuk styling warna background, ukuran font dan warna header dipindahkan ke tag style. Style ini hanya berlaku di webpage yg didefinisikan style tersebut. Jika style tersebut ingin digunakan di lebih dari 1 webpage maka dibuatlah sebuah file css untuk mendefiniskan style-style tersebut. Webpage yg akan menggunakan style tersebut tinggal menambahkan reference ke file css tersebut.
       Contoh html selanjutnya diberi nama Simple HTML with Referenced CSS.html dengan file css-nya CSS.css.

CSS.css


body

  {

     background-color:#E3F983;

  }


h1
  {
     color:#5D4A57;
     font-SIZE:50px;
  }


#kiri
  {
     position : absolute;
     top : 0;
     left : 0;
     width  : 20%;
     height : 100%;
     background-color : #FFD980;
  }


#kanan
  {
     position : absolute;
     top : 0;
     left : 20%;
     width : 80%;
     height : 100%;
     background-color : #ADE0E7;
  }


Simple HTML with Referenced CSS.html


<html>

<head>

<title>Coba coba

</title>

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

</head>

<body>

<div id="kiri">

 <h1>ini kiri</h1>

</div>

<div id="kanan">

 <h1>ini kanan</h1>

</div>

</body>

</html>


Dapat dilihat reference css-nya di <link href="CSS.css" rel="stylesheet" type="text/css" />. Dapat dilihat juga, ada dua tag <h1> yg memiliki style yg sama sesuai definisi di css-nya. Dari ketiga contoh dapat terlihat perbedaan fungsi dari HTML dan CSS dalam sebuah webpage. Tag HTML digunakan untuk membentuk content dari webpage, sedangkan CSS digunakan untuk setting format/style tampilan dari content tersebut.

Kenapa dipisah? Untuk memudahkan dalam mendesign layout website dan juga dalam maintenance website. Umumnya sebuah website memiliki template layout yg mirip antara tiap webpagenya, hanya contentnya yg berubah. Oleh karena itu digunakanlah CSS untuk menyimpan semua style yg dapat digunakan oleh setiap webpage tersebut.


Dari contoh sebelumnya dapat dilihat cara penggunaan CSS di HTML :

1. Menggunakan nama dari tag HTML

Dengan menggunakan nama dari tag html di dalam deklarasi css, maka untuk semua tag didalam webpage yg bernama sama akan mengikuti format di css tanpa harus set class css-nya.

Contoh:


body { background-color : #ccc; }

background color webpage akan berwarna abu abu bakso


h1 { font-size : 20px ; }

semua <h1> yg ada di webpage akan memiliki font size 20px


2. Menggunakan #

# digunakan untuk membuat 1 css yg unik, dan hanya bisa dipakai 1x didalam webpage yg sama.

Contoh:


#Kanan

{

       Top : 0;

       Left : 0;

       Background-color= #abc;

}


Di HTML

<div id=”Kanan”>


</div>


3. Menggunakan . (class)

Class css dapat digunakan unlimited untuk elemen apapun.

Contoh:


.Kanan

{

       Top : 0;

       Left : 0;

       Background-color= #abc;

}


Di HTML

<div class=”Kanan”></div>


Setelah mengetahui cara menggunakan html dan css, bagaimana caranya untuk membuat sebuah layout webpage?

Berikut adalah atribut css yg sering digunakan dalam membuat layout :


Top

Left

Right

Bottom

Mengatur posisi bagian atas/kiri/kanan/bawah suatu elemen terhadap elemen lainnya


Margin-Top

Margin-Left

Margin-Right

Margin-Bottom

Mengatur posisi bagian atas/kiri/kanan/bawah elemen terhadap posisi top/left/right/bottom


Padding-Top

Padding-Left

Padding-Right

Padding-Bottom

Mengatur lebar suatu elemen terhadap bordernya


Jika digambarkan :


Copyright © 2018 by IT-IMFI. All Rights Reserved.