Anda di halaman 1dari 34

Pengenalan Struktur Dokumen HTML II

Biasanya orang menggunakan gambar untuk


memperindah situsnya. HTML menyediakan
tag <IMG> untuk menampilakn gambar dalam
halaman web. Dari berbagai macam format
gambar yang ada. Hanya beberapa saja yang
digunakan dalam membuat halaman web.
Format gambar yang paling sering digunakan
adalah GIF dan JPEG/JPG.
GRAFIK
<html>
<head>
<title>Grafik dlam halaman web</title>
</head>
<body>
<p align="left">Ini Gambar saya</p>
<p align="left"><img src=”*.jpg" alt="ini gambar saya"></p>
</body>
</html>
GRAFIK
Beberapa attribut pada tag <IMG> yang
bisa digunakan dalam halaman web :
Attribut Fungsi

Border Memberikan kotak pada gambar

Height & Width Menentukan tinggi dan lebar gambar dalam ukuran pixel 

Menentukan jarak spasi horizontal dan vertikal antara


HSpace & VSpace
gambar sekitar

Align Mengatur posisi gambar terhadap objec sekitar 


GRAFIK
<html>
    <head>
       <title>Grafik dalam halaman web</title>
    </head>
    <body>
       <p align="left">Ini Gambar saya, vspace=20
         <br>
        <img src=”*.jpg" height="70" width="120" alt="ini gambar saya"
border="2" hspace="20" vspace="20">
        <br>Gambar Kamu, hspace=20
        <img src=”*.jpg" width="203" height="110" hspace="20">Ini
Gambar Kamu, hspace=20
           <br>
        </p>
    </body>
</html>
TABEL
Tabel banyak digunakan karena dapat menampilkan informasi
dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat
tabel digunakan tag awal <TABLE> dan tag penutup </TABLE>. tag
<TABLE> memiliki bebrapa bagian yang penting, yaitu :
 <CAPTION> . . . . . . </CAPTION> digunakkan untuk membentuk
judul tabel. Judul tabel ini akan terletak diluar tabel, bisa dibagian
atas atau dibagian luar tabel.
 <TH> . . . . . </TH> berfungsi untuk meletakkan judul tabel di bagian
paling atas atau bagian paling kiri dari suatu tabel. Tabel header
akan dicetak dengan huruf tebal.
 <TR> . . . . . . </TR> dipakai untuk membentuk baris dari suatu tabel
 <TD> . . . . . . </TD> dipakai untuk membentuk membentuk kolom
data pada tabel.
TABEL
<html>
    <head>
        <title>Grafik dlam halaman web</title>
    </head>
<body>
   
<table border="1">
        <tr>
            <td>baris 1, kolom 1</td>
            <td>baris 1, kolom 2</td>
        </tr>
        <tr>
            <td>baris 2, kolom 1</td>
            <td>baris 2, kolom 2</td>
        </tr>
    </table>
</body>
</html>
Perataan horizontal tabel menggunakan
atribut ALIGN. ALIGN dapat bernilai left
untuk perataan di kiri, center untuk perataan
ditengah dan right untuk perataan di kanan.
sedang untuk perataan vertikal menggunakan
atribut VALIGN. VALIGN dapat bernilai top
untuk perataan diatas,middle untuk perataan
ditengah dan bottom untuk perataan di bawah.
ALIGN dan WIDTH
<html>
    <head>
        <title>Tabel dalam web</title>
    </head>
    <body>
       <table border="1" width="100%" height="180">
         <tr>
          <td width="50%" height="53" valign="top">
      <font face="Arial" size="2">Ini untuk
VALIGN Bernilai TOP</font>
         </td>
         <td width="50%" height="53"
valign="bottom">
      <font face="Arial" size="2">Ini untuk
VALIGN Bernilai BOTTOM</font>
        </td>
        </tr>
ALIGN dan WIDTH
<tr>
           <td width="50%" height="53"
