HTML - Materi Skrip HTML Dasar Al Azhar.pptx
WellyPutra2
0 views
10 slides
Sep 22, 2025
Slide 1 of 10
1
2
3
4
5
6
7
8
9
10
About This Presentation
Materi SKrip Koding
Slide Content
Judul & Pengenalan (Gambar latar : screenshot website portofolio Welly) MEMBUAT WEBSITE PORTOFOLIO MU Apa itu Website Portofolio ? Kartu nama digital untuk menampilkan : ✏️ Karya terbaikmu 🛠️ Skill yang kamu kuasai 📞 Cara menghubungimu Contoh : "Website Welly menampilkan pengalaman mengajar dan proyek robotiknya " Created by : Welly P.G.
Tools yang Dibutuhkan (Ikon: VS Code, Chrome, GitHub) ALAT WAJIB YANG HARUS DISIAPKAN: VS Code (untuk menulis kode) - code.visualstudio.com Google Chrome (untuk melihat hasil) Akun GitHub (untuk membuat website online) - github.com Tugas 1: Instal VS Code dan buat akun GitHub sekarang!
Struktur File (Diagram folder tree sederhana) 📂 PORTOFOLIO_KAMU ├── 📄 index.html (File utama) ├── 📂 css │ ├── style.css (Warna & layout) │ └── responsive.css (Untuk HP) ├── 📂 img (Simpan semua gambar) └── 📂 js (Untuk animasi) Tips: Nama folder harus sama persis, simpan semua gambar di folder /img
Memahami HTML Dasar (Screenshot kode HTML sederhana) <!DOCTYPE html> <html> <head> <title>Portfolioku</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Halo, saya [Namamu]</h1> <p>Saya ahli di bidang...</p> </body> </html> Yang bisa diubah: Teks dalam <h1> dan <p>, Nama file CSS jika berbeda
Mengedit Konten (Before-after edit teks) CARA EDIT WEBSITE WELLY: Buka index.html di VS Code Cari teks: "Welly Putra Ganda" → ganti dengan namamu Contoh Edit: <h1>I Am [Namamu]</h1> <p>[Pekerjaanmu] || [Keahlianmu]</p>
Mengganti Gambar (Screenshot folder img) LANGKAH GANTI FOTO: 1. Siapkan foto dengan format .jpg/.png 2. Simpan di folder /img 3. Edit kode: <img src="img/gambar37.png" alt="Foto Saya"> Ganti gambar37.png dengan nama file fotomu Tips: Gunakan tinypng.com untuk kompres gambar
Link Sosial Media (Screenshot kode link WhatsApp) CARA UPDATE LINK: <a href="https://wa.me/6288217701361"><img src="img/gambar13.png"></a> Ganti nomor dan logo sosial media Daftar Link yang Perlu Diubah: WhatsApp, Instagram, Email, LinkedIn
Upload ke GitHub (Screenshot GitHub Pages settings) CARA MEMBUAT WEBSITE ONLINE: 1. Buat repository: username.github.io 2. Upload semua file 3. Aktifkan GitHub Pages: Settings → Pages → branch main Website akan live di: https://username.github.io
Hasil Akhir & Tugas (Screenshot website siswa) YANG SUDAH KITA PELAJARI: ✔️ Edit teks & gambar ✔️ Ganti link sosial media ✔️ Upload ke GitHub TUGAS: Buat website versimu, upload ke GitHub, kirim link ke: [Email Anda] Contoh URL: https://namakamu.github.io
Troubleshooting (Ikon tanda seru) MASALAH UMUM & SOLUSI: ❌ Gambar tidak muncul → Cek nama file dan folder /img ❌ GitHub Pages error → Pastikan nama repo dan index.html ada di root Bonus untuk Guru: Siapkan file .zip (HTML+CSS+img), demo langsung edit & upload
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 0
- Slides 10
- Age 70 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views