Nama : Muhamad Iswahyudi
Nim : 115610119
LABORATORIUM
TERPADU STMIK AKAKOM YOGYAKARTA
Pertemuan
modul 7
Di sini saya
akan menjelaskan tentang materi CSS dan keuntungan menggunakan CSS
Dari penjelasan
ini saya akan menjelaskan sedikit tentang CSS dalam materi atau praktikum
pengenalan WEB yang ke 7, Cara dan sedikit syintax yang ada dalam CSS .
CSS (Cascading
Style Sheet)
Adalah standard
pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk
mempersingkat
penulisan tag HTML seperti font,color,text,
dan table menjadi lebih ringkas
sehingga tidak
terjadi pengulangan tulisan.
Dan menggunakan CSS tidak memerlukan
perangkat lunak tertentu karena merupakan script yang telah embeded dengan
HTML, cukup kita memakai aplikasi yang sudah ada di dalam komputer kita saja
seperti note pad, dengan note pade ini juga kita udah mampu memakainya dalam
pemuatas desain WEB.
Dan berbagai keuntungan dalam menggunakan
CSS dalam mendesain WEB sebagai berikut :
Keuntungan
menggunakan CSS
·
Memisahkan presentastion sebuah
dokumen dari content document itu sendiri.
·
Mempermudah dan Mempersingkat pembuatan
dan pemeliharaan dokumen web
·
Mempercepat proses
rendering/pembacaan HTML
·
Ukuran lebih kecil
·
Load file lebih cepat
·
Dapat berkolaborasi
dengan cava script
·
Mudah mengganti-ganti
tampilan dengan hanya merubah file CSSnya saja
·
Dan banyak yang lain
lagi.
Di bawah ini adalah contoh sederhana
dalam membuat atau mendesain WEB dengan CSS:
<html>
<head>
<title>atribut id</title>
<style type = "text/css">
<!--
#tebal { font-weight : bold;
color : red; }
#miring { font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>pantun</h1>
<h2 id = "miring">
kalau ada jarum yang patah<br>
jangan disimpan dalam peti
</h2>
<h3 id = "tebal">
kalau ada kata yang salah<br>
jangan disimpan dalam hati
</h3>
<h3 id = "tebal">
Ini adalah contoh WEB sederhana yang saya bisa buat<br>
mungkin anda bisa merubah atau mendesainnya
dengan lebih indah<br>
dan lebih menarik yang dapat tampil di
browser anda.
</h3>
</body>
</html>
Hasil keluarannya:
Dan anda juga bisa membuat atau
mendesainnya dengan menggunakan tag-tag yang telah disediakan dalam CSS, dan
juga meskipun kita tidak menggunakan CSS dalam membuat atau mendesain WEB program
atau syintaxnya berjalan, tetapi kurang menarik jadinya tanpa menggunakan CSS.
Penulisan
kode CSS dibuat menjadi tiga bagian, yaitu:
selector
{ property1: value; property2:value, . . .}
H1{
color:green; background-color:orange}
Ket:
1.
Selector
Bagian
pertama sebelum tanda “{}” disebut selector.Selector adalah tag html yang
umumnya kita ketahui
2.
Declaration
Terdiri
dari property dan nilainya.Property adalah atribut yang kamu ingin ubah dan
tiap property
mempunyai
nilai/value.
Contohnya:
1.
p {margin-left: 20px}
2.
P{font-family:”sans serif”}
3.
p
{text-align:center;color:red}
4.
body{ color:black}
5.
p
{
text-align: center;
color: black;
font-family: arial
}
6. h1,h2,h3,h4,h5,h6
color: green
}
Catatan:
Jangan
ada spasi antara property value dengan unitnya(1).
Nama
property bersifat case sensitif dan menggunakan huruf kecil.
Jika
nilai /value lebih dari satu kata, maka gunakan tanda petik di antara nilai(2)
Jika
property lebih dari satu, maka gunakan tanda titik koma untuk membatasi
property
lain(3,5).
Jika
selector lebih dari dan mempunyai property dan value yang sama maka gunakan
tanda
koma(6).
Dan hanya inilah yang dapat saya jelaskan
dalam materi CSS ini, anda dapat mencarinya juga di buku atau tutorial
pembelajaran CSS di google atau shering dengan teman-teman anda sekian dan
terimakasih .
By: yudiePutra
Tidak ada komentar:
Posting Komentar