RangkumanPraktikum (PEMWEB)

NAMA : Ricky Riotaro
Kelas : RPL 4C
Matkul : Pemrograman Web
TUGAS RANGKUMAN PRAKTIKUM
TUGAS PRAKTIKUM 1 MODUL 2

1. Membuat Paragraph
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <title>
6. Membuat Paragraph - RICKY RIOTARO
7. </title>
8. </head>
9. <body>
10. <p>Paragraph satu</p>
11. <p>Paragraph dua</p>
12. <p>Paragraph tiga</p>
13. <p>Paragraph empat</p>
14. <p>Paragraph lima</p><p>Paragraph enam</p>
15. </body>
16. </html>
17. Posisi Paragraph
18. <!DOCTYPE html>
19. <html lang="en">
20. <head>
21. <title>Membuat Posisi Paragraph - RICKY RIOTARO.</title>
22. </head>
23. <body>
24. <h2>Paragraph mempunyai beberapa pengertian</h2>
25. <p align="left">A. Paragraph adalah karangan mini. Artinya semua unsur karanga
n yang panjang ada dalam paragraph.</p>
26. <p align="center">B. Paragraph adalah satuan bahasa yang terdiri beberapa kali
mat yang tersusun secara runtut, logis, dalam satu kesatuan ide yang tersusun leng
kap, utuh dan padu. </p>
27. <p align="right">C. Paragraph adalah bagian dari suatu karangan yang terdiri d
ari sejumlah kalimat yang mengungkapkan satuan informasi dengan pikiran utama<br>
sebagai pengendaliannya dan pikiran penjelas sebagai pendukungnya.</p>
28. </body>
29. </html>
30. Blockquote
31. <!DOCTYPE html>
33. <title>RICKY RIOTARO</title>
34. <body>
35. <hl>Kejahatan di Internet</h1>
36. <p>
37. Jakarta - Belakangan ini banyak sekali kejahatan yang terjadi terkait dengan p
engguna internet.
38. Disinyalir kerugian yang dialami oleh para pengguna internet mencapai US$ 8,5
miliar (sekitar Rp 7,7 triliun) selama dua tahun terakhir ini.
39. Penyebabnya antara lain karena virus, spyware dan phising.
40. Angka tersebut diungkapkan dalam laporan tahunan state of The Net yang dibuat
oleh Consumer Report,
41. Majalah pemerhati konsumen di Amerika Serikat. Laporan itu Berdasarkian peneli
tian yang dilakukan oleh Consumer Report National Research Center yang melibatkan
2.071 responden online.
42. </p>
43. <blockquote>
44. Data lain dalam laporan itu menyebutkan, satu dari enam pengguna kemungkinan akan
menjadi korban kejahatan cyber. Peluang ini turun dari 1:4 pada tahun 2007.
45. Kemudian, sekitar 19% responden mengatakan bahwa mereka tidak mempunyai program an
tivirus di komputernya. Sedangkan 75% lainnya tidak mempunyai anti-phising. Demiki
an dikutip detikNET dari techWeb, Rabu (6/8/2008).
46. </blockquote>
47. </body>
48. </html>
49. Divider
50. <!DOCTYPE html>
51. <head>
52. <title>Penggunaan Divider - RICKY RIOTARO</title>
53. </head>
54. <body>
55. <div class="header"></div>
56. <div class="menu">
57. <a href="">Home</a>
58. <a href="">Product</a>
59. <a href="">Service</a>
60. <a href="">Contact</a>
61. </div>
62. <div class="article">
63. <h3>Tittle</h3>
64. <p>Paragraph</p>
65. </div>
66. <div class="footer"></div>
67.
68. </body>
69. </html>
70. Heading
71. <!DOCTYPE html>
72. <html>
73. <tittle>Heading - RICKY RIOTARO</tittle>
74. <head>
75. <h1>Heading 1</h1>
81. </html>
82. Style
83. <!DOCTYPE html>
84. <html>
85. <tittle>Style - RICKY RIOTARO</tittle>
86. <body>
87. <p> ini tulisan Normal</p>
88. <p style="color:red;">text warna Merah</p>
89. <p style="color:blue;">text warna biru</p>
90. <p style="font-size:50px;">Text Ukuran Besar</p>
91. </body>
92. </html>
93. Warna Latar Belakang
94. <!DOCTYPE html>
95. <html>
96. <tittle>LatarBelakangTulisan - RICKY RIOTARO</tittle>
97. <body style="background-color:gray;">
98. <h1 style="backgrond-color:powderblue;">Judul Halaman</h1>
99. <p style="backgrond-color:tomato;">Ini sebuah paragraph.</p>
100. <h1 style="color:blue;">Mewarnai Text Judul</h1>
101. <p style="color:red;">Mewarnai Text paragraph.</p>
102. </body>
103. </html>
104. Warna
105. <!DOCTYPE html>
106. <html>
107. <tittle>Warna - RICKY RIOTARO</tittle>
108. <body>
109. <h2>Warna Text</h2>
110. <pre>
111. <font color="red">teks warna merah.</font>
112. <font color="blue">teks warna biru.</font>
113. <font color="green">teks warna hijau.</font>
114. <font color="yellow">teks warna kuning.</font>
115. <font color="violet">teks warna ungu.</font>
116. </body>
117. </html>
118. Warna Menggunakan Heksadesimal
121. <tittle>WarnaHeksadesimal - RICKY RIOTARO</tittle>
122. <h2>Memberi warna Teks Dengan Kode Heksadesimal</h2>
123. <pre>
124. <font color="#FF0000">teks warna merah.</font>
125. <font color="#0080FF">teks warna biru.</font>
126. <font color="#00FF00">teks warna hijau.</font>
127. <font color="#FFFF00">teks warna kuning.</font>
128. <font color="#8080FF">teks warna ungu.</font>
129. </html>
130. Warna Latar Belakang

