HTML adalah singkatan dari
HyperText Markup Language , yaitu
markup language yang digunakan untuk membuat suatu halaman web, sehingga HTML dapat menampilkan berbagai informasi baik tulisan maupun gambar pada sebuah
web browser. HTML biasanya menggunakan tag-tag tertentu yang berada dalam tanda kurung <>. Sebagian besar tag pada HTML adalah tag yang berpasangan, contoh : jika kita menggunakan <head> harus ditutup dengan </head>, atau jika kita menggunakan <p> harus ditutup dengan </p>. Tapi ada juga beberapa tag yang tidak berpasangan, contohnya adalah <img>.
CSS adalah singkatan dari
Cascading Style Sheet, yaitu suatu aturan yang digunakan untuk mengatur tampilan maupun format dari suatu halaman web, sehingga tampilan web akan menjadi lebih teratur. CSS juga digunakan untuk meningkatkan keindahan suatu web dengan style-style tertentu. Contoh penggunaan CSS adalah untuk mengatur warna font, ukuran font, ketebalan font, mengganti background web, mengubah border dari suatu tabel, perubahan tampilan suatu link saat dipilih, dan lainnya.
PHP adalah singkatan dari Hypertext Preprocessor, yaitu suatu script yang disisipkan pada HTML dan bersifat server-side. Dengan menggunakan PHP, fungsionalitas dari sebuah halaman web dapat diatur dan dikendalikan. Penggunaan PHP pada HTML memerlukan tag tersendiri, yaitu <?php dan dtutup dengan ?> .PHP biasanya digunakan oleh suatu web untuk berhubungan dengan database, sehingga untuk membuat form yang membutuhkan input dari pengguna harus menggunakan PHP juga. Fungsi perulangan dan percabangan juga dapat diterapkan di PHP.
Jadi intinya, perbedaan diantara ketiganya adalah :
HTML merupakan dasar suatu halaman web untuk menampilkan segala informasi.
CSS adalah penunjang HTML agar tampilan HTML menjadi lebih bagus dan menarik.
Dan PHP digunakan sebagai controller, biasanya sebagai perantara halaman web dengan database.
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Untuk saat ini terdapat tiga versi CSS, yaitu
CSS1,
CSS2, dan
CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.
Dalam membangun sebuah halaman web, css tidak dapat berdiri sendiri, css fungsinya adalah membantu mempermudah memberi gaya pada dokumen html dalam membangun sebuah halaman web.
Dengan css, tag-tag html yang harus ditulis secara berulang-ulang dapat dipersingkat hanya dengan membuat satu file css.
Untuk menyisipkan css kedalam dokumen html, ada 3 cara yang dapat kita lakukan. Yaitu :
- Eksternal style.
- Internal style
- Inline style
Cara eksternal style.
Cara eksternal merupakan cara yang ideal dalam menyisipkan file css ke dalam dokumen html karena lebih mudah dalam pengelolaannya. Misalnya untuk mengedit tampilan halaman, kita cukup mebuka file cssnya saja.
File css dibuat secara terpisah dari dokumen html dan disimpan dalam format file .css dengan nama misalnya gayaku.css.
Contoh css script :
body
{
bacground-color:#7fffd4;
font-size:12px;
padding-left:3px;
}
#header
{
border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}
#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}
#content
{
background-color:#40E0d0;
text-align:left;
padding:3px;
color:black;
}
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font size: 12px; }
#footter
{
background-color:#00CED1;
color:blue;
text-align:center;
}
/* dan seterusnya */
Simpanlah file tersebut dalam format css dan berilah nama dengan nama file misalnya: gayaku.css, pada folder yang sama dengan folder tempat menyimpan file dokumen html.
Untuk menerapkan script css tersebut ke dalam dokumen html, adalah dengan membuat link pada dokumen html yang merujuk pada file gayaku.css. Link tersebut ditempatkan diantara tag dan tag , dan harus dibuat pada tiap halaman.
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="gayaku.css">
</head>
<body>
<div id="">
</div>
<div id="">
</div>
<div id="">
</div>
</body>
</html>
Cara internal style.
Menyisipkan css denagn cara internal style adalah dengan menyisipkan script css pada dokumen html yang ditempatkandi bagian header, yaitu diantara tag dan tag . Disini kita langsung menuliskan gaya/css untuk mengatur style halaman yang kita inginkan didahului dengan menuliskan tag <style> dan diakhiri dengan tag </style>.
Berikut ini adalah contoh menyisipkan script css pada dokumen dengan cara internal.
<html>
<head>
<style type="text/css">
body
{
bacground-color:#7fffd4;
/*7FFFD4=Aquamarine*/
font-size:12px;
padding-left:3px;
}
#header
{
border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}
#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font size: 12px; }
#footter
{
background-color:#00CED1;
color:blue;
text-align:center;
}
</style>
</head>
<body>
<div id="">
</div>
<div id="">
</div>
<div id="">
</div>
</body>
</html>
Cara inline style.
Memasukan css kedalam dokumen html dengan cara inline style dapat dilakukan apabila kita menginginkan gaya/style pada kejadian tunggal yang unik atau khusus. Gaya inline diletakan pada elemen html yang relevan, misalnya kita memasukan gaya tulisan pada sebuah paragraf tertenu, maka properti css ini kita terapkan pada tag
dan dengan atribut style: Dengan kata lain kita memasukan gaya untuk elemen html, dengan atribut style yang dapat berisi properti css.
<p style="color:blue; margin-left:40px;"> ini sebuah paragraf
</p>
Contoh diatas dapat dijelaskan bahwa kita memberi gaya pada paragraf tersebut dengan properti css yaitu color: dan margin-left: dengan nilai/value masing-masing blue dan 40px. Dan gaya tersebut haya berlaku untuk paragraf ini saja, sedang paragraf yang lain tidak mengikuti gaya ini.
Contoh lainnya :
<body style="color:black; background-color:#FFD700; font-size:12px; padding:3px; "> menerapkan style css pada bagian tubuh
</body>
sumber : wikipedia