MODUL AJAR

Satuan Pendidikan : SMK Negeri 1 Sintuk Toboh Gadang

Program Keahlian : Pengembangan Perangkat Lunak Dan GIM
Mata Pelajaran : Rekayasa Perangkat Lunak
Judul Modul : Menerapkan Perintah HTML
Kelas/Fase : XI/F
Durasi : 36 JP (6 X 45 Menit)

ELEMEN
Pemrograman Web

PROFIL PELAJAR PANCASILA

Mata pelajaran ini juga turut berkontribusi dalam membentuk peserta didik memiliki
keahlian pada bidang pengembangan perangkat lunak, meningkatkan lebih lanjut
kemampuan berpikir komputasional, yaitu suatu cara berpikir yang memungkinkan
untuk menemukenali masalah, menguraikan suatu masalah menjadi beberapa bagian
yang lebih kecil dan sederhana, merumuskan solusi, langkah serta menyusun langkah
untuk mengembangkan perangkat lunak serta memberikan solusi masalah yang dialami
oleh pelanggan. Penguasaan kemamp uan berpikir komputasional tersebut secara tidak
langsung akan membiasakan peserta didik bernalar kritis dalam menghadapi
permasalahan, bekerja mandiri, serta kreatif dalam menemukan solusi permasalahan
kehidupan sesuai dengan dimensi Pancasila profil pelajar.

SARANA DAN PRASARANA

 Proyektor
 Formulir
 Labor
 Alat tulis

TARGET PESERTA DIDIK

Siswa kelas XI program/konsentrasi keahlian Pengembangan Perangkat Lunak dan GIM

MODEL DAN MODA PEMBELAJARAN

Model pembelajaran : Project Based Learning (PJBL)
Moda pembelajaran : Tatap Muka
 TUJUAN PEMBELAJARAN DAN INDIKATOR PENCAPAIANNYA
KKTP
Tujuan Pembelajaran Pada akhir pembelajaran, peserta didik
menunjukkan kemampuan :
2.1 Menerapkan perintah Pertemuan-1 :
HTML. 2.1.1 Menjelaskan pengertian dan fungsi
HTML
Pertemuan-2
2.1.2 Menentukan Struktur HTML.
Pertemuan 3
2.1.3 Menentukan Fungsi berbagai tag
dalam html
Pertemuan 4
2.1.4 Mengdentifikasi Format teks dalam
html.
Pertemuan 5 dan 6
2.1.5 Menerapkan perintah HTML

KEGIATAN PEMBELAJARAN
Pendahuluan :
1. Guru bersama peserta didik saling memberi dan menjawab salam serta
menyampaikan kabarnya masing-masing
2. Peserta didik menyiapkan diri untuk belajar serta memeriksa kerapihan diri dan
bersikap disiplin dalam setiap kegiatan pembelajaran
3. Dilanjutkan dengan berdo‘a, dipimpin oleh Ketua Kelas
4. Guru melakukan absensi untuk memeriksa kehadiran peserta didik
Guru memberikan beberapa pertanyaan pemantik untuk mengetahui
5.
perkembangan dan kesiapan peserta didik
6. Guru menyampaikan tujuan pembelajaran pembelajaran
Inti :
Pertemuan-1 : (KKTP 2.1.1)
Menjelaskan pengertian dan fungsi HTML
1. Peserta didik melaksanakan prestest yang diberikan oleh guru mengenai
perintah HTML
2. Guru menampilkan dan menjelaskan materi tentang konsep HTML
3. Peserta didik memperhatikan penjelasan guru dengan seksama
4. Guru dan peserta didik menerapkan Teknik STOP (Stop, Take a breath,
Observe, Proceed) yang merupakan salah satu teknik pembelajaran sosial
emosional (KSE) untuk mengelola emosi dan fokus peserta didik
5. Guru memberi ruang kepada peserta didik untuk menyampaikan kendala atau
kesulitannya dalam memahami bagian materi tertentu melalui sesi diskusi
 dan tanya jawab
6. Guru membagikan LKPD-1 kepada peserta didik
7. Peserta didik mengerjakan tugas pada LKPD-1 secara berkelompok
8. Peserta didik mempresentasikan tugas yang sudah diselesaikan di depan
kelas secara bergantian
9. Guru bersama peserta didik yang lain memberikan saran dan masukkan yang
membangun kepada kelompok yang telah melakukan presentasi
10. Guru memberikan tes lisan sebagai asesmen formatif untuk memantau
perkembangan peserta didik dan sebagai umpan balik meningkatkan kualitas
pembelajaran
11. Guru mengisi instrumen asesmen formatif berupa lembar checklist
Pertemuan 2 : (KKTP 2.1.2)
Menentukan Struktur HTML.
1. Guru menampilkan dan menjelaskan materi tentang Struktur HTML.
2. Peserta didik memperhatikan penjelasan guru dengan seksama
3. Guru dan peserta didik menerapkan Teknik STOP (Stop, Take a breath,
Observe, Proceed) yang merupakan salah satu teknik pembelajaran sosial
emosional (KSE) untuk mengelola emosi dan fokus peserta didik
4. Guru memberi ruang kepada peserta didik untuk menyampaikan kendala atau
kesulitannya dalam memahami bagian materi tertentu melalui sesi diskusi
dan tanya jawab
5. Guru membagikan LKPD-2 kepada peserta didik
6. Peserta didik mengerjakan tugas pada LKPD-2 secara berkelompok
7. Peserta didik mempresentasikan tugas yang sudah diselesaikan di depan kelas
secara bergantian
8. Guru bersama peserta didik yang lain memberikan saran dan masukkan yang
membangun kepada kelompok yang telah melakukan presentasi
9. Guru memberikan tes lisan sebagai asesmen formatif untuk memantau
perkembangan peserta didik dan sebagai umpan balik meningkatkan kualitas
pembelajaran
10. Guru mengisi instrumen asesmen formatif berupa lembar checklist
Pertemuan 3 : (KKTP 2.1.3)
Menentukan Fungsi berbagai tag dalam html
1. Guru menampilkan dan menjelaskan materi tentang Fungsi berbagai tag
 dalam html
2. Peserta didik memperhatikan penjelasan guru dengan seksama
3. Guru dan peserta didik menerapkan Teknik STOP (Stop, Take a breath,
Observe, Proceed) yang merupakan salah satu teknik pembelajaran sosial
emosional (KSE) untuk mengelola emosi dan fokus peserta didik
4. Guru memberi ruang kepada peserta didik untuk menyampaikan kendala atau
kesulitannya dalam memahami bagian materi tertentu melalui sesi diskusi
dan tanya jawab
5. Guru membagikan LKPD-3 kepada peserta didik
6. Peserta didik mengerjakan tugas pada LKPD-3 secara berkelompok
7. Peserta didik mempresentasikan tugas yang sudah diselesaikan di depan
kelas secara bergantian
8. Guru bersama peserta didik yang lain memberikan saran dan masukkan yang
membangun kepada kelompok yang telah melakukan presentasi
9. Guru memberikan tes lisan sebagai asesmen formatif untuk memantau
perkembangan peserta didik dan sebagai umpan balik meningkatkan kualitas
pembelajaran
10. Guru mengisi instrumen asesmen formatif berupa lembar checklist
Pertemuan 4: (KKTP 1.1.4)
Mengdentifikasi Format teks dalam html.
1. Guru menampilkan dan menjelaskan materi tentang Format teks dalam html.
2. Peserta didik memperhatikan penjelasan guru dengan seksama
3. Guru dan peserta didik menerapkan Teknik STOP (Stop, Take a breath,
Observe, Proceed) yang merupakan salah satu teknik pembelajaran sosial
emosional (KSE) untuk mengelola emosi dan fokus peserta didik
4. Guru memberi ruang kepada peserta didik untuk menyampaikan kendala atau
kesulitannya dalam memahami bagian materi tertentu melalui sesi diskusi
dan tanya jawab
5. Guru membagikan LKPD-4 kepada peserta didik
6. Peserta didik mengerjakan tugas pada LKPD-4 secara berkelompok
7. Peserta didik mempresentasikan tugas yang sudah diselesaikan di depan
kelas secara bergantian
8. Guru bersama peserta didik yang lain memberikan saran dan masukkan yang
 membangun kepada kelompok yang telah melakukan presentasi