132. <html>
133. <tittle>WarnaLatarBelakang - RICKY RIOTARO</tittle>
134. <body>
135. <body bgcolor="">
136. <p>Berikut adalah contoh membuat latar belakang dengan warna</p>
137. <p>Warna adalah spektrum tertentu yang terdapat di dalam suatu cahaya s
empurna(Berwarna putih).
138. identitas suatu warna ditentukan panjang gelombang cahaya tersebut.
Sebagai contoh warna biru memiliki panjang gelombang 460 nanometer.
139. </p>
140. </html>
TUGAS PRAKTIKUM 2 KONTEN BERITA SEDERHANA
Tugas Website Joki Online
Codingan :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tugas</title>
</head>
<body>
<h1 style="color: rgb(197, 138, 0);">Joki Game Online</h1>
<img src="img/joki2.jpg" width="500" height="300" alt="">
<hr>
<p><b>Jakarta</b>- Joki <i style="color: red;">Game Online</i> semakin subur
sejak masa wabah <b
style="color: green;">COVID-19</b> muncul. Masa pandemi yang membuat
orang harus berdiam diri dirumah
ternyata membuat bertambahnya pemain <i>game
online</i>di <i>smartphone.</i> Pangsa pasar joki game online pun se
makin bertambah.</p>
<p>Haikal dan Segaf misalnya, dua remaja pemilik akun Instagram @jokimlbb_ja
karta mengaku kebanjiran klien selama
masa pandemi <b>COVID-19</b>
Biasanya per hari klien yang masuk hanya 1-2 orang. Tapi saat pandemi me
lonjak menjadi 15 orang bahkan sempat
mencapai 38 klien dalam 1 hari.</p>
<p>Kebanyakan dari kliennya adalah anak-anak hingga remaja. Tapi yang mengej
utkan ternyata ada juga seorang yang
diduga ustadz yang menggunakan jasa mereka.</p>
<p><i>"Sebenarnya kita nggak tahu profil klien kita, karena kita nggak nanya
juga. Tapi ada klien foto profilnya
pakai pakaian ustadz. Terus
dia sering unggah story lagi ceramah," kata mereka saat berbincang d
engan detikcom.
</i></p>
<hr>
<p>Oleh : <b>Ricky Riotaro</b></p>
<p><b>NIM : 6304211412 <br> Teknik Informatika</b></p>
</body>
</html>
Hasil :
TUGAS PRAKTIKUM 3 MEMBUAT LIST
Latihan Modul 3
TUGAS PRAKTIKUM 4 MODIFIKASI TABEL
Tugas Website Joki Online
Codingan :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas</title>
</head>
<body>
<h1 style="color: rgb(197, 138, 0);">Joki Game Online</h1>
<img src="img/joki2.jpg" width="500" height="300" alt="">
<hr>
<p><b>Jakarta</b>- Joki <i style="color: red;">Game Online</i> semakin subur
sejak masa wabah <b
style="color: green;">COVID-19</b> muncul. Masa pandemi yang membuat
orang harus berdiam diri dirumah
ternyata membuat bertambahnya pemain <i>game
online</i>di <i>smartphone.</i> Pangsa pasar joki game online pun se
makin bertambah.</p>
<p>Haikal dan Segaf misalnya, dua remaja pemilik akun Instagram @jokimlbb_ja
karta mengaku kebanjiran klien selama
masa pandemi <b>COVID-19</b>
Biasanya per hari klien yang masuk hanya 1-2 orang. Tapi saat pandemi me
lonjak menjadi 15 orang bahkan sempat
mencapai 38 klien dalam 1 hari.</p>
<p>Kebanyakan dari kliennya adalah anak-anak hingga remaja. Tapi yang mengej
utkan ternyata ada juga seorang yang
diduga ustadz yang menggunakan jasa mereka.</p>
<p><i>"Sebenarnya kita nggak tahu profil klien kita, karena kita nggak nanya
juga. Tapi ada klien foto profilnya
pakai pakaian ustadz. Terus
dia sering unggah story lagi ceramah," kata mereka saat berbincang d
engan detikcom.
</i></p>
<hr>
<p>Oleh : <b>Ricky Riotaro</b></p>
<p><b>NIM : 6304211412 <br> Teknik Informatika</b></p>
</body>
</html>
Hasil :
TUGAS PRAKTIKUM 5 MEMBUAT FORM

