Downloaded 25 times
Uploaded byI Made Adiguna
Materi Web Statis
Dokumen ini membahas tentang pemrograman web, khususnya pengenalan HTML dan pembuatan tabel HTML. Website statis tidak memungkinkan pengguna untuk mengubah konten secara langsung, dan HTML digunakan untuk menyusun dokumen web menggunakan tag-tag tertentu. Tabel dalam HTML dapat dibuat dengan elemen seperti <table>, <tr>, dan <td> untuk menyusun data dalam kolom dan baris.
More Related Content
Materi Web Statis
- 1.
- 2. Nama Kelompok • KomangKrisna Ade Marta • I Made Adiguna • Dewa Putu Agus Wiratama
- 3. Materi Presentasi • PengenalanHTML • Tag HTML • Tabel HTML
- 4. Web Statis Web statisadalah website yang mana penggunanya tidak bisa merubah kontent dari web tersebut secara langsung menggunakan browser. Dengan pengertian lain web statis adalah website yang kontennya tidak bisa dirubah oleh penggunanya secara langsung menggunakan browser. Dari pengertian di atas sudah jelas bahwa pengguna (client) tidak bisa merubah konten secara langsung dan interaksi antara pengguna (client) dan server hanyalah seputar pemrosesan link saja. • Ciri-cirinya : Hanya menggunakan HTML Tidak memiliki datasbase. Kontennya hanya diberikan oleh pemilik web. Jarang di-update.
- 5. Pengenalan HTML • HTML(Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode- kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video. • Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll. • HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
- 6. Tag HTML • Tagterdiri dari lambang-lambang khusus seperti: " <", " >" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka " <…>"dan diakhiri dengan tag penutup " </…>". Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML.
- 7.
- 8.
- 9.
- 10. Contoh <html> <head> <title>Titel Websiteku</title> </head> <body> Ini adalahdokumen HTML pertamaku </body> </html>
- 11.
- 12. Tabel HTML • Tabel(table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
- 13. Tabel HTML • CARAMEMBUAT TABEL Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
- 14. Tabel HTML (membuattabel) Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom. <table border="1"> <tr> <td>Cell 1 - Baris 1 Kolom 1</td> <td>Cell 2 - Baris 1 Kolom 2</td> </tr> <tr> <td>Cell 3 - Baris 2 Kolom 1</td> <td>Cell 4 - Baris 2 Kolom 2</td> </tr> <tr> <td>Cell 5 - Baris 3 Kolom 1</td> <td>Cell 6 - Baris 3 Kolom 2</td> </tr> </table>
- 15. Tabel HTML (tampilanmembuat tabel)
- 16. Tabel HTML (Mengaturjarak kolom pada tabel) Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell. <table border="1" width="75%" cellpadding="8"> <tr> <td style="width:50%;">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>
- 17. Tabel HTML (Mengaturjarak kolom pada tabel)
- 18. Tabel HTML (Membuattitel pada table) • Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom. • Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.
- 19. Tabel HTML (Membuattitel pada table) <table border="1" width="75%"> <caption>Disini adalah titel tabel ini</caption> <tr> <th style="width:50%;">Header Kolom 1</th> <th>Header Kolom 2</th> </tr> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>
- 20. Tabel HTML (Membuattitel pada table)
- 21. Membuat background padatabel • Untuk membuat background pada tabel kita gunakan atribut style dengan properti background. • Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.
- 22. Membuat background padatabel <table style="background:#ffc" width="75%" border="1"> <tr> <th style="background:red;width:50%;">Header Kolom 1</th> <th style="background:red;">Header Kolom 2</th> </tr> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>
- 23.
- 24. Referensi • http://top-ilmu.blogspot.com/2013/02/tag-tag-html-beserta- fungsinya.html • http://htmlcssguides.com/tabel-table-html •http://htmlcssguides.com/category/html-tutorial • http://htmlcssguides.com/belajar-html • http://bagibidang.blogspot.com/2014/03/pengertian-web-statis- dan-web-dinamis.html