Praktikum 1 - Dasar-Dasar HTML

Modul Praktikum
Desain Web ©Sofyan Thayf, 2021
Praktikum 1
DASAR-DASAR HTML
Kompetensi Dasar: Memahami struktur dokumen HTML dan elemen-elemen dasar dalam HTML,
serta mampu membuat halaman web dengan menulis kode HTML
1. Struktur dokumen HTML

Pokok Bahasan:
2. Elemen-elemen dasar dalam HTML
Indikator: 1. Mampu membuat halaman web dengan menggunakan HTML

2. Mampu menjelaskan fungsi-fungsi dari elemen-elemen dasar HTML
Waktu: 2 x 50 menit (1 pertemuan)
A. RINGKASAN MATERI
1. Hypertext Markup Language (HTML)

HTML adalah bahasa kode yang digunakan untuk menampilkan objek atau data sebagai dokumen hypertext yang
membentuk halaman web. File HTML adalah file bertipe text sederhana sehingga dipastikan dapat dibaca oleh
semua platform komputer.
Dalam menyajikan halaman web, HTML menggunakan sejumlah elemen yang dinyatakan dalam bentuk tag
dengan nama tertentu ( <tag> ... </tag> ) untuk menghasilkan struktur dan tampilan konten halaman
web. Tag elemen HTML hanya dapat di-parsing dan ditampilkan efeknya oleh software web-browser, karena itu
web-browser dibutuhkan untuk membaca dokumen HTML atau halaman web.
Struktur Dokumen HTML

Seperti layaknya sebuah file dokumen pada komputer, HTML memiliki struktur yang terdiri dari header dan
body dokumen (lihat Gambar 1).
Bagian header berisi pengaturan-pengaturan yang mempengaruhi keseluruhan dokumen dalam hal tampilan
dan interaksinya dengan web server dan dokumen HTML lain. Kode HTML yang dituliskan pada bagian header
tidak akan terbaca pada tampilan web-browser.
Bagian body merupakan konten dari dokumen HTML yang akan disajikan kepada pembaca web. Semua teks
dan kode HTML yang dituliskan pada bagian body akan terbaca dan ditampilkan efeknya pada web-browser.
STMIK KHARISMA Makassar 1

Modul Praktikum
Gambar 1 Struktur Dokumen HTML
Struktur head dan body harus didefinisikan pada setiap dokumen HTML karena itu penulisan tag wajib untuk
elemen head dan body seperti contoh pada Listing 1 harus selalu mengawali setiap kali menulis dokumen
HTML
Listing 1 Struktur dokumen HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
</head>
<body>
</body>
</html>
Elemen-elemen dasar dalam HTML

Selain elemen <html>, <head>, dan <body> karena merupakan tag wajib untuk membentuk struktur
dokumen HTML, terdapat sejumlah elemen dasar dan paling sering digunakan membuat dokumen HTML, baik
yang sederhana maupun yang paling kompleks, antara lain dapat dilihat pada Tabel 1.

Modul Praktikum
Tabel 1. Elemen HTML yang paling sering digunakan

Elemen HTML Penggunaan
<h1> ... </h1> Heading
Digunakan untuk membuat Heading (judul dan sub-judul tulisan) dengan variasi
ukuran h1 sampai h6, dimana h1 adalah judul level 1 atau sering digunakan sebagai
judul utama, dan h6 adalah level terendah
<p> ... </p> Paragraph
Untuk menulis serangkaian teks yang membentuk satu paragraph. Perpindahan
baris otomatis akan terjadi di tepi kanan window browser atau pada batas kontainer
yang membatasinya dalam layout halaman
<br> Line Break
Memaksa perpindahan baris dari serangkaian teks baik dalam elemen paragraph
atau bukan.
Pindah baris pada serangkaian teks dalam kode HTML tanpa elemen <br> tidak
memberi efek dan akan ditampilkan bersambung pada web-browser
<ul> Un-ordered List
<li> .. </li> Menampilkan daftar item dalam format bulleted. Item dari daftar dituliskan antara tag
<li> .. </li>
</ul>
<ol> Ordered List

<li> .. </li> Menampilkan daftar item dalam format numbered (dengan nomor urut). Item dari
daftar dituliskan antara tag <li> .. </li>
</ol>
<img> Image
Digunakan untuk menampilkan gambar pada halaman dokumen HTML. Gambar
diambil dari file eksternal (di luar dokumen HTML) dengan menyebutkan nama file
pada parameter src
<img src=”namafile.jpg”>
B. PERSIAPAN PRAKTIKUM
1. Perangkat Keras
a. Perangkat komputer
2. Perangkat Lunak (ter-install di komputer, dan siap digunakan)
a. Text/code editor, dianjurkan menggunakan VSCode
b. Web Browser (Google Chrome, Mozila Firefox)

Modul Praktikum
C. KEGIATAN PRAKTIKUM
1. Menyiapkan Folder Web-site

a. Buatlah folder bernama praktikum_dweb211 di dalam komputer local Anda (sesuaikan lokasinya untuk
kemudahan pencarian). Selanjutnya folder ini akan kita sebut sebagai Folder Praktikum
b. Buatlah folder dengan nama latihan01 (biasakanlah menggunakan huruf kecil dan tanpa spasi) di dalam
Folder Praktikum
c. Di dalam folder praktikum01 buat sub-folder dengan nama css
d. Di dalam folder praktikum01 buat sub-folder dengan nama img
Gambar 1. Struktur folder praktikum
2. Membuat Dokumen HTML