Codingan :
<!DOCTYPE html>
<html lang="en">
<head>
<title>RICKY RIOTARO</title>
</head>
<body>
<center>
<h1>Form Data Mahasiswa</h1>
<hr>
<form action="/action_page.php" method="POST">
<table border=0>
<tr>
<td>Nama Anda</td>
<td>:</td>
<td>
<input type=text name=nama>
</td>
</tr>
<tr>
<td>Nim</td>
<td>:</td>
<td>
<input type=number name=nim>
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<input type=radio name="jkelamin" id="jkelamin" value="jkelamin">Pria<
/input>
<input type=radio name="jkelamin" id="jkelamin" value="jkelamin">Wanit
a</input>
</td>
</tr>
<tr>
<td>Hoby</td>
<td>:</td>
<td>
<input type=checkbox name="vehicle" id="vehicle" value="vehicle">Musik
</input><br>
</td>
</tr>
<tr>
<td></td>
<td>:</td>
<td>
<input type=checkbox name="vehicle" id="vehicle" value="vehicle">Jalan
</input><br>
</td>
</tr>
<tr>
<td></td>
<td>:</td>
<td>
<input type=checkbox name="vehicle" id="vehicle" value="vehicle">Baca<
/input><br>
</td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td>
<select name=agama>
<option name=agama>Islam
<option name=agama>Kristen
<option name=agama>Katolik
<option name=agama>Hindhu
<option name=agama>Budha
<option name=agama>Konghucu
</select>
</td>
</tr>
<tr>
<td>Asal Sekolah</td>
<td>:</td>
<td>
<input type=text name=asekolah size=40>
</td>
</tr>
<tr>
<td>Keterangan</td>
<td>:</td>
<td>
<textarea name="pesan" id="" cols="40" rows="8"></textarea>
</td>
</tr>
</table>
<hr>
<center>
<input type="submit" value="Kirim">
<input type="reset" name="reset" value="Reset">
</center>
</form>
</center>
</body>
</html>
Hasil :
TUGAS PRAKTIKUM 6 TAUTAN DAN HYPERLINK

