PAKET 1

Unit Kompetensi
Membuat Struktur Dokumen
HTML Sesuai spesifikasi

Nama :……………………………………….
Kelas : ………………………………………

[email protected]
SMK Nahdlatul Ulama 2020

SMK Nahdlatul Ulama Kota Tasikmalaya

Jl. Argasari No. 31 Kota Tasikmalaya – Email : [email protected] –
website : smknutasikmalaya.sch.id
Jabar 2020
 KATA PENGANTAR

Alhamdulillah, Puji dan Syukur kehadirat Allh SWT, atas selesainya Bahan Ajar Mata Pelajaran
Pemrograman Web dan Perangkat Bergerak ini, Buku ini disusun sebagai modul utama peserta didik
dalam proses KBM di sekolah ataupun Daring. Buku ini disusun berdasarkan Hasil Analisis dan Blending
antara kurikulum 2013 Revisi 2018 dan SKKNI. Buku ini dibuat dengan menggunakan Bahasa yang
mudah dicerna oleh siswa tetapi tidak menghilangkan substansi dan ke ilmiahan dari sebuah bahan
ajar.

Mata Pelajaran Pemrograman Web dan Perangkat Bergerak merupakan rumpun mata
pelajaran dari kelompok C, khususnya C3. Buku Bahan Ajar ini disusun untuk memenuhi kebutuhan
Peserta didik SMK NU akan media belajar yang refresentatif dan sesuai dengan kurikulum di Industri.

Pelajaran Pemrograman Web dan Perangkat Bergerak berfungsi membentuk peserta didik agar
memiliki pengetahuan tentang Pemrograman yang luas dan kuat. Pemrograman Web juga sebagai
salah satu syarat Ketuntasan Lulusan Kompetensi Keahlian RPL. Wajib Hukumnya orang RPL menguasai
Bahasa Pemrograman, khususnya Pemrograman Web. Buku Bahan ajar ini mendorong peserta didik
untuk lebih memahami Maeri, bukan hanya “Apa” , dan “Mengapa” saja tapi lebih ke “Bagaimana”
peserta didik membangun sebuah website.

Bahan Ajar ini disusun berdasarkan 3 komponen utama yaitu “Information Sheet”, “Jobsheet”,
dan “Reportsheet” sesuai dengan arahan dari Pengawas Pembina/Pengasuh KCD Wilayah XII Jawa
Barat, yang menintruksikan dan membimbing penulis dalam penyelesaian Buku Bahan Ajar ini.
Memang Bukan Proses yang mudah dalam proses pembuatan bahan ajar ini, tapi seiring dengan waktu
akhirnya penulis berhasil menyelesaikan bahan ajar ini, meskipun penulis sangat yakin masih banyak
kesalahan disana sini.

Bahan Ajar ini dilengkapi dengan contoh gambar, grafik, serta tutorial yang insya alloh akan
mudah dimengerti bagi pemula sekalipun, penulis sadar pemrograman bukanlah sebuah hal yang
mudah dipepajari, maka dari itu penulis pemberikan studi kasus untuk beberapa job yang ada didalam
bahan ajar ini, karena penulis juga sebagai “Web Programming” jadi penulis sangat mengerti
bagaimana cara membuat website dan bagaimana memberikan materi pada bahan ajar ini sesuai
dengan pengalaman penulis sebagai Web Programming.

Terima Kasih Tidak Terhingga Kepada Orang Orang yang tidak dapat di sebutkan satu-satu, yang
paling utama adalah,
1. Kepada Alloh SWT, karena dengan hidayahnya penulis dapat menyelesaikan bahan ajar ini
2. Kepada Kedua Orang tua, Mertua, yang selalu mendukung apapun yang dilakukan anaknya
3. Kepada Istri Tercinta, Ulfah Fatimah yang dengan sabar selalu mendukung suaminya dalam
proses pembuatan bahan ajar ini
4. Kedua anak, Khanza dan Khaufar yang menjadi motivasi terbesar dalam penyelesaian bahan
ajar ini.
5. Kepala SMK NU Periode 2011 – 2020, Bapak Asep Susanto, S.Ag., M.Pd.I yang selalu
memberikan semangat dalam penyelesaian Bahan Ajar ini.
6. Kepala SMK NU, Bapak Drs. Aceng Mubarok, M.Pd yang memberikan kesempatan kepada guru-
guru untuk menggunakan bahan ajar yang dibuatnya di SMK NU Kota Tasikmalaya.
7. Pengawas Pembina SMK NU, H. Dedih Hermawan, S.Pd., M.Si, sebagai pembimbing utama yang
selalu memberikan pengetahuan dan pengalaman nya dalam penyusunan bahan ajar.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
8. Widiaswara PPPPTK BMTI bandung, Bapak Drs. Abigain Pakpahan, M.Pd, yang dengan sigap
sedia selalu menyempatkan datang ke Sekolah kami jika sedang berada di Kota Tasikmalaya dan
dengan sabar membimbing penulis dalam menyelesaikan bahan ajar ini
9. Guru-Guru SMK NU Yang selalu kompak dalam proses pembuatan bahan ajar ini.
10. Dan Anak-Anak RPL Khususnya serta Semua siswa SMK NU Yang akan menggunakan bahan ajar
ini, terima kasih semuanya

Akhirnya, tegur sapa, saran, dan kritik dari kalangan akademisi dan pengguna bahan ajar ini
sangat penulis harapkan demi kemajuan di bidang Pendidikan

Tasikmalaya, Juli 2020

Nizar Suryadi, ST

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 DAFTAR ISI

1 KATA PENGANTAR ……………………………………………………………

2 DAFTAR ISI ……………………………………………………………

3 LEMBAR PENGESAHAN ...………………………………………………………..

4 FreeTest ……………………………………………………………

5 Information Sheet ……………………………………………………………

6 Report Sheet ……………………………………………………………

7 Jobsheet ……………………………………………………………

8 Report Sheet ……………………………………………………………

9 Post Test ……………………………………………………………

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 LEMBAR PENGESAHAN

Dengan memperhatikan kelengkapan dokumen dalam Buku Bahan Ajar Mata Pelajaran
Pemrograman Web dan Perangkat Bergerak, yang terdiri dari :
1. Free test
2. Bahan Tayang
3. Information Sheet
4. Jobsheet
5. Reportsheet
6. Post test
Ditetapkan dan disahkan untuk diterapkan dalam pembelajaran.

DITETAPKAN / DISAHKAN : Senin, 13 Juli 2020

Disetujui dan Disahkan Oleh

Kepala Sekolah Waka Kurikulum

Drs. Aceng Mubarok, M.Pd Nizar Suryadi, ST

Mengetahui,
Pengawas Pembina KCD XII

H. Dedih Hermawan, S.Pd., M.Si

NIP.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
BAHAN TAYANG PEMROGRAMAN
WEB DAN PERANGKAT BERGERAK
PAKET 1
SILAHKAN BUKA VIDEO BERIKUT INI

https://s.id/p1l6j
 FREETEST
1. Berikut ini yang bukan Bahasa pemrograman yang digunakan untuk membangun website
adalah
a. PHP
b. HTML
c. Ajax
d. Javascript
e. Fortran
2. Bagian dakan dokumen HTML yang menyatakan judul sebuah halaman web ditandai oleh TAG
..
a. <head>
b. <title>
c. </title>
d. <body>
e. <table>
3. Tag yanf berfungsi untuk membuat text dicoret tengah adalah dengan menggunakan TAG
a. <br>
b. <hr>
c. <i>
d. <s>
e. <ol>
4. Bagian dalam table yang berfungsi untuk memberikan keterangan judul ditandai oleh TAG
a. <tr>
b. <th>
c. <td>
d. <header>
e. <caption>
5. Baris kode yang menunjukan penggabungan cell table berdasarkan kolom sebanyak tiga cell
a. Cellspacing = ‘3’
b. Cellpadding = ‘3’
c. Colspan = ‘3’
d. Rowspan = ‘3’
e. Align = ‘center’
Essai

1. Jelaskan konsep-konsep dan teknology web

