0
HTML (2)           OLEH:           ARIFIN           S1 Ilmu Komputer           Universitas Sumatera Utara 10
PREVIEWPada pertemuan 1 kita telah membahas.1. Dokumen HTML tersusun atas tag-tag2. Beberapa tag yang telah dipelajari: - ...
PREVIEW (continue)- Images: <img src="gambar/gambarku.jpg" />          menampilkan gambar di halaman website- List:  - Ord...
PREVIEW (continue)3. HTML elemen adalah tulisan yang berisidiantara tag pembuka dan tag penutup<p> saya elemen </p>4. atri...
PREVIEW (continue)Tambahan:tag <pre> digunakan untuk menampilkan tulisan pada webbrowser sebagaimana kita menulisnya di sc...
PREVIEW (continue)Tambahan:Komentar berfungsi sebagai penjelasan dari skrip yangakan membantu programmer memahami skrip ya...
HTML Tabel    vyn      7
●   Tag <table> digunakan untuk membuat tabel di    dalam dokumen HTML.●   Sebuah tabel terdiri atas baris dan kolom●   Ta...
HTML TABEL – contoh 1<table border="1">  <tr>    <td>baris 1, kolom 1</td>  </tr>  <tr>    <td>baris 2, kolom 1</td>    <t...
HTML TABEL – Merge SelDalam mendesain tabel, salah satu hal penting yang perludiketahui yaitu untuk melakukan merger (peng...
HTML TABEL – contoh 2 (colspan)<table border="1">  <caption>Contoh Colspan</caption>  <tr>    <td colspan="2" align="cente...
HTML TABEL – contoh 3 (rowspan)<table border="1">  <caption>Contoh Colspan</caption>  <tr>    <td rowspan="2" align="cente...
HTML FORM    vyn     13
Salah satu bagian terpenting yang biasanya selalu adadalam sebuah halaman HTML adalah Form.Form biasanya digunakan untuk m...
HTML FORM (continue)Form memiliki dua atribut yaitu:- method   Digunakan untuk menentukan bagaimana data dikirim   ke serv...
HTML FORM (continue)Sebuah form tentunya memiliki elemen kontrolyang digunakan sebagai tempat user meng-inputkan data. Sem...
HTML FORM (contoh)Ketik contoh yang disediakan dalam filePI-2 (5) (Form).html                      vyn                 17
HTML FORM – <input>Tag <input>     Digunakan untuk meminta informasi dari user. Ada  beberapa atribut yang dimiliki oleh t...
HTML FORM – <input> (continue)TYPE       KETERANGANText       Digunakan untuk membuat kotak teks           Digunakan untuk...
HTML FORM – <textarea>Tag <textarea>     Digunakan untuk membuat sebuah kotak teks multi  baris. Beberapa atributnya yaitu...
HTML FORM – <textarea> (contoh)<form action="olahdata.php" method="post">  <textarea name="teks" cols="43" rows="7">Tulisa...
HTML FORM – <select>Tag <select> digunakan untuk membuat sebuah daftarpilihan. Tag ini memiliki beberapa atribut yaitu:Nam...
HTML FORM – <select> (contoh)<form action="olahdata.php" method="post">  <p>    <select name="pilih" = size="1">      <opt...
HTML FRAME    vyn      24
Frame digunakan untuk membagi jendela browsermenjadi beberapa bagian dan masing-masingbagian terdiri dari dokumen HTML ter...
HTML FRAME (contoh)Frame.html<html>   <head>       <title>HTML Frame</title>   </head>   <frameset rows="*,*,*">       <fr...
HTML FRAME (contoh) (continue)halaman1.html<html>   <head>       <title>Halaman 1</title>   </head>   <body>       <h3>Hal...
HTML FRAME (contoh) (continue)halaman2.html<html>   <head>       <title>Halaman 2</title>   </head>   <body>       <h3>Hal...
TUGAS!Buatlah sebuah halaman HTML yang didalamnyamencakup penggunaan:1. Tabel.2. Form. (Gunakan input dari semua tipe, sel...
Pertemuan hari ini selesai.            Terima Kasih.Untuk mendapatkan slide ini, kunjungi:     Vynprogram.blogspot.com    ...
Upcoming SlideShare
Loading in...5
×

Pemrograman Internet - HTML (2)

1,209

Published on

Membahas HTML (2) lanjutan yang sebelumnya.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,209
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Pemrograman Internet - HTML (2)"

  1. 1. HTML (2) OLEH: ARIFIN S1 Ilmu Komputer Universitas Sumatera Utara 10
  2. 2. PREVIEWPada 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 vyn 2
  3. 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 vyn 3
  4. 4. PREVIEW (continue)3. HTML elemen adalah tulisan yang berisidiantara tag pembuka dan tag penutup<p> saya elemen </p>4. atribut adalah informasi tambahanbagaimana sebuah elemen akan ditampilkan,selalu berada di tag pembuka.<img src=”gambarku.jpg” width=”100” length=”100” />   vyn 4
  5. 5. PREVIEW (continue)Tambahan:tag <pre> digunakan untuk menampilkan tulisan pada webbrowser sebagaimana kita menulisnya di script.Contoh:<pre> hai.. namaku jojon.. kumisku petaklaguku iwak peyek by: jojon</pre> vyn 5
  6. 6. PREVIEW (continue)Tambahan:Komentar berfungsi sebagai penjelasan dari skrip yangakan membantu programmer memahami skrip yang telahdia/ orang lain tulis.Komentar ditulis di antara tanda <!-- dan -->Contoh:<!­­ ini adalah komentar, komentar tidak muncul di dalam browser­­> vyn 6
  7. 7. HTML Tabel vyn 7
  8. 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 vyn 8
  9. 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>   vyn 9
  10. 10. HTML TABEL – Merge SelDalam mendesain tabel, salah satu hal penting yang perludiketahui 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. vyn 10
  11. 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> vyn 11
  12. 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> vyn 12
  13. 13. HTML FORM vyn 13
  14. 14. Salah satu bagian terpenting yang biasanya selalu adadalam sebuah halaman HTML adalah Form.Form biasanya digunakan untuk melakukan sebuahtransaksi data dengan database.Penanganan data form biasanya dilakukan denganbahasa pemrograman server-side (PHP atau ASP)Untuk menampilkan form, gunakan tag <form> vyn 14
  15. 15. HTML FORM (continue)Form memiliki dua atribut yaitu:- method Digunakan untuk menentukan bagaimana data dikirim ke server. GET – Data akan dikirim dengan menggunakan query string pada URL POST – data akan dikirim ke serer sebagai block data.- action Menentukan lokasi dari skrip yang akan memproses data dari form. vyn 15
  16. 16. HTML FORM (continue)Sebuah form tentunya memiliki elemen kontrolyang digunakan sebagai tempat user meng-inputkan data. Semua elemen kontrol tersebutdiletakkan di dalam tag <form> … </form> vyn 16
  17. 17. HTML FORM (contoh)Ketik contoh yang disediakan dalam filePI-2 (5) (Form).html vyn 17
  18. 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. vyn 18
  19. 19. HTML FORM – <input> (continue)TYPE KETERANGANText Digunakan untuk membuat kotak teks Digunakan untuk membuat kotak teks, tetapi semua karakterPassword akan ditampilkan dengan * atau tanda bundaran hitam. Digunakan untuk membuat suatu daftar pilihan yang dapatCheckbox dipilih lebih dari satu Digunakan untuk membuat suatu daftar pilihan yang hanyaRadio dapat dipilih salah satunya saja. Digunakan untuk membuat tombol yang berfungsi untukSubmit mengirimkan data form. Digunakan untuk membuat tombol yang fungsinya untukReset menghapus seluruh isian form yang telah terisi. vyn 19
  20. 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> vyn 20
  21. 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> vyn 21
  22. 22. HTML FORM – <select>Tag <select> digunakan untuk membuat sebuah daftarpilihan. 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. vyn 22
  23. 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>&nbsp</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> vyn 23
  24. 24. HTML FRAME vyn 24
  25. 25. Frame digunakan untuk membagi jendela browsermenjadi beberapa bagian dan masing-masingbagian terdiri dari dokumen HTML tersendiri.Untuk membuat frame, tag yang digunakanadalah <frameset> dan <frame>.Jika menggunakan <frameset>, maka <body>tidak digunakan lagi. vyn 25
  26. 26. HTML FRAME (contoh)Frame.html<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> vyn 26
  27. 27. HTML FRAME (contoh) (continue)halaman1.html<html> <head> <title>Halaman 1</title> </head>   <body>   <h3>Halaman 1</h3> ini adalah halaman 1  </body></html> vyn 27
  28. 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> vyn 28
  29. 29. TUGAS!Buatlah sebuah halaman HTML yang didalamnyamencakup penggunaan:1. Tabel.2. Form. (Gunakan input dari semua tipe, select dan teksarea)Buat sebuah halaman HTML lain yang didalamnyamenggunakan frameset. vyn 29
  30. 30. Pertemuan hari ini selesai. Terima Kasih.Untuk mendapatkan slide ini, kunjungi: Vynprogram.blogspot.com vyn 30
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×