MODUL AJAR

DESAIN GRAFIS

SINDI YULIANI

(19076127)

KOMPETENSI KEAHLIAN : TEKNIK KOMPUTER

JARINGAN DAN TELEKOMUNIKASI
 MODUL AJAR

DESAIN GRAFIS
1. Identitas Modul
a. Nama penyusun : SINDI YULIANI
b. Satuan pendidikan : SMK Negeri 4 Padang
c. Kelas : XI / Ganjil
d. Alokasi waktu : 2 x 45 menit
e. Jumlah pertemuan : 2 pertemuan
f. Kata kunci : Multimedia
g. Jumlah peserta didik : 25 orang

2. Profil pelajar pancasila

Beriman, bertaqwa kepada Tuhan Yang Maha Esa, dan berakhlak Mulia, Mandiri,
Bernalar kritis dan Kreatif

3. Capaian Pembelajan
1. Pada akhir fase E peserta didik mampu memahami tentang cara gambar dan teks
berbasis bitmap
2.
3. Memahami cara membuat frame di WEB.
4. Memahami cara membuat tabel pada web

5. Tujuan Pembelajaran
a. Peserta didik memahami Pemograman Web.
b. Peserta didik memahami dan mengetahui dasar HTML.
c. Peserta didik mampu membuat biodata pribadi dengan coding.

6. Sarana prasarana
1. Buku paket, Modul,
1. PC/Leptop
2. Browser Internet (IE/Mozilla Firefox/Google Chrome)
3. Editor (Notepad++)

7. Karakteristik Peserta Didik

