RENCANA PELAKSANAAN PEMBELAJARAN( RPP )

Satuan Pendidikan: SMK MAARIF 1 TEMONKelas/Semester: X/1Mata Pelajaran: Pemrograman WebMateri pokok: Format Tabel pada Halaman Web Waktu : 4 kali pertemuan @ 445 Menit

A. Kompetensi Inti1. Menghayati dan mengamalkan ajaran agama yang dianutnya.2. Mengembangkan perilaku (jujur, disiplin,tanggung jawab, peduli, santun, ramah lingkungan, gotong royong, kerjasama, cinta damai,responsif dan proaktif) dan menunjukan sikap sebagai bagian dari solusi atas berbagai permaslahan bangsa dalam berinteraksi secara efektif dengan lingkungan sosial dan alam serta dalam menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia3. Memahami, menerapkan,menganalisis pengetahuan faktual, konseptual, prosedural berdasarkan ingintahunya tentang ilmu pengetahuan, teknologi, seni, budaya dan humaniora dengan wawasan kemanusiaan, kebangsaan, kenegaraan dan peradaban terkait fenomena dan kejadian, serta menerapkan pengetahuan prosedural pada bidang kajian yang spesifik sesuai dengan bakat dan minatnya untuk memcahkan masalah4. Mengolah, menalar, dan menyaji dalam ranah konkret dan ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu melaksanakan tugas spesifik di bawah pengawasan langsung

B. Kompetensi Dasar1.2.Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber energi di alam Indikator1.2.1.Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber energi di alam.2.2.Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari sebagai wujud implementasi melaksanakan percobaan dan melaporkan hasil percobaanIndikator2.2.1.Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari sebagai wujud implementasi melaksanakan percobaan dan melaporkan hasil percobaan 3.3.Menerapkan format tabel pada halaman web Indikator3.3.1Menjelaskan perintah-perintah html untuk membuat tabel pada halaman web3.3.2.Menerapkan perintah-perintah html untuk membuat tabel pada halaman web4.3.Menyajikan data tabel pada halaman webIndikator4.3.1.Menerapkan perintah-perintah html untuk membuat tabel sederhana pada halaman web4.3.2.Menerapkan perintah-perintah html untuk membuat tabel dengan spanning4.3.3.Menerapkan perintah-perintah html untuk membuat tabel di dalam tabel (tabel bersarang)4.3.4.Menerapkan perintah-perintah html untuk membuat tampilan web sederhana dengan tabel

C. Tujuan Pembelajaran 1. Melalui berdoa, Peserta didik dapat merenungi kebesaran Tuhan yang menciptakan berbagai sumber energi di alam2. Melalui diskusi dan presentasi, peserta didik dapat menghargai kerjasama dalam kelompok 3. Melalui membaca, diskusi dan presentasi, peserta didik dapat menunjukkan perintah html untuk membuat tabel pada halaman web dengan benar.4. Melalui membaca, diskusi dan presentasi, peserta didik dapat menerapkan perintah html untuk membuat tabel pada halaman web dengan benar.5. Melalui diskusi dan praktik, peserta didik dapat menerapkan perintah html untuk membuat sebuah tabel sederhana pada halaman web dengan benar.6. Indikator 4.3.2.Melalui diskusi dan praktik, peserta didik dapat menerapkan perintah html untuk membuat sebuah tabel dengan spanning dengan benar.7. Indikator 4.3.3.Melalui diskusi dan praktik, peserta didik dapat menerapkan perintah html untuk membuat sebuah tabel di dalam tabel dengan benar.8. Indikator 4.3.4.Melalui diskusi dan praktik, peserta didik dapat menerapkan perintah html untuk membuat sebuah tampilan web sederhana menggunakan tabel dengan benar.

D. Materi Pembelajaran Materi terdapat pada buku ... halaman ...Atau ditulis semuanya Anatomi tabel minimal Tabel dengan spanning Tabel di dalam tabel Desain halaman web dengan konsep tabel

