pert 05 html dan web programming
TRANSCRIPT
HTML & WEB PROGRAMMING
By :
I Ngh Putu Mardika, S.Pd
Review-01
• Buatlah web layout dengan tampilan sepertisalah satu gambar berikut!
Logo
Nav igasi
Nav igasi
Nav igasi
Logo
Nav igasi
MENGENAL CSS
Mengenal CSS
• Singkatan dari cascading Style sheet
• Cara untuk mengatur tampilan html
• Mempermudah dalam pengaturan html
Syntax CSS
• Syntax :selector { property: value }selector { property: value; property: value }
• Selector itu untuk menunjukkan bagian manayang hendak diatur / diformat.Property untuk menunjukkan, bagian(properti) dari selector yang hendak diatur.Value adalah nilai dari pengaturannya.
Contoh CSS
h1 { color: red }
Artinya:
Selector: h1Property: colorValue: red
Mengatur color dari h1 ke warna merah (red)
Contoh CSS
header { background-color:black}
nav{ background-color:black;}
body{ margin:0}
Pengelompokan Selector
h1,h2,h3 { color: red }
p, a, ul {color:blue}
p, ul, a {color:blue}
Penggunaan Banyak Properties
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
Cara Penulisan Yang Baik
nav {
line-height: 30px;
background-color : #eeeeee;
height : 300px;
width :100px;
float:left;
padding:5px;
}
CSS Comment
/* Tulis komentar anda di sini */p{text-align: justify;
/* Tulis komentar anda di sini */color: blue;font-family: arial;}
INPLEMNTASI CSS
• Inline CSS
• Embed atau memasang kode css ke dalambagian <head>
• Pada link ke external CSS
• Import CSS file
1. Inline CSS
• Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara initidak memerlukan penulisan selector dalamkode CSS
• sebaiknya hanya digunakan jika anda maumemformat suatu elemen satu kali saja.
Cotoh inline CSS
<p style=”color:blue”>Isi paragraf.</p>
2. Embedded CSS
• menempelkan kode CSS di antaratag <head> dan </head>.
• Penulisan CSS dengan cara ini diawali dengantag <style> dan diakhiri dengan tag </style>.
• Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat
Contoh embedded CSS
<head><style type="text/css" media=screen>p {color:blue;}</style></head>
<body>
</body>
3. External CSS
• Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .cssatau ekstensi .css .
• perlu memanggil file CSS tersebut ke dalamsemua halaman web yang anda buat. Dengancara ini, hanya perlu memiliki satu set kodeCSS yang digunakan untuk semua halamanweb.
SELECTOR
• Element Selectorelement html sebagai selectorcontoh :h1 { color : blue }
• Class Selectormempergunakan atribut class sebagai selector
• ID selectormempergunakan atribut ID seagai selector
CLASS SELECTOR
• Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.Cara penulisan Class Selctor
.nama-class {property: value;}
Contoh :.