1. Link 1
2. Link 2
3. Link 3
4. Link 4
TUGAS PRAKTIKUM 8 WEB FRAME
a. Index.html
<!DOCTYPE html>
<html>
<frameset rows="20%,*,20%">
<frame src="fatas.html"></frame>
<frameset cols="20%,*,20%">
<frame src="fkiri.html"></frame>
<frame src="tengah.html" name="tengah"></frame>
<frame src="fkanan.html"></frame>
</frameset>
<frame src="fbawah.html"></frame>
</frameset>
</html>
b. Fatas.html
<!DOCTYPE html>
<html style="background-color: orange">
<center>
<h1>MEMBUAT WEB MACAM-MACAM NAMA HEWAN</h1>
</center>
</html>
c. fkiri.html
<!DOCTYPE html>
<html style="background-color: pink">
<center>
<h4>MENU KIRI</h4>
<hr>
<a href="kuda.html" target="tengah">Kuda</a><p>
<hr>
<a href="katak.html" target="tengah">Katak</a><p>
<hr>
<a href="anjing.html" target="tengah">Anjing</a><p>
<hr>
</center>
</html>
d. tengah.html
<!DOCTYPE html>
<center>
<h3>HEWAN</h3>
<hr>
<img
src="https://1.bp.blogspot.com/-leDYEM5NkXM/XR4CKrmIUhI/AAAAAAAAU8g/
5scZgJ8Ns4QYnrokc1ZAXmVzLdb9DBxhQCLcBGAs/w1200-h630-p-k-no-nu/nama-nama
%2Bhewan.jpg" width="120" height="80">
<hr>
</center>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum
</p>
<hr>
<p>
Ricky
</p>
</html>
e. fkanan.html
<!DOCTYPE html>
<html style="background-color: cyan">
<center>
<h4>MENU KANAN</h4>
<hr>
<a href="gajah.html" target="tengah">Gajah</a><p>
<hr>
<a href="jerapah.html" target="tengah">Jerapah</a><p>
<hr>
<a href="monyet.html" target="tengah">Monyet</a><p>
<hr>
</center>
</html>
f. fbawah.html
<!DOCTYPE html>
<html style="background-color: blue">
<center>
<h4>Dibuat Menggunakan HTML Oleh Ricky Riotaro</h4>
</center>
</html>
g. contoh file kuda.html

