🌐

Membuat Website dengan HTML dan CSS

Sep 30, 2024

View transcript

Catatan Kuliah: Membuat Website dengan HTML & CSS

Pendahuluan

  • Pembelajaran ini adalah untuk semester 1 di Cuy University, difokuskan pada pembuatan website dasar menggunakan HTML dan CSS.
  • Tujuan dari pembelajaran ini adalah agar siapapun, termasuk non-IT, bisa mengikuti perkembangan teknologi dan belajar pemrograman web.
  • Tidak perlu spesifikasi komputer tinggi, cukup dengan RAM 2GB.

Persiapan

  • Text Editor: Disarankan menggunakan Visual Studio Code (VS Code).
  • Koneksi Internet: Berguna untuk mencari panduan atau library.
  • Spek Komputer: Minimal RAM 2GB agar sistem berjalan lancar.

Apa Itu HTML dan CSS?

  • HTML: Bahasa markup untuk membuat struktur dasar website. HTML digunakan untuk menampilkan berbagai media seperti teks, gambar, video, dsb.
  • CSS: Cascading Style Sheets untuk mendandani/menata tampilan HTML.

Proses Pembuatan Website

Langkah Awal

  • Install VS Code dan siapkan folder kerja di desktop.
  • Buat file HTML pertama dengan nama index.html.

Struktur Dasar HTML

  • Gunakan elemen dasar HTML: <html>, <head>, <body>.
  • Di dalam <head>, tambahkan <title> untuk judul tab browser.

Menambahkan Konten

  • Gunakan elemen seperti <h1>, <p>, <table> untuk menambah konten.
  • Contoh membuat tabel: <table>, <tr>, <td>.

Memasukkan Gambar

  • Gunakan <img src="nama_gambar.png"> untuk menampilkan gambar.

CSS (Cascading Style Sheets)

Penambahan CSS ke HTML

  • Buat file style.css dan hubungkan dengan HTML menggunakan <link rel="stylesheet" href="style.css"> di dalam <head>.

Styling Dasar

  • Body: Gunakan background-color untuk mengubah warna background.
  • Div: Gunakan <div> untuk membungkus elemen agar lebih mudah diatur.
  • Flexbox: Gunakan display: flex; untuk menata elemen dalam baris atau kolom.

Contoh Styling

  • Menata Navbar: Buat navbar dengan <ul><li> dan styling dengan CSS agar tampil horizontal.
  • Menata Konten dan Footer: Atur lebar, tinggi, warna, dan posisi elemen.

Project Akhir

Struktur Website

  • Navbar: Berisi link navigasi menggunakan <ul><li><a>.
  • Konten Utama: Menampilkan gambar dan teks.
  • Footer: Informasi singkat dibagian bawah.

Menambahkan Interaktivitas

  • Gunakan atribut HTML seperti <input type="color"> untuk interaksi dasar.

Pengujian Akhir

  • Pastikan halaman bisa diakses dengan baik setelah dihosting di platform seperti Replit.

Tugas dan PR

  • Modifikasi elemen-elemen di halaman about.html dan contact.html.
  • Tambahkan styling hover untuk elemen navigasi.

Penutup

  • Pembuatan website ini adalah dasar yang solid untuk melanjutkan ke semester-semester berikutnya, termasuk belajar JavaScript.

Full transcript