SlideShare a Scribd company logo
Pengertian & Manfaat CSS
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup /
markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai
: CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman
HTML.
Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:
“bahasa pemrograman untuk mengatur tampilan suatu website atau blog”
Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak
antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta
masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan
Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun
penggunaan CSS merupakan kelebihan tersendiri.
Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena
merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan
aplikasi notepad untuk menciptakan script CSS sendiri.
Manfaat dari CSS:
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia
XHTML,
5. Digunakan dalam hampir semua web browser.
Keuntungan Menggunakan CSS
· CSS memberikan keseragaman pada halaman web.
· Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan
CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat
perubahan dalam style sheet.
· CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
· Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
· CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.
Ini adalah contoh dari css itu sendiri..
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
border-colapse:colapse;
border:1px solid black;
}
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
}
#menu table{
border:none;
}
#menu a{
color:white;
text-decoration:none;
}
#menu a:hover{
background-color:white;
color:black;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi li{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi img{
boder: 1px solid black;
width: 80px;
height: 100px;
}
.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #808080;
}
.footer{
background-color:#C0C0C0;
}
#isi h1 {
font-weight:700px;
font-size:35px;
color:#064475;
text-shadow:
1px 2px 1px #9ad2fe,
-1px -2px 1px #DCDCDC;
}
#text h2 {
font-weight:755px;
font-size:35px;
color:#fff;
text-shadow:
0 0 3px #FFFFA0,
0 0 5px #FFFF4D,
0 0 9px #FFFF41,
0 0 20px #FFFF2A,
0 0 25px #FFFF2B,
0 0 30px #FEFE00,
0 0 40px #F7F700;
}
#text1 li {
font-weight:400px;
font-size:10px;
color:black;
text-shadow:
1px 2px 1px #FFFFFF,
-1px -1px 1px #DCDCDC;
}
#header{
background-image:url(header.jpg);
width:1000px;
height:200px;
}
</style>
</head>
<body>
<table width="70%" align="center">
<tr>
<td id="header" colspan=2>
<h2 style="opacity: 0.5; filter: alpha(opacity=50); width: 100%; font-
size: 20pt;">SAUDARA_PRODUCTION @2014</h2>
<h1 style="opacity: 0.5; filter: alpha(opacity=50); width: 100%; font-
size: 20pt;">kerja kerja kerja!!!</h1>
</td>
</tr>
<tr>
<td colspan=2>
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a
href="www.faceboook.com" title="Depan | Saudara_Production">Depan</a></td>
<td align="center"><a
href="www.faceboook.com" title="Profil | Saudara_Production">Profil</a></td>
<td align="center"><a
href="www.faceboook.com" title="Produk | Saudara_Production">Produk</a></td>
<td align="center"><a
href="www.faceboook.com" title="Kontak | Saudara_Production">Kontak</a></td>
<td align="center"><a
href="www.faceboook.com" title="Forum | Saudara_Production">Forum</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="isi">
<h1 style="color:blue; font:bold 16px Candara, Arial,
Tahoma;"> Ayo Minum Susu</h1>
<img src="susu.jpg"/>
<p>Susu adalah sebuah cairan bergizi yang dihasilkan
oleh kelenjar susu dari mamalia betina.
Susu adalah sumber gizi utama bagi bayi sebelum
mereka dapat mencerna makanan padat.
Susu binatang (biasanya sapi) juga diolah menjadi
berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan
lain-lainnya untuk konsumsi manusia.
Semua orang di dunia ini membutuhkan susu untuk
menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.
<p>Khasiat susu sapi ternyata banyak sekali. Susu yang
banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung
banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh.
Dalam segelas susu terdapat antara lain:
<ul>
<li>Potasium, yang menggerakkan pembuluh
darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
<li>Zat besi, mempertahankan kulit tetap
bersinar.</li>
<li>Tyrosine, mendorong hormon kegembiraan
dan membuat tidur lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung dan sistem
saraf sehingga tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak
cepat.</li>
<li>Seng, menyembuhkan luka dengan
cepat.</li>
<li>Vitamin B2, meningkatkan ketajaman
penglihatan.</li>
</ul>
</p>
</p>
</div>
</td>
<td style="color:black; font:11px Candara;" width="30%"
class="table-menu">
<font face="Aklatanic TSO" size="5"
color="white"><b><marquee behavior="alternate" scrollamount="5" loop="">::
PETUALANGAN ::</marquee></b></font>
<div id="text">
<h2 style="font:bold 13px Tahoma;">Bromo Tengger</h2>
<img src="bromo.jpg" width="50%" height="9%"
class="gambar"/>
<div id="text1">
<li>Bromo Tengger Semeru National Park is located in East
Java, Indonesia, to the east of Malang and to the southeast of Surabaya, the capital of East
Java. Wikipedia Address: Jl. Raden Intan No.6, Indonesia Area: 194.1 sq miles (502.8 km²)
Phone: +62 341 491828</li>
<div align="right" id="nex"><em><a href="">Read more --
></a></em></div>
<h2 style="font:bold 13px Tahoma;">Teluk Ijo</h2>
<img src="teluk.jpg" width="56%" height="16%"
class="gambar"/>
<li>Teluk ijo berlokasi di Kecamatan Pesanggaran tepatnya di
desa Sarongan. Berjarak sekitar 90 km arah selatan dari kota Banyuwangi. Untuk menuju
pantai ini dari Banyuwangi kita tinggal mengikuti petunjuk arah menuju Pesanggaran-
Sarongan-Sukamade yang masih satu jalur dengan rute menuju pantai sukamade Taman
Nasional Merubetiri.</li>
<div align="right" id="nex"><em><a href="">Read more --
></a></em></div>
</td>
</div>
</div>
</tr>
<tr>
<td colspan=2 height=50 class="footer" align="center">
<a href="https://Saudara_Production"><img src= fb.png ></a>
<a href="https://Saudara_Production"><img src= tw.png
></a></center>
<div style="color:black; font:bold 12px candara, arial,
tahoma;"id="nex"><a href="">About</a>
| Powered by Saudara_Production</div>
</tr>
</table>
</body>
</html>
Gambar diatas adalah contoh dari css, dimana terdapat banyak style
height : Mengeset tinggi dari sebuah elemen
width : Mengeset lebar dari suatu elemen
table : Mengeset algoritma yang digunakan untuk menampilkan sel tabel, baris, dan kolom
background-repeat : Mengeset apakah/bagaimana background akan diulang
background-image : Mengeset sebuah gambar menjadi sebuah background
background-color : Mengeset warna latar background suatu elemen
font : Mengeset semua properti untuk font(huruf) dalam satu deklarasi
color : Mengeset warna teks
text-align : Mengatur teks agar rata kanan, kiri, tengah, atau kanan-kiri pada elemen
border : Mengeset semua properti untuk 4-border (yang tertutup) dalam satu deklarasi

