Scribd
Unggah
440 tayangan25 halaman

Laporan Praktikum Pemrograman Web Modul 1

Laporan ini membahas tentang modul HTML dalam praktikum pemrograman berbasis web. Modul ini menjelaskan tentang struktur dasar dokumen HTML dan cara membuat dokumen HTML. Juga dijelaskan tentang elemen-elemen dasar HTML beserta contoh kodingnya.

Diunggah oleh

Ezrafel Amadeuz
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 DOCX, PDF, TXT atau baca online di Scribd
440 tayangan25 halaman

Laporan Praktikum Pemrograman Web Modul 1

Laporan ini membahas tentang modul HTML dalam praktikum pemrograman berbasis web. Modul ini menjelaskan tentang struktur dasar dokumen HTML dan cara membuat dokumen HTML. Juga dijelaskan tentang elemen-elemen dasar HTML beserta contoh kodingnya.

Diunggah oleh

Ezrafel Amadeuz
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 DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 25

LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

MODUL 1
HTML
Untuk memenuhi tugas matakuliah Praktikum Pemrograman Berbasis Web
yang dibimbing oleh Bapak Didik Dwi Prasetya

Oleh :
AMADEUZ EZRAFEL
(120533430965)
S1 PTI 12 Off D

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
UNIVERSITAS NEGERI MALANG
JANUARI 2014

A.
-

TUJUAN
Memahami struktur dasar dokumen HTML dan HTML5
Mampu membuat dokumen HTML yang baik dan benar
Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi

B. LATIHAN
Latihan 1
Berikut adalah pengenalan tentang struktur dasar dalam pembuatan web statis
yang menggunakan HTML. Terdapat tag wajib yang harus disertakan dalam
pembuatan dokumen HTML yaitu <html> dan diakhiri dengan tag penutup
</html>

Latihan 2
Berikut merupakan

pengenalan terhadap penulisan kepala teks

yang

menggunakan heading. Besar kecilnya tulisan dipengaruhi oleh ukuran heading


mulai dari yang terbesar h1 sampai yang terkecil h6.

Latihan 3
Berikut format elemen heading untuk mengatur posisi teks dengan
menggunakan atribut align.

Latihan 4
Untuk membuat bentuk paragraf pada penulisan HTML menggunakan tag <p>
yang tertera pada contoh berikut.

Latihan 5
Dalam penulisan paragraf di HTML dapat diatur bentuk rata tengah, kanan, kiri
maupun rata kanan dan kiri seperti penulisan berikut,

Latihan 6
Pada pembuatan baris baru atau yang lebih dikenal sebagai break dalam suatu
paragraf, menggunakan tag <br>..</br> karena pada penulisan HTML masukan
enter tidak dibaca sebagai pembuatan baris baru.

Latihan 7
Pada HTML juga disediakan sejumlah elemen untuk menampilkan font yang
berhuruf tebal, miring, garis bawah dan lainnya. Untuk mencetak tag <p> secara
default akan dibaca sebagai paragraf, untuk menghindari hal itu maka
dibutuhkan entitas seperti &ltd dan &gt untuk menampilkannya.

Latihan 8
Untuk membuat karakter khusus seperti penulisan mata uang asing ataupun
copyright dan sebagainya memerlukan kode khusus atau entitas untuk
menampilkannya seperti pada contoh berikut.

Latihan 9
Membuat garis horizontal pada HTML dipresentasikan menggunakan tag <hr/>
yang dapat digunakan sebagai garis pembatas dalam penulisan teks.

Latihan 10
Untuk menuliskan bentuk terurut pada HTML dapat menggunakan <ol> sebagai
bentuk terurut dengan angka, <ul> untuk bentuk rtak terurut dan bentuk definisi
dengan tag <dl>. Setiap list item ditulis dengan <li> seperti pada contoh coding
berikut.

Latihan 11

HTML juga menyediakan pewarnaan pada background baik menggunakan tipe


warna ataupun nilai heksa seperti ditunjukan pada tag <body bgcolor=aqua>.

Latihan 12
Pada HTML bisa juga untuk menyertakan gambar dengan menggunakan tag
<img src=namafile/> dengan syarat file gambar berada pada satu direktori
folder halaman web. Gambar juga dapat diatur letak posisinya.

Latihan 13
HTML menyediakan fitur link yang ditandai dengan tag <a> untuk pendefinisian
link yang juga memerlukan atribut href untuk menyatakan suatu tujuan.
Penulisan bisa bersifat relative maupun absolute seperti pada contoh berikut.

Latihan 14
Latihan berikut merupakan lanjutan dari latihan 13 sebagai imbas dari klik link
yang bisa digunakan untuk merujuk pada laman HTML lainnya.

Latihan 15
Pada latihan ini menggunakan atribut link sebagai perujukan link yang di klik,
untuk membuka link yang dilihat dibuka di jendela browser yang sama atau