9. Guru memberikan tes lisan sebagai asesmen formatif untuk memantau
perkembangan peserta didik dan sebagai umpan balik meningkatkan kualitas
pembelajaran
10. Guru mengisi instrumen asesmen formatif berupa lembar checklist
Pertemuan 5 : (KKTP 2.1.5 dan 2.1.6)
Menerapkan perintah HTML
1. Guru menampilkan dan menjelaskan materi tentang Menerapkan perintah
HTML
2. Peserta didik memperhatikan penjelasan guru dengan seksama
3. Guru dan peserta didik menerapkan Teknik STOP (Stop, Take a breath,
Observe, Proceed) yang merupakan salah satu teknik pembelajaran sosial
emosional (KSE) untuk mengelola emosi dan fokus peserta didik
4. Guru memberi ruang kepada peserta didik untuk menyampaikan kendala atau
kesulitannya dalam memahami bagian materi tertentu melalui sesi diskusi
dan tanya jawab
5. Guru membagikan LKPD-5 kepada peserta didik
6. Peserta didik mengerjakan tugas pada LKPD-5 secara berkelompok
7. Peserta didik mempresentasikan tugas yang sudah diselesaikan di depan
kelas secara bergantian
8. Guru bersama peserta didik yang lain memberikan saran dan masukkan yang
membangun kepada kelompok yang telah melakukan presentasi
9. Guru memberikan tes lisan sebagai asesmen formatif untuk memantau
perkembangan peserta didik dan sebagai umpan balik meningkatkan kualitas
pembelajaran
10. Guru mengisi instrumen asesmen formatif berupa lembar checklist
Penutup :
1. Guru dan peserta didik melakukan diskusi dan tanya jawab mengenai bagian
materi yang belum dipahami dengan baik serta bagaimana pengalaman belajar
peserta didik untuk mengetahui kelemahan atau kekurangan dari rencana
pembelajaran yang telah diterapkan.
2. Guru dan peserta didik melakukan refleksi kegiatan pembelajaran yang telah
dilakukan untuk mengecek pemahaman Peserta didik (asesmen akhir), guru
menyediakan lembaran ceklis sebagai pencatatan pada asesmen akhir
pembelajaran.
3. Guru menyampaikan ke peserta didik rencana pertemuan berikutnya
4. Peserta didik menerima apresiasi dan motivasi dari guru.
 5. Doa penutup

LKPD-1
Pertemuan 1
Judul Menerapkan Perintah HTML
Petunjuk Bacalah dan kerjakan tugas yang ada dalam LKPD secara seksama
Penggunaan
Penerapan K3 Memastikan ruang kelas dalam keadaan bersih
Tujuan menjelaskan konsep peritah HTML
Pembelajaran
KKTP Menjelaskan pengertian dan fungsi HTML
Deksripsi/Gambar
Kerja
Persiapan : Alat tulis dan lembaran LKPD
Alat dan Bahan
Pelaksanaan : 1. Peserta didik mengamati tayangan video yang disajikan oleh
Langkah Kerja guru
2. Guru membagikan lkpd kepada peserta didik
3. Peserta didik mengerjakan tugas yang ada dalam lkpd secara
berkelompok
Buatlah kelompok yang terdiri dari 2 sampai 3 orang Setiap
kelompok membuat rangkuman materi perintah HTML dalam
bentuk presentasi (buatlah presentasi semenarik mungkin).
Topik pembahasan materi presentasi terdiri dari:
a. Pengertian HT,L
b. Fungsi HTML
c. Kelebihan dan kekurangan HTML
4. Peserta didik mempresentasikan hasil tugas secara bergantian
ke depan kelas
5. Guru bersama peserta didik mengoreksi bersama sama materi
yang sudah dipelajari
Hasil :
Cek Kemampuan
(Asesmen
Formatif)

LKPD-2
Pertemuan 2
Judul Menerapkan perintah HTML
Petunjuk Bacalah dan kerjakan tugas yang ada dalam LKPD secara mandiri
Penggunaan
Penerapan Memastikan ruang kelas dalam keadaan bersih
K3
Tujuan Menentukan Struktur HTML
Pembelajaran
KKTP Menentukan Struktur HTML secara mandiri
Deksripsi
/Gambar
Kerja
Persiapan : Alat tulis dan Komputer atau PC
Alat dan
Bahan
Pelaksanaan 1. Peserta didik mendengarkan dan memperhatikan penjelasan oleh
: guru mengenai materi struktur HTML
Langkah 2. Guru membagikan lkpd kepada peserta didik
Kerja 3. Peserta didik mengerjakan tugas yang ada dalam lkpd secara
mandiri
Buatlah kelompok yang terdiri dari 2 sampai 3 orang Setiap
kelompok membuat rangkuman materi Struktur HTML dalam
bentuk presentasi (buatlah presentasi semenarik mungkin).
4. Peserta didik mempresentasikan hasil tugas secara bergantian ke
depan kelas
5. Guru dan peserta didik mengoreksi materi yang sudah dipelajari
Hasil :
Cek
Kemampuan
(Asesmen
Formatif)

LKPD-3
Pertemuan 3
Judul Menerapkan perintah HTML
Petunjuk Bacalah dan kerjakan tugas yang ada dalam LKPD secara mandiri
Penggunaan
Penerapan Memastikan ruang kelas dalam keadaan bersih
K3
Tujuan Menentukan Fungsi berbagai tag dalam HTML
Pembelajaran
KKTP Menentukan Fungsi berbagai tag dalam HTML secara mandiri
Deksripsi
/Gambar
Kerja
Persiapan : Alat tulis dan Komputer atau PC
Alat dan
Bahan
Pelaksanaan 1. Peserta didik mendengarkan dan memperhatikan penjelasan oleh
: guru mengenai materi fungsi berbagai tag HTML
Langkah 2. Guru membagikan lkpd kepada peserta didik
Kerja 3. Peserta didik mengerjakan tugas yang ada dalam lkpd secara
mandiri
Buatlah kelompok yang terdiri dari 2 sampai 3 orang Setiap
kelompok membuat rangkuman materi berbagai tag dalam HTML
dalam bentuk presentasi (buatlah presentasi semenarik mungkin).
4. Peserta didik mempresentasikan hasil tugas secara bergantian ke
depan kelas
5. Guru dan peserta didik mengoreksi materi yang sudah dipelajari
Hasil :
Cek
Kemampuan
(Asesmen
Formatif)

LKPD-4
Pertemuan 4
Judul Menerapkan perintah HTML
Petunjuk Bacalah dan kerjakan tugas yang ada dalam LKPD secara mandiri
Penggunaan
Penerapan Memastikan ruang kelas dalam keadaan bersih
K3
Tujuan Mengdentifikasi Format teks dalam HTML
Pembelajaran
KKTP Mengdentifikasi Format teks dalam HTML secara mandiri
Deksripsi
/Gambar
Kerja
Persiapan : Alat tulis dan Komputer atau PC
Alat dan
Bahan
Pelaksanaan 1. Peserta didik mendengarkan dan memperhatikan penjelasan oleh
: guru mengenai materi Mengientifikasi format teks dalam HTML
Langkah 2. Guru membagikan lkpd kepada peserta didik
Kerja 3. Peserta didik mengerjakan tugas yang ada dalam lkpd secara
mandiri
Buatlah kelompok yang terdiri dari 2 sampai 3 orang Setiap
kelompok membuat rangkuman materi format teks dalam HTML
dalam bentuk presentasi (buatlah presentasi semenarik mungkin).
4. Peserta didik mempresentasikan hasil tugas secara bergantian ke
depan kelas
5. Guru dan peserta didik mengoreksi materi yang sudah dipelajari
Hasil :
Cek
Kemampuan
(Asesmen
Formatif)

LKPD-5
Pertemuan 5
Judul Menerapkan perintah HTML
Petunjuk Bacalah dan kerjakan tugas yang ada dalam LKPD secara mandiri
Penggunaan
Penerapan Memastikan ruang kelas dalam keadaan bersih
K3
Tujuan Menerapkan perintah HTML dan Dapat meghasilkan project
Pembelajaran
KKTP 5 dan Menerapkan perintah HTML
KKTP 6
Deksripsi
/Gambar
Kerja
Persiapan : Alat tulis dan Komputer atau PC
Alat dan
Bahan
Pelaksanaan 1. Peserta didik mendengarkan dan memperhatikan penjelasan oleh
: guru mengenai materi Menerapkan perintah HTML
Langkah 2. Guru membagikan lkpd kepada peserta didik
Kerja 3. Peserta didik mengerjakan tugas yang ada dalam lkpd secara
mandiri
Buatlah program form biodata sederhana menggunakan aplikasi
Sublime Text dengan perintah HTML sesuai panduan
jobsheet/modul praktikum.
4. Peserta didik mempresentasikan hasil tugas secara bergantian ke
depan kelas
5. Guru dan peserta didik mengoreksi materi yang sudah dipelajari
Hasil :
Cek
Kemampuan
(Asesmen
Formatif)

ASESMEN PEMBELAJARAN
Formatif (Awal) :
Dilakukan dengan pretest untuk mengecek sejauh mana pemahaman/pengalaman
peserta didik tentang (TP 2.1). Instrumen formatif awal terlampir.
Formatif (Proses) :
Dilakukan dengan praktek untuk mencek pemahaman peserta didik selama
pembelajaran terkait dengan konsep perintah HTML, (KKTP) dan memberikan
bimbingan pada peserta didik yang memerlukan.
Instrumen formatif dan check list/rubrik terlampir.
Sumatif (Lingkup Materi) :
Dilakukan dengan praktek untuk memastikan ketercapaian kompetensi peserta didik
tentang Menerapkan perintah HTML ( TP 2.1). Instrumen sumatif lingkup materi dan
check list/rubrik terlampir.

MATERI PEMBELAJARAN
Modul
Menerapkan Perintah HTML
Program Keahlian Pengembangan Perangkat Lunak Dan Gim
Kelas XI Semester Ganjil

Hypertext MarkupLanguage (HTML)

Pengertian HTML
Hypertext Markup Language atau HTML adalah kode yang digunakan untuk mengatur tata
letak tamplan halaman web dan isinya HTML bukanlah bahasa pemograman, HTML
merupakan bahasa markup yang melakukan format pada struktur content dokumen. HTML
terdiri atas beberapa elemen dan tag khusus yang dapat digunakan untuk format content
agar memiliki tampilan tertentu.

