HTML dan CSS
- 1. • Apa itu html? • Tag, Atribut • Named character references (entities) • Doctype dan Komentar. Hari – 6 By : Muhammad Viky • Cascading Style Sheet (CSS) • Stylesheet : Inline, Internal, Eksternal • Jenis-jenis selector CSS, Propety, Value. Teitra Mega Open Class Web Programming HTML dan CSS
- 2. Apa itu HTML? • Akronim dari “Hyper Text Markup Language” • Bukan bahasa pemrograman tetapi bahasa markah • Memarkahi konten website seperti : kalimat teks, gambar, audio, video dan lainnya. • HTML menggunakan elemen tag yang diawali dan diakhiri dengan kurung siku dan tag penutup menggunakan garis miring “/”. Sebagai contoh kita memarkahi content website teks paragraf : <p>Teks paragraf disini </p>
- 3. HTML berupa sekumpulan elemen-elemen (markah). Hingga struktur hierarki ini disebut dengan DOM: Document Object Model. <title>Judul Website</title> <h1>Heading 1</h1> <img src=“image.JPG” /> <p>teks paragraf </p> <hr/> garis
- 4. HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, gambar, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag. Tag <p>teks paragraf </p>Contoh paragraph ditulis dengan markah <p></p> : Atribut Berupa informasi tambahan yang diberikan kepada tag. Bisa berupa intruksi warna dari teks, judul tag, link atau styles dan lain-lain. Setiap atribut memiliki nama dan nilai(value), dan ditulis dengan name=“value” nilai diapit diapit dengan tanda kutip satu (‘) atau dua (“) . <p title=“Judul Atribut”>teks paragraf </p>Contoh paragraph ditulis dengan markah <p></p> dengan atribut title :
- 5. Named Character References (entities) Named character references sering disebut juga entities digunakan untuk mencetak karakter yang memiliki makna dalam HTML. Sebagai contoh, HTML menerjemahkan tanda lebih kecil dari dan lebih besar dari sebagai pemisah tag. • > menandakan lebih besar dari (>) • < menandakan lebih kecil dari (<) Doctype Tag paling awal dari struktur dasar HTML DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML. Komentar Ditulis dengan cara <!– dan penutup –>
- 6. CSS (Cascading Style Sheet) CSS digunakan para web designer untuk mengatur style element yang ada dalam halaman web mereka, mulai dari memformat teks, sampai memformat layout. Dengan tujuan memperoleh keindahan gaya atau penampilan suatu website.
- 7. • Inline: Penulisan dengan tag <style></style> diantara atau didalam tag <head></head> Getting Started • Cara Penulisan <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Contoh Penulisan CSS</title> <style> /* letakkan css disini */ </style> </head> <body> </body> </html> Contoh penulisan inlne stylesheet
- 8. • Internal : penulisan dengan menggabungkan stylesheet pada tag HTML, dengan menggunakan atribut style=“” . <p style="color: red;">Contoh penulisan css Internal</p> • Eksternal : menulis css dengan memisahkan antara dokumen HTML dan CSS dengan cara memanggil file seperti ini (diantara atau didalam tag <head></head> ): Tag HTML stylesheet <link rel="stylesheet" href="css/style.css"> File cssFolder
- 10. Jenis-jenis Selector Selector digunakan untuk menentukan elemen mana yang akan dibuat stylesheet. • Tag html h1 { font-weight: bold; } • Selector ID #selector_id { color: red; } • Selector Class .selector_class { text-decoration: underline; } • Pseudo Clases :hover, :active, :focus, :lang(character),
- 11. Latihan : Coba desain menggunakan html dan css seperti gambar berikut :