Pengenalan HTML Dan CSS
Sedikit cerita, awal saya mengenal pemrograman web adalah saat saya mencari cara menambahkan widget tulisan berjalan (baca marquee xD) di blog pertama saya (waktu masih pake blogspot). Sebaris kode yang saya temukan dari hasil browsing saat itu cukup sederhana untuk saya yang sama sekali tidak mengerti tentang kode-kodean. Itu merupakan kode HTML pertama yang saya tulis (lebih tepatnya copas) dan dari situlah petualangan saya dimulai xD.
Apa itu HTML ?
Mari mengintip wiki :
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Penjelasannya agak ribet ya ? Tenang, saya akan menjelaskan HTML secara sederhana agar lebih mudah dimengerti.
Jadi, apa itu HTML ?
Menurut pemahaman saya, 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
Apakah HTML merupakan bahasa pemrograman ?
Tidak, seperti penjelasan dari kutipan wiki di atas, HTML hanyalah sebuah bahasa markah, atapun penanda. HTML tidak bisa melakukan operasi aritmatika, melakukan perulangan, menangani percabangan dan proses lain yang bisa dilakukan oleh sebuah bahasa pemrograman. Namun semua orang yang ingin terjun ke dunia web programming wajib mengenal HTML terlebih dahulu.
Sudah cukup mengerti dengan penjelasan HTML ? Mari kita lanjut dengan sesuatu yang lebih keren.
CSS
Intip wiki dulu yuk :
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Kenapa kita membutuhkan CSS ?
Jika kita ibaratkan website sebagai rumah dan anda sudah membangun rumah tersebut menggunakan jasa tukang bangunan (dalam hal ini HTML) maka tahap selanjutnya adalah membuat rumah anda tampak cantik. Si tukang bisa saja menempatkan pintu dan jendela di posisi yang tepat, ia juga bisa mengecat rumah anda dengan bagus. Namun si tukang punya kekurangan, ia tak memiliki banyak kemampuan untuk mendekorasi rumah anda dengan baik. Maka anda perlu seseorang yang handal untuk mengatasi masalah tersebut yaitu seorang dekorator (CSS). Si dekorator punya pengetahuan lebih tentang keindahan dan tentu saja ia juga punya kemampuan dekorasi melebihi si tukang.
Yup, kemampuan HTML untuk mengatur tampilan halaman website memang terbatas. Sebagai contoh, anda bisa membuat warna yang berbeda saat mouse mendekati link tersebut dengan CSS tapi anda tidak bisa membuatnya dengan HTML. Keren kan?
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.
Saya sarankan anda untuk tidak berhenti sampai disini, karena judul artikel ini adalah Pengenalan HTML dan CSS, apa yang saya tulis disini hanyalah mengenalkan kepada anda apa itu HTML & CSS dengan penjelasan sederhana dan sedikit contoh xD.
See you next time..
0 Response to "Pengenalan HTML Dan CSS"
Post a Comment