Scribd
Unggah
45 tayangan28 halaman

HTML

Acara 3 membahas pemrograman HTML5, termasuk elemen-elemen baru dan sintaks HTML5. Mahasiswa diajak memahami pemrograman server side menggunakan HTML5 dan menyelesaikan permasalahan menggunakan HTML5."

Diunggah oleh

kennyo gendis putri harli
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
45 tayangan28 halaman

HTML

Acara 3 membahas pemrograman HTML5, termasuk elemen-elemen baru dan sintaks HTML5. Mahasiswa diajak memahami pemrograman server side menggunakan HTML5 dan menyelesaikan permasalahan menggunakan HTML5."

Diunggah oleh

kennyo gendis putri harli
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 28

Acara 1

Pokok Bahasan : HTML


Acara Praktikum/Praktik : Praktikum 1/1
Tempat : PSDKU Sidoarjo
Alokasi Waktu : 100 menit

a. Capaian Pembelajaran Mata Kuliah (CPMK)


1. Mahasiswa mampu mengenali dan mengimplementasikan instalasi perangkat
pendukung HTML

b. Indikator Penilaian
1. Mahasiswa mengenali dan mengimplementasikan instalasi perangkat
pendukung HTML

c. Dasar Teori
Adobe Dreamweaver merupakan program penyunting halaman
web keluaran Adobe Systems yang dulu dikenal sebagai Macromedia
Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh
pengembang web karena fitur-fiturnya yang menarik dan kemudahan
penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia
dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran
Adobe Systems adalah versi 12 yang ada dalam Adobe Creative Cloud (sering
disingkat Adobe Cc).

d. Alat dan Bahan

1. Komputer/Laptop
2. Software Pendukung: Adobe Dreamweaver
3. Kertas A4 / Folio Bergaris
4. Pulpen

e. Prosedur Kerja
1. Pastikan sudah tidak terhubung dengan internet.
2. Buka file Adobe Dreamweaver CS6.rar yang sudah di download.
3. Buka folder Adobe Dreamweaver CS6 kemudian klik “Set-up.exe”

4. Jika ada peringatan seperti gambar dibawah ini, lalu klik ignore.
5. Maka muncul jendela seperti gambar dibawah ini:

Pilih “Try”
6. Kemudian klik “Accept”

7. CATATAN: sebelum melanjutkan pastikan bhawa sudah tidak terhubung


dengan internet. Jika sudah lanjutkan dengan klik “install”
8. Tunggu hingga proses instalasi selesai.
9. Jika sudah selesai akan muncul jendela seperti gambar dibawah, lalu klik
“Launch Now”. Lalu tutup kembali jendela Dreamweaver.

10. Selanjutnya proses patch, caranya yaitu: buka file crack yang ada didalam file
Adobe Dreamweaver CS6 kemudian extrak file “amtlib.dll” lalu copy-paste ke
dalam folder C:\Program Files\Adobe\Adobe Dreamweaver CS6
11. Selesai

f. Hasil dan Pembahasan


Proses Instalasi berhasil dan melanjutkan Acara 2, 3, dan 4.
g. Rubrik Penilaian

No Indikator Nilai

1 2 3 4

1 Ketepatan waktu dan ketepatan Langkah kerja dalam mengerjakan V

2 Ketepatan waktu dan Langkah kerja kurang tepat dalam mengerjakan V

3 Keterlambatan waktu dan Langkah kerja yang dilakukan kurang tepat V

4 Keterlambatan waktu pengumpulan dan Langkah kerja tidak seusai V

Total Skor* Skor x 25


Acara 2
Pokok Bahasan : HTML
Acara Praktikum/Praktik : Minggu 1/2
Tempat : PSDKU Sidoarjo
Alokasi Waktu : 100 menit

h. Capaian Pembelajaran Mata Kuliah (CPMK)


1. Mahasiswa dapat memahami pemrograman server side menggunakan HTML
2. Mahasiswa dapat mengetahui sintak-sintak yang sering digunakan pada HTML
3. Mahasiswa mampu menyelesaikan beberapa permasalahan menggunakan
pemrograman HTML

