Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 10

Nama : Fajar Maulana

Kelas : R5Y

NPM : 202143501994

Hasil coding
No 1

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Frame Link</title>
</head>
<frameset rows="18%, *,10%" border="0">
<frame src="header.html" name="top" id="top" scrolling="no"
noresize="noresize"/>
<frameset cols="8%, 30%">
<frame name="menu" src="menu_kiri.html"/>
<frame name="konten" src="selamatdatang.html" scrolling="auto"/>
</frameset>

<frame src="footer.html" name="bottom" id="bottom" scrolling="no"


noresize="noresize"/>

<noframes>
<body>
Maaf, browser Anda tidak mendukung penggunaan frame.
</body>
</noframes>
</frameset>
</html>

Header.html

<!DOCTYPE html>
<html>
<head>
<title>Atas</title>
<link rel="stylesheet" href="header.css">
</head>
<body bgcolor="#77AAFF">

<div class="pos_cen">
<img class="img_log" src="logo.png">
<h1 class="text_cen">Universitas Indraprasta PGRI</h1>
<h3 class="text_cen2">Jl.Nangka No.58 Tanjung Barat - Jaksel</h2>
</div>
</body>
</html>

Header.css

.img_log{
position: absolute;
float: left;
width: 100px;
left: 20%;
}
.pos_cen{
margin-top: 10px;
width: 12px;
}
.text_cen {
position: absolute;
margin-top: 25px;
left: 40%;
}
.text_cen2 {
position: absolute;
margin-top: 65px;
left: 44%;
}

Menu.html

<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<style type="text/css">
*{
text-decoration: none;
list-style: none;
}
table{
display:flex;
text-align: center;
justify-content: center;
margin-right: 10px;
margin-left: 10px;
padding: 9px;
background:#a70000;
}
table tr {
display: flex;
justify-content: center;
padding:5px;
padding-left: 50px;
padding-right: 50px;
border-width: 2px;
border-bottom-style: solid;
border-bottom-color: black;

a {
font-size: medium;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-
serif;
color: white;
font-weight:bold;
}

.kotak{
position: relative;
top: 20px;
}
</style>
</head>
<body bgcolor="#eeeeee">
<div class="kotak">
<h2 align="center">INPUT DATA KAMPUS</h2>
</div>
<table>
<tr><hr><td><a href="muraiBatu.html" target="konten">Data
Mahasiswa</a></td></tr>
<tr><td><a href="kenari.html" target="konten">Data Dosen</a></td</tr>
<tr><td><a href="cucak.html" target="konten">Data Dosen</a></td></tr>
</table>

</body>
</html>
Tampilan utama

<!DOCTYPE html>
<html>
<head>
<title>Selamat Datang</title>

<style type="text/css">

.konten_cen{

display: flex;
justify-content: center;
align-items: center;
}

form {
display: flex;
justify-content: center;
align-items: center;
border:0;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

table{
padding: 20px;
}
table td{
padding: 15px;
}
table tr{
position: static;
padding 1x;
}

#resev{
display:flex;
text-align: center;
justify-content: center;
margin-right: 10px;
margin-left: 10px;
padding: 3px;
background:#4cbb17;
}
a{
text-decoration: none;
color: white;
}

</style>
</head>
<body>
<center>
<h1>Input Data Mahasiswa</h1>
</center>
<div class="konten_cen">
<form>
<Table>
<tr>
<td>NPM </td>
<td>: <input type="text" name="nama"></td>
</tr>
<tr>
<td>Nama </td>
<td>
: <input type="tel" name="nomor">
</td>
</tr>
<tr>
<td>Alamat</td>

<td>
: <textarea name="alamat" cols="30px" rows="5px"></textarea>
</td>
</tr>
<tr>

<td></td>
<td id="resev"><a href="submit.html" target="konten">Submit</a></td>

</tr>
</Table>
</form>
</html>
No 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uas no 2</title>
<style type="text/css">
table {
border: 10px ridge black;
width: 15%;

}
th, td {
border: 1px solid;
padding: 2px;
border-spacing:1px ;
}
.cen{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>

<CENTER><h4>PEMOGRAMAN WEB DASAR</h1></CENTER>


<div class="cen">

<table>
<tr> <th colspan="3" style="color: red; background-color:
black;">NPM</th></tr>
<tr>
<td style="color: red; background-color: black;">2021</td>
<td style="color: yellow; background-color: blue;">4350</td>
<td style="color: red; background-color: black;">1994</td>
</tr>
<tr>
<td colspan="3" style="color: red; background-color: black;">
NAMA
</td>
</tr>
<tr><td colspan="3" style="color: red; background-color: black;">Fajar
Maulana</td></tr>
</table>
</div>
</body>
</html>

Output no 2
No 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nomor 3</title>
</head>
<body>
<h1>Menghitung Gaji Karyawan</h1>
<script language="javascript">
//Deklarasi Variabel
var namapegawai, jamkerja, tarifperjam;
var gaji;

//inisialisasi Variabel
jamkerja = 0;
tarifperjam = 0;
gaji = 0;

//input data pegawai dan jam kerja


namapegawai = prompt("Nama Pegawai : ");
jamkerja = prompt("Jam Kerja per minggu : ");
tarifperjam = prompt("Tarif Per Jam : ");
//menghitung gaji
if(gaji == 0) {
gaji = jamkerja * tarifperjam;
}
else {
if(jamkerja > 40) {
gaji = (jamkerja - 40) * 0.5 * tarifperjam;
}
}

//Tampilan
document.write("Nama Pegawai : "+namapegawai);
document.write("<br/>Jumlah Jam Kerja : "+jamkerja);
document.write("<br/>Tarif perjam : "+tarifperjam);
document.write("<br/>Gaji : Rp. "+gaji+"/Bulan");
</script>
</body>
</html>

Output no 3

You might also like