Aimmatul Azizah 160533611463 Modul4

LAPORAN IV
“ PENERAPAN CSS PADA TABEL”
Disusun untuk Memenuhi Matakuliah Pemrograman Berbasis Web

Dibimbing oleh Bapak Achmad Hamdan, M.Pd
Oleh :
AIMMATUL AZIZAH 160533611463
S1 PTI Offering A
UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
September 2018
A. LATIHAN
1. Border.htm
- Script
<!DOCTYPE HTML>
<head>
<title>Border Tabel</title>
<style type="text/css">
table,th,td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>Nama Depan</th><th>Nama</th></tr>
<tr><td>Adelin</td><td>Larasati</td></tr>
<tr><td>Novero</td><td>Dayandra</td></tr>
<tr><td>Andika</td><td>Dayandra</td></tr>
</table>
</body>
</html>
- SS
2. TingiLebar.htm
- Script
<!DOCTYPE HTML>
<head>
<title>tinggi dan lebar</title>
table,td,th{
}
table{
width: 100%;
}
th{
height: 50px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
- SS
3. TaxtAlign
- Script
<!DOCTYPE HTML>
<head>
<title>Untitled 3</title>
table,td,th{
}
td{
text-align: right;
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
- SS
4. Padding.htm
- Script
<!DOCTYPE HTML>
<head>
<title>padding</title>
table,td,th{
}
td{
text-align: right;
height: 50px;
padding: 15px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
- SS
5. Paddingright.htm
- Script
<!DOCTYPE HTML>
<head>
<title>Untitled 3</title>
table,td,th{
}
td{
text-align: right;
height: 50px;
padding-right: 70px;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
- SS
6. Warna.htm
- Script
<!DOCTYPE HTML>
<head>
<title>warna</title>
table,td,th{
}
th{
background-color: green;
color: white;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
- SS
B. Praktikum
1. Praktikum 1
- Script
<!DOCTYPE HTML>
<head>
<title>Tuprak</title>
th{
background-color: blue;
outline-style: solid;
outline-color: red;
color: white;
width: 150px;
font-family: times new roman;
font-size: 15px;
}
td{
background-color: white;
font-family: times new roman;
font-size: 12px;
color: black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Computer</th>
<th>Processor</th>
<th>Ram</th>
<th>System Operasi</th>
</tr>
<tr>
<td>Clnt-1</td>
<td>IP 4 1,8 Ghz</td>
<td>10 GB</td>
<td>Redhat Linux</td>
</tr>
<tr>
<td>Clnt-2</td>
<td>IP 2 Ghz C</td>
<td>6 GB</td>
<td>Mandrake Linux</td>
</tr>
<tr>
<td>Clnt-3</td>
<td>XP 2000+</td>
<td>20 GB</td>
<td>Windows</td>
</tr>
</table>
</body>
</html>
- SS
2. Tugas Praktikum 2
- Script
<!DOCTYPE HTML>
<head>
<title>Tuprak 2 Aimma</title>
table{
border-bottom:2px solid black;
}
th{
background-color: rgb(199, 188, 188);
color: rgb(71, 71,200);
border-bottom:3px solid orangered ;
font-family: calibri;
font-size: 15px;
}
td{
background-color: rgb(233,215,215);
font-family: arial;
font-size: 12px;
color: black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Kompetensi Keahlian</th>
<th>Kode</th>
<th>Jml Diklat</th></th>
<th>Jml Kaitan</th>
<th>Pencapaian</th>
</tr>
<tr>
<td>Animasi</td>
<td>TIKAA073</td>
<td>8</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Teknik Komputer dan jaringan</td>
<td>TIKKJ071</td>
<td>21</td>
<td>21</td></td>
<td>100</td></td>
</tr>
<tr>
<td>Teknik Multimedia</td>
<td>TIKMM072</td>
<td>10</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Rekayasa Perangkat Lunak</td>
<td>TIKRPL070</td>
<td>21</td>
<td>17</td>
<td>81</td>
</tr>
<tr>
<td>Teknik Jaringan Akses</td>
<td>TITJA069</td>
<td>8</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</body>
</html>
- SS
C. Praktikum Css Form
1. Cssform.htm
- Script
<html>
<head>
<title>Pengaturan Pada Form Text Area</title>
form{
border: 1px solid #666666;
width: 70%;
margin-left: 0;
/*jarak fieldset dari batas kiri layout*/
background-color: #ffff66;
}
</style>
</head>
<body>
<form name="formi" method="post" action="">
<table>
<tr>
<td width="50">Nama</td>
<td width="175"><textarea name="textarea"
cols="50"></textarea></td>
</tr>
<td width="50">Pesan</td>
cols="50" rows="14"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
- SS
2. Input.htm
- Script
<!DOCTYPE HTML>
<head>
<title>Pengaturan Pada Form Text Area</title>
textarea{
color:white;
background-color: #FF9933;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table border="1">
<tr>
cols="50"></textarea></td>
</tr>
<td width="50">Pesan</td>
cols="50" rows="14"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
- SS
3. Textfield.htm
- Script
<!DOCTYPE HTML>
<head>
<title>Pengaturan Pada Form </title>
input{
color:#000000;
background-color: white;
border-color:white;
border-bottom-color:black;
border-top: 0px solid;
border-bottom: 2px dotted;
border-left: 0px solid;
border-right: 0px solid;
font-family: tahoma, Arial;
font-size: 11px;
}
</style>
</head>
<body>
<table>
<tr>
<td width="230">:<input type="text"
name="Nama"/></td>
</tr>
<tr>
<td width="58">Alamat</td>
name="Alamat"/></td>
</tr>
</table>
</form>
</body>
</html>
- SS
4. Button.htm
- Script
<!DOCTYPE HTML>
<head>
<title>Pengaturan Pada Form Tombol</title>
input.button{
color:#000000;
background: lightblue;
border-color:white;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-left: 1px dotted;
border-right: 1px dotted;
font-family: Verdana;
font-size: 12px;
}
</style>
</head>
<body>
<table>
<tr>
name="Nama"/></td>
</tr>
<tr>
name="Alamat"/>
</tr>
<tr>
<td></td>
<td>
<input class="button" type="submit"
name="Submit" value="Simpan"/>
name="submit2" value="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
- SS
5. Button2.htm
- Script
<!DOCTYPE HTML>
<head>
<title>Pengaturan Pada Form Tombol</title>
input.button{
color:#fff;
background: #ffa20f;
border:2px outset #BBD16D;
font-family: "calibri", times, serif;
font-size: 14px;
font-weight:bold;
width: auto;
}
input.button:hover{
color: #fff;
background: #0c62a4;
/*biru kayak judul header*/
border: 2px outset #ffa20f;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight:bold;
}
</style>
</head>
<body>
<table>
<tr>
name="Nama"/></td>
</tr>
<tr>
name="Alamat"/>
</tr>
<tr>
<td></td>
<td>
name="Submit" value="Simpan"/>
name="submit2" value="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
- SS
6. Radio.htm
- Script
<!DOCTYPE HTML>
<head>
<title>Pengaturan Pada Form </title>
input.rb1{
background:blue;
border-color: white;
font-family: verdana;
font-size: 12px;
}
input.rb2{
color: #fff;
background:green;
border-color: white;
font-family: verdana;
font-size: 12px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="58">Kelamin</td>
<td width="230">:<input type="radio" class="rb1"
name="rad"/>Pria/Male</td>
</tr>
<tr>
<td width="58"></td>
<td width="230">:<input type="radio" class="rb2"
name="Alamat"/>Wanita/Female</td>
</tr>
</table>
</form>
</body>
</html>
- SS
7. Checkbox.htm
- Script
<!DOCTYPE HTML>
<head>
<title>Pengaturan pada form checkbox</title>
input.checkbox1{
background: blue;
border-color: green;
border-style: outset double;
}
input.checkbox2{
background: yellow;
border-color: red;
border-style: double;
}
input.checkbox3{
background: green;
border-color: black;
border-style: dotted;
}
</style>
</head>
<body>
<table>
<tr>
<td width="58">Hobby :</td>
<td width="230"><input type="checkbox"
name="badmminton"
class="checkbox1"/>Badminton</td>
</tr>
<tr>
<td width="58"> </td>
name="tenismeja" class="checkbox2"/>Tenis
Meja</td>
</tr>
<tr>
<td width="58"> </td>
name="sepakbola" class="checkbox3"/>Sepak
Bola</td>
</tr>
<tr>
<td> </td>
<td><input type="checkbox"
name="golf" class="checkbox3"/>golf</td>
</tr>
</table>
</form>
</body>
</html>
- SS
D. Praktikum Form Css

Aimmatul Azizah 160533611463 Modul4

Diunggah oleh

Informasi Dokumen

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

Aimmatul Azizah 160533611463 Modul4

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN IV

“ PENERAPAN CSS PADA TABEL”

Disusun untuk Memenuhi Matakuliah Pemrograman Berbasis Web

UNIVERSITAS NEGERI MALANG

Anda mungkin juga menyukai