valign="middle">
  <font face="Arial" size="2">Ini untuk
VALIGN Bernilai MIDDLE</font>
           </td>
           <td width="50%" height="53"
align="center">
<font face="Arial" size="2">Ini untuk
ALIGN Bernilai CENTER</font>
           </td>
         </tr>
         <tr>
ALIGN dan WIDTH
<td width="50%" height="53"
align="right">
<font face="Arial" size="2">Ini untuk
VALIGN Bernilai RIGHT</font>
          </td>
         <td width="50%" height="53" align="left">
<font face="Arial" size="2">Ini untuk
VALIGN Bernilai LEFT</font>
          </td>
        </tr>
</table>
</body>
</html>
Attribut CELLSPACING digunakan untuk
menentukan jumlah spasi yang terdapat antara
dua buah cell. CELLPADDING mempunyai
fungsi untuk mengatur jumlah spasi yang
terdapat antara batas/border dengan isi atau
teks didalam sel tersebut.
CELLSPACING dan CELLPADDING
<html>
<head>
  <title>Tabel dalam web</title>
</head>
<body>
  <table border="1" width="100%" height="180"
cellspacing="5" cellpadding="5">
  
  <tr>
      <td width="50%" height="53" valign="top">
       <font face="Arial" size="2">Ini untuk
VALIGN Bernilai TOP</font>
     </td>
      <td width="50%" height="53" valign="bottom">
   <font face="Arial" size="2">Ini untuk VALIGN
Bernilai BOTTOM</font>
      </td>
    </tr>
CELLSPACING dan CELLPADDING
<tr>
      <td width="50%" height="53" valign="middle">
      <font face="Arial" size="2">Ini untuk VALIGN
Bernilai MIDDLE</font>
      </td>
      <td width="50%" height="53" align="center">
        <font face="Arial" size="2">Ini untuk ALIGN
Bernila CENTER</font>
      </td>
     </tr>
CELLSPACING dan CELLPADDING
     <tr>
       <td width="50%" height="53" align="right">
  <font face="Arial" size="2">Ini untuk VALIGN
Bernilai RIGHT</font>
       </td>
       <td width="50%" height="53" align="left">
       <font face="Arial" size="2">Ini untuk VALIGN
Bernilai TOP</font>
       </td>
      </tr>
</table>
</body>
</html>
Attribut COLSPAN digunakan untuk
menggabungkan dua buah kolom atau lebih
menjadi satu kolom. ROWSPAN mempunyai
fungsi untuk menggabungkan Beberapa baris
menjadi satu baris.
COLSPAN dan ROWSPAN
<html>
<head>
  <title>Tabel dalam web</title>
</head>
<body>
  <table border="1" width="73%" height="180"
cellspacing="5" cellpadding="5">
   <tr>
    <td width="50%" height="106" valign="top"
rowspan="2">
    <font face="Arial" size="2">Ini untuk VALIGN
Bernilai MIDDLE</font>
  </td>
   <td width="50%" height="53" valign="bottom">
    <font face="Arial" size="2">Iniuntuk VALIGN
Bernilai BOTTOM</font>
   </td>
  </tr>
COLSPAN dan ROWSPAN
  <tr>
   <td width="50%" height="53" align="center">
   <p align="center">
<font face="Arial" size="2">Ini untuk ALIGN
BernilaiCENTER</font>
   </td>
  </tr>
  <tr>
   <td width="100%" height="53" align="center"
colspan="2" valign="middle">
    <p align="center">
<font face="Arial" size="2">Ini untuk ALIGN
Bernilai Center</font>
   </td>
</tr>
</table>
    </body>
</html>
Agar membuat Tabel menjadi lebih menarik
selain dperluka latar belakang juga warna
memberikan peranan penting dalam
pembuatan tabel Untuk latar belakang di
gunakan atribut BGCOLOR dan untuk
memberi warna pada border gunakan attribut
BORDERCOLOR
WARNA pada TABEL
<html>
<head>
   <title>Tabel dalam web</title>
