(S1TI17A) Adityaz Shofyan - 170535629567 - Modul1

MODUL I
HTML (Hypertext Markup Language)

LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB
Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web

yang Dibimbing oleh Kartika Candra Kirana, S.Pd., M.Kom.
Oleh:
Adityaz Shofyan Fajri Al Hafiizh
170535629567
S1 TEKNIK INFORMATIKA OFF A
UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
SEPTEMBER 2018
HTML (Hypertext Markup Language)
A. KOMPETENSI DASAR
B. STUDI KASUS
Syntaks StudiKasus1.html:
<!DOCTYPE html>
<html>
<head>
<title>tugas praktikum</title>
<body background="abcd.jpg">
<h1> Halaman Web Sederhana</h1>
<hr color="blue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incidunt ut labore et dolore magna aliqua.
ut enim ad minim venian, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.
laboris
laboris
<br/>
laboris
laboris
laboris
<hr color="red">
<hr color="blue"; align="right" width="50%"/><br/>
<p align="right" />
<img src="download.jpg"; border="5px"/>
</body>
</html>
Output:
Penjelasan:
Program diatas berjudul tugas praktikum, dimana memiliki head dan body, head
hanya berisikan tentang judul web tersebut, yaitu tugas praktikum, sedangkan pada body
terdapat heading yang bertuliskan dengan “halaman web sederhana”, dimana heading
tersebut menggunakan tag <h6> yang berfungsi sebagai besar kecilnya ukuran font dari
heading tersebut, semakin kecil tag <h n> maka semakin kecil juga ukuran font dari
heading tersebut.
Pada bagian body juga terdapat garis horizontal yang terdiri dari dua warna,yaitu
merah dan biru dengan tag <hr/> kebanyakan browser me-render dngan visualisasi yang
berbeda, namun hakekatnya menampilkan sebuah garis horizontal, dan didalam tag juga
terdapat kode color yang berfungsi untuk mewarnai dari garis horizontal tersebut
sehingga garis akan berwarna sesuai kode, tag <br/> digunakan untuk membuat mebuat
garis baru setalah text dari body.
Selanjutnya terdapat gambar yang memiliki border dan berposisi dibagian kanan dari
web, hal ini disebabkan karena ada tag <img src="download.jpg"; border="5px"/>,
“img scr=kode HTML” digunakan untuk source dari gambar yang
digunakan,dan kode ”border” digunakan untuk menampilkan border atau
bingkai dari gambar yang digunakan, tambahkan tag <p align=”right”>
sebelum tag gambar agar gambar rata kanan atau berada disebelah kanan
dari web.
2. Buatlah 1 halaman web yang menerapkan semua tag pada modul 1 sesuai kreasi kalian
Output (Browser Windows) :
Output (Browser Android) :
Syntaks StudiKasus2.html:
<!DOCTYPE html>
<html>
<head>
<title> Studi Kasus 2
</title>
<header style ="background-color:rgba(253, 215, 3, 0.6); border:5px
black solid">
<h1 align="center"> Profil Jonatan Christie, Atlet Bulutangkis
Tunggal Putra Indonesia Peraih Emas Asian Games 2018</h>
<h5 align="center">
<font color="grey">Kamis, 30 Agustus 2018 </font> </h5>
<hr color="red">
<br/>
</header>
<body background="background.jpg">
<br/>
<p align="center">
<img src="assdd.jpg" border="5px"/> </p>
</body>
<footer style = "background-color:rgba(255,255,0,0.3);border:2px

