laporan praktikum pemrograman web modul 1
TRANSCRIPT
-
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
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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)"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
3/25
Latihan *
Berikut format elemen heading untuk mengatur posisi teks dengan
menggunakan atribut align"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
4/25
Latihan +
Untuk membuat bentuk paragraf pada penulisan HTML menggunakan tag $p%
yang tertera pada (ontoh berikut"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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/2019 Laporan Praktikum Pemrograman Web Modul 1
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"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
9/25
Latihan !!
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
11/25
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
14/25
9ika diklik pada kesimpulan maka se(ara otomatis akan menu#u pada konten
yang membahas kesimpulan
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
16/25
Latihan !0
Dalam HTML #uga dapat men(iptakan sebuah table seperti halnya pada
pengolah kata atau angka" Menggunakan tag $table%
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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"
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
20/25
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
22/25
- Tampilan Web
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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
-
7/25/2019 Laporan Praktikum Pemrograman Web Modul 1
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%