Tutorial PDF: Membuat Website Biografi dengan HTML & Scraping Python

Tutorial & Lab Praktikum Proyek 1 - POLBAN: Membuat Website Biografi/CV dengan HTML dan Scraping Menggunakan Python Selamat datang di tutorial dan lab praktikum Proyek 1 - 2025! Di sini, kamu akan mempelajari dasar-dasar HTML dengan sangat detail, mulai dari struktur dokumen, metadata, konten, eleme...

Tutorial & Lab Praktikum Proyek 1 - POLBAN: Membuat Website Biografi/CV dengan HTML dan Scraping Menggunakan Python Selamat datang di tutorial dan lab praktikum Proyek 1 - 2025! Di sini, kamu akan mempelajari dasar-dasar HTML dengan sangat detail, mulai dari struktur dokumen, metadata, konten, elemen inline dan blok, hingga form dan tabel. Selain itu, kita juga akan membuat sebuah website sederhana (biografi/CV) dan mempelajari cara melakukan web scraping menggunakan Python. Daftar Isi 1. Pendahuluan 2. Bagian 1: Dasar-dasar Struktur HTML 1.1. Document Metadata 1.2. Content Sections 1.3. Block Text Content 1.4. List: Ordered dan Unordered 1.5. Preformatted Text 1.6. Elemen Inline 1.7. Tag Gambar 1.8. Tabel 1.9. Formulir (Forms) 3. Bagian 2: Membuat Website Biografi/CV 2.1. Struktur Dasar Website 2.2. Menambahkan Konten dan Gaya 4. Bagian 3: Scraping Website Menggunakan Python 5. Deploy ke GitHub Pages 6. Kesimpulan Pendahuluan Pada tutorial dan lab praktikum ini, kamu akan belajar: Dasar-dasar HTML: Memahami struktur dokumen HTML mulai dari metadata hingga konten. Membuat Website Sederhana: Kita akan membuat sebuah website biografi/CV sederhana. Scraping dengan Python: Belajar cara mengambil data dari website menggunakan library Python seperti requests dan BeautifulSoup. Bagian 1: Dasar-dasar Struktur HTML 1.1. Document Metadata Metadata adalah bagian dari dokumen HTML yang memberikan informasi tentang halaman web, seperti judul halaman dan link ke file CSS. Metadata ditempatkan di dalam tag. Contoh: Intro to HTML hr { margin: 40px; } Penjelasan: : Menyatakan jenis dokumen dan versi HTML. : Membuka dokumen HTML dan menyetel bahasa menjadi Bahasa Indonesia.  : Tempat menaruh metadata seperti judul dan link ke stylesheet. : Menentukan judul halaman yang tampil di tab browser. : Menghubungkan halaman dengan file CSS eksternal. : Menyisipkan aturan CSS secara langsung. 1.2. Content Sections Bagian konten yang terlihat di browser ditempatkan di dalam tag. HTML5 menyediakan elemen semantik untuk mengorganisir konten. Struktur Dasar: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Penjelasan: : Berisi elemen judul dan navigasi. : Tempat konten utama halaman. : Konten yang berdiri sendiri (misal, artikel, posting blog, atau biografi). : Konten tambahan atau sampingan. : Informasi penutup seperti hak cipta dan kontak. 1.3. Block Text Content Block elements digunakan untuk mengelompokkan teks dan konten dalam blok besar. Contoh yang umum digunakan adalah dan. Contoh Penggunaan dan :  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo et quod odio velit, hic qui autem dolores magni earum ducimus dolorem modi, Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum maiores vitae? Architecto amet provident labore error officia Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nobis ex optio, minus in, eum ratione magnam aut distinctio, aliquid Penjelasan: : Elemen generik untuk mengelompokkan konten blok. : Menandai paragraf teks. 1.4. List: Ordered dan Unordered HTML memiliki dua jenis list: Ordered List (berurutan/nomor) dan Unordered List (tidak berurutan/bulet). Ordered List (Daftar Berurutan): Item list pertama Item list kedua Item list ketiga Unordered List (Daftar Tidak Berurutan): Item list pertama Item list kedua Item list ketiga 1.5. Preformatted Text Tag digunakan untuk menampilkan teks dengan format aslinya, termasuk spasi dan baris baru. Contoh: // Ini adalah contoh penggunaan tag pre -- spasi dan tab akan dipertahankan Unordered list items // Untuk menampilkan kode HTML secara literal, lakukan escape: <ul> <li>Unordered</li> <li>list</li> <li>items</li> </ul> 1.6. Elemen Inline Elemen inline digunakan untuk memformat teks di dalam satu baris tanpa membuat baris baru. Contoh Elemen Inline: Anchor ( ): Membuat hyperlink. Span ( ): Container inline generik. Bold ( ), Emphasis ( ), Italic ( ): Untuk penekanan teks. Subscript ( ) dan Superscript ( ): Untuk teks bawah atau atas. Code ( ): Untuk menampilkan potongan kode. Contoh: Kunjungi Example Website untuk informasi lebih lanjut. Berikut teks berwarna biru dan teks tebal. Kamu juga dapat menuliskan teks yang ditekankan atau kode seperti console.log('Hello');. 1.7. Tag Gambar Tag digunakan untuk menyisipkan gambar ke halaman web. Selalu sertakan atribut alt untuk aksesibilitas. Contoh: Penjelasan: src : Menunjukkan lokasi atau path gambar. alt : Menyediakan deskripsi alternatif jika gambar tidak dapat ditampilkan. 1.8. Tabel Tabel digunakan untuk menyusun data dalam bentuk baris dan kolom. Contoh Tabel: Header Kolom 1 Header Kolom 2 Isi tabel baris 1, kolom 1 Isi tabel baris 1, kolom 2 Baris yang menggabungkan dua kolom Penjelasan: : Mengelompokkan bagian header dari tabel. : Mengelompokkan isi utama tabel. colspan : Menggabungkan dua atau lebih kolom dalam satu sel. 1.9. Formulir (Forms) Forms digunakan untuk mengumpulkan input dari pengguna, seperti teks, tanggal, pilihan, dan lain-lain. Contoh Formulir: Masukkan nama kamu: Pilih opsi: Option 1 Option 2 Pilih warna: Tanggal Mulai: Pilih salah satu: Radio 1 Radio 2 Radio 3 Submit Penjelasan: : Elemen pembungkus yang mengelompokkan semua input. : Berbagai tipe input (teks, warna, tanggal, radio, dll). dan : Membuat menu dropdown. dan : Mengelompokkan elemen form yang berhubungan (misalnya radio button). Bagian 2: Membuat Website Biografi/CV Pada bagian ini, kamu akan membuat website biografi/CV sederhana menggunakan elemen-elemen HTML yang telah kita pelajari. 2.1. Struktur Dasar Website Buat sebuah file HTML (misalnya index.html ) dengan isi berikut. Salin dan tempel kode di bawah ini, lalu simpan: Biografi Saya hr { margin: 40px; }  } Nama Saya Profesi atau Pekerjaan Tentang Pengalaman Kontak Tentang Saya Halo, saya adalah seorang [profesi]. Saya memiliki minat dalam pengembangan web, pemrograman, dan desain. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo et quod odio velit, hic yang... Pengalaman Perusahaan A: Posisi X (2018-2020) Perusahaan B: Posisi Y (2020-Sekarang) Keterampilan Keterampilan Proficiency HTML/CSS Advanced Python Advanced  Fakta Menarik Saya suka coding, mendaki, dan fotografi. Hubungi Saya Masukkan nama kamu: Pilih opsi: Option 1 Option 2 Pilih warna: Tanggal Mulai: Pilih salah satu: Radio 1 Radio 2 Radio 3 Submit Penjelasan: File index.html di atas menggabungkan seluruh elemen HTML yang telah kita bahas, seperti metadata, header, main (article dan aside), serta footer. Kamu dapat mengganti teks dan konten sesuai dengan identitas dan informasi pribadimu. 2.2. Menambahkan Konten dan Gaya Untuk menambahkan gaya pada tampilan website, buat file CSS (misalnya style.css ) di folder yang sama. Contoh isinya:  body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header, footer { background-color: #f2f2f2; padding: 20px; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin-right: 10px; } main, aside { padding: 20px; } Penjelasan: File CSS ini mengatur tampilan dasar website agar lebih menarik dan mudah dibaca. Bagian 3: Scraping Website Menggunakan Python Setelah website sederhana kamu selesai, kita akan belajar cara mengambil data dari website menggunakan Python. 3.1. Menyiapkan Lingkungan Python Pastikan Python sudah terinstall di komputer kamu. Kemudian, install library yang diperlukan dengan perintah: pip install requests beautifulsoup4 3.2. Membuat Skrip Python untuk Scraping Buat file baru (misalnya scrape.py ) dan salin kode berikut:  import requests from bs4 import BeautifulSoup # URL website yang telah kamu buat (jika dijalankan secara lokal, gunakan localhost, misalnya http://localhost:8000/index.html) url = 'http://localhost:8000/index.html' # Mengambil konten halaman menggunakan requests response = requests.get(url) if response.status_code == 200: # Parsing HTML menggunakan BeautifulSoup soup = BeautifulSoup(response.text, 'html.parser') # Contoh 1: Mengambil heading utama (h1) h1 = soup.find('h1') print('Heading Utama:', h1.get_text() if h1 else 'Tidak ditemukan') # Contoh 2: Mengambil semua heading (h1 hingga h6) for level in range(1, 7): for heading in soup.find_all(f'h{level}'): print(f'H{level}:', heading.get_text()) # Contoh 3: Mengambil semua paragraf dalam tentang = soup.find('article', id='tentang') if tentang: paragraphs = tentang.find_all('p') for idx, p in enumerate(paragraphs, 1): print(f'Paragraf {idx} dalam Tentang:', p.get_text()) # Contoh 4: Mengambil semua link dalam navigasi nav = soup.find('nav') if nav: links = nav.find_all('a') for link in links: print('Link Navigasi:', link.get('href'), '-', link.get_text()) # Contoh 5: Mengambil input pada formulir di footer footer = soup.find('footer') if footer: inputs = footer.find_all('input') for inp in inputs: tipe = inp.get('type') nama = inp.get('name') print('Input Form:', nama, 'Tipe:', tipe) else: print("Gagal mengambil halaman. Status Code:", response.status_code) Penjelasan: Requests: Library untuk mengambil konten halaman web. BeautifulSoup: Library untuk parsing HTML agar lebih mudah mencari dan mengekstrak elemen. Skrip ini memberikan contoh cara mengambil heading, paragraf, link navigasi, dan input dari formulir. 3.3. Menjalankan Skrip Python Jalankan skrip dengan perintah berikut di terminal: python scrape.py Lihat output di terminal untuk memastikan data telah diambil dengan benar. Deploy ke GitHub Pages Setelah selesai membuat website dan menguji scraping, kamu dapat mempublikasikan website di GitHub Pages. Berikut langkah-langkah singkatnya:  1. Buat Repository Baru: Buat repository baru di GitHub, misalnya dengan nama website-biografi. 2. Push Kode: Push file index.html , style.css , dan file README.md (file ini) ke repository tersebut. 3. Aktifkan GitHub Pages: Masuk ke Settings repository. Gulir ke bagian GitHub Pages. Pilih branch (misalnya main ) dan folder root sebagai source, lalu simpan. 4. Akses Website: Setelah beberapa menit, website kamu akan tersedia pada URL yang disediakan oleh GitHub Pages. Kesimpulan Pada tutorial dan lab praktikum ini, kamu telah: Mempelajari struktur dasar HTML secara mendetail, mulai dari metadata, konten, hingga elemen teks, list, tabel, dan form. Membuat sebuah website biografi/CV sederhana menggunakan HTML. Mempelajari cara melakukan web scraping dengan Python menggunakan requests dan BeautifulSoup. Mempersiapkan website untuk deploy ke GitHub Pages. Selamat belajar dan semoga sukses!