1.

BAGIAN III : LAMPIRAN

MINGGU 1
Pengenalan, Installasi Tools dan
Memahami Konsep Dasar Web dan HTML

1.1 Konsep Dasar Website

1. Internet
Internet merupakan “kependekan dari kata “internetwork”, yang berarti rangkaian komputer
yang terhubung menjadi beberapa rangkaian jaringan”. Sistem komputer terhubung secara
global dan menggunakan TCP/IP sebagai protocol. Secara umum internet dapat diartikan
sebagai pertukaran informasi dan komunikasi. Semua informasi bisa didapatkan dengan mudah
dan bebas di internet tanpa ada batasan.

Ada beberapa istilah yang sering digunakan apabila anda bekerja dengan internet diantaranya
yaitu:

a) World Wide Web (WWW)

WWW merupakan kumpulan web server diseluruh dunia yang dapat menyediakan data dan
informasi untuk dapat digunakan secara massal.

b) Website
Website atau situs web merupakan sebuah alamat tertentu di WWW yang menyediakan
informasi tertentu. Untuk membuka sebuah situs web, anda dapat menggunakan browser

c) Web Pages (Halaman Web)

Web pages atau halaman web merupakan bagian dari situs web, apabila situs web
diumpamakan merupakan sebuah buku, maka halaman web merupakan lembaran-lembaran
kertas penyusun buku tersebut.

d) Home Page

Homepage merupakan halaman muka dari sebuah situs web, atau ibarat cover muka sebuah
buku. Homepage biasanya berupa outline dari isi situs web yang bersangkutan.

e) Browser

Browser adalah aplikasi yang digunakan untuk berselancar didunia internet. Browser dapat
memandu pengguna internet untuk berpindah antar situs web dengan mudah.

f) HTTP

HTTP (Hypertext Transfer Protocol) HTTP adalah bagian dari sebuah URL yang
mengidentifikasikan lokasi web, dan digunakan dalam protokol HTML.
1.2 Konsep Dasar HTML

1. Hyper Text Markup Language

Hyper Text Markup Language (HTML) adalah sebuah bahasa markup untuk membuat
kerangka sebuah tampilan di dalam suatu website. HTML bukanlah bahasa pemrograman,
melainkan bahasa markup. HTML diciptakan oleh seorang yang bernama Tim Berners Lee yang
juga menciptakan beberapa konsep seperti HTTP, WWW, Web Browser, Web Server dan Web
Page. HTML pertama kali dirilis pada tahun 1993.

Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh editor teks
apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag teks yang dimulai
dengan symbol < dan berakhir dengan sebuah symbol >.

2. Installasi Tools

Ada beberapa tools yang diperlukan untuk membangun kerangka sebuah website
menggunakan HTML yang perlu Anda installasi sebelum memulai-nya, yaitu : Code Editor
(Visual Studio Code), Web Browser (Google Chrome) dan Git.

a) Code Editor (Visual Studio Code)

Visual Studio Code adalah code editor yang berfungsi untuk menuliskan kode-kode
program HTML ataupun bahasa markup/pemrograman yang lain-nya. Untuk
melakukan download dan installasi-nya dapat dilihat langkah-langkah sebagai berikut

1. Silahkan mengunjungi website https://code.visualstudio.com/Download

2. Silahkan download aplikasi VSCode sesuai dengan sistem operasi kamu.

3. Setelah berhasil download, silahkan klik 2x hasil download tadi untuk melakukan
installasi Visual Sudio Code-nya.

4. Pada bagian Licensee Agreement klik I Accept the agreement lalu klik Next.

5. Pada bagian Select Destination Location biarkan apa adanya lalu klik Next.

6. Pada bagian Select Star Menu Folder klik Next.

7. Pada bagian Select Additional Tasks Klik Next.

8. Pada bagian Ready to Install, klik Install.

9. Silahkan tunggu sampai proses installasi selesai.

10. Setelah itu, klik finish.