More Related Content

What's hot

Pertemuan 6 tabview
Pertemuan 6 tabviewPertemuan 6 tabview
Pertemuan 6 tabview
heriakj
 
Setting dan aktivasi doi one day crossref
Setting dan aktivasi doi one day crossrefSetting dan aktivasi doi one day crossref
Setting dan aktivasi doi one day crossref
Relawan Jurnal Indonesia
 
Matematika Diskrit kombinatorial
Matematika Diskrit  kombinatorialMatematika Diskrit  kombinatorial
Matematika Diskrit kombinatorial
Siti Khotijah
 
Pertemuan 2 Pemodelan Perangkat Lunak
Pertemuan 2 Pemodelan Perangkat Lunak Pertemuan 2 Pemodelan Perangkat Lunak
Pertemuan 2 Pemodelan Perangkat Lunak
Disma Ariyanti W
 
Metode Numerik Penyelesaian Persamaan Linier Simultan
Metode Numerik Penyelesaian Persamaan Linier SimultanMetode Numerik Penyelesaian Persamaan Linier Simultan
Metode Numerik Penyelesaian Persamaan Linier Simultan
Aururia Begi Wiwiet Rambang
 
#1 PENGENALAN PYTHON
#1 PENGENALAN PYTHON#1 PENGENALAN PYTHON
#1 PENGENALAN PYTHON
Rachmat Wahid Saleh Insani
 
Vektor vektor di ruang dimensi 2 dan ruang
Vektor vektor di ruang dimensi 2 dan ruangVektor vektor di ruang dimensi 2 dan ruang
Vektor vektor di ruang dimensi 2 dan ruangSebastian Rizal
 
Latihan praktek microsoft access
Latihan praktek microsoft accessLatihan praktek microsoft access
Latihan praktek microsoft accessndriehs
 
