Laporan Pemrograman Berbasis Web Modul 2

MODUL II
KOMPONEN HTML LANJUT
LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web
yang Dibimbing oleh Bapak Didik Dwi Prasetya S.T., M.T.

Oleh:
Ni’matu Rohmah

Nama :
NIM

:

150535602460

TI 2015 Offering B

UNIVERSITAS NEGERI MALANG
FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO
September 2016

KOMPONEN HTML LANJUT
A. KOMPETENSI DASAR
Memahami komponen-komponen HTML lanjutan.
Memahami kegunaan dan cara penerapan komponen HTML.
Mampu memanfaatkan komponen-komponen HTML untuk membuat halaman web.

B. TUGAS PRAKTIKUM
Syntax tugaspraktikum.html:



Tabel-Perbandingan Fitur

PERBANDINGAN FITUR


No
 
Fitur
 
Enterprise
 
Pro
Free






1

Garansi seumur hidup
X
-
-


2
Multiuser
X
-
-


3
Update otomatis
X
X
-

4
Cetak Laporan
X
X
-


5
Notifikasi error
X
X
X





6
Ubah tema

X
X
X


7
Try ikon
X
X
X








Tampilan

Penjelasan


Untuk membuat perbandingan fitur seperti diatas maka hal yang dilakukan pertama
kali adalah membuat table dengan sintaks yang berarti lebar tabel adalah 470, tinggi 401, dan tanpa border.



Baris berikutnya untuk menampilkan judul “PERBANDINGAN FITUR”
menggunakan colspan (penggabungan kolom kesamping sejumlah =8) , style
border dengan style border-bottom :#000000 solid (jenis border) yang artinya
border hanya bagian bawah, align rata tengah(center) dan warna = black dan jenis
font “time new roman” dan ukuran =4, judul ditulis dengan tebal ditandai dengan
tag



Baris berikutnya adalah kolom No dengan lebar 31, align rata tengah dengan
strong



Kolom berikutnya dengan lebar 0, dan menggabungkan baris sejumlah 10 dan
border-left:#000000 solid thin;"> (pengganti katakter spasi) dimana
hanya border kiri



Kolom Fitur memiliki lebar 208 dengan align center dan strong



Kolom berikutnya menggabungkan baris sejumlah 10, border-left:#000000 solid
thin;padding-left:-5px;" width="0">  (pengganti katakter spasi) dimana
hanya border kiri dengan jarak border ke isi 5px.



Kolom Enterprise memiliki lebar 92 dengan align center dan strong



Kolom berikutnya lebar 0, menggabungkan baris sejumlah 10, borderleft:#000000 solid thin;padding-left:-5px;" width="0">  (pengganti
katakter spasi) dimana hanya border kiri dengan jarak border ke isi 5px



Kolom Pro memiliki ketebalan 0 dengan align center dan strong



Kolom Free memiliki ketebalan 0 dengan align center dan strong



Baris berikutnya adalah baris dengan kolom colspan="8" style="bordertop:#000000 solid;" dimana border yang terlihat hanya atas saja



Masukkan data pada kolom namun setelah sel Notifikasi error dan Try ikon

colspan="8" style="border-top:#000000 solid;” dimana hanya atas yang
dikasih border.

C. STUDI KASUS
Syntaks studikasus.html(Home):






Home-Ni'matu Rohmah

Selamat Datang di Web Pribadi
Ni'matu Rohmah




Login




Profil




Puisi







@2016 Created By : Ni'matu Rohmah




Tampilan

Penjelasan


Sintaks html diatas digunakan untuk membuat halaman home web pribadi yang
memiliki gambar banner dan dapat diklik, memiliki pilihan menu seperti login, profil,
dan puisi dengan menggunakan fungsi button. Dan 3 link gambar yang akan dapat
diakses kehalaman lainnya.



Tampilan ini memanfaatkan fungsi penggunaan tabel dalam html.



mendefinisikan informasi tipe dokumen dalam html5



adalah atribut yang menyatakan pada browser bahwa dokumen
yang digunakan adalah html dan menggunakan bahasa yaitu inggris.



color="white" dan jenis fontnya adalah face=
"facebook latter faces;">



berfungsi mendefinisikan sel, digunakan mendeklarasikan bahwa yang
dimasukkan adalah tulisan



menyatakan link halaman yang akan dituju apabila
button diklik. Button berfungsi melakukan klik dan tampilan padat yang berframe







Untuk

membuat

link

gambar

menggunakan

tag

html

yaitu

yang menampilan kalimat saat gambar disorot.