HTML dan CSS ni dua bahasa yang korang kena tahu kalau korang nak buat webpages.
Webpages ni macam halaman-halaman yang korang boleh tengok kat internet, macam Facebook, YouTube, atau Google. HTML dan CSS ni buat dua benda yang berbeza, tapi saling berkaitan.
HTML: Content dan structure untuk webpages
HTML ni buat content dan structure untuk webpages korang.
Content ni macam apa yang korang nak tunjuk kat pengguna, macam teks, gambar, video, atau link. Structure ni macam cara korang susun atau atur content tu, macam heading, list, table, atau form.
HTML ni guna benda yang dipanggil tags untuk buat content dan structure tu.
Tags ni macam label yang korang letak kat content korang, untuk cakap kat browser apa benda tu dan macam mana nak display dia.
Tags ni biasanya ada dua bahagian, opening tag dan closing tag, yang korang letak kat awal dan akhir content korang. Contohnya, kalau korang nak buat heading, korang boleh guna tag <h1> dan </h1> macam ni:
<h1>Ini adalah heading</h1>
Browser akan baca tag ni dan display content korang dengan font yang besar dan tebal, macam ni:
<h1>Ini adalah heading</h1>
Ada banyak jenis tags yang korang boleh guna untuk buat content dan structure yang berbeza. Korang boleh tengok contoh-contoh tags yang biasa digunakan kat sini.
CSS: Display dan design untuk webpages
CSS ni buat display dan design untuk webpages korang. Display ni macam cara korang tunjuk content korang kat browser, macam color, font, size, atau position.
Design ni macam cara korang buat webpages korang nampak cantik dan menarik, macam background, border, margin, atau animation.
CSS ni guna benda yang dipanggil rules untuk buat display dan design tu. Rules ni macam arahan yang korang bagi kat browser, untuk cakap kat dia macam mana nak style content korang.
Rules ni biasanya ada dua bahagian, selector dan declaration, yang korang letak dalam curly braces. Contohnya, kalau korang nak buat semua paragraph dalam webpages korang jadi warna merah, korang boleh guna rule macam ni:
p {
color: red;
}
Browser akan baca rule ni dan style content korang dengan warna merah, macam ni:
<p style=“color:red;”>Ini adalah paragraph</p>Ada banyak jenis rules yang korang boleh guna untuk buat display dan design yang berbeza. Korang boleh tengok contoh-contoh rules yang biasa digunakan kat sini.
HTML & CSS: Cara guna
HTML dan CSS ni boleh digunakan dalam tiga cara, ikut pada keperluan dan kesesuaian korang. Tiga cara tu ialah:
- Inline: Korang letak CSS code dalam HTML tags, guna attribute yang dipanggil style. Cara ni sesuai untuk buat style yang simple atau spesifik untuk satu element je. Contohnya, kalau korang nak buat satu paragraph je jadi warna biru, korang boleh guna cara ni:
<p style="color: blue;">Ini adalah paragraph yang warna biru</p>- Internal: Korang letak CSS code dalam HTML file, guna tag yang dipanggil <style>. Cara ni sesuai untuk buat style yang sama untuk satu webpage je. Contohnya, kalau korang nak buat semua paragraph dalam satu webpage jadi warna hijau, korang boleh guna cara ni:
<style>
p {
color: green;
}
</style>
<p>Ini adalah paragraph yang warna hijau</p>
<p>Ini juga adalah paragraph yang warna hijau</p>- External: Korang letak CSS code dalam file yang berasingan, guna extension yang dipanggil .css. Cara ni sesuai untuk buat style yang sama untuk banyak webpage. Contohnya, kalau korang nak buat semua paragraph dalam semua webpage jadi warna kuning, korang boleh guna cara ni:
<!-- Dalam file yang dipanggil style.css -->
p {
color: yellow;
}
<!-- Dalam file HTML yang korang nak link dengan file CSS -->
<link rel="stylesheet" href="style.css">
<p>Ini adalah paragraph yang warna kuning</p>
<p>Ini juga adalah paragraph yang warna kuning</p>HTML & CSS: Apa lagi yang korang boleh buat?
HTML dan CSS ni bukan saja boleh buat webpages, tapi juga boleh buat apps yang boleh korang guna kat phone, macam Android atau iPhone.
Apps ni macam webpages, tapi lebih interaktif dan responsive, sebab dia boleh guna features atau functions yang ada kat phone, macam camera, GPS, atau sensors.
Untuk buat apps ni, korang kena guna benda yang dipanggil frameworks, yang boleh convert HTML dan CSS code korang jadi native code yang boleh run kat phone.
Frameworks ni macam tools yang boleh tolong korang buat apps dengan lebih mudah dan cepat, sebab dia ada banyak features atau templates yang korang boleh guna atau customize.
Ada banyak jenis frameworks yang korang boleh guna untuk buat apps dengan HTML dan CSS. Korang boleh tengok contoh-contoh frameworks yang popular kat sini.
