SlideShare a Scribd company logo
1 of 7
Layout/Struktur Web dengan Div, dan Span
Tag DIV
tag <div> digunakan untuk membuat struktur web,
Tag <div> yang tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa),
Mudah diubah menggunakan CSS.
Biasanya tag <div> menggunakan atribut id sebagai pembeda antara tag <div> yang satu dengan yang lainnya.
Contoh paling umum penggunaan tag <div> adalah sebagai container atau pembatas satu struktur HTML
dengan struktur lainnya.
Stuktur web diatas umum ada pada web modern yang
menggunakan CSS untuk men-style halaman. masing-
masing tag <div> memiliki atribut id yang
membedakannya dengan tag <div> lainnya.
contoh struktur HTML menggunakan tag <div>:
Output tag div.html :
Secara garis besar, tag-tag di dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line.
Jenis tag Block-line atau Block-style adalah kelompok tag yang ‘ingin’ berdiri sendiri, dan
memisahkan diri dari tag disekitarnya.
Block Style tag umumnya akan tampil pada baris baru dan secara otomatis menambahkan spasi
(enter) di akhir tag. Contoh tag Block-line yaitu tag paragraf (<p>), heading (<h1>..<h6>), dan tabel
(<table>). Tag Block-line akan membuat sebuah ‘blok’ dalam struktur HTML. Di dalam tag ini bisa
terdapat tag block lain, maupun tag In-line.
Jenis tag In-line atau Inline style adalah tag yang tidak membuat blok baru di dalam struktur HTML.
Tag jenis ini tidak menambahkan spasi di akhir tag, dan cenderung menyambung tag sebelum dan
sesudahnya dalam baris yang sama. Contoh tag inline adalah tag garis miring (<em> atau <i>), tag
penebalan (<strong> atau <b>) dan tag link (<a>).
Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag.
Contoh perbedaan kedua tag ini dapat dilihat dalam kode HTML berikut, savelah sebagai
spandiv.html
Perbedaan utama antara tag div dan span :
Jika tag div digunakan maka akan membagi halaman web secara otomatis meskipun di dalam tag div
tersebut tidak di atur format style CSS-nya,
Sedangkan Span Hanya akan mengatur isi konten yang dilingkupinya tanpa mengatur atau membagi
halaman web menjadi bagian-bagian kecil seperti yang dilakukan oleh DIV.

More Related Content

Similar to Layout Web DIV dan SPAN

Similar to Layout Web DIV dan SPAN (11)

Pengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docxPengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docx
 
Modul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman webModul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman web
 
Pemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSSPemrograman Web - Pengenalan CSS
Pemrograman Web - Pengenalan CSS
 
Modul macam macam selector
Modul macam macam selectorModul macam macam selector
Modul macam macam selector
 
chap CSS.pptx
chap CSS.pptxchap CSS.pptx
chap CSS.pptx
 
UKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptxUKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptx
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II web
 
Pemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTMLPemrograman Web - Pengenalan HTML
Pemrograman Web - Pengenalan HTML
 
Css
CssCss
Css
 
Css
CssCss
Css
 

More from zaenald i

Pertemuan java script 2
Pertemuan java script 2Pertemuan java script 2
Pertemuan java script 2zaenald i
 
Pertemuan java script 1
Pertemuan java script 1Pertemuan java script 1
Pertemuan java script 1zaenald i
 
Pertemuan 7+++
Pertemuan 7+++Pertemuan 7+++
Pertemuan 7+++zaenald i
 
Pertemuan 7+
Pertemuan 7+Pertemuan 7+
Pertemuan 7+zaenald i
 
Pertemuan 7++
Pertemuan 7++Pertemuan 7++
Pertemuan 7++zaenald i
 
Pertemuan 6 7
Pertemuan 6 7Pertemuan 6 7
Pertemuan 6 7zaenald i
 
Pertemuan 4 c
Pertemuan 4 cPertemuan 4 c
Pertemuan 4 czaenald i
 
Pertemuan 4 b
Pertemuan 4 bPertemuan 4 b
Pertemuan 4 bzaenald i
 
Pertemuan 3 b
Pertemuan 3 bPertemuan 3 b
Pertemuan 3 bzaenald i
 