tidak. Jika membuka link tidak pada tab/jendela yang sama maka menggunakan
coding seperti berikut.

Latihan 16
Tautan link juga dapat diimplementasikan pada halaman HTML yang serupa
menggunakan link internal seperti contoh berikut. Tujuannya jika dalam suatu
web terdapat banyak konten maka kita tidak perlu harus menarik scroll ke bawah
melainkan dengan mengklik link internal tersebut.

Jika diklik pada kesimpulan maka secara otomatis akan menuju pada konten
yang membahas kesimpulan

Latihan 17
Link juga bisa merupakan sebuah email dengan menggunakan prefix mailto,
sehingga langsung merujuk pada tautan email yang sudah tertaut dengan link
yang dibuat seperti pada contoh berikut.

Latihan 18
Link bisa dikaitkan melalui gambar seperti berikut, sehingga dengan kita
mengklik gambar maka akan tertuju kepada link terkait. Kode link gambar
direpresentasikan pada coding berikut.

Latihan 19
Dalam HTML juga dapat menciptakan sebuah table seperti halnya pada
pengolah kata atau angka. Menggunakan tag <table></table>. Lalu diisikan
<tr> sebagai baris table, <th> sebagai kolom table, dan <td> data table seperti
pada coding HTML berikut.

Latihan 20
Tabel dalam HTML juga dapat diatur jeda spasinya maupun jeda antar teks
dengan border table. Atribut yang digunakan untuk mengubah yaitu align untuk
mengatur posisi table, cellspacing untuk mengatur ukuran spasi, cellpadding
untuk mengatur spasi antara border sel dengan isi atau data tabelnya.

Latihan 21
Pemformatan table juga memungkinkan kita untuk mengatur lebar table
menggunakan width yang dimasukan dalam table header untuk mengatur lebar
sesuai dengan kebutuhan

Latihan 22
Ada kalanya ketika kita ingin mengedit table dengan menggabungkan sel antara
kolom dengan baris. Pada HTML juga menyediakan perintah rowspan (merger
baris) dan colspan (merger kolom). Pengelompokan

C. STUDI KASUS
1. Membuat web sederhana yang berisi CV tentang Biodata, Riwayat Pendidikan,
Riwayat Organisasi dan Prestasi yang pernah diraih dengan menggunakan
-

format dan list


Coding HTML

Tampilan Web

Keterangan :
Web diatas merupakan implementasi dari kode dasar HTML atau web sederhana
yang bersifat statis. Pada sisi atas dan bawah menggunakan format garis
horizontal. Pada penulisan teks baik judul maupun isi menggunakan format
penulisan heading. Pada riwayat pendidikan digunakan table sebagai bentuk
isian tingkat pendidikan. Sedangkan pada riwayat organisasi dan prestasi
menggunakan unordered list bertipe bullet dan square. Pada biodata terdapat
pengaplikasian atribut mailto pada alamat email dan untuk atribut link terdapat
pada footer web yang mengarah pada pembukaan link di jendela/tab baru.

2. Membuat Tabel yang telah ditentukan dengan penggunaan Rowspan dan


Colspan
-

Coding HTML

Tampilan Web

Keterangan :
Untuk membuat format table sesuai diatas, terlebih dahulu kita membuat atau
mengalokasikan 4 baris dan 4 kolom. Berikutnya mulai menggunakan
pemformatan colspan dan rowspan sesuai bentuk table dengan cara berikut. Pada

baris pertama, kolom ke-2 di colspan dengan kolom ke-3. Pada kolom pertama
baris ke-1 di rowspan dengan baris ke-2, begitu pula pada kolom keempat baris
ke-1 juga di rowspan dengan baris ke-2. Sedangkan pada baris keempat, kolom
ke-1,2 dan 3 selnya di colspan lalu penulisan teksnya diformat rata kanan
menggunakan align.
D. KESIMPULAN

HTML (Hypertext Markup Language) merupakan dokumen standar yang

digunakan untuk mendesain web khususnya web yang bersifat statis.


Setiap dokumen HTML wajib diawali dengan tag <html> dan diakhiri dengan
tag tutup </html>. Pada dokumen HTML juga menyertakan <head> sebagai
pernyataan informasi, <title> sebagai judul pada web browser, <body> untuk

melingkupi teks yang terdapat pada HTML.


Pada tag <body></body> dapat dicantumkan isi baik teks, gambar, tabel dan
sebagainya. Isi yang terdapat pada tag <body> juga dapat diatur, seperti isi teks
yang dapat diformat penulisannya, tabel yang dapat diatur merger selnya, dan
sebagainya.

E. DAFTAR PUSTAKA

_____.2014. Modul Ajar Praktikum Pemrograman Web Bab 1 HTML.Jurusan


Teknik Elektro FT.UM.
Fikri, Rijalul, dkk. 2005. Belajar Mengenal HTML. Yogyakarta: Andi Offset

Anda mungkin juga menyukai