Download as PDF, PPTX
Uploaded bySandhika Galih
CSS Layouting #1 : Display
Dokumen ini menjelaskan penggunaan tag <div> dan <span> dalam HTML yang tidak memiliki arti tetapi digunakan untuk pengelompokan. Selain itu, dijelaskan berbagai nilai properti display CSS, seperti inline, inline-block, dan block, yang mempengaruhi perilaku elemen HTML dalam tata letak. Setiap elemen memiliki nilai default untuk display, namun perilaku ini dapat diubah sesuai kebutuhan.
CSS Layouting #1 : Display
- 1.
- 2.
- 3. http://htmldog.com/guides/html/intermediate/spandiv/ tag pada HTMLdigunakan untuk memberikan ‘maksud’ / ‘arti’ pada sebuah konten (p untuk paragraf, h1 untuk heading utama, dll). Tag <div> dan <span> tidak memiliki ‘arti’ apapun, keduanya digunakan untuk mengelompokkan tag-tag HTML dan memberikan informasi terhadap tag-tag tersebut. “
- 4.
- 9.
- 14.
- 17.
- 18. https://css-tricks.com/almanac/properties/d/display/ setiap tag padaHTML berada di dalam sebuah kotak. properti display pada CSS mengatur perilaku dari kotak tersebut. “
- 19. https://developer.mozilla.org/en-US/docs/Web/CSS/display setiap tag padaHTML memiliki nilai default untuk properti display.Tetapi kita juga dapat mengubah perilaku dari tag tersebut dengan mengganti value-nya. “
- 20.
- 21.
- 22.
- 23. inline • Elemen HTMLyang secara default tidak menambahkan baris baru ketika dibuat
- 24. inline • Elemen HTMLyang secara default tidak menambahkan baris baru ketika dibuat • Lebar dan tinggi elemennya sebesar konten yang ada di dalamnya
- 25. inline • Elemen HTMLyang secara default tidak menambahkan baris baru ketika dibuat • Lebar dan tinggi elemennya sebesar konten yang ada di dalamnya • Kita tidak dapat mengatur tinggi dan lebar dari elemen inline
- 26. inline • Elemen HTMLyang secara default tidak menambahkan baris baru ketika dibuat • Lebar dan tinggi elemennya sebesar konten yang ada di dalamnya • Kita tidak dapat mengatur tinggi dan lebar dari elemen inline • Margin dan padding hanya mempengaruhi elemen secara horizontal, tidak vertikal
- 27. elemen inline b, strong,i, em, a, span, sub, sup, button, input, label, select, textarea, … https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente
- 31. Tidak terpengaruh oleh widthdan height
- 32.
- 33. inline-block • Tidak adaelemen yang secara default memiliki properti display: inline-block;
- 34. inline-block • Tidak adaelemen yang secara default memiliki properti display: inline-block; • Kita harus ubah secara manual properti tersebut
- 35. inline-block • Tidak adaelemen yang secara default memiliki properti display: inline-block; • Kita harus ubah secara manual properti tersebut • Perilaku dasarnya sama dengan elemen inline
- 36. inline-block • Tidak adaelemen yang secara default memiliki properti display: inline-block; • Kita harus ubah secara manual properti tersebut • Perilaku dasarnya sama dengan elemen inline • Perbedaanya, elemen inline-block dapat kita atur tinggi dan lebar-nya
- 38.
- 39.
- 40. block • Elemen HTMLyang secara default menambahkan baris baru ketika dibuat
- 41. block • Elemen HTMLyang secara default menambahkan baris baru ketika dibuat • Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parent-nya
- 42. block • Elemen HTMLyang secara default menambahkan baris baru ketika dibuat • Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parent-nya • Kita dapat mengatur tinggi dan lebar dari elemen block
- 43. block • Elemen HTMLyang secara default menambahkan baris baru ketika dibuat • Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parent-nya • Kita dapat mengatur tinggi dan lebar dari elemen block • Di dalam elemen block, kita dapat menyimpan tag dengan elemen inline, inline-block, atau bahkan elemen block lagi
- 44. elemen block h1-h6, p,ol, ul, li form, hr, div, … https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
- 46. none Digunakan untuk menghilangkansebuah elemen
- 47.
- 48.
- 49.
- 51.
- 52.
- 53.