</head>
<body>
  <table border="1" width="73%" height="180"
cellspacing="5" cellpadding="5">
   <tr>
    <td width="50%" height="106" valign="top"
rowspan="2" bgcolor="#008000"
bordercolor="#000080">
  <p align="center">
<font face="Arial" size="2">Ini untuk VALIGN
Bernilai MIDDLE</font>
    </td>
    <td width="50%" height="53" valign="bottom"
bgcolor="#FF0000" bordercolor="#000080">
       <font face="Arial" size="2">Ini untuk VALIGN
Bernilai BOTTOM</font>
    </td>
   </tr>
WARNA pada TABEL
   <tr>
   <td width="50%" height="53" align="center"
bgcolor="#008080" bordercolor="#0000FF">
     <p align="center">
<font face="Arial" size="2">Ini untuk ALIGN
Bernilai CENTER</font>
    </td>
   </tr>
   <tr>
    <td width="100%" height="53" align="center"
colspan="2" valign="middle"
bgcolor="#008000"  bordercolor="#000080">
     <p align="center">
<font face="Arial" size="2">Ini untuk ALIGN
Bernilai Center</font>
    </td>
   </tr>
</table>
</body>
</html>
Anda tentu sering menjumpai situs yang menyediakan Buku
Tamu bagi pengunjungnya. Formulir tersebut dibuat dengan
menggunakan elemen form dan input. Standart penulisan adalah
sebagai berikut :

<FORM METHOD="POST | GET" ACTION="URL">


    . . . . . 
    . . . . . 
</FORM>

 Attriibut METHOD memiliki dua nilai POST dan GET. Metode


GET mengirimkan data pada server dengan meletakkan data
pada bagian akhir URL (Uniform Resource Locator) yang
ditunjuk. Metode Post mengirimkan datanya secara terpisah. Jika
data masukan banyak lebih disarakan menggunakan metode
POST. Attribut ACTION berisi URL dari program yang dipanggil
oleh form tersebut.
Text Box merupakan salah satu jenis kontrol masukan
data. HTML menyediakan tag <INPUT> juga
ditambahkan attribut TYPE="text" untuk membuat
kotak input. Jika TYPE bernilai text maka masukan
hanya satu baris data.  
Selain attribut TYPE, pada tag <INPUT> juga bisa
ditambahkan attribut NAME untuk memberi nama
pada input tersebut, attribut VALUE untuk memberi
nilai suatu input, dan attribut SIZE untuk menentukan
batas terpanjang sebuah masukan. Nilai VALUE juga
menjadi efec yang tampak pada browser.
Anda bisa menyembunyikan masukan yang ditulis
oleh user dengan meberi nilai TYPE="password".
Masukan akan menjadi karakter "*"
<html>
<head>
  <title>Form Untuk Input</title>
</head>
<body>
  <p><b><font size="4" face="Arial">Rancangan Buku
Tamu</font></b></p>
   
<table border="0" height="30" width="460">
   <tr>
     <td width="145" height="26"><b>Nama </b></td>
     <td width="14" height="26">
<p align="center"><b>:</b></td>
     <td width="281" height="26">
<p align="left"><b>
<input type="text" name="Nama"
size="38"></b></p>
</td>
    </tr>
TEXTBOX
<tr>
    <td width="145" height="26"><b>Alamat</b></td>
    <td width="14" height="26">
<p align="center"><b>:</b></td>
    <td width="281" height="26"><b>
<input type="text" name="Alamat"
size="38"></b></td>
    </tr>
    <tr>
    <td width="145" height="26"><b>Sekolah</b></td>
    <td width="14" height="26">
<p align="center"><b>:</b></td>
    <td width="281" height="26"><b>
<input type="text" name="Sekolah"
size="38"></b></td>
    </tr>
  </table>
