LAPORAN PRAKTIKUM

PEMROGRAMAN WEB CLIENT

PERTEMUAN-2

Disusun oleh :

Nama : Ade Priyatna Noor

NIM : 195410174
Jurusan : Teknik Informatika

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOM YOGYAKARTA
2020/2021
 “TAG DASAR HTML”
A. PEMBAHASAN LISTING
PRAKTIK
1. Buka editor (notepad ++ atau notepad)
2. Ketikkan script html berikut ini, simpan dengan nama ade.html

3. Pada bagian tulisan semester genap , semester ganjil tampilan hasil di browser tidak sama
dengan di editor. Mengapa? Karena model spasi atau indent pada notepad tidak akan
berpengaruh terhadap hasil pada hasil tampilan file html tadi ketika dijalankan di browser kecuali
dengan menggunakan sintaks/kodingan.

4. Edit script pada baris no.10 . Tambahkan tag <br> pada akhir baris.

5. hasilnya sudah sama seperti yang ada di kodingan html tadi, dengan menambahkan tag <br>
pada baris ke sepuluh, maka akan membuat kalimat yang ada pada baris dibawahnya ter-break
atau turun satu baris sama seperti fungsi enter.
Praktik 2: Membuat List Tanpa Nomor.
1. Gunakan kembali file ade.html, lalu Save as dengan nama “tanpaNomor.html”.
2. edit mulai baris ke-10 dengan kode program seperti di bawah ini

4
Perintah yang digunakan sama dengan praktik sebelumnya. Hanya ada beberapa tambahan tag,
yaitu <UL> dan <Li> yang mana perintah tersebut merupakan fitur untuk memunculkan
Bullet/Numbering pada tampilan html kita.

Praktik 3: Membuat List Bernomor.

1. Gunakan kembali file home.html, lalu Save as dengan nama “denganNomor.html”.
2. edit mulai baris ke-10 dengan kode program seperti di bawah ini
3. edit baris 10 pada bagian “type”. Ubah type=”1” menjadi type=”A” .

4. Ubah type=”1” menjadi type romawi

Masih dengan jenis tampilan yang sama dengan praktik sebelumnya dengan sedikit
perbedaan dimana Semester Genap dan Ganjil memiliki point di dalamnya yaitu tahun ajaran.
perintah baru yang digunakan yaitu Tag <OL> yang memiliki fungsi yang sama dengan <UL> tadi
yaitu memberi Numbering. Kalau <UL> memberi Bullets, sedangkan <OL> memberi numbering
dan kelebihan <OL> yaitu Type Numberingnnya dapat diatur, seperti type “ A “ atau “ 1” Atau
angka romawi.
Praktik 4: Membuat List Penomoran Gabungan.
1. Gunakan kembali file “denganNomor.html, lalu Save as dengan nama
“gabungan.html”.
2. Edit mulai baris ke-10 dengan kode program seperti di bawah ini

Gambar di atas merupakan gabungan dari <OL> Dan <UL>. Sama dengan HTML sebelumnya

Praktik 5 : Link
1. Buat file baru. Ketikkan program berikut

Perintah baru yang digunakan yaitu <a href=”nama htmlnya”> lalu teks untuk di klik. Contoh :
“< a href=”Gabungan.html”> Pilihan Semester </a> “ Sehingga jika kita mengklik pada teks Pilihan
semester, maka akan membawa kita ke html gabungan pada praktik 4.

2. Buat file baru. Ketikkan program berikut

Sama dengan yang sebelumnya, kita bisa juga memasukkan link suatu website. Dan ketika kira
mengklik pada “Kunjungi Kampus Kami” maka akan membawa kita ke website Akakom seperti
gambar di bawah.

LATIHAN
1. Tuliskan kode program untuk menghasilkan tampilan seperti berikut

Setelah membuat beberapa praktik sebelumnya, kita dapat mengaplikasikanya pada hal
seperti ini. Perintah – perintah tag yang digunakan merupakan gabungan dari praktik-
praktik yang kita buat sebelumnya.

B. PEMBHASAN TUGAS
 - membuat jadwal kuliah senin sampai jumat

Tampilan Web :

Program html di atas adalah program untuk membuat tampilan website jadwal kuliah.
Perintah baru yang digunakan :
- <table> : untuk membuat tabel kotak, <width> dan <height> untuk mengatur ukuran p x l,
<align> untuk mengatur rata tulisannya, <border> untuk memberi bingkai pada tabel(dalam
program di atas terlihat border=0 sehingga bingkai tidak muncul. <tr> untuk membuat baris
pada tabel, <td> untuk membuat kolom pada tabel tetapi baris dan kolom tidak terlihat
karean border di set 0. <Colspan> untuk pengaturan merge, bg color untuk warna
background, <center> untuk rata tengah, <font face> untuk jenis tulisan/font style, <h1>
untuk heading ke 1( ukuran tulisan ke 1). <a href> untuk hyperlink(membawa kita ke alamat
yang ada pada hyperlink tersebut/untuk mneghubungkan website atau menu-menu yang
lain)
C. KESIMPULAN
 HTML (HyperText Markup Language) merupakan building block web paling dasar. Ini
memberikan arti dan struktur konten web. Teknologi-teknologi lainnya disamping HTML
umumnya digunakan untuk menggambarkan penampilan/gambaran (CSS) atau
fungsionalitas/tingkah laku (JavaScript).

"Hypertext" merujuk ke link yang menghubungkan halaman web satu dengan lainnya,
baik dalam satu situs maupun antar situs web. Dengan mengunggah konten ke internet dan
menghubungkannya ke halaman yang dibuat oleh orang lain, Anda menjadi pertisipasi aktif
di World Wide Web.

HTML menggunakan "markup" untuk anotasi teks, gambar, dan konten lainnya untuk
ditampilkan dalam peramban Web. Markip HTML terdapat "elements" khusus
seperti <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside
>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> 
dan masih banyak lagi.

Elemen HTML dibedakan dari teks lain dalam dokumen dengan "tags", yang terdiri
dari nama elemen yang dikelilingi oleh "<" dan ">". Nama elemen dalam tag itu insensitif.
Yakni, dapat ditulis dengan huruf besar, huruf kecil, atau gabungan. Contohnya
tag <title> dapat ditulis sebagai <Title>, <TITLE>, atau dengan cara lainnya.