2. Jelaskan perbedaan antara klien dan server
3. Jelaskan bagaimana bandwidth mempengaruhi transmisi data pada layer
4. Menjelaskan keuntungan menggunakan web server local dan web server provider
5. Membuat sketsa desain website sesuai dengan kebutuhan
6. Menjelakan ide dan konsep pembuatan website
7. Menjelaskan cara Menggunakan text editor
8. Menjelaskan fungsi-fungsi dari
a. Head
b. Title
c. Body
9. Bagaimana kode untuk menyisipkan objek kedalam halaman website
10. Jelaskan tag utama untuk membuat sebuah table pada halaman website

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 SATUAN PENDIDIKAN Judul Unit : INFORMATION SHEET: 01
SMK NAHDLATUL ULAMA Kelas / Semester
Membuat Dokumen HTML Sesuai XI– Ganjil
Kompetensi Keahlian Spesifikasi Mata Pelajaran
Rekayasa Perangkat Lunak Pemrograman Web dan
Perangkat Bergerak

- Tujuan Pembelajaran
Setelah Menyelesaikan Unit ini kamu akan mampu membuat dokumen HTML sesuai dengan
spesifikasi

- Petunjuk Pembelajaran
Anak-anak yang hebat bacalah petunjuk ini agar anda lebih mudah menguasai materi-
materi kompetensi yang ada pada lembaran belajar ini.
* Coba baca lebih dahulu apa tujuan mu dalam belajar materi ini.
* Baca dengan pelan-pelan pendaluan agar kamu lebih mudah mengerti materi
selanjutnya.
* Kerjakan student activity mu pada setiap kegiatan belajar ya, sebelum kamu lanjutkan
ke kegiatan belajar berikutnya.
* Kamu pasti hebat dan bapak/ibu guru tau kamu orang baik dan hebat akan belajar
dengan mengikuti pedoman ini.

KEGIATAN BELAJAR 1 – MENJELASKAN KONSEP DASAR DAN TEKNOLOGY DARI WEBPAGE

PENDAHULUAN

Semakin berkembangnya internet di Indonesia, semakin banyak pula yang mengenal website. Website

adalah apa yang Anda kunjungi setiap hari di internet.

Dari Google, Facebook, Twitter, CNN, Kompas, Tokopedia, Bukalapak, hinggaNiagahoster. Ketika Anda

membuka layanan-layanan tersebut di perangkat desktop atau mobile, yang Anda buka adalah website.

Meskipun sudah berinterasi dengan website setiap hari, mungkin banyak dari Anda yang belum

mengetahui apa itu pengertian website. Maka Melalui Materi ini bapak akan benyak mengulas tentang

website dan bagaimana cara membuat sebuah website.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
Jadi apa itu website ????

Jia kita brselancar di internet dan menuliskan sbuah klu pada halaman google, kita kan di hadapkan
pada beberapa pengertian,, tapi kita akan ambil saja satu pengertian yang akan mudah di ingat ,,,

Website adalah sebuah kumpulan halaman pada suatu

domain di internet yang dibuat dengan tujuan tertentu
dan saling berhubungan serta dapat diakses secara luas
melalui halaman depan (home page) menggunakan
sebuah browser menggunakan URL website.

Sebagai contoh Kita bisa lihat contoh salah satu halaman website sekolah kita, untuk halaman website
sekolah kita adalah smknutasikamalaya.sch.id , nah itu adalah halaman website

Nah diatas adalah halaman website resmi milik SMK NU Kota Tasikmalaya, pada akhir pelajaran ini,
diharapkan kalian mampu membuat sebuah halaman website juga,, karena di RPL memiliki
kemampuan membuat Website adalah sebuah kompetensi yang harus di miliki.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 ISTILAH ISTILAH DALAM TEKNOLOGY WEB

DNS Adalah …..

HTML Adalah ….
Apa itu DNS server? Singkatnya, DNS adalah Bahasa markah standar untuk dokumen
sebuah sistem yang mengubah URL website ke yang dirancang untuk ditampilkan di
dalam bentuk IP Address. Tanpa DNS, Anda peramban internet. Ini dapat dibantu oleh
harus mengetikkan IP Address secara lengkap teknologi seperti Cascading Style Sheets
ketika ingin mengunjungi sebuah website. (CSS) dan bahasa scripting seperti
JavaScript dan VBScript.

HTTP adalah dasar komunikasi data untuk World Wide Web, di mana dokumen hiperteks
menyertakan hyperlink ke sumber daya lain yang dapat dengan mudah diakses pengguna,
misalnya dengan mengklik mouse atau dengan mengetuk layar di browser web.

ISP (Internet Server Provider) : Perusahaan Penyedia Layanan Internet

SERVER : Komputer yang memebrikan layanan pada di jaringan

TAG HTML : kata kunci / tag yang di apit kurung sudut seperti <html> </html>

W3C (World Wide Web Consortium) : Organisasi yang mengembangkan teknologi web, belamat
www.w3c.org

Coba kamu cari lagi istilah-istilah lain yang sering ada pada teknology website di internet atau di buku
referensi lain ya,,, dan tuliskan pada pada kolom dibawah ini

STUDENT ACTIVITY 1

No Istilah dan pengertian teknology web Ceklist

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 5

PROFESI PENGEMBANG WEB

Menurut Wikipedia

Profesi adalah kata serapan dari sebuah kata dalam bahasa Inggris "Profess", yang dalam
bahasa Yunani adalah "Επαγγελια", yang bermakna: "Janji untuk memenuhi kewajiban
melakukan suatu tugas khusus secara tetap/permanen".

Profesi – Profesi Dalam Pengembangan Web Antara Lain :

Web Desainer

Sesuai dengan namanya, web designer berurusan dengan tampilan dari sebuah website.
Profesi ini menuntut kemampuan di 2 bidang sekaligus: Design dan Programming. Tentunya
tidak sedikit dari rekan-rekan yang ingin berkarir sebagai web designer. Namun tidak jarang
pula yang masih “awam” tentang profesi ini.

Skill apa saja yang harus di kuasai :

1. Membuat rancangan konsep layout (wireframing).

2. Membuat racangan layout secara visual.
3. Membuat dan melakukan konversi layout Visual HTML dan CSS.
4. Membuat atau mempercantik HTML dengan CSS.
5. Mampu membuat efek tambahan sesuai yang dibutuhkan.
6. Mampu mengevaluasi dan menganalisa dengan teliti kode yang sudah benar.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Web Programmer

Setelah website tersebut didesain dengan baik, selanjutnya web programmer bertanggung
jawab untuk merealisasikan desain yang telah dibuat. Seorang web programmer
akan membangun website melalui bahasa pemrograman seperti Ruby on Rails, PHP, .NET,
Java dengan program Sublim, Editor PHP, Java Script, dan sebagainya. Apabila website yang
tersebut selesai dirangkai oleh web programmer, maka pengunjung dapat mengaksesnya
dengan baik.

Web Administrator

Web Administrator adalah sebuah pekerjaan yang memfokuskan diri untuk memperbaiki
sebuah server baik itu instalasi sampai dengan masalah trobleshooting pada komputer
server. Web Administrator akan menjaga kelangsungan dan kelancaran dari server untuk
tetap bisa berjalan sehingga jika terjadi problem/masalah pada server, web administrator
harus siap untuk memperbaikinya.

Web Administrator

Web Developer adalah Pengembang Web yang bekerja untuk merancang, membuat, dan
memelihara situs web dan aplikasi web. Jadi bisa diartikan pengembang web adalah seseorang
yang berhubungan dengan pembuatan suatu website.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
BAHASA PEMROGRAMAN UNTUK MEMBUAT HALAMAN WEBSITE
Ada banyak sekali Bahasa pemrograman yang beredar di dunia ini,, tapi pada kesempatan ini, hanya
Bahasa pemrograman berbasis web yang akan di bahas pada materi ini, apa saja bahasa pemrograman
yang dapat digunakan untuk membangun halaman website.

ASP merupakan sebuah program yang harus dijalankan dengan

sebuah server khusus. Server tersebut dikenal dengan IIS
(Internet Information Server). Server ini hanya dapat berjalan
pada system operasi Windows. Web berbasis ASP adalah sebuah
file yang mengandung baris kode tertentu berekstensi .asp

PHP merupakan singkatan dari personal Home Page, yang