Pertemuan 3 a
Pertemuan 3 aPertemuan 3 a
Pertemuan 3 azaenald i
 
Pertemuan 2 b
Pertemuan 2 bPertemuan 2 b
Pertemuan 2 bzaenald i
 
Pertemuan 2 a
Pertemuan 2 aPertemuan 2 a
Pertemuan 2 azaenald i
 
Pertemuan 1-A
Pertemuan 1-APertemuan 1-A
Pertemuan 1-Azaenald i
 

More from zaenald i (15)

Pertemuan java script 2
Pertemuan java script 2Pertemuan java script 2
Pertemuan java script 2
 
Pertemuan java script 1
Pertemuan java script 1Pertemuan java script 1
Pertemuan java script 1
 
Pertemuan 7+++
Pertemuan 7+++Pertemuan 7+++
Pertemuan 7+++
 
Pertemuan 7+
Pertemuan 7+Pertemuan 7+
Pertemuan 7+
 
Pertemuan 7++
Pertemuan 7++Pertemuan 7++
Pertemuan 7++
 
Pertemuan 6 7
Pertemuan 6 7Pertemuan 6 7
Pertemuan 6 7
 
Pertemuan 5
Pertemuan 5Pertemuan 5
Pertemuan 5
 
Pertemuan 4 c
Pertemuan 4 cPertemuan 4 c
Pertemuan 4 c
 
Pertemuan 4 b
Pertemuan 4 bPertemuan 4 b
Pertemuan 4 b
 
Pertemuan 3 b
Pertemuan 3 bPertemuan 3 b
Pertemuan 3 b
 
Pertemuan 3 a
Pertemuan 3 aPertemuan 3 a
Pertemuan 3 a
 
Pertemuan 2 b
Pertemuan 2 bPertemuan 2 b
Pertemuan 2 b
 
Pertemuan 2 a
Pertemuan 2 aPertemuan 2 a
Pertemuan 2 a
 
1
11
1
 
Pertemuan 1-A
Pertemuan 1-APertemuan 1-A
Pertemuan 1-A
 

Layout Web DIV dan SPAN

  • 2. Tag DIV tag <div> digunakan untuk membuat struktur web, Tag <div> yang tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa), Mudah diubah menggunakan CSS. Biasanya tag <div> menggunakan atribut id sebagai pembeda antara tag <div> yang satu dengan yang lainnya. Contoh paling umum penggunaan tag <div> adalah sebagai container atau pembatas satu struktur HTML dengan struktur lainnya.
  • 3. Stuktur web diatas umum ada pada web modern yang menggunakan CSS untuk men-style halaman. masing- masing tag <div> memiliki atribut id yang membedakannya dengan tag <div> lainnya. contoh struktur HTML menggunakan tag <div>:
  • 5. Secara garis besar, tag-tag di dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line. Jenis tag Block-line atau Block-style adalah kelompok tag yang ‘ingin’ berdiri sendiri, dan memisahkan diri dari tag disekitarnya. Block Style tag umumnya akan tampil pada baris baru dan secara otomatis menambahkan spasi (enter) di akhir tag. Contoh tag Block-line yaitu tag paragraf (<p>), heading (<h1>..<h6>), dan tabel (<table>). Tag Block-line akan membuat sebuah ‘blok’ dalam struktur HTML. Di dalam tag ini bisa terdapat tag block lain, maupun tag In-line. Jenis tag In-line atau Inline style adalah tag yang tidak membuat blok baru di dalam struktur HTML. Tag jenis ini tidak menambahkan spasi di akhir tag, dan cenderung menyambung tag sebelum dan sesudahnya dalam baris yang sama. Contoh tag inline adalah tag garis miring (<em> atau <i>), tag penebalan (<strong> atau <b>) dan tag link (<a>). Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag.
  • 6. Contoh perbedaan kedua tag ini dapat dilihat dalam kode HTML berikut, savelah sebagai spandiv.html
  • 7. Perbedaan utama antara tag div dan span : Jika tag div digunakan maka akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak di atur format style CSS-nya, Sedangkan Span Hanya akan mengatur isi konten yang dilingkupinya tanpa mengatur atau membagi halaman web menjadi bagian-bagian kecil seperti yang dilakukan oleh DIV.