Halaman web yang dihasilkan dari HTML adalah bersifat statis. Maksud dari statis di sini
adalah tampilan web yang tetap. Isinya tidak dapat di-update secara otomatis, kecuali
dengan mengubah kode HTML-nya. Namun, web statis memiliki keuntungan, yaitu
memiliki waktu loading/pemuatan yang relatif lebih cepat dibandingkan web dinamis.

Web dinamis adalah kebalikan dari web statis. Web dinamis dapat menghasilkan interaksi
yang dinamis dan update isi secara otomatis. Agar dapat diperoleh tampilan web yang
bersifat dinamis, tidak hanya dapat digunakan HTML, akan tetapi diperlukan tambahan
fungsi seperti script dan CSS.

TIM BERNERS-LEE DAN SEJARAH HTML

HTML memiliki sejarah yang panjang, terutama dalam kurun waktu tujuh tahun pada awal
perkembangannya. Pada kurun waktu tersebut, HTML telah menjelma dari bahasa yang
sederhana dengan hanya beberapa tag menjadi sebuah sistem markup yang kompleks serta
memberikan keleluasaan lebih kepada para web developer untuk membuat halaman web
yang lengkap dan menarik dengan gambar animasi, suara, dan segala sesuatu yang dapat
diimajinasikan.

Berikut akan diceritakan kisah tentang perjalanan HTML pada awal perkembangannya
sampai dengan sekarang, khususnya tentang HTML, perusahaan yang terlibat, organisasi,
serta orang-orang yang berkontribusi pada pengembangan teknologi HTML.
Penyampaian sejarah ini diperlukan agar memberikan pemahaman yang menyeluruh
tentang proses dan tahapan dalam pengembangan teknologi HTML dari suatu prototype
sederhana yang ditulis sendiri oleh Tim Berners-Lee pada tahun 1992 sehingga sekarang
menjadi sebuah standar bahasa web yang mendunia.

Membahas HTML tidak lengkap rasanya jika tidak membahas juga tokoh utama di balik
terciptanya HTML. Beliau adalah seorang jenius lulusan Universitas Oxford bernama Sir
Timothy John Berners-Lee atau lebih dikenal sebagai Tim Berners-Lee. Beliau lahir pada
8 Juni 1955 di London, Inggris. Selain sebagai pencipta HTML, beliau juga dikenal sebagai
pencipta world wide web (www) yang terkenal dan juga sebagai direktur dari World Wide
Web Concortium (W3C), sebuah organisasi standar web dunia yang di dirikan pada tahun
1994.

Tim Berners-Lee menamatkan pendidikan BA Hons (I) Physiscs di The Queen‘s College,
Universitas Oxford, Inggris, pada tahun 1976. Selama menempuh pendidikan itu, Berners
berhasil membuat komputer pertamanya dengan bermodalkan televisi bekas dan prosesor
M6800.

Setelah lulus, Berners bekerja selama dua tahun di Plessey Telecommunications Ltd yang
merupakan perusahaan perangkat telekomunikasi besar di Inggris. Di perusahaan tersebut,
Tim bekerja di bagian sistem transaksi terdistribusi, pesan relays, dan teknologi barcode.
Setelah itu, beliau pindah ke D.G Nash Ltd, Inggris. Saat itu, beliau menulis software
untuk printer cerdas dan multitasking pada sistem operasi.
 Sumber:
https://www.flickr.com/photos/codepo8/88900717
15/ by Christian Heilmann, CC- BY.
Gambar 1. Tim Berners-Lee

Pada tahun 1980, Tim memutuskan bekerja sebagai konsultan software engineer di sebuah
lembaga penelitian bernama CERN. CERN (Conseil Européen pour la Recherche
Nucléaire) merupakan suatu lembaga penelitian internasional yang berlokasi di Jenewa,
Switzerland. Di tempat ini, Tim mengembangkan sebuah program pertamanya untuk
menyimpan informasi yang dinamakan Enquire yang kelak software tersebut akan menjadi
cikal bakal hypertext untuk pengembangan world wide web yang sekarang. Sayangnya,
software tersebut tidak pernah dipublikasikan.

Sebagaimana layaknya lembaga penelitian, CERN memiliki dokumen hasil dari penelitian
yang sangat banyak. File-file dokumen ini juga disimpan di sebuah super komputer
canggih dengan fasilitas pemroses data yang kuat saat itu. Walaupun telah
menggunakan super komputer sebagai sarana pengolahan data, penggunaannya masih
dirasakan kurang efisien. Data-data sebesar itu tidak terorganisasi dengan baik. Untuk
membuka suatu dokumen yang berkaitan dengan dokumen tertentu, harus dicari dan
dibuka secara manual. Hal itu dirasa sangat menyusahkan.

Tim Berners-Lee sebagai seorang konsultan software engineer saat itu menyadari kesulitan
itu dan berpikir cara untuk mengatasinya. Akhirnya, muncullah sebuah ide brilian dari
Tim yang memungkinkan data-data yang ada menjadi lebih terorganisasi dan mudah
diakses. Tujuan akhirnya adalah kinerja para peneliti lebih meningkat dan efisien. Ide
pemikiran Tim itu sederhana, tetapi jitu, yaitu dengan meletakkan sebuah ―penghubung‖
terhadap dokumen-dokumen yang ada sehingga file tersebut dapat menjadi referensi
bersama. Referensi bersama ini artinya setiap dokumen berhubungan. Dengan kata lain,
ketika sebuah dokumen dibaca, ―penghubung‖ ke dokumen lain yang berkaitan akan
muncul dan dapat langsung dieksekusi saat itu juga.

Ide Tim ini tidak serta-merta ada, tetapi didasarkan pada pengalaman Tim sebelumnya dan
pengalaman saat menciptakan Enquire. Tim menggunakan ―penghubung‖ yang dibuat ini
untuk membentuk suatu sistem yang sekarang dikenal dengan istilah link atau hyperlink.
Yang pada akhirnya, Tim menamakan sistem penemuannya ini dengan nama hypertext.
Hypertext memungkinkan satu dokumen dapat membuka dokumen lain yang terkait
melalui sebuah mekanisme sederhana, yaitu hanya dengan menekan tombol (link) pada
layar komputer.

Hypertext sebenarnya sudah menjadi konsep yang dipelajari oleh para akademisi pada awal
tahun 1940-an bersamaan dengan munculnya personal computer (PC). Pada akhir 1980,
Bill Atkinson, seorang programmer berbakat yang bekerja di bawah naungan Apple
Computer Inc. datang dengan membawa sebuah aplikasi untuk mesin Macintosh yang
disebut sebagai hypercard. Hypercard memungkinkan untuk membangun serangkaian
kartu arsip yang mengandung informasi teks dan gambar. Hypercard melakukan
perpindahan dengan hanya menekan sebuah tombol. Tombol tersebut berisi suatu
program sederhana yang disebut scripts. Scripts inilah yang bertugas untuk mengontrol
halaman sederhana yang akan ditampilkan selanjutnya; bahkan juga dapat menjalankan
animasi sederhana pada layar.

Hypercard menjadi sangat populer. Namun, teknologi ini memiliki sebuah batasan
sehingga hypertext hadir menggantikannya. Hypertext tidak hanya dapat melakukan link
dokumen-dokumen dalam satu komputer, bahkan dapat merambah antarkomputer.
Namun, pada saat itu belum pernah ada seseorang yang mengimplementasikan hypertext
dalam skala global sebelumnya.

Konsep global hyperlink yang dikembangkan oleh Tim Berners-Lee berkembang sangat
pesat, tetapi harus digunakan pendekatan yang tepat. Perkembangan selanjutnya dimulai
dengan pembuatan alat hypertext (hypertext tool) yang dapat digunakan secara luas pada
komputer-komputer (PC, Macinthos, UNIX, dan terminal sederhana) yang terhubung ke
internet. Pada era tersebut, juga lahir banyak pengembangan dan implementasi dari
hypertext, di antaranya SGML, Interleaf, LaTex, dan Microsoft Word. Namun,
implementasi hypertext pada saat itu hanya spesifik pada satu komputer sehingga tidak
mudah untuk mengambil dokumen yang berada pada komputer lain. Maka dari itu,
diperlukan suatu teknologi yang lebih sederhana.

Tim hadir lagi dengan ide briliannya, yaitu mendemonstrasikan suatu prototype
sederhana, tetapi menarik yang telah dikembangkan sendiri oleh Tim, yaitu dengan
menggunakan protocol sederhana yang dinamakan dengan HTTP (hypertext transfer
protocol), untuk menerima dokumen-dokumen melalui suatu hypertext link. Format teks
untuk HTTP diberi nama HTML (hypertext markup language). Prototype tersebut
didemonstrasikan oleh Tim pada komputer NeXT pada tahun 1990.

Pada akhir tahun 1990, Tim membuat browser pertamanya WorldWideWeb.app dan web
server pertamanya HTTPd. Pada tahun itu, web page pertama diperkenalkan secara
terbuka di internet. Pada tahun 1991, orang-orang dari luar CERN diundang untuk
bergabung dalam suatu komunitas web. Tim mendorong orang lain untuk membangun
software secara bersama berdasarkan idenya tersebut agar dapat menampilkan dokumen
HTML serta melakukan beberapa konfigurasi agar HTML siap untuk diakses.