memiliki kelebihan dalma kebebasan atau free lisensi dibawah
lisensi GNU. Bahasa PHP merupakan turunan dari Bahasa C yang
di kembangkan oleh Rasmus Lerdorf pada era tahun 1995-an
Dari awal pekembangannya php memilki beberapa versi sampai
yang terakhir
Berikut ini versi php dari awal sampai akhir
PHP/ FI -> PHP V.2.0 -> PHP V.3.0 -> PHP V. 4.0 -> PHP V. 5.0 ->
PHP V. 7.0 dan yang paling terkahir adalah PHP versi 7.4 dan
rumor menyebutkan, pihak PHP sedang mengambangkan PHP V.
8.0
JavaScript adalah bahasa pemrograman yang digunakan untuk
membuat sebuah halaman web yang dinamis dan interaktif.
Inilah yang memberi sebuah kehidupan pada halaman – elemen
interaktif dan animasi yang dapat menarik perhatian dan
melibatkan pengunjung website.

STUDENT ACTIVITY 2

Jelaskan Istilah Istilah Dibawah ini

No Jelaskan Pengertian-Pengertian Istilah Dibawah ini dengan cara membaca Ceklist

referensi diatas
1 Profesi adalah …..

2 Web Developer ….

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 3 Web Programming ….

4 Web Desainer …

5 PHP …

6 Versi PHP ….

7 ASP

CLIENT SERVER

Coba perhatikan gambar diatas, gambar diatas adalah sebuah role cara kerja sebuah website di
internet,
Pada gambar diatas kita bisa bagi menjadi 2 bagian besar, yaitu bagian client dan bagian server,
sekarang coba perhatikan gambar di bawah ini, gambar dibawah ini akan membagi kedua bagian tadi,

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Secara mudah, pengertian client adalah kita,sebagai
pengguna website, kita melakukan pencarian/membuka
sebuah halaman web pada sebuah perambah (browser)
dengan cara menuliskan sebuah alamat pada halaman
address nya.
Jadi apa yansedang terjadi pada gamabr di samping ???
Proses seseorang dalam mengakses sebuah halaman web.

Keterangan Gambar :
Orang diatas sedang melakukan proses browsing di internet dan menuliskan alamat web yang akan
di tuju nya di dalam url pada aplikasi browser

Keterangan Gambar :

Proses Permintaan (request) dari client melalui browser

HTTP Request yaitu dimana server membaca apa yang dikirimkan

oleh client melalui aplikasi web server.

Klien melakukan permintaan ke server

Gambar disamping adalah gambar ilustrasi dari sebuah

server,
Apa itu server ????

Server adalah sebuah big computer penyimpan semua data

web

Data web yang kita akses sekarang berada dalam sebuah

server

Keterangan Gambar :
Peoses Pengambilan data dari computer server sesuai dengan permintaan dari client,

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 HTTP Response adalah sebuah hasil yang diberikan oleh
server sesuai dengan request dari client

HTTP Response yaitu dimana server akan merespon

permintaan yang telah dikirimkan oleh client.

Keterangan Gambar, gambar disamping

menandakan bahwa hasil dari permintaan dari
user (client) ke server berjalan lancar dan apa
yang di cari oleh user dapat di akses

Kesimpulan :

Client Adalah computer pengguna yang melakukan permintaan (request) terhadap server

Server adalah computer yang memberikan response dari permintaan client(pengguna)

BANDWIDTH

Apa itu Bandwidth ….

?????

Jika kita akan mendaftar pemasangan internet ke salah satu ISP, contohnya Indohome, mereka akan
menanyakan berapa bandwidth yg dipilih saat pemasangan, mungkin kita akan sedikit kebingungan
jika kita tidak mengetahui istilah tersebut,, biasanya kita akan bertanya, berapa harganya??? (karna
kita bingung tidak tahu jawabannya) benar ga ??? hehee

Biasanya pilihannya adalah 10mbps, 20mbps, dll ,, jadi apa itu bandwitdh ?????? pertanyannya belum
terjawab …

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 kapasitas yang dapat digunakan pada kabel ethernet agar dapat dilewati trafik paket data dengan
maksimal tertentu. Pengertian lain dari bandwidth internet adalah jumlah konsumsi transfer data
yang dihitung dalam satuan waktu bit per second (bps).

Jadi semkin besar bandwidth semakin cepat transmisi data nya.

SOFTWARE TEXT EDITOR

Text Editor adalah suatu software aplikasi atau suatu program komputer yang
memungkinkan Anda sebagai penggunanya untuk membuat, mengubah atau mengedit
file teks yang ada berupa plain text.

Ada banyak software text editor yang tersedia, tapi kita hanya perlu menggunakannya 1 saja dalam
proses pengembangan web, dibawah ini beberapa software tezt editor yang tersedia,

Atom adalah text editor yang bersifat free source dan open source bagi macOS,
Linux, dan Microsoft Windows. Atom dilengkapi dengan plug-in yang ditulis
dalam Node.js yang dikembangkan oleh GitHub . Atom merupakan aplikasi
desktop yang dibuat memakai teknologi web.

Visual Studio Code (VSCode) merupakan editor teks cross-platform yang tersedia
bagi sistem operasi Windows, Linux, maupun OS X. Editor ini dikembangkan oleh
Microsoft dan dengan cepat mengambil hati para developer yang menggunakan
Sublime Text untuk pindah menggunakan VSCode.

Sublime Text adalah aplikasi text editor yang digunakan untuk membuka file
apapun namun sejatinya para programmer menggunakannya untuk menulis
code. Sublime text mendukung sejumlah bahasa pemrograman diantaranya C,
C++, C#, PHP, CSS, HTML, ASP dan banyak lagi.

Notepad++ Text Editor adalah text editor yang digunakan untuk Microsoft
Windows. Text editor satu ini mendukung pengeditan tab, yang memungkinkan
Anda untuk bekerja dengan banyak file terbuka dalam satu window. Nama
proyeknya berasal dari operator peningkatan C. Notepad ++ yang didistribusikan
sebagai free software. Sejak 2015 Notepad ++ telah di-host di GitHub. Notepad
++ menggunakan komponen editor Scintilla.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
Dari Sofware diatas kita bisa memilih salah satu software yang akan dipakai dalam proses coding
nanti,, silahkan kamu putuskan akan menggunakan yang mana,, bapa tidak akan memaksa kamu
untuk menggunakan yang mana yang akan dipakai …..

WEB SERVER

Web server adalah perangkat lunak yang berfungsi sebagai penerima permintaan yang dikirimkan
melalui browser kemudian memberikan tanggapan permintaan dalam bentuk halaman situs web
atau lebih umumnya dalam dokumen HTML.

Jenis jenis web server

Sebagai pengetahuan, diatas ada beberapa jenis web server, tapi yang akan kita pakai/implemtasikan
dalam pembelajaran dan praktikum kita akan menggunakan Apache sebagai web server utama nya,
Nah disini video untuk mengetahui bagaimana dan apa itu apache

https://s.id/n9bJT

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
Dalam Proses Pengembagan Website yang akan kita pelajari nanti, kita akan menggunakan web server
yang kita miliki, tidak langsung menggunakan web server dari provider, karena apa?? Karena dalam
proses KBM akan sangat sulit menggunakan provider dan dengan syarat2 yang cukup sulit,,, jadi kita
akan menggunakan web server lokal komputer kita ya……

STUDENT ACTIVITY 3

Coba kamu Tuliskan penjelasan dari beberapa icon dibawah ini!

Coba Jelaskan Kembali Urutan dari cara kerja website dibawah ini sesuai dengan gambar

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
No Aktifitas Siswa Ceklis / Tgl Ceklis/
ttd
1 Anda Mampu Menjelaskan Kembali Tentang Istilah – Istilah Dari
Teknology Web

2 Anda Mampu Menjelaskan Beberapa Contoh ISP yang ada Di

Indonesia

3 Anda Mampu Menuliskan Kembali TAG HTML Sesuai aturannya

4 Anda Mampu Menjelaskan beberapa DNS yang terkenal

5 Anda Mampu Mempresentasikan alur kerja web menurut gambar

yang tersedia

6 Anda Mampu Menjelaskan Apa itu Bandwidth

7 Anda Tahu dan mampu membedakan mana server mana client

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 8 Anda Mampu Menjelaskan Beberapa Profesi yg terkait dengan
teknology web

9 Anda Mampu Menjelaskan Beberapa Text Editor sesuai dengan

contohnya

Setelah Kegiatan Pembelajaran 1 Dapat Diselesaikan dan mendapatkan nilai kompeten dari instruktur
kamu bisa Ke Kegiatan Pembelajaran 2, yaitu tentang proses persiapan pekerjaan pembuatan web

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 KEGIATAN BELAJAR 2 – MEMPERSIAPKAN PEKERJAAN PEMBUATAN WEB