Jawaban Struktur data soal-latihan
Jawaban Struktur data soal-latihanJawaban Struktur data soal-latihan
Jawaban Struktur data soal-latihan
Bina Sarana Informatika
 
Makalah Metode Numerik : Sistem Persamaan Linear
Makalah Metode Numerik : Sistem Persamaan Linear Makalah Metode Numerik : Sistem Persamaan Linear
Makalah Metode Numerik : Sistem Persamaan Linear
Kannal Bakti Pakinde
 
Kohonen SOM dan Learning Vector Quantization (LVQ)
Kohonen SOM dan Learning Vector Quantization (LVQ)Kohonen SOM dan Learning Vector Quantization (LVQ)
Kohonen SOM dan Learning Vector Quantization (LVQ)
petrus fendiyanto
 
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQLLaporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Shofura Kamal
 
Struktur Data Tree
Struktur Data TreeStruktur Data Tree
Struktur Data Tree
Siti Khotijah
 
5. Doubly Linked List (Struktur Data)
5. Doubly Linked List (Struktur Data)5. Doubly Linked List (Struktur Data)
5. Doubly Linked List (Struktur Data)
Kelinci Coklat
 
Materi 3 Finite State Automata
Materi 3   Finite State AutomataMateri 3   Finite State Automata
Materi 3 Finite State Automata
ahmad haidaroh
 
CFG dan PARSING - P 5 - Teknik Kompilasi
CFG dan PARSING - P 5 - Teknik KompilasiCFG dan PARSING - P 5 - Teknik Kompilasi
CFG dan PARSING - P 5 - Teknik Kompilasi
ahmad haidaroh
 
Dts x dicoding #3 memulai pemrograman kotlin
Dts x dicoding #3 memulai pemrograman kotlinDts x dicoding #3 memulai pemrograman kotlin
Dts x dicoding #3 memulai pemrograman kotlin
Ahmad Arif Faizin
 

What's hot (20)

Pertemuan 6 tabview
Pertemuan 6 tabviewPertemuan 6 tabview
Pertemuan 6 tabview
 
Setting dan aktivasi doi one day crossref
Setting dan aktivasi doi one day crossrefSetting dan aktivasi doi one day crossref
Setting dan aktivasi doi one day crossref
 
Soal uas struktur data
Soal uas struktur dataSoal uas struktur data
Soal uas struktur data
 
Latihan soal struktur data
Latihan soal struktur dataLatihan soal struktur data
Latihan soal struktur data
 
Matematika Diskrit kombinatorial
Matematika Diskrit  kombinatorialMatematika Diskrit  kombinatorial
Matematika Diskrit kombinatorial
 
Pertemuan 2 Pemodelan Perangkat Lunak
Pertemuan 2 Pemodelan Perangkat Lunak Pertemuan 2 Pemodelan Perangkat Lunak
Pertemuan 2 Pemodelan Perangkat Lunak
 
Metode Numerik Penyelesaian Persamaan Linier Simultan
Metode Numerik Penyelesaian Persamaan Linier SimultanMetode Numerik Penyelesaian Persamaan Linier Simultan
Metode Numerik Penyelesaian Persamaan Linier Simultan
 
#1 PENGENALAN PYTHON
#1 PENGENALAN PYTHON#1 PENGENALAN PYTHON
#1 PENGENALAN PYTHON
 
Vektor vektor di ruang dimensi 2 dan ruang
Vektor vektor di ruang dimensi 2 dan ruangVektor vektor di ruang dimensi 2 dan ruang
Vektor vektor di ruang dimensi 2 dan ruang
 
Tahap pemrograman
Tahap pemrogramanTahap pemrograman
Tahap pemrograman
 
Latihan praktek microsoft access
Latihan praktek microsoft accessLatihan praktek microsoft access
Latihan praktek microsoft access
 
Jawaban Struktur data soal-latihan
Jawaban Struktur data soal-latihanJawaban Struktur data soal-latihan
Jawaban Struktur data soal-latihan
 
Makalah Metode Numerik : Sistem Persamaan Linear
Makalah Metode Numerik : Sistem Persamaan Linear Makalah Metode Numerik : Sistem Persamaan Linear
Makalah Metode Numerik : Sistem Persamaan Linear
 
Kohonen SOM dan Learning Vector Quantization (LVQ)
Kohonen SOM dan Learning Vector Quantization (LVQ)Kohonen SOM dan Learning Vector Quantization (LVQ)
Kohonen SOM dan Learning Vector Quantization (LVQ)
 
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQLLaporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
 
