Laporan css
-
Upload
auliaariefkurniawati -
Category
Engineering
-
view
146 -
download
2
Transcript of Laporan css
Laporan Pemrograman Berbasis Web
Membuat Design Web dengan CSS
(Cascading Style Sheets)
Disusun Oleh :
Aulia Arief Kurniawati
1210651072
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2012/2013
Pemrograman Berbasis Web
Penjelasan tentang CSSApa itu CSS | CSS adalah kependekan dari Cascading Style Sheet ,pengertiannya adalah
sekumpulan code pemrograman web yang berfungsi untuk mengendalikan beberapa komponen didalam web sehingga menjadi tampak seragam,berstruktur dan teratur.CSS inilah yang bertanggung jawab atas penampilan web anda dimata pengunjung melalui browser internet.
CSS yang buruk bisa membuat visitor Anda tidak kerasan lagi menjelajahi blog anda,apalagi untuk kembali lagi.
Memaksimalkan CSS adalah penting (khususnya) blog agar lebih nyaman untuk dibaca dilihat oleh visitor anda dan kalau bisa bikin lah CSS yang meringankan loading.
Jika anda tertarik untuk mengedit tampilan template blog sendiri,maka mengerti CSS adalah wajib.Namun ingat,untuk menjadi seorang blogger tidak wajib untuk mengerti CSS karena banyak template yang bisa didapat dari desainer blog.Tapi tak ada salahnya kan mengerti sedikit saja?.....karena menggunakan tampilan blog hasil desain sendiri itu dapat memberikan kepuasan tersendiri.
Keuntungan CSSMemudahkan dalam penggantian format secara keseluruhan. Lebih praktis. Untuk
mengubah tampilan web, tanpa mengubah layout utamanya.Syntaks CSSTerdiri dari beberapa set peraturan yang memiliki: selector, property, value. selector
{property: value;} Selector menunjukkan bagian mana yang hendak diatur/diformat. Property bagian dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.
Contoh sintaks CSS: h1 {color: red;} Keterangan: Selector: h1 Property: color Value: red Terjemahan bahasa manusia: mengatur color dari h1 ke red (warna merah)
Disini saya akan membuat tampilan website dengan syntax CSS dengan design yang juga kita tentukan sendiri. Langsung saja kita ke project untuk membuatnya.
I. MEMBUAT SYNTAX CSS BERTIPE EMBEDDEDBuat file dengna nama index sebagai main untuk tampilan webnya.
Untuk file index ini kita beri syntax untuk membuat tata letak web, berikut syntaxnya :
Page 2 of 6
Pemrograman Berbasis Web
Untuk syntax diatas yang berada didalam tag head, merupakan syntax css bertipe embedded dengan fungsi-fungsinya sebagai berikut :
• Title sebagai judul halaman dari web yang akan dibuat• Syntax table merupakan untuk setiap table akan mengikuti fungsi yang telah
ditentukan oleh id table, seperti border denagn ukuran 1px dengan warna hitam,• Syntax #menu sebagai id pada setiap font, gambar dan lain-lain
Page 3 of 6
Pemrograman Berbasis Web
II. APLIKASI CSS EMBEDDED PADA HTMLDibagian kedua ini adalah penjelasan untuk aplikasi syntax css embedded ataupun
import, berikut codenya :
Page 4 of 6
Pemrograman Berbasis Web
Dibagian kedua ini kita memiliki kode HTML dan ada juga yang memiliki code CSS bertipe
Page 5 of 6
Pemrograman Berbasis Web
inline. Berikut penjelasannya dari syntax diatas :• Mulai dari tag table yang paling atas di dalam body dengan width 70% yang berarti ukuran
table tidak full 1 halaman melinkan hanya memenuhi sebagian atau sebesar 70% ukuran halaman yang ada, dan dengan align bertipe center yang berarti posisinya berada di tengah
• Disini juga ada tag yang ber id mnu yang berisi tombol menu atas sebagai pokok halaman, ditombol itu juga mengambil fungsi dari syntax css diatas, disini saya beri gambar untuk background tombolnya dan dengan tipe “:hover” yang berarti jika kita arahkan mouse pada tiap-tiap tombol yang memiliki fungsi tersebut maka akan ada perubahan padanya, perubahan disini saya beri warna background hijau dan text warna hitam
ini tampilan design web yang telah saya buat :
Page 6 of 6
Pemrograman Berbasis Web
inline. Berikut penjelasannya dari syntax diatas :• Mulai dari tag table yang paling atas di dalam body dengan width 70% yang berarti ukuran
table tidak full 1 halaman melinkan hanya memenuhi sebagian atau sebesar 70% ukuran halaman yang ada, dan dengan align bertipe center yang berarti posisinya berada di tengah
• Disini juga ada tag yang ber id mnu yang berisi tombol menu atas sebagai pokok halaman, ditombol itu juga mengambil fungsi dari syntax css diatas, disini saya beri gambar untuk background tombolnya dan dengan tipe “:hover” yang berarti jika kita arahkan mouse pada tiap-tiap tombol yang memiliki fungsi tersebut maka akan ada perubahan padanya, perubahan disini saya beri warna background hijau dan text warna hitam
ini tampilan design web yang telah saya buat :
Page 6 of 6