HTML yang dibuat oleh Tim merujuk pada SGML (standard generalized markup
language); suatu standar untuk format teks ke dalam unit-unit dokumen, seperti paragraf,
heading, list, dan lainnya. Alasan Tim menggunakan SGML karena bahasa ini memiliki
format yang berdiri sendiri dalam menampilkan teks pada layar. Penggunaan tag
 <TITLE> dan </TITLE> pada HTML itu diambil dari SGML, begitu pula pada beberapa
tag-tag lain, seperti tag P untuk paragraf, tag H1 sampai H6 untuk heading, tag OL untuk
daftar terurut, tag UL untuk tag tidak terurut, dan LI untuk daftar serta beberapa elemen
SGML lain. Namun, untuk hypertext link, Tim tidak menggunakan SGML. Sebagai
gantinya, Tim menggunakan elemen-nya sendiri yang dia sebut sebagai anchor <a> dengan
HREF sebagai attribute-nya. Penemuan Tim ini sangat diterima oleh komunitas internet.
Tentu saja karena kesederhanaan dari HTML dan penggunaan elemen anchor untuk
membuat sebuah hypertext, dirasakan sangat besar manfaatnya.

Sebagai orang yang paling berpengaruh terhadap perkembangan teknologi pada zaman
ini, sangat wajar jika Tim Berners-Lee mendapatkan berbagai penghargaan bergengsi
dunia. Tercatat lebih dari 70 penghargaan level dunia yang Tim dapatkan pada kurun
waktu 1995—2017. Beberapa penghargaan bergengsi yang diperoleh antara lain adalah
penghargaan sebagai Young Innovator of the Year dari Kilby Foundation pada tahun 1995
dan penghargaan Fellow of the Royal Society pada tahun 2001 yang merupakan
penghargaan bergengsi terhadap orang yang memiliki kontribusi besar di bidang science.
Tim juga menerima berbagai penghargaan tingkat dunia lain, seperti Japan Prize, The
Prince of Asturias Foundation Prize, the Millennium Technology Prize and Germany's Die
Quadriga Award. Pada tahun 2004, Tim menerima gelar knight dari Ratu Elizabeth dan
pada tahun 2007, mendapat gelar order of merit dari Kerajaan Inggris Raya. Penghargaan
yang lain adalah Nobel Prize of Computing, sebuah penghargaan yang sangat bergengsi di
dunia komputer, yang didapatkan Tim pada 4 April 2017.

Dari dunia pendidikan, Tim juga mendapatkan belasan gelar doktor kehormatan, di
antaranya dari Parsons School of Design, New York (1995), Oxford University (2001),
University of Manchester (2008), dan Harvard University (2011).
Selain mendapatkan berbagai penghargaan kelas dunia, Tim Berners-Lee juga menduduki
jabatan yang tidak kalah hebatnya. Tim sekarang menjabat sebagai direktur di World Wide
Web Foundation yang didirikannya tahun 2009 silam. Tim juga merupakan guru besar di
Fakultas Ilmu Komputer, Universitas Oxford, UK, dan juga sebagai pendiri Open Data
Institute di London serta beberapa jabatan hebat dunia lainnya.

PERKEMBANGAN HTML

Tahun : Diskusi terbuka tentang HTML lewat internet dimulai pada September
1991 1991, World Wide Web mengumumkan bahwa diskusi elektronik yang
disebut sebagai mailing list telah dibuat untuk menampung ide lebih
banyak tentang pengembangan HTML ini.Pada Oktober 1991, HTML
disampaikan kepada publik dengan 18 tags, yaitu title, next ID, base
address, anchors, isindex, plaintext, listing, paragraph, headings 1,
heading 2, heading 3, heading 4, heading 5, heading 6, address,
highlighting, glossaries, dan list.
 Tahun : HTML+ berhasil dibuat. HTML+ merupakan versi HTML dengan fitur
1992 yang lebih kaya, HTML+ dikembangkan oleh Tim dibantu oleh Dave
Raggett dari Hewlett-Packard‘s Labs (HP) dari Bristol, Inggris.
Tahun : HTML+ dan HTML 1.1 release dan lahirnya browser-browser dengan
1993 basis HTML. Pada Juni 1993, Tim Berners-Lee meluncurkan hypertex t
markup language yang diberi nama HTML 1.1.
Tahun : Konferensi pertama World Wide Web diprakarsai oleh CERN pada Mei
1994 1994 dan dihadiri oleh 380 peserta yang kebanyakan berasal dari Eropa
dan Amerika. Pada konferensi ini, Dave Raggett bersama dengan CERN
memperkenalkan HTML+. Antara tahun 1993 dan awal 1994, banyak
browser yang memberi tambahan berbagi fitur pada HTML. Hal ini
mengakibatkan standar HTML yang digunakan menjadi tidak jelas.
Situasi ini mendorong lahirnya HTML versi kedua
Tahun : HTML 2 diluncurkan pada 24 November 1995. HTML 2 diluncurkan
1995 dengan tetap mempertahankan fitur sebelumnya dan memberi tambahan
fitur seperti form untuk upload, tabel, dan pemetaan gambar.
Tahun : HTML 3.2 dan HTML 4 diluncurkan pada 14 Januari 1997. HTML 3.2
1997
merupakan pengganti dari HTML 3.0 yang diluncurkan pada Maret 1995
dan untuk selanjutnya tidak dipergunakan lagi. HTML 3.2 merupakan
versi pertama dari teknologi HTML yang dibuat dan distandardisasi
oleh W3C. Beberapa fitur tambahan yang terdapat pada HTML 3.2 adalah
fasilitas span pada tabel, penambahan applets, supersript, dan subscript.
Tanpa selang lama, pada 18 Desember 1997, W3C juga meluncurkan
versi terbaru dari HTML, yakni HTML 4.0. HTML4 memiliki beberapa
kelebihan dibandingkan HTML 3.2 terutama dukungan untuk
penggunaan stylesheet dan scripting.
Tahun : Teknologi XML (extensible markup language) versi 1.0 diluncurkan pada
1998 10 Februari 1998. XML merupakan bahasa markup yang dibuat untuk
mengatasi keterbatasan tag-tag pada HTML. XML memiliki tag yang lebih
dinamis dan dapat dibuat sendiri.
Tahun : Teknologi XHTML diluncurkan pada 26 Januari 2000. XHTML versi 1.0.
2000 XHTML (extensible hypertext markup language) merupakan bentuk
pengembangan dari HTML dengan menggunakan paradigma XML.
XHTML dibuat dengan maksud untuk menyempurnakan kekurangan-
kekurangan yang terdapat pada HTML 4.
Tahun : HTML 5 diluncurkan pada 28 Oktober 2014. HTML 5 dibuat dengan
2014 beberapa pengembangan yang menarik. HTML 5 merupakan gabungan dari
HTML 4 dan XHTML yang proses pengembangannya tidak berjalan
degan baik.
HTML 5 memiliki keunggulan dibandingkan versi sebelumnya serta
beberapa kekurangan yang telah diperbaiki dengan memberi tambahan
dukungan pada multimedia, layout, grafis, support responsive design
(Alexis Goldstein, 2015), serta beberapa kode yang diperingkas.

Menetukan Kode HTML

 File atau dokumen HTML merupakan file teks biasa yang dapat dibuka dan dibaca dengan
menggunakan standar file editor, misalkan Notepad, Notepad++, SubLime- Text, Atom
Editor, dan sebagainya Isi file tersebut diperkaya dengan menggunakan suatu kodifikasi
yang berfungsi sebagai komponen penunjuk/pengarah terhadap browser pada saat
menampilkan isi file tersebut.

A. BAGIAN-BAGIAN PADA DOKUMEN HTML

HTML yang merupakan bahasa markup membutuhkan elemen, tag, serta attribute untuk
melakukan format terhadap suatu content agar dapat ditampilkan di layar sesuai dengan
keinginan.

Yang dimaksud dengan elemen HTML adalah bagian dari suatu halaman web. Elemen
dapat berisi data, teks, gambar, atau bahkan tidak berisi apa pun. Elemen ditandai dengan
tag pembuka dan beberapa attribute-nya, kemudian ditutup dengan tag penutup pada
akhirnya.

Sementara itu, yang dimaksud dengan tag adalah suatu ‗tanda‘ yang digunakan untuk
membentuk elemen. Ada dua jenis tag, yaitu tag pembuka yang ditandai dengan tanda
kurung sudut <…> serta tag penutup yang ditandai dengan kurung sudut dan dengan
ditambah tanda garis miring </…>. Tag diisi dengan nama elemen yang ingin diformat.

Di samping elemen dan tag, terdapat hal penting lainnya, yakni attribute. Attribute ini
merupakan bagian dari tag yang memiliki nilai atau informasi tambahan. Attribute memiliki
nama dan nilai.
Untuk lebih jelasnya, perhatikan gambar baris kode HTML berikut.

Gambar 2. Elemen, Tag, dan Attribute

Keterangan gambar
Pada contoh ini, terdapat sebuah kode HTML berikut.

<b>Contoh tulisan tebal</b>