Struktur Data Tree
Struktur Data TreeStruktur Data Tree
Struktur Data Tree
 
5. Doubly Linked List (Struktur Data)
5. Doubly Linked List (Struktur Data)5. Doubly Linked List (Struktur Data)
5. Doubly Linked List (Struktur Data)
 
Materi 3 Finite State Automata
Materi 3   Finite State AutomataMateri 3   Finite State Automata
Materi 3 Finite State Automata
 
CFG dan PARSING - P 5 - Teknik Kompilasi
CFG dan PARSING - P 5 - Teknik KompilasiCFG dan PARSING - P 5 - Teknik Kompilasi
CFG dan PARSING - P 5 - Teknik Kompilasi
 
Dts x dicoding #3 memulai pemrograman kotlin
Dts x dicoding #3 memulai pemrograman kotlinDts x dicoding #3 memulai pemrograman kotlin
Dts x dicoding #3 memulai pemrograman kotlin
 

Viewers also liked

Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
kunidar
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II web
rahmi wahyuni
 
Tugas analisa program
Tugas analisa programTugas analisa program
Tugas analisa program
Gilang Ramadhan
 
Tugas modul praktikum pemrograman web
Tugas modul praktikum pemrograman  webTugas modul praktikum pemrograman  web
Tugas modul praktikum pemrograman webWayan Suntara
 
Laporan pemograman berbasis web
Laporan pemograman berbasis webLaporan pemograman berbasis web
Laporan pemograman berbasis webHarnt Qiue Hrz B
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)gufron_ar
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
Dhan junkie
 
Laporan p1
Laporan p1Laporan p1
Laporan p1
rahmi wahyuni
 
Laporan aplikasi perancangan database sederhana
Laporan aplikasi perancangan database sederhanaLaporan aplikasi perancangan database sederhana
Laporan aplikasi perancangan database sederhana
saniatyeva
 
Contoh laporan aplikasi komputer (aplikom) - isya ansyari - polisafaris
Contoh laporan   aplikasi komputer (aplikom) - isya ansyari - polisafarisContoh laporan   aplikasi komputer (aplikom) - isya ansyari - polisafaris
Contoh laporan aplikasi komputer (aplikom) - isya ansyari - polisafarisIsya Ansyari
 

Viewers also liked (10)

Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II web
 
Tugas analisa program
Tugas analisa programTugas analisa program
Tugas analisa program
 
Tugas modul praktikum pemrograman web
Tugas modul praktikum pemrograman  webTugas modul praktikum pemrograman  web
Tugas modul praktikum pemrograman web
 
Laporan pemograman berbasis web
Laporan pemograman berbasis webLaporan pemograman berbasis web
Laporan pemograman berbasis web
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
 
Laporan p1
Laporan p1Laporan p1
Laporan p1
 
Laporan aplikasi perancangan database sederhana
Laporan aplikasi perancangan database sederhanaLaporan aplikasi perancangan database sederhana
Laporan aplikasi perancangan database sederhana
 
Contoh laporan aplikasi komputer (aplikom) - isya ansyari - polisafaris
Contoh laporan   aplikasi komputer (aplikom) - isya ansyari - polisafarisContoh laporan   aplikasi komputer (aplikom) - isya ansyari - polisafaris
Contoh laporan aplikasi komputer (aplikom) - isya ansyari - polisafaris
 

Similar to Tugas CSS

CSS (Cascading Style Sheets)
 CSS (Cascading Style Sheets)  CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) Iqbal Doang
 
Css pdf
Css pdfCss pdf
Css pdf
bachtiar04
 
Tutorial web nizar
Tutorial web nizarTutorial web nizar
Tutorial web nizarNizar Zulmi
 
Laporan css 1210651099
Laporan css 1210651099Laporan css 1210651099
Laporan css 1210651099
M Zaenol Arifin S.Kom
 
Modul web-design
Modul web-designModul web-design
Modul web-design
Sejahtera Affif
 
Praktikum CSS
Praktikum CSSPraktikum CSS
Praktikum CSS
yunia ikawati
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis webMohammad Rosidi
 
Pengenalan web minggu ketiga
Pengenalan web minggu ketigaPengenalan web minggu ketiga
Pengenalan web minggu ketigaWawan Darmawan
 
