HTML (Lanjut) - PowerPoint PPT Presentation

About This Presentation
Title:

HTML (Lanjut)

Description:

HTML (Lanjut) TABEL Fungsi: Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur tampilan homepage agar lebih menarik Tag yang diperlukan ... – PowerPoint PPT presentation

Number of Views:72
Avg rating:3.0/5.0
Slides: 20
Provided by: Yas113
Category:
Tags: html | cipta | lanjut

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com