Pemweb a Modul2 Didik Tri H

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{


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

:

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{


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{


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;


}

#addres input{

border-radius:10px;

}

#submit{


margin: 0 auto;

margin-top: 10px;

width: 840px;

height: 35px;


}

#footer{


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

Pemweb a Modul2 Didik Tri H

Documents

Transcript of Pemweb a Modul2 Didik Tri H