PENDAHULUAN
Setelah mengetahui tentang dasar-dasar Website pada KB 1, pada KB ini kita akan melakukan persiapan
persiapan apa saja dalam proses pengambangan website, jika kita membuka internet dan menuliskan
kata kunci pada mesin pencarian “Persiapan membuat Website” aka nada banyak sekali artikel yang
menuliskan hal tersebut, tapi bapak akan membuat benang merahnya supaya kamu tidak kebingunan
dalam proses pencariannya,,, siap kita masuk materi selanjutnya ????? ….

Yuu mulai sediakan gelas kosong nya,,,

Kenapa kita harus menyediakan gelas kosong ….

??? supaya ilmu masuk … jangan pernah
menganggap ilmu itu biasa biasa saja,,,

A. SKETSA DESAIN WEB

Sebelum memulai membuat sebuah website ada baiknya kita merancang sketsa web yang
akan dibuat. Sketsa website ini berupa layout website yang berfungsi memudahkan kalian
dalam proses penulisan program nantinya.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Berikut ini dalah beberapa contoh sketsa desain website

Diatas adalah beberapa contoh gambaran layout sebuah halaman website.

Dari gambar diatas, kita dapat menarik kesimpulan, sebenarnya ada beberapa bagian layout yang wajib
ada dalam sebuah website, yaitu header, content, sidebar, dan footer , Adapun beberapa layout ada
yang menambahkan maincontent dan navigasi itu adalah sebuah pilihan bagi kita sebagai pengembang
web. Pada intinya tidak ada aturan resmi penempatan layout pada sebuah halaman website. Yang
Terpenting adalah kita sebagai pengembang web mampu membuat halaman website yang responsive
dan dapat dipakai oleh pengguna kita.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 STUDENT ACTIVITY 4

Pada Halaman ini tolong kamu buatkan sebuah sketsa desain web yang akan nanti kita buat,, silahkan
berinovasi dari bentuk, ukuran dll, boleh gunakan pewarna agar sketsa kalian lebih bagus lagi

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
B. Menyediakan Data yang akan di tampilkan di Website

Setelah Mempersiapkan layout halaman website, kita harus mempersiapkan beberapa hal lagi
dalam pengembangan halaman web, apa saja itu ????

Dikutip dari https://blog.rumahweb.com/apa-saja-yang-harus-dipersiapkan-untuk-membuat-

website/

Seperti halnya koran, majalah atau buku, pada prinsipnya website merupakan media yang
memiliki fungsi utama untuk menyampaikan informasi. Lalu, apa saja yang perlu Anda
persiapkan untuk membuat sebuah website?

Yang Pertama adalah IDE -> ap aitu ide ????

Bagaimana Anda bisa membuat kue, kalau ide

untuk membuat kue belum ada? Bisakah Anda
menulis tanpa menemukan ide apa yang akan
ditulis? Bisakah tangan Anda menari diatas kanvas
dan melukis, kalau ide tentang obyek lukisan belum
hadir di dalam kepala?

Ide adalah hal pertama yang harus Anda

persiapkan. Saya ingin membuat website apa?
Website jual beli, website profil, blog, atau yang
Yang Kedua adalahlain?
Konsep

Setelah ide berhasil Anda temukan, langkah selanjutnya

adalah memformulasikan konsep. Konsep adalah
gambaran yang lebih terperinci dari ide yang sudah
Anda temukan.

Apakah website Anda akan dibuat dengan tampilan

sederhana dan mudah diakses. Atau sebaliknya, website
Anda ingin dibuat penuh dengan pernak-pernik yang
memukau mata. Menu apa saja yang akan Anda
tampilkan dalam website Anda dan seterusnya.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Yang Terakhir adalah Materi

Setelah ide dan konsep berhasil Anda formulasikan

dengan matang, langkah selanjutnya adalah
mempersiapkan materi website.

Materi website disini mencakup dua komponen utama,

yaitu teks tertulis (artikel) dan gambar atau ilustrasi.

Setelah Mempelajari hal diatas, marilah kita belajar berkhayal dan beranalisis
Kita akan mencari ide, konsep dan materi untuk halaman website kita nanti

Ayo kita berfikir sejenak,, kita akan membuat website tentang apa ???? ……
Masih bingung ?????

https://jasterweb.com/bingung-cari-ide-untuk-membuat-website-ini-caranya/

coba deh buka beberapa referensi isi,,, siapa tau ada yang membuat kamu tergugah ….. kalo sudah
yuu mulai siapkan ide ide nya kedalam sebuah matrik dibawah ini

Pada kolom dibwah ini silahkan kamu tuliskan ide, konsep dan materi yang dibutuhkan untuk
membangun website kamu,

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 STUDENT ACTIVITY 5

Keterangan Pekerjaan Siswa Isian Ceklis

Judul Website yang akan dibangun

Bagaimana Konsepnya

Materi materinya disiapkan

C. MENULIS KODE UNTUK HALAMAN WEB

Setelah melakukan persiapan sketsa dan persiapan data untuk website kita, sekarang kamu
akan mempelajari bagaimana menggunakan text editor, sebagai salah satu alat untuk
mengimplemntasikan ide dan konsep kita.

Pada kesempatan ini bapak hanya akan mencontohkan satu penggunaan text editor ya,,

Menggunakan Text Editor sesuai dengan prosedur

Langkah Langkah menggunakan Text Editor

1. Tentukan pilihan text editor yang akan kamu gunakan sesuai dengan yang telah di
pelajari pada unit kompetensi 1
2. Misalkan kita akan menggunakan Text editor sublimtext,
3. Klik symbol/ shortcut /icon

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 klik icon diatas tunggu sampai tampilan text editornya muncul,
Setelah muncul, maka kamu akan di suguhi tampilan seperti dibawah ini

Diatas adalah tampilan ruang kerja kita di sublime, dan ini adalah kanvas kita dalam
mengambangkan halaman web nantinya.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 KEGIATAN BELAJAR 3 – MENETAPKAN PEMAKAIAN DAN STRUKTUR DOKUMEN DATA

PENDAHULUAN

Seperti di ulas pada Kegiatan Belajar sebelumnya,,, kamu sudah mengetahui pengertian HTML , tag
HTML dan bagian-bagian dari HTML.
HTML adalah sebuah Bahasa marqup, kenapa disebut Bahasa marqup???karena HTML di apit oleh
tanda (mark) contohnya <b> </b>
Jadi semua kode html harus di apit tag buka dan tag tutup, atau kita sering menyebutnya TAG buka
dan tag tutup atau SLASH, karena HTML bukanlah Bahasa pemrograman, pada HTML tidak akan
mendapatkan kode eror (hanya tidak akan muncul jika ada kesalahan) berbeda dengan Bahasa
pemrograman yang lain seperti PHP, Javascript, dll, pada HTML tidak akan mengenal fungsi seperti loop
dan if.

KEGUNAAN HTML

Pengertian dan Kegunaann HTML. Untuk fungsinya sendiri HTML, memiliki beberapa fungsi
diantaranya :

1. Membuat suatu halaman website yang bisa dibaca dan dipahami oleh pengguna dengan lebih
mudah.
2. Menampilkan berbagai informasi di dalam sebuah browser internet
3. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
4. Menandai elemen dan membuat online form, html juga berfungsi untuk menandai bagian-
bagian dalam website diantaranya header, main, footer, navigation, dan lain-lain.
5. Sebagai dasar website.

Pengertian dan Kegunaan HTML. Untuk kegunaan HTML:

1. Mengintegrasikan gambar dengan tulisan.

2. Membuat Pranala (link)
3. Mengintegrasikan berkas suara dan rekaman gambar hidup.
4. Membuat form Interaktif.

Versi-Versi HTML, agar kita dapat memilih akan menggunakan versi HTML mana untuk halaman
website kita,, kita simak sam-sama ya

HTML Versi 1.0

HTML versi ini merupakan versi pertama sejak lahirnya Bahasa HTML yang memiliki kemampuan
untuk heading, paragraph, hypertext, manipulasi text (bold & italic) serta memiliki hubungan
terhadap penggunaan sebuah gambar.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 HTML Versi 2.0
HTML versi ini mulai dikembangkan pada tanggal 14 Januari 1995-1996 dengan beberapa
kemampuan tambahan seperti penambahan form & hal ini menjadi cikal bakal adanya proses
interaktif dengan pengguna. Mulai versi ini, HTML menjadi awal mula adanya website interaktif.

