HTML (Lanjut)

1
HTML (Lanjut)
2
TABEL

• Fungsi
• Menampilkan informasi secara terstruktur, ringkas
  dan mudah dibaca
• Mengatur tampilan homepage agar lebih menarik

3

• Tag yang diperlukan ltTablegt
• Atributnya

4
Membuat tabel sederhana

• Tag yang diperlukan
• Membuat baris lttrgt (table row)
• Membuat kolom lttdgt (table data)
• Contoh
• lttable border"1"gt
• lttrgtlttdgtBaris 1 Sel 1lt/tdgtlttdgtBaris 1 Sel
  2lt/tdgtlt/trgt
• lttrgtlttdgtBaris 2 Sel 1lt/tdgtlttdgtBaris 2 Sel
  2lt/tdgtlt/trgt
• lt/tablegt
• Tampilan

5
Menambahkan judul tabel

• Judul tabel ltcaptiongt
• Judul baris/kolom ltthgt (table header)
• Contoh
• lttable border"1"gt
• ltcaption align"top"gt ltbgt DAFTAR MAHASISWA lt/bgt
  lt/captiongt
• lttrgtltthgtNolt/thgtltthgtNPMlt/thgtltthgtNamalt/thgtlt/trgt
• lttrgtlttdgt1lt/tdgtlttdgt06.100.001lt/tdgtlttdgtAmin A.
  Angkasalt/tdgtlt/trgt
• lttrgtlttdgt2lt/tdgtlttdgt06.100.002lt/tdgtlttdgtBeni B.
  Bernardilt/tdgtlt/trgt
• lt/tablegt
• Tampilan

6
Mengatur lebar dan tinggi suatu tabel

• Atribut weight dan height
• Nilai
• ukuran (max 100)
• ukuran pixel
• Contoh
• lttable border"1" width50gt
• ltcaption align"top"gt
• ltbgt DAFTAR MAHASISWA lt/bgt lt/captiongt
• lttrgtltthgtNolt/thgt
• ltthgtNPMlt/thgt
• ltthgtNamalt/thgtlt/trgt
• lttrgtlttd width20gt1.lt/tdgt
• lttd width80 height50gt06.100.001lt/tdgt
• lttd width180 height50gtAmin A.
  Angkasalt/tdgtlt/trgt
• lttrgtlttd width20gt2.lt/tdgt
• lttd width80 height70gt06.100.002lt/tdgt
• lttd width180 height70gtBeni B.
  Bernardilt/tdgtlt/trgt
• lt/tablegt

7
Perataan dalam tabel

• horisontal atribut align utk ltcaptiongt, lttrgt,
  lttdgt dan ltthgt
• vertikal atribut valign utk lttrgt, lttdgt dan
  ltthgt
• Contoh
• lttable border"1" align"center"gt
• ltcaption align"top"gt
• ltbgt DAFTAR MAHASISWA lt/bgt lt/captiongt
• lttrgtltthgtNolt/thgtltthgtNPMlt/thgtltthgtNamalt/thgtlt/trgt
• lttrgtlttd align"center" width"20"gt1.lt/tdgt
• lttd align"center" valign"middle"
• width"80" height"50"gt06.100.001lt/tdgt
• lttd align"right" valign"top"
• width"180" height"50"gtAmin A. Angkasalt/tdgtlt/trgt
• lttrgtlttd width"20"gt2.lt/tdgt
• lttd align"left" valign"top"
• width"80" height"70"gt06.100.002lt/tdgt
• lttd align"left" valign"bottom"
• width"180" height"70"gtBeni B.
  Bernardilt/tdgtlt/trgt
• lt/tablegt

8
Membuat warna pada tabel

• Atribut bgcolor
• Contoh
• ltbody bgcolor"purple"gt
• ltfont size"3" face"arial" color"yellow"gt
• lttable border"2" bgcolor"white" align"center"gt
• ltcaption align"bottom"gt
• ltbgt Tabel Daftar Mahasiswa lt/bgt lt/captiongt
• lttr bgcolor"yellow"gt
• ltthgtNolt/thgtltthgtNPMlt/thgtltthgtNamalt/thgtlt/trgt
• lttr bgcolor"cyan"gtlttd align"center"
  width"20"gt1.lt/tdgt
• lttd align"left" valign"middle
• width"80" height"40"gt06.100.001lt/tdgt
• lttd align"left" valign"middle
• width"180" height"40"gtAmin A. Angkasalt/tdgtlt/trgt
• lttrgtlttd bgcolor"blue" width"20"gt2.lt/tdgt
• lttd bgcolor"red" align"left" valign"middle"
• width"80" height"40"gt06.100.002lt/tdgt
• lttd bgcolor"green" align"left" valign"middle"
• width"180" height"40"gtBeni B.
  Bernardilt/tdgtlt/trgt

9
Penggabungan baris/kolom

• Menggabungkan bbrp kolom menjadi 1 atribut
  colspan
• Menggabungkan bbrp baris menjadi 1 atribut
  rowspan
• Contoh Tampilan

10
Script HTML