Jika kalian kesulitan dalam mengikuti langkah-langkah diatas, bisa coba menonton
video tutorial youtube berikut : https://youtu.be/zl4ZKCxGTsI

b) Web Browser (Google Chrome)

Web Browser Browser adalah aplikasi yang digunakan untuk berselancar didunia
internet. Dalam hal ini, web browser berfungsi untuk menampilkan output dari kode
program yang sudah dituliskan melalui code editor (visual studio code). Untuk
melakukan download dan installasi-nya dapat dilihat langkah-langkah sebagai berikut
 1. Kunjungi laman Google Chrome untuk mengunduh setup installer Chrom. Klik
“Unduh Chrome”

2. Kemudian akan tampil verifikasi aplikasi, checklist (centang) dalam kotak) “Setel
Google Chrome sebagai browser default saya”, apabila “Web Browser Google
Chrome akan dijadikan “default”. Lalu klik “Setuju dan Pasang”

3. Tunggu beberapa saat, hingga proses installasi aplikasi web browser Google
Chrome selesai.

c) Git

Git adalah sebuah tools bagi para programmer dan developer yang berfungsi sebagai
control system untuk menjalankan proyek pengembangan software. Dalam hal ini, git
berfungsi untuk melakukan upload/menyimpan file pekerjaan yang sudah dilakukan
ke dalam Github. Untuk melakukan download dan installasi-nya dapat dilihat
langkah-langkah sebagai berikut :

1. Silahkan mengunjungi website : https://git-scm.com/downloads

2. Silahkan pilih sesuai dengan operasi sitem computer yang kamu gunakan dan klik
download

3. Setelah berhasil download, klik 2x hasil download tadi untuk melakukan installasi
git-nya.

4. Setup awal installasi git akan muncul documen license git, lalu klik Next.

5. Pada bagian setup lokasi dibiarkan apa adanya, lalu klik Next.

6. Pada bagian pilih komponen tambahan (optional), lalu klik Next.

7. Pada bagian atur path environment, klik Next.

8. Pada bagian opsi ekstra, klik Next.

9. Silahkan menunggu sampai proses installasi git selesai.

10. Jika sudah selesai proses installasi-nya, silahkan klik Finish.

Jika kalian kesulitan dalam mengikuti langkah-langkah diatas, bisa coba mengikuti
artikel cara installasi git berikut : https://www.niagahoster.co.id/blog/git-tutorial-
dasar/

3. Tag-tag HTML

Setelah kita sudah mengetahui bagaimana konsep dasar HTML dan berhasil melakukan
download & installasi tools-tools yang diperlukan. Selanjutnya kita akan masuk ke dalam
pembahasan teknis yaitu mengetahui apa saja tag-tag yang ada di dalam HTML. Berikut ini
adalah tag-tag HTML yang sering digunakan :
 Tag Deskripsi

<html></html> Mendeklrasikan tipe dokumen HTML pada browser

<head></head> Berisi informasi halaman yang tidak ditampilkan pada web browser

<body></body> Berisi elemen-elemen yang ditampilkan pada halaman web

<h1> - <h6> Untuk membuat teks judul pada halaman web

<p></p> Untuk membuat paragraf pada halaman web

<b></b> Untuk membuat tulisan menjadi tebal

<i></i> Untuk membuat tulisan menjadi miring

<u></u> Untuk membuat garis bawah pada tulisan

<a></a> Untuk membuat hyperlink (menyambungkan halaman)

<ol></ol> Untuk membuat list yang berurut (ordered list)

<ul></ul> Untuk membuat list yang tidak berurut (unordered list)

<dl></dl> Untuk membuat daftar dan definisi

<li></li> Untuk menampilkan data secara berurutan kebawah

<img src=””> Untuk menampilkan gambar

<table></table> Untuk mendeklarasikan sebuah table

<tr></tr> (table row) Untuk membuat baris pada table

<th></th> (table heading) Untuk menuliskan judul pada table

<td></th> (table data) Untuk menampilkan data-data pada table

<form></form> Untuk mendefinisikan sebuah form

