Modul 4 CSS Lanjut

HTML Block Elements

Block Elemen pada dasarnya sudah memiliki baris baru setelah dan sebelum elemennya.

Contoh Elemen: <h1>, <p>, <ul>, <table> 

HTML Inline Elements

Inline Elemen ditampilkan tanpa baris baru pada halaman.

Contoh Elemen: <b>, <td>, <a>, <img> Mengubah Elemen Block/Inline

Sebuah elemen HTML, dapat kita ubah perilakunya dengan menggunakan properti css display.

Contoh:
p { display: inline; }
img { display: block; }

HTML <div> & <span>

HTML <div>

  • Tag <div> merupakan block elemen pada HTML yang biasa digunakan sebagai kontainer / wadah dari sekumpulan elemen-elemen HTML lain di dalamnya.
  • Tag <div> jika digunakan hanya pada HTML, tidak akan memiliki fungsi apa-apa. Kecuali, hanya sebagai elemen block yang akan menambahkan baris baru pada elemen di dalamnya
  • Jika digunakan bersamaan dengan CSS, Tag <div> dapat berfungsi untuk mengatur style pada sekumpulan elemen HTML yang berada di dalamnya.
  • Penggunaan lain untuk Tag <div> adalah sebagai cara untuk mengatur layout pada halaman.

HTML <span>

  • Tag <span> merupakan inline elemen pada HTML yang biasa digunakan sebagai kontainer/ wadah dari teks
  • Tag <span> tidak menciptakan baris baru pada elemen di dalamnya.
CSS Dimension

Berfungsi untuk mengatur ukuran (panjang & lebar) sebuah elemen.

Terdiri dari :

  • Width
  • Height

E:\Semester 2\Pmrograman Web\modul-4-css-lanjut\modul-4-css-lanjut\images\1.jpg

CSS Box Model

  • Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak.
  • Digunakan pada saat kita akan merancang tampilan sebuah website.
  • Pada dasarnya berfungsi sebagai tempat yang membungkus isi dari elemen-elemen HTML.
  • Tag yang biasanya digunakan untuk merancang tampilan adalah <div>, walaupun tag lain juga bisa menerapkan box model.
  • Terdiri atas 4 bagian: Margin, Border, Padding, Content.

E:\Semester 2\Pmrograman Web\modul-4-css-lanjut\modul-4-css-lanjut\images\2.jpg

CSS Margin

Area yang terletak di sekeliling border
Pelajari Property & Value pada CSS Margin disini.

Berikut ini adalah beberapa cara penulisan margin beserta keterangan-nya:

E:\Semester 2\Pmrograman Web\modul-4-css-lanjut\modul-4-css-lanjut\images\clockwise.jpg
E:\Semester 2\Pmrograman Web\modul-4-css-lanjut\modul-4-css-lanjut\images\3.jpg

Contoh:

E:\Semester 2\Pmrograman Web\modul-4-css-lanjut\modul-4-css-lanjut\images\image1.png

CSS Padding

CSS padding properties digunakan untuk menentukan spasi antara border elemen dengan isi element
Pelajari Property & Value pada CSS Padding disini.

Cara penulisan-nya hampir sama dengan penulisan Margin.

Perbedaannya adalah padding tidak bisa diisi nilai negatif.

Contoh:

E:\Semester 2\Pmrograman Web\modul-4-css-lanjut\modul-4-css-lanjut\images\image2.png

CSS Border

Digunakan untuk memanipulasi border pada sebuah elemen HTML.
Pelajari Property & Value pada CSS Border disini.

Contoh:

E:\Semester 2\Pmrograman Web\modul-4-css-lanjut\modul-4-css-lanjut\images\image3.jpg

hasilnya seperti ini

Leave a Reply

Your email address will not be published. Required fields are marked *