E. Metode 1. Pendekatan : Saintifik / ---> yg lain:discovery, projrct 2. Model : 3. Metode : Penugasan, Diskusi, Presentasi, PraktekStrategi: gabungan dari beberapa metode.

F. Media Pembelajaran1. Laptop dan LCD 2. Papan tulis, spidol dan penghapus.G. Alat dan Bahan 1. Lembar rangkuman materi pembelajaran.2. Lembar penilaian3. Laptop/PC yang sudah terinstal text editor dan browser web

H. Sumber Belajar 1. Lembar materi2. Modul HTML / pemrograman web3. Buku referensi dan artikel yang sesuai4. Sumber bacaan dari Internet

I. Kegiatan Pembelajaran1.Alokasi Waktu(waktu: 1 pertemuan 4 x 45 menit)

2. Langkah Langkah Pembelajarana. Pertemuan 1KegiatanDeskripsi KegiatanAlokasi Waktu

Pendahuluan1. Peserta didik berdoa dan menjawab salam dari guru.2. Peserta didik dipresensi oleh guru.3. Guru bertanya tentang materi sebelumnya4. Peserta didik memperoleh apersepsi dari guru berkaitan dengan pengetahuan mengenai Format tabel pada halaman web.5. Peserta didik memperoleh motivasi dari guru berkaitan dengan format tabel pada halaman web.6. Peserta didik mendapatkan informasi dari guru tentang KD, tujuan, dan skenario pembelajaran.7. Peserta didikmembentuk kelompok belajar yang beranggotakan 4-5 orang10 menit

IntiMengamati1. Peserta didik membaca buku/modul atau mengamati video pembelajaran tentang cara membuat tabel pada halaman web2. Peserta didik browsing internet dan mengamati tentang pelbagai contoh tabel dan tampilannya pada halaman web

Mengumpulkan informasiPeserta didik mengumpulkan informasi tentang contoh perintah/kode html untuk membuat tabel beserta hasilnya.

Menanya1. Siswa bertanya tentang materi yang belum dipahami2. Siswa mendiskusikan perintah html dalam pembuatan tabel pada halaman web

Mengeksplorasi > Menalar1. Siswa mendefinisikan perintah dasar html untuk membuat sebuah tabel pada halaman web2. Siswa melakukan eksperimen dengan membuat beberapa bentuk tabel sederhana pada halaman web dengan html3. Siswa mempraktekkan pembuatan tabel sesuai dengan soal yang diberikan oleh guru.

Mengasosiasi > mengerjakan latihanSiswa menganalisis, mendiskusikan serta membuat rangkuman tentang bagian-bagian tabel pada halaman web dan perintah html unntuk membuatnya

MengkomunikasikanSiswa mempresentasikan perintah pembuatan tabel pada halaman web140 menit

Penutup1. Salah satu atau lebih peserta didik menyimpulkan tentang tabel pada halaman web dan perintah html-nya.2. Tes tertulis bentuk uraian mengenai perintah html untuk membuat tabel pada halaman web3. Peserta didik memperhatikan dengan cermat untuk mempelajari materi lebih lanjut.30 menit

Tes ada di Inti.

b. Pertemuan 2KegiatanDeskripsi KegiatanAlokasi Waktu

Pendahuluan1. Peserta didik berdoa dan menjawab salam dari guru.2. Peserta didik dipresensi oleh guru.3. Peserta didik memperoleh apersepsi dari guru berkaitan dengan pengetahuan mengenai tabel dengan spanning pada halaman web.4. Peserta didik memperoleh motivasi dari guru berkaitan dengan tabel dengan spanning pada halaman web.5. Peserta didik mendapatkan informasi dari guru tentang KD, tujuan, dan skenario pembelajaran.6. Peserta didikmembentuk kelompok belajar yang beranggotakan 4-5 orang10 menit

IntiMengamati1. Peserta didik membaca buku atau melihat video tentang tabel dengan spanning pada halaman web 2. Peserta didik browsing internet dan mengamati tentang pelbagai contoh tabel dengan spanning dan tampilannya pada halaman web