<label></label> Untuk memberikan label judul pada inputan

<input></input> Untuk membuat sebuah inputan

<select></select> Untuk membuat sebuah inputan yang berisi dropdown

<textarea></textarea> Untuk membuat sebuah inputan yang lebih panjang

<button></button> Untuk membuat sebuah button

<div> dan <section> Untuk mengelompokkan elemen-elemen HTML

*Jika kalian ingin mempelajari keseluruhan terkait tag-tag HTML, kalian dapat mempelajari-nya
melalui link berikut : https://www.w3schools.com/html/
4. Materi Pembelajaran

Setelah kita sudah mengetahui tag-tag apa saja yang ada didalam HTML, kali ini kita akan
mulai masuk ke dalam materi pembelajaran utama tentang HTML. Ada beberapa materi yang
akan dipelajari pada materi HTML ini yaitu (Struktur HTML Dasar, Heading dan Paragraf,
Anchor Hyperlink, List, Image, Table, Form, Button)

1. Struktur HTML Dasar

Didalam HTML ada beberapa tag-tag yang menjadi struktur dasar dari HTML, yaitu
adalah sebagai berikut :

2. Website Pertama-mu

Kali ini mari sama-sama bikin website pertama kita menggunakan bahasa HTML,
silahkan diikutin langkah-langkah berikut ya :

1. Silahkan buka aplikasi code editor (visual stuido code) yang sudah terinstall

2. Sebelum mulai coding, silahkan bikin folder terlebih dahulu didalam komputer
kalian, boleh di D: atau pada Folder Documents. Buatlah sebuah folder yang
bernama html-dasar

3. Setelah sudah membuat folder, silahkan open folder kalian ke dalam visual studio
code, silahkan klik menu open folder :
4. Setelah dibuka, mari kita buat file dan website HTML pertama kita ..

*Silahkan klik New File dan buat file bernama index.html

5. Setelah dibuat, silahkan tuliskan kode program berikut untuk membuat website
pertama-mu :

* Untuk membuat struktur HTML Dasar di Visual Studio Code, kalian bisa
menuliskan tanda seru (!) atau tuliskan html:5 pada text editor.

6. Nah, untuk menampilkan hasil dari kode program tersebut, kalian bisa membuka
file HTML-nya di dalam browser. Ada beberapa cara untuk menampilkan-nya :

- Kalian bisa menggunakan f5 atau fn+f5

- Menarik file tersebut ke dalam google chrome

- Atau membuka-nya melalui folder html yang sudah kalian buat

*Nah, jika kita lihat pada browser, hasil kode program tersebut adalah seperti ini.

Oke, sekarang kita latihan sederhana ya..

7. Latihan HTML Sederhana

- Silahkan buat kode program untuk menampilkan output seperti gambar dibawah
ini menggunakan HTML :

*Siswa menunjukkan hasil-nya kepada guru jika sudah menyelesaikan latihan soal
sederhana HTML ini.
 MINGGU 2

Lanjutan Konsep Dasar HTML dan

Latihan Sederhana HTML Dasar

A. TUJUAN PEMBELAJARAN

Pada minggu ke-2 ini kita akan melanjutkan untuk mempelajari konsep-konsep dasar yang ada di
HTML beserta latihan akhir-nya. Berikut beberapa yang akan dibahas :

1. Heading dan Paragraf

2. List

3. Anchor (Hyperlink)

4. Image

5. Table

6. Form dan Button

1. Heading dan Paragraf

Tag Heading di dalam HTML biasanya berfungsi untuk menuliskan judul pada suatu halaman
website. Heading pada HTML memiliki 6 jenis yang berbeda yaitu h1, h2, h3, h4 h5 dan h6. Berikut ini
kalian bisa melihat perbedaan dari masing-masing heading.

Tag Paragraf di dalam HTML berfungsi untuk menuliskan sebuah paragraf atau sub judul pada
suatu halaman website. Selain itu kalian juga bisa menambahkan beberapa tag lain yang dapat dipadukan
pada saat menuliskan kode program seperti <i>, <b> dan <u>.
 2. List