1. Tulisan <b> merupakan tag pembuka dengan ―b‖ sebagai nama elemennya,
penulisan tag pembuka dalam kasus ini adalah kurung sudut buka (<) + nama
elemen format (b) + kurung sudut tutup (>). Elemen b = bold atau cetak tebal.
2. Tulisan ―Contoh tulisan tebal‖ merupakan konten. Konten ini merupakan subjek
 yang akan diformat.
3. Tulisan </b> merupakan tag penutup dengan ―b‖ sebagai nama elemennya.
Penulisan tag penutup dalam kasus ini adalah kurung sudut buka (<) + garis
miring (/) + nama elemen format (b) + kurung sudut tutup (>).
4. Tag pembuka dan tag penutup itu berpasangan dan harus memiliki nama elemen
yang sama.
5. Semua tulisan dari <b>Contoh tulisan tebal</b> itu dinamakan elemen <b>.
6. Perbedaan penulisan tag pembuka dan tag penutup terletak pada tanda garis
miring (/).

Berikut adalah contoh lain dari sebuah baris kode HTML dengan tambahan
attribute. Perhatikan gambar di bawah ini.

Gambar 3. Elemen, Tag, Content, dan Attribute

Keterangan gambar pada contoh ini, terdapat sebuah kode HTML berikut.

<b class=‖menu‖>Ini adalah contoh yang lain</b>

1. Tulisan <b> merupakan tag pembuka dengan ―b‖ sebagai nama elemennya.
Penulisan tag pembuka dalam kasus ini adalah kurung sudut buka (<) + nama
elemen format (b) + kurung sudut tutup (>). Elemen b = bold atau cetak tebal.
2. Tulisan class=‖menu‖ merupakan attribute dari tag b. Fungsi dari attribute
adalah memberi informasi atau nilai tambahan berupa ―class‖ dengan nilai
―menu‖.
3. Tulisan ―Ini adalah contoh lain‖ merupakan konten. Konten inilah yang akan
dilakukan pemformatan.
4. Tulisan </b> merupakan tag penutup dengan ―b‖ sebagai nama elemen-nya.
Penulisan tag penutup dalam kasus ini adalah kurung sudut buka (<) + garis
miring (/) + nama elemen format (b) + kurung sudut tutup (>).
5. Tag pembuka dan tag penutup itu berpasangan dan harus memiliki nama elemen
yang sama.

Attribute dalam tag dapat lebih dari satu atau dikenal dengan istilah
multiattribute. Berikut adalah contoh penggunaan multiattribute.
 Gambar 4.
Elemen, Tag, Content, dan Multiattribute

Keterangan gambar pada contoh ini, terdapat sebuah kode HTML berikut.

<i id=‖atas‖ class=‖menu‖ contoh lain</i>

1. Tulisan <i> merupakan tag pembuka dengan ―i‖ sebagai nama elemen-nya.
Penulisan tag pembuka dalam kasus ini adalah kurung sudut buka (<) +
nama elemen format (i) + kurung sudut tutup (>). Elemen i = italic atau
cetak miring.
2. Tulisan id=‖atas‖ merupakan attribute pertama dari tag i. Fungsi dari attribute
adalah memberi informasi atau nilai tambahan berupa ―class‖ dengan nilai ―atas‖.
3. Tulisan class=‖menu‖ merupakan attribute kedua dari tag i. Fungsi dari
attribute adalah memberi informasi atau nilai tambahan berupa ―class‖
dengan nilai―menu‖.
4. Tulisan ―Contoh lain‖ merupakan content. Content ini yang akan dilakukan
pemformatan.
5. Tulisan </i> merupakan tag penutup dengan ―i‖ sebagai nama elemen-nya.
Penulisan tag penutup dalam kasus ini adalah kurung sudut buka (<) +
garis miring (/) + nama elemen format (i) + kurung sudut tutup (>).
6. Tag pembuka dan tag penutup itu berpasangan dan harus memiliki nama
elemen yang sama.

Dalam satu tag, terdapat lebih dari satu attribute. Antara attribute pertama dan attribute
kedua diberi jarak spasi.

B. ELEMEN BERSARANG
Elemen HTML juga dapat lebih dari satu yang disebut dengan istilah elemen bersarang
atau nested elemen. Perhatikan contoh berikut.

</P>

Gambar 5. Nested Elemen

Keterangan gambar pada contoh ini, terdapat sebuah kode HTML berikut.

<p>Contoh <i>elemen</i> bersarang</p>

1. Pada kode di atas, terdapat dua buah elemen.

2. Dimulai dari tulisan ―<p>Contoh <i>element</i> bersarang</p>‖ itu merupakan
 elemen pertama dengan tag p.
3. Selanjutnya pada ―<i>elemen</i>‖ itu adalah elemen kedua.
4. Setiap elemen harus mempunyai tag yang berpasangan. Akan salah jika tag
pembuka dan tag penutup tidak bersesuaian, seperti <p>Contoh <i>elemen</p>
bersarang</i>. (Perhatikan kesalahan meletakkan tag penutup!)

C. ELEMEN KOSONG

Selain elemen yang memiliki content. HTML juga memiliki elemen kosong.
Perhatikan contoh berikut.

Gambar 6. Elemen Kosong

Keterangan gambar pada contoh ini, terdapat sebuah kode HTML berikut.

<img src=”logo.png” alt=”logo perusahaanku”>

1. Baris kode tersebut hanya memiliki tag pembuka, yaitu tag <img> dan tidak
memiliki tag penutup </img>.
2. Elemen yang tidak memiliki content seperti ini disebut elemen kosong.

D. STRUKTUR HTML

HTML memiliki struktur sederhana yang hanya terdiri atas dua elemen utama, yaitu head
dan body, yang ditandai dengan tag <head> dan tag <body>
Struktur tersebut tampak sebagai berikut.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

1. <!DOCTYPE html> merupakan penanda bahwa yang digunakan adalah

HTML 5.
2. Elemen <html> merupakan elemen utama yang menandakan bahwa
dokumen ini adalah dokumen HTML. Elemen HTML ini melingkupi semua
content yang akan dibuat pada satu halaman
3. Elemen <html> memiliki dua elemen di dalamnya, yaitu elemen <head> dan
 <body>.
4. Elemen <head> kelak diisi semua hal noncontent yang tidak ditampilkan di
halaman web, seperti deklarasi karakter, style, dan sebagainya, tetapi
kadang ditampilkan di bagian tab browser.
5. Elemen <body> kelak diisi semua hal yang ingin ditampilkan di halaman web.
6. Semua elemen harus memiliki tag berpasangan yang benar.

Berikut adalah penerapan dari struktur di atas. Perhatikan kode berikut.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<b>Hello World</b>
</body>
</html>

1. Kode di atas menandakan bahwa HTML yang dipakai adalah HTML 5 ditandai
dengan <!DOCTYPE html>.
2. Elemen <html> memiliki dua elemen di dalamnya, yaitu elemen <head> dan
<body>.
3. Elemen <head> memiliki dua elemen di dalamnya, yaitu elemen <meta> dan
<title>.
a. Elemen <meta> merupakan contoh elemen kosong dan tidak memerlukan
content.
b. Elemen <title> memiliki content. Ia berisi teks ―Website-ku‖ yang akan
tampil di tab browser.
4. Elemen <body> memiliki satu elemen, yaitu elemen <b> yang akan menampilkan
tulisan ―Hello world‖ bercetak tebal di halaman web pada browser.

Kelak akan ditampilkan pada browser sebagai gambar berikut.

 Gambar 7. Hasil Program

Tulisan ―Hello World‖ yang bercetak tebal merupakan hasil dari format <b>,
sedangkan tulisan ―Website-ku‖ yang terdapat pada tab browser merupakan hasil dari
format <title>.

Kode yang ditulis dalam elemen <body> akan ditampilkan pada halaman web seperti
pada kode di atas.

Gambar 8 . Keterkaitan Kode HTML dan Browser

E. ELEMEN-ELEMEN HTML

Elemen HTML yang akan dipelajari kali ini adalah beberapa elemen utama yang sering
digunakan pada pembelajaran web programming ke depan.
1. Tulisan Bercetak Tebal
Untuk menghasilkan tulisan bercetak tebal (bold), diperlukan elemen <b>.
Tulisan yang ingin diformat diletakkan di antara tag<b> dan tag </b>. Berikut
contoh penerapannya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<b>ini adalah text tebal</b>
</body>
</html>

Hasil yang muncul tampak sebagai berikut.

Gambar 9. Tulisan Bercetak Tebal

Selain digunakan elemen <b> untuk membuat tulisan bercetak tebal, dapat juga
digunakan elemen <strong>. Contohnya seperti di bawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<strong>ini juga text tebal</strong>
</body>
</html>

Hasil yang muncul juga tebal tampak sebagai berikut:

Gambar 10.
Tulisan Cetak Tebal dengan Strong

Walaupun sama-sama menghasilkan tulisan bercetak tebal, elemen <strong> digunakan

untuk menandai sesuatu yang penting. Sementara itu, elemen <b> digunakan untuk
 menghasilkan tulisan tebal, hanya tebal, tetapi tidak menandakan itu penting.
