LAPORAN PRAKTIKUM PEMROGRAMAN WEB 1
Modul 4 - CSS(Cascading Style Sheet) , Class dan ID CSS
Dosen Pengampu : Delia, S.Kom.
Dibuat oleh :
2015091009
Agrian Dwi Lesmana
Sistem Informasi 2015 B
SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER
UNIVERSITAS KUNINGAN
2016/2017
[Praktikum]
Praktikum 7
<style type="text/css">
#polesteks {color: green; size:34;}
</style>
<body>
<b id="polesteks">Saya adalah CSS</b>
<b id="polesteks">Saya adalah CSS</b>
</body>
|
Tampilan :
Analisis :
#polesteks {color: green;
size:34;}
Jika #polesteks dipanggil di
tag body maka semua tulisan di tag body akan berwarna hijau dan ukuran fontnya
34.
Praktikum 8
<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 :
Analisis :
p.italic{font-size:200%;
font-style:italic}
Mengatur ukuran font 200% dan font akan berbentuk italic
p.normal{font-family:arial
font-style:normal}
Mengatur jenis fontnya Arial, dan bentuknya normal
p.oblique{font-style:oblique}
Mengatur bentuk fontnya menjadi oblique
Praktikum 9
<html>
<head>
<style type="text/css">
body{
background-image:
url("bunga.jpg");
background-repeat:
no-repeat;
background-position:
right top;
margin-right:
200px;}
</style>
</head>
<body>
</h1>Helllo World!</h1>
<p>background no-repeat, set position example.</p>
<p>now the background image is only shown once, and positioned
away from 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>merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam</p>
<p>CSS bukan merupakan bahasa pemrograman</p>
</body>
</html>
|
Tampilan :
background-image:
url("bunga.jpg");
Mengatur background web dengan gambar Bunga.jpg
background-repeat: no-repeat;
Gambar background tidak akan berulang
background-position: right top;
Mengatur gambar background agar berada di kanan atas
margin-right: 200px;
mengatur jarak dari kiri kanan sepanjang 200px
Praktikum 10
<!DOCTYPE html>
<html>
<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>
<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="country">Program Studi</label>
<select
id="country" name="country">
<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">
</form>
</div>
</body>
</html>
|
Tampilan :
Menggunakan CSS untuk mengatur tampilan Form HTML
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;
}
Mengatur tampilan pada tag
select, yaitu lebarnya 100%, paddingnya 12px x 20px, marginnya 8px x 0px,
displaynya inline, bordernya 1px dan warnyanya #ccc, border-radiusnya 4px, dan
box-sizingnya berbentuk box.
[Tugas]
1. Buatlah tampilan HTML seperti berikut :
Jawaban :
- Pertama kita buat file cssnya terlebih dahulu, simpan dengan nama tugas.css
*
{margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#000;
}
nav {
margin:auto;
text-align: center;
width: 100%;
}
nav ul ul
{
display: none;
}
nav ul
li:hover > ul{
display:
block;
width:
150px;
}
nav ul {
background: #53bd84;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
width: 100%;
}
nav
ul:after {
content: "";
clear:both;
display: block;
}
nav ul li{
float:left;
}
nav ul
li:hover{
background:#666;
}
nav ul
li:hover a{
color:#fff;
}
nav ul li
a{
display: block;
padding: 25px;
color: #fff;
text-decoration: none;
}
nav ul ul{
background: #53bd84;
border-radius: 0px;
padding: 0;
position: absolute;
top:100%;
}
nav ul ul
li{
float:none;
border-top: 1px soild #53bd84;
border-bottom: 1px solid #53bd84;
position: relative;
}
nav ul ul
li a{
padding: 15px 40px;
color: #fff;
}
nav ul ul
li a:hover{
background-color: #666;
}
nav ul ul
ul{
position: absolute;
left: 100%;
top: 0;
}
|
- Kemudian kita buat file html nya, simpan dengan nama tugas.html
<link
rel="stylesheet" type="text/css"
href="tugas.css">
<nav>
<ul>
<li><a
href="Tugas.html">Home</a></li>
<li><a
href="Tugas.html">News</a></li>
<li><a
href="Tugas.html">Contacs</a></li>
<li><a
href="Tugas.html">About</a></li>
</ul>
</nav>
|
0 komentar:
Posting Komentar