Menampilkan Tulisan Hello World
1. Buka aplikasi Sublime Text dan buat file baru dengan cara Save As, kemudian beri nama
[Link]
2. Tuliskan HTML kemudian tekan tombol Tab pada keyboard untuk membuat tag
HTML secara otomatis seperti berikut :
3. Pada bagian body, tuliskan tag paragraf dengan cara ketik tombol p + Tab pada
keyboard, maka tag paragraf akan dibuat secara otomatis :
4. Tuliskan Hello World ! pada tag p seperti berikut :
5. Save atau simpan program HTML dengan cara tekan tombol Ctrl + S pada keyboard,
kemudian klik kanan pada mouse dan pilih open in Browser
6. Maka akan muncul tulisan hello world pada halaman web, selamat kalian berhasil
membuat halaman web pertama kalian
7. Sekarang coba ganti tulisan hello world dengan kalimat yang mengandung nama kalian,
kemudian tambahkan tag Bold pada nama kalian seperti berikut :
8. Dengan langkah yang sama, Save program HTML kemudian lihat hasilnya di browser.
Maka tulisan nama kalian akan menjadi tebal
Tag HTML
Untuk mempelajari Tag HTML secara lengkap pada tautan berikut :
[Link]
1. Beberapa Tag pada bagian <head>
2. Beberapa Tag pada bagian <body> :
3. Struktur Tag :
Contoh :
4. Attribute
Silahkan pelajari attribute HTML lainnya pada tautan berikut :
[Link]
5. Setelah mempelajari fungsi dari berbagai Tag dan Attribut, Selanjutnya kita akan
mencobanya dengan mempraktikan langsung di aplikasi sublime text.
6. Buatlah file HTML baru dengan cara Save As dan beri nama [Link]
7. Gunakan tag header <h1> sampai dengan <h6> dengan menuliskan nama pada <h1>,
asal pada <h2>, program studi/jurusan pada <h3>, kelas/rombel pada <h4>, mata
pelajaran pada <h5> dan nama sekolah pada <h6>. Contohnya seperti berikut :
8. Save program html, kemudian buka di browser, dengan cara klik kanan – Open in
Browser
9. Maka halaman web akan menampilkan tulisan sebagai header dengan ukuran font yang
berbeda.
10. Sekarang tambahkan paragraf dibagian bawah nama kalian dengan menggunakan tag
<p>, buat isi paragraf dengan menuliskan lorem + Tab, maka paragraf akan dibuat secara
otomatis seperti berikut :
11. Dengan cara yang sama, tambahkan paragraf di bagian bawah header asal dan program
studi seperti berikut :
12. Pada Paragraf 1 (h1/Header Nama), buat tulisan menjadi tebal dengan memberikan tag
bold <b>,
13. Pada paragraf 2 (h2/header asal) buat tulisan menjadi cetak miring dengan memberikan
tag italic <i>,
14. Pada paragraf 3 (h3/header program studi) buat tulisan bergaris bawah dengan
memberikan tag underline <u>
15. Save dan buka di browser, maka hasilnya seperti berikut :
16. Sekarang kita akan coba membuat h2 sampai h6 menjadi komentar sehingga yang
dampilkan hanya paragraf pada h1. Caranya tuliskan <!--pada awal program dan tutup
dengan -->, seperti berikut :
17. Save dan buka di browser, maka yang ditampilkan hanya paragraf pada h1
18. Selanjutnya kita akan coba posisikan tulisan di tengah dengan cara menggunakan tag
<center>, seperti berikut :
19. Save dan buka di browser, maka posisi paragraf akan berada di tengah halaman seperti
berikut :
20. Setelah ini kita akan coba untuk menambahkan foto/gambar ke halaman web. Siapkan file
foto kalian dengan nama [Link] (sesuaikan format foto, png, jpeg atau jpg) dan
pindahkan ke folder yang sama dengan file [Link].
21. Tambahkan foto dengan cara tuliskan tag image <img> di antara tag center dan paragraf
dan atur ukuran foto menjadi 200 dengan perintah width seperti berikut :
22. Save dan buka di browser, maka hasilnya foto akan ditampilkan diatas paragraf seperti
berikut :
23. Kita akan coba untuk membuat nama sebagai hyperlink yang jika di klik akan membuka
akun sosial media kita. Silahkan siapkan link sosial media kalian seperti akun facebook,
instagram, X/tweeter maupun youtube (pilih salah satu). Contoh, saya menggunakan link
akun youtube saya :
24. Kemudian buat tag hyperlink <a> dan copy -paste link sosial media kalian dalam tag
tersebut seperti berikut :
25. Save dan buka di browser, jika kita klik tulisan Nama : Roy S. Ketaren atau h1 maka
halaman web akan berpindah ke halaman akun sosial media kita :
Membuat List
1. Terdapat tiga Tag untuk membuat List pada HTML :
1) <ol></ol> : Order List, untuk membuat list terurut
2) <ul></ul> : Unorder List, untuk membuat list tidak terurut
3) <dl></dl> : Definition List, untuk membuat daftar definisi atau terminologi
2. Untuk mencoba berbagai tag list, buka aplikasi Sublime Text dan buat file baru dengan
nama [Link]
3. Sama seperti sebelumnya, buat tag HTML dengan cara ketik html dan tekan tombol Tab
pada keyboard seperti berikut :
4. Buat list jurusan yang ada di SMK Negeri 1 Sintuk Toboh Gadang dengan menggunakan
Tag <ol> seperti berikut :
5. Save dan buka di browser, maka list jurusan di SMK 1 Sintoga akan ditampilkan pada
halaman web seperti berikut :
6. Kita bisa gunakan attribute type untuk merubah tipe numbering dari list, contohnya seperti
berikut :
7. Hasilnya tipe numbering akan berubah menjadi ABCD dst :
8. Dengan langkah yang sama, Buat list data diri dengan menggunakan Tag <ul> seperti
berikut :
9. Save dan buka di browser, maka hasilnya list data diri akan ditampilkan seperti berikut :
10. Selanjutnya, buat lis menggunakan tag <dl> untuk menampilkan materi pemrograman
web seperti berikut :
11. Maka hasilnya, list terminologi atau definisi akan ditampilkan seperti berikut :
Hyperlink atau Tautan
1. Buatlah 2 file HTML dengan nama [Link] dan [Link]
2. Pada [Link], buatlah tulisan MASUK dengan hyperlink untuk berpindah ke
[Link] seperti berikut :
3. Lakukan hal yang sama pada [Link], buatlah tulisan kembali dengan hyperlink
untuk berpindah ke [Link] seperti berikut :
4. Save dan buka di browser, pada halaman 1, saat kita klik tulisan MASUK maka kita akan
berpindah ke halaman 2, sedangkan pada halaman 2 saat kita klik kembali akan
berpindah ke halaman 1.
5. Kita juga dapat menerapkan hyperlink pada gambar, siapkan 2 file gambar dengan nama
gambar1 dan gambar2 (format gambar disesuaikan jpeg atau png dst) pada folder yang
sama dengan file HTML seperti berikut :
6. Pada [Link] dan [Link] buatlah kode program seperti berikut :
7. Hasilnya, saat gambar1 diklik maka akan berpindah ke halaman 2, sebaliknya jika di klik
gambar2 akan berpindah ke halaman 1.
Membuat Tabel
1. Struktur dari tabel Pada HTML adalah seperti berikut :
2. Buat file html baru dengan nama [Link]. Untuk membuat tabel, gunakan tag
<tabel></tabel> seperti berikut :
3. Maka hasilnya adalah seperti berikut :
Membuat Form
1. Untuk membuat sebuah form pada HTML kita dapat menggunakan tag <form></form>.
Elemen form terdiri dari :
▪ input
▪ textarea
▪ select
▪ button
▪ label
2. Tipe input yang dapat digunakan diantaranya adalah :
▪ text
▪ password
▪ radio
▪ checkbox
▪ submit
▪ reset
▪ button
3. Buat file HTML baru dengan nama [Link], dan buat program untuk menampilkan form
sederhana seperti berikut :
4. Maka hasilnya, form sederhana akan ditampilkan seperti contoh berikut :
5. Kita dapat menambahkan tombol dengan menggunakan tipe input button:
6. Maka hasilnya tombol berhasil dibuat seperti berikut :
DAFTAR PUSTAKA
Saputra Adam. (2019). Buku Sakti HTML, CSS & Javasctipt : Pemrograman Web. Jakarta
: Start Up.
Prasetyo Adi. (2022). Panduan Cepat Belajar HTML, PHP & MySQL. Jakarta : Elex
Media Komputindo.
Khozaimi (2020). Dasar Pemrograman Web : HTML, CSS, Javasript. Jakarta : Media Nusa
Creative.
LAMPIRAN
INSTRUMEN ASESMEN FORMATIF AWAL
Soal Asesmen Awal (Diagnostik)
No Pertanyaan
1. Apa kepanjangan dari HTML ?
2. Apa fungsi dari HTML ?
3. Apa saja struktur yang ada pada HTML ?
4. Sebutkan tag HTML yang kamu ketahui !
Hasil Asesmen Awal (Diagnostik)
No Pengetahuan Awal Peserta didik Ya Tidak
1. Peserta didik telah mengetahui kepanjangan dari HTML
2. Peserta didik telah mengetahui fungsi dari HTML
3. Peserta didik telah mengetahui struktur yang ada pada HTML
4. Pesert didik telah mengetahui beberapa tag HTML
Soal Asesmen Formatif Awal (Pre-Test)
No Pertanyaan
1. HTML dibuat pada tahun ?
2. HTML pertama memiliki berapa Tag ?
3. HTML dapat dikolabrasikan dengan penggunaan bahasa ?
4. Yang bukan termasuk struktur HTML ?
5. Tag HTML yang menandakan proses mulai menuliskan kode program pada dokumen
HTML ?
6. Tag <center> berfungsi untuk ?
7. Tag <p> berfungsi untuk ?
8. Tag <br> berfungsi untuk ?
9. Tag <b> berfungsi untuk ?
10. Tag <i> berfungsi untuk ?
11. Tag <u> berfungsi untuk ?
12. Tag <img src=””> berfungsi untuk ?
13. Tag <a href=””> berfungsi untuk ?
14. Tag <ol> berfungsi untuk ?
15. Jelaskan perbedaan fungsi tag <tr> dan <td>!
Hasil Asesmen Formatif Awal (Pre-Test)
No Nama Nomor Soal Jumlah
Peserta 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Jawaban
didik Benar
1.
2.
3.
4.
5.
n.
Rubrik Penilaian Asesmen Formatif Awal (Rerata)
No Soal Kunci Jawaban Nilai/Skor
1 C. 1991 1
2 B. 18 1
3 C. VB 1
4 D. Body 1
5 B. <html></html> 1
6 Membuat posisi tampilan berada ditengah 1
7 Membuat paragraf 1
8 Membuat baris baru 1
9 Membuat tulisan cetak tebal 1
10 Membuat tulisan cetak miring 1
11 Membuat tulisan bergaris bawah 1
12 Menampilkan gambar 1
13 Membuat hyperlink 1
14 Membuat list terurut (order list) 1
15 Tag <tr> berfungsi untuk membuat baris, 1
sedangkan Tag <td> berfungsi untuk membuat
sel pada tabel
Total Skor 15
Rumus Menghitung Nilai Asesmen Formatif Awal (Pre-Test):
Nilai = Jumlah Jawaban Benar x 100
Total Skor
INSTRUMEN ASESMEN FORMATIF PROSES
Nama Peserta Didik : …………………………………………..
Kelas : …………………………………………..
Hasil Asesmen Formatif (Proses)
No Kompetensi Peserta didik Tercapai Belum
Tercapai
1. Menjelaskan pengertian dan fungsi HTML
2. Menentukan Struktur HTML
3. Menentukan Fungsi berbagai tag dalam HTML
4. Mengidentifikasi Format teks dalam HTML
5. Menerapkan perintah HTML
KISI-KISI SOAL ASESMEN SUMATIF LINGKUP MATERI
Dengan menerapkan model pembelajaran project based learning (PjBL), Peserta didik secara
berkelompok mengerjakan proyek pengembangan web dalam lingkup materi :
1. Menerapkan perintah HTML.
2. Menerapkan perintah CSS.
3. Menerapkan pemrograman Javascripth.
SOAL SUMATIF LUNGKUP MATERI
Proyek Pengembangan Web
Instruksi Kerja (IK) :
1. Buatlah kelompok yang terdiri dari 2 sampai 3 orang.
2. Buatlah Project Initiate dengan menentukan beberapa pertanyaan mendasar terkait proyek
yang dipilih, membuat desain proyek, menyusun jadwal penyelesaian proyek.
3. Kerjakan proyek pengembangan web sesuai dengan rancangan desain dan jadwal yang
telah disusun.
4. Buatlah dokumentasi dalam bentuk laporan harian kemajuan proyek pada setiap
pertemuan dan laporan akhir proyek pada akhir pertemuan
5. Presentasikan hasil akhir proyek pada akhir pertemuan.
6. Lakukan evaluasi terhadap hasil akhir proyek dan pengalaman belajar bersama guru dan
peserta didik yang lain sebagai umpan balik yang berfokus pada pengembangan
PEDOMAN PENSKORAN SUMATIF LINGKUP MATERI
Hasil Asesmen Sumatif
No Nama Aspek Nilai/Skor
Peserta Menerapkan perintah Menerapkan Menerapkan
didik HTML perintah CSS Pemrograman
Java Script
1.
2.
3.
4.
n.
Rubrik/Pedoman Penilaian Asesmen Sumatif
Lingkup Materi Kategori/
Menerapkan perintah Menerapkan perintah Menerapkan pemrograman Predikat
HTML CSS Java Script
Mampu menerapkan Mampu menerapkan Mampu menerapkan Sangat Mahir
perintah HTML dengan perintah CSS dengan program java script (4)
sangat baik. sangat baik. dengan sangat baik.
Mampu menerapkan Mampu menerapkan Mampu menerapkan Mahir
perintah HTML dengan perintah CSS dengan program java script (3)
baik. baik. dengan baik.
Mampu menerapkan Mampu menerapkan Mampu menerapkan Berkembang
perintah HTML dengan perintah CSS dengan program java script (2)
kurang baik. kurang baik. dengan kurang baik.
Tidak mampu Tidak mampu Tidak mampu menerapkan Mulai
menerapkan perintah menerapkan perintah program java script Berkembang
HTML. CSS. (1)
Rumus Menghitung Nilai Asesmen Sumatif :
Nilai = Total Skor x 100
12