pemweb a modul2 didik tri h
DESCRIPTION
laporan praktikum pemrograman web UTM oleh didikTRANSCRIPT
-
LAPORAN RESMI
PRAKTIKUM PEMROGRAMAN WEB
MODUL II
DESAIN HTML & CSS
Disusun Oleh :
LABORATORIUM COMMON COMPUTING
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
2012
TGL. PRAKTIKUM : 8 Oktober 2013
NAMA : Didik Tri Haryanto
NRP : 11.04.1.1.1.00019
KELOMPOK : A1
DOSEN :
TELAH DISETUJUI TANGGAL :
...........................................
ASISTEN PRAKTIKUM
Aditya
09.04.1.1.1.00096
-
BAB I
PENDAHULUAN
1.1 LATAR BELAKANG
Cascading Style Sheet (CSS), merupakan format gaya yang digunakan
pada HTML. CSS dapat merubah gaya penampilan pada setiap tag HTML.
CSS dapat ditempatkan dalam 2 cara yaitu langsung di HTML ataupun di buat
file sendiri.
1.2 TUJUAN
Tujuan mahasiswa mengikuti praktikum ini adalah :
1. Mahasiswa dapat mengetahui Desain HTML dan CSS.
2. Mahasiwa dapat memahami konsep HTML dan CSS.
3. Mahasiswa dapat menggunakan pemprograman HTML dan CSS untuk
pembuatan aplikasi berbasis web.
-
BAB II
DASAR TEORI
1.1 Langsung didalam setiap Tag HTML
1.2 Mereferensi pada Link File diluar yang dikhususkan untuk CSS
Standar desain HTML dan CSS saat ini dilakukan dengan:
pengelompokan desain sesuai pembagian elemen secara independen
menggunakan tag DIV
menggunakan link CSS untuk memudahkan manajemen dan
reusability
menggunakan selektor pseudo ID dan Class.
Diantara style CSS:
layout
o background
Posisi:
o Position, menentukan posisi elemen pada layout
Absolute, jarak mutlak sesuai koordinat tanpa pengaruh elemen
lainnya
Relative, menyesuaikan dengan bagian sebelumnya
o Margin, menentukan jarak outer
o Padding, menentukan jarak inner
-
Gambar 2.1 Margin dan Pagging pada CSS
Teks
o font, jenis font yang digunakan
o text, posisi text
o color, warna texs
Action
o link, setiap url link
o active, url link aktif
o hover, saat url link disorot
o visited, url link pernah dikunjungi
-
BAB III
IMPLEMENTASI
3.1 Kegiatan Praktikum
SourceCode fom1.html
This is My Web
.halaman{
border: 1px solid darkgrey;
width: 600px;
height: 670px;
margin: 0 auto;
background-color: #BBB;
-webkit-box-shadow: 5px 5px 5px #888;
}
#header{
border: 0px solid black;
backroundp-image: -moz-linear-
gradient(center top, #666666, #fff)
width: 600px;
height: 100px;
font-size: 40px;
}
#biodata{
border: 0px solid blue;
margin: 0 auto;
width: 600px;
height: 450px;
background: #EEEEEE;
}
-
.isi{
border: 0px solid red;
margin: 0 auto;
width: 575px;
height: 390px;
background: #ddd;
-webkit-border-radius:10px;
-webkit-box-shadow: 5px 3px 5px #888;
}
#legend1{
padding-top: 10px;
}
#student{
margin: 0 auto;
width: 535px;
background: #CCC;
}
#legend2{
padding-top: 4px;
}
#addres{
margin: 0 auto;
width: 535px;
background: #CCC;
}
#submit{
border: 1px solid darkgrey;
margin: 0 auto;
margin-top: 10px;
width: 555px;
height: 35px;
background: #CCC;
}
This is My Web
Form
Biodata
-
Student Detail
Nama
:
Faculty
:
Field study
:
Contact Address
Address
-
:
City/town in
:
Country
:
Postcode
:
Email address
:
Telephone
:
-
Copyright2012.mydesign.com
-
Running form1.html
3.2 Pertanyaan Praktikum
1. Jelaskan fungsi script CSS3 sebagaimana berikut dan jelaskan hasil
keluaran penggunaannya:
background-image: linear-gradient
border-radius
box-shadow
2. Apa perbedaan utama antara margin dan padding
-
3. Jelaskan fungsi float dan position untuk penataan posisi elemen pada
layout.
4. Sebutkan 5 elemen CSS baru yang anda ketahui dan sebutkan fungsinya.
3.3 Jawaban
1. background-image: linear-gradient untuk memberikan latar belakang
dengan warna gradient.
border-radius untuk menghilang sudut lancip di setiap sisi
box-shadow untuk memberikan efek bayangan pada tabel
2. Padding adalah jarak-dalam sebuah bagian (div). Berapa jarak-dalam
suatu objek akan ditempatkan didalam division wrapper.
Margin adalah jarak-luar sebuah bagian. Jika pada contoh kasus padding
di atas baju sebagai bagiannya sekarang dibalik, tubuh manusialah
sebagai bagian utamanya.
3. Float merupakan elemen yang berguna mengatur posisi elemen html
secara horizontal yang berpatokan pada elemen-elemen yang
membungkusnya, entah itu DIV, Table, Browser dan yang lain. Seperti
yang sudah saya katakan sebelumnya, elemen ini hanya dapat mengatur
posisi secara horizontal, sehingga hanya memiliki empat buah nilai yang
bisa dipakai yaitu: LEFT, RIGHT, NONE dan INHERIT.
Position mirip dengan float yang membedakan hanyalah penempatan
elemen, jika dengan float kita hanya dapat membuat elemen html saling
berdampingan, dengan positioning kita dapat membuat elemen html untuk
saling tindih.
4. Circle : dalam bentuk lingkaran
Squeare : dalam bentuk persegi
Upper-roman : dalam bentuk angka romawi
Lower-alpha : dalam bentuk huruf alphabet kecil
-
BAB IV
TUGAS PRAKTIKUM
4.1 Pertanyaan
Dengan menggunakan HTML desainer yang terdapat pada Netbeans buatlah
desain form HTML, sebagai berikut:
4.2 Jawaban
SourceCode form2.html
Common Computing
Common
Computing
Laboratory
Home
Laboratorium
Common Computing
Sistem Informasi
Computation & AI
SISTER
TIA
-
Praktikum
Pemprogaman Web
PCD
Basis Data
Informasi
Dosen Pengampuh
Asisten
Jadwal
Pesan
Form
Biodata
Student Detail
Nama
:
Faculty
:
Field study
:
-
Contact Address
Address
:
City/town in
:
Country
:
Postcode
:
Email address
:
Telephone
:
-
l,
Copyright2013.mydesign.com
SourceCode CssForm.css
.halaman{
border: 1px solid darkgrey;
width: 900px;
height: 800px;
margin: 0 auto;
background-color: steelblue;
box-shadow: 5px 5px 5px #888;
border-radius:10px;
}
#header{
border: 0px solid black;
width: auto;
height: 190px;
font-size: 40px;
border-radius:10px;
background: linear-gradient(steelblue, white);
}
#gmb{
float: right;
padding-top: 40px;
padding-right: 20px;
-
}
#menu{
position:relative;
border:0px solid black;
margin-top:3px;
width:900px;
height:50px;
background: sandybrown;
}
#menu ul{
margin:0;
padding:0;
}
#menu ul li{
position:relative;
float:left;
list-style: none;
}
#menu ul li a{
display:block;
text-decoration:none;
color:white;
padding:10px;
float:left;
border-right:0px solid white;
}
#menu ul li a:hover{
background:burlywood;
border-radius:10px;
font-family: Georgia,'Times New Roman',times,serif;
}
#menu ul li ul{
display:none;
border-radius:10px;
}
#menu ul li:hover ul{
display:block;
position:absolute;
top:41px;
}
#menu ul li:hover ul li a{
display:block;
-
background:burlywood;
color:white;
width:130px;
border-bottom:1px solid white;
}
#menu ul li:hover ul li a:hover{
background:whitesmoke;
color: burlywood;
}
#biodata{
border: 0px solid blue;
margin: 0 auto;
width: 900px;
height: 450px;
background: aqua;
}
.isi{
border: 0px solid red;
margin: 0 auto;
width: 870px;
height: 405px;
background: appworkspace;
border-radius:10px;
box-shadow: 5px 3px 5px #888;
}
#legend1{
padding-top: 10px;
}
#student{
margin: 0 auto;
width: 820px;
background: turquoise;
}
#student input{
border-radius:10px;
}
#legend2{
padding-top: 4px;
}
#addres{
margin: 0 auto;
-
width: 820px;
background: turquoise;
}
#addres input{
border-radius:10px;
}
#submit{
border: 1px solid darkgrey;
margin: 0 auto;
margin-top: 10px;
width: 840px;
height: 35px;
background: turquoise;
}
#footer{
border: 0px solid red;
width: auto;
height: 110px;
border-radius:10px;
background: linear-gradient(white, steelblue);
}
#footer h3{
padding-left: 140px;
}
Running form2.html
-
BAB V
PENUTUP
5.1 KESIMPULAN
Cascading Style Sheet (CSS), merupakan format gaya yang digunakan
pada HTML. CSS dapat merubah gaya penampilan pada setiap tag HTML.
CSS dapat ditempatkan dalam 2 cara yaitu langsung di HTML ataupun di
buat file sendiri.
5.2 SARAN
Selama praktikum berlangsung tolong asisten mendampingi dan
mengawasi praktikan supaya tidak ada yang ketinggalan. Pada waktu
menejelaskan dimohon untuk pelan-pelan dan terperinci supaya praktikan
bias mengerti semua