🖥️

Pengantar HTML dan CSS untuk Pemula

Mar 10, 2025

Catatan Kuliah HTML dan CSS

Pengantar

  • Assalamualaikum, dalam video ini kita belajar HTML dan CSS.
  • HTML dan CSS digunakan untuk membuat website statis.

HTML (Hypertext Markup Language)

  • Fungsi HTML:
    • Membuat struktur halaman website.
    • Diibaratkan sebagai tulang dalam tubuh.
    • Contoh: Struktur rumah, seperti pondasi dan tiang.
  • Tag HTML:
    • Memulai dengan tag pembuka dan diakhiri dengan tag penutup.
    • Contoh: <html> dan </html>.

Struktur Dasar HTML

  1. DOCTYPE: Menginformasikan browser tentang tipe dokumen.
    • Contoh: <!DOCTYPE html>
  2. Tag <html>: Menandai awal dari HTML.
  3. Tag <head>: Menyimpan informasi tambahan seperti judul (<title>).
  4. Tag <body>: Menampung isi utama halaman.

CSS (Cascading Style Sheets)

  • Fungsi CSS:
    • Menghiasi dan mempercantik tampilan website.
  • Penulisan CSS:
    • Terdapat beberapa cara: Inline, Internal, dan External.

Cara Menulis CSS

  1. Inline CSS:
    • Menulis CSS langsung dalam tag HTML menggunakan atribut style.
    • Contoh: <h1 style="color: red;">Nama</h1>.
  2. Internal CSS:
    • Menulis CSS di dalam tag <style> di bagian <head>.
  3. External CSS:
    • Menghubungkan file CSS terpisah menggunakan tag <link>.

Selektor, Properti, dan Nilai

  • Selektor: Memilih elemen yang akan dihiasi.
  • Properti: Menentukan gaya yang akan diterapkan.
  • Nilai: Menentukan nilai dari properti.
    • Contoh: color: red;

Contoh Penggunaan

  • Menambahkan warna, ukuran, dan jenis font:
    • font-family: Arial;
    • font-size: 20px;
    • background-color: blue;

Box Model

  • Margin: Jarak dari elemen ke luar.
  • Border: Garis pembatas antara elemen dan margin.
  • Padding: Jarak antara elemen dan konten di dalamnya.

Membuat Form

  • Tag Form: Untuk membuat input data.
  • Input Field: Menggunakan tag <input>, <select>, dan <textarea>.
  • Button: Menggunakan <input type="submit"> untuk mengirim data.

Penutup

  • Jika ada yang ingin ditanyakan, silakan komen.
  • Jangan lupa like dan subscribe untuk pembaruan konten selanjutnya. Assalamualaikum.

Full transcript