</body>
</html>
Selain attribut TYPE bernilai text dan password
anda juga bisa memberi attribut TYPE dengan
checkbox yang digunakan oleh user untuk
membuat suatu pilihan. Dengan menggunakan
checkbox user bisa memilih lebih dari satu
pilihan.
CHECKBOX
<html>
<head>
    <title>Form Untuk Input</title>
  </head>
  <body>
    <p><br>Pilih yang Anda suka</p>
    <p>Data Jurusan
    <p><input type="checkbox" name="C1" Checked>Teknik Informatika</p>
   <p><input type="checkbox" name="C2"> Sistem
Informasi</p>
   <p><input type="checkbox" name="C3"> Komputer
Akuntansi</p>
   <p><input type="checkbox" name="C4"> Menejemen
Informatika</p>
</body>
</html>
Jika attribut TYPE="checkbox" diganti dengan
TYPE="radio", maka user harus memilih slah
satu pilihan yang ditawarkan. User tidak bisa
memilih pilihan kurang dari satu pilihan.
Attribut CHECKED memberitanda bahwa
pilihan tersebut yang sedang diaktifkan.
RADIO
<html>
<head>
    <title>Form Untuk Input</title>
  </head>
  <body>
    <p><br>Pilih salah satu</p>
    <p>Usia Anda
    <p><input type="radio" value ="V1" checked
name="R1" Checked> < 15 Tahun</p>
    <p><input type="radio" value ="V2" name="R1">
15 - 19 Tahun</p>
    <p><input type="radio" value ="V3" name="R1">
19 - 35 Tahun</p>
    <p><input type="radio" value ="V4" name="R1"> >
35 Tahun</p>
    </body>
</html>
Setiap form harus memiliki minimal tombol
Submit dan tombol Reset. Lebih baik lagi jika
digunakan bersama-sama. Kedua tombol yang
dimaksud dapat digunakan dengan attribut
TYPE="submit" dan TYPE="reset". Tombol
submit digunakan oleh user setelah mengisi
seluruh formulir dan ingin mengirikannya ke
server sedangkan tombol Reset digunakan saat
user ingin mengubah atas apa yang telah diisi
pada formulir tersebut.
SUBMIT dan RESET
<html>
<head>
    <title>Contoh Buku Tamu</title>
  </head>
  <body>
    <p><b><font size="4" face="Arial">Rancangan
Buku Tamu</font></b></p>
    <p><br></p>
    <form method="POST" action=“contoh11.html">
    <table border="0" width="100%">
     <tr>
       <td width="17%">&nbsp;Nama</td>
       <td width="3%" align="center">:</td>
       <td width="80%"><input type="text" name="T1"
size="38"></td>
     </tr>
SUBMIT dan RESET
<tr>
       <td width="17%">Alamat</td>
       <td width="3%" align="center">:</td>
       <td width="80%"><input type="text" name="T2"
size="38"></td>
     </tr>
     <tr>
       <td width="17%">E-Mail</td>
       <td width="3%" align="center">:</td>
       <td width="80%"><input type="text" name="T3"
size="38"></td>
       </tr>
      </table>
SUBMIT dan RESET
<p>Opini Anda Tetang Homepageku :<br>
      <input type="radio" value="V1" checked
name="R1">Bagus Sekali<br>
      <input type="radio" name="R1"
value="V2">Bagus<br>
      <input type="radio" name="R1"
value="V3">Biasa Saja<br>
      <br>
      <br>
      <input type="submit" value="Kirim"
name="B1"><input type="reset" value="Batal"
name="B2"></p>
    </form>    
  </body>
</html>
SUBMIT dan RESET
<html>
<head>
    <title>Ucapan Terima kasih</title>
  </head>
  <body>
    <br>Terima Kasih atas kunjungan Anda
    <br> Semoga pelayanan kami cukup memuaskan
untuk anda !!!
    </body>
</html>