pengertian css
Nim : 281412015
Jurusan/Kelas : Sosiologi/A
Tugas : Pengantar computer
PENGERTIAN CSS
A. CSS (Cascading Style Sheets) adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML dan merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warnamouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
2. Keuntungan menggunakan CSS yaitu:
Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk diterapakan pada seluruh dokumen-dokumen HTML pada halaman situs kita.User yang berbeda dapat mempunyai style-sheet yang berbeda pula.Ukuran dan kompleksitas document code dapat diperkecil.
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.
3. Fakta Menggunakan CSS diantaranya :
Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browserCSS adalah layouting “Masa Depan” dengan penggabungan bersama XHTML.
CONTOH CSS
B. Setelah dasar dari pondasi dalam pembuatan web telah dikuasai, langkah selanjutnya adalah menghiasi dari pondasi yang telah dibangun dengan menggunakan CSS. CSS sendiri sampai sekarang sudah sampai pada CSS3. Untuk belajar lebih mudah dapat langsung dipelajari pada.
Dasar dari CSS sendiri sebenarnya sudah banyak sekali, namun tampilan yang dihasilkan syntaks - syntaks dari CSS lama masih belum menarik bagi para end-user atau pengunjung. Syntaks css secara umum dapat ditulis sebagai berikut:
<html>
<head>
<style type="text/css">
...isi css...
</style>
...isi halaman...
</body>
</html>
<a href="http://tutorial-pembelajaran.blogspot.com/">Tutorial Pembelajaran</a>
Apabila suatu style dari css akan dipergunakan untuk beberapa halaman, akan lebih tepat mendeklarasikan css tersebut ke dalam suatu file css terpisah dan baru dipanggil pada suatu halaman. Contoh yang paling sederhana adalah sebagai berikut:
Contoh kerangka kode berikut akan disimpan pada file.css
html {...}
body {...}
a {...}
.b {...}
.c {...}
#tujuan{...}
#header h1 a:visited{...}
a.page-numbers:hover {...}
div.content-bottom{...}
table th {...}
fieldset {...}
legend {...}
form {...}
p{...}
h1 {...}
div#nama li{...}
textarea {...}
input[type="..."] {...}
select {...}
label{...}
pre {...}
code {...}
blockquote {...}
ul {...}
li {...}
Untuk memanggilnya dengan menambahkan kode html seperti berikut <link rel="stylesheet" type="text/css" href="contoh.css" /> atau dapat juga dengan <style src="contoh.css" type="text/css" media="screen" />. Pada pemanggilan fungsi dari css terdapat 2 penulisan (class dan id) yang berbeda dengan fungsi yang berbeda pula. Pada suatu elemen dapat memakai lebih dari 1 class namun hanya dapat menggunakan satu id. Jika diambil contoh di atas maka pemanggilan dapat digunakan dengan cara sebagai berikut:
<p class="b c"></p> dan untuk penulisan id adalah <div id="header"> </div> atau lebih jelas lagi seperti pada penggunaan link <a href="#tujuan "/>. Jadi secara logika kita tidak dapat menggunakan class pada penggunaan link seperti contoh di atas. Atribut dari css pada dasarnya ada banyak sekali walaupun jumlahnya terhingga. Atribut untuk CSS dasar meliputi bagian, antara lain;
BackgroundBorderClassificationDimensionFontGenerated ContentList and MarkerMarginOutlinesPaddingPositioningTable
Contoh Tabel dengan CSS
Header Kolom 1
Header Kolom 2
Header Kolom 3
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Jika menggunakan internal atau eksternal CSS akan kelihatan lebih simpel.
Kode CSS:
table{margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb;}
caption h3{}
th, td{border:1px solid #999;}
th{padding:8px 0;background: #0cf;}
td{padding:4px 8px;}
Kode HTML:
<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
<th>Header Kolom 3</th>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</table>
Hasil:
Contoh Tabel dengan CSS
Header Kolom 1
Header Kolom 2
Header Kolom 3
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Jika ingin membuat warna baris cell yang selang seling kita dapat menambahkan atribut "class" atau "id" di dalam tag <td>, dalam contoh berikut kita akan menggunakan atribut class dengan nama baris-ganjil
<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
<th>Header Kolom 3</th>
</tr>
<tr>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</tr>
<tr>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</table>
Kita akan membuat background baris ganjil tersebut dengan warna putih maka di dalam CSS kita tambahkan:
.baris-ganjil(background:#fff;}
Maka hasilnya adalah sebagai berikut:
Contoh Tabel dengan CSS
Header Kolom 1
Header Kolom 2
Header Kolom 3
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
Data Cell
w3schools.com/css3/default.asp
HTML dan Contoh Script HTML
HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). [
2. Contoh Script HTML :
< html>* = Script umum yg wajib digunakan klo mau bikin HTML
< head>* = Script yg digunakan untuk membuat kepala HTML
< title>* = Script untuk judul
< body>* = Script untuk isi HTML
< h1> - < h6>* = Script untuk ukuran font pada title
< p> = Script untuk pemberian paragraf.
< br> = Script untuk pemberian line baru. Seperti enter.
< b>* = Bold
< i>* = Italic
< u>* = Underline
< strong>* = Huruf menjadi tebal (mirip Bold)
< code>* = Huruf menjadi font Courier
< tt>* = Huruf menjadi font Teletype Writer
< sampp>* = Huruf menjadi font Code
< pre>* = Preformated Text. Semua spasi yang bukan script akan sama letaknya dengan yang ditulis.
< ul>* = Membuat bullet. Pada line berikutnya harus ditulis < li> sebelum mengetik
< ol>* = Membuat angka. Sama seperti yg diatas
< caption> = Seperti bikin judul. Bedanya ini digunakan di
< table border> = Gunanya untuk bikin tabel. Kalo selesai bikin tabel, tulisnya
< tr>* = Membuat baris pada tabel
< td> = Membuat kolom pada tabel
< th> = Table Header, membuat kolom judul
< table border>,< tr>,< td> dan < th> digunakan bersama klo mo bikin tabel.
< align=....> = Untuk mengatur letak tulisan. Klo kanan, right. Tengah, center dst. Klo mau ngatur letak judul, tulis awalan div. Jadinya < div align=...>
< colspan=....> = Untuk menggabungkan sekian kolom menjadi satu. (Isi bagian yang ksg. Kalau diisi dengan 3, maka 3 kolom menjadi satu
< rowspan=...> = Untuk menggabungkan sekian baris menjadi satu. (Isi bagian yang ksg. Kalau diisi dengan 5, maka 5 baris menjadi satu
< cellpadding=...> = Untuk memberi jarak antara setiap konten spt. kolom dan baris. (Isi bagian yang ksg. Semakin tinggi nilai yang diberikan semakin jauh jaraknya. Biasa diletakkan sesudah < table>. Sehingga menjadi < table cellpadding=...>
< width=...> = Untuk melebarkan tabel. Diisi dengan angka biasa maupun persentase
< font size=...> = Untuk mengubah ukuran font. (+) untuk memperbesar, (-) untuk memperkecil.
Contoh : < font size=+2>
< font face="......"> = Untuk mengubah tipe font. Untuk mempermudah, buka MS Word. Karena bagian ini case sensitive. Contoh : < font face="Comic Sans MS">
< a href="......"> = Untuk menyisipkan Hyperlink
Contoh script title :
< html>
< head>
< title>Judul Website< /title>
< /head>
< body>
< h1> h1 akan membuat tulisan berubah ukuran< /h1>
< h2> h2 akan membuat tulisan berubah ukuran< /h2>
< h3> h3 akan membuat tulisan berubah ukuran< /h3>
< h4> h4 akan membuat tulisan berubah ukuran< /h4>
< h5> h5 akan membuat tulisan berubah ukuran< /h5>
< /body>
Contoh script font :
< html>
< head>
< title>Mengubah style font< /title>
< /head>
< body>
< b>Tulisan tebal< /b>
< br>
< i>Tulisan miring< /i>
< br>
< u>Garis bawah< /u>
< br>
< strong>Mirip seperti bold< /strong>
< br>
< code>Font mirip Courier< /code>
< br>
< em>Mirip seperti italic< /em>
< br>
< tt>Font teletype writer< /tt>
< br>
< sampp>Mirip kode< /sampp>
< br>
< center>Tulisan ditengah-tengah< /center>
< /body>
< /html>
Contoh script tabel :
< html>
< head>
< title>Tabel sederhana
< /head>
< body>
< table border=1>
< tr>
< td>Kolom pertama
< td>Kolom kedua
< td>Kolom ketiga
< /tr>
< tr>
< td>Satu
< td>Dua
< td>Tiga
< /tr>
< /body>
< /html>
*di akhir script, ketikkan script dengan slash untuk mengakhiri fungsi script.
Contoh : < b>Contoh Tulisan< /b>
http://mrxsaga.blogspot.com/p/arti-script-pada-html.html
Diakses Tanggal 11-03-2013,Hari Senin