TUGAS PRAKTIKUM

LAPORAN 3
PEMROGRAMAN WEB
Dosen : Rodhiyah Mardiyah, S. Kom

Disusun oleh :
Muchamad Ryan Kuncoro

(5130711029)

PRODI TEKNIK ELEKTRO

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS TEKNOLOGI YOGYAKARTA
2016

A. MEMBUAT CSS EKSTERNAL

Pertama membuat file html dengan isi tiltle, judul, paragraf, heading, dll seperti
pada pertemuan sebelumnya setelah selesai, buatlah file baru dengan format file
.css
Berikut catatan source code pada css eksternal :
Setelah membuat file css, untuk menambahkan background warna atau gambar
dengan source code berikut, namun saya disini menggunakan background
warna :
body {

background-color:#999;
}
Untuk membuat suatu kotak halaman seperti kertas dapat menggunakan
dengan source code :
#wrp {
width: 85%;
height:auto;
margin: 15px auto;
background-color:#09F;
}

width:85%; untuk lebar halaman dengan ukuran 85% nya background atau
halaman web itu sendiri, height:auto; untuk ukuran tinggi yang automatis
menyesuaikan, margin:10px auto; ini untuk batas tepi kotak dalam suatu
halaman web itu, background-color:#09F; untuk memberi warna pada

background wrp.
Menambahkan suatu id konten :
#konten{
width:100%;
420px; web bisa menggunakan source
Untuk menambah gambar/logoheight:
pada tampilan
}
code berikut :
#logo{
width: 100px;
height: 100px;
margin-left: 35px;
margin-top:30px;
float: left;
border-radius: 30px 30px 30px 30px;
overflow: hidden;
}

#logo ini untuk memberi id pada logo, dengan ukuran, background maupun
jenis text, ukuran text, dll.
border-radius: 30px 30px 30px 30px; untuk mengkrucutkan atau menjadikan

logo/gambar garis tepi lebih smoth(halus).

Membuat suatu class baru dengan memberi nama menu dengan memberi
ukuran lebar, panjang, huruf, warna huruf, warna bacground, dll :
.menu {
width:120px;
height:45px;
border: 2px solid #F90;
float: left;
text-align: center;
line-height: 45px;
font-family: Verdana;
border: 2px solid #F90;
untuk
memberikan ruang agar dapat ditambah dengan
font-size:
18px;

garis tepi dengan ukuran 2px dan warna #F90 pada tiap class menu.
color: #FFF;
margin-right: 2px; untuk menambah margin/jarak antar class menu
Membuat tampilan margin-right:
ketika kusor mouse
2px; di arahkan pada kotak menu :
}

.menu:hover{
background-color: #FF0;
color:#000;
font-size:18px;
font-weight: bold;
line-height: 45px;
}

Menambah suatu garis tepi pada tiap menu dengan warna background, lebar
dan tinggi yang sesuai :
#Line-menu {
width: 100%;
height: 50px;
background-color: #333;
}

B. MEMBUAT FILE HTML

Membuat judul web :

<title>CSS Dua</title>

Memanggil file css yang sudah dibuat :

<link rel="stylesheet" type="text/css" href="lat_css2.css" />

Memanggil id wrp :
<div id="wrp">
</div>

Memanggil/menampilkan header yang sudah dibuat pada file css :

<div id="header">
<div id="logo">
<img src="IMG_20160219_075125.jpg" alt="Animasi"
style="width:110px; height:110px" >
</div> <!---Menambahkan gambar/logo--->
<div id="judul">MEONG.com <!---Memberi judul isi web--->
</div>
<div id="judul2">Bukan sekedar web biasa penuh dengan bualan
</div> <!---Memberi judul atau isi keterangan web--->
</div>

Menampilkan konten menu :

<div id="konten">
<div id="Line-menu">
<a href="#"><div class="menu">Home</div></a>
<a href="#"><div class="menu">Profile</div></a>
<a href="#"><div class="menu">Login</div></a>
<a href="#"><div class="menu">About Us</div></a>
</div>
</div>
<a href="#"><div class="menu">Home</div></a> untuk memberi menu
link dengan kata "Home"

Tampilan Web :