HTML Versi 3.0 dan 3.2

HTML versi ini lahir pada tanggal 18 Desember 1997 yang dikenal dengan HTML+ karena mempunyai
beberapa fasilitas penambahan fitur table dalam paragraph, kemudian proses reasearch dilanjutkan
sampai disempurnakan pada bulan Mei 1998.

HTML Versi 4.0

HTML versi ini lahir pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur lagi seperti
adanya link, image & lain-lain sebagai penyempurna dari HTML versi 3.2.

HTML Versi 5.0

HTML versi ini atau lebih dikenal dengan HTML5 lahir pada tahun 2008 yang menjadi standar baru
untuk HTML, XHTML, & DOM HTML. HTML5 ini merupakan proyek kerjasama antara W3C dengan
WHATWG (Web Hypertext Application Technology Working Group). HTML5 menambahkan beberapa
perintah baru yang membantu para programmer web untuk mendesain website lebih menarik &
interaktif.

Jadi Pada Versi mana kita menggunakan HTML ??? silahkan kita pilih sendiri dan telaah sendiri plus
minusnya

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Struktur Dasar HTML

Seperti halnya sebuah karya tulis, dokumen HTML

pun memiliki bentuk dasar atau struktur yang harus
di ikuti aturannya oleh si penulis.

Di samping adalah bentuk dasar HTML yang harus di

ketahui dan di ikuti aturannya dalam pembuatan
halaman web dengan HTML

Struktur Utama yang harus di ketahui yaitu, bagian

Head, Body mari kita simak sama-sama bagaimana
penggunaan dan fungsi masing-masing bagian dari
HTML tersebut.

Coba Perhatikan Kode Dibawah ini ….

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 KEGIATAN BELAJAR 4 – MEMBUAT STRUKTUR DOKUMEN DENGAN BAHASA HTML

PENDAHULUAN

Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari :
Tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur paling dasar
dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

1. Dokumen HEAD
Bagian head memiliki fungsi untuk memberikan informasi tentang halaman web itu sendiri, baik
judul halaman, konten, jenis halaman dan jenis karakter penulisan. Bagian head selalu diawali
<head> dan diakhiri </head>

Posisi penulisan head, berada di dalam tag <html>

Gambar Sturktur dasar HTML

Seminimal minimal nya didalam TAG Head adalah TAG TITLE , dimana title adalah judul dari
halman website tersebut.

2. Dokumen TITLE
Perhatikan gambar stkruktur dasar HTML diatas
TAG Title Berfungsi Menyimpan judul Website <title> judul website </title> , biasanya disimpan
di dalam tag head

3. Dokumen BODY
Pada bagian Body, semua script HTML akan diterjemahkan menjadi bentuk informasi pada
halaman web, baik itu berupa text, audio, video, gambar, maupun animasi. Bagian Body sebuah
halaman web HTML selalu diawali tag <body> dan diakhiri <body>

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Diatas adalah contoh penulisan sebuah paragraph pada dokumen HTML yang dan penulisan
paragraph disimpan di dalam TAG Body atau badan halaman website

4. Format Text
a. Membuat Paragraf

Kode Diatas adalah kode untuk membuat sebuah paragraph pada kode HTML, jadi jika kita
ingin membuat sebuah paragraph di halaman web menggunakan kode <p> isi pragraft </p>
Sepertinya cukup jelas ya…. Nanti kita praktikan pada job dibawah yahhh…….

b. Membuat Komentar
Sebelum Impelentasi Sebuah Komentar, kita pahami dulu apa itu komentar, komentar
adalah sebuah kode untuk menutup text, maksudnya adalah sebuah komentar tidak akan
dibaca menjadi sebuah kode program, melainkan sebuah komentar yang hanya
diperuntukan untuk programmer

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Dibawah ini kode untuk membuat sebuah komentar

Semua tulisan yang ada di antara kode <!- - ini komentar - - > tidak akan dibaca oleh
program, diaggap hanya sebuah komentar, jadi kita bisa menuliskan apapun di antara kode
diatas, karen tidak akan dibaca oleh program

c. Format Text Tambahan

TAG HTML Fungsi

<b> isi teks </b> Membuat Text menjadi tebal

<strong> isi teks </strong> Membuat Text menjadi tebal

<i> isi teks </i> Membuat Text menjadi miring

<u> isi teks </u> Membuat Text menjadi digaris bawahi

<em> isi teks </em> Memberi Tekanan Pada teks

<big> isi teks <big> Membesarkan Huruf

<small> isi teks </small> Mengecilkan Huruf

^{isi teks} Mencetak Superscript Teks

_{isi teks} Mencetak Suscript teks

<marquee>isi teks</marquee> Mencetak Teks Berjalan

<s> isi teks </s> Mencetak teks dengan coretan

<h1> Isi Teks </h1> Membuat Heading pada Web

Heading memiliki 6 ukuran default

H1
H2
H3
H4
H5
H6
(penulisan sama dengan H1)

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 <address> Teks Untuk membuat Halaman Alamat
alamat</address>

d. Style
HTML <style> element digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah
dokumen web (HTML).
<style> element ditulis di dalam element <head>..</head> yang merupakan bagian kepala
sebuah dokumen HTML. Apabila dituliskan attribute scoped, maka penempatannya boleh
ditulis di bagian manapun di dalam element HTML, yang mana style tersebut hanya berlaku
dalam lingkup element itu sendiri (element yang menaunginya).
Elemen style merupakan satu dari berbagai cara yang dapat digunakan untuk
mengaplikasikan style atau kode CSS kedalam HTML.
Jadi Posisi penulisan style adalah diantara tag <head> … </head> yang difungsikan untuk
menambahkan dokumen CSS pada dokumen HTML kita.

Fungsi Style pada dokumen HTML adalah untuk menambah fitur bentuk warna dan tulisan
agar lebih menarik, dengan kata lain style dalam html adalah make up /tambahan,

Coba perhatikan gambar diatas, Analogi Pemrograman web pada sebuah tubuh manusia, HTML
adalah rangka tubuh pada manusia, CSS memberikan baju atau perlengkapan lainnya pada
tubuh, dan terakhir javascript memberikan gerakan dinamis pada tubuh kita,,, dari analogi
diatas mungkin kamu akan mengerti, bagaimana sebuah Bahasa pemrograman berfungsi.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 MENGENAL BOOSTRAP

APA ITU BOOSTRAP … ?????

Pada Kesempatan ini kita akan mengenal sebuah library yang sangat powerfull, yang dipakai di
banyak website modern sekarang ini … ??? apa lagi kalo bukan bootstrap, ya bootstrap menjadi
sebuah library yang paling banyak dipakai pada website modern sekarang ini… kenapa
demikian??? Mari sama-sama kita simak ya…

Bootstrap merupakan sebuah library framework CSS yang telah dibuat khusus uintuk
mengembangkan front end sebuah website. Bootstrap juga dikenal sebagai salah satu
framework CSS, HTML, Javascript yang begitu populer di kalangan website developer atau
pengembang website. Apa itu bootstrap dan fungsinya? yang pasti bootstrap digunakan untuk
mengembangkan website agar lebih responsive.

Dengan adanya bootstrap tersebut tentu saja membuat halaman website bisa menyesuaikan
dengan ukuran monitor device. Baik jika di akses lewat ponsel, tablet ataupun desktop. Awal
mulanya, bootstrap sendiri bernama Twitter Blueprint.

jadi kita hanya perlu membuat 1 website untuk dipakai di desktop, di tablet, HP,
dll. Terbayang kan jika harus membuat beberapa halaman web yang memiliki
beda2 ukuran??? Itu dulu… sekarang kita tidak perlu melakukan itu, karena ada
bootstrap.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 STUDENT ACTIVITY 6

Pada Student actifity 6 ini kamu di haruskan memahami TAG-TAG HTML yang telah di pelajari
diatas,

Untuk melengkapi validasi kemampuanmu silahkan tuliskan dibawah ini tugas-tugas nya,
Coba tuliskan struktur dasar HTML sesuai dengan apa yang telah kamu baca !

Jelaskan Fungsi-Fungsi TAG dibawah ini

TAG HTML Fungsi -> isi di bawah ini

