HTML
This presentation is the property of its rightful owner.
Sponsored Links
1 / 35

HTML PowerPoint PPT Presentation


  • 75 Views
  • Uploaded on
  • Presentation posted in: General

HTML. Elfan Nofiari Departemen Teknik Informatika ITB. Tentang HTML. HTML : format standar untuk membuat dokumen web Spesifikasi HTML standar (HTML 4.01 ) : http://www.w3.org/TR/html4

Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html

HTML

Elfan Nofiari

Departemen Teknik Informatika

ITB


Tentang html

Tentang HTML

  • HTML : format standar untuk membuat dokumen web

  • Spesifikasi HTML standar (HTML 4.01 ) : http://www.w3.org/TR/html4

  • HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus

  • File HTML berupa file teks (plain text file), bukan binary file, sehingga dapat dibuat menggunakan editor teks biasa


Skema dasar dokumen html

Skema Dasar Dokumen HTML

<HTML>

<HEAD>

<TITLE>Judul dokumen</TITLE>

</HEAD>

<BODY>

Isi dokumen

</BODY>

</HTML>

  • HTML: menandai awal dan akhir dokumen HTML

  • HEAD: menandai bagian header dokumen HTML

  • TITLE: memberi judul pada dokumen HTML

  • BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)


Contoh isi dokumen html

Contoh Isi Dokumen HTML

<html>

<head>

<title>Homepage saya</title>

</head>

<body>

<h1>Saya</h1>

<h2>Perkenalan</h2>

<p>Perkenalkan, nama saya ..... Ini adalah <i>homepage</i>

<b>pertama</b> saya, karena saya baru belajar tentang

cara membuat <b><i>homepage</i></b>.

</p>

</body>

</html> <!-- akhir dokumen HTML -->


Daftar tag

Daftar Tag

  • <html> Dokumen

  • <head> Header

  • <title> Judul dokumen

  • <body> Isi dokumen

  • <h1>…<h6>Judul paragraf

  • <p> Paragraf

  • <b>,<i>,<u>,<sup>,<sub>Atribut

  • <br> Ganti baris

  • <font>Font

  • <li>,<ol>,<ul>Enumerasi

  • <hr>Garis mendatar

  • <img>Gambar

  • <a>Link (kaitan/rujukan)

  • <table>Tabel

  • <!-- -->Komentar

  • <frame>,<frameset>,<iframe>Frame (bingkai)

  • <form>Formulir isian

  • <input>,<textarea>,<select>Komponen isian pada formulir

  • <map>Link berdasar area pada gambar

  • <span>,<div>Pengelompokan elemen dokumen


Tag judul heading

Tag Judul (Heading)

<hn>Judul paragraf</hn>

n = 1,2,3,4,5,6 (tingkat judul)

Untuk menuliskan judul suatu paragraf

Judul Tingkat 1

Judul Tingkat 2

Judul Tingkat 3

Judul Tingkat 4

Judul Tingkat 5

Judul Tingkat 6

<h1>Judul Tingkat 1</h1>

<h2>Judul Tingkat 2</h2>

<h3>Judul Tingkat 3</h3>

<h4>Judul Tingkat 4</h4>

<h5>Judul Tingkat 5</h5>

<h6>Judul Tingkat 6</h6>


Tag paragraf paragraph

Tag Paragraf (Paragraph)

<p>paragraf</p>

Untuk menandai suatu paragraf.

Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.

<p>

Ini adalah homepage pertama

saya, karena saya baru belajar

tentang cara membuat homepage.

</p>

<p>Homepage ini masih dalam tahap pengembangan, oleh karena itu

tampilannya masih terlalu sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p>

Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.

Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.

Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.


Tag atribut 1 bold italic underline

Tag Atribut 1 (Bold, Italic, Underline)

<b>Kalimat yang dicetak tebal</b>

<i>Kalimat yang dicetak miring</i>

<u>Kalimat yang digarisbawahi</u>

Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi.

<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p>

Kata dapat dicetak tebal,miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal


Tag atribut 2 superscript subscript