Belajar CSS (cascading style sheet)
Belajar CSS (cascading style sheet)Belajar CSS (cascading style sheet)
Belajar CSS (cascading style sheet)
Bambang Herlandi
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web Programming
Putu Mardika
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)
Dnr Creatives
 
1210651097 css
1210651097 css1210651097 css
1210651097 css
ardyansyahAhmad
 
Java web application 2 - membuat template web
Java web application 2 - membuat template webJava web application 2 - membuat template web
Java web application 2 - membuat template web
Doni Andriansyah
 

Similar to Tugas CSS (20)

CSS (Cascading Style Sheets)
 CSS (Cascading Style Sheets)  CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets)
 
PBW Tugas
PBW TugasPBW Tugas
PBW Tugas
 
Css pdf
Css pdfCss pdf
Css pdf
 
Tutorial web nizar
Tutorial web nizarTutorial web nizar
Tutorial web nizar
 
Tutorial web nizar
Tutorial web nizarTutorial web nizar
Tutorial web nizar
 
Laporan css 1210651099
Laporan css 1210651099Laporan css 1210651099
Laporan css 1210651099
 
Modul web-design
Modul web-designModul web-design
Modul web-design
 
Praktikum CSS
Praktikum CSSPraktikum CSS
Praktikum CSS
 
3.modul css
3.modul css3.modul css
3.modul css
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Pengenalan web minggu ketiga
Pengenalan web minggu ketigaPengenalan web minggu ketiga
Pengenalan web minggu ketiga
 
Modul css
Modul cssModul css
Modul css
 
tugas css pbw
tugas css pbwtugas css pbw
tugas css pbw
 
Laporan Pemrograman Berbasis Web
Laporan Pemrograman Berbasis WebLaporan Pemrograman Berbasis Web
Laporan Pemrograman Berbasis Web
 
Belajar CSS (cascading style sheet)
Belajar CSS (cascading style sheet)Belajar CSS (cascading style sheet)
Belajar CSS (cascading style sheet)
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web Programming
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)
 
1210651097 css
1210651097 css1210651097 css
1210651097 css
 
Css bagus
Css bagusCss bagus
Css bagus
 
Java web application 2 - membuat template web
Java web application 2 - membuat template webJava web application 2 - membuat template web
Java web application 2 - membuat template web
 