Peserta didik reguler/tipikal(tanpa ketunaan dan kesulitan belajar atau berpencapain
tinggi,

8. Materi Ajar
a. Mampu menguasai konsep teoritis Pemograman Berbasis Web.
b. Mampu memformulasi masalah prosedural yang ditemui dengan benar dan
dituliskan dalam bentuk laporan.
9. Langkah langkah kegiatan pembelajaran
Pertemuan 1
Kegiatan awal (5 menit)
1. Memberi salam
2. Guru meminta peserta didik memimpin doa
3. Guru mengabsen peserta
didik Kegiatan inti ( 20 menit )
1. Guru menjelaskan secara umum tentang konsep teoritis Pemograman
Berbasis Web.
2. Guru memberikan evaluasi penugasan mengenai
a. Mempraktek kan konsep dasar HTML.
3. Peserta didik di minta mengerjakan beberapa
kuis Kegiatan penutup (5 menit)
1. Peserta didik menanyakan hal yang tidak di pahami pada guru
2. Peserta didik menerima motivasi dari guru
10. Asesmen
Tes formatif (terlampir)
11. Refleksi guru
a. Apakah ada kendala pada kegiatan pembelajan?
b. Apakah semua siswa aktif dalam kegiatan pembelajaran ?
c. Apa saja kesulitan siswa yang dapat diidentifikasi pada kegiatan pembelajran ?
d. Apakah siswa yang memiliki kesulitan ketika berkegiatan dapat teratasi dengan
baik?
e. Apa level pencapaian rata rata siswa dalam kegiatan pembelajran ini ?
f. Apakah seluruh siswa dapat dianggap tuntas dalam pelaksaan pembeljaran?
g. Apa strategi agar seluruh siswa dapat menuntaskan kompetensi?
12. Refleksi siswa
a. Apa yang menyenangkan dalam kegiatan pembelajaran hari ini?
b. Apa yang akan kamu lakukan untuk memperbaiki hasil belajarmu?
c. Kepada siapa kamu akan meminta bantuan untuk memahami pelajaran ini?
d. Jika diminta untuk memberikan binta 1 sampai 5,berapa bintang akan kamu
berikan pada usaha yang telah di lakukan?

13. Daftar pustaka

a. Kementrian pendidikan dan kebudayaan 2021 dasar dasar teknik jaringan kompter
dan telekomunikasi SMK kelas X

14. Lembar kerja peserta didik

4. Kegiatan 1 Tes formatifSoal : Gunakan coding/script latihan pada jobsheet ini

untuk membuat halaman web biodata pribadianda.
5. Buatlah kesimpulan dari praktikum anda dengan menjelaskan fungsi dan hasil
dari masing-masing latihan pada jobsheet ini.

a. Pada Latihan kali ini kita memuat halaman web biodata pribadi
menggunakan coding pada materi ajar.
15. Teknik penilaian : pengamatan,tes tertulis, penulisan
metode Bentuk instrumen
Sikap Lembar pengamatan sikap
Pengetahuan Tes tertulis
Keterampilan Lembar pengamatan quis, praktikum
 a. Bentuk instrumen
Penilaian sikap
no Aspek yang dinilai Teknik Waktu Instrumen penilaian
penilaian penilaian
1 a. Spritual pengamatan Proses Lembar
b. Jujur pembelajran pengamatan/penilaian
c. Displin
d. Tanggung
jawab
e. Kreatif
f. Teliti
g. Cermat
h. santun

Lembar penilaian sikap

no Nama spiritual jujur disiplin Tanggung kreatif teliti Cermat santun
siswa jawab

b. penilaian pengetahuan : soal quis

16. pengayaan dan remedial

a. pengayaan
 tutor sebaya
 mengerjalan latihan
b. remedial
 tutor sebaya
 melakukan praktikum

materi pertemuan 1
A. Pengenalan WEB
World Wide Web (WWW/Web) merupakan suatu ruang informasi di mana sumber-sumber
daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource
Identifier (URI)”

Web Agents merupakan orang atau perangkat lunak yang mengambil peran di dalam ruang
informasi (Web)
User Agent; user
Software Agent; Servers, proxies, spiders, browsers, dan multimedia players.

Uniform Resource Identifier (URI)

Terdiri atas string karakter yang digunakan untuk identifikasi atau memberi nama suatu
resource (sumberdaya) di internet. Identifikasi tersebut memungkinkan interaksi dengan
representasi dari resouce melalui network (jaringan) dengan menggunakan protokol
tertentu.
Hypertext
Hypertext dapat dilihat dengan sebuah program bernama web browser yang mengambil
informasi (dokumen/halaman web) dari web server dan menampilkannya, biasanya di
sebuah monitor. Kita lalu dapat mengikuti link (pranala) di setiap halaman untuk pindah ke
dokumen lain atau bahkan mengirim informasi kembali kepada server untuk berinteraksi.
Aktifitas ini disebut Surfing (berselancar). Halaman web biasanya diatur dalam koleksi
material yang saling terkait, yang disebut Website.
RFC
Sebuah memorandum yang dikeluarkan oleh IETF (Internet Engineering Task Force), yang
menggambarkan metode, perilaku, riset, atau inovasi yang dapat diterapkan ke dalam
tata kerja internet dan Internet-connected systems.

Hypertext Transfer Protocol (HTTP)

Protokol yang dipergunakan untuk melakukan transfer dokumen dalam World Wide Web
(WWW). Protokol ini adalah protokol ringan, tidak berstatus dan generik yang dapat
dipergunakan berbagai macam tipe dokumen. Pengembangan HTTP dikoordinasi oleh
World Wide Web Consortium (W3C) dan grup bekerja Internet Engineering Task Force
(IETF), bekerja dalam publikasi satu seri RFC, yang paling terkenal RFC 2616, yang
menjelaskan HTTP/1,1, versti HTTP yang umum digunakan sekarang ini.

HTTP adalah sebuah atandar request/response antara sebuah client dan sebuah server.
Sebuah Client HTTP seperti web browser, biasanya memulai permintaan dengan membuat
hubungan TCP/IP ke sebuah port tertentu di host (biasanya port 80). Sebuah server HTTP
yang mendengarkan di port tersebut menunggu client mengirim kode permintaan (request),
seperti "GET / HTTP/1.1" (yang akan meminta halaman yang sudah ditentukan), diikuti
dengan pesan MIME yang memiliki beberapa informasi header code yang menjelaskan
aspek dari permintaan tersebut, diikut dengan body dari data tertentu. Begitu menerima
kode permintaan (dan pesan, bila ada), server mengirim kembali kode jawaban, seperti
"HTTP/1.1 200 OK ", dan sebuah pesan yang diminta, atau sebuah pesan error atau pesan
lainnya.

Sejarah Web
Protokol HTTP pertama kali dipergunakan dalam WWW pada tahun 1990. Pada saat
tersebut yang dipakai adalah protokol HTTP versi 0.9. Versi 0.9 ini adalah protokol transfer
dokumen secara mentah, maksudnya adalah data dokumen dikirim sesuai dengan isi dari
dokumen tersebut tanpa memandang tipe dari dokumen. Kemudian pada tahun 1996
protokol HTTP diperbaiki menjadi HTTP versi 1.0. Perubahan ini untuk mengakomodasi
tipe-tipe dokumen yang hendak dikirim beserta encoding yang dipergunakan dalam
pengiriman data dokumen. Sesuai dengan perkembangan infrastruktur internet maka pada
tahun 1999 dikeluarkan HTTP versi 1.1 untuk mengakomodasi proxy, cache dan koneksi
yang persistent.

Client-side Programming
Secara umum, suatu client adalah satu aplikasi komputer, seperti web browser yang berjalan
pada satu komputer lokal dari pengguna atau workstation, dan terhubung ke suatu server.
Client-side programming adalah program komputer pada web yang dijalankan pada sisi
client, oleh web browser; Hal ini berlawanan arti dengan Server-side scripting.

Operasi dapat dilakukan oleh client-side karena operasi tersebut membutuhkan akses ke
informasi atau fungsi yang tersedia pada client tetapi tidak pada server, karena pengguna
membutuhkan observasi terhadap operasi tersebut atau menyediakan input, atau server
kekurangan kekuatan pememrosesan untuk melakukan operasi yang tepat waktu untuk
seluruh client yang harus dilayaninya.

Sebagai tambahan, jika operasi dapat dilakukan oleh client tanpa mengirim data melalui
jaringan, maka hal itu memakan waktu lebih sedikit, menggunakan lebih kecil bandwidth
dan mengurangi resiko keamanan.

Client-side Script seringkali dimasukkan (embedded) di dalam dokumen HTML, tetapi

dapat juga berada di dalam file terpisah, yang direferensikan oleh dokumen yang
menggunakannya. Atas sebuah request, file yang diperlukan dikirimkan oleh web server
kepada komputer user.

Web browser milik user melakukan eksekusi terhadap Script, lalu menampilkan dokumen,
termasuk output yang dapat terlihat dari Script. Client-side Script juga dapat berisikan
perintah yang harus diikuti oleh web browser jika user berinteraksi dengan dokumen dengan
cara tertentu, contohnya klik sebuah tombol.

B. Langkah Kerja
Dalam praktikum kali ini, Anda akan mempelajari penggunaan dari beberapa tag/sintag
lanjutan pada pemograman web berbasis client. Pada jobsheet kali ini akan dipelajari
dengan mengerjakan latihan dengan kode HTML tentang frame, kerjakan latihan dengan
menyimpan file latihan tersebut sesuai dengan namanama file yang telah disebutkan
dalam contoh kode dalam modul ini. Simpan di tempat yang sesuai dengan penunjukan
frame Anda, disarankan disimpan dalam folder yang sama tempat Anda menyimpan file
definisi frame. Sebagai awalan, sebaiknya Anda menggunakan browser IE, sebelum
mencobakannya ke Navigator atau Opera (bila ada).
Latihan menggunakan tabel mengharuskan Anda mencoba bentuk-bentuk yang ada
dalam contoh, kemudian silakan mencoba-coba sendiri variasi contoh dengan
menambahkan atau mengurangi sel dan isinya. Variasikan juga parameternya, agar
Anda tahu setiap bagian penentu tampilan tabel.
2. 1. Link biasa, link gambar, link ke window baru, dan link internal (Simpan dengan nama file:
latihan2-1.html)

<html>
<body>
<p>
<a href="halaman.htm">
Teks ini</a> adalah sebuah link ke suatu
halaman dalam situs Web.
</p>
<p>
<a href="http://www.google.com">
Teks ini</a> adalah sebuah link ke halaman
awal Situs google di World Wide Web.
</p> <p>
<a
href="#C
4">
Melompat ke bagian lain dalam halaman ini.
</a>
</p>
<p>
Anda dapat juga menggunakan gambar sebagai sebuah link:
<a href="linkgambar.htm">
<img border="0" src="tombol.gif" width="65" height="38">
</a>
</p>
<a href="baru.htm" target="_blank">halaman
Berikutnya</a> <p>
Bila Anda memberikan atribut target sebuah link menjadi
"_blank", Link tersebut akan membuka sebuah window
 browser baru.
</p>
<p>
<p> Ada tulisan disini (lakukan copy dan paste baris ini untuk baris berikutnya) </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<a name="C4"><h2> Disinilah tujuan lompatan link internal anda </h2></a>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
</body>
</html>

2. 2. Link ke e-mail (Simpan dengan nama file: latihan2-2.html)

<html>
<body>
<p>
Ini adalah link ke e-mail:
<a href="mailto:saya@gmail.com?Subject=Halo%20lagi">
Kirim e-mail</a>
</p>
<p>
<b>Catatan:</b> Spasi di antara setiap kata sebaiknya digantikan dengan tanda %20 untuk
<b>memastikan</b> bahwa browser akan menampilkan teks Anda dengan benar.
</p>
<p>
Ini juga contoh link ke e-mail:
<a href="mailto:anda@gmail.com?
cc=dia@gmail.com&bcc=kamu@gmail.com&subject=Summ er%20Party&body
=Apakah%20Anda%20mau%20diundang%20ke%20pesta%20malam%20minggu?">Kirim e-
mail!</a>
</p>
</body>
</html>

2. 3. Frameset (horisontal dan vertikal) (Simpan dengan nama file: latihan2-3.html)

<html>
<frameset rows="50%,50%">
<frame src="frame1.htm">
<frameset cols="25%,75%">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</frameset>
</html>

2. 4. Frameset dengan atribut no-resize = “true” (Simpan dengan nama file: latihan2-4.html)
 <html>
<frameset rows="50%,50%">
<frame noresize="true" src="frame1.htm">
<frameset cols="25%,75%">
<frame noresize="true" src="frame2.htm">
<frame noresize="true" src="frame3.htm">
</frameset>
</frameset>
</html>

2. 5. Frame inline (Simpan dengan nama file: latihan2-5.html)

<html>
<body>
<iframe src ="default.htm">
</iframe>
<p>Beberapa browser lama tidak mendukung iframe.</p>
<p>Bila browser yang Anda pakai sekarang tidak mendukung, iframe tak akan
terlihat.</p> </body>
</html>

6. Membuat tabel (Simpan dengan nama file: latihan2-6.html)

<html>
<body>
<p>
Setiap tabel dimulai dengan tag table.
Setiap baris tabel dimulai dengan tag tr.
Setiap data dalam tabel dimulai dengan tag td.
</p>
<h4>Satu baris satu kolom dengan border normal:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>Satu baris dan tiga kolom dengan border
tebal:</h4> <table border="8">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Dua baris dan tiga kolom dengan border sangat tebal:</h4>
<table border="15">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Tabel ini tidak memiliki border:</h4>
<table border="0">
<tr>
 <td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>

2. 7. Sel kosong dalam tabel (Simpan dengan nama file: latihan2-7.html)

<html>
<body>
<table border="1">
<tr>
<td>Teks</td>
<td>Teks</td>
</tr>
<tr>
<td></td>
<td>Teks</td>
</tr>
</table>
<p>
Seperti yang Anda lihat, salah satu sel tidak memiliki border. Itu terjadi karena sel
tersebut kosong. Cobalah untuk menyisipkan sebuah spasi ke dalam sel tersebut.
Ternyata tetap saja tidak memiliki border. </p>
<p>
Cara yang benar adalah dengan menyisipkan spasi non-breaking di dalam sel.
</p>
<p>Spasi non-breaking adalah sebuah entitas karakter. Bila Anda tidak mengetahui apa yang
disebut karakter entitas, baca kembali materi kuliah tentang hal tersebut.
</p>
<p>Entitas spasi non-breaking dimulai dengan tanda ampersand
("&"), kemudian karakter-karakter "nbsp", dan diakhiri dengan
semicolon (";")
</p> <p>
</p>
</body>
</html>

2. 8. Sel tabel yang diperlebar (Simpan dengan nama file: latihan2-8.html)

<html>
<body>
<h4>Sel yang melebar dua kolom:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Sel yang melebar dua baris:</h4>
<table border="1">
 <tr>
<th>Nama depan:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telepon:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>

2. 9. Menambahkan latar belakang ke tabel (Simpan dengan nama file: latihan2-9.html)

<html>
<body>
<h4>Dengan warna latar belakang:</h4>
<table border="1" bgcolor="red">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan latar belakang gambar:</h4>
<table border="1" background="../bg.jpg">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Latar belakang pada sel:</h4>
<table border="1">
<tr>
<td bgcolor="red">Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td background="../bg.jpg">
Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>