Dasar-Dasar HTML dan CSS

Aug 27, 2024

Catatan Pelajaran HTML dan CSS

Pendahuluan

  • Assalamualaikum Wr Wb, selamat datang.
  • Materi kali ini: HTML dan CSS dalam satu video.
  • HTML: Struktur halaman website (ibarat tulang).
  • CSS: Menghias struktur (mengubah warna, menambah estetika).

Persiapan

  • Text Editor: Visual Studio Code
  • Browser: Google Chrome
  • Cara mendownload Visual Studio Code dan Google Chrome.

HTML (Hypertext Markup Language)

  • HTML adalah bahasa markah untuk membuat halaman website.
  • Struktur HTML:
    • Tag HTML: Memerlukan tag penutup.
    • Tag Head: Menampung informasi tambahan tentang website.
    • Tag Body: Menampung isi utama dari website yang tampil di browser.
  • Doge Type HTML: Menginformasikan browser tentang tipe dokumen (HTML5).

Struktur Dasar HTML

  1. <html> - Tag pembuka HTML.
  2. <head> - Bagian kepala, berisi informasi tambahan (misal: <title> dan <meta>).
  3. <body> - Isi utama yang ditampilkan di halaman.

CSS (Cascading Style Sheet)

  • CSS digunakan untuk menghiasi elemen HTML.
  • Cara menulis CSS:
    • Inline CSS: Menulis langsung dalam tag HTML.
    • Internal CSS: Menulis dalam tag <style> di <head>.
    • External CSS: Memisahkan file CSS dari HTML.

Dasar CSS

  • Selektor: Menentukan elemen yang ingin diubah.
  • Property: Mengatur gaya (misal: color, font-size).
  • Value: Nilai untuk property (misal: red, 20px).

Tipe Warna di CSS

  1. Keyword: Nama warna (misal: red).
  2. Hexadecimal: Kode warna (#FF0000).
  3. RGB: R, G, B values (misal: rgb(255,0,0)).
  4. RGBA: RGB dengan alpha (transparansi).

Elemen Penting HTML

  • Tag Heading: <h1> - <h6> untuk judul.
  • Tag Anchor: <a> untuk membuat link.
  • Tag Image: <img> untuk menampilkan gambar.
  • Tag Table: <table>, <tr>, <td> untuk membuat tabel.
  • Tag Form: <form> untuk membuat form isian.

Elemen CSS Lanjutan

  • Margin: Jarak luar elemen.
  • Padding: Jarak dalam elemen.
  • Border: Garis pembatas elemen.
  • Display: Menentukan cara elemen ditampilkan (block/inline).

Praktek langsung

  • Menciptakan struktur website sederhana dengan HTML.
  • Menggunakan CSS untuk mengubah tampilan website.

Penutup

  • Terima kasih telah belajar HTML dan CSS.
  • Jangan lupa untuk like, comment, dan subscribe untuk konten berikutnya.
  • Assalamualaikum Wr Wb.