Uncategories Pemrograman Web 2 - HTML Dasar

Pemrograman Web 2 - HTML Dasar

3:11 PM


https://www.binar.co.id/blog/belajar-html-dasar
https://www.rumahweb.com/journal/belajar-html/

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, mahasiswa mampu:

  1. Menjelaskan struktur dasar dokumen HTML.

  2. Menggunakan elemen-elemen HTML dasar: heading, paragraph, list, link, image, table, dan form.

  3. Membuat halaman profil sederhana menggunakan HTML.

Materi Pembelajaran

1. Struktur Dokumen HTML

Setiap halaman web berbasis HTML memiliki struktur umum:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten halaman ditulis di sini -->
</body>
</html>

  • <!DOCTYPE html> → deklarasi tipe dokumen HTML5.

  • <html> → pembungkus seluruh dokumen HTML.

  • <head> → bagian untuk metadata, judul, link CSS, dsb.

  • <body> → bagian yang ditampilkan di browser.

2. Elemen Dasar HTML

a. Heading

Untuk judul dan subjudul, mulai dari <h1> (besar) sampai <h6> (kecil).

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Kecil</h3>

b. Paragraph

Menuliskan teks dalam paragraf:

<p>Ini adalah sebuah paragraf. HTML digunakan untuk membuat struktur dasar halaman web.</p>

c. List

  • Ordered List (bernomor):

<ol>
    <li>Pertama</li>
    <li>Kedua</li>
</ol>

  • Unordered List (bullet):

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

d. Link (Hyperlink)

Mengarahkan pengguna ke halaman lain.

<a href="https://www.google.com" target="_blank">Kunjungi Google</a>

  • href = alamat tujuan

  • target="_blank" = membuka di tab baru

e. Image (Gambar)

Menampilkan gambar pada halaman.

<img src="images/foto.jpg" alt="Foto Profil" width="200">

  • src = lokasi file gambar

  • alt = deskripsi alternatif

  • width/height = ukuran gambar

f. Table (Tabel)

Untuk menampilkan data dalam bentuk baris dan kolom.

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Jurusan</th>
    </tr>
    <tr>
        <td>Ani</td>
        <td>Informatika</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>Sistem Informasi</td>
    </tr>
</table>

g. Form (Formulir)

Untuk input data pengguna.

<form>
    <label>Nama:</label><br>
    <input type="text" name="nama"><br><br>

    <label>Email:</label><br>
    <input type="email" name="email"><br><br>

    <label>Jenis Kelamin:</label><br>
    <input type="radio" name="gender" value="Laki-laki"> Laki-laki
    <input type="radio" name="gender" value="Perempuan"> Perempuan<br><br>

    <label>Hobi:</label><br>
    <input type="checkbox" name="hobi" value="Membaca"> Membaca
    <input type="checkbox" name="hobi" value="Olahraga"> Olahraga<br><br>

    <input type="submit" value="Kirim">
</form>

Latihan : Membuat Halaman Profil Sederhana

Instruksi:

  1. Buat folder bernama profil di dalam htdocs (XAMPP) atau www (Laragon).

  2. Buat file index.html di dalam folder tersebut.

  3. Ketik kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Profil Saya</title>
</head>
<body>
    <!-- Heading -->
    <h1>Profil Mahasiswa</h1>

    <!-- Paragraf -->
    <p>Halo! Nama saya <b>Andi Setiawan</b>. Saya seorang mahasiswa jurusan Teknik Informatika 
    yang tertarik pada pengembangan web dan pemrograman.</p>

    <!-- Gambar -->
    <img src="images/foto.jpg" alt="Foto Profil" width="200">

    <!-- List -->
    <h2>Hobi Saya:</h2>
    <ul>
        <li>Membaca</li>
        <li>Olahraga</li>
        <li>Koding</li>
    </ul>

    <!-- Tabel -->
    <h2>Pendidikan</h2>
    <table border="1" cellpadding="5">
        <tr>
            <th>Tahun</th>
            <th>Sekolah</th>
        </tr>
        <tr>
            <td>2018 - 2021</td>
            <td>SMA Negeri 1 Surabaya</td>
        </tr>
        <tr>
            <td>2021 - Sekarang</td>
            <td>Universitas XYZ</td>
        </tr>
    </table>

    <!-- Form -->
    <h2>Kontak Saya</h2>
    <form>
        <label>Nama:</label><br>
        <input type="text" name="nama"><br><br>

        <label>Email:</label><br>
        <input type="email" name="email"><br><br>

        <label>Pesan:</label><br>
        <textarea name="pesan" rows="4" cols="30"></textarea><br><br>

        <input type="submit" value="Kirim">
    </form>

    <!-- Link -->
    <p>Kunjungi <a href="https://github.com">GitHub</a> saya untuk melihat project.</p>
