Codenya apa?

EKSKUL PROGRAMMING
• Course : My Ekskul My Ekstrakurikuler
• alternatif materi : W3Schools Online Web Tutorials CodePen: Online Code Editor and Front End Web Developer Community Progate | Progate - Belajar coding, belajar menjadi kreatif.

Isi Presensi terlebih dahulu !!! Deskripsi Umum Tugas Setiap peserta ekskul (individu atau kelompok maksimal 3 orang) diminta untuk membuat website portofolio yang menampilkan karya, profil, dan proses kreatif. Website ini dapat bersifat personal (profil diri) atau tim (profil kelompok seni/proyek bersama). Website harus menampilkan elemen visual dan konten yang mencerminkan identitas kreatif pembuatnya, serta dibuat menggunakan teknologi web dasar (HTML, CSS, JavaScript) — sesuai kemampuan peserta. ---

🛠️ Komponen Website Wajib website minimal memiliki 5 halaman atau bagian utama berikut:
1. Beranda (Home)

nama, tagline, atau kalimat pembuka yang menggambarkan identitas kreatif. Bisa dilengkapi gambar latar, animasi ringan, atau video pendek.

2. Tentang Saya / Tentang Kami (About)

singkat individu/tim: latar belakang, visi artistik, bidang karya, pengalaman, dll. Foto diri/tim atau ilustrasi representatif.

3. Portofolio / Karya (Works / Projects)

minimal 3 karya (tulisan, teater, musik, desain, film, dll). Setiap karya dilengkapi deskripsi, peran, tahun, dan media dokumentasi (gambar/video/link).

4. Proses Kreatif / Catatan (Process / Journal / Blog)

di balik pembuatan karya atau refleksi proses berkarya. Dapat berupa artikel, catatan visual, atau dokumentasi foto.

5. Kontak (Contact)

untuk menghubungi (email, media sosial, link form, dsb). Bila berbentuk tim, tambahkan logo dan daftar anggota.

Contoh pemakaian code

Khusus atribut HTML

Code CSS

Contoh penggunaan HTML dengan CSS

yang perlu diinstal di VScode untuk HTML:
• Prettier - Code Formator
• Live Server
Code untuk di settings.json untuk layar vscode:

Kata harus dimulai dengan < dan diakhiri >

Sebelum html tulis !DOCTYPE html

Setelah html buat head lalu body

Baris kosong yang lebih dari satu spasi akan tetap dianggap satu spasi

Memberi nama web dengan kode title

Macam macam elemen kode HTML

• Judul bagian 1-6: h1, h2, h3, h4, h5, h6.

• Paragraf: p Lihat atribut!

• Tebal: b atau strong

• Cetak Miring: i atau em

• Garis bawah: u atau ins

• superscript: sup

  contoh: 2²

  subscript: sub

  contoh: O₂

  Line breaks: br

  contoh: Daun br
  berfungsi sebagai tempat metamorfosis

  Horizontal rules: hr

  Contoh: Page 1
  kop surat hr

  ---

  Page 2
  isi

  Kutipan (Quote): q

  Contoh: Kataku, Jangan lupa makan!

  Blockquote (Awal paragraf): blockquote

  Contoh:

  Awalan paragraf

  Singkatan atau akronim: abbr atau acronymLihat atribut!

  Citation (link): cite

  Contoh: HP-OoP

  Definisi: dfn

  Contoh: Garut adalah kota

  kata Coret: del

  Contoh: 100h50h

  List item: li

  List yg ada urutan (ordered list):oi

  Contoh: oi Spagetti

  li Pasta

  li Daging

  li Tomat

  oi

  List yg tak ada urutannya (Unordered list): ul

  Contoh:

  ul Pelajaran
  • li Mtk
  • li IPA
  • li IPS
  ul

• Tingkatan list deskripsi:
  1. Definition list: di
  2. Definition term: dt
  3. Definition description: dd

Contoh: di-dd-dt
di

dt Siapkan Pasta
dd Rebuslah hingga matang mendidih
dt Tiriskan
dd Jika spaghetti sudah matang
di

• Hyperlink: a Lihat Atribut!

• Tabel: table Lihat Atribut!

meliputi:
• baris (row) vertikal: tr meliputi beberapa kolom
• kolom (data) horizontal: td
• header (bold) judul: th

contoh: tr-th-td(dgn heading) atau tr-td(tanpa heading)

table table

tr-th Senin	td 10.00	td 13.00	td 16.00 tr
th-tr Selasa	td 10.00	td 13.00	td 16.00 tr

• Formulir: Form Lihat Atribut!

Meliputi:
• Nama, password, Upload file, isian meliputi:
  1. Kolom pengisian: input
  3. Keterangan: label
• Dropdown list (PG dlm 1 opsi) meliputi:
  1. Memilih: Select
  2. Opsi option

• Gambar: img Lihat Atribut!

• Video: video Lihat Atribut!

• Audio: audio Lihat Atribut!