i. Indikator Penilaian
1. Mahasiswa memahami pemrograman server side menggunakan HTML
2. Mahasiswa mengetahui sintak-sintak yang sering digunakan pada HTML
3. Mahasiswa menyelesaikan beberapa permasalahan menggunakan
pemrograman HTML

j. Dasar Teori
HTML (HyperText Markup Language) merupakan bahasa pemrograman untuk
menyusun halaman web dan diletakkan pada sebuah web server. Hubungan client-
server saat menjalankan atau mengakses halaman web menggunakan browser
seperti diilustrasikan pada gambar 1.

Gambar 1. Ilustrasi hubungan client-server saat menjalankan browser

Beberapa elemen yang sering digunakan pada pemrograman HTML seperti terlihat
pada terlihat pada tabel 1.
Tabel 1. Elemen-elemen HTML
Apabila digunakan editor Adobe Dreamweaver, tampilan awal dokumen HTML
seperti terlihat pada gambar 2.

Gambar 2. Tampilan awal dokumen HTML menggunakan editor Adobe


Dreamwever
Gambar 2 dikenal dengan deklarasi doctype yang diletakkan sebelum tag <html>.
DOCTYPE tidak berkedudukan sebagai tag. Deklarasi doctype digunakan untuk
memberi tahu browser mengenai aturan-aturan dalam menyusun web sehingga
diharapkan browser dapat menerjemahkannya dengan benar.

1. File HTML
Sebuah dokumen dapat dikenali sebagai sebuah homepage bila nama ekstensi
dari dokumen tersebut adalah nama_file.HTML atau nama_file.HTML.

2. Struktur HTML
Agar sebuah dokumen dapat dibaca dan diproses sebagai homepage, maka
dokumen tersebut harus mengikuti struktur dari dokumen HTML Dokumen HTML
mempunyai struktur sebagai berikut:
k. Alat dan Bahan
1. Komputer/Laptop
2. Software Pendukung: Notepad++ / Adobe Dreamweaver, dll.
3. Kertas A4 / Folio Bergaris
4. Pulpen

l. Prosedur Kerja
1. Baris HTML

Tampilan:

2. Paragraf HTML
Tampilan:

3. Heading HTML

Tampilan:
4. Bentuk Huruf HTML

Tampilan:

5. HTML Text Formatting

Tampilan:

6. Membuat Garis Horisontal


Tampilan:

7. Membuat Suatu Daftar


Tampilan:
8. Membuat Link dengan Homepage lain

Tampilan:

9. Membuat Baground/Latar Belakang


• Membuat Latar Belakang dengan gambar
Tampilan:

• Membuat Latar Belakang dengan warna tertentu

Tampilan:
10. HTML Image

Tampilan:

11. HTML Layout


Tampilan:

m. Hasil dan Pembahasan


Buatlah Laporan pada Percobaan yang sudah dilakukan. Berikan analisa dan
kesimpulan pada program dan tampilan yang kalian buat. Kumpulkan di LMS
dengan format laporan: NIM_Nama_Workshop-(minggu ke berapa dilakukan
workshop)
n. Rubrik Penilaian

No Indikator Nilai

1 2 3 4

1 Ketepatan waktu dan ketepatan Langkah kerja dalam mengerjakan V

2 Ketepatan waktu dan Langkah kerja kurang tepat dalam mengerjakan V

3 Keterlambatan waktu dan Langkah kerja yang dilakukan kurang tepat V

4 Keterlambatan waktu pengumpulan dan Langkah kerja tidak seusai V

Total Skor* Skor x 25


Acara 3
Pokok Bahasan : HTML
Acara Praktikum/Praktik : Praktikum 1/3
Tempat : PSDKU Sidoarjo
Alokasi Waktu : 100 menit

a. Capaian Pembelajaran Mata Kuliah (CPMK)


1. Mahasiswa dapat memahami pemrograman server side menggunakan HTML5
2. Mahasiswa dapat mengetahui sintakk-sintak yang sering digunakan pada
HTML5
3. Mahasiswa mampu menyelesaikan beberapa permasalahan menggunakan
pemrograman HTML5

