Pert 05 HTML dan Web Programming
•Download as PPTX, PDF•
0 likes•674 views
HTML dan Web Programming
Recommended
More Related Content
Similar to Pert 05 HTML dan Web Programming
Similar to Pert 05 HTML dan Web Programming (20)
More from Putu Mardika
Recently uploaded
Recently uploaded (20)
Pert 05 HTML dan Web Programming
- 1. HTML & WEB PROGRAMMING By : I Ngh Putu Mardika, S.Pd
- 2. Review-01 • Buatlah web layout dengan tampilan seperti salah satu gambar berikut! Logo Nav igasi Nav igasi Nav igasi Logo Nav igasi
- 3. MENGENAL CSS
- 4. Mengenal CSS • Singkatan dari cascading Style sheet • Cara untuk mengatur tampilan html • Mempermudah dalam pengaturan html
- 5. Syntax CSS • Syntax : selector { property: value } selector { property: value; property: value } • Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.
- 6. Contoh CSS h1 { color: red } Artinya: Selector: h1 Property: color Value: red Mengatur color dari h1 ke warna merah (red)
- 7. Contoh CSS header { background-color:black} nav{ background-color:black;} body{ margin:0}
- 8. Pengelompokan Selector h1,h2,h3 { color: red } p, a, ul {color:blue} p, ul, a {color:blue}
- 9. Penggunaan Banyak Properties header { background-color:black; color:white; text-align:center; padding:5px; }
- 10. Cara Penulisan Yang Baik nav { line-height: 30px; background-color : #eeeeee; height : 300px; width :100px; float:left; padding:5px; }
- 11. CSS Comment /* Tulis komentar anda di sini */ p { text-align: justify; /* Tulis komentar anda di sini */ color: blue; font-family: arial; }
- 12. INPLEMNTASI CSS • Inline CSS • Embed atau memasang kode css ke dalam bagian <head> • Pada link ke external CSS • Import CSS file
- 13. 1. Inline CSS • Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS • sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
- 14. Cotoh inline CSS <p style=”color:blue”> Isi paragraf. </p>
- 15. 2. Embedded CSS • menempelkan kode CSS di antara tag <head> dan </head>. • Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. • Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat
- 16. Contoh embedded CSS <head> <style type="text/css" media=screen> p {color:blue;} </style> </head> <body> </body>
- 17. 3. External CSS • Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . • perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web.
- 18. SELECTOR • Element Selector element html sebagai selector contoh : h1 { color : blue } • Class Selector mempergunakan atribut class sebagai selector • ID selector mempergunakan atribut ID seagai selector
- 19. CLASS SELECTOR • Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan Class Selctor .nama-class {property: value;} Contoh : .