Tugas CSS

  • 1. Pengertian & Manfaat CSS CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML. Menurut Wikipedia, Cascading Style Sheets (CSS) adalah: “bahasa pemrograman untuk mengatur tampilan suatu website atau blog” Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri. Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri. Manfaat dari CSS: 1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur, 2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat, 3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja, 4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML, 5. Digunakan dalam hampir semua web browser.
  • 2. Keuntungan Menggunakan CSS · CSS memberikan keseragaman pada halaman web. · Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat perubahan dalam style sheet. · CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah. · Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen. · CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif. Ini adalah contoh dari css itu sendiri.. <!DOCTYPE html> <html> <head> <style type="text/css"> table{ border-colapse:colapse; border:1px solid black; } #menu{ height:40px; width:960px; background:url(bg-nav.jpg) repeat-x; } #menu table{ border:none; } #menu a{ color:white; text-decoration:none; } #menu a:hover{ background-color:white; color:black; } #menu td{ height:40px; text-align:center; vertical-align:middle; color:#fff; font: bold 14px Candara, Arial, Tahoma;
  • 3. } #isi{ padding: 10 10 10 10; } #isi p{ color:black; font: 11px Candara, Arial, Tahoma; padding-bottom:5px; } #isi li{ color:black; font: 11px Candara, Arial, Tahoma; padding-bottom:5px; } #isi img{ boder: 1px solid black; width: 80px; height: 100px; } .table-menu{ vertical-align: top; border-colapse: colapse; border: 1px solid black; background-color: #808080; } .footer{ background-color:#C0C0C0; } #isi h1 { font-weight:700px; font-size:35px; color:#064475; text-shadow: 1px 2px 1px #9ad2fe, -1px -2px 1px #DCDCDC; } #text h2 { font-weight:755px; font-size:35px; color:#fff; text-shadow: 0 0 3px #FFFFA0, 0 0 5px #FFFF4D, 0 0 9px #FFFF41,
  • 4. 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 40px #F7F700; } #text1 li { font-weight:400px; font-size:10px; color:black; text-shadow: 1px 2px 1px #FFFFFF, -1px -1px 1px #DCDCDC; } #header{ background-image:url(header.jpg); width:1000px; height:200px; } </style> </head> <body> <table width="70%" align="center"> <tr> <td id="header" colspan=2> <h2 style="opacity: 0.5; filter: alpha(opacity=50); width: 100%; font- size: 20pt;">SAUDARA_PRODUCTION @2014</h2> <h1 style="opacity: 0.5; filter: alpha(opacity=50); width: 100%; font- size: 20pt;">kerja kerja kerja!!!</h1> </td> </tr> <tr> <td colspan=2> <div id="menu"> <table width="100%"> <tr> <td align="center"><a href="www.faceboook.com" title="Depan | Saudara_Production">Depan</a></td> <td align="center"><a href="www.faceboook.com" title="Profil | Saudara_Production">Profil</a></td> <td align="center"><a href="www.faceboook.com" title="Produk | Saudara_Production">Produk</a></td> <td align="center"><a href="www.faceboook.com" title="Kontak | Saudara_Production">Kontak</a></td> <td align="center"><a href="www.faceboook.com" title="Forum | Saudara_Production">Forum</a></td> </tr> </table> </div> </td>
  • 5. </tr> <tr> <td width="70%"> <div id="isi"> <h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"> Ayo Minum Susu</h1> <img src="susu.jpg"/> <p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina. Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat. Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia. Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia. <p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh. Dalam segelas susu terdapat antara lain: <ul> <li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li> <li>Zat besi, mempertahankan kulit tetap bersinar.</li> <li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li> <li>Kalsium, menguatkan tulang.</li> <li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li> <li>Yodium, meningkatkan kerja otak cepat.</li> <li>Seng, menyembuhkan luka dengan cepat.</li> <li>Vitamin B2, meningkatkan ketajaman penglihatan.</li> </ul> </p> </p> </div> </td> <td style="color:black; font:11px Candara;" width="30%" class="table-menu"> <font face="Aklatanic TSO" size="5" color="white"><b><marquee behavior="alternate" scrollamount="5" loop="">:: PETUALANGAN ::</marquee></b></font> <div id="text"> <h2 style="font:bold 13px Tahoma;">Bromo Tengger</h2> <img src="bromo.jpg" width="50%" height="9%" class="gambar"/>
  • 6. <div id="text1"> <li>Bromo Tengger Semeru National Park is located in East Java, Indonesia, to the east of Malang and to the southeast of Surabaya, the capital of East Java. Wikipedia Address: Jl. Raden Intan No.6, Indonesia Area: 194.1 sq miles (502.8 km²) Phone: +62 341 491828</li> <div align="right" id="nex"><em><a href="">Read more -- ></a></em></div> <h2 style="font:bold 13px Tahoma;">Teluk Ijo</h2> <img src="teluk.jpg" width="56%" height="16%" class="gambar"/> <li>Teluk ijo berlokasi di Kecamatan Pesanggaran tepatnya di desa Sarongan. Berjarak sekitar 90 km arah selatan dari kota Banyuwangi. Untuk menuju pantai ini dari Banyuwangi kita tinggal mengikuti petunjuk arah menuju Pesanggaran- Sarongan-Sukamade yang masih satu jalur dengan rute menuju pantai sukamade Taman Nasional Merubetiri.</li> <div align="right" id="nex"><em><a href="">Read more -- ></a></em></div> </td> </div> </div> </tr> <tr> <td colspan=2 height=50 class="footer" align="center"> <a href="https://Saudara_Production"><img src= fb.png ></a> <a href="https://Saudara_Production"><img src= tw.png ></a></center> <div style="color:black; font:bold 12px candara, arial, tahoma;"id="nex"><a href="">About</a> | Powered by Saudara_Production</div> </tr> </table> </body> </html>
  • 7. Gambar diatas adalah contoh dari css, dimana terdapat banyak style height : Mengeset tinggi dari sebuah elemen width : Mengeset lebar dari suatu elemen table : Mengeset algoritma yang digunakan untuk menampilkan sel tabel, baris, dan kolom background-repeat : Mengeset apakah/bagaimana background akan diulang background-image : Mengeset sebuah gambar menjadi sebuah background background-color : Mengeset warna latar background suatu elemen font : Mengeset semua properti untuk font(huruf) dalam satu deklarasi color : Mengeset warna teks text-align : Mengatur teks agar rata kanan, kiri, tengah, atau kanan-kiri pada elemen border : Mengeset semua properti untuk 4-border (yang tertutup) dalam satu deklarasi