2. Tulisan Bercetak Miring
Serupa dengan elemen <b>, untuk menghasilkan tulisan bercetak miring (italic),
diperlukan elemen <i>. Tulisan yang ingin dilakukan format diletakkan di antara tag<i> dan
</i>. Berikut contohnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<i>ini adalah text miring</i>
</body>
</html>

Hasil yang muncul tampak sebagai berikut.

Gambar 11. Tulisan Bercetak Miring

3. Tulisan Bergaris Bawah

Tidak jauh dari dua kode di atas, untuk melakukan format tulisan agar menjadi bergaris
bawah (underline), diperlukan sebuah elemen <u>. Tulisan yang ingin dilakukan format
diletakkan di antara tag <u> dan tag</u>. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<u>ini adalah contoh tulisan bergaris bawah</u>
</body>
</html>
 Berikut ini adalah hasilnya.

Gambar 12. Elemen Underline

4. Baris Baru
Baris baru (break atau line break) sangat diperlukan untuk penulisan agar lebih indah.
Elemen <br> menyisipkan satu baris baru pada sebuah baris atau paragraf. Elemen <br>
adalah salah satu dari elemen kosong. Contoh penerapannya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
ini adalah kalimat pertama <br> ini adalah kalimat
kedua
</body>
</html>

Hasilnya sebagai berikut.

Gambar 13. Elemen Break

5. Link

Link, penghubung, atau anchor dapat dilakukan dengan menggunakan elemen <a> serta

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
klik <a href="HTTPs://www.google.com">disini</a> untuk
menuju www.google.com
</body>
</html>
 dengan attribute href. Berikut contoh penggunaan kodenya:
Hasilnya sebagai berikut.

Gambar 15. Elemen Link/Anchor

6. Gambar

Untuk dapat memasukkan sebuah gambar ke dalam sebuah website, elemen <img>
dapat digunakan dengan menambahkan attribute src.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<img src="peta.jpg">
</body>
</html>

Hasil tampak sebagai berikut.

Gambar 17. Elemen Gambar(Image)

a. Tag <img> memiliki beberapa attribute untuk mengatur gambar, di antaranya

 attribute height, width, serta attribute alt.];
b. Height (tinggi) dan width (panjang) digunakan untuk mengatur panjang dan tinggi
gambar. Contohnya, panjang diberi nilai 350px dan tinggi 200px. Px adalah satuan
ukuran layar monitor yang merupakan singkatan dari piksel.\;
c. Attribute alt (alternative) merupakan keterangan yang akan tampil jika
gambar rusak atau tidak bisa dibuka;
d. Apabila kode HTML gambar tersebut sedikit dimodifikasi dengan menambahkan
attribute, hal itu menjadi berikut ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<img src="peta.jpg" width="350px" height="200px"
alt="peta indonesia">
</body>
</html>

Maka dari itu, hasilnya akan menjadi seperti ini.

Gambar 18.
Elemen Image dengan Attribute

Hasil yang didapatkan adalah gambar menjadi lebih terlihat. Jika suatu saat gambar
tersebut rusak atau tidak bisa di-download di browser, berikut ini yang terjadi.

Gambar 19.
Elemen Image untuk Gambar Rusak/Tidak Ada

Pada hasil di atas, tampak gambar kertas robek kecil yang menunjukkan bahwa
 gambar tidak dapat di-download karena rusak atau gambar hilang. Sebagai gantinya,
ada tulisan ―peta indonesia‖ yang merupakan hasil dari alt=‖peta indonesia‖.

7. Heading
Heading atau header biasa digunakan untuk judul suatu artikel atau paragraf. Terdapat
6 heading pada HTML yang direpresentasikan dalam <h1> sampai dengan <h6>.
Berikut adalah penerapan dari heading:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<h1>Ini adalah Contoh heading 1</h1>
</body>
</html>

Maka dari itu, hasilnya sebagai berikut.

Gambar 20.
Penerapan <h1>

Tulisan Heading 2 lebih kecil dari Heading 1, begitu terus hingga Heading 6.
Kode berikut menjelaskan perbandingan besar tulisan antar-heading:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<h1>Ini adalah Contoh heading 1</h1>
<h2>Ini adalah Contoh heading 2</h2>
<h3>Ini adalah Contoh heading 3</h3>
<h4>Ini adalah Contoh heading 4</h4>
<h5>Ini adalah Contoh heading 5</h5>
<h6>Ini adalah Contoh heading 6</h6>
</body>
</html>
 Hasil yang tampil di layar sebagai berikut.
Gambar 21. Perbandingan Antarelemen Heading

8. Paragraf

Untuk melakukan formating agar suatu kalimat menjadi paragraf (paragraph), diperlukan
sebuah elemen <p>. Berikut penerapannya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Ducimus ratione deleniti ipsum incidunt quia
accusamus maiores. Obcaecati quidem mollitia sint, labore
qui error? Molestiae quia adipisci magnam rerum. Sapiente,
sunt?</p>
</body>
</html>

Hasilnya akan seperti berikut ini.

Gambar 22. Elemen

Paragraph

Keterangan:
a. pada contoh kode tulisan ―Lorem ipsum, dolor sit amet… dst‖ itu disebut dummy text
merupakan ―tulisan contoh‖ yang tidak memiliki arti apa pun;
b. element paragraph mengabaikan banyak spasi dan baris baru. Elemen ini akan secara
default menjadikannya satu baris panjang. Sangat tidak cocok digunakan untuk teks
yang memiliki banyak baris baru, seperti puisi.

Untuk memahami ini, perhatikan kode berikut.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<p>
Kalau sampai waktuku
ku mau tak seorang kan merayu
tidak juga kau
</p>
</body>
</html>

Maka dari itu, hasilnya akan menjadi seperti ini.

Gambar 23.
Elemen Paragraf, Mengabaikan Baris Baru

Untuk menyelesaikan masalah tersebut, dapat menggunakan elemen <pre> yang

merupakan singkatan dari preformatted text. Kode paragraf di atas diubah sedikit menjadi
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<pre>
Kalau sampai waktuku
ku mau tak seorang kan
merayutidak juga kau
</pre>
</body>
</html>

berikut
 Maka dari itu, hasilnya akan seperti ini.

Gambar 24. Elemen <pre>

Tulisan yang berada di dalam elemen <pre> selalu memiliki font dan ukuran default,
biasanya font courier. Elemen <pre> dapat membaca baris baru dan banyak spasi.

9. Subscript

Subscript adalah huruf atau angka kecil yang biasanya terdapat pada rumus- rumus kimia.
Dalam HTML subscript, didefinisikan sebagai elemen <sub>. Berikut contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
CO₂ H₂O
</body>
</html>

Hasil yang ditampilkan sebagai berikut.

Gambar 25. Elemen Subscript

10. Superscript

Mirip dengan subscript, superscript adalah huruf atau angka kecil yang letaknya di atas,
banyak digunakan di dunia matematika. Elemen superscript didefinisikan menggunakan
elemen <sup>. Berikut penerapan dalam kode HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
5² = 25, 7² = 49
</body>
</html>

Hasil dari kode tersebut sebagai berikut.

Gambar 26. Elemen Superscript

11. Ordered List

Ordered list merupakan bentuk daftar terurut (ordered list). Dalam Microsoft Word,
dikenal dengan istilah numbering list. Ordered list menggunakan elemen <ol> yang
dilanjutkan dengan elemen <li> sebagai daftar-daftarnya.Berikut kode penerapannya.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
Nama Buah :
<ol>
<li>Apel</li>
<li>Jeruk</li>
<li>Melon</li>
<li>Semangka</li>
<li>Srikaya</li>
</ol>
</body>
</html>

Hasil yang tampil di browser kira-kira seperti ini.

 Gambar 27. Elemen Ordered List

Keterangan:
Angka-angka yang dihasilkan pada kode tersebut, yaitu angka 1 sampai dengan 5 adalah
otomatis dan sudah berurutan (ordered).

Ordered list memiliki beberapa attribute, di antaranya reversed (untuk membalikan

nilai), start (untuk memulai angka awal dengan angka pilihan), dan type (memberikan
pilihan model daftar).
Kode berikut ini adalah contoh penerapan dari attribute reversed yang ditambahkan
pada kode sebelumnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
Nama Buah :
<ol reversed>
<li>Apel</li>
<li>Jeruk</li>
<li>Melon</li>
<li>Semangka</li>
<li>Srikaya</li>
</ol>
</body>
</html>
 Hasilnya seperti ini.

Gambar 28 Elemen <Ol> dengan Attribute Reversed

Berikut penerapan attribute start dengan memodifikasi kode sebelumnya.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
Nama Buah :
<ol start="8">
<li>Apel</li>
<li>Jeruk</li>
<li>Melon</li>
<li>Semangka</li>
<li>Srikaya</li>
</ol>
</body>
</html>
Hasilnya yang ditampilkan sebagai berikut.

Gambar 29 Elemen <Ol> dengan Attribute Start

Selain mengubah nilai awal dari daftar, elemen <ol> ini juga mendukung mengganti model
daftarnya dari angka menjadi huruf, sebagaimana contoh kode berikut
12. Unordered List