b. Indikator Penilaian
1. Mahasiswa memahami pemrograman server side menggunakan HTML5
2. Mahasiswa mengetahui sintakk-sintak yang sering digunakan pada HTML5
3. Mahasiswa menyelesaikan beberapa permasalahan menggunakan
pemrograman HTML5

c. Dasar Teori
Pemrograman HTML mengalami perkembangan, standart terbaru HTML adalah
HTML5 yang dirilis pada tahun 2010. HTML5 merupakan salah satu karya
Konsortium Waring Wera Wanua(World Wide Web Consortium, W3C) dan IETF
(Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML
sejak versi 2.0.
• HTML5 memiliki beberapa kelebihan diantaranya:
• HTML5 dirancang khusus untuk menangani konten website tanpa
memerlukan tambahan plugin (seperti flash)
• Penanganan kesalahan yang lebih baik
• HTML5 memiliki elemen semantic, gambar, dan multimedia baru
• HTML5 mempunyai elemen form baru dan API baru web lebih mudah
• HTML5 merupakan cross-platform, dirancang untuk bekerja pada beberapa
tipe perangkat keras (PC, Tablet, Phone, TV, dll).
Format penulisan sintak HTML5 secara umum masih seperti format HTML versi
sebelumnya. HTML5 menggunakan encoding (charset) UTH-8 yang didefinisaikan
pada setiap halaman html. Format Sintak HTML5 seperti dibawah ini:
Ada beberapa elemen baru yang disediakan pada HTML5 untuk mendukung
pembuatan halaman website modern seperti: header, footer, navigation bars,
sidebars dan sebagainya. Beberapa elemen baru HTML5 seperti terlihat pada tabel
2.
Tabel 2. Elemen-elemen baru yang disediakan pada HTML5
Tag Deskripsi
<article> Mendefinisikan sebuah artikel pada dokumen seperti : berita,
komentar dan sebagainya
<section> Mendefinisikan sebuah section sebuah dokumen
<nav> Mendefinikan link navigasi sebuah dokumen
<aside> Untuk menandai sebuah sidebar atau beberapa konten lainnya
yang dianggap agak terpisah untuk konten sekitarnya.
Contohnya adalah iklan
<header> Mendefinisikan header sebuah dokumen atau section
<footer> Mendefinisikan footer sebuah dokumen atau section
<figcaption> Mendefinisikan caption sebuah elemen gambar

Elemen form juga mengalami pengembangan pada HTML5. Elemen-elemen baru


pada form seperti tabel 3.
Tabel 3. Elemen form pada HTML5
Tag Deskripsi
<datalist> Definisi awal pilihan untuk pengaturan masukan
<keygen> Mendefinisikan sebuah key-par generator field (untuk form)
<output> Mendefinisikan hasil dari sebuah kalkulasi

Untuk mendukung mendukung fasilitas gambar dan media elemen seperti pada
tabel 4 dan 5.
Tabel 4. Elemen grafis pada HTML5
Tag Deskripsi
<canvas> Mendefinisikan gambar grafis menggunakan JavaScript
<svg> Mendefinisikan gambar grafis menggunakan SVG

Tabel 5. Elemen media pada HTML5


Tag Deskripsi
<audio> Mendefinisikan konten audio atau musik
<embed> Mendefinisikan containers untuk aplikasi eksternal (seperti
plug-ins)
<source> Mendefinisikan suber untuk dan video
<video> Mendefinikan konten video atau film
<track> Mendefinisikan track <audio> dan <video>

Sebuah elemen simantik mengambarkan secara jelas kepada browser dan


para pengembang web. Perbedaan antara elemen non-siamtik dan elemen simantik
seperti dibawah ini:
Contoh elemen non-simatik: <div> dan <span> → tidak menjelaskan sesuatu
tentang konten
Contoh elemen simantik: <form>, <table>, dan <img> → mendefinisikan dengan
jelas mengenai konten
Pada beberapa website terdiri dari beberapa kode HTML seperti: <div
id=”nav”>, <div class=”header”> atau <div id=”footer”> yang mendefinisikan
sebuah link navigasi, header dan footer. HTML5 menawarkan elemen simatik baru
untuk mendefinisikan dengan jelas perbedaan bagian-bagian pada sebuah halaman
web, seperti:
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figure>
• <figcaption>
• <footer>
• <details>
• <summary>
• <mark>
• <time>

d. Alat dan Bahan

1. Komputer/Laptop

2. Software Pendukung: Notepad++ / Adobe Dreamweaver, dll.

3. Kertas A4 / Folio Bergaris


4. Pulpen

e. Prosedur Kerja
1. Elemen <section> HTML5
Elemen section digunakan untuk mendefinisikan sebuah section pada
dokumen

Tampilan:

2. Elemen <article> HTML5


Elemen article biasanya digunakan untuk:
- Forum post
- Blog post
- Berita
- Komentar
Tampilan:

3. Elemen <nav> HTML5

Tampilan:
4. Elemen <aside> HTML5

Tampilan:

5. Elemen <header> HTML5


Tampilan:

6. Elemen <footer> HTML5

Tampilan:

7. Elemen <figure> dan <figcaption> HTML5

Tampilan:
8. Elemen <datalist> HTML5

Tampilan:

9. Elemen <output> HTML5

Tampilan:
10. Elemen <canvas> HTML5

Tampilan:

11. Elemen SVG HTML 5

Tampilan:
f. Hasil dan Pembahasan
Buatlah Laporan pada Percobaan yang sudah dilakukan. Berikan analisa dan
kesimpulan pada program dan tampilan yang kalian buat. Kumpulkan di LMS
dengan format laporan: NIM_Nama_Workshop-(minggu ke berapa dilakukan
workshop)

g. Rubrik Penilaian

No Indikator Nilai

1 2 3 4

1 Ketepatan waktu dan ketepatan Langkah kerja dalam mengerjakan V

2 Ketepatan waktu dan Langkah kerja kurang tepat dalam mengerjakan V

3 Keterlambatan waktu dan Langkah kerja yang dilakukan kurang tepat V

4 Keterlambatan waktu pengumpulan dan Langkah kerja tidak seusai V

Total Skor* Skor x 25


Acara 4
Pokok Bahasan : HTML
Acara Praktikum/Praktik : Praktikum 1/4
Tempat : PSDKU Sidoarjo
Alokasi Waktu : 100 menit

a. Capaian Pembelajaran Mata Kuliah (CPMK)


4. Mahasiswa dapat memahami pemrograman server side menggunakan HTML
5. Mahasiswa dapat mengetahui sintakk-sintak yang sering digunakan pada HTML
6. Mahasiswa mampu menyelesaikan beberapa permasalahan menggunakan
pemrograman HTML

b. Indikator Penilaian
4. Mahasiswa memahami pemrograman server side menggunakan HTML
5. Mahasiswa mengetahui sintakk-sintak yang sering digunakan pada HTML
6. Mahasiswa menyelesaikan beberapa permasalahan menggunakan
pemrograman HTML

c. Dasar Teori

d. Alat dan Bahan

1. Komputer/Laptop

2. Software Pendukung: Notepad++ / Adobe Dreamweaver, dll.

3. Kertas A4 / Folio Bergaris

4. Pulpen

e. Prosedur Kerja
1. Bagilah menjadi kelompok dengan tema riset masing-masing
2. Buatlah tampilan Web sesuai tema riset masing-masing menggunakan HTML

f. Hasil dan Pembahasan


g. Buatlah Laporan pada Percobaan yang sudah dilakukan. Berikan analisa dan
kesimpulan pada program dan tampilan yang kalian buat. Kumpulkan di LMS
dengan format laporan: NIM_Nama_Workshop-(minggu ke berapa dilakukan
workshop)
h. Rubrik Penilaian

No Indikator Nilai

1 2 3 4

1 Ketepatan waktu dan ketepatan Langkah kerja dalam mengerjakan V

2 Ketepatan waktu dan Langkah kerja kurang tepat dalam mengerjakan V

3 Keterlambatan waktu dan Langkah kerja yang dilakukan kurang tepat V

4 Keterlambatan waktu pengumpulan dan Langkah kerja tidak seusai V

Total Skor* Skor x 25

Anda mungkin juga menyukai