pemrograman internet - html (2)
DESCRIPTION
Membahas HTML (2) lanjutan yang sebelumnya.TRANSCRIPT
![Page 1: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/1.jpg)
HTML (2)
OLEH:ARIFINS1 Ilmu KomputerUniversitas Sumatera Utara '10
![Page 2: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/2.jpg)
vyn 2
PREVIEW
Pada pertemuan 1 kita telah membahas.1. Dokumen HTML tersusun atas tag-tag2. Beberapa tag yang telah dipelajari: - Head: <head>
Sebagai informasi general sebuah halaman web - Body: <body>
Tempat meletakkan isi utama halaman web - Heading: <h1> <h2> ... <h6>
Membuat tulisan heading - Paragraph: <p>
Memulai paragraf baru - Link: <a href="http://iklcusu.blogspot.com"> klik saya </a>
membuat link menuju halaman lain
![Page 3: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/3.jpg)
vyn 3
PREVIEW (continue)
- Images: <img src="gambar/gambarku.jpg" />
menampilkan gambar di halaman website
- List:
- Ordered List <ol> <li> 1. isinya </li> </ol>
menampilkan daftar terurut
- Unordered List <ul> <li> - isinya </li> </ul>
menampilkan daftar tak terurut
![Page 4: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/4.jpg)
vyn 4
PREVIEW (continue)
3. HTML elemen adalah tulisan yang berisi diantara tag pembuka dan tag penutup
<p> saya elemen </p>
4. atribut adalah informasi tambahan bagaimana sebuah elemen akan ditampilkan, selalu berada di tag pembuka.
<img src=”gambarku.jpg” width=”100” length=”100” />
![Page 5: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/5.jpg)
vyn 5
PREVIEW (continue)
Tambahan:
tag <pre> digunakan untuk menampilkan tulisan pada web browser sebagaimana kita menulisnya di script.
Contoh:
<pre>
hai.. namaku jojon..
kumisku petak
laguku iwak peyek
by: jojon</pre>
![Page 6: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/6.jpg)
vyn 6
PREVIEW (continue)
Tambahan:Komentar berfungsi sebagai penjelasan dari skrip yang akan membantu programmer memahami skrip yang telah dia/ orang lain tulis.Komentar ditulis di antara tanda <!-- dan -->Contoh:<! ini adalah komentar, komentar tidak muncul di dalam browser>
![Page 7: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/7.jpg)
vyn 7
HTML Tabel
![Page 8: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/8.jpg)
vyn 8
● Tag <table> digunakan untuk membuat tabel di dalam dokumen HTML.
● Sebuah tabel terdiri atas baris dan kolom● Tag <tr> mendefinisikan sebuah baris di dalam
tabel● Tag <td> mendefinisikan sebuah sel dalam
tabel.● Tag <caption> mendefinisikan judul tabel
![Page 9: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/9.jpg)
vyn 9
HTML TABEL – contoh 1
<table border="1"> <tr> <td>baris 1, kolom 1</td> </tr> <tr> <td>baris 2, kolom 1</td> <td>baris 2, kolom 2</td> </tr> <tr> <td>baris 3, kolom 1</td> <td>baris 3, kolom 2</td> <td>baris 3, kolom 3</td> </tr></table>
![Page 10: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/10.jpg)
vyn 10
HTML TABEL – Merge Sel
Dalam mendesain tabel, salah satu hal penting yang perlu diketahui yaitu untuk melakukan merger (penggabungan) antar baris atau kolom di dalam tabel.
Tag <td> memiliki atribut:- colspan untuk merger kolom, dan- rowspan untuk merger baris.
![Page 11: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/11.jpg)
vyn 11
HTML TABEL – contoh 2 (colspan)
<table border="1"> <caption>Contoh Colspan</caption> <tr> <td colspan="2" align="center">Program Studi</td> </tr> <tr> <td>Ilmu Komputer</td> <td>Teknik Informatika</td></table>
![Page 12: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/12.jpg)
vyn 12
HTML TABEL – contoh 3 (rowspan)
<table border="1"> <caption>Contoh Colspan</caption> <tr> <td rowspan="2" align="center">Jadwal Lab</td> <td align="center">08.00 09.39</td> <td align="center">09.00 11.19</td> <tr> <td>Pemrograman Internet</td> <td>Algoritma Pemrograman</td></table>
![Page 13: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/13.jpg)
vyn 13
HTML FORM
![Page 14: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/14.jpg)
vyn 14
Salah satu bagian terpenting yang biasanya selalu ada dalam sebuah halaman HTML adalah Form.
Form biasanya digunakan untuk melakukan sebuah transaksi data dengan database.
Penanganan data form biasanya dilakukan dengan bahasa pemrograman server-side (PHP atau ASP)
Untuk menampilkan form, gunakan tag <form>
![Page 15: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/15.jpg)
vyn 15
HTML FORM (continue)
Form memiliki dua atribut yaitu:
- methodDigunakan untuk menentukan bagaimana data dikirim ke server.
GET – Data akan dikirim dengan menggunakan query string pada URLPOST – data akan dikirim ke serer sebagai block data.
- actionMenentukan lokasi dari skrip yang akan memproses data dari form.
![Page 16: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/16.jpg)
vyn 16
HTML FORM (continue)
Sebuah form tentunya memiliki elemen kontrol yang digunakan sebagai tempat user meng-inputkan data. Semua elemen kontrol tersebut diletakkan di dalam tag <form> … </form>
![Page 17: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/17.jpg)
vyn 17
HTML FORM (contoh)
Ketik contoh yang disediakan dalam file PI-2 (5) (Form).html
![Page 18: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/18.jpg)
vyn 18
HTML FORM – <input>
Tag <input>Digunakan untuk meminta informasi dari user. Ada
beberapa atribut yang dimiliki oleh tag <input>, beberapa diantarany yaitu:
Name : Mendefinisikan nama dari objek input, atribut ini harus ditulis dan nantinya akan digunakan saat data yang dikirim akan dioah
Type : menentukan tipe input yang dibuat
Value : pada input teks menentukan teks awal yang tertulis. Pada checkbox atau radio menentukan nilai item awal yang dipilih. Pada submit atau reset menentukan teks yang tertulis pada tombol.
![Page 19: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/19.jpg)
vyn 19
HTML FORM – <input> (continue)
TYPE KETERANGAN
Text Digunakan untuk membuat kotak teks
PasswordDigunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan * atau tanda bundaran hitam.
CheckboxDigunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu
RadioDigunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih salah satunya saja.
SubmitDigunakan untuk membuat tombol yang berfungsi untuk mengirimkan data form.
ResetDigunakan untuk membuat tombol yang fungsinya untuk menghapus seluruh isian form yang telah terisi.
![Page 20: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/20.jpg)
vyn 20
HTML FORM – <textarea>
Tag <textarea>Digunakan untuk membuat sebuah kotak teks multi
baris. Beberapa atributnya yaitu:
Name : Mendefinisikan nama dari objek input, atribut ini harus ditulis dan nantinya akan digunakan saat data yang dikirim akan dioah
Rows: menentukan jumlah baris textarea
Cols : menentukan lebar kotak textarea
Note: perlu diperhatikan bahwa tulisan yang ditulis sebagai teks awal akan tertulis seperti di dalam tag <pre>
![Page 21: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/21.jpg)
vyn 21
HTML FORM – <textarea> (contoh)
<form action="olahdata.php" method="post"> <textarea name="teks" cols="43" rows="7">Tulisan ini ada di dalam text area ukuran lebar: 43 ukuruan baris: 7 </textarea></form>
![Page 22: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/22.jpg)
vyn 22
HTML FORM – <select>
Tag <select> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut yaitu:
Name : Memberikan nama pada object.
Size : Mempengaruhi bagaimana elemen ini akan ditampilkan di browser. Jika tidak disertakan atau diberi nilai 1, maka pilihan akan ditampilkan sebagai dropdownl-list. Namun jika diberi nilai 2 atau lebih, maka pilihan akan ditampilkan dalam scroll-box.
Multiple : mengizinkan user untuk memilih lebih dari 1 item.
![Page 23: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/23.jpg)
vyn 23
HTML FORM – <select> (contoh)
<form action="olahdata.php" method="post"> <p>
<select name="pilih" = size="1"> <option>Ilmu Komputer</option> <option>Kedokteran</option> <option>Teknik Industri</option> <option>Teknik Sipil</option> </select>
</p> <p> </p> <p> <select name="pilih" = size="3"> <option>Ilmu Komputer</option> <option>Kedokteran</option> <option>Teknik Industri</option> <option>Teknik Sipil</option> </select> </p></form>
![Page 24: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/24.jpg)
vyn 24
HTML FRAME
![Page 25: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/25.jpg)
vyn 25
Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing-masing bagian terdiri dari dokumen HTML tersendiri.
Untuk membuat frame, tag yang digunakan adalah <frameset> dan <frame>.
Jika menggunakan <frameset>, maka <body> tidak digunakan lagi.
![Page 26: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/26.jpg)
vyn 26
HTML FRAME (contoh)
<html><head>
<title>HTML Frame</title></head><frameset rows="*,*,*">
<frame src="halaman1.html" name="frmsatu"></frame><frame src="halaman2.html" name="frmsatu"
scrolling="yes"></frame> </frameset></html>
Frame.html
![Page 27: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/27.jpg)
vyn 27
HTML FRAME (contoh) (continue)
<html><head>
<title>Halaman 1</title></head>
<body> <h3>Halaman 1</h3>
ini adalah halaman 1 </body>
</html>
halaman1.html
![Page 28: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/28.jpg)
vyn 28
HTML FRAME (contoh) (continue)
halaman2.html
<html><head>
<title>Halaman 2</title></head>
<body> <h3>Halaman 2</h3>
ini berasal dari halaman 2<p>
<img src="l.jpg" /></p>
</body></html>
![Page 29: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/29.jpg)
vyn 29
TUGAS!
Buatlah sebuah halaman HTML yang didalamnya mencakup penggunaan:1. Tabel.2. Form. (Gunakan input dari semua tipe, select dan teks area)
Buat sebuah halaman HTML lain yang didalamnya menggunakan frameset.
![Page 30: Pemrograman Internet - HTML (2)](https://reader034.vdocuments.site/reader034/viewer/2022042518/559dcd641a28ab54368b477f/html5/thumbnails/30.jpg)
vyn 30
Pertemuan hari ini selesai.
Terima Kasih.
Untuk mendapatkan slide ini, kunjungi:Vynprogram.blogspot.com