Pemrograman Internet - HTML (2)

HTML (2)

OLEH:
ARIFIN
S1 Ilmu Komputer
Universitas Sumatera Utara '10

PREVIEW

Pada pertemuan 1 kita telah membahas.
1. Dokumen HTML tersusun atas tag-tag
2. 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

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

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

vyn 4

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

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 
Contoh:
<! ini adalah komentar, komentar tidak
muncul di dalam browser>

vyn 6

● 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

HTML TABEL – contoh 1

<table border="1">
  <tr>
    <td>baris 1, kolom 1</td>
  </tr>
  <tr>
  </tr>
  <tr>
  </tr>
</table>
   vyn 9

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.

vyn 10

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

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

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>

vyn 14

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

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>

vyn 16

HTML FORM (contoh)

Ketik contoh yang disediakan dalam file
PI-2 (5) (Form).html

vyn 17

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

HTML FORM – <input> (continue)

TYPE KETERANGAN

Text Digunakan untuk membuat kotak teks

Digunakan untuk membuat kotak teks, tetapi semua karakter
Password
akan ditampilkan dengan * atau tanda bundaran hitam.
Digunakan untuk membuat suatu daftar pilihan yang dapat
Checkbox
dipilih lebih dari satu
Digunakan untuk membuat suatu daftar pilihan yang hanya
Radio
dapat dipilih salah satunya saja.
Digunakan untuk membuat tombol yang berfungsi untuk
Submit
mengirimkan data form.
Digunakan untuk membuat tombol yang fungsinya untuk
Reset
menghapus seluruh isian form yang telah terisi.

vyn 19

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

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

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.

vyn 22

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

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.

vyn 25

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

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

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

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.

vyn 29

Pertemuan hari ini selesai.

Terima Kasih.

Untuk mendapatkan slide ini, kunjungi:
Vynprogram.blogspot.com

vyn 30

Pemrograman Internet - HTML (2)

More Related Content

What's hot

Viewers also liked

Similar to Pemrograman Internet - HTML (2)

Recently uploaded

Pemrograman Internet - HTML (2)