<!DOCTYPE html>
<center>
<h3>KUDA</h3>
<hr>
<img src="https://cdn.idntimes.com/content-images/community/2022/10/akhal-teke-920x518-
a338ebee7963a0de04272cb76e2b071d-26a3c512a618454484108dedf8c086ea_600x400.jpg" width="120"
height="80">
<hr>
</center>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum
</p>
<hr>
<center>
<a href="tengah.html" target="tengah" style="background-color: red">Kembali</a>
</center>
</html>
TUGAS PRAKTIKUM 9 PENGENALAN CSS
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:2px;}
body {background-image:url("foto/bg.jpg");}
</style>
</head>
<h1 style="color:aliceblue">Menampilkan Latar Belakang dengan CSS</h1>
<hr>
</html>
<html>
<head>
<title>bentuk inline</title>
</head>
<body bgcolor="#ffffff">
<p id="cth1">kalimat ini tidak menggunakan format css</p>
<p id="cth2" style="font-size:20pt">kalimat ini menggunakan
format css untuk ukuran font sebesar 20 point</p>
<p id="cth3" style="font-size:15pt" >kalimat ini menggunakan
format css untuk ukuran font sebesar 15 point</p>
</body>
</html>
<html>
<head>
<title>bentuk penulisan secara embedded</title>
</head>
<style>
body {background:#ffffff color#ffff00; margin-left:0.5}
h1 {font-size:18pt; color:#ff0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">judul berukuran 18 point dan warna merah</h1>
<p id="cth2">tag p di format dengan ukuran 12, tipe font arial,
indensi 0.5 inch</p>
</body>
</html>
<html>
<head>
<title>bentuk penulisan secara embedded dengan class</title>
</head>
<style>
p.coklat {font-size:14pt; color:brown}
p.biru {font-size:15pt; color:blue}
</style>
<body>
<p id="cth1">bentuk standar tanpa style</p>
<p id="cth2" class="coklat">bentuk class coklat</p>
<p id="cth3" class="biru">bentuk class biru</p>
</body>
</html>
<html>
<head>
<title>bentuk linked style sheet</title>
<link rel=stylesheet href="linked.css" type="text/css">
</head>
<body>
<h1 id="cth1">judul berukuran 20 point dengan warna biru</h1>
<p id="cth2">tag p di format dengan ukuran 14, tipe font arial, indensi 0.5
inch</p>
<p id="cth3">latar belakang warna putih dengan margin 0,5 inch</p>
</body>
</html>
<html>
<head>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Belajar CSS</p>
<p>Paragrap ini menggunakan CSS.</p>
</body>
</html>a
<html>
<head>
#paragrap1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="paragrap1">Belajar CSS!</p>
<p>Tulisan ini tidak menggunakan style yang telah dibuat</p>
</body>
</html>
<html>
<head>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
<html>
<head>
body
{
background-color:#A9A9A9;
}
</style>
</head>
<body>
<h1>Jurusan Teknik Informatika</h1>
<p>universitas Komputer Indonesia</p>
</body>
</html>
<html>
<head>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Mengatur Warna Background dengan CSS!</h1>
<div>
VIRUS MALWARE TROJAN HORSE
<p>Sebagai salah satu platform yang paling populer sejagat saat ini, ternyata
telah membawa
Android ke sisi dimana harus dihadapkan pada permasalahan keamanan baru berupa
munculnya
ancaman virus Trojan Horse tangguh terbaru bernama Obad yang ditemukan oleh
Kaspersky
baru-baru ini dan setidaknya harus segera ditanggulangi secepatnya.
<p>sumber:http://www.beritateknologi.com</p>
</div>
</body>
</html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}
div.satu {
background: rgba(0, 128, 0, 0.1);
}
div.dua {
}
div.tiga {
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
</div>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>With RGBA color values:</p>
<div class="satu">
</div>
<div class="dua">
</div>
<div class="tiga">
</div>
<div>
<h1>default</h1>
</div>
</body>
</html>
<html>
<head>
<style>
body {
background-image: url("foto/gif.gif");
}
</style>
</head>
<body>
<h1 style="color:aliceblue">Hello CSS!</h1>
<p style="color:aliceblue">Background Menggunakan Gambar</p>
</body>
</html>
<html>
<head>
<style>
p {
background-image: url("foto/gif.gif");
}
</style>
</head>
<body>
<h1>Hello CSS!</h1>
<p style="color:aliceblue">Paragrap Ini Menggunakan Latar Belakang Gambar!</p>
</body>
</html>
<html>
<head>
<style>
body {
background-image: url("foto/bg.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1 style="color:aliceblue">Hello CSS!</h1>
<p style="color:aliceblue">Latar Belakang Gambar hanya diulang pada bagian
Horizontal!</p>
Horizontal!</p>
Horizontal!</p>
Horizontal!</p>
</body>
</html>
<html>
<head>
<style>
body {
background-image: url("user.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image
should scroll or be
fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the
browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
<html>
<head>
<style>
body {
background-image: url("foto/user.webp");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the
browser window.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
</body>
</html>
<html>
<head>
<style>
body {
background: #ffffff url("foto/user.webp") no-repeat right top;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the
background properties in one
declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in
the top-right
corner.</p>
<p>We have also added a right margin, so that the text will not write over the
background image.</p>
</body>
</html>
TUGAS PRAKTIKUM 9.1 DAN 10
1. Tugas 1
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8" />
6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7. <meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
9. <link rel="stylesheet" href="style/w3.css" />
10. </head>
11. <body>
12. <div class="w3-container w3-teal w3-card-4">
13. <h1>KH Hasyim Asy'ari</h1>
14. </div>
15. <div class="w3-container">
16. <img src="foto/th.jpg" alt="Foto Mato" width="30%" height="30%" />
17. </div>
18. <div class="w3-container w3-blue">
19. <p>
20. Kiai Haji Muhammad Hasyim Asy'ari adalah seorang ulama besar
bergelar
21. pahlawan nasional dan merupakan pendiri sekaligus Rais Akbar
(pimpinan
22. tertinggi pertama) organisasi Nahdlatul Ulama. Ia memiliki julukan
23. Hadratussyaikh yang berarti Maha Guru dan telah hafal Kutub al-
Sittah (6
24. kitab hadits), serta memiliki gelar Syaikhu al-Masyayikh yang
berarti
25. Gurunya Para Guru.[1] Ia adalah putra dari pasangan K.H. Asy'ari
dengan
26. Ny. H. Halimah, dilahirkan di Desa Tambakrejo, Jombang, Jawa
Timur, dan
27. memiliki salah satu anak bernama K.H. A Wahid Hasyim yang juga
merupakan
28. pahlawan nasional perumus Piagam Jakarta, serta cucunya yakni K.H.
29. Abdurrahman Wahid, merupakan Presiden RI ke-4.
30. </p>
31. </div>
32. </body>
33.</html>
34.
2. Tugas 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style/w3.css" />
</head>
<body>
<div class="w3-container">
<p>Menampilkan Gambar Untuk dijadikan</p>
<p>Tombol:</p>
<div class="w3-display-container w3-hover-opacity" style="width: 50%">

<img src="foto/p.jpg" class="w3-xlarge w3-circle" alt="Avatar"
style="width: 50%" />
<div class="w3-display-middle w3-display-hover w3-xlarge">
<button class="w3-button w3-black">KH Hasyim Asy'ari</button>
</div>
</div>
<div class="w3-display-container w3-hover-opacity" style="width: 50%">
<img src="foto/p.jpg" alt="Avatar" style="width: 50%" />
<div class="w3-display-middle w3-display-hover w3-xlarge">
<button class="w3-button w3-black">KH Hasyim Asy'ari</button>
</div>
</div>
</body>
</html>
TUGAS PRAKTIKUM 11 MEMBUAT FORM DENGAN CSS
MEMBUAT FORM DATA DIRI
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style/w3.css">
</head>
<body>
<div class="w3-container">
<h2>FORMULIR DATA RICKY RIOTARO</h2>
<div class="w3-card-4">
<div class="w3-container w3-green">
<h2>DATA MAHASISWA</h2>
</div>
<form action="action_page.php" class="w3-container">
<p>
<label for="">NIM</label>
<input type="text" class="w3-input" name="nim">
</p>
<p>
<label for="">NAMA LENGKAP</label>
<input type="text" class="w3-input" name="namalengkap">
</p>
</form>
<br>
<div class="w3-container w3-orange">
<h2>HOBY SAYA</h2>
</div>
<p>
<input type="checkbox" class="w3-check">
<label for="">Game</label>
</p>
<p>
<label for="">Main Bola</label>
</p>
<p>
<label for="">Ngoding</label>
</p>
<p>
<label for="">Jalan-jalan</label>
</p>
</form>
<br>
<div class="w3-container w3-purple">
<h2>JENIS KELAMIN SAYA</h2>
</div>
<p>
<input type="radio" class="w3-radio" name="gender" value="laki" checked>
<label for="">Laki-laki</label>
</p>
<p>
<input type="radio" class="w3-radio" name="gender" value="wanita">
<label for="">Wanita</label>
</p>
<p>
<input type="radio" class="w3radio"
name="gender" value="wanita" disabled>
<label for="">Tidak Tahu (Disable)</label>
</p>
</form>
<br>
<div class="w3-container w3-red">
<h2>TEMPAT FAVORIT</h2>
</div>
<select class="w3-select" name="option">
<option value="w3-select" name="option">
<option value="" disabled selected>Silahkan Dipilih</option>
<option value="1" >Pantai</option>
<option value="2" >Taman</option>
<option value="3" >Kedai Kopi</option>
<option value="4" >Kubow</option>
<option value="5" >Laut</option>
</option>
</select>
</form>
<br>
<button class="w3-btn w3-round-xxlarge w3-orange">Kirim</button>
<button class="w3-btn w3-round-xxlarge w3-orange">Batal</button>
</div>
<br>
</div>
<br>
</body>
</html>
TUGAS PRAKTIKUM 12 MEMBUAT ANIMASI GAMBAR DENGAN CSS/JS
TUGAS MEMBUAT ANIMASI GAMBAR

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style/W3.css">
</head>
<body>
<H1 class="w3-center">RICKY RIOTARO</H1>
<div class="w3-container w3-center w3-animate-top">
<h3>Animation Top</h3>
<img src="foto/bayern.jpg" alt="" style="width: 20%;">
</div>
<div class="w3-container w3-center w3-animate-bottom">

<h3>Animation Bottom</h3>
<img src="foto/cr7.jpg" alt="" style="width: 20%;">
</div>
<div class="w3-container w3-center w3-animate-left">

<h3>Animation Left</h3>
<img src="foto/cr7.jpg" alt="" style="width: 20%;">
</div>
<div class="w3-container w3-center w3-animate-right">

<h3>Animation Right</h3>
<img src="foto/chelsea.jpg" alt="" style="width: 20%;">
</div>
<div class="w3-container w3-center">

<h3>Animate Fadding</h3>
<img src="foto/chelsea.jpg" class="w3-animatefading"
alt="" style="width: 20%;">
</div>
<div class="w3-container w3-center w3-animate-zoom">

<h3>Animation Zoom</h3>
<img src="foto/bayern.jpg" alt="" style="width: 20%;">
</div>
<br>
</body>
</html>
TUGAS PRAKTIKUM 13 MEMBUAT NAVIGASI MENU DENGAN CSS/JS
TUGAS JAVASCRIPT DAN CSS
1. Horizontal
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
9. <link rel="stylesheet" href="../style/W3.css">
10. </head>
11. <body>
12. <div class="w3-container" align="center">
13. <h1>INFO E-Sport</h1>
14. <p>Berikut Game Yang Terpopuler di Indonesia</p>
15. </div>
16.
17. <div class="w3-bar w3-red">
18. <button class="w3-bar-item w3-button tablink" onclick="daftarGame(event,
'ml')">Mobile Legends</button>
'ff')">Free Fire</button>
'pubg')">PUBG Mobile</button>
'gensin')">Genshin Impact</button>
22.
23. </div>
24.
25. <div id="ml" class="w3-container game w3-animate-fading" style="display:none">
26. <center>
27. <h2>Mobile Legend</h2>
28. <img src="foto/ml.jpg" alt="" width="500" height="300">
29. </center>
30. <p>Mobile Legends merupakan sebuah game yang dirilis oleh Moonton. Popularitas
Mobile Legends
31. cukup tinggi di Indonesia sejak tahun 2016 lalu, mengingat banyaknya konten
kreator di YouTube
32. yang ikut memainkan game ini.
33. </p>
34. </div>
35.
36. <div id="ff" class="w3-container game w3-animate-bottom" style="display:none">
37. <center>
38. <h2>Free Fire</h2>
39. <img src="foto/ff.jpg" alt="" width="500" height="300">
40. </center>
41. <p>Siapa yang tidak mengenal game yang satu ini? Saat ini, Free Fire sering
disebut-sebut sebagai game nomor 1 di Indonesia.
42. Game keluaran Garena International ini begitu populer di kalangan gamers.
43. Di game ini, kamu bisa bertemu dengan 50 orang lain yang harus kamu
kalahkan untuk meraih kemenangan.
44. Kamu juga bisa memainkan game ini bersama
45. dengan teman-temanmu dan saling bekerja sama untuk mengalahkan lawan-
lawanmup.
46. </p>
47. </div>
48.
49. <div id="pubg" class="w3-container game w3-animate-top" style="display:none">
50. <center>
51. <h2>PUBG Mobile</h2>
52. <img src="foto/pubg.jpeg" alt="" width="500" height="300">
53. </center>
54. <p>Pada dasarnya, game ini memiliki kemiripan gameplay dengan Free Fire,
55. di mana kamu harus mengalahkan 99 orang lain agar bisa menang. Namun,
56. PUBG Mobile menawarkan keunggulan berupa kualitas grafis yang tinggi,
57. sehingga membuatnya menjadi salah satu game yang menempati level teratas.
58. </p>
59. </div>
60.
61. <div id="gensin" class="w3-container game w3-animate-zoom" style="display:none">
62. <center>
63. <h2>Gensin Impact</h2>
64. <img src="foto/gensin.jpg" alt="" width="500" height="300">
65. <p>Bagi kamu yang menyukai game bertema RPG, pastinya kamu sudah tidak
66. asing dengan game yang satu ini. Genshin Impact merupakan sebuah game
bergenre
67. open world yang memungkinkan kamu untuk berpetualang dan menjelajah
dunia dalam game.
68. </p>
69. </center>
70. </div>
71.
72. <script>
73. function daftarGame(evt, namagame) {
74. var i, x, tablinks;
75. x = document.getElementsByClassName("game");
76. for (i = 0; i < x.length; i++){
77. x[i].style.display = "none";
78. }
79. tablinks = document.getElementsByClassName("tablink");
80. for (i = 0; i < x.length; i++){
81. tablinks[i].className = tablinks[i].className.replace("w3-blue", "");
82. }
83. document.getElementById(namagame).style.display = "block";
84. evt.currentTarget.className += " w3-blue";
85. }
86. </script>
87. </body>
88. </html>
2. Vertikal
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../style/W3.css">
</head>
<body>
<div class="w3-sidebar w3-bar-block w3-red w3-card" style="width:130px">
<h5 class="w3-bar-item">MENU</h5>
<button class="w3-bar-item w3-button tablink" onclick="daftarGame(event, 'ml')">Mobile
Legends</button>
<button class="w3-bar-item w3-button tablink" onclick="daftarGame(event, 'ff')">Free
Fire</button>
<button class="w3-bar-item w3-button tablink" onclick="daftarGame(event, 'pubg')">PUBG
Mobile</button>
<button class="w3-bar-item w3-button tablink" onclick="daftarGame(event,
'gensin')">Genshin Impact</button>
</div>
<div style="margin-left:130px">
<div class="w3-padding w3-green">INFO E-Sport</div>
<div id="ml" class="w3-container game w3-animate-fading" style="display:none">
<center>
<h2>Mobile Legend</h2>
<img src="foto/ml.jpg" alt="" width="500" height="300">
</center>
<p>Mobile Legends merupakan sebuah game yang dirilis oleh Moonton. Popularitas
Mobile Legends
cukup tinggi di Indonesia sejak tahun 2016 lalu, mengingat banyaknya konten
kreator di YouTube
yang ikut memainkan game ini.
</p>
</div>
<div id="ff" class="w3-container game w3-animate-bottom" style="display:none">

<center>
<h2>Free Fire</h2>
<img src="foto/ff.jpg" alt="" width="500" height="300">
</center>
<p>Siapa yang tidak mengenal game yang satu ini? Saat ini, Free Fire sering disebut-
sebut sebagai game nomor 1 di Indonesia.
Game keluaran Garena International ini begitu populer di kalangan gamers.
Di game ini, kamu bisa bertemu dengan 50 orang lain yang harus kamu kalahkan untuk
meraih kemenangan.
Kamu juga bisa memainkan game ini bersama
dengan teman-temanmu dan saling bekerja sama untuk mengalahkan lawan-lawanmup.
</p>
</div>
<div id="pubg" class="w3-container game w3-animate-top" style="display:none">
<center>
<h2>PUBG Mobile</h2>
<img src="foto/pubg.jpeg" alt="" width="500" height="300">
</center>
<p>Pada dasarnya, game ini memiliki kemiripan gameplay dengan Free Fire,
di mana kamu harus mengalahkan 99 orang lain agar bisa menang. Namun,
PUBG Mobile menawarkan keunggulan berupa kualitas grafis yang tinggi,
sehingga membuatnya menjadi salah satu game yang menempati level teratas.
</p>
</div>
<div id="gensin" class="w3-container game w3-animate-zoom" style="display:none">

<center>
<h2>Gensin Impact</h2>
<img src="foto/gensin.jpg" alt="" width="500" height="300">
<p>Bagi kamu yang menyukai game bertema RPG, pastinya kamu sudah tidak
asing dengan game yang satu ini. Genshin Impact merupakan sebuah game bergenre
open world yang memungkinkan kamu untuk berpetualang dan menjelajah dunia
dalam game.
</p>
</center>
</div>
</div>
<script>
function daftarGame(evt, namagame) {
var i, x, tablinks;
x = document.getElementsByClassName("game");
for (i = 0; i < x.length; i++){
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++){
tablinks[i].className = tablinks[i].className.replace("w3-green", "");
}
document.getElementById(namagame).style.display = "block";
evt.currentTarget.className += " w3-green";
}
</script>
</body>
</html>
TUGAS PRAKTIKUM 14 MEMBUAT CRUD DENGAN PHP DAN MYSQL
 koneksi.php
 form-gaji.php
 proses-input.php
 hapus.php
 form-edit.php
 proses-edit.php
 list-gaji.php
 Output
a. Isi Form
b. Edit
c. Hapus
1. Motor
 Index.php
 Koneksi.php
 Form-motor.php
 Proses-input.php
 Hapus.php
 Form-edit.php
 Proses-edit.php
 List-jual.php
 Output
a. Input
b. Edit
c. Hapus
2. Tiket
 Index.php
 Koneksi.php
 Form-tiket.php
 Proses-input.php
 Hapus.php
 Form-edit.php
Proses-edit.php
 List-tiket.php
 Output
a. Input
b. Edit
c. Hapus

RangkumanPraktikum (PEMWEB)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

RangkumanPraktikum (PEMWEB)

Diunggah oleh

Hak Cipta:

Format Tersedia

NAMA : Ricky Riotaro

Matkul : Pemrograman Web

TUGAS RANGKUMAN PRAKTIKUM

TUGAS PRAKTIKUM 1 MODUL 2

130. Warna Latar Belakang

Tugas Website Joki Online

TUGAS PRAKTIKUM 5 MEMBUAT FORM

TUGAS PRAKTIKUM 6 TAUTAN DAN HYPERLINK

g. contoh file kuda.html

<div class="w3-display-container w3-hover-opacity" style="width: 50%">

TUGAS PRAKTIKUM 12 MEMBUAT ANIMASI GAMBAR DENGAN CSS/JS

TUGAS MEMBUAT ANIMASI GAMBAR

<div class="w3-container w3-center w3-animate-bottom">

<div class="w3-container w3-center w3-animate-left">

<div class="w3-container w3-center w3-animate-right">

<div class="w3-container w3-center">

<div class="w3-container w3-center w3-animate-zoom">

TUGAS JAVASCRIPT DAN CSS

<div id="ff" class="w3-container game w3-animate-bottom" style="display:none">

<div id="gensin" class="w3-container game w3-animate-zoom" style="display:none">

Anda mungkin juga menyukai