Mirip dengan ordered list, unordered list menghasilkan daftar tidak terurut. Jika di
Microsoft Word dikenal dengan istilah bullets list, unordered list menggunakan elemen
<ul> yang dilanjutkan dengan elemen <li> sebagai daftar-daftarnya, sama seperti ordered
list. Berikut contoh kodenya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
Nama Kendaraan
<ul>
<li>Pesawat</li>
<li>Kereta Api</li>
<li>Mobil</li>
<li>Motor</li>
<li>Sepeda</li>
</ul>
</body>
</html>

Hasil yang tampil di browser sebagai berikut.

Gambar 30. Elemen Unordered List

13. Meter
Meter merupakan elemen HTML yang menggambarkan progres berjalan. Untuk
menggunakan meter, digunakan elemen <meter>. Berikut contoh kode penerapan meter.

Berikut adalah hasilnya.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
progress kegiatan : <meter value="0.7">70%</meter>
</body>
</html>
 Gambar 31. Elemen Meter

Keterangan:
a. elemen <meter> pada kode di atas menggunakan attribute bernama value. Value
menginisiasi nilai yang ingin diberikan pada meter tersebut;
b. 0.7 pada kode di atas adalah nilai 70%, 70% = 70/100 = 0.7. Angka ini bisa diubah,
misalnya ingin menggunakan nilai 67% maka angka yang digunakan adalah 0.67
begitu seterusnya.

Attribute value pada meter, selain menggunakan persentase, juga dapat menerapkan
nilai awal dan akhir. Contohnya adalah kode beriku
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
progress : <meter value="8" min="1" max="10">8</meter>
</body>
</html>
Arti sederhana dari kode di atas adalah mendapat nilai 8 dari 10.
Hasil yang tampil di layar sebagai berikut.

Gambar 32
Elemen Meter dengan Attribute Min Max
14. Tabel
Tabel sering digunakan untuk mengorganisasi data agar lebih mudah dibaca. Tabel
memiliki baris dan kolom. Perhatikan gambar berikut.
Gambar 33. Table

Keterangan gambar pada contoh di atas adalah tabel yang dinamakan 7x4 yang artinya
tabel tersebut memiliki tujuh kolom dan empat baris.

Dalam HTML, elemen <table> memiliki elemen turunan, yaitu elemen <tr> yang artinya table
row (baris) dan <td> yang artinya table data (kolom).
Untuk membuat tabel, langkah yang perlu dilakukan sebagai berikut.

a. Tentukan jumlah baris yang akan dibuat.

b. Kemudian, tentukan jumlah kolom yang akan dibuat.
c. Isi datanya.

Untuk mendapatkan tabel 3x2, langkahnya sebagai berikut.

a. Jumlah baris = 2, buat dulu 2 buah elemen <tr>.
<tr></tr>
<tr></tr>
b. Jumlah kolom = 3, lalu masing-masing baris masukkan 3 buah kolom seperti ini:

<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>

c. Isi datanya
Berikut adalah contoh kode lengkap tabel berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
 Maka dari itu, hasilnya sebagai berikut.

Gambar 34. Elemen Table

Terlihat bahwa tabel tidak memiliki garis tepi. Untuk memberikan garis tepi, dibutuhkan
attribute border. Berikut penerapannya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>

Hasilnya sebagai berikut.

Gambar 35
Elemen Table dengan Attribute Border

Terdapat attribute lain dari tabel untuk menggabungkan kolom. Attribute tersebut bernama
colspan. Berikut penerapannya:
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">1</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>

Hasilnya sebagai berikut.

Gambar 36.Colspan
Untuk menggabungkan baris, digunakan attribute bernama rowspan. Berikut
penerapannya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website-ku</title>
</head>
<body>

<table border="1">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>

Hasilnya sebagai berikut.

 DAFTAR PUSTAKA

Frain, B. (2015). Responsive web design with HTML5 and CSS3.

Birmingham, UK: PACKT Publishing.

Goldstein, L.L.A. (2015). HTML5 & CSS3 for the real world. Australia:
SitePoint Pty.

Longman, A.W. (1998). A history of HTML. Dikutip darihttps://www.w3.or

Mozilla. (n.d.). Getting started with the web. Dikutip

dari
https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the
_web.

w3c. (n.d.). Sir Timothy Berners-Lee longer biography. Dikutip

darihttps://www.w3.org/People/Berners-Lee/Longer.html.

w3schools. (n.d.). Emoji unicode reference. Dikutip darihttps://www.w3sc

Lampiran
1. Instrumen Formatif Awal
NO Instrumen Asesmen Awal (Diagnostik) Ya Tidak
1. Peserta didik telah mengetahui apa itu HTML? √
2. Peserta didik dapat menyebutkan macam-macam perintah
HTML
3 Peserta didik telah mengetahui struktur HTML
4 Peserta didik telah mengetahui tag HTML
5 Peserta didik telah mengetahui format teks dalam HTML
6 Peserta didik telah mengetahui cara penerapan perintah
HTML
 Soal Asesmen Awal (Diagnostik)
No Pertanyaan
1. Sebutkan macam-macam perintah HTML
2. Jelaskan proses struktur perintah HTML bertingkat
3. Sebutkan struktur HTML
4. Contohkan tag-tag HTML
5. Tentukan format teks dalam HTML
6. Bagaimana menjalankan penerapan perintah HTML

2. Instrumen Formatif Proses

ASESMENT FORMATIF
MENYIMAK TAYANGAN VIDEO
Link Vidio : https://youtu.be/AQOBN9XByf0?si=cBMFBptzesKcYI78
Tugas:
Lihat dan amati video yang ditayangkan lalu tulislah apa yang anda pelajari dari
video tersebut ke dalam table di bawah ini !

Kelompok : …………………………………………
Kelas : …………………………………………
Nama
Anggota
Kelompok : 1. …………………………………………
: 2. …………………………………………
: 3. …………………………………………

Apa yang anda pelajari setelah

Materi Apa yang anda ketahui
melihat tayangan video
 LEMBAR PENILAIAN

N Proses mendapatkan Proses Lembar Kerja

NAMA KELOMPOK
O informasi dari YouTube (worksheet)
. berkelompok
1
.
2
.
D
s
t
.

RUBRIK PENILAIAN

Sangat
Belum Kompeten Cukup Kompeten
ASPEK Kompeten (71-90) Kompeten (91-
(0-60) (61-70)
100)
Proses Peserta didik Peserta didik Peserta didik Peserta didik
mendapatkan belum menunjukkan menunjukkan sangat
informasi dari menunjukkan sikap sikap menunjukkan
YouTube sikap memperhatikan memperhatikan sikap
memperhatikan video dan mampu video dan mampu memperhatikan
video, belum menjawab lisan menjawab lisan video dan mampu
dapat dengan tepat dengan tepat menjawab lisan
menjawab lisan dengan tepat
yang tepat
Proses Lembar Peserta didik Peserta didik Peserta didik Peserta didik
Kerja tidak mampu mampu mampu sangat mampu
(worksheet) berdiskusi berdiskusi dengan berdiskusi berdiskusi
berkelompok dengan temannya dan dengan dengan
temannya dan menjawab 2/3 temannya dan temannya dan
tidak menjawab pertanyaan. menjawab menjawab
satu pertanyaan semua semua
pun. pertanyaan. pertanyaan
dengan
alasannya.

Keterangan :
Penilaian sikap berbentuk buku anekdot (tentang perilaku Peserta Didik saat berdiskusi dan
saat pembelajaran)
Peserta Didik yang belum kompeten maka harus mengikuti pembelajaran remediasi.
Peserta Didik yang cukup kompeten diperbolehkan untuk memperbaiki pekerjaannya
sehingga mencapai level kompeten

PENILAIAN SIKAP (AFEKTIF)

No Nama Aspek yang dinilai saat diskusi Skor Nilai Predikat

Peserta didik Kerjasama Rasa ingin Jujur
tahu