Tag Atribut 2 (Superscript, Subscript)

<sup>bagian yang dicetak tinggi</sup>

<sub>bagian yang dicetak rendah</sub>

Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.

<p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> = x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> + 2x<sub>1</sub>x<sub>2</sub></p>

<p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O

(x1 + x2)2 = x12 + x22 + 2x1x2

2H2 + O2 = 2 H2O


Tag ganti baris break line

Tag Ganti Baris (Break line)

<br>

Untuk pindah ke baris berikutnya.

Bentuk penulisan lain yang dianjurkan (XML style) :

<br />

Ganti baris

<p>Perkenalkan,<br />

nama saya ..... Ini adalah<br />homepage pertama saya,<br /> karena saya baru belajar tentang cara<br />

membuat homepage.</p>

<p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p>

Perkenalkan,

nama saya ..... Ini adalah

homepage pertama saya,

karena saya baru belajar tentang cara

membuat homepage.

Homepage ini masih dalam tahap pengembangan,

oleh karena itu tampilannya masih terlalu sederhana.

Paragraf

Paragraf


Tag font size

Tag Font(size)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

<font size="n"> kalimat </font>

<font size="m"> kalimat </font>

n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)

m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)

Ukuran

Ukuran

<font size="1">satu,</font>

<font size="2">dua,</font>

<font size="3">tiga,</font>

<font size="4">empat,</font>

<font size="5">lima,</font>

<font size="6">enam,</font>

<font size="7">tujuh</font>

Ukuran satu,dua, tiga, empat,lima,enam,tujuh


Tag font face

Tag Font(face)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

Jenis huruf

<font face="nama font"> kalimat </font>

nama font=Times New Roman, Arial,

Courier New, Verdana, dll.

<font face="Times New Roman">Homepage ini masih dalam tahap pengembangan</font><br />

<font face="Arial">Homepage ini masih dalam tahap pengembangan</font><br />

<font face="Courier New">Homepage ini masih dalam tahap pengembangan</font><br />

<font face="Verdana">Homepage ini masih dalam tahap pengembangan</font>

Homepage ini masih dalam tahap pengembangan

Homepage ini masih dalam tahap pengembangan

Homepage ini masih dalam tahap pengembangan

Homepage ini masih dalam tahap pengembangan


Tag font color

Tag Font(color)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

Warna

<font color="#RRGGBB"> kalimat </font>

RR= 00 .. FF (intensitas warna merah dalam heksadesimal)

GG= 00 .. FF (intensitas warna hijau dalam heksadesimal)

BB = 00 .. FF (intensitas warna biru dalam heksadesimal)

Red

Maroon

Lime

Green

Blue

Navy

Yellow

Fuschia

Aqua

<b><font color="#FF0000">Red</font><br />

<font color="#800000">Maroon</font><br />

<font color="#00FF00">Lime</font><br />

<font color="#008000">Green</font><br />

<font color="#0000FF">Blue</font><br />

<font color="#000080">Navy</font><br />

<font color="#FFFF00">Yellow</font><br />

<font color="#FF00FF">Fuchsia</font><br />

<font color="#00FFFF">Aqua</font></b>


Tag enumerasi list unordered list ordered list

Tag Enumerasi (List, Unordered List, Ordered List)

