Scribd
Unggah
14 tayangan

Modul 3 - Dasar Pemrograman Web

Diunggah oleh

dea.andini.andriati
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
14 tayangan

Modul 3 - Dasar Pemrograman Web

Diunggah oleh

dea.andini.andriati
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/ 15

Dasar Pemrograman

Web
HTML Lanjut

Fakultas : FTI
Program Studi : TEKNIK INFORMATIKA

Tatap Muka

03
Kode Matakuliah : H423A
Disusun oleh : Dea Andini Andriati, S.Kom.,
M.M.S.I
DESKRIPSI MATERI PERTEMUAN 3

Materi Pertemuan 3 Pendalaman HTML


Deskripsi Materi List
Menambahkan List pada Halaman Profil
Gambar
Menambahkan Gambar pada Halaman Profil
Teks Terformat
Tabel

Sub Capaian Memahami dan mampu menggunakan struktur dasar dan elemen elemen
Pembelajaran Mata dasar pada HTML
Kuliah (Sub CPMK)
Deskrispsi Tugas -

Kontrak Perkuliahan Kehadiran


- Jadwal perkuliahan dilakukan setiap hari Selasa, pukul 13.00 –
15.30 WIB
- Wajib hadir,paling lambar 15 menit dari perkuliahan dimulai
- Maksimal ketidakhadiran sebanyak 3x
- Apabila berhalangan untuk hadir, harap inf ormasikan ke grup
Whatsapp
Bobot Nilai
- 10 % Kehadiran
- 25 % UTS
- 25 % UAS
- 40 % Tugas, Kuis, Keaktif an

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


2 Nama Dosen – No Telp http://www.undira.ac.id
Ordered List

Ordered list merupakan bentuk daf tar terurut ordered list D alam Microsof t Word dikenal dengan istilah
numbering list Ordered list menggunakan elemen <ol> yang dilanjutkan dengan elemen <li> sebagai
daf tar daf tarnya. Berikut kode penerapannya.

Hasil yang tampil di browser kira-kira seperti ini.

Gambar 22. Elemen Ordered List

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


3 Nama Dosen – No Telp http://www.undira.ac.id
Keterangan:
Angka- angka yang dihasilkan pada kode tersebut yaitu angka 1 sampai dengan 5 adalah
otomatis dan sudah berurutan (ordered)
Ordered list memiliki beberapa attribute di antaranya reversed (untuk membalikan nilai), start (untuk
memulai angka awal dengan angka pilihan), dan type (memberikan pilihan model daf tar).
Kode berikut ini adalah contoh penerapan dari attribute reversed yang ditambahkan pada kode
sebelumnya

Hasilnya seperti ini :

Gambar 23. Elemen <Ol> dengan Attribute Reversed

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


4 Nama Dosen – No Telp http://www.undira.ac.id
Berikut penerapan attribute start dengan memodif ikasi kode sebelumnya

Hasilnya yang ditampilkan sebagai berikut.

Gambar 24. Elemen <Ol> dengan Attribute Start

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


5 Nama Dosen – No Telp http://www.undira.ac.id
Selain mengubah nilai awal dari daf tar, elemen <ol> ini juga mendukung mengganti model daf tarnya
dari angka menjadi huruf , sebagaimana contoh kode berikut

Hasilnya sebagai berikut

Gambar 25. Elemen <Ol> dengan Attribute Type

Selain Type “a” terdapat type yang lain seperti : A (untuk huruf besar), I (untuk angka Romawi besar)
dan i (untuk angka Romawi kecil).

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


6 Nama Dosen – No Telp http://www.undira.ac.id
Unordered List

Mirip dengan ordered list unordered list menghasilkan daf tar tidak terurut . Jika di Microsof t Word dikenal
dengan istilah bullets list unordered list menggunakan elemen <ul> yang dilanjutkan dengan elemen
<li> sebagai daf tar daf tarnya, sama seperti ordered list Berikut contoh kodenya

Hasil yang tampil di browser sebagai berikut

Gambar 26. Elemen Unordered List

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


7 Nama Dosen – No Telp http://www.undira.ac.id
Meter

Meter merupakan elemen HTML yang menggambarkan progres berjalan. Untuk menggunakan meter
digunakan elemen < B erikut contoh kode penerapan meter

Keterangan:

a. elemen <meter> pada kode di atas menggunakan attribute bernama value. Value menginisiasi nilai
yang ingin diberikan pada meter tersebut;
b. 0.7 pada kode di atas adalah nilai 70%, 70% = 70/100 = 0.7. Angka ini bisa diubah, misalnya ingin
menggunakan nilai 67% maka angka yang digunakan adalah 0.67 begitu seterusnya. Attribute value
pada meter, selain menggunakan p erse ntase juga dapat menerapkan nilai awal dan akhir C ontohnya
adalah kode berikut

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


8 Nama Dosen – No Telp http://www.undira.ac.id
Tabel

Tabel sering digunakan untuk mengorganisasi data agar lebih mudah dibaca. Tabel memiliki baris dan
kolom. Perhatikan gambar berikut

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

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


9 Nama Dosen – No Telp http://www.undira.ac.id
Dalam HTML elemen < memiliki elemen turunan yaitu elemen <tr yang artinya table row ( dan < yang
artinya table data). Untuk membuat tabel, langkah yang perlu dilakukan sebagai berikut

a. Tentukan jumlah baris yang akan dibuat.


b. Kemudian, tentukan jumlah kolom yang akan dibuat.

c. Isi datanya.

Untuk mendapatkan tabel 3x2 langkahnya sebagai berikut.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


10 Nama Dosen – No Telp http://www.undira.ac.id
Maka dari itu, hasilnya sebagai berikut.

Gambar Tabel

Terlihat bahwa tabel tidak memiliki garis tepi Untuk memberikan garis tepi dibutuhkan attribute border
Berikut penerapannya :

Hasilnya sebagai berikut

Gambar Elemen Table dengan Attribute Border

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


11 Nama Dosen – No Telp http://www.undira.ac.id
Terdapat attribute lain dari tabel untuk menggabungkan kolom. Attribute tersebut bernama colspan.
Berikut penerapannya

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


12 Nama Dosen – No Telp http://www.undira.ac.id
Untuk menggabungkan baris, digunakan attribute bernama rowspan. Berikut penerapannya.

Hasilnya sebagai berikut

Gambar Rowspan

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


13 Nama Dosen – No Telp http://www.undira.ac.id
Selainelemen <td> dan <tr> ada elemen lainnya yang disebut sebagai table header <th>. Fungsinya
sebagai judul di dalam tabel. Berikut contohnya

Berikut adalah hasilnya.

Gambar Penerapan Table Header

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


14 Nama Dosen – No Telp http://www.undira.ac.id
DAFTAR PUSTAKA

Abadi Friska, Faisal M Reza. 2020. Pemrograman Web Dasar 1. Scripta Cendekia

Limbong Tonni, Sriadhi. 2021.Pemrograman Web Dasar. Yayasan Kita Menulis.

Nurjamiyah et al. 2022. Pemrograman Web Untuk Pemula Hingga Mahir. Tahta Media Group

Nofira Andri et al. 2023. Praktik Pemrograman Web. CV Kireinara

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning


15 Nama Dosen – No Telp http://www.undira.ac.id

Anda mungkin juga menyukai