Latihan 2 - Aplikasi Pemrograman Web
Membuat Aplikasi Pemrograman Web dengan Layout Table dan CSS
Ketiklah program berikut ini :
1. File CSS
body{
background: lightgrey;
font-family: roboto, cursive;
text-align: center;
}
h1{
color: #fff;
}
.ketengah{
margin: 0px auto;
width: 800px;
}
.kotak1{
background: blue;
width: 800px;
float: center;
height: 50px;
margin: 0px;
}
.kotak2{
background: blue;
width: 800px;
float: center;
height: 300px;
margin: 0px;
}
.kotak3{
background: blue;
width: 800px;
float: center;
height: 30px;
margin: 0px;
}
.kotak4{
background: blue;
width: 800px;
float: center;
height: 800px;
margin: 0px;
}
.gradient6 {
background: linear-gradient(to right, green, green, brown); /* Standard syntax */
background: -webkit-linear-gradient(left, green, green, brown); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, green, green, brown); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, green, green, brown); /* For Firefox 3.6 to 15 */
}
.gradient7 {
background: linear-gradient(green, green, brown); /* Standard syntax */
background: -webkit-linear-gradient(green, green, brown); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, green, brown); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, green, brown); /* For Firefox 3.6 to 15 */
}
.gradient8 {
background: linear-gradient(brown, brown, brown, brown, green); /* Standard syntax */
background: -webkit-linear-gradient(brown, brown, brown, brown, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(brown, brown, brown, brown, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(brown, brown, brown, brown, green); /* For Firefox 3.6 to 15 */
}
.gradient1 {
background: linear-gradient(red, green); /* Standard syntax */
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
}
.gradient2 {
background: linear-gradient(to right, red , yellow, green); /* Standard syntax */
background: -webkit-linear-gradient(left, red , yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow, green); /* For Firefox 3.6 to 15 */
}
.gradient3 {
background: radial-gradient(red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
}
.gradient4 {
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
}
button{
border: 1;
padding: 10px 10px;
font-size: 12px;
color: snow;
display: inline-block;
cursor: pointer;
text-decoration: none;
}
.warna{background-color: coral;}
.warna1{background-color: aqua;}
.warna2{background-color: blue;}
.warna3{background-color: green;}
button:hover{
background-color: brown;
}
h1{color: aqua;}
h2{color: darkaqua;}
h3{color: darkaqua;}
.text {
position: relative;
display: inline-block;
font-size: 18px;
text-transform: uppercase;
color: #244D49;
text-shadow: 3px 3px 0px #D7DACC, 8px 8px 0px rgba(0, 0, 0, 0.1);
}
- - - - -
2. File Index.html
<head>
<title>Aplikasi Buku Perpustakaan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table width=800 border=0 align=center>
<tr height=50 class="kotak1 gradient6">
<td>
<div class="ketengah">
<!-- linear gradient -->
<button class="warna3">| Home |</button>
<button class="warna2">| Buku Perpustakaan |</button>
<button class="warna2">| About Me |</button>
</div>
</td>
</tr>
<tr height=200>
<td>
<image src="gerbang.jpg" width=800 height=200>
</td>
</tr>
<tr height=30 class="kotak3 gradient6">
<td>
<marquee scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()" style="color: white;">
<font size="3"> <b>
Selamat Datang di Aplikasi Buku Perpustakaan SMKN 1 Panyingkiran
</b></font>
</marquee>
</td>
</tr>
<tr height=800 class="kotak4 gradient6">
<td>
</td>
</tr>
<tr height=200 class="kotak2 gradient8">
<td>
<p align=left>
<font color=white size=6>
Aplikasi Buku Perpustakaan
<hr>
</font>
<br>
<font color=white>
SMK Negeri 1 Panyingkiran
</font>
<br>
<font color=white>
Jalan Kirapandak Panyingkiran Kabupaten Majalengka 45459
</font>
<br>
<font color=white>
Created By : muchamadekisa@2019
</font>
</p>
</td>
</tr>
</table>
</body>
Membuat Aplikasi Pemrograman Web dengan Layout Table dan CSS
Ketiklah program berikut ini :
1. File CSS
Style.css : ( simpan dengan nama style.txt )
body{
background: lightgrey;
font-family: roboto, cursive;
text-align: center;
}
h1{
color: #fff;
}
.ketengah{
margin: 0px auto;
width: 800px;
}
.kotak1{
background: blue;
width: 800px;
float: center;
height: 50px;
margin: 0px;
}
.kotak2{
background: blue;
width: 800px;
float: center;
height: 300px;
margin: 0px;
}
.kotak3{
background: blue;
width: 800px;
float: center;
height: 30px;
margin: 0px;
}
.kotak4{
background: blue;
width: 800px;
float: center;
height: 800px;
margin: 0px;
}
.gradient6 {
background: linear-gradient(to right, green, green, brown); /* Standard syntax */
background: -webkit-linear-gradient(left, green, green, brown); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, green, green, brown); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, green, green, brown); /* For Firefox 3.6 to 15 */
}
.gradient7 {
background: linear-gradient(green, green, brown); /* Standard syntax */
background: -webkit-linear-gradient(green, green, brown); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, green, brown); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, green, brown); /* For Firefox 3.6 to 15 */
}
.gradient8 {
background: linear-gradient(brown, brown, brown, brown, green); /* Standard syntax */
background: -webkit-linear-gradient(brown, brown, brown, brown, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(brown, brown, brown, brown, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(brown, brown, brown, brown, green); /* For Firefox 3.6 to 15 */
}
.gradient1 {
background: linear-gradient(red, green); /* Standard syntax */
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
}
.gradient2 {
background: linear-gradient(to right, red , yellow, green); /* Standard syntax */
background: -webkit-linear-gradient(left, red , yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow, green); /* For Firefox 3.6 to 15 */
}
.gradient3 {
background: radial-gradient(red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
}
.gradient4 {
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
}
button{
border: 1;
padding: 10px 10px;
font-size: 12px;
color: snow;
display: inline-block;
cursor: pointer;
text-decoration: none;
}
.warna{background-color: coral;}
.warna1{background-color: aqua;}
.warna2{background-color: blue;}
.warna3{background-color: green;}
button:hover{
background-color: brown;
}
h1{color: aqua;}
h2{color: darkaqua;}
h3{color: darkaqua;}
.text {
position: relative;
display: inline-block;
font-size: 18px;
text-transform: uppercase;
color: #244D49;
text-shadow: 3px 3px 0px #D7DACC, 8px 8px 0px rgba(0, 0, 0, 0.1);
}
- - - - -
2. File Index.html
Index.html
<head>
<title>Aplikasi Buku Perpustakaan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table width=800 border=0 align=center>
<tr height=50 class="kotak1 gradient6">
<td>
<div class="ketengah">
<!-- linear gradient -->
<button class="warna3">| Home |</button>
<button class="warna2">| Buku Perpustakaan |</button>
<button class="warna2">| About Me |</button>
</div>
</td>
</tr>
<tr height=200>
<td>
<image src="gerbang.jpg" width=800 height=200>
</td>
</tr>
<tr height=30 class="kotak3 gradient6">
<td>
<marquee scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()" style="color: white;">
<font size="3"> <b>
Selamat Datang di Aplikasi Buku Perpustakaan SMKN 1 Panyingkiran
</b></font>
</marquee>
</td>
</tr>
<tr height=800 class="kotak4 gradient6">
<td>
</td>
</tr>
<tr height=200 class="kotak2 gradient8">
<td>
<p align=left>
<font color=white size=6>
Aplikasi Buku Perpustakaan
<hr>
</font>
<br>
<font color=white>
SMK Negeri 1 Panyingkiran
</font>
<br>
<font color=white>
Jalan Kirapandak Panyingkiran Kabupaten Majalengka 45459
</font>
<br>
<font color=white>
Created By : muchamadekisa@2019
</font>
</p>
</td>
</tr>
</table>
</body>
Tidak ada komentar:
Posting Komentar