TUGAS PRAKTIKUM

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

Disusun oleh :
Muchamad Ryan Kuncoro

(5130711029)

PRODI TEKNIK ELEKTRO

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS TEKNOLOGI YOGYAKARTA
2015

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 mengubah posisi text heading pada css eksternal dapat menggunakan
source code berikut :
h1{
text-align:left; color:#006;
}
titik koma ( ; ) untuk memisahkan code text dengan warna maupun bentuk text
seperti menambahkan italic, text-align:left untuk menentukan posisi huruf
memet ke kiri untuk tengah bisa menggunakan center dan untuk posisi huruf

dikanan right.
Untuk membuat suatu kotak halaman seperti kertas dapat menggunakan
dengan source code :
#wrp{
width:1024px; height:auto; margin:10px auto;
}
width:1024px; height:auto; margin:10px auto; ini untuk batas tepi kotak dalam
suatu halaman web itu.

Dalam kotak atau #wrp tadi bisa ditambahkan atau dibagi menjadi beberapa
kotak dan ukuran kotak sesuai dengan yang diinginkan,
berikut source codenya :
.kotak1{
width:1024px; height:100px; background-color:#FFF; textalign:center; font-size:24px;
}
.kotak2{
width:324px; height:400px; background-color:#0FF;
float:right;

}
.kotak3{
width:700px; height:400px; background-color:#3F0;
float:left;
}
.kotak4{
width:1024px; height:100px; background-color:#00F;
float:right;
}
.kotak1 ini untuk memberi class dalam bagian #wrp tadi dengan ukuran,

background maupun jenis text, ukuran text, dll.

Untuk mengabungkan atau memanggil file css dapat menambahkan code
berikut pada file html setelah bagian title :
<link rel="stylesheet" type="text/css" href="style.css"/>
href="style.css ini untuk memanggil nama file css yang sudah dibuat.

Untuk memanggil #wrp dan beberapa class yang sudah dibuat di css dapat
dengan source code berikut :
<div id="wrp">
<div class="kotak1">
HEADER <br>
PRAKTIKUM PEMROGRAMAN WEB PERTEMUAN 2
(CSS)</div>
<div class="kotak2">
SIDEBAR
</div>
<div class="kotak3">
CONTENT<br>
<center><img src="gunung.JPG" alt="gunung"
style="width:500px;"></center>
</div>
<div class="kotak4">
FOOTER
</div>
</div>

<div ini untuk memulai pemanggilan code yang ada pada file css dan </div>
ini untuk mengakhiri atau mengapit suatu code yang dibuat, class="kotak1"
untuk memanggil class pada css.