materi web statis

Pemograman Web

Kelompok 1

Nama Kelompok

• Komang Krisna Ade Marta

• I Made Adiguna

• Dewa Putu Agus Wiratama

Materi Presentasi

• Pengenalan HTML

• Tag HTML

• Tabel HTML

Web Statis

Web statis adalah 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.

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".

Tag HTML

• Tag terdiri 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.

Tag HTML

Contoh

<html>

<head>

<title>Titel Websiteku</title>

</head>

<body>

Ini adalah dokumen HTML pertamaku

</body>

</html>

Tampilan

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.

Tabel HTML

• CARA MEMBUAT 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.

Tabel HTML (membuat tabel)

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">

<tr>

<td>Cell 1 - Baris 1 Kolom 1</td>


</tr>

<tr>



</tr>

<tr>



</tr>

</table>

Tabel HTML (tampilan membuat tabel)

Tabel HTML (Mengatur jarak 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>



</tr>

</table>

Tabel HTML (Mengatur jarak kolom pada tabel)

Tabel HTML (Membuat titel 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.


<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>



</tr>

<tr>



</tr>

</table>

Membuat background pada tabel

• 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.


<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>



</tr>

<tr>



</tr>

</table>

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

materi web statis

Education