• lttable border"1" bgcolor"white" align"center"gt
• ltcaption align"top"gt
• ltbgt Tabel Daftar Nilai Mahasiswa lt/bgt lt/captiongt
• lttr bgcolor"gray"gtltth rowspan"2"gtNolt/thgt
• ltth rowspan"2"gtNPMlt/thgt ltth rowspan"2"gtNamalt/thgt
  ltth colspan"2"gtNilailt/thgt
• lt/trgt
• lttr bgcolor"gray"gtltthgtUTSlt/thgt ltthgtUASlt/thgt
  lt/trgt
• lttrgtlttd align"center" width"20"gt1.lt/tdgt
• lttd align"left" valign"middle" width"80"
  height"40"gt06.100.001lt/tdgt
• lttd align"left" valign"middle" width"180"
  height"40"gtAmin A. Angkasalt/tdgt
• lttd align"center" valign"middle"gt70lt/tdgt lttd
  align"center" valign"middle"gt80lt/tdgt
• lt/trgt
• lttrgtlttd width"20"gt2.lt/tdgt
• lttd align"left" valign"middle" width"80"
  height"40"gt06.100.002lt/tdgt
• lttd align"left" valign"middle" width"180"
  height"40"gtBeni B. Bernardilt/tdgt
• lttd align"center" valign"middle"gt70lt/tdgt lttd
  align"center" valign"middle"gt80lt/tdgt
• lt/trgt
• lt/tablegt

11
Cellpading dan cellspacing

• atribut cellpading mengatur spasi antara border
  dengan tulisan
• atribut cellspasing mengatur spasi antar 2 buah
  sel
• Contoh Tampilan

12
Script HTML

• lttable border"1" bgcolor"white" align"center
  cellpadding"10" cellspacing"12"gt
• ltcaption align"top"gt
• ltbgt Tabel Daftar Nilai Mahasiswa lt/bgt lt/captiongt
• lttr bgcolor"gray"gtltth rowspan"2"gtNolt/thgt
• ltth rowspan"2"gtNPMlt/thgt ltth rowspan"2"gtNamalt/thgt
  ltth colspan"2"gtNilailt/thgt
• lt/trgt
• lttr bgcolor"gray"gtltthgtUTSlt/thgt ltthgtUASlt/thgt
  lt/trgt
• lttrgtlttd align"center" width"20"gt1.lt/tdgt
• lttd align"left" valign"middle" width"80"
  height"40"gt06.100.001lt/tdgt
• lttd align"left" valign"middle" width"180"
  height"40"gtAmin A. Angkasalt/tdgt
• lttd align"center" valign"middle"gt70lt/tdgt lttd
  align"center" valign"middle"gt80lt/tdgt
• lt/trgt
• lttrgtlttd width"20"gt2.lt/tdgt
• lttd align"left" valign"middle" width"80"
  height"40"gt06.100.002lt/tdgt
• lttd align"left" valign"middle" width"180"
  height"40"gtBeni B. Bernardilt/tdgt
• lttd align"center" valign"middle"gt70lt/tdgt lttd
  align"center" valign"middle"gt80lt/tdgt
• lt/trgt
• lt/tablegt

13
FRAME

• Fungsi
• Menampilkan beberapa dokumen HTML secara
  sekaligus dalam satu jendela web browser.

14

• Standar penulisan
• ltframeset cols, rows,gt . . .
  lt/framesetgt
• Atribut-atribut

15
Frame Vertikal

• Contoh
• lthtmlgt
• ltheadgt
• lttitlegt
• Membuat Frame Vertikal
• lt/titlegt
• lt/headgt
• ltframeset cols"25,"gt
• ltframe name"kiri"
• src"kiri.html" scrolling"no"gt
• ltframe name"kanan
• src"kanan.html"gt
• lt/framesetgt
• lt/htmlgt

16
Frame Horisontal

• Contoh
• lthtmlgt
• ltheadgt
• lttitlegt
• Membuat Frame Horisontal lt/titlegt
• lt/headgt
• ltframeset rows"40,"gt
• ltframe name"atas" src"atas.html
• scrolling"no"gt
• ltframe name"bawah
• src"bawah.html"gt
• lt/framesetgt
• lt/htmlgt

17
Gabungan Frame Vertikal-Horisontal

• Contoh
• lthtmlgt
• ltheadgt
• lttitlegt
• Membuat Frame Vertikal-Horisontal lt/titlegt
• lt/headgt
• ltframeset rows"20,"gt
• ltframe name"atas" src"atas.html
• scrolling"no"gt
• ltframeset cols"40,"gt
• ltframe name"kiri"
• src"kiri.html"gt
• ltframe name"kanan"
• src"kanan.html"gt
• lt/framesetgt
• lt/framesetgt
• lt/htmlgt

18
(No Transcript)
19
LATIHAN TUGAS

• Dengan menggunakan tabel buatlah tampilan seperti
  dibawah ini

Web Site Sederhana Web Site Sederhana Web Site Sederhana Web Site Sederhana
Home Artikel Download About
Disisni kita bisa meletakkan menu Silahkan menuliskan artikel disini Silahkan menuliskan artikel disini Silahkan menuliskan artikel disini
Hak Cipta 2010 Hak Cipta 2010 Hak Cipta 2010 Hak Cipta 2010