List pada HTML terdapat 3 yang biasanya digunakan, <ul>, <ol> dan <dl>. Dari 3 tag tersebut,
masing-masing mempunyai fungsi yang berbeda sebagai berikut :

 <ul> (unordered list) adalah tag untuk membuat list yang tidak berurut

 <ol> (ordered list) adalah tag untuk membuat list berurut

 <dl> (definition list) adalah tag untuk membuat daftar dan definisi

Ketika ingin membuat list, tentu-nya didalam 3 list tersebut harus menambahkan tag <li> untuk
menampilkan data secara berutu kebawah, contoh-nya adalah sebagai berikut :

*Kalian juga bisa mengganti type dari masing-masing list tersebut. Seperti <ol>, urutan angka adalah
default-nya, kalian bisa merubah-nya juga menggunakan (A, a, I, i). Dan untuk <ul> default-nya ada type disc, selain
itu kalian bisa mengganti-nya juga menggunakan (square atau circle). Perhatikan contoh sebagai berikut :
3. Image
Jika ingin menampilkan gambar didalam website menggunakan HTML, HTML telah menyediakan
tag-nya untuk menampilkan gambar, yaitu tag <img src=””>. Ada 2 cara ketika ingin menampilkan gambar
menggunakan HTML yaitu menggunakan cara internal atau eksternal.

 Menggunakan cara internal :

*Kalian harus menyiapkan gambar yang akan ditampilkan, lalu silahkan taro gambar tersebut di dalam
folder html kalian, perhatikan contoh berikut :

*Penjelasan :

- Pada kode program di atas, untuk menggunakan cara internal kalian harus menyimpan foto yang
akan ditampilkan di dalam folder project html kalian. Setelah itu bisa dipanggil melalui atribut src=”nama
file foto tersebut”. Lalu ada atribut alt=”” (berfungsi untuk menampilkan teks jika gambar tidak tertampil).
width=”” (untuk mengatur ukuran lebar foto) dan ada height=”” (untuk mengatur ukuran tinggi foto).

 Menggunakan cara eksternal :

*Untuk menggunakan cara eksternal, kalian harus mencari gambar yang akan ditampilkan melalui
google, setelah itu silahkan klik kanan pada gambar tersebut. Lalu pilih “copy image address” gambar
tersebut. Setelah itu salin link gambar tersebut di dalam src, perhatikan contoh berikut :

- Pada kode program diatas, untuk menggunakan cara eksternal, setelah kalian copy image address
pada foto, silahkan untuk paste link tersebut ke dalam file img src=”link address”. Maka output-nya akan
sama saja seperti kita menggunakan cara internal.
4. Anchor (Hyperlink)
Apakah kalian pernah lihat suatu website yang masing-masing halaman-nya tersambung dan kalian
bertanya-tanya bagaimana itu bisa dilakukan? Nah, untuk menjawab pertanyaan itu maka kita akan belajar
salah satu tag HTML yang berfungsi untuk menyambungkan halaman satu ke yang lain-nya. Yaitu tag
<a></a> (anchor). Sama hal-nya seperti image, kita dapat melakukan-nya secara internal ataupun
eksternal. Dalam hal ini, internal yang dimaksud adalah menyambungkan halaman satu ke yang lain-nya
melalui file yang ada di dalam HTML. Sedangkan untuk eksternal, adalah untuk menyambungkan ke link
lain seperti link nomor whatsapp ataupun instagram. Biar lebih jelas dan faham, kalian perhatiin contoh
berikut deh, ya :

- Pada kode program diatas, silahkan bikin file baru yang bernama “contact.html”. Lalu, untuk
menyambungkan-nya kalian bisa menggunakan tag a href=”nama_file-nya” jika internal. Maka ketika
kalian klik text menuju ke halaman contact, akan diarahkan ke dalama halaman contact. Jika ingin
menyambungkan-nya secara external menggunakan link lain, kali bisa memasukkan link tersebut
didalam href. Contohnya diatas link instagram saya, jika di klik maka akan masuk ke dalam profile
instagram rendifdl05.