Mengumpulkan informasiPeserta didik mengumpulkan informasi tentang contoh tabel dengan spanning beserta perintah/kode html untuk membuatnya.

Menanya1. Siswa bertanya tentang materi yang belum dipahami2. Siswa mendiskusikan perintah pembuatan tabel dengan spanning pada halaman web

Mengeksplorasi1. Siswa mendefinisikan perintah html untuk membuat sebuah tabel dengan spanning pada halaman web2. Siswa melakukan eksperimen dengan membuat beberapa bentuk tabel dengan spanning pada halaman web dengan html

MengasosiasiSiswa menganalisis, mendiskusikan serta membuat rangkuman tentang bagian-bagian tabel dengan spanning pada halaman web dan perintah html untuk membuatnya

MengkomunikasikanSiswa mempresentasikan perintah dasar pembuatan tabel dengan spanning pada halaman web140 menit

Penutup1. Salah satu atau lebih peserta didik menyimpulkan tentang tabel dengan spanning dan perintah html-nya.2. Tes tertulis bentuk uraian mengenai perintah html untuk membuat tabel dengan spanning pada halaman web.3. Peserta didik memperhatikan dengan cermat untuk mempelajari materi lebih lanjut.30 menit

3. Pertemuan 3KegiatanDeskripsi KegiatanAlokasi Waktu

Pendahuluan1. Peserta didik berdoa/menjawab salam guru bersama-sama.2. Peserta didik dipresensi oleh guru.3. Peserta didik memperoleh apersepsi dari guru berkaitan dengan pengetahuan mengenai tabel di dalam tabel.4. Peserta didik memperoleh motivasi dari guru berkaitan dengan tabel di dalam tabel pada halaman web.5. Peserta didik mendapatkan informasi dari guru tentang KD, tujuan, dan skenario pembelajaran.6. Peserta didikmembentuk kelompok belajar yang beranggotakan 4-5 orang10 menit

IntiMengamati1. Peserta didik membaca buku tentang tabel di dalam tabel pada halaman web 2. Peserta didik browsing internet dan mengamati tentang pelbagai contoh tabel di dalam tabel dan tampilannya pada halaman web

Mengumpulkan informasiPeserta didik mengumpulkan informasi tentang contoh tabel di dalam tabel beserta perintah/kode html untuk membuatnya.

Menanya1. Siswa bertanya tentang materi yang belum dipahami2. Siswa mendiskusikan perintah pembuatan tabel di dalam tabel pada halaman web

Mengeksplorasi1. Siswa mendefinisikan perintah html untuk membuat sebuah tabel di dalam tabel pada halaman web2. Siswa melakukan eksperimen dengan membuat beberapa bentuk tabel di dalam tabel pada halaman web dengan html

MengasosiasiSiswa menganalisis, mendiskusikan serta membuat rangkuman tentang bagian-bagian tabel di dalam tabel pada halaman web dan perintah html untuk membuatnya

MengkomunikasikanSiswa mempresentasikan perintah dasar pembuatan tabel di dalam tabel pada halaman web140 menit

Penutup1. Salah satu atau lebih peserta didik menyimpulkan tentang tabel di dalam tabel dan perintah html-nya.2. Tes tertulis bentuk uraian mengenai perintah html untuk membuat tabel di dalam tabel pada halaman web.3. Peserta didik memperhatikan dengan cermat untuk mempelajari materi lebih lanjut.30 menit

4. Pertemuan 4KegiatanDeskripsi KegiatanAlokasi Waktu

Pendahuluan1. Peserta didik berdoa/menjawab salam guru bersama-sama.2. Peserta didik dipresensi oleh guru.3. Peserta didik memperoleh apersepsi dari guru berkaitan dengan pengetahuan mengenai tampilan halaman web sederhana dengan tabel.4. Peserta didik memperoleh motivasi dari guru berkaitan dengan tampilan halaman web sederhana dengan tabel b.5. Peserta didik mendapatkan informasi dari guru tentang KD, tujuan, dan skenario pembelajaran.6. Peserta didikmembentuk kelompok belajar yang beranggotakan 4-5 orang10 menit