<b> isi teks </b>

<strong> isi teks </strong>

<i> isi teks </i>

<u> isi teks </u>

<em> isi teks </em>

<big> isi teks <big>

<small> isi teks </small>

^{isi teks}

_{isi teks}

<marquee>isi teks</marquee>

<s> isi teks </s>

<h1> Isi Teks </h1>

<address> Teks alamat</address>

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 No Aktifitas Siswa Ceklis

1 Anda Mampu menyebutkan Struktur Dasar HTML

2 Anda Mampu menyebutkan fungsi dari struktur Dasar HTML

diatas

3 Anda Mampu Membedakan fungsi-fungsi dari tag HTML

4 Anda Mampu menjelaskan Kembali versi-versi HTML

5 Anda Mengetahui Fungsi dari boostrap

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 KEGIATAN BELAJAR 5 – MEMBUAT FORMAT DAN MENAMBAHKAN OBJEK

PENDAHULUAN
Sebagaimana disebutkan pada awal-awal kegiatan pembelajaran, HTML adalah kumpulan dari
informasi baik berupa text, gambar, video dan lainnya, pada Kegiatan Pembelajaran 5 ini kamu akan
mempelajari tentang bagaimana cara menyisipkan objek pada halaman website kita

Sebelum kita lebih jauh , kita pahami dahulu objek apa saja yang bisa di tampilkan di dalam halaman
website

1. Objeck Gambar
Gambar merupakan salah satu jenis multimedia yang sering dijadikan komponen pembentuk
dalam halaman web, hamper semua web menyisipkan file gambar untuk mempercantik
halaman website. Ada beberapa format gambar yang bisa digunakan pada halaman web
Jpg, gif, png, dan bmp , diatas adalah beberapa format gambar yang bisa di tampilkan pada
halaman web

Bagaimana cara menyisipkan gambar pada halaman web?????

Hati hati

Karena gambar termasuk kedalam isi dalam sebuah halaman website, tempatkan kode
pemanggilan gambar pada di dalam TAG <body>

Contoh nya , cara menyisipkan gambar pada html

Kode diatas digunakan untuk memanggil gambar yang memiliki nama file namagambar.jpg
namagambar.jpg adlah nama file untuk gambar yang akan di panggil

Sedangkan width artinya lebar gambar

Dan height artinya tinggi gambar

Jadi dengan menulis kode diatas berarti, kita memanggil gambar yang bernama
namagambar.jpg dengan ukuran lebar 400 pixel dan tinggi 200 pixel

Nanti kamu coba langsung implementasikan ya,,,

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
2. Objeck Suara
Terkadang kita juga menemukan sebuah halaman website yang disertai dengan audio atau
suara, tentu saja HTML mampu memberikan suara pada halaman website kita, meskipun ada
beberapa jenis format audio yang bisa di sisipkan pada halaman website diantaranya adalah :
.mp3, .wav, .acc, .aiff, audio cd, dan .midi

Bagaimana cara memasang audio pada halaman website kita ????

Pada gambar diatas adalah sebuah kode unutk memanggil audio mp3 pada halaman website.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Perhatikan kode diatas, source adalah nama file yang akan di panggil berbentuk audio sesuai
ketentuan diatas

Type adalah untuk memilik source tersebut audio atau video, karena pada dasarnya
pemanggilan audio dan video denga menggunakan kode yang sama.

3. Objeck Video
Objeck Video merupakan perpaduan antara gambar, gerak, dan suara yang tersusun atas
frame-frame yang membentuk pola tertentu.

Pada Halaman HTML ada beberapa format video yang bisa di sisipkan, yaitu
MPEG, AVI, WMV, MP4, Real Video, Quicktime, 3GP, dan Flash

Tidak terlalu jauh berbeda penggunaan object video dengan object audio. Dibawah ini adalah

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
Salah Satu Website penyedia playlist video

Nah Sekarang bagaimana objeck gambar, audio, dan video dapat di akses oleh halaman web
Yang pertama, file gambar, audio, dan video harus berada dalam 1 folder / alamatnya dapat
diakses oleh halaman web.

Upayakan simpan pada 1 folder saja biar mudah di aksesnya.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 KEGIATAN BELAJAR 6 – MEMBUAT TABEL

PENDAHULUAN

Setelah mempelajari bagian-bagian html dan menambahkan objeck pada html, kamu pasti pernah
mendengar tentang table html. Struktur table html digunakan untuk membuat table dalam halaman
website, baik table untuk menampilkan data atau table untuk layout halaman website kita.
Apa itu table ?? table adalah penggabungan antara baris dan kolom

Gambar diatas adalah salah satu layout website yang menggunakan table.

Sebelum kita membuat sebuah layout website dengan table, kita pelaari dahulu bagaimana cara
membuat table tersebut

Elemen dasar table

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:

1. Tag <table> untuk membungkus tabelnya

2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Dibwah Ini adalah hasil dari kode diatas ….

Ko Tidak Ada Garisnya …. ???? Ya, jika kita memerlukan garis pada table, kita harus menambahkan
atribut border pada table tersebut, bagaimana contoh kode nya

Maka akan menghasilkan

Kesimpulan nya : dalam pembuatan table ada 3 komponen utama yang harus kamu ketahui, yaitu
<table>,PAKET
<tr>, 1dan <td> dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
– Membuat
 Elemen Header Pada Tabel

Misalkan kita akan membuat sebuah data table, kita memerlukan sebuah header table. Header table
berguna memberikan informasi data dalam kolom sebuah table. Biasanya, header diletakkan pada
baris pertama sebuah table. Untuk mendeklarasikan sebuah header table menggunakan tag <th>

Contoh penulisan kode pada dokumen html nya adalah seperti dibawah ini.

Kode disamping adalah kode untuk membuat

sebuah data table, atau menampilkan data
kedalam bentuk table,
kita-kira ada berapa kolom yang akan terbentuk
dari kode tersebut …. ??

berapa …. ???

yups ada 4 kolom yang terbentuk dari table

tersebut , dari mana menghitung jumlah kolom
???

dari jumlah pasangan <td> </td>

MENGGABUNGKAN CELL

Kamu dapat menggabungkan cell pada kode HTML sebagaimana kita menggunakan marge cell pada
aplikasi Microsoft excel, tapi mohon maaf, tidak semudah yang dibayangkan seperti halnya pada
Microsoft excel dengan hanya menekan tombol marge cell, kita memerlukan sebuah atribut baru untuk
melakukan penggabungan cell, baik itu menggabungkan baris atau menggabungkan kolom.

1. Colspan
Atribut colspan digunakan untuk menyatukan satu atau lebih cell berdasarkan kolom, sebagai
contohnya, colspan = “2” berarti menggabungkan dua cell menjadi satu

2. Rowspan
Atribut rowspan digunakan untuk menyatukan satu atau lebih cell berdasarkan baris, sebagai
contohnya, rowspan =”2” berarti menggabungkan dua cell menjadi satu.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
Perhatikan Kode Dibawah ini

Kode HTMl Hasilnya

Dengan menggunakan kode disamping,

menghasilkan halaman table seperti diatas.

Kode disamping, merupakan bentuk table

yang normal

Kode disamping menghasilakan kode diatas,

kode diatas merupakan penggabungan dua
buah kolom, coba perhatikan pada <tr>
pertama, <td> berbeda jumlahnya dengan <tr>
kedua, karena apa?? Karena ada colspan,
colspan menjadikan 2 kolom menjadi 1

Pada kode disamping ini, bentuk table yang

berbeda lagi, coba perhatikan, pada table
diatas ada penggabungan 2 buah baris
menjadi 1

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 TABEL DIDALAM TABEL

Format table menjadi sanat penting sekali untuk dijadikan layout sebuah tampilan halaman web.
Dengan menggunakan tabl, kamu dapat menentukan struktur utama sebuah web, mulai dari heading,
body, dan footing nya, Teknik sederhana untuk membuat layout adalah dengan meletakkan table
didalam table, perhatikan gambar-gambar dibawah ini

Hati -hati penyimpanan table kedua harus disimpan didalam TAG <td> , perhatikan penyimpanan nya
jangan sampai salah menyimpan tag <table> keduanya ya….

STUDENT ACTIVITY 7

JELASKAN FUNGSI TAG DIBAWAH INI

Tag <table>

Tag <thead>

Tag <tbody>

Tag <tr>

