Tugas Kelompok 2 - Pemrograman Web
Download as PPTX, PDF6 likes523 views
Dokumen ini menjelaskan cara pembuatan tabel dalam HTML, termasuk struktur dasar seperti header, body, dan footer. Selain itu, dokumen juga memberikan contoh penggunaan berbagai tag untuk mendefinisikan elemen tabel serta teknik seperti border dan padding. Tabel digunakan sebagai media informasi yang terstruktur untuk membantu pemahaman data.
Tugas Kelompok 2 - Pemrograman Web
- 2. MATERI PEMBELAJARAN ANATOMI TABEL MINIMAL TABEL DENGAN SPANNING TABEL DENGAN BORDER TABEL DENGAN PADDING
- 3. 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.
- 4. 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> NEXT HASIL LISTING
- 5. … 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.
- 6. 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>
- 7. Hasilnya seperti di samping Perhitungan dan Hasil Perhitungan Hasil 1 + 1 2 3 * 5 15 NEXT CONTOH KEDUA DARI LISTING TABEL MINIMAL!! LET’S CHECK IT OUT BUNG!!
- 8. < ! 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.
- 9. 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 300 400 500 600 700 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 !!!
- 10. 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
- 11. 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 buah Lalat : rata-rata tinggi dan berat badan, dan presentase Dengan 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>
- 12. <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> H A S I L Pria Wanita Rata-rata Berat Tinggi 1 . 9 1 , 7 0 ,003 0 ,002 Mata Red 40% 43%
- 13. 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).
- 14. HASILNYA SEPERTI BERIKUT Ahmad Alex Joni Doni Jackson Dio 50 94 80 Ok next listing ke 3 dan ke 4, MAAF membosankan Bung!!!
- 15. 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>
- 16. HASIL LISTINGNYA Bulan Januari Februari Sum: Rp 200 Penghasilan Rp100 Rp100 LISTING TABEL DENGAN PADDING < ! DOCTYPE html> <html> <head> <style> Table, th, td { border-collapse : collapse ; border : 1px solid black ; } Th, td { Padding : 15px ;
- 17. } < / 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.
- 18. KELOMPOK 2 ANA DWI ASTUTI NUR ADILA PUSPITA ARSYAD ANGGUN DESY SRI S. MUH. ALI ADZAN FAJAR M.I.