Tugas Kelompok 2 - Pemrograman Web
-
Upload
smk-kartika-xx-1-makassar -
Category
Internet
-
view
171 -
download
4
Transcript of Tugas Kelompok 2 - Pemrograman Web
![Page 1: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/1.jpg)
![Page 2: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/2.jpg)
MATERI PEMBELAJARAN
ANATOMI TABEL MINIMAL
TABEL DENGAN SPANNING
TABEL DENGAN BORDER
TABEL DENGAN PADDING
![Page 3: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/3.jpg)
ANATOMI TABEL MINIMAL
Model tabel HTML memungkinkan pengguna untuk mengatur data seperti teks, teks terformat, gambar, link, bentuk, kolom formulir, tabel, dan sebagainya.
Pengelompokan beberapa bagian tabel:
Table Head, <THEAD> kepala tabel biasa disebut header.
Table Foot, <TFOOT> kaki tabel biasa disebut footer.
Table Body Sections, <TBODY elements> dan bagian body atau isi.
![Page 4: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/4.jpg)
Contoh tabel HTML yang menggunakan urutan dan struktur kepala, kaki dan
tubuh.
<! DOCTYPE html><html><body><TABLE><thread><t r> . . . Informasi header . . . < /t r>< / thead><TFOOT><TR> . . . Informasi Footer . . .< / t r>< /TFOOT><Tbody><tr> . . . Baris pertama blok data satu . . .< / t r><tr> . . . Baris kedua blok data satu . . .< / t r>< /Tbody><tr> . . . Baris pertama blok dua data . . .< / t r><tr> . . . Baris kedua blok dua data . . .< / t r><tr> . . . Baris ketiga blok dua data . . .</ t r>< /TABLE>< /body>< /html>
NEXTHASIL LISTING
![Page 5: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/5.jpg)
… Informasi header …… Informasi footer …… baris pertama blok data satu ……Baris kedua blok data satu ……. Baris pertama blok dua data …… Baris kedua blok dua data …… Baris ketiga blok dua kata …
APA ITU PEMBUATAN
TABEL??
Pembuatan tabel pada dasarnya merupakan media informasi yang harus tersusun secara sistematis. Oleh karena itu, pembuatan tabel pada halaman web juga diperlukan mengingat informasi yang dapat disampaikan dalam berbagai bentuk. Tabel memberikan kemudahan untuk memahami sebuah penjelasan dibandingkan narasi, karenanya halaman web harus memungkinkan untuk memasukkan tabel di dalamnya.
![Page 6: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/6.jpg)
CONTOH TABEL MINIMAL PADA
HALAMAN WEB!!!
< ! DOCTYPE html><html><body><table><caption>Perhitungan dan Hasil < / caption><tr><th>Perhitungan< / th><th>hasil< / th>< /tr><tr><td>1 + 1< / td><td>2< / td>< / tr><tr><td>3 * 5< / td><td>15< / td>< / tr>< /table>< /body>< /html>
![Page 7: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/7.jpg)
Hasilnya seperti di samping
Perhitungan danHasil
Perhitungan Hasil 1 + 1 2 3 * 5 15
NEXT CONTOH
KEDUA DARI LISTING TABEL
MINIMAL!!
LET’S CHECK IT OUT BUNG!!
![Page 8: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/8.jpg)
< ! DOCTYPE html><html><body><p>Tabel HTML dimulai dengan tag table . <br> Tabel baris mulai dengan tag tr . <br>Tabel data mulai dengan tag td .< / p.<hr><h3>kolom 1 : < /h3><table><tr><td>100< /td>< / tr>< / table><hr><h3>1 baris dan 3 kolom:< /h3><table><tr><td>100< /td><td>200< /td><td>300< /td>
< / tr>< / table><hr><h3>3 baris dan 3 kolom :< / h3><table><tr><td>100< / td><td>200< /td><td>300< /td>< / tr><tr><td>400< / td><td>500< /td><td>600< /td>< / tr><tr><td>700< / td><td>800< /td><td>900< /td>< / tr>< / table><hr>< /body>< /html.
![Page 9: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/9.jpg)
INI LOH HASIL LISTINGNYAA..
KAKAK>_<
Tabel HTML dimulai dengan tag table.Tabel baris mulai dengan tag tr.Tabel data mulai dengan tag td.
Kolom 1:
100
1 baris dan 3 kolom:
100 200 300
3 baris dan 3 kolom:
100 200 300400 500 600700 800 900
Setelah mengetahui cara membuat tabel sederhana, ada baiknya jika kita
lebih dahulu mengenal tag
HTML pada tabel agar lebih mudah
dalam penerapannya.
SELANJUTNYA AKAN
KUPERLIHATKAN TAG TABEL HTML !!!
![Page 10: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/10.jpg)
Tag Keterangan
<table> Mendefinisikan tabel<th> Mendefinisikan sel header tabel<tr> Mendefinisikan baris dalam tabel<caption> Mendefinisikan judul tabel<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam
sebuah tabel untuk memformat
<col> Menentukan sifat kolom untuk setiap kolom dalam elemen <colgroup>
<thead> Grub isi header dalam sebuah tabel <tbody> Grub isi tubuh dalam sebuah tabel<tfoot> Grub konten footer dalam sebuah tabel<td> Mendefinisikan sel dalam sebuah tabel
BERIKUT ADALAH TAG TABEL PADA HTML
![Page 11: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/11.jpg)
SETELAH KITA MENGETAHUI TAG TABEL HTML SEKARANG KITA AKAN MEMBUAT TABEL DENGAN SPANNING. BERIKUT ADALAH CONTOHNYA!!
< ! DOCTYPE html ><html><title>Tabel dengan Border 1< /title><body><TABLE booder = `1’Ringkasan = ‘Tabel ini memberikan beberapa statistik tentang buahLalat : rata-rata tinggi dan berat badan, dan presentaseDengan mata merah (untuk laki-laki dan perempuan0 . `><CAPTION><EM> Sebuah tabel percobaan dengan sel gabungan < /EM>< /CAPTION><TR><TH rowspan=` 2 ‘ > < /TH><TH colspan=` 2 ‘ > Rata-rata< /TH><Th rowspan=` 2 ‘ > mata red <BR>< /TH>< /TR><TR><TH> Berat Tinggi< /TH>< /TR>
![Page 12: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/12.jpg)
<TR><TH> Pria </TH><TD> 1 . 9 < /TD><TD> 0 , 003 < /TD><TD> 40 %< /TD>< /TR><TR><TH> Wanita < /TH><TD> 1 , 7 < /TD><TD> 0 , 002 < /TD><TD> 43%< /TD>< /TR>< /TABLE>< /body>< /html>
HASIL
PriaWanita
Rata-rataBerat Tinggi
1 . 9
1 , 7
0 ,003
0 ,002
Mata Red
40%
43%
![Page 13: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/13.jpg)
LISTING TABEL DENGAN BORDER < ! DOCTYPE>
<html><title>Tabel dengan Border 2< /tittle><body><table border=“ 1 “ style=“widht : 300px”><tr><td>Ahmad< /td><td>Doni< /td><td>50< /td>< /tr><tr><td>Alex< /td><td>Jackson< /td><td>94< /td>< /tr><tr><td>Joni< /td><td>Dio< /td><td>80< /td>< /tr>< table>< /body>< /html>
Untuk memperjelas pembatasan dalam tabel (border) tidak dapat dilakukan secara otomatis. Diperlukan memasukkan perintah khusus (border tabel).
![Page 14: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/14.jpg)
HASILNYA SEPERTI BERIKUT Ahmad
Alex
Joni
Doni
Jackson
Dio
50
94
80
Ok next listing ke 3 dan ke 4,
MAAF membosankan
Bung!!!
![Page 15: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/15.jpg)
LISTING TABEL DENGAN SPANNING
STYLE BORDER
< ! DOCTYPE html><html><head>< /head><body><table><tr><th><span style=‘border : 1px solid black; ` >Bulan< /span>< / th><th><span style=‘border : 1px solid black; ` >Penghasilan< /span>< /th>< / tr><tr><td><span style=‘border : 1px solid black; ’ >Januari< /span>< / td><td><span style=‘border : 1px solid black; ’ >Rp100< /span>< / td>< / tr><tr><td><span style=‘border : 1px solid black; ` >Februari< / span>< / td><td><span style=‘border : 1px solid black; ` >rp100< / span>< / td>< / tr><td calspan=‘ 2 ` ><span style=‘ border : 1px solid black; ` >Sum: Rp 200< / span>< / td>< / tr>< /table>< /body>< /html>
![Page 16: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/16.jpg)
HASIL LISTINGNYA Bulan
Januari
Februari
Sum: Rp 200
PenghasilanRp100
Rp100
LISTING TABEL
DENGAN PADDING
< ! DOCTYPE html><html><head><style>Table, th, td{border-collapse : collapse ;border : 1px solid black ;}Th, td{Padding : 15px ;
![Page 17: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/17.jpg)
}< / style>< / head><body><table style=“width : 300px”><tr><td>Ali< /td><td>Hasan< /td><td>50< /td>< /tr><tr><td>Lutfi< /td><td>Hermas< /td><td>94< /td.< /tr><tr><td>Andri< /td><<td>Riri< /td><td>80< /td>< /tr>< /table><p>coba ubah padding mejadi 5px. < /p>< /body>< /html>
BERIKUT HASILNYA
Ali
Lutfi
Andri
Hasan
Hermas
Riri
50
94
80
Coba ubah padding mejadi 5px.
![Page 18: Tugas Kelompok 2 - Pemrograman Web](https://reader036.fdocument.pub/reader036/viewer/2022081800/5872811d1a28abc7068b63b7/html5/thumbnails/18.jpg)
KELOMPOK 2ANA DWI ASTUTI
NUR ADILA PUSPITA ARSYAD
ANGGUN DESY SRI S.MUH. ALI ADZAN FAJAR
M.I.