Tag <td>

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Tag <th>

KEGIATAN BELAJAR 7 – MEMBUAT LINK

Sebuah Web tentu tidak dapat berdiri sendiri hanya

dengan satu halaman. Untuk membuat sebuah
website diperlukan halaman awal (home) dan
beberapa halaman content.
Untuk Membuat satu halaman bisa berpindah ke
halaman lainnya memerlukan sebuah link (pengait)
dari satu halaman ke halama lain, Hyperlink adalah
suatu komponen dasar pada sebuah halaman web.
Hyperlink sering digunakan untuk memberikan
untuk memberikan referensi link ke halaman web.

Dengan Hyperlink pada HTML, pengguna dapat membuka halamn lain, membuka gambar baru,
membuka situs tertentu, membuka jendela browser baru, hingga menjalankan file tertentu. Hyperlink
dapat berbentuk text, gambar, tombol, atau objek lainnya. Ciri sebuah text memiliki fungsi link ke
halaman lain adalah text tersebut memiliki garis bawah dan disorot tajam.

ini adalah contoh text yang mengandung

Hyperlink ada 2 jenis, Link Absolut dan Link relative

Link Absolut Link Relative

Apa itu Link absolut ???? Apa itu link relative ???

Link absolut adalah link ke alamat situs lainnya. Link Relative adalah link untuk mengakses
Alamat situs tersebut dapat berupa akses ke situs halaman dalam 1 website, Teknik ini ada beberapa
internet, atau halaman web sebuah server tertentu syarat
1. Halaman web lain harus dalam satu folder
Mengapa perlu link absolute ?? 2. Halaman web lain harus didalam satu
folder utama, atau dalam sub folder
Karena dalam sebuah halaman web, ada kalanya kita 3. Halaman web lain ada di lokasi lain.
memerlukan link ke alamat diluar halaman web kita
sendiri. Mengapa Menggunakan relative ???

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Sebagai halaman web , diperlukan link untuk
Bagaimana cara membuat link absolut berpindah dari satu halaman ke halaman lain

Bagaimana cara membuatnya??

Bagaimana tampilan di website nya??

Nah bagaimana??? Kira-kira sudah dipahami bagaimana sebuah website berpindah dari satu halaman
ke halaman lain kan????

Student Activity

No Aktifitas Siswa Ceklis

1 Anda Mampu Membedakan mana link absolute mana link relative

2 Anda Mampu membuat link absolute untuk menghubungkan website

kita ke halaman facebook – (Tulis kode nya didalam kotak)

3 Anda Mampu membuat link relative untuk menghubungkan ke file

profile.html – (Tulis kode nya didalam kotak)

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 TEST FORMATIF

1. Berikut ini yang bukan Bahasa pemrograman yang digunakan untuk membangun website
adalah
a. PHP
b. HTML
c. Ajax
d. Javascript
e. Fortran
2. Bagian dakan dokumen HTML yang menyatakan judul sebuah halaman web ditandai oleh
TAG ..
a. <head>
b. <title>
c. </title>
d. <body>
e. <table>
3. Tag yanf berfungsi untuk membuat text dicoret tengah adalah dengan menggunakan TAG
a. <br>
b. <hr>
c. <i>
d. <s>
e. <ol>
4. Bagian dalam table yang berfungsi untuk memberikan keterangan judul ditandai oleh TAG
a. <tr>
b. <th>
c. <td>
d. <header>
e. <caption>
5. Baris kode yang menunjukan penggabungan cell table berdasarkan kolom sebanyak tiga cell
a. Cellspacing = ‘3’
b. Cellpadding = ‘3’
c. Colspan = ‘3’
d. Rowspan = ‘3’
e. Align = ‘center’

Essai

11. Jelaskan konsep-konsep dan teknology web

12. Jelaskan perbedaan antara klien dan server
13. Jelaskan bagaimana bandwidth mempengaruhi transmisi data pada layer
14. Menjelaskan keuntungan menggunakan web server local dan web server provider
15. Membuat sketsa desain website sesuai dengan kebutuhan
16. Menjelakan ide dan konsep pembuatan website
17. Menjelaskan cara Menggunakan text editor
18. Menjelaskan fungsi-fungsi dari
a. Head
b. Title
c. Body
19. Bagaimana kode untuk menyisipkan objek kedalam halaman website
20. Jelaskan tag utama untuk membuat sebuah table pada halaman website

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 SATUAN PENDIDIKAN Judul Unit : REPORTSHEET NO
SMK NAHDLATUL ULAMA 01
Kompetensi Keahlian Membuat Dokumen HTML Sesuai Mata Pelajaran
Rekayasa Perangkat Lunak Spesifikasi Pemrograman Web dan
Perangkat Bergerak
Kelas / Semester Nama :____________________
XI – Ganjil Kelas : ____________________

Penilaian
No Jenis Kegiatan Siswa (diisi oleh guru)
skor Paraf
A Information Sheet (Melalui Wawancara / Test Tulis)
1. Siswa menjelaskan konsep-konsep dan teknology web
2. Jelaskan perbedaan antara klien dan server
3. Jelaskan bagaimana bandwidth mempengaruhi transmisi data pada
layer
4. Menjelaskan keuntungan menggunakan web server local dan web
server provider
5. Membuat sketsa desain website sesuai dengan kebutuhan
6. Menjelakan ide dan konsep pembuatan website

7. Menjelaskan cara Menggunakan text editor

8. Menjelaskan fungsi-fungsi dari
a. Head
b. Title
c. Body
9. Bagaimana kode untuk menyisipkan objek kedalam halaman website
10. Jelaskan tag utama untuk membuat sebuah table pada halaman
website

Tasikmalaya, ______/_____/20____
Siswa Guru Mata Pelajaran

________________________ _____________________

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 SATUAN PENDIDIKAN Judul Unit : JOBSHEET NO
SMK NAHDLATUL ULAMA Membuat Dokumen HTML Sesuai 01
Kompetensi Keahlian Spesifikasi Mata Pelajaran
Rekayasa Perangkat Lunak Pemrograman Web dan
Elemen : Perangkat Bergerak
Kelas / Semester Mengaplikasikan Fitur-Fitur , Tanggal :
XI – Ganjil Differenr-Level Heading, Parafraft,
Font, List, Table

1. TUJUAN SETELAH PENGGUNAAN JOBSHEET

Setelah menyelesaikan jobsheet ini, kamu akan

2. Kriteria Unjuk Kerja

- Memahami fitur-fitur different level
- Menggunakan fitur-fitur paragraft sesuai kebutuhan
- Menggunakan fitur font sesuai dengan kebutuhan
- Menggunakan fitur-fitur numbering sesuai kebutuhan

3. Keselamatan Kerja
Pergunakan alat sesuai denga kebutuhannya, hati hati listrik, pergunakan kaidah keselatan kerja dan
keselamatan data

4. Alat Dan Bahan

a) Komputer sesuai spesifikasi
b) Akses Internet
c) Browser : Google Chrome
d) Text Editor : Sublimtext

No Langkah Kerja
1 Membuat Heading
1. Buka text Editor Pilihan kita pada komputer kita
Kali ini kita menggunakan sublimtext ya

Klik dua kali (double klik) Icon sublimtext , tunggu sampai tampilan
layarnya muncul.

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Tampilan layar sublimtext
2. Memulai Coding, membuat Heading pada halaman web

3. Cara menyimpan dokumen HTML

Untuk pertama kali klik menu file, lalu pilih save as dan tunggu sampai tampil tampilan
dibawah ini

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Penulisan nama file nya di sesuaikan dengan kebutuhan, yang harus diperhatikan
adalah, penulisan nama file tidak boleh mengandaung spasi dan diakhiri .html
2 Membuat Paragraft

3 Format Font
1. Mencetak Tebal text

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 2. Mencetak tebal teks dengan tag strong

3. Mencetak Miring Text

4. Mencetak Teks bergaris bawah

5. Memberi Tekanan Teks

6. Membesarkan huruf

7. Mengecilkan huruf

8. Mencetak superscript

9. Mencetak subscript

10. Mencetak teks berjalan

11. Mencetak text dengan coretan

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
4 Membuat LIST
1. Membuat List berurutan (Order List)

2. Membuat List tanpa berurutan (Unorder List)

3. List Bersarang

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
5 Membuat Tabel
1. Membuat Tabel untuk menampilkan data siswa

