Pengertian dan Fungsi dari HTML dan CSS
Html Dan CSS
1.HTML
Apasih yang dimaksud dengan HTML?
HTML adalah kerangka yang membentuk dan mengatur bagaimana sebuah halaman web akan ditampilkan di browser. Untuk membentuk dan mengatur halaman tersebut kita menggunakan markah / tanda atau lebih umum disebut tag.
Tag HTML mempunyai tag pembuka dan penutup. Tag pembuka menggunakan simbol kecil dari (<) dan besar dari (>), begitupun dengan tag penutup, hanya saja untuk tag penutup di tambahkan slash (/).
Contoh :
<html>
<head>
<title>HTML</title>
</head>
<body>
</body>
</html>
Namun ada beberapa tag khusus yang tidak membutuhkan tag penutup. Contoh :
<img src='gambar.png'>
<input type='text'>
Pada contoh di atas anda bisa melihat sedikit perbedaan tag HTML contoh sebelumnya. Itulah yang disebut dengan attribute tag HTML. Penjelasan :
- img dan input : tag HTML
- src dan type : attribute tag
- 'gambar.png' dan 'text' : value dari attibute
Bagaimana contoh kode CSS ?
body{
background : blue;
}
Mudah dimengerti kan ?
Pada contoh di atas, kode css memiliki 3 bagian yaitu :
- selector (contoh : body)
- property (contoh : background)
- value (contoh : blue)
Lalu, bagaimana cara penggunaan CSS ?
Ada 3 cara penggunaan CSS :
Inline Style Sheet
Cara ini cukup mudah yaitu langsung menuliskan kode css kita pada tag HTML (dalam css disebut selector), contoh :
<body style='background:blue'>
- body : tag HTML
- style : attribute HTML
- background : property
- blue : value
Internal / Embedded Style Sheet
Cara penggunaan internal / embedded style sheet yaitu dengan menggabungkan kode css dengan file HTML namun ditulis di dalam tag head.
Contoh :
<html>
<head>
<style>
body{
background : blue;
}
</style>
</head>
<body>
</body>
</html>
External Style Sheet
Cara ini adalah cara yang paling banyak dipakai untuk penggunaan css, yaitu dengan memisahkan kode css anda di file sendiri dengan ekstensi .css
Contoh kode dalam file css :
body{
background: blue;
color: black;
}
p{
font-size: 12px;
}
Untuk menggunakan file CSS tersebut kita harus menambahkan sebaris kode dalam tag head file HMTL
Contoh :
<html>
<head>
<link rel="stylesheet" type="text/css" href="css_saya.css">
</head>
<body>
</body>
</html>
Bagusnya pakai yang mana ?
Cara terbaik menggunakan CSS yaitu External Style Sheet. Karena selain membuat dokumen HTML terlihat rapi, cara ini juga memungkinkan kita membuat beberapa halaman web dengan tampilan yang sama.
Penutup
Bagaimana ? Cukup mudah dimengerti ?
HTML dan CSS adalah dasar bagi siapapun yang ingin terjun kedunia pemrograman web. Baik dia seorang web programmer, web designer, web developer maupun profesi yang berhubungan dengan website, mereka awalnya berkenalan dengan HTML dan CSS sebelum mereka menjadi seseorang yang profesional pada bidangnya.
Oke,See You Next Time
Komentar
Posting Komentar