IntiMengamati1. Peserta didik membaca buku tentang tampilan halaman web sederhana dengan tabel.2. Peserta didik browsing internet dan mengamati tentang pelbagai contoh tampilan halaman web sederhana dengan tabel pada halaman web

Mengumpulkan informasiPeserta didik mengumpulkan informasi tentang contoh tampilan halaman web sederhana dengan tabel beserta perintah/kode HTML untuk membuatnya.

Menanya1. Siswa bertanya tentang materi yang belum dipahami2. Siswa mendiskusikan perintah untuk membuat tampilan halaman web sederhana dengan tabel.

Mengeksplorasi1. Siswa mendefinisikan perintah HTML untuk membuat sebuah tampilan halaman web sederhana dengan tabel2. Siswa melakukan eksperimen dengan membuat beberapa bentuk tampilan halaman web sederhana dengan tabel

MengasosiasiSiswa menganalisis, mendiskusikan serta membuat rangkuman tentang tampilan halaman web sederhana dengan tabel dan perintah HTML unntuk membuatnya

MengkomunikasikanSiswa mempresentasikan perintah dasar pembuatan tampilan halaman web sederhana dengan table140 menit

Penutup1. Salah satu atau lebih peserta didik menyimpulkan tentang tampilan halaman web sederhana dengan tabel dan perintah html-nya.2. Tes tertulis bentuk uraian mengenai tampilan halaman web sederhana dengan tabel.3. Peserta didik memperhatikan dengan cermat untuk mempelajari materi lebih lanjut.30 menit

E. Penilaian Hasil Belajar

1.Jenis / Teknik Penilaian : a. Penilaian Sikap : Observasib. Penilaian Pengetahuan: Tes Tulis c. Penilaian Keterampilan: Tes Praktik

2. Aspek PenilaianNoAspek yang dinilaiTeknik PenilaianWaktu Penilaian

1.Sikap

Observasi1.Menghayati dan mengamalkan ajaran agama diamati selama proses KBM2.Bekerjasama diamati dalam kegiatan kelompok.3.Toleransi diamati dalam diskusi ketika terjadi proses pemecahan masalah yang berbeda.4.Menjaga dan memelihara kebersihan lingkungan selama pelaksnaan pembelajaranDalam pembelajaran dan saat diskusi (selama kegiatan inti)

2.Pengetahuan

Tes tertulis bentuk uraian mengenai pengertian, perintah html untuk membuat tabel dan tahapan dalam pengaturan dan pembuatan sebuah tabelPenyelesaian tugas essay individu, pada akhir KD

3.

Keterampilan

PraktikKeterampilan dalam melaksanakan dan meyelesaikan Lembar Kerja Praktik.Penyelesaian tugas praktik (baik individu maupun kelompok)

3. Bentuk Instrumen dan Instrumen Penilaiana.Penilaian SikapInstrumen penilaian sikap dengan observasiBerilah tanda cek pada kolom pilihan berikut: NoNama SiswaAspek Pengamatan

ABCD

1234123412341234

1

2

3

4

5

6

7

8

Pedoman skor::4 = selalu, 3 = sering, 2 = jarang 1 = tidak pernah

Keterangan Aspek PengamatanKodeAspek Pengamatan

ABerdoa sebelum dan sesudah melakukan sesuatu

BAktif dan berkontribusi positif dalam diskusi kelompok

CSantun dalam mengungkapkan pendapat selama diskusi

DMenjaga kebersihan selama pembelajaran

b.Penilaian Pengetahuan dan Keterampilan1) PERTEMUAN 1Instrumen Tes Tulis (uraian)Jawablah pertanyaan di bawah ini dengan jelas dan benar!1. Apakah kegunaan tabel pada halaman web?2. Sebut dan jelaskan tag utama untuk membuat tabel!3. Sebut dan jelaskan atribut pada tag table!4. Tuliskan contoh perintah html untuk membuatan sebuah tabel sederhana!

