Laporan Praktikum Pemrograman Web 1 Tugas Akhir
Laporan Praktikum Pemrograman Web 1 Modul 5
MODUL 5
Praktikum 1
Ketiklah script di bawah ini :
modul_5a.html
<html>
<head>
<title>metode Java Script</title>
<script language = "JavaScript">
document.write("Selamat datang...<BR>");
document.write("UNIVERSITAS KUNINGAN");
</script>
</head>
<body>
</body>
</html>
<head>
<title>metode Java Script</title>
<script language = "JavaScript">
document.write("Selamat datang...<BR>");
document.write("UNIVERSITAS KUNINGAN");
</script>
</head>
<body>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 2
Ketiklah script di bawah ini :
modul_5b.html
<html>
<head>
<title>variabel JavaScript</title>
</head>
<body>
<script language="JavaScript">
var i = 2 + 3 * 6;
var x = 5;
var y = 10;
var z = x + y;
document.write('Nilai i = ',i + '<br>');
document.write(z);
</script>
</body>
</html>
<head>
<title>variabel JavaScript</title>
</head>
<body>
<script language="JavaScript">
var i = 2 + 3 * 6;
var x = 5;
var y = 10;
var z = x + y;
document.write('Nilai i = ',i + '<br>');
document.write(z);
</script>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 3
Ketiklah script di bawah ini :
modul_5c.html
<script language="JavaScript">
function pesan()
{
alert("Anda Mengklik Tombol OK");
}
</script>
<form>
<input type="button" name="OK" value="OK" onclick="pesan()">
</form>
function pesan()
{
alert("Anda Mengklik Tombol OK");
}
</script>
<form>
<input type="button" name="OK" value="OK" onclick="pesan()">
</form>
Tampilan yang dihasilkan:
Praktikum 4
Ketiklah script di bawah ini :
modul_5d.html
<h1>Masukan Data</h1>
<script language = "JavaScript">
var nama = prompt("Siapa Nama Anda ? ");
document.write("Hai, " + nama);
</script>
<script language = "JavaScript">
var nama = prompt("Siapa Nama Anda ? ");
document.write("Hai, " + nama);
</script>
Tampilan yang dihasilkan:
Praktikum 5
Ketiklah script di bawah ini :
modul_5e.html
<h1>Pesan Konfirmasi</h1>
<script language = "JavaScript">
var jawaban = window.confirm("Apakah data akan disimpan ? ");
document.write("Jawaban Anda : " + jawaban);
</script>
<script language = "JavaScript">
var jawaban = window.confirm("Apakah data akan disimpan ? ");
document.write("Jawaban Anda : " + jawaban);
</script>
Tampilan yang dihasilkan:
Praktikum 6
Ketiklah script di bawah ini :
modul_5f.html
<html>
<head>
<title>Perhitungan Sederhana</title>
</head>
<script language="JavaScript">
function jum()
{
var a = parseInt(document.data.bil_1.value);
var b = parseInt(document.data.bil_2.value);
document.data.hasil.value = a + b;
}
</script>
<body>
<form name="data">
<pre>
Bilangan 1 : <input type="text" name="bil_1"><br>
Bilangan 2 : <input type="text" name="bil_2"><br>
<input type="button" value="Hitung" onclick="jum()"><br>
Hasil : <input type="text" name="hasil">
</pre>
</form>
</body>
</html>
<head>
<title>Perhitungan Sederhana</title>
</head>
<script language="JavaScript">
function jum()
{
var a = parseInt(document.data.bil_1.value);
var b = parseInt(document.data.bil_2.value);
document.data.hasil.value = a + b;
}
</script>
<body>
<form name="data">
<pre>
Bilangan 1 : <input type="text" name="bil_1"><br>
Bilangan 2 : <input type="text" name="bil_2"><br>
<input type="button" value="Hitung" onclick="jum()"><br>
Hasil : <input type="text" name="hasil">
</pre>
</form>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 7
Ketiklah script di bawah ini :
modul_5g.html
<!DOCTYPE html>
<html>
<body>
<p>Array Shorting Alphabet</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
<html>
<body>
<p>Array Shorting Alphabet</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 8
Ketiklah script di bawah ini :
modul_5h.html
<!DOCTYPE html>
<html>
<body>
<p>Array Shorting Number</p>
<button onclick="myFunction()">Urutkan</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a , b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
<html>
<body>
<p>Array Shorting Number</p>
<button onclick="myFunction()">Urutkan</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a , b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
Tampilan yang dihasilkan:
Pre Test Praktikum
Ketiklah script di bawah ini :
modul_5pretest.html
<title>Pre Test Modul 5</title>
<center>
<h3>Form Message Box Input Nama</h3>
<script language = "JavaScript">
var nama = prompt("Masukan Nama:");
document.write("Nama Anda adalah "+nama+".");
</script>
</center>
<center>
<h3>Form Message Box Input Nama</h3>
<script language = "JavaScript">
var nama = prompt("Masukan Nama:");
document.write("Nama Anda adalah "+nama+".");
</script>
</center>
Tampilan yang dihasilkan:
Post Test Praktikum
Ketiklah script di bawah ini :
modul_5posttest.html
<title>Post Test Modul 5</title>
<h1>Program JavaScript Simpan Data</h1>
<pre>
<script language="JavaScript">
var nim = prompt("Masukan NIM :");
var nama = prompt("Masukan Nama :");
var alamat = prompt("Masukan Alamat :");
var konfirmasi = window.confirm("Apakah data akan disimpan ? ");
document.write("Satus Penyimpanan Data : " + konfirmasi +"<br>");
document.write("NIM Anda : ", nim + "<br>");
document.write("Nama Anda : ", nama + "<br>");
document.write("Alamat Anda : ", alamat +"<br>");
</script>
</pre>
<h1>Program JavaScript Simpan Data</h1>
<pre>
<script language="JavaScript">
var nim = prompt("Masukan NIM :");
var nama = prompt("Masukan Nama :");
var alamat = prompt("Masukan Alamat :");
var konfirmasi = window.confirm("Apakah data akan disimpan ? ");
document.write("Satus Penyimpanan Data : " + konfirmasi +"<br>");
document.write("NIM Anda : ", nim + "<br>");
document.write("Nama Anda : ", nama + "<br>");
document.write("Alamat Anda : ", alamat +"<br>");
</script>
</pre>
Tampilan yang dihasilkan:
Praktikum 2
Ketiklah script di bawah ini :
switchLamp.html
<!DOCTYPE html>
<html>
<body>
<h1>Apa yang bisa dikerjakan Javascript?</h1>
<p>JavaScript dapat dimasukan di atribute HTML</p>
<p>Dalam hal ini JavaScript mengubah src (source) atribut dari suatu gambar.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
<p>note... Pakai Google Chrome Browser</p>
</body>
</html>
<html>
<body>
<h1>Apa yang bisa dikerjakan Javascript?</h1>
<p>JavaScript dapat dimasukan di atribute HTML</p>
<p>Dalam hal ini JavaScript mengubah src (source) atribut dari suatu gambar.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
<p>note... Pakai Google Chrome Browser</p>
</body>
</html>
Tampilan yang dihasilkan:
Tugas Praktikum
Ketiklah script di bawah ini :
modul_5tugas.html
<html>
<head>
<title>Latihan dan Tugas Modul 5</title>
</head>
<script language="JavaScript">
function hitung()
{
var a = parseInt(document.data.bil1.value);
var b = parseInt(document.data.bil2.value);
document.data.tambah.value = a + b;
document.data.kali.value = a * b;
document.data.kurang.value = a - b;
document.data.bagi.value = a / b;
}
</script>
<body>
<form name="data">
<table align="center">
<tr>
<td bgcolor="grey" colspan="2" align="center">OPERASI PERHITUNGAN</td>
</tr>
<tr>
<td>Bilangan Pertama</td>
<td><input type="text" name="bil1"></td>
</tr>
<tr>
<td>Bilangan Kedua</td>
<td><input type="text" name="bil2"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="HITUNG" onclick="hitung()"></td>
</tr>
<tr>
<td>Hasil Pejumlahan</td>
<td><input type="text" name="tambah"></td>
</tr>
<tr>
<td>Hasil Perkalian</td>
<td><input type="text" name="kali"></td>
</tr>
<tr>
<td>Hasil Pengurangan</td>
<td><input type="text" name="kurang"></td>
</tr>
<tr>
<td>Hasil Pembagian</td>
<td><input type="text" name="bagi"></td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Latihan dan Tugas Modul 5</title>
</head>
<script language="JavaScript">
function hitung()
{
var a = parseInt(document.data.bil1.value);
var b = parseInt(document.data.bil2.value);
document.data.tambah.value = a + b;
document.data.kali.value = a * b;
document.data.kurang.value = a - b;
document.data.bagi.value = a / b;
}
</script>
<body>
<form name="data">
<table align="center">
<tr>
<td bgcolor="grey" colspan="2" align="center">OPERASI PERHITUNGAN</td>
</tr>
<tr>
<td>Bilangan Pertama</td>
<td><input type="text" name="bil1"></td>
</tr>
<tr>
<td>Bilangan Kedua</td>
<td><input type="text" name="bil2"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="HITUNG" onclick="hitung()"></td>
</tr>
<tr>
<td>Hasil Pejumlahan</td>
<td><input type="text" name="tambah"></td>
</tr>
<tr>
<td>Hasil Perkalian</td>
<td><input type="text" name="kali"></td>
</tr>
<tr>
<td>Hasil Pengurangan</td>
<td><input type="text" name="kurang"></td>
</tr>
<tr>
<td>Hasil Pembagian</td>
<td><input type="text" name="bagi"></td>
</tr>
</table>
</form>
</body>
</html>
Tampilan yang dihasilkan:
Laporan Praktikum Pemrograman Web 1 Modul 4
MODUL 4
Praktikum 1
Ketiklah script di bawah ini :
modul_4a.html
<html>
<head>
<title>Penerapan CSS</title>
<style type="text/css">
p{color:red;}
h1{color:blue;}
</style>
<p>Belajar CSS</p>
<h1>H1 Menjadi Warna Biru</h1>
</body>
</html>
<head>
<title>Penerapan CSS</title>
<style type="text/css">
p{color:red;}
h1{color:blue;}
</style>
<p>Belajar CSS</p>
<h1>H1 Menjadi Warna Biru</h1>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 2
Ketiklah script di bawah ini :
modul_4b.html
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
p{color:red;}
body{backgroud-color:yellow;}
h1{color:blue; size:40;}
</style>
</head>
<body>
<p>Paragraf CSS</p>
<h1>Header 1 Hasil CSS</h1>
</body>
</html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
p{color:red;}
body{backgroud-color:yellow;}
h1{color:blue; size:40;}
</style>
</head>
<body>
<p>Paragraf CSS</p>
<h1>Header 1 Hasil CSS</h1>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 3
Ketiklah script di bawah ini :
file.css
p{color:white;}
body{background-color: black;}
h1{color:yellow; size:40;}
modul_4c.html
<html>
<head>
<title>CSS Pertamaku</title>
<link rel="stylesheet" type="text/css" href="file.css"/>
</head>
<body>
<p>Paragraf CSS</p>
<h1>Header 1 hasil CSS</h1>
</body>
</html>
<head>
<title>CSS Pertamaku</title>
<link rel="stylesheet" type="text/css" href="file.css"/>
</head>
<body>
<p>Paragraf CSS</p>
<h1>Header 1 hasil CSS</h1>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 4
Ketiklah script di bawah ini :
modul_4d.html
<html>
<head>
<title>CSS Pertamaku</title>
</head>
<p style="background:blue; color:white;">
CSS nya di Tempat Tag P</p>
<b style="background:yellow; color:red; size:35;">
Tag B yang ini juga Ada CSS nya</b>
</body>
</html>
<head>
<title>CSS Pertamaku</title>
</head>
<p style="background:blue; color:white;">
CSS nya di Tempat Tag P</p>
<b style="background:yellow; color:red; size:35;">
Tag B yang ini juga Ada CSS nya</b>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 5
Siapkanlah file :
klematis_small.jpg, klematis2_small.jpg, klematis3_small.jpg
Ketiklah script di bawah ini :
modul_4e.html
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border: 1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
<div class="img">
<a target="_blank" href="modul_4a.html"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="modul_4b.html"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="modul_4c.html"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border: 1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
<div class="img">
<a target="_blank" href="modul_4a.html"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="modul_4b.html"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="modul_4c.html"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
Tampilan yang dihasilkan:
Praktikum 6
Ketiklah script di bawah ini :
modul_4f.html
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
.left {text-align: left}
.center {text-align: center}
</style>
<p class="left">Paragraf ini rata kiri dipanggil melalui Class Left</p>
<p class="center">Paragraf ini rata tengah dipanggil melalui Class Center</p>
</body>
</html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
.left {text-align: left}
.center {text-align: center}
</style>
<p class="left">Paragraf ini rata kiri dipanggil melalui Class Left</p>
<p class="center">Paragraf ini rata tengah dipanggil melalui Class Center</p>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 7
Ketiklah script di bawah ini :
modul_4g.html
<style type="text/css">
.polesteks{color:green; font-size: 34;}
</style>
<body>
<b class="polesteks">Saya adalah CSS</b>
<p class="polesteks">Saya adalah CSS</p>
</body>
.polesteks{color:green; font-size: 34;}
</style>
<body>
<b class="polesteks">Saya adalah CSS</b>
<p class="polesteks">Saya adalah CSS</p>
</body>
Tampilan yang dihasilkan:
Praktikum 8
Ketiklah script di bawah ini :
modul_4h.html
<html>
<head>
<title>Jenis-Jenis Selector</title>
</head>
<style type="text/css">
p.italic {font-size:200%; font-style:italic}
p.normal {font-family:arial; font-style:normal}
p.oblique {font-style:oblique}
</style>
<body>
<p class="italic">Universitas Kuningan</p>
<p class="normal">Universitas Kuningan</p>
<p class="oblique">Universitas Kuningan</p>
</body>
</html>
<head>
<title>Jenis-Jenis Selector</title>
</head>
<style type="text/css">
p.italic {font-size:200%; font-style:italic}
p.normal {font-family:arial; font-style:normal}
p.oblique {font-style:oblique}
</style>
<body>
<p class="italic">Universitas Kuningan</p>
<p class="normal">Universitas Kuningan</p>
<p class="oblique">Universitas Kuningan</p>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 9
Siapkan file : img-tree.png
Ketiklah script di bawah ini :
modul_4i.html
<html>
<head>
<style type="text/css">
body {
background-image: url("img-tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side,
so the background image will never disturb the text.</p>
<p>Cascading Style Sheet (CSS)</p>
<p> merupakan aturan untuk mengendalikan beberapa komponen
dalam sebuah web sehingga akan lebih terstruktur dan seragam. </p>
<p>CSS bukan merupakan bahasa pemograman</p>
</body>
</html>
<head>
<style type="text/css">
body {
background-image: url("img-tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side,
so the background image will never disturb the text.</p>
<p>Cascading Style Sheet (CSS)</p>
<p> merupakan aturan untuk mengendalikan beberapa komponen
dalam sebuah web sehingga akan lebih terstruktur dan seragam. </p>
<p>CSS bukan merupakan bahasa pemograman</p>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 10
Ketiklah script di bawah ini :
modul_4i1.html
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text], select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display:inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 100%;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {background-color:#45a049;}
div {border-radius:5px; background-color:#f2f2f2; padding:20px;}
</style>
</head>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="nim">NIM</label>
<input type="text" id="nim" name="NIM" placeholder="Nomor Induk Mahasiswa">
<label for="nama">Nama</label>
<input type="text" id="nama" name="NAMA" placeholder="Nama Lengkap">
<label for="prodi">Program Studi</label>
<select id="prodi" name="prodi">
<option value="TI S1"> Teknik Informatika S1</option>
<option value="SI S1"> Sistem Informasi S1</option>
<option value="MI D3"> Management Informatika D3</option>
<option value="TI D3"> Teknik Informatika D3</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
<html>
<head>
<style>
input[type=text], select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display:inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 100%;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {background-color:#45a049;}
div {border-radius:5px; background-color:#f2f2f2; padding:20px;}
</style>
</head>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="nim">NIM</label>
<input type="text" id="nim" name="NIM" placeholder="Nomor Induk Mahasiswa">
<label for="nama">Nama</label>
<input type="text" id="nama" name="NAMA" placeholder="Nama Lengkap">
<label for="prodi">Program Studi</label>
<select id="prodi" name="prodi">
<option value="TI S1"> Teknik Informatika S1</option>
<option value="SI S1"> Sistem Informasi S1</option>
<option value="MI D3"> Management Informatika D3</option>
<option value="TI D3"> Teknik Informatika D3</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Tampilan yang dihasilkan:
Pre Test Praktikum
Ketiklah script di bawah ini :
modul_4pretest.html
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
.left {text-align: left}
.center {text-align: center}
</style>
<p class="left">Paragraf ini rata kiri dipanggil melalui Class Left</p>
<p class="center">Paragraf ini rata tengah dipanggil melalui Class Center</p>
</body>
</html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
.left {text-align: left}
.center {text-align: center}
</style>
<p class="left">Paragraf ini rata kiri dipanggil melalui Class Left</p>
<p class="center">Paragraf ini rata tengah dipanggil melalui Class Center</p>
</body>
</html>
Tampilan yang dihasilkan:
Tugas Praktikum
Ketiklah script di bawah ini :
modul_4tugas.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: grey;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: grey;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Tampilan yang dihasilkan:
Post Test Praktikum
Siapkan file :
Image01.png
Image02.png
Image03.png
Image04.png
Image05.png
Ketiklah script di bawah ini :
modul_4posttest.html
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=70);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
</style>
</head>
<body><center>
<h1>Image Transparency</h1>
<img src="Image01.png" width="160" height="160" alt="Image01.png">
<img src="Image02.png" width="160" height="160" alt="Image02.png">
<img src="Image03.jpg" width="160" height="160" alt="Image03.jpg">
<img src="Image04.png" width="160" height="160" alt="Image04.png">
<img src="Image05.png" width="160" height="160" alt="Image05.png">
<p><b>Note:</b> Arahkan Mouse ke Gambar</p>
</center></body>
</html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=70);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
</style>
</head>
<body><center>
<h1>Image Transparency</h1>
<img src="Image01.png" width="160" height="160" alt="Image01.png">
<img src="Image02.png" width="160" height="160" alt="Image02.png">
<img src="Image03.jpg" width="160" height="160" alt="Image03.jpg">
<img src="Image04.png" width="160" height="160" alt="Image04.png">
<img src="Image05.png" width="160" height="160" alt="Image05.png">
<p><b>Note:</b> Arahkan Mouse ke Gambar</p>
</center></body>
</html>
Tampilan yang dihasilkan:
Laporan Praktikum Pemrograman Web 1 Modul 3
MODUL 3
Praktikum 1
Ketiklah script di bawah ini :
modul_3a.html
<!DOCTYPE html>
<html>
<head>
<title>Styling the article element</title>
<script>document.elementBaru("gaya1")</script>
<style>
gaya1 {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<gaya1>Format Tampilan CSS di HTML5</gaya1>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 2
Ketiklah script di bawah ini :
modul_3b.html
<!DOCTYPE html>
<html><head>
<title>HTML5</title>
<style>
body
{font-family: Verdana, sans-serif; font-size:0.8em;}
header, nav, section, article, footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 Skeleton</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<section>
<h2>UNIKU FACULTY</h2>
<article>
<h2>FKOM</h2>
<p>Fakultas Ilmu Komputer</p>
</article>
<article>
<h2>FKIP</h2>
<p>Fakultas Ilmu Pendidikan</p>
</article>
<article>
<h2>FHUT</h2>
<p>Fakultas Ilmu Kehutanan</p>
</article>
</section>
<footer>
<p>© @Rio Andriyat FKOM FACULTY</p>
</footer>
</body></html>
Tampilan yang dihasilkan:
Praktikum 3
Ketiklah script di bawah ini :
modul_3c.html
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<br><br>
<button type="button"
onclick="alert('Anda menekan Tombol Click Me')">Click Me!</button>
<br><br>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 4
Ketiklah script di bawah ini :
modul_3d.html
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="0">
100 +
<input type="number" id="b" name="b" value="0">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 5
Ketiklah script di bawah ini :
modul_3e.html
<!DOCTYPE html>
<html><body>
<p>Circle
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"/>
Sorry, your browser does not support inline SVG.
</svg>
<p>Rectangle
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"/>
</svg>
<p>Start>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
<p>Logo
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 6
Siapkanlah file op.mp4
Ketiklah script di bawah ini :
modul_3f.html
<video width="320" height="240" controls>
<source src="op.mp4" type="video/mp4">
<source src="op.ogg" type="video/ogg">
</video>
Tampilan yang dihasilkan:
Pre Test Praktikum
Ketiklah script di bawah ini :
modul_3prettest.html
<!DOCTYPE html>
<html>
<head>
<title>Pre Test Modul 3</title>
<script>document.elementBaru("gaya1")</script>
<style>
gaya1 {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>HEADING PERTAMA</h1>
<p>Paragraf dengan Style</p>
<gaya1>Format Tampilan text di BOX</gaya1>
</body>
</html>
Tampilan yang dihasilkan:
Tugas Praktikum
Siapkan file GalaxyKickOff_01.mp4
Ketiklah script di bawah ini :
modul_3tugas.html
<!DOCTYPE html>
<html>
<title>Tugas Modul 3</title>
<center><body>Script HTML Untuk Memutar Video .mp4<body><br>
<video width="320" height="240" controls>
<source src="GalaxyKickOff_01.mp4" type="video/mp4">
<source src="GalaxyKickOff_01.ogg" type="video/ogg">
</video>
</body>
</center>
</html>
Tampilan yang dihasilkan:
Post Test Praktikum
Siapkanlah file ColdCherryGrowingPainInst.mp3
Ketiklah script di bawah ini :
modul_3postest.html
<!DOCTYPE html>
<html>
<title>Post Test Modul 3</title>
<center><body>Script HTML Untuk Memutar Audio .mp3<body><br>
<audio controls>
<source src="ColdCherryGrowingPainInst.mp3" type="audio/mp3">
</audio>
</body>
</center>
</html>
Tampilan yang dihasilkan:
Laporan Praktikum Pemrograman Web 1 Modul 2
MODUL 2
Praktikum 1
Ketiklah script di bawah ini :
modul_2a.html
<frameset rows="30%,65%,5%" border="1">
<frame name="header" src="modul_2b.html" />
<frameset cols="20%,80%">
<frame name="menu" src="modul_2c.html" />
<frame name="main" src="modul_2pretest.html" />
</frameset>
<frame name="footer" src="modul_2d.html" />
</frameset>
Tampilan yang dihasilkan:
Praktikum 2
Ketiklah script di bawah ini :
modul_2b.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table border="0" align="center" width="100%">
<tr>
<td width="19%" align="center"><img src="FKOM-Warna.png"></td>
<td width="81%" align="center"><h1>UNIVERSITAS KUNINGAN</h1>
<h2>FAKULTAS ILMU KOMPUTER</h2>
Kampus 1 : Jln Raya Tjut Nyak Dhien No.36 Kuningan</td>
</tr>
</table>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 3
Ketiklah script di bawah ini :
modul_2c.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<ul>
<li><a href="modul_2b.html" target="blank">Home</a></li>
<li><a href="modul_2d.html" target="main">Fakultas</a></li>
<li>Akreditasi</li>
<li>SIAMIK</li>
</ul>
<p> </p>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 4
Ketiklah script di bawah ini :
modul_2d.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<center>
©Copyright FKOM UNIKU 2017
</center>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 5
Ketiklah script di bawah ini :
modul_2e.html
<p>Pukul 15.<sup>30</sup><br>
20<sup>0</sup> <sub>Celcius</sub></p>
<p> </p><br>
<pre>Don't Join To NATO
NO Action
Talk Only</pre>
<strike>Jangan Jadi Orang
yang hanya Banyak Bicara
Tanpa Aksi/Bukti Nyata</strike><br>
<ol type="1"><b>FKOM</b>
<li>Teknik Informatika S1</li>
<li>Sistem Informasi S1</li>
<li>Teknik Informatika D3</li>
<li>Management Informatika D3</li>
</ol>
<ul type="circle"><b>Matakuliah</b>
<li>PTI</li>
<li>Algoritma</li>
<li>Kalkulus</li>
</ul>
<dl>
<dt><i>Definisi 1</i></dt>
<dd>Penjelasn definisi 1</dd>
<dt><i>Definisi ke-n</i></dt>
<dd>Penjelasan definisi ke-n</dd>
</dl>
Tampilan yang dihasilkan:
Praktikum 6
Ketiklah script di bawah ini :
modul_2f.html
<b><center>Input Data Mahasiswa</center></<b>
<form name="form1" method="post" action="tampil_post.php">
<table width="456" border="0" align="center">
<tr>
<td>NIM</td>
<td><label>
<input type="text" name="nim" value="Masukan NIM"/>
</td>
</tr>
<tr>
<td>NAMA</td>
<td><label>
<input type="text" name="nama" value="Masukan Nama"/>
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="jkl" id="jkl" value="L"/>Laki-laki<br/>
<input type="radio" name="radio" id="jkp" value="P"/>Perempuan</label></td>
</tr>
<tr>
<td>Hobi</td>
<td><label>
<input type="checkbox" name="hb1" id="checkbox">Sepak Bola<br/>
<input type="checkbox" name="hb2" id="checkbox2">Berenang<br/>
<input type="checkbox" name="hb3" id="checkbox3">Membaca<br/>
</label></td>
</tr>
<tr>
<td>
<td><label>
<select name="prodi" id="select">
<option value="Teknik Informatika S1">TI S1</option>
<option value="Sistem Informasi S1">SI S1</option>
<option value="Manajemen Informatika D3">MI D3</option>
<option value="Teknik Informatika D3">TI D3</option>
</select>
</label>
</td>
</tr>
<tr>
<td>File Foto</td>
<td><input type="file" name="file1"></td>
</tr>
<tr>
<td>Alamat</td>
<td><label>
<textarea name="almt" id="textarea" cols="45" rows="5"></textarea>
</label></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="OK" id="OK" value="OK"/>
<input type="reset" name="reset" value="CANCEL"/>
</td>
</tr>
</table></form>
Tampilan yang dihasilkan:
Praktikum 7
Ketiklah script di bawah ini :
modul_2g.html
<form id="form1" name="form1" method="post" action="">
<p><strong>Property Readonly</strong></p>
<p>NIM :
<input type="text" name="nim" id="nim" readonly value="2013081002"/>
</p>
<p><strong>Readonly dan Tittle di TextArea</strong></p>
<p>Komentar : <textarea cols="40" rows="10" readonly title="Ini Komentarnya">
Komentar di Text Area Tidak Bisa Dihapus</textarea></p>
<p><strong>Cheked</strong></p>
<p>Jenis Kelamin : <input type="radio" name="jk" value="L" />L
<input type="radio" name="jk" value="P" checked="checked" />P</p>
<p><strong>Maximal Character</strong></p>
<p>NIM :
<input type="text" maxlength="10" size="20" />
Maximal 10 Karakter
</p>
</form>
Tampilan yang dihasilkan:
Praktikum 8
Ketiklah script di bawah ini :
modul_2h.html
<form name="login">
<table width="21%" border="0" align="center">
<tr>
<td colspan="2" bgcolor="#CCCCCC" align="center"><b>FORM LOGIN</b></td>
</tr>
<tr>
<td>Username</td>
<td>
<label>
<input type="text" name="textfield" id="textfield" size="20" maxlength="15" title="Masukan Username"/>
</label></td>
</tr>
<tr>
<td>Password</td>
<td>
<label>
<input type="password" name="textfield2" id="textfield2" size="20" maxlength="15" title="Masukan Password"/>
</label></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="Login" value="Login"/></td>
</tr>
</table>
</form>
Tampilan yang dihasilkan:
Post Test Praktikum
Ketiklah script di bawah ini :
modul_2posttest.html
<form id="form1" name="form1" method="post" action="">
<p><strong>Property Readonly</strong></p>
<p>NIM :
<input type="text" name="nim" id="nim" readonly value="2013081002"/>
</p>
<p><strong>Readonly dan Tittle di TextArea</strong></p>
<p>Komentar : <textarea cols="40" rows="10" readonly title="Ini Komentarnya">
Komentar di Text Area Tidak Bisa Dihapus</textarea></p>
<p><strong>Cheked</strong></p>
<p>Jenis Kelamin : <input type="radio" name="jk" value="L" />L
<input type="radio" name="jk" value="P" checked="checked" />P</p>
<p><strong>Maximal Character</strong></p>
<p>NIM :
<input type="text" maxlength="10" size="20" />
Maximal 10 Karakter
</p>
</form>
Tampilan yang dihasilkan:
Pre Test Praktikum
Ketiklah script di bawah ini :
modul_2pretest.html
<b><center>Input Data Mahasiswa</center></b>
<form name="form1" method="post" action="tampil_post.php">
<table width="456" border="0" align="center">
<tr>
<td>NIM </td>
<td><input type="text" name="nim" value="Masukan NIM"></td>
</tr>
<tr>
<td>Nama </td>
<td><input type="text" name="nama" value="Masukan Nama"></td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td>
<input type="radio" name="jkl" id="jkl" value="L">Laki-laki
<input name="jkp" type="radio" id="jkp" value="P">Perempuan
</td>
</tr>
</table></form>
Tampilan yang dihasilkan:
Tugas Praktikum
Ketiklah script di bawah ini :
modul_2tugas.html
<frameset rows="35%,50%,15%" border="1">
<frame name="header" src="header.html"/>
<frameset cols="15%,70%,15%">
<frame name="leftmenu" src="leftmenu.html"/>
<frame name="main" src="main.html"/>
<frame name="rightmenu" src="rightmenu.html"/>
</frameset>
<frame name="footer" src="footer.html"/>
</frameset>
header.html
<html>
<head>
<center><body><h2>
Header
<h2></body></center>
</html>
main.html
<html>
<body bgcolor="grey">
<center><h2>
Utama
<h2></body></center>
</html>
leftmenu.html
<html>
<head>
<center><body><h2>
Menu
<h2></body></center>
</html>
rightmenu.html
<html>
<head>
<center><body><h2>
Menu
<h2></body></center>
</html>
footer.html
<html>
<head>
<center><body><h2>
Footer
<h2></body></center>
</html>
Tampilan yang dihasilkan:
Langganan:
Postingan (Atom)