Desain
& Pemrograman Web
- Bug dan Debug
- Latihan Debugging (Moodle)
- Elemen HTML untuk mengatur tampilan (<div>, <span>)
- Pengenalan CSS
Bug
dan Debug
- Materi disadur dari: http://cs.wellesley.edu/~cs110/lectures/L03-html/HTML.html
- Tampilan dari HTML yang kita buat kadang tidak sesuai dengan harapan, karena kesalahan pada kode HTML
- Error/kesalahan didalam sebuah kode disebut dengan bug
- Proses mencari dan menemukan bug/kesalahan tersebut adalah debug
Contoh-Contoh
Bug
Beberapa
contoh HTML bug:
- Kesalahan mengeja nama tag: <tilte> atau <break>
- Tag awal dipakai di akhir: <em>penting<em>
- Kesalahan membentuk tag: <em penting</em>
- Tag akhir tidak sesuai dengan tag awal: <h1>Ini adalah heading</h2>
- Tag tidak “terbungkus” dengan benar: <h1><em>Ini adalah heading</h1><em>
- Salah mengeja nama atribut: <img source="logo.jpg" hieght=100>
- Tanda kutip tidak sesuai: <img src="logo.jpg height=100>
Mengatur
Tampilan Website
- Mengatur tampilan website dapat menggunakan tag <table> atau <div>
- TIDAK disarankan untuk menggunakan <table> karena <table> didesain untuk membuat tabel.
- Tag <div> menggunakan dua atribut:
- id: Nama untuk identifikasi <div> tersebut
- style: Pengaturan untuk elemen pada <div>
- Dapat juga menggunakan CSS (Cascading Style Sheet)
CSS
- Singkatan dari Cascading Style Sheet, digunakan untuk mengatur tampilan HTML
- Dapat menggantikan beberapa tag dan atribut HTML seperti <center>,<font>,bgcolor, dan color
- Dapat digunakan di file HTML dengan 3 cara berikut:
- Inline – Dimasukkan langsung ke dalam tag HTML dengan atribut style. Contoh: <div id=“..” style=“..”>
- Internal – Menggunakan elemen <style> pada bagian <head> di file HTML
- External – Dengan sebuah file .css diluar file HTML, dihubungkan dengan tag <link> difile HTML
Inline
CSS
- Menggunakan atribut style pada elemen HTML yang akan diubah tampilannya
- Dapat menggunakan semua properti CSS
- Setiap properti memiliki dua bagian: nama dan nilai, seperti atribut HTML. Nama dan nilai dipisahkan dengan titik dua (:)
- Setiap properti dipisahkan dengan titik koma (;)
- Contoh Inline CSS:
- <h1style=“background-color:red;color:orange”> Ini adalah Judul Website</h1>
Mengatur
Tampilan Dengan <div> dan
Inline CSS
- Gunakan tag <div> dan properti CSS berikut:
- Position: Mengatur jenis posisi dengan value:
- Static – Tampil sesuai dengan urutan di kode, mulai dari kiri atas
- Absolute – Relatif sesuai dengan posisi elemen induknya
- Fixed – Relatif sesuai dengan tampilan browser
- Relative – Relatif dengan posisi normal
- Left/top/right/bottom: Posisi kiri/atas/kanan/bawah dari elemen tersebut, dengan value angka dalam pixel
- Width/height: Lebar/tinggi dari elemen tersebut, dengan value angka dalam pixel
Contoh
<div>
- Contoh::
- <div style="position:absolute;left:100px;width:300px">
<h1
style="background-color:red;color:orange">Ini
adalah Judul Website</h1>
</div>
Hasil:
Menggunakan
Internal CSS
- Internal CSS digunakan dengan menggunakan tag <style> didalam tag <head>
- <style> memiliki atribut type dengan nilai text/css
- Semua properti CSS ditempatkan dalam tag <style>, BUKAN sebagai atribut, dengan sintaks seperti berikut:
Contoh
Internal CSS
- <head>
- <style type=“text/css”>
h1
{color:blue;background-color:orange}
- </style>
- </head>
- <body>
- <h1>Ini adalah heading dengan CSS</h1>
- </body>
Menggunakan
External CSS
- Kita dapat membuat file CSS diluar file HTML sebagai sumber untuk mengatur tampilan dalam file HTML tersebut
- File CSS tersebut berisi properti CSS, dengan format yang sama seperti internal CSS
- File HTML harus mengandung link ke File CSS dengan menggunakan tag <link> didalam tag <head> seperti contoh berikut:
- <head>
- <link rel="stylesheet" type="text/css" href="mystyle.css">
- </head>
Contoh
External CSS
- Contoh penggunaan external CSS dapat dilihat di link berikut:
- http://www.w3schools.com/c ss/demo_default.htm
- Halaman tersebut menggunakan sebuah file HTML yang sama dengan beberapa CSS yang berbeda untuk mengubah tampilan.
Tidak ada komentar:
Write Kawan-kawan silakan tinggalkan komentar