Kunci jawaban : 1. Tabel digunakan untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom.2. Tag utama untu membuat tabel dan fungsinya adalahTagFungsi ...Mendefinisikan blok tabel ... Mendefinisikan table row atau baris ... Mendefinisikan table data atau sel sebagai tempat untuk menuliskan/meletakkan data pada tabel ... Mendefinisikan table heading atau sel yang merupakan judul tiap kolom

3. Atribut dan nilainya pada tag Table Width = bilangan bulat (lebar table, pixel atau persen) Height = bilangan bulat (tinggi table, pixel atau persen) Border = bilangan bulat (tebal garis tepi) Cellspacing = bilangan bulat (spasi antar sel) Cellpadding= bilangan bulat (spasi di dalam sel) Align= [left|center|right] (perataan table) Bgcolor = [warna|kode heksadesimal] (warna latar belakang)4. Contoh perintah html untuk menampilkan tabel:

Nama Budi Setiawan

Umur 16 tahun

Pedoman Penilaian Tes Tulis Uraian (Pengetahuan)1. Soal nomor 1 dijawab benar skor maksimal 252. Soal nomor 2 dijawab benar skor maksimal 253. Soal nomor 3 dijawab benar skor maksimal 254. Soal nomor 4 dijawab benar skor maksimal 25

Instrumen PraktikSoal Praktik: 1. Buatlah tabel sederhana berikut ini dengan perintah html

2) PERTEMUAN 2Instrumen Tes Tulis (uraian)Jawablah pertanyaan di bawah ini dengan jelas dan benar!1. Apa atribut untuk menggabungkan baris?2. Apa atribut untuk menggabungkan kolom?3. Tulislah tag jika ingin menggabungkan 3 baris !4. Tulislah tag jika ingin menggabungkan 3 kolom !

Kunci jawaban : 1. Atribut untuk menggabungkan baris adalah rowspan 2. Atribut untuk menggabungkan kolom adalah colspan3. Tag untuk menggabugkan 3 baris adalah 4. Tag untuk menggabungkan 3 kolom adalah

Pedoman Penilaian Tes Tulis Uraian (Pengetahuan)1. Soal nomor 1 dijawab benar skor maksimal 252. Soal nomor 2 dijawab benar skor maksimal 253. Soal nomor 3 dijawab benar skor maksimal 254. Soal nomor 4 dijawab benar skor maksimal 25

Instrumen PraktikSoal Praktik:Buatlah tabel dengan spanning berikut menggunakan html!

3) PERTEMUAN 3Instrumen Tes Tulis (uraian)Jawablah pertanyaan di bawah ini dengan jelas dan benar!1. Apa keuntungan teknik tabel di dalam tabel?2. Jelaskan cara membuat tabel di dalam tabel?

Kunci Jawaban:1. Keuntungan tabel di dalam tabel (tabel bersarang) adalah menghasilkan layout tabel yang kompleks tanpa membuat kode perintah tabel yang sangat kompleks2. Untuk membuat tabel di dalam tabel adalah dengan membuat/menuliskan perintah table di dalam sebuah sel ()

Pedoman Penilaian Tes Tulis Uraian (Pengetahuan) 1. Soal nomor 1 dijawab benar skor maksimal 502. Soal nomor 2 dijawab benar skor maksimal 50

Instrumen PraktikBuatlah sebuah contoh layout tabel bersarang berikut!

4) PERTEMUAN 4Instrumen Tes Tulis (uraian)Jawablah pertanyaan di bawah ini dengan jelas dan benar!1. Jelaskan tentang bagian dari anatomi sebuah halaman web!

Kunci Jawaban:1. Anatomi halaman web:a. Containing Block.Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. b. Logo.Identitas perusahaan, organisasi, pemilik situs.c. Navigation.Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.d. Content.Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.e. Footer.Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.f. Whitespace.Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.

Pedoman Penskoran Tes Tulis Uraian (Pengetahuan) 1. Soal Uraian nomor 1 dijawab benar skor maksimal 100

Instrumen PraktikBuatlah layout web dengan tabel berikut dengan html! Instrumen Penilaian PraktikBerilah tanda cek pada kolom pilihan berikut dengan :