black solid">
<p align="justify">
Jonatan Christie, atlet bulutangkis tunggal putra Indonesia
berhasil berprestasi dalam gelaran Asian Games 2018. Jonatan Christie
berhasil mempersembahkan medali emas ke-23 bagi kontingen Indonesia
pada gelaran Asian Games 2018.
Keping emas tersebut dipersembahkan pemain yang kerap disapa Jojo itu
di kategori perorangan sektor tunggal putra bulu tangkis.Jonatan
Christie sukses menjadi kampiun usai mengalahkan wakil Taiwan, Chou
Tien Chen, lewat permainan rubber game dengan skor 21-18, 20-22, 21-
15, .Dilansir dari bolasport.com, Kiprah Jonatan sebagai seorang
pebulu tangkis dimulai saat dirinya menjadi salah satu anggota klub
yang ada di Jakarta, PB Tangkas.
<p>
Setelah berlatih di PB Tangkas, Jonatan pun mampu memenangkan
gelar senior pertamanya di usia 15 tahun pada turnamen Indonesia
International Challenge 2013.Kala itu, Jonatan Christie berhasil
mengandaskan harapan rekan senegaranya, Alamsyah Yunus, dua gim
langsung dengan skor 21-17, 21-10.Perlahan tapi pasti, Jonatan
semakin menunjukkan taringnya di sektor tunggal putra.Sederet
prestasi pun ditorehkan seperti menjadi pemenang Swiss International
Challenge 2014, runner-up International Indonesia Challenge 2014,
runner-up Thailand Open 2017, runner-up Korea Open 2017, dan New
Zealand Open 2018.
<p>
Prestasi membanggakan Jonatan yang paling berkesan selanjutnya
dicatat kala SEA Games 2017.Bermain di Kuala Lumpur, Malaysia,
Jonatan Christie berhasil merebut medali emas kategori perorangan
tunggal putra.
<p>
Ini menjadi kemenangan pertama Jonatan di ajang multi-event se-
Asia Tenggara. Satu tahun berselang, pemain berusia 20 tahun itu
kembali memenangi ajang multi-event yang skalanya lebih besar yakni
Asian Games 2018.Tampil di hadapan publik sendiri, Jonatan berhasil
membuat penonton mendengungkan namanya karena berhasil mencatatkan
sejarah.
<p>
Selain di nomor perorangan, Jojo juga beberapa kali tampil di
nomor beregu seperti Piala Sudirman 2015, beregu putra SEA Games
2017, Kejuaraan Beregu Asia 2016 dan 2018, Piala serta Piala Thomas
2016 dan 2018.
<p>
Profil Jonatan Christie :
<ul>
<li>Nama : Jonatan Christie</li>
<li>Tempat Tanggal Lahir: 15 September 1997, Jakarta</li>
<li>Tinggi : 1,79 m</li>
<li>Berat : 75 kg</li>
<li>Saudara kandung : Ivan Christie</li>
<li>Orang Tua : Andreas Adi Siswa, Marlanti
Djaja</li>
<pre>
---------------------------------------------------------------
--------
| PRESTASI YANG PERNAH DIRAIH JOJO
|
|--------------------------------------------------------------
--------
| peraih trofi kemenangan kejuaraan tingkat DKI
Jakarta,nasional |
| peraih trofi kemenangan kejuaraan tingkat DKI
Jakarta,internasional |
| peraih medali emas olimpiade pelajar sekolah dasar se asia
tenggara |
| juara asia u-15 di ichiba,jepang
|
| juara runner up djarum sirkuit nasional bali open
|
| juara asean school games
|
| peraih medali perak beregu BWF world junior championship
|
---------------------------------------------------------------
--------
</pre>
<p align="right">
<em><u><font color="navy">&copy Adityaz Shofyan Fajri Al
Hafiizh</u></em>
</footer>
</html>
Penjelasan :
Judul dari program ini adalah studi kasus 2, pada program ini menjelaskan tentang
biodata juara Asian game dari bidang bulu tangkis tunggal, pada awal halaman teradapat
header yang berisi judul dari halaman web, diuliskan dengan tag head dan tag garis
horizontal berwarna merah serta menggunkan background berwana oranye dengan
pengauran rgba agar background sedikit transparent, hal ini dilkukan untuk
membedakan antara header body dan footer. Selanjutnya terdapat gambar dari seorang
jojo yang dikelilingi oleh border solid berwarna hitam, posisi gambar berada di tengah-
tengah halaman web.
Setelah itu ada terdapat gambar dari seorang jojo yang dikelilingi oleh border, posisi
gambar berada di tengah halaman web yang terletak pada body, body memiliki
background dengan menambahkan “background=”kode HTML” setelah tag body.
pada bagian footer ada beberapa tag yang digunakan, antara lain unorder list untuk
menampilkan biodata jojo, tag pre untuk menampilkan prestasi yang pernah diraih oleh
jojo. Dan pada bagian kanan bawah web terdapat nama penulis yang dituliskan dengan
huruf miring berwarna merah serta dengan symbol copyright.
C. KESIMPULAN
Setelah mengerjakan tugas latihan dan tugas rumah, dapat disimpulkan bahwa HTML
mudah untuk dipelajari, HTML tidak membutuhkan aplikasi untuk membangun dan
menjalankan syntak. Dengan mengguakan notepad kita bisa membuat halaman web
sederhana, pembuatan halaman web menggunakan HTML terbilang cukup mudah,
karena Bahasa yang digunakan HTML mirip dengan Bahasa pemrograman yang telah
dipelajari sebelumnya.
Ada beberapa hal yang harus kita perhatikan untuk membuat halaman web sederahana
dari HTML, seperti mengetahui fungsi-fungsi tag yang ada, memahami apa yang akan
kita buat, merencanakannya, dan mulai untuk mebuat syntaksnya,
D. DAFTAR PUSTAKA
 Modul 1 Pemrograma Web
 Asisten Dosen Pemrograman Web

(S1TI17A) Adityaz Shofyan - 170535629567 - Modul1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

(S1TI17A) Adityaz Shofyan - 170535629567 - Modul1

Uploaded by

Copyright:

Available Formats

MODUL I

HTML (Hypertext Markup Language)

Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web

UNIVERSITAS NEGERI MALANG

<footer style = "background-color:rgba(255,255,0,0.3);border:2px

You might also like