Laporan Praktikum Pemrograman Web Modul 1

7/25/2019 Laporan Praktikum Pemrograman Web Modul 1

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

(12053330!"5#

S1 PTI $12 O%% D

FAKULTAS TEKNIK

&URUSAN TEKNIK ELEKTRO

PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA

UNI'ERSITAS NEGERI MALANG

&ANUARI 201


2/25

A. TU&UAN

- Memahami struktur dasar dokumen HTML dan HTML5

- Mampu membuat dokumen HTML yang baik dan benar

- Mampu memanfaatkan elemenelemen dasar untuk menampilkan informasi

B. LATIHAN

Latihan !

Berikut adalah pengenalan tentang struktur dasar dalam pembuatan web statis

yang menggunakan HTML" Terdapat tag wa#ib yang harus disertakan dalam

pembuatan dokumen HTML yaitu $html% dan diakhiri dengan tag penutup

$&html%

Latihan '

Berikut merupakan pengenalan terhadap penulisan kepala teks yang

menggunakan heading" Besar ke(ilnya tulisan dipengaruhi oleh ukuran heading

mulai dari yang terbesar h! sampai yang terke(il h)"


3/25

Latihan *

Berikut format elemen heading untuk mengatur posisi teks dengan

menggunakan atribut align"


4/25

Latihan +

Untuk membuat bentuk paragraf pada penulisan HTML menggunakan tag $p%

yang tertera pada (ontoh berikut"


5/25

Latihan 5

Dalam penulisan paragraf di HTML dapat diatur bentuk rata tengah, kanan, kiri

maupun rata kanan dan kiri seperti penulisan berikut,

Latihan )

Pada pembuatan baris baru atau yang lebih dikenal sebagai break dalam suatu

paragraf, menggunakan tag $br%""$&br% karena pada penulisan HTML masukan

enter tidak diba(a sebagai pembuatan baris baru"


6/25

Latihan -

Pada HTML #uga disediakan se#umlah elemen untuk menampilkan font yang

berhuruf tebal, miring, garis bawah dan lainnya" Untuk men(etak tag $p% se(ara

default akan diba(a sebagai paragraf, untuk menghindari hal itu maka

dibutuhkan entitas seperti .ltd dan .gt untuk menampilkannya"


7/25

Latihan /

Untuk membuat karakter khusus seperti penulisan mata uang asing ataupun(opyright dan sebagainya memerlukan kode khusus atau entitas untuk

menampilkannya seperti pada (ontoh berikut"

Latihan 0

Membuat garis hori1ontal pada HTML dipresentasikan menggunakan tag $hr&%

yang dapat digunakan sebagai garis pembatas dalam penulisan teks"


8/25

Latihan !2

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%" 3etiap list item ditulis dengan $li% seperti pada (ontoh (oding

berikut"


9/25

Latihan !!


10/25

HTML #uga menyediakan pewarnaan pada ba(kground baik menggunakan tipe

warna ataupun nilai heksa seperti ditun#ukan pada tag $body bg(olor4a6ua%"

Latihan !'

Pada HTML bisa #uga untuk menyertakan gambar dengan menggunakan tag

$img sr(4namafile&% dengan syarat file gambar berada pada satu direktori

folder halaman web" 7ambar #uga dapat diatur letak posisinya"


11/25


12/25

Latihan !+

Latihan berikut merupakan lan#utan dari latihan !* sebagai imbas dari klik link

yang bisa digunakan untuk meru#uk pada laman HTML lainnya"

Latihan !5

Pada latihan ini menggunakan atribut link sebagai peru#ukan link yang di klik,

untuk membuka link yang dilihat dibuka di #endela browser yang sama atau


13/25

tidak" 9ika membuka link tidak pada tabendela yang sama maka menggunakan

(oding seperti berikut"

Latihan !)

Tautan link #uga dapat diimplementasikan pada halaman HTML yang serupa

menggunakan link internal seperti (ontoh berikut" Tu#uannya #ika dalam suatu

web terdapat banyak konten maka kita tidak perlu harus menarik s(roll ke bawah

melainkan dengan mengklik link internal tersebut"


14/25

9ika diklik pada kesimpulan maka se(ara otomatis akan menu#u pada konten

yang membahas kesimpulan


15/25

Latihan !-

Link #uga bisa merupakan sebuah email dengan menggunakan prefi: mailto,

sehingga langsung meru#uk pada tautan email yang sudah tertaut dengan link

yang dibuat seperti pada (ontoh berikut"

Latihan !/

Link bisa dikaitkan melalui gambar seperti berikut, sehingga dengan kita

mengklik gambar maka akan tertu#u kepada link terkait" ;ode link gambar

direpresentasikan pada (oding berikut"


16/25

Latihan !0

Dalam HTML #uga dapat men(iptakan sebuah table seperti halnya pada

pengolah kata atau angka" Menggunakan tag $table%


17/25

Latihan '2

Tabel dalam HTML #uga dapat diatur #eda spasinya maupun #eda antar teks

dengan border table" =tribut yang digunakan untuk mengubah yaitu align untuk

mengatur posisi table, (ellspa(ing untuk mengatur ukuran spasi, (ellpadding

untuk mengatur spasi antara border sel dengan isi atau data tabelnya"


18/25

Latihan '!

Pemformatan table #uga memungkinkan kita untuk mengatur lebar table

menggunakan width yang dimasukan dalam table header untuk mengatur lebar

sesuai dengan kebutuhan


19/25

Latihan ''

=da kalanya ketika kita ingin mengedit table dengan menggabungkan sel antara

kolom dengan baris" Pada HTML #uga menyediakan perintah rowspan >merger

baris? dan (olspan >merger kolom?" Pengelompokan


20/25


21/25

C. STUDI KASUS

!" Membuat web sederhana yang berisi @A tentang Biodata, iwayat Pendidikan,

iwayat Crganisasi dan Prestasi yang pernah diraih dengan menggunakan

format dan list- @oding HTML


22/25

- Tampilan Web


23/25

- ;eterangan

Web diatas merupakan implementasi dari kode dasar HTML atau web sederhana

yang bersifat statis" Pada sisi atas dan bawah menggunakan format garis

hori1ontal" Pada penulisan teks baik #udul maupun isi menggunakan format

penulisan heading" Pada riwayat pendidikan digunakan table sebagai bentuk

isian tingkat pendidikan" 3edangkan pada riwayat organisasi dan prestasi

menggunakan unordered list bertipe bullet dan s6uare" Pada biodata terdapat

pengaplikasian atribut mailto pada alamat email dan untuk atribut link terdapat

pada footer web yang mengarah pada pembukaan link di #endela&tab baru"

'" Membuat Tabel yang telah ditentukan dengan penggunaan owspan dan

@olspan

- @oding HTML


24/25

- Tampilan Web

- ;eterangan

Untuk membuat format table sesuai diatas, terlebih dahulu kita membuat atau

mengalokasikan + baris dan + kolom" Berikutnya mulai menggunakan

pemformatan (olspan dan rowspan sesuai bentuk table dengan (ara berikut" Pada


25/25

baris pertama, kolom ke' di (olspan dengan kolom ke*" Pada kolom pertama

baris ke! di rowspan dengan baris ke', begitu pula pada kolom keempat baris

ke! #uga di rowspan dengan baris ke'" 3edangkan pada baris keempat, kolom

ke!,' dan * selnya di (olspan lalu penulisan teksnya diformat rata kanan

menggunakan align"

D. KESIMPULAN

HTML >Hyperte:t Markup Language? merupakan dokumen standar yang

digunakan untuk mendesain web khususnya web yang bersifat statis"

3etiap dokumen HTML wa#ib diawali dengan tag $html% dan diakhiri dengan

tag tutup $&html%" Pada dokumen HTML #uga menyertakan $head% sebagai

pernyataan informasi, $title% sebagai #udul pada web browser, $body% untuk

melingkupi teks yang terdapat pada HTML"

Pada tag $body%

Laporan Praktikum Pemrograman Web Modul 1

Documents

Transcript of Laporan Praktikum Pemrograman Web Modul 1