5. Table

Apakah kalian pernah membuat table menggunakan aplikasi microsoft excel? Ya, pada materi kali
ini kita akan mempelajari bagaimana cara-nya membuat table menggunkan HTML. HTML sudah
menyediakan tag yang bernama <table> untuk membuat table. Ada beberapa yang perlu kalian ketahui
terkait tag-tag ataupun atribut yang harus ditulis didalam table, ketika ingin membuat table.

<table></table> Untuk mendeklarasikan sebuah table

<tr></tr> (table row) Untuk membuat baris pada table

<th></th> (table heading) Untuk menuliskan judul pada table

<td></th> (table data) Untuk menampilkan data-data pada table

Diatas adalah penjelasan terkait tag-tag yang harus ditulis dalam table. Biar lebih faham, langsung
aja kita latihan membuat table menggunakan HTML. Perhatiin contoh berikut, ya :
 Penjelasan kode program diatas :
*Pada kode program diatas, kita menggunakan tag <table> untuk membuat table. Lalu, untuk
membuat table, kita perlu menambahkan baris baru terlebih dahulu menggunakan <tr>. Setelah itu, untuk
menuliskan judul pada table menggunakan <th> (tulisan-nya tebal). Untuk mengisi data-data pada table,
bisa menggunakan <td> (tulisan-nya tidak tebal).
Lalu mungkin kalian akan bertanya, “Kenapa table-nya tidak ada border-nya, gimana cara
tambahin border di table?”
Untuk menjawab pertanyaan diatas, silahkan perhatian tambahkan beberapa atribut yang ada di
dalam table, silahkan tuliskan kode program berikut :

Untuk menampilkan border, kita perlu menambahkan atribut pada table yaitu border, cellpadding berguna
untuk mengatur jarak teks dengan garis didalam sel. Sedangkan cellspacing berguna untuk menentukan
jumlah spasi antar sel. Maka hasil-nya akan sebagai berikut :

6. Form
Apakah kalian pernah mengisi survey melalui google form? Kalau sudah, kalian pernah berfikir ga
sih? Gimana caranya bikin form tersebut. Nah, pada materi form kali ini, kita akan mempelajari bagaimana
cara-nya membuat form inputan seperti google form, disini kita belajar dari sangat dasar menggunakan
HTML. Nah, sebelum kita masuk ke penjelasan teknis, ada beberapa hal yang perlu kalian ketahui terlebih
dahulu terkait form ini. Biasa-nya, didalam form ada beberapa tag yang sering digunakan, yaitu <label>,
<input>, <select>, <textarea> dan <button>. Mari kita bahas satu-satu ya, perhatikan penjelasan sebagai
berikut :

<label></label> Untuk memberikan label judul pada inputan

<input></input> Untuk membuat sebuah inputan, tag input memiliki banyak

atribut/type-nya, berikut adalah type yang sering digunakan
 pada tag input :

Sumber :
https://www.w3schools.com/html/html_form_input_types.asp

<select></select> Untuk membuat sebuah inputan yang berisi dropdown

<textarea></textarea> Untuk membuat sebuah inputan yang lebih panjang

<button></button> Untuk membuat sebuah button

Untuk lebih jelas-nya, mari kita latihan untuk membuat form input menggunakan HTML,
perhatikan contoh kode program berikut, ya :
 LEMBAR KERJA PESERTA DIDIK (LKPD)

Buatlah kode program menggunakan HTML dengan ketentuan sebagai berikut :

- Halaman Index : Terdapat Menu, Content dan Footer
- Halaman Data Peserta Didik : Tampil Table dan Terdapat Link untuk Menambahkan
Data
- Halaman Tambah Data Peserta Didik : Menampilkan form dan button tambah
- Dan menampilkan output sebagai berikut :

Halaman Home Halaman Data Peserta Didik

Halaman Tambah Data Peserta Didik :