HTML dan CSS Lengkap Nota Kursus

Tinjauan Kursus

• Belajar cara membina laman web dari tahap pemula hingga tahap profesional
• Projek akhir: mencipta semula YouTube.com
• Tiada pengalaman pengkodan sebelumnya diperlukan
• 100+ latihan sepanjang kursus

Pemasangan Perisian

• Diperlukan: Pelayar Web dan Editor Kod
  • Disyorkan Pelayar Web: Google Chrome
  • Disyorkan Editor Kod: Visual Studio Code (VS Code)
• Pemasangan: Cari setiap perisian dan ikut arahan muat turun.

Pengenalan kepada HTML

• HTML (Hypertext Markup Language): Alat untuk mencipta laman web dengan memberi arahan.

• Pembuatan Fail HTML Pertama:

  1. Buat folder baharu untuk menyimpan semua kod kursus, contohnya, HTML-CSS-Course.

  2. Buka folder di VS Code.

  3. Buat fail website.html.

  4. Tulis HTML asas:

     <button>Hello</button>
     <p>Perenggan teks</p>
     

  • Untuk membuka di Google Chrome: Klik kanan fail HTML dan pilih "Open with Google Chrome."

Asas HTML

• Elemen HTML: Butang dan Perenggan adalah contoh elemen HTML.
• Peraturan Sintaks: Tag HTML terdiri daripada tag pembuka dan penutup. Contohnya, <tagName> dan </tagName>.
• Elemen Seiring: Elemen seperti <span> tidak memaksa baris baharu.
• Elemen Blok: Elemen seperti <div> dan <p> mengambil seluruh baris.
• Atribut: Mengubah tingkah laku elemen, contohnya, href untuk pautan.

Pengenalan kepada CSS (Cascading Style Sheets)

• Asas CSS: Digunakan untuk menggayakan elemen HTML. Contoh:

  button {
      background-color: red;
      color: white;
  }
  

• Latihan Penggayaan: Mencipta butang menarik secara visual menggunakan gaya, seperti warna latar, warna teks, sempadan, tinggi, lebar, dll.

Mencipta Tata Letak Kompleks dengan Grid dan Flexbox

Grid CSS

• Mencipta Grid: display: grid membolehkan penciptaan grid dengan baris dan lajur.
• Jurang Lajur dan Baris: column-gap dan row-gap sifat untuk menambah ruang antara item grid.
• Grid Responsif: Gunakan pertanyaan @media untuk mencipta tata letak responsif berdasarkan saiz skrin.

Flexbox

• Asas Flexbox: Gunakan display: flex untuk mencipta tata letak fleksibel dan mengurus penjajaran serta pengagihan ruang.
• Penjajaran Menegak dan Mendatar: justify-content untuk penjajaran mendatar dan align-items untuk penjajaran menegak.
• Pertumbuhan dan Pengecilan Flex: Gunakan flex-grow untuk membolehkan elemen berkembang dan flex-shrink untuk pengecilan.

Elemen HTML Semantik

• Menggunakan Elemen Semantik: Gantikan elemen <div> dengan HTML semantik seperti <header>, <nav>, <main> untuk kebolehaksesan dan kebolehbacaan yang lebih baik.

Menentukan Kedudukan Elemen

Teknik Penentuan Kedudukan CSS

• Kedudukan Tetap: Elemen kekal tetap dalam kedudukan ketika menatal.
• Kedudukan Mutlak: Ditentukan dalam hubungan dengan nenek moyang yang diposisikan (contohnya, relatif).
• Kedudukan Relatif: Digunakan untuk menetapkan titik rujukan untuk anak yang diposisikan secara mutlak.

Teknik Tata Letak Bersarang

• Menggunakan tata letak bersarang menggabungkan block dan inline block atau sifat grid untuk mencipta reka bentuk responsif kompleks.
• Tata Letak Mendatar: Gunakan inline-block atau Grid CSS; membolehkan elemen duduk bersebelahan.
• Tata Letak Menegak: Tetapkan elemen blok untuk mengatur elemen secara menegak.

Komponen Projek Akhir

• Kepala: Gunakan posisi tetap untuk kepala; termasuk bar carian dan ikon.
• Bar Sisi: Cipta bar sisi tetap dengan ikon untuk navigasi.
• Video: Laksanakan grid untuk memaparkan imej kecil video dalam format responsif.
• Tooltip: Menempatkan elemen menggunakan posisi mutlak dalam rujukan kepada bekas posisi relatif.

Reka Bentuk Responsif

• Pertanyaan Media: Digunakan untuk menyesuaikan tata letak berdasarkan saiz skrin, contohnya, melaraskan lajur grid dari tiga kepada dua.
• Sifat Pintas: Gunakan sifat seperti padding dan margin untuk memudahkan gaya, contohnya, menetapkan semua nilai padding dengan satu baris.
• Pewarisan: Menggunakan pewarisan untuk menerapkan sifat umum, mengurangkan redudansi dalam kod.

Ciri Tambahan

• Komen: Tambah komen dalam HTML dan CSS untuk menerangkan fungsi kod sambil mengabaikannya dalam output.
• Menggunakan Fon Google: Muat fon khusus untuk digunakan di seluruh laman web untuk tipografi yang lebih baik.

---

Langkah Seterusnya yang Disyorkan

• Latihan Cabaran: Cipta laman web popular menggunakan teknik yang dipelajari.
• Belajar JavaScript: Ia menambah interaktiviti; perkembangan semulajadi selepas HTML dan CSS.

Kesimpulan

• Mencipta laman web lebih mudah dengan pembelajaran berurutan kemahiran HTML dan CSS.
  • Terima kasih kerana mengikuti kursus ini!