LAPORAN RESMI modul 3
advertisement
LAPORAN RESMI
PRAKTIKUM WEB 1
MODUL III
CSS (Font, Text, Color)
(Cascading Sytle Sheet)
DisusunOleh:
NAMA
NRP
JURUSAN
DOSEN
KELAS B
AULIA WAHYU PERMATASARI.S
120451100032
MANAJEMEN INFORMATIKA
SRI HERAWATI, S.KOM
TELAH DISETUJUI TANGGAL :
.....-......-.....
ASISTEN PRAKTIKUM
NORMAN HIDAYATULLAH
( 11.04.5.1.1.00001)
LABORATORIUM BISNIS INTELIJEN
SISTEMJURUSAN MANAJEMEN INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BAB I
PENDAHULUAN
1.1 Latar Belakang
CSS merupakan kependekan dari Cascading Style Sheet yang memungkinkan anda
untuk mendesain (style) tampilan dokumen (terutama HTML) dengan memisahkan
tampilan dokumen HTML dengan kode untuk menampilkannya.
Penggunaan paling umum dari CSS adalah untuk memformat halaman web yang
ditulis dengan HTML dan XHTML. CSS digunakan oleh penulis maupun pembaca
halaman web untuk menentukan warna, jenis huruf, tata letak dan berbagai aspek
tampilan dokumen.
1.2 Tujuan
Mampu menjelaskan mengenai pengenalan CSS, Selector, komentar, mekanisme,
mebuat aplikasi perintah-perintah CSS
BAB II
DASAR TEORI
2.1 Selector
Adalah nama yang diberikan untuk setiap Style berbeda yang dibuat. Didalam Style
didefinisikan bagaimana setiap Selector akan bekertja (font, color, dan lain-lain).
Kemudian di dalam bagian body halaman web, Selector tersebut dipanggil untuk
mengaktifkan Style yang telah didefinisikan.
Jenis-jenis Selector:
a. Selector HTML
Digunakan untuk mendefinisikan Style yang berhubungan dengan tag HTML,
melakukan redefinidi tag normal HTML
Syntax: SelectorHTML {properti: Nilai;}
b. Selector Class
Digunakan untuk mendefinisikan Style yang dapat dipakau tanpa melakukan
redefinisi tag HTML
Syntax: ClassSelector {Properti: Nilai;}
c. Selector ID
Digunakan untuk mendefinisikan Style yang berhubungan dengan suatu object
memanfaatkan ID unik, biasa digunakan saat bekerja dengan layar.
Syntax: #IDSelector {Properti: Nilai;}
2.2 Mekanisme mengaplikasikan CSS
1. Stlye didefinisikan dalam tag HTML (tag tunggal)
2. Stlye didefinisikan didalam bagian <head> dan diaplikasikan untuk seluruh
dokumen HTML tersebut
3. Stlye didefinisikan di file eksternal yang selanjutnya dapat digunakan dengan layar
dokumen HTML manapun dengan memasukkan CSS tersebut dalam dokumen
yang diinginkan melalui URL
2.3 Elemen-elemen CSS
1. Font
Digunakan untuk mengatur tingkah laku huruf (font). Elemen ini mempunyao
beberapa properti. Satu properti dapat mempunyai beberapa nilai
2. Text
Elemen text akan membuat tampilan teks menjadi lebih menarik
3. Color
Elemen color yang digunakan untuk mengatur warna teks dan background
halaman web
4. Link
Digunakan sebagai penghubung sehingga dapat digunakan untuk berpindah dari
bagian satu ke bagian yang laib, dari satu halaman ke halaman lain bahkan dari
situs ke situs lainnya. CSS menyediakan element link yang dapat digunakan untuk
mengatur perilaku link
BAB IV
IMPLEMENTASI
1. Modifikasilah script di atas sehingga link-nya dapat brubah warna pada saat
mouseover
CSS :
<style type = "text/css">
a:visited{
color : black ;
text-decoration : none;
}
a:hover{
color : blue ;
text-decoration : none;
}
body{
background-image : url("file:///D:/Photo/anime/lts_juin07.jpg");
}
a{
font-size:14px;
color:red;
}
Web
<html>
<head>
<title>CSS1</title>
<link rel="stylesheet" href="css2.css" type="text/css">
<style type="text/css">
a{
text-decoration : none;
}
h3{
background-color : white;
color : blue;
}
</style>
</head>
<body>
<ul>
<li><a href="#">This is a link</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four<background-attachment></a></li>
</ul>
<h3>Judulnya</h3>
<p>Ribuan orang berburu konser Boys Like Girls,
sementara dulu, pertama memulai karirnya konser
mereka hanya dilihat 25 orang saja. mereka pun
tak melupakan hal tersebut</p>
</body>
</html>
Output
2. Modivikasikanlah CSS pada soal no.1 sehingga tampak seperti gambar berikut :
<html>
<head>
<title>Implementasi Modul 3 No 2</title>
<style type="text/css">
.h1, .teks
{
font-family:Times New Roman;
}
.h1
{
font-size:30pt;
color:orange;
background-color: #F1F2EC;
border-top:2px solid gray;
border-bottom:2px solid gray;
}
.subline
{
font-size:18pt;
color:black;
}
.teks
{
font-size:15pt;
color : black;
}
</style>
</head>
<body>
<h1 class="h1">V<b class="subline">ISI</b></h1>
<pre><p class="teks">
Visi Fakultas Hukum adalah mampu menghasilkan tenaga profesional
dibidang hukum yang memiliki kompetensi dan mampu mengembangkan diri
dalam meningkatkan kualitas di bidang pelayanan hukum
</pre></p>
</body>
</html>
Output
BAB V
PENUTUP
KESIMPULAN DAN SARAN
Kesimpulan :
CSS atau Cascading Style Sheet digunakan untuk melengkapi file HTML dan tugas
utamanya adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah
website. CSS memungkinkan web developer untuk memisahkan HTML dari aturan-aturan
untuk membentuk tampilan sebuah website.
CSS dapat mengubah besar kecilnya text, mengganti warna background pada
sebuahhalaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi
hal yang dapat dilakukan CSS.
Saran :
Diharapkan asisten praktikum dapat membimbing para peserta praktikum dengan baik
sehingga para peserta praktikum dapat memahami apa yang sedang di praktikkan dan bisa
mempraktikkannya sendiri selain itu asisten praktikum bisa membantu para peserta
praktikum yang kesulitan memahami materi praktikum.