Pedoman penilaian
Aspek Bekerja Sama
1 : Kurang (tidak pernah melakukan)
2 : Cukup (kadang-kadang melakukan)
3 : Baik (sering melakukan)
4 : Sangat baik (selalu melakukan)
Aspek Rasa Ingin Tahu
1 : Kurang (Tidak ikut berpartisipasi aktif dalam kelompok)
2 :Cukup (kadang-kadang ikut berpartisipasi aktif dalam kelompok)
3 : Baik (sering berpartisipasi aktif dalam diskusi kelompok)
4 : Sangat baik (selalu ikut berpartisipasi aktif dalam diskusi kelompok)
Aspek Kejujuran
1 : Kurang (tidak menuliskan data dengan sungguh-sungguh, memanipulasi data, menyontek
pekerjaan kelompok lain)
2 : Cukup (tidak menuliskan data dengan sungguh-sungguh, memanipulasi data, tidak menyontek
pekerjaan kelompok lain)
3 : Baik (menuliskan data dengan sungguh-sungguh, memanipulasi data, tidak menyontekpekerjaan
kelompok lain)
4 : Sangat baik (menuliskan data dengan sungguh-sungguh, tidak memanipulasi data, tidak
menyontek pekerjaan Kelompok

Nilai = Jumlahskor yang diperoleh

X 100
Skor maksimal (12)

PENILAIAN HASIL DISKUSI

ASPEK YANG KRITERIA SKOR
DINILAI
Kerapian hasil Pekerjaan peserta didik sangat rapi dan jelas 4
pekerjaan Pekerjaan peserta didik rapi dan jelas 3

Pekerjaan peserta didik kurang rapi dan kurang jelas 2

Pekerjaan peserta didik tidak rapi dan tidak jelas 1

Kelengkapan Jawaban peserta didik sangat lengkap 4

jawaban melalui Jawaban peserta didik lengkap 3
hasil pekerjaan
Jawaban peserta didik kurang lengkap 2

Jawaban peserta didik tidak lengkap 1

Ketepatan jawaban Jawaban peserta didik sangat sesuai dan benar 4

melalui hasil Jawaban peserta didik sesuai dan ada beberapa yang tidak benar 3
pekerjaan Jawaban peserta didik kurang sesuai dan ada beberapa yang 2
tidakbenar
Jawaban peserta didik tidak sesuai dan banyak yang tidak benar 1

Kelompok INDIKATOR TOTAL NILAI

Kerapian Ketepatan Kelengkapan SKOR
hasil jawaban jawaban
pekerjaan melalui hasil melalui hasil
pekerjaan pekerjaan
No Nama peserta 1 2 3 4 1 2 3 4 1 2 3 4
didik
1
2
3
4
5
6
7
8
9
Dst

Jumlahskor yang diperoleh

Nilai = X 100
Skor maksimal (12)

Kriteria Penialaian :
 90 – 100 : Sangat Baik
 85 – 89 : Baik
 75 – 84 : Cukup
 < 74 : kurang
 PENILAIAN PRAKTEK

Rubrik Penskoran Kinerja

Nama Sekolah : SMK Negeri 1 Sintuk Toboh Gadang
Kelas/ Semester : X/ 2
Mata pelajaran : Perintah HTML
Nama Peserta Didik :
Kelas :

Persiapan Pengolahan Presentasi

Nama Peserta Waktu Nilai
No Hasil
didik
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1
2
3

Petunjuk : Berilah tanda cek (√)

Skor
No Komponen/ Sub Komponen
1 2 3 4
Persiapan
 Mampu menyiapkan semua alat dan bahan yang di butuhkan serta berpakaian √
lengkap
 Kurang 1 bahan atau alat √
1
 Kurang 2 alat atau bahan
 Tidak melengkapi semua bahan, alat maupun uniform √

√
Pengolahan
 Mampu melakukan pengolahan sesuai dengan SOP √
 Mampu mengolah produk tetapi menggunakan alat yang kurang tepat
2
 Mampu mengolah produk tetapi menggunakan alat dan bahan yang kurang √
tepat
 Mengolah produk tidak sesuai dengan SOP √

45
 √

Penyajian
 Mampu mempresentasikan hasil dengan menarik dan rapi √ √
 Mampu mempresentasikan, hasil dengan menarik tapi kurang rapi
3
 Mampu mempresentasikan, hasil kurang menarik dan kurang rapi
 Tidak mempresentasikan hasil √
√
Sikap Kerja
 Tenang rapi dan percaya diri √
4  Kurang tenang tetapi rapi dan percaya diri
 Kurang tenang, kurang rapi tetapi percaya diri √
 Tidak tenang, tidak rapi dan tidak percaya diri √ √
Durasi (waktu)
 Kemampuan menyajikan produk tepat waktu √
 Mampu menyajikan produk 10 menit setelah waktu yang telah ditetapkan
5  Mampu menyajikan produk 15 menit setelah waktu yang telah ditetapkan √
 Mampu menyajikan produk 20 menit setelah waktu yang telah ditetapkan √

Penghitungan nilai menggunakan rumus:

3. Kisi-kisi Soal Sumatif Lingkup Materi

Elemen No
No Materi Indikator soal Level
Kompetensi Soal
Peserta didik dapat menyebutkan
Pemrograman Mengingat
1 contoh bahasa pemrograman client 1 1
Web Konsep
side scripting.
Peserta didik dapat menyebutkan
2 contoh bahasa pemrograman server 1 2
side scripting.

46
 Pesrta didik dapat menyebutkan
komponen perangakat lunak pada
3 1 3
server side pada bahasa
pemrograman HTML!
4 Peserta didik dapat menyebutkan 1 4
tag dalam HTML.

5 Peserta didik menyebutkan 1 5

framework yang digunakan pada
HTML

6 Peserta didik menyebutkan tujuan 1 6

utama HTML.

7 Peserta didik dapat menyebutkan 1 7

tiga properti HTML untuk
mengatur tata letak elemen.

8 Peserta didik menyebutkan 1 8

kelebihan dan kekurangan HTML

9 Menerapkan Peserta didik menuliskan kode 3 9

Konsep program HTML untuk
menampilkan kata ‖NAMA
SISWA!‖.

10 Peserta didik menuliskan kode 3 10

program HTML untuk membuat
tulisan menjadi garis bawah.

11 Peserta didik menuliskan kode 3 11

program HTML untuk membuat
RATA TENGAH.

12 Peserta didik menuliskan kode 3 12

program HTML untuk membuat
tulisan menjadi cetak tebal.

13 Peserta didik menuliskan kode 3 13

program HTML untuk membuat
tulisan menjadi cetak miring.

14 Peserta didik menuliskan kode 3 14

program HTML untuk membuat
tulisan rata kanan.

47
15 Peserta didik menuliskan kode 3 15
program HTML untuk teks warna
selain hitam.

16 Peserta didik menuliskan kode 3 16

program HTML untuk membuat
tabel.

17 Menganalisis Peserta didik menganalisis fungsi 4 17

Konsep dari empat kode program HTML
yaitu font-family, font-size, font-
weight dan font-style.

18 Peserta didik menganalisis fungsi 4 18

dari empat kode program HTML
yaitu background-color,
background - image, background-
position, dan background-repeat.

19 Peserta didik menganalisis fungsi 4 19

dari pseudo-class yang
berhubungan dengan link pada
kode program HTML yaitu link,
hover, active dan visited.

20 Mengevaluasi Diberikan sebuah gambar bersisi 5 20

konsep kode program HTML untuk
merubah warna bacground
Peserta didik mengevaluasi hasil
dari perintah tersebut.

21 Diberikan kode program HTML, 5 21

peserta didik mengevaluasi hasil
yang ditampilkan kode program
tersebut.

4. Soal Sumatif Lingkup Materi

Kurikulum : Merdeka Belajar

Program Keahlian : Rekayasa Perangkat Lunak dan Gim

48
 Kelas : XI

Elemen Kompetensi : Pemrograman Web

Jumlah Soal : 20

Bentuk Soal : Uraian Jawaban Singkat

Soal :
1. Sebutkan contoh bahasa pemrograman server side scripting!
Jawaban:
2. Sebutkan contoh bahasa pemrograman client side scripting!
Jawaban:
3. Sebutkan komponen perangkat lunak yang diperlukan dalam HTML !
Jawaban:
4. Sebutkan tag dalam HTML yang kamu ketahui!
Jawaban:
5. Sebutkan framework yang digunakan pada HTML!
Jawaban:
6. Sebutkan tujuan utama HTML!
Jawaban:
7. Sebutkan properti HTML untuk mengatur tata letak elemen
Jawaban :
8. Sebutkan kelebihan dan kekurangan HTML!
Jawaban:
9. Tuliskan kode program HTML untuk menampilkan kata ‖NAMA SISWA!‖ !
Jawaban :
10. Tuliskan kode program HTML untuk menampilkan tulisan garis bawah!
Jawaban:
11. Tuliskan kode program HTML untuk membuat RATA TENGAH!
Jawaban:
12. Tuliskan kode program HTML untuk membuat tulisan menjadi cetak tebal,
tulisan teks diganti dengan nama anda !
Jawaban:

49
13. Tuliskan kode program HTML untuk membuat tulisan menjadi cetak miring,
tulisan teks diganti dengan nama anda !
Jawaban:
14. Tuliskan kode program HTML untuk membuat tulisan bergaris bawah, tulisan
teks diganti dengan nama anda !
Jawaban:
15. Tuliskan kode program HTML untuk merubah warna selain hitam!
Jawaban:
16. Tuliskan kode program HTML untuk membuat tabel!
Jawaban:
17. Buatlah analisis fungsi dari empat kode elemen HTML yaitu font-family, font-
size, font-weight dan font-style !
Jawaban:
18. Buatlah analisis fungsi dari empat kode elemen HTML yaitu background-color,
background-image,background-position, dan background-repeat!
Jawaban:
19. Buatlah analisi fungsi dari pseudo-class yang berhubungan dengan link pada
kode program CSS yaitu link, hover, active dan visited !
Jawaban:
20. Berikut adalah tampilan dari sebuah kode program HTML

Maka hasilnya adalah sebagai berikut :

50
 Coba evaluasi mengapa background color dikode program ada dua, apa
perbedaannya ?

21. Coba evaluasi hasil dari kode program HTML berikut :

Bagaimana hasil tampilan dari kode program diatas setelah di eksekusi?

5. Pedoman Penskoran Sumatif Lingkup Materi

Instrumen Asesmen Sumatif
No Nama Nomor Soal Jumlah
Peserta 1 2 3 4 5 6 7 8 9 10 11 12 13 14 n Jawaban
didik Benar
1.
2.

51
3.
4.
5.
n.

Rumus Menghitung Nilai Asesmen Sumatif :

Nilai = Jumlah Jawaban Benar x 100
Total Skor

52