<li>item</li>

Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • (bullet)

Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat.

Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol>

  • Ada beberapa sektor potensial:

  •  Pariwisata

  •  Seni

  •  Budaya

  • Sektor tersebut merupakan …

  • Fasilitas penginapan di Indonesia:

  • 1. Losmen

  • Losmen merupakan tempat penginapan

  • yang berskala kecil

  • 2. Hotel

    • Hotel melati

    • Hotel berbintang

  • Perkembangan dalam ...

  • Ada beberapa sektor potensial:

    <li>Pariwisata</li>

    <li>Seni</li>

    <li>Budaya</li><br />

    Sektor tersebut merupakan ...

    <p>Fasilitas penginapan di Indonesia:

    <ol>

    <li>Losmen</li><br />

    Losmen merupakan tempat

    penginapan yang berskala kecil

    <li>Hotel</li>

    <ul>

    <li>Hotel melati</li>

    <li>Hotel berbintang</li>

    </ul>

    </ol>

    Perkembangan dalam ...


    Tag garis mendatar horizontal line

    Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.

    Homepage ini masih dalam tahap pengembangan,

    oleh karena itu tampilannya masih terlalu sederhana.

    Tag Garis Mendatar (Horizontal Line)

    <hr>

    membentuk garis pemisah mendatar.

    Bentuk penulisan lain yang dianjurkan (XML style) :

    <hr />

    Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.<hr />

    Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.


    Tag gambar image

    Perkenalkan, nama saya ... Ini adalah

    homepage pertama saya, karena saya

    baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya

    masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.

    Tag Gambar (Image)

    <img src="NamaFileGambar">

    NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.

    Untuk menampilkan sebuah file gambar.

    Bentuk penulisan lain yang dianjurkan (XML style) :

    <img src="NamaFileGambar" />

    <img src="cover.jpg" align="left" /> Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.

    Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu <img src="logo.gif" alt="Logo" /> sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.


    Tag tabel table data

    Tag Tabel (Table) - data

    <table>definisi tabel</table>

    Menampilkan data dalam bentuk tabel

    Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.

    Tag untuk penanda baris adalah <tr>definisi baris</tr>

    Tag untuk penanda kolom adalah <td>data</td>

    <table border="1">

    <tr>

    <td>aaa</td>

    <td>bbb</td>

    <td>ccc</td>

    </tr>

    <tr>

    <td>ddd</td><td>eee</td><td>fff</td>

    </tr>

    </table>


    Tag tabel table layout

    Tag Tabel (Table) - layout

    Untuk menata letak (layout) isi dokumen

    <table border="1" width="500">

    <tr>

    <td>Header kiri</td>

    <td align="center" width="50%">Header tengah</td>

    <td align="right">Header kanan</td>

    </tr>

    <tr>

    <td valign="top" rowspan="2">Menu kiri</td>

    <td align="center" colspan="2" height="200">Bagian Isi</td>

    </tr>

    <tr>

    <td align="center">Footer tengah</td>

    <td align="right">Footer kanan</td>

    </tr>

    </table>


    Desain layout halaman

    Desain/Layout Halaman


    Tag link anchor

    Tag Link (Anchor)

    <a href="Link">Kata yang di-click</a>

    <a name="#Acuan">Kata yang dituju</a>

    Link = Alamat URL atau nama file dan/atau acuan yang dituju

    Acuan = Kata sembarang sebagai penanda (bookmark)

    membentuk link ke URL/file/bagian dokumen lain.

    Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Saya ingin

    langsung menuju ke <a href="#akhir">bagian akhir</a>. Saya ingin menuju ke

    <a href="hal2.html#bawah">bagian bawah pada halaman selanjutnya</a>.<br />

    <a href="http://www.detik.com"><img src="gambar.gif" /></a> Homepage

    detik.com.<br />Ini bagian tengah.<br /><a name="#akhir">Ini bagian

    akhir.</a>

    hal1.html


    Struktur link

    Struktur Link


    Frame frameset

    frame & frameset

    • Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan

    • Setiap dokumen ditampilkan dalam sebuah frame

    • Sebuah frameset menentukan tata letak, ukuran, dan banyaknyaframe yang akan ditampilkan

    • Di dalam frameset boleh ada frameset lain (beranak)

    • Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. Dokumen tersebut tidak mempunyai isi dokumen (tidak ada <body> </body>)

    • Skema dasar dokumen frameset :

    <html>

    <head>

    <title>Judul dokumen</title>

    </head>

    <frameset>

    <frame src="namafile1">

    <frame src="namafile2">

    ...dst (atau frameset yang lain)

    <noframes>

    bagian ini ditampilkan jika browser tidak mendukung frame

    </noframes>

    </frameset>

    </html>


    Contoh dokumen frameset

    Contoh Dokumen Frameset

    <html>

    <head>

    <title>Document Frameset</title>

    </head>

    <frameset cols="33%,43%,23%" frameborder="1">

    <frameset rows="*,200">

    <frame src="page1.html" name="satu" scrolling="no" frameborder="0">

    <frame src="page2.html" name="dua" scrolling="yes" noresize>

    </frameset>

    <frame src="page3.html" name="tiga" frameborder="0">

    <frame src="page4.html" name="empat" frameborder="1">

    <noframes>

    Ada 4 halaman :

    <ol>

    <li><a href="page1.html">Halaman 1</a></li>

    <li><a href="page2.html">Halaman 2</a></li>

    <li><a href="page3.html">Halaman 3</a></li>

    <li><a href="page4.html">Halaman 4</a></li>

    </ol>

    </noframes>

    </frameset>

    </html>


    Iframe inline frame

    iframe (inline frame)

    • Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain (anak)

    • Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe

    • Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen

    • Skema dasar dokumen dengan iframe :

    <html>

    <head>

    <title>Judul dokumen</title>

    </head>

    <body>

    …isi dokumen…

    <iframe src="namafile">

    bagian ini ditampilkan jika browser tidak mendukung frame

    </iframe>

    …isi dokumen…

    </body>

    </html>


    Contoh inline frame

    Contoh inline frame

    <html>

    <head>

    <title>Kisah Sekolah</title>

    </head>

    <body>

    <h1>Kisah-kisah di sekolah</h1>

    Masa sekolah adalah masa yang menyenangkan bagiku. Sebagian besar waktu hidupku sampai

    saat ini dihabiskan untuk sekolah, dan aku sangat menikmati saat-saat itu. Inilah

    sebagian kisah-kisahku di sekolah.<p>

    <iframe width='200' height='179'

    src='sd.html'>

    <a href="sd.html">Kisah SD</a>

    </iframe>

    &nbsp;

    <iframe width='200' height='179'

    src='smp.html' frameborder='0'>

    <a href="smp.html">Kisah SMP</a>

    </iframe>

    &nbsp;

    <iframe width='200' height='179'

    src='smu.html' scrolling='no'>

    <a href="smu.html">Kisah SMU</a>

    </iframe>

    <p>Semua pengalaman dan teman-teman

    yang kudapat sungguh sangat mewarnai

    hidupku dan memberikan pengaruh besar

    terhadap diriku.

    </body>

    </html>


    Html

    form

    • Sebuah dokumen interaktif dapat menangani input dari user

    • Analoginya : bahwa dokumen adalah sebuah formulir isian

    • Sebuah dokumen dapat mengandung satu atau beberapa form

    • Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll)

    • Setiap form dapat menghimpun satu atau beberapa elemen input

    • Ada beberapa jenis elemen input untuk menangani berbagaikarakteristik data input

    • Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di-submit)

    • Skema dasar dokumen form :

      <form method="POST" action="namaprogram">

      bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian

      dengan susunan sejumlah elemen input berbagai jenis

      </form>

    • Contoh sebuah form sederhana untuk meminta nama user :

      <form method="POST" action="proses.php">

      <label for="nama">Ketikkan nama Anda:</label><br>

      <input type="text" name="nama" id="nama"><br>

      <input type="submit" value="Kirim">

      </form>


    Karakteristik data input

    Karakteristik data input

    • Teks satu baris (single-line text)

      <input type="text">

    • Teks banyak baris (multi-line text)

      <textarea></textarea>

    • Teks rahasia (password)

      <input type="password">

    • Pilihan tunggal (single selection)

      <input type="radio">, <select></select>

    • Pilihan majemuk (multiple selections)

      <select multiple></select>

    • Centang (on/off)

      <input type="checkbox">

    • Data bawaan/tersembunyi (hidden)

      <input type="hidden">

    • File

      <input type="file">

    • Koordinat 2D dalam sebuah bidang gambar

      <input type="image">

    • Aksi user melalui penekanan tombol

      <input type="submit">, <input type="reset">, <input type="button">, <button></button>


    Tag input

    Tag input

    • <input type="jenis" name="nama" id="id" value="nilai" disabled>

      type : text, password, radio, checkbox, image, submit, reset, button, hidden, file

      name : identifier untuk sisi server

      id : identifier untuk sisi browser

      value : nilai default

      disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)

    • <input type="[text|password]" name="nama" readonly size="m" maxlength="n">

      readonly : jika disebutkan maka elemen tidak bisa diubah nilainya

      size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS)

      maxlength : banyaknya karakter maksimal yang dapat dimasukkan user

    • <input type="[radio|checkbox]" name="nama" checked>

      checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih

    • <input type="image" src="gambar" name="nama" alt="alternatif">

      src : nama file gambar

      alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar


    Tag textarea select button

    Tag textarea, select, button

    • <textarea name="nama" rows="b" cols="k">nilai</textarea>

      nilai : nilai default

      rows : banyaknya baris yang ditampilkan (tinggi)

      cols : banyaknya kolom/karakter yang ditampilkan (lebar)

    • <select name="nama" multiple size="r"> <option value="nilai1" selected>teks1</option> <option value="nilai2">teks2</option> … </select>

      multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl)

      size : banyaknya baris pilihan yang ditampilkan (default=1)

      selected : jika disebutkan maka defaultnya dalam keadaan terpilih

    • <button type="jenis" name="name" value="nilai">tampilan</button>

      type : submit, reset, button

      tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol


    Contoh form 1

    Contoh form (1)

    <form method="POST" action="proses.php">

    Silahkan isi data Anda

    <input type="hidden" name="halaman" value="1">

    <table border="1">

    <tr>

    <td><label for="nama">Nama lengkap:</label></td>

    <td><input type="text" name="nama" id="nama" maxlength="40" size="20"></td>

    </tr>

    <tr>

    <td><label for="pass">Password:</label></td>

    <td><input type="password" name="pass" id="pass" maxlength="8" size="8"></td>

    </tr>

    <tr>

    <td><label for="jenkel">Jenis kelamin:</label></td>

    <td><input type="radio" name="jenkel" id="jenkel" value="L">Laki-laki<br>

    <input type="radio" name="jenkel" id="jenkel" value="P">Perempuan</td>

    </tr>

    <tr>

    <td><label for="alamat">Alamat:</label></td>

    <td><textarea rows="3" cols="30"

    name="alamat" id="alamat"></textarea></td>

    </tr>

    <tr>

    <td><label for="bayar">Sudah bayar?</label></td>

    <td><input type="checkbox"

    name="bayar" id="bayar">Sudah</td>

    </tr>

    </table>

    <input type="submit" value=" Kirim ">

    <input type="reset" value="Reset">

    </form>


    Contoh form 2

    Contoh form (2)

    <form method="POST" action="proses.php" enctype="multipart/form-data">

    <input type="hidden" name="halaman" value="2">

    <table border="1">

    <tr>

    <td><label for="kota">Kota:</label></td>

    <td><select name="kota" id="kota">

    <option value="">pilih kota...</option><option value="bdg">Bandung</option>

    <option value="jkt">Jakarta</option><option value="sby">Surabaya</option>

    </select></td></tr>

    <tr>

    <td><label for="kerja">Pekerjaan:</label></td>

    <td><select name="kerja" id="kerja" size="4">

    <option value="a">Mahasiswa</option><option value="b">Pegawai swasta</option>

    <option value="c">Pegawai negeri</option><option value="d">Wiraswasta</option>

    </select></td></tr>

    <tr>

    <td><label for="bahasa">Bahasa:</label><br>(bisa lebih dari satu)</td>

    <td><select name="bahasa" id="bahasa" size="4" multiple>

    <option value="id">Indonesia</option>

    <option value="en">Inggris</option>

    <option value="ch">Cina</option>

    <option value="fr">Prancis</option>

    </select></td></tr>

    <tr>

    <td>Hobi:<br>(bisa lebih dari satu)</td>

    <td><input type="checkbox" name="hobi" value="1">Berenang<br>

    <input type="checkbox" name="hobi" value="2">Nonton film<br>

    <input type="checkbox" name="hobi" value="3">Musik</td>

    </tr><tr>

    <td><label for="foto">Foto:</label></td>

    <td><input type="file" name="foto" id="foto" size="10"></td></tr>

    </table>

    <button type="submit">Kirim <img src="smiley.gif"></button>

    <button type="reset">Reset <img src="tanya.gif"></button>

    </form>


    Contoh form 3

    Contoh form (3)

    <form method="POST" action="proses.php">

    <table border="1">

    <tr>

    <td><label for="kode">Kode:</label></td>

    <td><input type="text" name="kode" id="kode" maxlength="3" size="3"></td>

    </tr>

    <tr>

    <td><label for="jenis">Jenis:</label></td>

    <td><select name="jenis" id="jenis" size="4">

    <option value="pat">Kapal patroli</option>

    <option value="per">Kapal perusak</option>

    <option value="pud">Pangkalan udara</option>

    <option value="mar">Markas</option>

    <option value="log">Logistik</option>

    </select></td>

    <tr>

    <td colspan="2">Tunjuk lokasi penempatan :<br>

    <input type="image" src="peta1.gif"></td>

    </tr>

    </table>

    </form>


    Link pada bidang gambar

    Link pada bidang gambar

    • Link dapat didefinisikan pada satu atau beberapa area pada sebuah bidang gambar

    • Skema :

      <img src="gambar" usemap="#peta">

      <map name="peta">

      <area shape="bentuk1" coords="koordinat1" href="url1" alt="teks1">

      <area shape="bentuk2" coords="koordinat2" href="url2" alt="teks2">

      ...

      </map>

      src : nama file gambar

      usemap : nama definisi peta yang digunakan

      shape : default, rect, circle, poly

      coords : koordinat, dengan format :

      default : x1,y1,x2,y2

      rect : x1,y1,x2,y2

      circle : x,y,r

      poly : x1,y1,x2,y2,x3,y3,…,xn,yn

      href : URL yang dituju bila area di-klik


    Contoh penggunaan map

    Klik pada wajah untuk melihat biodata

    Contoh penggunaan map

    Klik pada wajah untuk melihat biodata<br>

    <img src="aadc.jpg" usemap="#aadc" border="0">

    <map name="aadc">

    <area shape="circle" coords="131,82,37" href="titi.html" alt="Titi Kamal">

    <area shape="rect" coords="172,52,238,129" href="adinia.html" alt="Adinia">

    <area shape="poly"

    coords="300,85,311,103,308,137,306,172,295,198,219,259,224,239,210,224,213,161,248,127,273,86,273,86"

    href="dian.html" alt="Dian Sastro">

    <area shape="rect" coords="314,105,355,170" href="ladya" alt="Ladya Cheryl">

    <area shape="circle" coords="387,134,30" href="sissy.html" alt="Sissy Priscillia">

    <area shape="default" nohref>

    </map>


    Pengelompokan elemen dokumen

    Pengelompokan elemen dokumen

    • Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen

    • Pengelompokkan ada dua jenis :

      • inline (alur, flow) : <span> </span>

      • block (blok) : <div> </div>

    • <span> dan <div> biasanya digunakan dengan parameter id dan class

    • Struktur lojik ini dapat digunakan untuk :

      • mempermudah menginterpretasi isi dokumen

      • memberikan tampilansesuai struktur lojik dengan memanfaatkan CSS

    • Contoh :

    <div id="mhs01" class="mhs">

    <span class="nama">Adrian Marzuki</span><br>

    <span class="alamat">Jl. Tubagus Ismail XI/5</span>

    </div>

    <div id="mhs02" class="mhs">

    <span class="nama">Dewi Purnama</span><br>

    <span class="alamat">Jl. Cisitu Lama 24</span>

    </div>

    <style type="text/css">

    .mhs {border: black solid 1; margin-bottom: 10; padding: 10}

    .nama {font: bold 20 Arial}

    .alamat {font-style: italic}

    </style>

    <div id="mhs01" class="mhs">

    <span class="nama">Adrian Marzuki</span><br>

    ...


  • Login