Buatlah file baru bernama pallubasa.html di dalam folder praktikum01, lalu salin semua naskah resep Pallu
Basa di dalam box Listing 2 (boleh di-copy-paste)
Listing 2 Resep Pallu Basa
Pallu Basa
Pallu basa adalah makanan tradisional Makassar, Sulawesi Selatan. Seperti Coto Mangkasara (Coto Makassar),
Pallubasa juga terbuat dari jeroan (isi dalam perut) sapi atau kerbau. Namun kini kuliner ini telah berkembang
menjadi pallu basa ayam dan pallu basa kepala ikan. Proses memasaknya pun hampir sama dengan Coto
Makassar yang lebih terkenal, yakni jeroan direbus dalam waktu lama. Setelah matang, jeroan ditambah dengan
daging itu diiris-iris, kemudian ditaruh/dihidangkan dalam mangkuk yang lebih enak jika disajikan panas atau hangat.
Bahan-bahan:
1. Daging sapi - 250 gram
2. Kaldu sapi - 600 ml
3. Kelapa parut, sangrai lalu haluskan hingga berminyak - 30 gram
4. Serai, memarkan - 1 batang
5. Lengkuas, memarkan - 2 cm
6. Gula merah - 1 sdt
7. Kayu manis - 1 cm
8. Cengkeh - 4 buah
9. Air asam - 30 ml
10. Garam - 1 sdt
11. Penyedap rasa (opsional) - 1 sdt
12. Minyak, untuk menumis - 3 sdm
Bumbu Halus:

Modul Praktikum
1. Bawang putih - 5 siung

2. Bawang merah - 8 butir
3. Cabai keriting - 5 buah
4. Jahe - 2 cm
5. Pala - 1/2 biji
6. Ketumbar - 1 sdt
7. Jinten - 1/2 sdt
8. Pelengkap:
9. Irisan daun bawang - secukupnya
10. Bawang goreng - secukupnya
11. Irisan jeruk nipis - secukupnya
12. Sambal - secukupnya
13. Kecap – secukupnya
Cara Membuat:
1. Rebus daging sapi hingga empuk. Angkat dan dinginkan, lalu potong-potong kotak. Sisihkan 600 ml air sisa
rebusan daging sebagai kaldu sapi.
2. Panaskan minyak. Tumis bumbu halus bersama dengan gula merah, serai, lengkuas, kayu manis, cengkeh
hingga harum dan matang.
3. Tuangkan air kaldu sapi. Aduk rata lalu masak dengan api kecil hingga mendidih.
4. Masukkan air asam, garam, penyedap rasa, dan kelapa sangrai. Aduk rata dan masak hingga bumbu meresap
dan kuah mengental. Angkat.
5. Siap disajikan.
Tips:
1. Jika suka, anda bisa menggunakan jeroan sapi sesuai selera.
2. Daging bisa dimasak menggunakan panci presto agar lebih cepat empuk.
3. Pallu basa biasa disajikan dengan kuning telur ayam mentah.
Gambar 2 Salinan resep dalam editor VSCode

Modul Praktikum
3. Melihat Dokumen HTML melalui Web Browser

Bukalah file pallubasa.html melalui web-browser, pelajari dan jelaskan apa yang terjadi
Gambar 3. Tampilan dokumen html tanpa tag HTML
4. Memformat Dokumen HTML

Ikuti petunjuk dosen mata kuliah, untuk langkah-langkah melalukan formatting pada dokumen HTML
D. TUGAS SELANJUTNYA
1. Buat halaman resep baru untuk minimal 15 masakan khas derah/tradisional Indonesia selain yang dikerjakan
dalam praktikum ini. Pastikan semua resep memiliki struktur yang sama dengan contoh pada praktikum ini
(judul, bahan, bumbu, cara membuat dan tips. Tambahkan sendiri bila diperlukan)
2. Cari, download dan simpan gambar/foto yang dianggap cocok untuk menjadi feature image (gambar ilustrasi)
dari setiap halaman web resep khas/tradisiional yang ditulis. Simpan semua foto/gambar dalam folder img.

Praktikum 1 - Dasar-Dasar HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktikum 1 - Dasar-Dasar HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Praktikum

Desain Web ©Sofyan Thayf, 2021

1. Struktur dokumen HTML

Indikator: 1. Mampu membuat halaman web dengan menggunakan HTML

Waktu: 2 x 50 menit (1 pertemuan)

1. Hypertext Markup Language (HTML)

Struktur Dokumen HTML

STMIK KHARISMA Makassar 1

Gambar 1 Struktur Dokumen HTML

Listing 1 Struktur dokumen HTML

Elemen-elemen dasar dalam HTML

STMIK KHARISMA Makassar 2

Tabel 1. Elemen HTML yang paling sering digunakan

<ol> Ordered List

STMIK KHARISMA Makassar 3

1. Menyiapkan Folder Web-site

Gambar 1. Struktur folder praktikum

2. Membuat Dokumen HTML

Listing 2 Resep Pallu Basa

STMIK KHARISMA Makassar 4

1. Bawang putih - 5 siung

Gambar 2 Salinan resep dalam editor VSCode

STMIK KHARISMA Makassar 5

3. Melihat Dokumen HTML melalui Web Browser

Gambar 3. Tampilan dokumen html tanpa tag HTML

4. Memformat Dokumen HTML

STMIK KHARISMA Makassar 6

Anda mungkin juga menyukai