No.Nama SiswaTanggung JawabIntegritasObjektivitasKemahiran

1234123412341234

1

2

Pedoman Penskoran (Keterampilan)NO.ASPEK ETIKA PROFESIKRITERIA PENILAIANSKOR

1.Tanggung jawabKurang bertanggung jawabCukup bertanggung jawabBertanggung jawabSangat bertanggung jawab1234

2.IntegritasKurang berintegritasCukup berintegritasBerintegritasSangat berintegritas1234

3.ObjektivitasKurang objektifCukup objektifObjektifSangat objektif1234

4.KemahiranKurang mahirCukup mahir MahirSangat mahir1234

Kulonprogo, 12 September 2014Mengetahui Kepala Sekolah GuruMapel

Dra. KasminahYudwi Antoro WibowoNIP.19550110 198403 2 001

LAMPIRANA. RINGKASAN MATERI PERTEMUAN KE-1Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag .Elemen table berisi property untuk menentukan baris (table row) yang di dalamnya terdapat properti untuk menampilkan data pada setiap sel table(table data).Struktur elemen table adalah sebagai berikut: data baris 1 kolom 1 data baris 1 kolom 2

Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag .. Tag Utama untuk tabel adalahTag Fungsi

.. Mendifinisikan Tabel

Mendifinisikan table row atau baris

Data pada tabel/sel

Mendifinisikan table heading atau judul tiap kolom

Atribut Elemen Table Width = panjang(lebar table, pixel atau persen) Height = panjang(tinggi table, pixel atau persen) Border = pixel(tebal garis tepi) Cellspacing = pixel(spasi antar sel) Cellpadding= pixel(spasi di dalam sel) Align = [left|center|right](perataan table) Bgcolor = warna(warna latar belakang table) Atribut Table Row Align = [left|center|right](perataan sebaris sel secara horizontal) Valign = [top|middle|bottom](perataaan sebaris sel secara vertical) Bgcolor = warna(warna latar belakang baris) Atribut Tabel Data Align = [left|center|right](perataan horizontal) Width = [top|middle|bottom](perataan vertical) Height = pixel(tinggi sel, pixel atau persen) Bgcolor = warna(warna latar belakang sel)

B. RINGKASAN MATERI PERTEMUAN KE-2Tabel dengan SpanningAda kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris Benua Negara

ASIA Arab Saudi

India

Indonesia

Singapura

Berikut ini contoh tabel yang menggabungkan kolom :Benua EROPA

Negara Belanda Italia Inggris Jerman

Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan adalah sebagai berikut Rowspan = angka (baris yang di span oleh sel) Colspan = angka (kolom yang di span oleh sel) Jadi untuk menggabungkan 4 baris seperti table di atas adalah : .Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah : . Jadi untuk menggabungkan baris ataupun kolom pada tabel, digunakan atribut : Rowspan: untuk baris Colspan: untuk kolom

C. RINGKASAN MATERI PERTEMUAN KE-3Tabel Bersarang (Tabel di Dalam tabel)

Dapat kita lihat bahwa di kolom Email account note ada table berisi tentang catatan jenis email. Jadi ada tabel di dalam tabel atau istilahnya nested table atau tabel bersarang. Dalam penulisan HTML tabel bersarang ini adalah dengan menuliskan HTML Tabel di dalam sebuah sel dari tabel, letaknya adalah pada ., seperti berikut ini data baris 1 kolom 1

cell tabel ke 2 cell tabel ke 2

Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel ().

D. RINGKASAN MATERI PERTEMUAN KE-4Layout Web dengan TabelSecara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space dapat digambarkan sebagai berikut

1. Containing Block. Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag , atau . 2. Logo. Identitas perusahaan, organisasi, pemilik situs. 3. Navigation. Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman. 4. Content. Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan. 5. Footer. Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link. 6. Whitespace. Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.Gambar brikut ini adalah contoh sebuah tabel yang digunakan sebagai layout format tampilan halaman web.

Dengan menggunakan html, maka dapat dibuat layout web seperti berikut: