KEGIATAN BELAJAR 2
IMPLEMENTASI HTML
- LATIHAN 1
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body></body>
</html>
- LATIHAN 2
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<b class="atur-teks" id="merah"><u>Format Teks</u></b><br>
<i class="atur-teks" id="biru">Ini adalah tulisan miring</i><br>
<b class="atur-teks" id="kuning">Ini adalah tulisan tebal</b>
</body>
</html>
- LATIHAN 3
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<h1>Aku</h1>
<pre>
Kalau sampai waktuku
'Ku mau tak seorang' kan merayu
Tidak juga kau
Tak perlu sedu sedan itu
Aku ini binatang jalang
Dari kumpulannya terbuang
Biar peluru menembus kulitku
Aku tetap meradang menerjang
Luka dan bisa kubawa berlari
Berlari
Hingga hilang pedih peri
Dan aku akan lebih tidak peduli
Aku mau hidup seribu tahun lagi!
</pre>
<i>Chairil Anwar 1943</i>
</body>
</html>
- LATIHAN 4
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<h2>Daftar Belanja</h2>
<ol type="a">
<li>Cabe</li>
<li>kentang</li>
<li>masako</li>
<li>sawi</li>
<li>ketumbar</li>
</ol>
</body>
</html>
- LATIHAN 5
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<h2>Chairil Anwar</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Chairil_Anwar_cigarette.jpg" alt="Chairil Anwar" width="300">
<p>
Chairil Anwar (lahir di Medan, 26 Juli 1922 — meninggal di Jakarta, 28 April 1949 pada umur 26 tahun), dijuluki sebagai "Si Binatang Jalang" (dari karyanya yang berjudul Aku), adalah penyair terkemuka Indonesia. Dia diperkirakan telah menulis 96 karya, termasuk 70 puisi. Bersama Asrul Sani dan Rivai Apin, dia dinobatkan oleh H.B. Jassin sebagai pelopor Angkatan '45 sekaligus puisi modern Indonesia.
</p>
<i>Wikipedia</i>
</body>
</html>
- LATIHAN 6
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<h2>Daftar Kontak</h2>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>No. Contact</th>
</tr>
<tr>
<td>1</td>
<td>Umar</td>
<td>08122122328</td>
</tr>
<tr>
<td>2</td>
<td>Kenan</td>
<td>08123122325</td>
</tr>
<tr>
<td>3</td>
<td>Emran</td>
<td>08923122992</td>
</tr>
<tr>
<td>4</td>
<td>Wisnu</td>
<td>08388928392</td>
</tr>
<tr>
<td>5</td>
<td>Rayan</td>
<td>08356352212</td>
</tr>
</table>
</body>
</html>
- LATIHAN 7
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<form>
<h3>Input Member baru:</h3>
Nama: <input type="text" name="nama"> <br>
Tanggal lahir: <input type="date" name="tanggal"> <br>
Tempat lahir: <input type="text" name="tempat"> <br>
Jenis kelamin:
Pria <input type="radio" name="kelamin">
Wanita <input type="radio" name="kelamin"> <br>
<input type="reset" Value="Reset">
<input type="submit" Value="Kirim">
</form>
</body>
</html>
- TES FORMATIF 2
<!DOCTYPE html>
<html>
<head>
<title>Tes Formatif</title>
</head>
<body>
<form>
<h3>Register Anggota Baru</h3>
<table>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Nama Panggilan</td>
<td>:</td>
<td><input type="text" name="panggilan"></td>
</tr>
<tr>
<td>Tempat Kelahiran</td>
<td>:</td>
<td><input type="text" name="tempat"></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td><input type="date" name="lahir"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<input type="radio" name="kelamin"> Laki-laki
<input type="radio" name="kelamin"> Perempuan
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="3">
<input type="reset" Value="Reset">
<input type="submit" Value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
KEGIATAN BELAJAR 3
IMPLEMENTASI CSS
- LATIHAN 1
body {
background-color: red;
}
- LATIHAN 2
.atur-teks {
display: inline-block;
padding: 20px;
margin: 5px;
background-color: aqua;
}
#merah {
color: red;
}
#biru {
color: blue;
}
#kuning {
color: yellow;
background-color: purple;
}
- LATIHAN 3
h1 {
color: royalblue;
text-align: center;
}
pre {
text-align: center;
background-color: royalblue;
color: yellow;
}
i {
color: royalblue;
}
- LATIHAN 4
h2 {
color: orange;
}
ol {
border: orange dashed 2px;
}
li {
padding: 10px;
}
- LATIHAN 5
h2 {
text-align: center;
}
img {
width: 100px;
display: block;
margin: auto;
padding: 10px;
border: grey solid 2px;
border-radius: 10px;
}
p {
text-align: center;
}
i {
color: grey;
}
- LATIHAN 6
h2 {
color: orange;
}
table {
width: 100%;
}
tr:nth-child(even) {
background-color: #eee8aa;
}
th {
padding: 10px;
background: orange;
}
td {
padding: 10px;
}
- LATIHAN 7
form {
border: double royalblue;
padding: 10px;
}
input {
padding: 5px;
margin: 5px;
}
[type=submit], [type=reset] {
background-color: royalblue;
border: none;
padding: 10px;
border-radius: 5px;
color: yellow;
}
- TES FORMATIF 3
h3 {
text-align: center;
}
table {
border: 1px dashed orange;
border-radius: 10px;
padding: 30px;
margin: auto;
}
[type="text"], [type="date"], textarea {
width: 100%;
padding: 5px;
border-radius: 5px;
border: 1px solid grey;
}
[type="submit"], [type="reset"] {
width: 100%;
padding: 10px;
margin: 2px;
background-color: orange;
border: none;
border-radius: 10px;
}
KEGIATAN BELAJAR 4
IMPLEMENTASI JAVASCRIPT
- LATIHAN 1
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<b id="hasil"></b>
<script src="latihan1.js"></script>
</body>
</html>
Kode Javascript latihan1.js
document.getElementById("hasil").innerHTML="Ini tulisan dari file Javascript";
- LATIHAN 2
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<p id="hasil"></p>
<script src="latihan2.js"></script>
</body>
</html>
Kode Javascript latihan2.js
for (var a=1; a<=15; a++){
document.getElementById("hasil").innerHTML += a + " ";
}
- LATIHAN 3
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<p id="hasil"></p>
<script src="latihan3.js"></script>
</body>
</html>
Kode Javascript latihan3.js
for (var a=1; a<=100; a++){
if (a%2 != 0){
document.getElementById("hasil").innerHTML += a + " ";
}
}
- LATIHAN 4
Kode HTML latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<ol id="hasil"></ol>
<script src="latihan4.js"></script>
</body>
</html>
Kode Javascript latihan4.js
for (var a=1; a<=20; a++){
if (a%3 == 0){
document.getElementById("hasil").innerHTML
+= "<li><b>Daftar ke "+ a + "</b></li>";
} else {
document.getElementById("hasil").innerHTML
+= "<li>Daftar ke "+ a + "</li>";
}
}
- TES FORMATIF 4
Kode HTML tes.html
<!DOCTYPE html>
<html>
<head>
<title>Tes Formatif</title>
<link rel="stylesheet" href="tes.css">
</head>
<body>
<p id="hasil"></p>
<script src="tes.js"></script>
</body>
</html>
Kode CSS tes.css
b {
display: inline-block;
text-align: center;
width: 30px;
height: 30px;
padding: 30px;
border: 1px dotted grey;
margin: 5px;
border-radius: 5px;
}
Kode Javascript tes.js
for (var a=1; a<=20; a++){
document.getElementById("hasil").innerHTML += "<b> "+ a +"</b>";
}
Hasil tampilan yang dibuat
BMP MSIM4309
Pemrograman Berbasis Web
Lutfi Gani Al Achmad, S.Kom.