</body>
</html>

  1. Buka browser, lalu akses http://localhost/profil/index.html.

Tugas Individu

  1. Modifikasi halaman profil dengan menambahkan:

    • Foto diri (gunakan gambar apapun sementara).

    • Tabel pengalaman organisasi (minimal 2 baris).

    • Form pendaftaran teman dengan input nama, email, dan hobi.

  2. Kumpulkan file index.html dan buatlah dokumentasinya kemudian kirim ke google form tugas

Proyek

1. Halaman Biodata Sederhana

  • Buat halaman biodata.html.

  • Tampilkan: nama, tempat & tanggal lahir, alamat, jurusan, hobi.

  • Gunakan heading untuk judul dan paragraf untuk deskripsi.

2. Daftar Hobi dengan List

  • Buat halaman hobi.html.

  • Tampilkan daftar hobi menggunakan unordered list dan ordered list.

  • Contoh:

    • Unordered → Hobi harian (Membaca, Olahraga, Bermain Musik).

    • Ordered → Hobi favorit (1. Koding, 2. Traveling, 3. Menulis).

3. Navigasi Antar Halaman

  • Buat 3 halaman: home.html, about.html, contact.html.

  • Tambahkan link di bagian atas halaman agar bisa berpindah antar halaman.

  • Contoh: [Home] [About] [Contact].

4. Galeri Foto

  • Buat halaman galeri.html.

  • Tampilkan minimal 4 gambar menggunakan tag <img>.

  • Tambahkan atribut alt dan atur ukuran gambar agar seragam.

5. Tabel Jadwal Kuliah

  • Buat halaman jadwal.html.

  • Tampilkan tabel berisi jadwal kuliah (Hari, Mata Kuliah, Jam, Dosen).

  • Gunakan <table>, <tr>, <th>, <td>.

6. Form Kontak

  • Buat halaman kontak.html.

  • Buat form dengan input: nama, email, pesan.

  • Tambahkan tombol submit.

7. Curriculum Vitae (CV)

  • Buat halaman cv.html.

  • Tampilkan: data diri, pendidikan, pengalaman organisasi, skill.

  • Gunakan heading, paragraf, list, tabel, dan link (misalnya ke LinkedIn/GitHub).

8. Artikel Sederhana

  • Buat halaman artikel.html.

  • Buat artikel pendek tentang topik bebas (misalnya teknologi, pendidikan, hobi).

  • Gunakan heading untuk judul, paragraf untuk isi, dan link ke sumber referensi.

9. Daftar Menu Restoran

  • Buat halaman menu.html.

  • Tampilkan daftar makanan & minuman dengan harga.

  • Gunakan tabel dengan kolom: Nama Menu, Kategori (Makanan/Minuman), Harga.

10. Profil dengan Semua Elemen

  • Buat halaman profil.html.

  • Isi harus memuat:

    • Judul profil (heading)

    • Paragraf deskripsi diri

    • Foto profil (image)

    • Daftar hobi (list)

    • Tabel riwayat pendidikan

    • Form kontak sederhana

    • Link ke media sosial

Pengumpulan Tugas

Link Absen







https://youtu.be/11AvAtd5zhg


Fajar Baskoro

Share this

Related Posts

Next
« Prev Post
Previous
Next Post »
Subscribe to: Post Comments (Atom)