2. Membuat Tabel untuk membuat layout website

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Hasilnya di website :

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 SATUAN PENDIDIKAN Judul Unit : JOBSHEET NO
SMK NAHDLATUL ULAMA Membuat Dokumen HTML Sesuai 02
Kompetensi Keahlian Spesifikasi Mata Pelajaran
Rekayasa Perangkat Lunak Pemrograman Web dan
Elemen : Perangkat Bergerak
Kelas / Semester MENGGUNAKAN FITUR – FITUR Tanggal :
XI – Ganjil TAMBAHAN UNTUK MEMFORMAT
LAYOUT HALAMAN

1. TUJUAN SETELAH PENGGUNAAN JOBSHEET

Setelah menyelesaikan jobsheet ini, kamu akan

2. Kriteria Unjuk Kerja

- Memahami fitur-fitur different level
- Menggunakan fitur-fitur paragraft sesuai kebutuhan
- Menggunakan fitur font sesuai dengan kebutuhan
- Menggunakan fitur-fitur numbering sesuai kebutuhan

3. Keselamatan Kerja
Pergunakan alat sesuai denga kebutuhannya, hati hati listrik, pergunakan kaidah keselatan kerja dan
keselamatan data

4. Alat Dan Bahan

a. Komputer sesuai spesifikasi
b. Akses Internet
c. Browser : Google Chrome
d. Text Editor : Sublimtext
e. Aplikasi Bootstrap
f. HP Android

No Langkah Kerja Ceklis

A. Memulai menggunakan Bootsrap
1. Instalasi Aplikasi Bootsrap, Proses instalasi Bootsrap ada beberapa cara, cara
CDN, menggunakan Source File, dan menggunakan NPM, dan Composer, pada
kesepatan ini kita akan menggunakan cara dengan menggunakan source File
2. Langkah Pertama kita download dulu source code bootsrap nya pada website
resmi bootsrap nya, https://getbootstrap.com/docs/4.0/getting-
started/download/

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 3. Hasil Downloadnya adalah file berextensi .zip

4. Setalah Download, simpan hasil download tadi ke dalam folder root kita (folder
website kita)
Lalu extract file tersebut dan ubah nama nya manjadi bootstrap seperti pada
gambar dibawah ini

5. Kita Cek Isi dari folder tersebut

Didalam folder tersebut terdapat 2 folder lagi, yaitu folder css dan folder js
Kedua folder tersebut memiliki fungsinya masing-masing.

B Memanggil Bootstrap kedalam website kita

Kode diatas adalah cara untuk memanggil file bootstrap, ada 2 baris kode yang harus
kamu perhatikan,

1.
Kode diatas berfungsi untuk memanggil file css pada folder bootsrap tersebut
2.
Kode Diatas berfungsi untuk memanggil file js pada folder bootsrap tersebut
PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Hanya itu yang diperlukan ???? yupppss… benar sekali, itu adalah cara untuk
memanggil boostrap.

Secara sekilas tidak terlalu banyak perbedaan dengan sebelum di pasang boostrap, tapi
sebenarnya ada perbedaan yang berubah.

C Memulai Coding dengan Bootstrap

1. Mengenal Grid System Pada Bootstrap
Apa itu Grid System ????
Grid berfungsi untuk membagi kolom halaman web menjadi 12 bagian kecil,
analogi nya 1 layar monitor = 12 kolom begitulah grid sistem pada bootstrap
bekerja.

Mengapa membutuhkan grid sistem ???

Karena pada hakikatnya sebuah layar website tidak memiliki kolom dan baris,
halaman web adalah sebuah layar kosong tanpa penyangga, maka dari itu
boostrap memperkenalkan teknik terbaru untuk membuat layout tanpa
menggunakan tabel, yaitu menggunaka grid sistem.

Bagaimana sistem kerja nya????

1 layar = 12 kolom -> pada gambar diatas di islahkan dengan SPAN

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 2. Membuat Tabel dengan bootstrap

Tidak ada perbedaan yang signifikan ketika kita akan membuat tabel dengan
boostrap, kita hanya perlu menambahkan
Class = “table”
Adapun pilihan class nya adalah :

3. Menyisipkan gambar dengan boostrap

Seperti biasa, pada boostrap diperluka sebuah class untuk memanggil library dari
CSS nya,
Dan dibawah ada beberapa class khusus untuk menyisipkan images/gambar

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 4. Yang Terpenting dalam proses coding menggunakan boostrap adalah selalu
membaca dokumentasi yang telah di sediakan oleh bootstrap nya
Dibawah ini adalah dokumentasi yang harus selalu anda ikuti

https://getbootstrap.com/docs/4.0/getting-started/introduction/

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 SATUAN PENDIDIKAN Judul Unit : JOBSHEET NO
SMK NAHDLATUL ULAMA Membuat Dokumen HTML Sesuai 03
Kompetensi Keahlian Spesifikasi Mata Pelajaran
Rekayasa Perangkat Lunak Pemrograman Web dan
Elemen : Perangkat Bergerak
Kelas / Semester Menyimpan dan Menguji Dokumen Tanggal :
XI – Ganjil

1. TUJUAN SETELAH PENGGUNAAN JOBSHEET

Setelah menyelesaikan jobsheet ini, kamu akan mampu membuat website untuk berbagai browser

2. Kriteria Unjuk Kerja

- Kumpulan Dokumen disimpan pada directory yang mudah diakses
- Kompatibilitas dokumen di uji dengan browser yang berbeda
- Penguji Waktu akses dokumen

3. Keselamatan Kerja
Pergunakan alat sesuai denga kebutuhannya, hati hati listrik, pergunakan kaidah keselatan kerja
dan keselamatan data

4. Alat Dan Bahan

a. Komputer sesuai spesifikasi
b. Akses Internet
c. Browser : Google Chrome, mozile firefox
d. Handphone Android
e. Text Editor : Sublimetext
f. Aplikasi Bootstrap

No Langkah Kerja Ceklis

A. Bagaimana Mengumpulkan dokumen dalam satu directory yang mudah diakses dan
mudah di baca
Sebenarnya tidak ada aturan khusus dalam penyimpanan dokumen html pada sebuah
folder, tapi yang ada adalah etika penyimpanan dokumen agar dokumen tidak
tercecer dan ketika dibutuhkan mudah dicari, bagaimana mekanisme nya??

Perhatikan Materi dibawah ini ya

1. Biasakan membuat folder root menggunakan huruf kecil semua dan tanpa
spasi contoh nya

2. Lalu Apa saja isi didalam folder utama website kita

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 Fungsi assets berisi asset-aset dalam untuk pemenuhan kebutuhan halaman
web seperti javascript, css, gambar, video, mp3 dll.

Gambar diatas adalah isi dari folder assets

3. Lalu isi content apa?? Isi content adalah halaman website utama nya

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
 SATUAN PENDIDIKAN Judul Unit : REPORTSHEET NO
SMK NAHDLATUL ULAMA 02
Kompetensi Keahlian Membuat Dokumen HTML Sesuai Mata Pelajaran
Rekayasa Perangkat Lunak Spesifikasi Pemrograman Web dan
Perangkat Bergerak
Kelas / Semester Nama :____________________
XI – Ganjil Tanggal : __________________

No Daftar Tugas/ Intruksi Penilaian Ket

Competen Not Yet
Competen
1 Persiapan
Menggunakan text Editor
Menggunakan Browser
Melakukan download Bootstrap
2 Pelaksanaan
1. Membuat heading
2. Membuat paragraft
3. Membuat text dengan berbagai format
4. Membuat List
5. Membuat layout website menggunakan Tabel
6. Menyimpan dokumen sesuai dengan prosedure
7. Menginstal Boostrap
8. Membuat Tabel dengan Bootstrap
9. Menampilkan gambar dengan bootstrap
3 Hasil
1. Cara Menyimpan Dokumen sesuai procedure

2. Website hasil pembuatan sesuai dengan permintaan

3. Melaksanakan sesuai dengan waktu yang di sediakan

4 Sikap
Melaksanakan praktik sesuai dengan kaidah keselamatan kerja

Tasikmalaya, ______/_____/20____
Siswa Guru Mata Pelajaran

________________________ _____________________

PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020
PAKET 1 – Membuat dokumen HTML sesuai spesifikasi – Pemrograman Web dan Perangkat Bergerak - Nizar Suryadi, ST - 2020