HyperText Markup Language
Pendahuluan
Internet Explorer (ie), Netscape, Opera adalah beberapa contoh Web Browser yang sering
kita pake saat browsing di Internet. Berbagai dokumen yang akan ditampilkan oleh web
browser format dengan HyperText Markup Language (HTML). Nantinya kita akan
mengenal bahasa lain baik yang bekerja disisi klient maupun disisi server. Kedua jenis
bahasa ini juga sangat berkaitan erat dengan format HTML. Karena itu sebelum kita bisa
mengenal bahasa pemrograman web lebih lanjut, kita harus mengerti HTML terlebih
dahulu. Sangat penting untuk menguasai HTML walaupun ada banyak editor seperti
Dreamweaver, Ms. Front Page, Home Site dan berbagai aplikasi lain yang mempermudah
pembuatan document HTML. Document html di simpan dengan extension .html atau
.htm. Penyimpan dengan extension .html atau .htm adalah sama, penggunaan extension
.htm dikarenakan pada awalnya operating sistem hanya mendukung penyimpanan file
dengan maksimal extension adalah 3 karakter. Tetapi operating sistem sekarang sudah
mampu mendukung lebih dari 3 karakter.

Tujuan
1. Menguasai dasar-dasar pemrogram web dengan HTML
2. Mampu melakukan pengformatan document web dengan element table
3. Mengenal kegunaan setiap tags HTML
4. Mampu pengkombinasikan penggunaan frame
5. Mampu membuat document yang lebih interaktif
6. Memberikan tampilan yang lebih halus dan menarik

Dasar-dasar HTML
Document HTML hanya dapat dijalankan di web browser seperti Internet Explorer (ie),
Netscape, dan Opera. Web browser biasanya hanya disebut browser saja. Http
(HyperText Transfer Protocol) adalah protocol yang digunakan untuk mentransfer data
antara Web Browser(client) dengan Web Server(Server) yang diformat dengan format
HTML. Format HTML berupa tags-tags yang selalu berpasangan. contoh :
<html></html>, <html> adalah awal suatu tags dan akhir dari tags tersebut adalah
</html> dimana pada akhir suatu tags selalu ditambahin '/'.

Bentuk dasar / Struktur dasar HTML
Sebuah document web minimal memiliki bentuk dasar sepeti :
<html>
 <head>
  <title>Contoh dasar html</title>
 </head>
 <body color="#ffffff">
  Selamat, <br>
  disini adalah bagian yang akan tampil di document web.
 </body>
</html>

tags html tidak mengenal perbedaan huruf besar maupun huruf kecil. Penulisan <html>
atau <HTML> atau <HTml> akan dianggap sama.
semua informasi diantara tags<head></head> tidak akan ditampilkan. Semua informasi
hanya akan ditampilkan diantara tags<body></body>.


Beberap istilah dalam HTML

Tags : suatu kesatuan teks yang diawali dengan < dan diakhiri dengan >, dimana teks
tersebut diapit diantara < dan >,
  contoh : <html>, <head>, <body> dll.
Element : adalah teks yang berada diantara < dan >,
  contoh :
  tags <html>, elementnya adalah html
  tags <body>, elementnya adalah body

Attribute : suatu keyword yang merupakan bagian dari suatu element,
  contoh :
  <img src="logo.gif" width=20 height=20>
  dimana yang dimaksud dengan attribute adalah src, width, height.

Latihan Lab.
coba ketik program diatas dengan menggunakan notepad/wordpad kemudian simpan
dengan nama file latihan1.html pada direktori c:latihanhtml. Jalankan web browser
Anda, kemudian klik menu file > open kemudian cari file latihan1.html.

Tampilan di browser




Seperti yang saya jelaskan sebelumnya, setiap tags html selalu diikuti dengan penutup
tags, dari contoh diatas dapat kita lihat bahwa document diawali dengan tags <html> dan
kemudian diakhiri dengan tags </html> juga. Kemudian diantara tags <html> terdapat
tags lain seperti <head></head> dan <body></body>, sedangkan tags <title></title>
ada diantara tags <head>, disamping tags <title> masih ada tags lain seperti <meta>
yang berada diantara tags <head>, sedangkan sisanya adalah tags-tags yang akan
berada diantara tags <body>. Dari contoh diatas adalah tags <br>. Untuk tags-tags
tertentu ada pengecualian tidak memiliki tags penutup seperti tags <br>, <hr>, <img>
dan <p>. Semua text yang ada diantara tags <body></body> akan ditampilkan oleh
browser. Text/informasi yang tampil di document akan diformat dengan menggunaan
berbagai jenis tags html.


Tag-tag dasar
Warna Background dan teks
Untuk mememberi warna pada background html anda digunakan tag body dengan
attribute bgcolor. Dan untuk memberi warna teks digunakan attribute text.
Contoh:
<body bgcolor=”#ffff00” text=blue>

nilai atribute dapat berupa hexadecimal (“#ffff00”) atau warna dasar (red, green, blue,
yellow dsb)
Break(<br>)
Tag Break (<br>) digunakan untuk membuat baris baru dari suatu text. Tanpa <br>,
beberapa baris teks html akan dibaca oleh browser sebagai satu baris.
Contoh:
Html sintak                             hasil
Smart Media Solusindo                   Smart Media Solusindo Indonesia
Indonesia

Smart Media Solusindo <br> Indonesia   Smart Media Solusindo
                                       Indonesia



Preformatted Text(<pre>)
Browser akan mengabaikan spasi, baris baru, dan tabs dalam dokumen html. Agar spasi,
baris baru dan tabs tidak diabaikan digunakan preformatted text tag <pre>.

Horizontal rule(<hr>)
<hr> digunakan untuk membuat garis horizontal. Beberapa attribute yang penting
digunakan untuk mensetting garis tersebut adalah
<hr> attribute Keterangan
size           Menentukan tinggi atau ketebalan garis
width          Menentukan tebal garis
color          Menentukan warna garis
align          Menentukan alignment


Contoh:
<hr size=”10” width=”200” color =”red” align=”center”>

Heading tag
adalah tags yang digunakan untuk membuat heading (Judul atau subjudul) document
html.
                      Tags output

 <h1>Heading 1</h1>     Heading 1
 <h2>Heading 2</h2>     Heading 2
 <h3>Heading 3</h3>     Heading 3
 <h4>Heading 4</h4> Heading 4
 <h5>Heading 5</h5> Heading 5
 <h6>Heading 6</h6> Heading 6


Latihan Lab.
Ketik program dibawah ini kemudian simpan dengan nama latihan2.html
<html>
 <head><title>Latihan Tags Heading</title></head>

<body>
 <h2>Panca Sila</h2>
 <h3>1. KeTuhanan yang Maha Esa</h3>
 <h3>2. Kemanusiaan yang adil dan beradab</h3>
 ...
 <br>
 contoh penggunaan tags heading, berikut bentuk detail tags heading yang lain
<h1>Heading 1</h1>
<h2>Heading   2</h2>
 <h3>Heading   3</h3>
 <h4>Heading   4</h4>
 <h5>Heading   5</h5>
 <h6>Heading   6</h6>
</body>
</html>


Tampilan di browser




Tag Paragraph<p>
 Tag paragraf digunakan untuk membuat paragraf.
<p></p>
contoh:
  <P>Indonesian International Telecommunications, Media and Information Technology
Conference and Exhibition (IITELMIT) 2002 digelar di Jakarta Convention Center (JCC)
pada 7-10 Mei 2002.
</P>
<p>Pameran dan konferensi Teknologi Informasi-Telekomunikasi tahunan terbesar di
Indonesia ini dibuka secara resmi oleh Meneg Kominfo, Syamsul Mu’arif, Selasa
(7/5/2002) pukul 09.30 wib di Ruang Cendrawasih JCC.
</p>
Center (<center>)
Digunakan untuk membuat aligment center pada teks atau object yang lain (gambar,
table dsb).

Mengatur huruf (font)
Format font dasar
Beberapa format fornt dasar yaitu:
Format font dasar Contoh                    Hasil
Bold <b>           <b>rcec</b>              rcec
Italic<i>          <i>rcec</i>              rcec
Underline(<u>)     <u>rcec</u>              Rcec
Strong(<Strong>) <strong>Rcec</strong>      Rcec
Emphasis(<em>) <em>Rcec</em>                Rcec
Font tag<font>
Font tag digunakan untuk memberi setting font yang digunakan. Beberapa attribute yang
digunakan:
Font attribute Keterangan
Size           Mengatur ukuran font
Color          Mengatur warna font
Face           Menentukan jenis font




Contoh:
<font size=”+1” color=green face=”arial”>Rcec</font>

Superscript dan subscript
Untuk membuat superscript digunakan tag <sup> dan untuk membuat subscript
digunakan tag <sub>.
Contoh
                  2
x<sup>2</sup> x
H<sub>2</sub>O H20

Karakter khusus
Untuk membuat karakter khusus seperti @, ®, © digunakan sintak khusus yang dimulai
dengan &...;. beberapa karakter khusus dapat dilihat pada table berikut:

             < = &lt;    © = &copy;    " = &quot;   ¼ = &#188;
             > = &gt;    ® = &reg;       = &nbsp;   ½ = &#189;
             & = &amp;   ¢ = &#162;    ° = &deg;    ¾ = &#190;



Tag List
Ordered List(<ol>)
digunakan untuk membuat daftar bernomor (numbering) seperti berikut:
      • HTML
      • JavaScript
      • Photoshop
      • Dreamweaver

Sintak dasar:
<ol>
<li>HTML</li>
<li>JavaScript</li>
</ol>
<li>(list item) merupakan tag untuk menentukan item yang dimasukkan dalam list.
Beberapa attribute yang dimiliki oleh <ol> adalah:
<ol>            Keterangan
attribute
Type            Digunakan untuk menentukan jenis list-nya(huruf atau angka)

Start         Digunakan untuk menemntukan dari nomer berapa atau huruf ke berapa
              suatu list dimulai.
Unordered List(<ul>)
digunakan untuk membuat daftar seperti berikut:
                • HTML
                • JavaScript
                • Photoshop
                • Dreamweaver

Sintak dasar:
<ul>
<li>HTML</li>
<li>JavaScript</li>
</ul>
<ul> tidak mempunyai attribute start, tetapi tetap mempunyai attribute type yang
mempunyai nilai disc,circle atau square.
Nested List
nested list adalah menggabungkan beberapa ordered dan unordered list.
Definition List
digunakan untuk membuat suatu daftar index misalkan:

HTML
 Hyper Text Markup Langauge
XML
 eXtensible Markup Language

sintax dasar:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
</dl>

Linking

anchor tag<a>
anchor tag digunakan untuk linking ke dokumen lain.
Sintak umum:
<a href=”dokumen yang dituju”>Text</a>
link ke file lokal
<a href=”pertama.html”>pertama</a>
jika dokumen terdapat dalam folder tertentu:
<a href=”folder/pertama.html”>pertama</a>
link ke web site
<a href=”http://www.yahoo.com”>yahoo</a>
link ke email
<a href=”mailto:faizal@smartmediasolusindo.net”>contact me</a>
link dalam satu dokumen
<a name =”top” href=”pertama.html#bottom”>go to bottom</a>
...
<a name =”bottom” href=”pertama.html#top”>go to top</a>
Warna link
Warna link dapat ditentukan memalui tag body dengan attribute sebagai berikut:
Body Attribute Keterangan
link           Warna teks yang digunakan sebagai link, belum pernah dikunjungi

vlink             Visited link, warna teks link yang pernah dikunjungi
alink             Active link, warna teks link yang aktif
Marquee
 <marquee>
Tulisan berjalan
<marquee>
Text berjalan
</marquee>

Atribut                         Keteranagan                     Contoh
                                Membuat text berjalan           <marquee>Text berjalan
                                                                </marquee>
Align=top, middle, bottom       Menentukan perataan text        <marquee
                                disekitar marquee               align=top>text</marquee>
Behavior=scrool, slide,         Menentukan tampilan text        <marquee
alternate                       berjalan                        behavior=alternate>text bolak
                                                                balik</marquee>
Bgcolor=warna                   Menentukan lwarna               <marquee bgcolor=red>biground
                                latarbelakang marquee           merah</marquee>
Direction=left, right, up, down Menantukan arah                 <marquee direction=up> tulisan
                                berjalannya text                naik</marquee>
*masih beberapa atribut namun ini dulu.

Atribut-atribut marquee tersebut bisa juga digabung jadi satu
Contoh

<marquee direction="down" scrollamount="2" scrolldelay="0"
style="Filter:Alpha(Opacity=100, FinishOpacity=5, Style=1, StartX=0, StartY=45, FinishX=0,
FinishY=0);font-weight:bold;overflow:hidden;width:155px;height:250px;text-align:center;">

Taukah anda hasil tulisan gabungan dari marquee ini akan menghasil kan animasi yang
sangat menarik, hanya dengan sedikit script diatas akan membuat tampilan website Anda
menjadi lebih menawan. Gak percaya coba aja sendiri ☺
</marquee>


Bekerja dengan Grafis
Gambar background
Untuk memasukkan gambar background digunakan body tag dengan attribute
background.
Contoh:
<body background=”rcec.gif”>

Image tag<img>
Digunakan untuk memasukkan gambar ke dalam dokumen.
Sintak umum:
<img src=”nama file image”>
beberapa attribute yang digunakan dalam <img>.
<img>         Keterangan
attribute
Src           Menentukan letak (source) gambar yang akan ditampilkan pada dokumen
              HTML
Width         Lebar gambar
Height        Tinggi gambar
Alt           Menentukan teks yang akan ter-display jika mouse diletakkan di atas
              gambar (tooltip) atau teks yang terdispaly jika gambar tidak muncul
Border          Menentukan lebar border
Title         Tooltip
Hspace        Jarak horizontal
Vspace        Jarak vertikal


Link dengan image
Untuk membuat sutau link dengan Image, Anda dapat menggabungkan tag anchor
dengan image tag.
Contoh:
<a href=”test.html”><img src=”test.gif”></a>
Image Mapping
Image mapping digunakan untukmembuat link di mana dalam satu gambar kita
dalammembuat beberapa link.
contoh :
<img src="logo.jpg" width="510" height="399" usemap="#logoMap" border="0"
alt="mapping image">
<map name="logoMap">
 <area shape="rect" coords="55,57,204,185" href=url target="_blank">
 <area shape="circle" coords="287,137,55" href=url>
 <area shape="poly" coords="122,248,225,222,244,272,176,282" href=url>
</map>

Membuat table
Table sangat bermanfaat dalam penentuan layout atau tata design document web.
table diawali dengan tags <table> kemudian diantara tags <table> ada tags <tr></tr>
yang akan membentuk baris (row) kemudian diantara tags <tr> ada tags <td></td>
yang akan membentuk kolom (column).
Contoh bentuk dasar dari table :
<table>
  <tr>
  <td></td>
  <td></td>
  </tr>
</table>

Tag Table
<table> attribute   Keterangan                               Nilai

border              Menentukan tebal garis batas pinggir     px,%
align               Menentukan posisi table dalam dokument   left, center, right
width               Lebar table                              px,%
height              Tinggi table                             px,%
background          Menentukan gambar background             File gambar
bordercolor         Menentukan warna border                  Warna
bgcolor             Menentukan warna background              Warna
cellpadding         Jarak antara isi sel dengan border       px,%
cellspacing         Jarak antar sel                          px,%


Tag Table row (<tr>)
<table> attribute   Keterangan                    Nilai

align               Menentukan posisi isi sel     left, center, right
width               Lebar                         px,%
height              Tinggi                        px,%
bgcolor             Menentukan warna background   Warna
valign              Vertical alignment            Top,middle, bottom
Tag Table Data (<td>)

<table> attribute   Keterangan                             Nilai

align               Menentukan posisi isi dalam dokument   left, center, right
width               Lebar sel                              px,%
height              Tinggi sel                             px,%
background          Menentukan gambar background           File gambar
bordercolor         Menentukan warna border                Warna
bgcolor             Menentukan warna background            Warna
valign              Vertical alignment                     Top,middle, bottom
colspan             Span kolom                             Angka
rowspan             Span row




Latihan Lab.
<table border=1 cellpadding=2 cellspacing=5 width=200 height=300>
 <tr>
<td><b>Nama Barang</b></td> <td><b>Jumlah Barang</b></td>
 </tr>
 <tr>
  <td>Pentium III</td>      <td align=left>5 unit</td>
 </tr>
 <tr>
<td>Printer Cannon</td> <td align=left>15 unit</td>
 </tr>
 <tr>
<td>Scanner Umax</td> <td align=left>2 unit</td>
 </tr>
</table>

Tampilan Layar
latihan lab.
latihan menggunakan semua komponen form dengan layout yang rapi dengan
dukungan table.
<html>
<head>
<title>Registrasi form</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br>
<form name="form1" method="post" action="save.asp">
  <table width="500" border="1" cellspacing="0" cellpadding="0">
    <tr>
     <td colspan="2">
 <font face="Verdana, Arial" size="4"><b>Registration Form</b></font>
     </td>
    </tr>
    <tr>
     <td width="142">User ID</td>
     <td width="252"><input type="text" name="userid">* </td>
    </tr>
    <tr>
     <td width="142">Password</td>
     <td width="252"><input type="password" name="password">* </td>
    </tr>
    <tr>
     <td width="142">Confirm Password</td>
     <td width="252"><input type="password" name="password2">* </td>
    </tr>
    <tr>
     <td width="142">Name</td>
     <td width="252"><input type="text" name="name"></td>
    </tr>
    <tr>
     <td width="142">Address</td>
     <td width="252"><input type="text" name="address" size="40"></td>
    </tr>
    <tr>
     <td width="142">Gender</td>
     <td width="252">
 <input type="radio" name="gender" value="Male" checked>Male
        <input type="radio" name="gender" value="female">Female</td>
    </tr>
    <tr>
     <td width="142">Date of Birth</td>
     <td width="252">
      <select name="tgl">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
 ...
        <option value="29">29</option>
<option value="30">30</option>
        <option value="31">31</option>
       </select>
       <select name="bln">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">Maret</option>
    ...
        <option value="11">November</option>
        <option value="12">December</option>
       </select>
       <select name="thn">
        <option value="1970">1970</option>
        <option value="1971">1971</option>
        <option value="1972">1972</option>
        <option value="1973">1973</option>
        <option value="1974">1974</option>
       </select>
     </td>
   </tr>
   <tr>
     <td width="142">E-mail</td>
     <td width="252">
       <input type="text" name="email">
     </td>
   </tr>
   <tr>
     <td width="142">City</td>
     <td width="252">
       <input type="text" name="city">
     </td>
   </tr>
   <tr>
     <td width="142">Country</td>
     <td width="252">
       <select name="country">
        <option value="Indonesia">Indonesia</option>
        <option value="Malaysia">Malaysia</option>
        <option value="Singapore">Singapore</option>
        <option value="Thailand">Thailand</option>
       </select>
     </td>
   </tr>
   <tr>
     <td width="142">Interest</td>
     <td width="252">
       <input type="checkbox" name="checkbox" value="computer">Computer
       <input type="checkbox" name="checkbox2" value="software">Software
<br>
       <input type="checkbox" name="checkbox3" value="hardware">Hardware
       <input type="checkbox" name="checkbox4" value="hacker_info">Hacker
Info
    </td>
</tr>
  <tr>
    <td width="142">&nbsp;</td>
    <td width="252">
     <input type="submit" name="Submit" value="Proses">
     <input type="reset" name="batal" value="Batal">
    </td>
  </tr>
 </table>
</form>
</body>
</html>




                             Tampilan Layar
Membuat Formulir
Formulir (form) digunakan untuk mengisi suatu data (mis. data registrasi). Data ini akan
dikirim ke server yang nantinya dapat langsung diproses atau disimpan dalam database.
Untuk membuat formulir, didahului dengan form tag dan diikuti dengan tag jenis
formulirnya misalkan teksbox (teksfields) , drop down menu, radio button dsb yang
diletakkan di dalam form tag.
Tag Form
Tag form digunakan untuk memulai membuat formulir. Sintak umumnya adalah sebagai
berikut:

<form name=frm1 action=url method=get|post>

action diisi dengan url yang merupakan alamat atau file yang akan dituju dari
halaman/document ini setelah menekan/click tombol submit.
ada dua jenis method yaitu get dan post. Penggunaan method get akan menampilkan
semua attribute/parameter beserta nilai pada address bar web browser, sedangkan
penggunaan method post hanya menampilkan url document tersebut.
contoh get :
http://www.detik.com/berita.asp?berita=123123123&tgl=12042002
contoh post:
http://www.detik.com/berita.asp
name digunakan sebagai identitas form.jika suatu saat kita ingin mereferensi form
tersebut Anda dapat menggunakan nama tersebut.
Berikut adalah tag-tag yang diletakkan didalam form tag.
Tag Textbox
Digunakan untuk mengisi data berupa teks yang panjangnya satu baris.
Sintak umum:
 <input type=”text” name=”username”>

Tag Password
Digunakan untuk mengisi password.
 <input type=”password” name=”passwd”>




Tag Checkbox
Digunakan untuk mengisi data yang berupa multiple selection.
Contoh:
 <input type=”checkbox” name=”check” value=”computer” checked>Computer
 <input type=”checkbox” name=”check” value=”printer”>Printer
 <input type=”checkbox” name=”check” value=”harddisk”>HardDisk
 <input type=”checkbox” name=”check” value=”cdrom”>CD-Rom

hasilnya:



Tag Radio
Digunakan untuk membuat pilihan dengan yang bersifat single selection.
Contoh:
  <input type=radio name="jnsKelamin" value="lk">Laki-laki
  <input type=radio name="jnsKelamin" value="pr">Perempuan
tags radio memiliki nilai atribute name yang sama (dua-duanya                mempunyai
name="jnsKelamin") tetapi mempunya nilai value yang berbeda lk dan pr.
Hasilnya:
Tag Pilihan
Digunakan untuk membuat pilihan yang berupa drop down.
Contoh:
<select name="negara">
   <option value="none">none</option>
   <option value="indonesia">Indonesia</option>
   <option value="malaysia">Malaysia</option>
   <option value="singapore">Singapore</option>
   <option value="other">Other</option>
 </select>
hasil:



untuk membuat pilihan yang berupa list Anda dapat menggunakan attribute size pada tag
select.


Tag Textarea
Digunakan untuk mengisi data teks dengan lebih dari satu baris.
Contoh:
<textarea cols=”20” rows=”5” name=comment></textarea>
cols merupakan banyaknya kolom karakter
rows merupakan banyakknya baris teks.

Tag Hidden
Digunakan untuk mengisi data yang tidak ingin ditampilkan pada user.
 <input type=Hidden name=MemberId value="m001">

Tag Tombol
submit
Digunakan untuk mengirim data jika diklik.
Contoh:
<input type=submit name=btSubmit value="Send">
reset
digunakan untuk menghapus isi form.
Contoh:
<input type=reset name=btReset value="Bantal">
Button
Digunakan untuk menjalankan suatu fungsi Scripting.
<input type=button name=btBiasa value="Tombol Biasa">
Membuat Frame
Frame digunakan untuk menampilkan beberapa halaman html dalam satu halaman. Untuk
membuat suatu frame anda membutuhkan satu halaman frameset untuk mendefinisikan
framenya, dan minimal 2 halaman lain untuk mengisi framenya.




Berikut contoh penggunaan frameset dan frame.
Frameset
file name : frame.html
<html>
<head>
  <title>Using Frame</title>
</head>

<frameset cols="126,*" rows="*" frameborder="NO" border="0" framespacing="0">
 <frame name="leftFrame" src="kiri.html" scrolling="NO" noresize >
 <frame name="mainFrame" src="kanan.html">
</frameset>
<noframes>
 <body bgcolor="#FFFFFF" text="#000000">
This browser do not support frame.
 </body>
</noframes>
</html>
Rancangan Tampilan Layar frame.html




disini kita membagi document menjadi dua kolum(column) dimana kolum pertama
dengan lebar(width) 126px. * berarti akan menggunakan sisa ruang yang tersisa. selain
menggunakan pixel dan * juga dapat digunakan tanda persen(%) untuk menunjukkan
ukuran baik lebar maupun tinggi suatu frame.
cols menunjukkan ukuran dan jumlah column, rows menunjukkan ukuran dan jumlah
row(baris).

Sebelum anda membuat suatu frame, terlebih dahulu harus disiapkan file-file web page
yang dibutuhkan. Dari contoh diatas anda membutuhkan file kiri.html dan kanan.html
kemudian frame ini sendiri akan disimpan dengan nama file frame.html.
Tags dan text diantara tags <noframes></noframes> akan digunakan jika browser yang
digunakan tidak mendukung kemampuan Frame. Namun rata-rata browser sekarang
sudah mendukung penuh kemampuan frame.
Pemberian nama(name) pada frame sangat berguna pada saat mengkombinasikannya
dengan link(anchor),
contoh:
<a href="page2.html" target="mainFrame">Second Page</a>

dari contoh diatas, ada dua frame dimana pada frame kedua bernama "mainFrame",
pengunaan ini bermanfaat pada saat ingin mengubah isi pada frame "mainFrame" sesuai
dengan url yang tertera di href (href="page2.html").
syntaks anchor:
<a href=url target="_self|_parent|_blank|namaframe"></a>

frame target
_self : menuju kehalaman dimana link itu aktif
_parent : menuju ke halaman induk/parent dari frame kalau tidak ada frame berarti
halaman itu sendiri juga.
_blank : membuka window baru
namaframe : sesuai dengan nama frame (eg. leftFrame).




Document : Modul Dasar-dasar HTML.
Sumber   : Internet
Contoh Tampilan Web Sederhana




Source Script dan keterangan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<style type="text/css">
.kotak {
border-style:solid;
background-color:#d7e7ff;      Ini adalah CSS untuk memformat tampilan
border-color:#3483fa;
                               web, dari pada memakai table CSS bisa
border-top-width:2px;
                               dipakai berulang-ulang.
border-bottom-width:0px;
border-left-width:0px;         Diawali dengan
border-right-width:0px;
padding:0;                     <style type="text/css">
                               ……………….
height: 25px;                  </style>

font-family: "arial";
font-size:12px;

vertical-align: top;
text-align: center;
}
</style>
<TITLE> Mamad Web </TITLE>            Title Web
</HEAD>
<BODY>

<TABLE width="100%" height="102" cellpadding="0" cellspacing="0" bordercolor="#3483fa">
<TR>
<TD bgcolor="#3483fa" width="91" align="right">
<IMG SRC="openbsd.jpg" WIDTH="90" HEIGHT="100" BORDER=0 ALT="Open bsd logo">
</TD>
<TD bgcolor="#3483fa" align="center">
<h2>
<font color="#FFFFFF">            Tabel paling atas yang terdapat logo sama
Company Name                      Company Name
</font>
<h2>
</TD>
</TR>
</TABLE>

<TABLE width="100%" height="80%">
<TR>
<TD width="200" bgcolor="#d7e7ff" valign="top">
Menu

</TD>
<TD width="85%" valign="top">          Tabel tengah untuk menu dan isi web
Isi Web

</TD>
</TR>
</TABLE>

<div class="kotak">               Disini penggunaan CSS
Copy right mamad 2008             <div class="kotak"> =>”kotak” sesuai dg tiap nama CSS
</div>                            ………
                                  </div>
</BODY>
</HTML>




Nb file css dapat juga diletakan di luar tersendiri dan cara pemanggilanya adalah
   <link href="filecss.css" rel="stylesheet" type="text/css">
Source Script dan keterangan

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mamad Web</title>
<base target="contents">
</head>
<body >

<style type="text/css">
BODY {
        background : #FFFFFF;
        font-family : verdana;
        font-size : x-small;
        }
H1 {
        font-style : italic;
        font-size : 18px;
        }
H4 {
        font-size : 12px;
        }
A{
        color : #0000FF;
        }

A:HOVER {
     color : #9999FF;
     background : white;
     }
TABLE {

       }
TD {
        font-family : verdana;
        font-size : 12px;
        }
</style>

<TABLE border="0" cellpadding="0" cellspacing="0" height="60" width="901">
<TR>
<TD width="243" height="44">
  <Img src="gambare/nick.gif" align="left" border="0" width="228" height="40">&nbsp</TD>
<TD width="658" valign="top" align="center" height="80" valign="TOP">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version
=6,0,0,0"
 WIDTH="490"
HEIGHT="80"
id="1"
ALIGN="left" valign="top">
 <PARAM NAME=movie VALUE="gambare/top.swf"> Seluruh script iniuntuk menyisipkan
<PARAM NAME=loop VALUE=false>                            file flash(swf)
<PARAM NAME=quality VALUE=high>                          Disini letak filenya
<PARAM NAME=bgcolor VALUE=#FFFFFF>                       <PARAM NAME=movie
<EMBED src="gambare/top.swf"                             VALUE="gambare/top.swf">
loop=false quality=high bgcolor=#FFFFFF
WIDTH="490" HEIGHT="80"
NAME="1" ALIGN="left" valign="top"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
&nbsp;
<a class="chlnk" href                        Java script untuk membuat halaman web jadi default.
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.geocities
.com/nickqin2001');" style="CURSOR: hand">
<img src="gambare/home.gif">&nbsp;Jadikan Hompage</a>
&nbsp;&nbsp;&nbsp;&nbsp;
</TD></TR>
<TR>
<TD height="16" align ="left" colspan="2" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="100%" id="AutoNumber1" height="22">
    <tr>
      <td width="185" background="gambare/topbg.gif">&nbsp;</td>
      <td width="79%" background="gambare/topbg.gif">
      <p align="right"><a href="index.html">Home</a>&nbsp;|&nbsp;<a href="sitemap.html"
target="main">Site Map</a>&nbsp;|&nbsp;<a href="about.html"
target="main">About</a>&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
   </table>
   </TD></TR>
</TABLE>
</body>
</html>

Modul 2a html

  • 1.
    HyperText Markup Language Pendahuluan InternetExplorer (ie), Netscape, Opera adalah beberapa contoh Web Browser yang sering kita pake saat browsing di Internet. Berbagai dokumen yang akan ditampilkan oleh web browser format dengan HyperText Markup Language (HTML). Nantinya kita akan mengenal bahasa lain baik yang bekerja disisi klient maupun disisi server. Kedua jenis bahasa ini juga sangat berkaitan erat dengan format HTML. Karena itu sebelum kita bisa mengenal bahasa pemrograman web lebih lanjut, kita harus mengerti HTML terlebih dahulu. Sangat penting untuk menguasai HTML walaupun ada banyak editor seperti Dreamweaver, Ms. Front Page, Home Site dan berbagai aplikasi lain yang mempermudah pembuatan document HTML. Document html di simpan dengan extension .html atau .htm. Penyimpan dengan extension .html atau .htm adalah sama, penggunaan extension .htm dikarenakan pada awalnya operating sistem hanya mendukung penyimpanan file dengan maksimal extension adalah 3 karakter. Tetapi operating sistem sekarang sudah mampu mendukung lebih dari 3 karakter. Tujuan 1. Menguasai dasar-dasar pemrogram web dengan HTML 2. Mampu melakukan pengformatan document web dengan element table 3. Mengenal kegunaan setiap tags HTML 4. Mampu pengkombinasikan penggunaan frame 5. Mampu membuat document yang lebih interaktif 6. Memberikan tampilan yang lebih halus dan menarik Dasar-dasar HTML Document HTML hanya dapat dijalankan di web browser seperti Internet Explorer (ie), Netscape, dan Opera. Web browser biasanya hanya disebut browser saja. Http (HyperText Transfer Protocol) adalah protocol yang digunakan untuk mentransfer data antara Web Browser(client) dengan Web Server(Server) yang diformat dengan format HTML. Format HTML berupa tags-tags yang selalu berpasangan. contoh : <html></html>, <html> adalah awal suatu tags dan akhir dari tags tersebut adalah </html> dimana pada akhir suatu tags selalu ditambahin '/'. Bentuk dasar / Struktur dasar HTML Sebuah document web minimal memiliki bentuk dasar sepeti : <html> <head> <title>Contoh dasar html</title> </head> <body color="#ffffff"> Selamat, <br> disini adalah bagian yang akan tampil di document web. </body> </html> tags html tidak mengenal perbedaan huruf besar maupun huruf kecil. Penulisan <html> atau <HTML> atau <HTml> akan dianggap sama. semua informasi diantara tags<head></head> tidak akan ditampilkan. Semua informasi hanya akan ditampilkan diantara tags<body></body>. Beberap istilah dalam HTML Tags : suatu kesatuan teks yang diawali dengan < dan diakhiri dengan >, dimana teks tersebut diapit diantara < dan >, contoh : <html>, <head>, <body> dll.
  • 2.
    Element : adalahteks yang berada diantara < dan >, contoh : tags <html>, elementnya adalah html tags <body>, elementnya adalah body Attribute : suatu keyword yang merupakan bagian dari suatu element, contoh : <img src="logo.gif" width=20 height=20> dimana yang dimaksud dengan attribute adalah src, width, height. Latihan Lab. coba ketik program diatas dengan menggunakan notepad/wordpad kemudian simpan dengan nama file latihan1.html pada direktori c:latihanhtml. Jalankan web browser Anda, kemudian klik menu file > open kemudian cari file latihan1.html. Tampilan di browser Seperti yang saya jelaskan sebelumnya, setiap tags html selalu diikuti dengan penutup tags, dari contoh diatas dapat kita lihat bahwa document diawali dengan tags <html> dan kemudian diakhiri dengan tags </html> juga. Kemudian diantara tags <html> terdapat tags lain seperti <head></head> dan <body></body>, sedangkan tags <title></title> ada diantara tags <head>, disamping tags <title> masih ada tags lain seperti <meta> yang berada diantara tags <head>, sedangkan sisanya adalah tags-tags yang akan berada diantara tags <body>. Dari contoh diatas adalah tags <br>. Untuk tags-tags tertentu ada pengecualian tidak memiliki tags penutup seperti tags <br>, <hr>, <img> dan <p>. Semua text yang ada diantara tags <body></body> akan ditampilkan oleh browser. Text/informasi yang tampil di document akan diformat dengan menggunaan berbagai jenis tags html. Tag-tag dasar Warna Background dan teks Untuk mememberi warna pada background html anda digunakan tag body dengan attribute bgcolor. Dan untuk memberi warna teks digunakan attribute text. Contoh: <body bgcolor=”#ffff00” text=blue> nilai atribute dapat berupa hexadecimal (“#ffff00”) atau warna dasar (red, green, blue, yellow dsb)
  • 3.
    Break(<br>) Tag Break (<br>)digunakan untuk membuat baris baru dari suatu text. Tanpa <br>, beberapa baris teks html akan dibaca oleh browser sebagai satu baris. Contoh: Html sintak hasil Smart Media Solusindo Smart Media Solusindo Indonesia Indonesia Smart Media Solusindo <br> Indonesia Smart Media Solusindo Indonesia Preformatted Text(<pre>) Browser akan mengabaikan spasi, baris baru, dan tabs dalam dokumen html. Agar spasi, baris baru dan tabs tidak diabaikan digunakan preformatted text tag <pre>. Horizontal rule(<hr>) <hr> digunakan untuk membuat garis horizontal. Beberapa attribute yang penting digunakan untuk mensetting garis tersebut adalah <hr> attribute Keterangan size Menentukan tinggi atau ketebalan garis width Menentukan tebal garis color Menentukan warna garis align Menentukan alignment Contoh: <hr size=”10” width=”200” color =”red” align=”center”> Heading tag adalah tags yang digunakan untuk membuat heading (Judul atau subjudul) document html. Tags output <h1>Heading 1</h1> Heading 1 <h2>Heading 2</h2> Heading 2 <h3>Heading 3</h3> Heading 3 <h4>Heading 4</h4> Heading 4 <h5>Heading 5</h5> Heading 5 <h6>Heading 6</h6> Heading 6 Latihan Lab. Ketik program dibawah ini kemudian simpan dengan nama latihan2.html <html> <head><title>Latihan Tags Heading</title></head> <body> <h2>Panca Sila</h2> <h3>1. KeTuhanan yang Maha Esa</h3> <h3>2. Kemanusiaan yang adil dan beradab</h3> ... <br> contoh penggunaan tags heading, berikut bentuk detail tags heading yang lain <h1>Heading 1</h1>
  • 4.
    <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> Tampilan di browser Tag Paragraph<p> Tag paragraf digunakan untuk membuat paragraf. <p></p> contoh: <P>Indonesian International Telecommunications, Media and Information Technology Conference and Exhibition (IITELMIT) 2002 digelar di Jakarta Convention Center (JCC) pada 7-10 Mei 2002. </P> <p>Pameran dan konferensi Teknologi Informasi-Telekomunikasi tahunan terbesar di Indonesia ini dibuka secara resmi oleh Meneg Kominfo, Syamsul Mu’arif, Selasa (7/5/2002) pukul 09.30 wib di Ruang Cendrawasih JCC. </p> Center (<center>) Digunakan untuk membuat aligment center pada teks atau object yang lain (gambar, table dsb). Mengatur huruf (font) Format font dasar Beberapa format fornt dasar yaitu: Format font dasar Contoh Hasil Bold <b> <b>rcec</b> rcec Italic<i> <i>rcec</i> rcec Underline(<u>) <u>rcec</u> Rcec Strong(<Strong>) <strong>Rcec</strong> Rcec Emphasis(<em>) <em>Rcec</em> Rcec
  • 5.
    Font tag<font> Font tagdigunakan untuk memberi setting font yang digunakan. Beberapa attribute yang digunakan: Font attribute Keterangan Size Mengatur ukuran font Color Mengatur warna font Face Menentukan jenis font Contoh: <font size=”+1” color=green face=”arial”>Rcec</font> Superscript dan subscript Untuk membuat superscript digunakan tag <sup> dan untuk membuat subscript digunakan tag <sub>. Contoh 2 x<sup>2</sup> x H<sub>2</sub>O H20 Karakter khusus Untuk membuat karakter khusus seperti @, ®, © digunakan sintak khusus yang dimulai dengan &...;. beberapa karakter khusus dapat dilihat pada table berikut: < = &lt; © = &copy; " = &quot; ¼ = &#188; > = &gt; ® = &reg; = &nbsp; ½ = &#189; & = &amp; ¢ = &#162; ° = &deg; ¾ = &#190; Tag List Ordered List(<ol>) digunakan untuk membuat daftar bernomor (numbering) seperti berikut: • HTML • JavaScript • Photoshop • Dreamweaver Sintak dasar: <ol> <li>HTML</li> <li>JavaScript</li> </ol> <li>(list item) merupakan tag untuk menentukan item yang dimasukkan dalam list. Beberapa attribute yang dimiliki oleh <ol> adalah: <ol> Keterangan attribute Type Digunakan untuk menentukan jenis list-nya(huruf atau angka) Start Digunakan untuk menemntukan dari nomer berapa atau huruf ke berapa suatu list dimulai.
  • 6.
    Unordered List(<ul>) digunakan untukmembuat daftar seperti berikut: • HTML • JavaScript • Photoshop • Dreamweaver Sintak dasar: <ul> <li>HTML</li> <li>JavaScript</li> </ul> <ul> tidak mempunyai attribute start, tetapi tetap mempunyai attribute type yang mempunyai nilai disc,circle atau square. Nested List nested list adalah menggabungkan beberapa ordered dan unordered list. Definition List digunakan untuk membuat suatu daftar index misalkan: HTML Hyper Text Markup Langauge XML eXtensible Markup Language sintax dasar: <dl> <dt>HTML</dt> <dd>Hyper Text Markup Language</dd> </dl> Linking anchor tag<a> anchor tag digunakan untuk linking ke dokumen lain. Sintak umum: <a href=”dokumen yang dituju”>Text</a> link ke file lokal <a href=”pertama.html”>pertama</a> jika dokumen terdapat dalam folder tertentu: <a href=”folder/pertama.html”>pertama</a> link ke web site <a href=”http://www.yahoo.com”>yahoo</a> link ke email <a href=”mailto:faizal@smartmediasolusindo.net”>contact me</a> link dalam satu dokumen <a name =”top” href=”pertama.html#bottom”>go to bottom</a> ... <a name =”bottom” href=”pertama.html#top”>go to top</a> Warna link Warna link dapat ditentukan memalui tag body dengan attribute sebagai berikut: Body Attribute Keterangan link Warna teks yang digunakan sebagai link, belum pernah dikunjungi vlink Visited link, warna teks link yang pernah dikunjungi alink Active link, warna teks link yang aktif
  • 7.
    Marquee <marquee> Tulisan berjalan <marquee> Textberjalan </marquee> Atribut Keteranagan Contoh Membuat text berjalan <marquee>Text berjalan </marquee> Align=top, middle, bottom Menentukan perataan text <marquee disekitar marquee align=top>text</marquee> Behavior=scrool, slide, Menentukan tampilan text <marquee alternate berjalan behavior=alternate>text bolak balik</marquee> Bgcolor=warna Menentukan lwarna <marquee bgcolor=red>biground latarbelakang marquee merah</marquee> Direction=left, right, up, down Menantukan arah <marquee direction=up> tulisan berjalannya text naik</marquee> *masih beberapa atribut namun ini dulu. Atribut-atribut marquee tersebut bisa juga digabung jadi satu Contoh <marquee direction="down" scrollamount="2" scrolldelay="0" style="Filter:Alpha(Opacity=100, FinishOpacity=5, Style=1, StartX=0, StartY=45, FinishX=0, FinishY=0);font-weight:bold;overflow:hidden;width:155px;height:250px;text-align:center;"> Taukah anda hasil tulisan gabungan dari marquee ini akan menghasil kan animasi yang sangat menarik, hanya dengan sedikit script diatas akan membuat tampilan website Anda menjadi lebih menawan. Gak percaya coba aja sendiri ☺ </marquee> Bekerja dengan Grafis Gambar background Untuk memasukkan gambar background digunakan body tag dengan attribute background. Contoh: <body background=”rcec.gif”> Image tag<img> Digunakan untuk memasukkan gambar ke dalam dokumen. Sintak umum: <img src=”nama file image”> beberapa attribute yang digunakan dalam <img>. <img> Keterangan attribute Src Menentukan letak (source) gambar yang akan ditampilkan pada dokumen HTML Width Lebar gambar Height Tinggi gambar Alt Menentukan teks yang akan ter-display jika mouse diletakkan di atas gambar (tooltip) atau teks yang terdispaly jika gambar tidak muncul Border Menentukan lebar border
  • 8.
    Title Tooltip Hspace Jarak horizontal Vspace Jarak vertikal Link dengan image Untuk membuat sutau link dengan Image, Anda dapat menggabungkan tag anchor dengan image tag. Contoh: <a href=”test.html”><img src=”test.gif”></a> Image Mapping Image mapping digunakan untukmembuat link di mana dalam satu gambar kita dalammembuat beberapa link. contoh : <img src="logo.jpg" width="510" height="399" usemap="#logoMap" border="0" alt="mapping image"> <map name="logoMap"> <area shape="rect" coords="55,57,204,185" href=url target="_blank"> <area shape="circle" coords="287,137,55" href=url> <area shape="poly" coords="122,248,225,222,244,272,176,282" href=url> </map> Membuat table Table sangat bermanfaat dalam penentuan layout atau tata design document web. table diawali dengan tags <table> kemudian diantara tags <table> ada tags <tr></tr> yang akan membentuk baris (row) kemudian diantara tags <tr> ada tags <td></td> yang akan membentuk kolom (column). Contoh bentuk dasar dari table : <table> <tr> <td></td> <td></td> </tr> </table> Tag Table <table> attribute Keterangan Nilai border Menentukan tebal garis batas pinggir px,% align Menentukan posisi table dalam dokument left, center, right width Lebar table px,% height Tinggi table px,% background Menentukan gambar background File gambar bordercolor Menentukan warna border Warna bgcolor Menentukan warna background Warna cellpadding Jarak antara isi sel dengan border px,% cellspacing Jarak antar sel px,% Tag Table row (<tr>) <table> attribute Keterangan Nilai align Menentukan posisi isi sel left, center, right width Lebar px,% height Tinggi px,% bgcolor Menentukan warna background Warna valign Vertical alignment Top,middle, bottom
  • 9.
    Tag Table Data(<td>) <table> attribute Keterangan Nilai align Menentukan posisi isi dalam dokument left, center, right width Lebar sel px,% height Tinggi sel px,% background Menentukan gambar background File gambar bordercolor Menentukan warna border Warna bgcolor Menentukan warna background Warna valign Vertical alignment Top,middle, bottom colspan Span kolom Angka rowspan Span row Latihan Lab. <table border=1 cellpadding=2 cellspacing=5 width=200 height=300> <tr> <td><b>Nama Barang</b></td> <td><b>Jumlah Barang</b></td> </tr> <tr> <td>Pentium III</td> <td align=left>5 unit</td> </tr> <tr> <td>Printer Cannon</td> <td align=left>15 unit</td> </tr> <tr> <td>Scanner Umax</td> <td align=left>2 unit</td> </tr> </table> Tampilan Layar
  • 10.
    latihan lab. latihan menggunakansemua komponen form dengan layout yang rapi dengan dukungan table. <html> <head> <title>Registrasi form</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <br> <form name="form1" method="post" action="save.asp"> <table width="500" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"> <font face="Verdana, Arial" size="4"><b>Registration Form</b></font> </td> </tr> <tr> <td width="142">User ID</td> <td width="252"><input type="text" name="userid">* </td> </tr> <tr> <td width="142">Password</td> <td width="252"><input type="password" name="password">* </td> </tr> <tr> <td width="142">Confirm Password</td> <td width="252"><input type="password" name="password2">* </td> </tr> <tr> <td width="142">Name</td> <td width="252"><input type="text" name="name"></td> </tr> <tr> <td width="142">Address</td> <td width="252"><input type="text" name="address" size="40"></td> </tr> <tr> <td width="142">Gender</td> <td width="252"> <input type="radio" name="gender" value="Male" checked>Male <input type="radio" name="gender" value="female">Female</td> </tr> <tr> <td width="142">Date of Birth</td> <td width="252"> <select name="tgl"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> ... <option value="29">29</option>
  • 11.
    <option value="30">30</option> <option value="31">31</option> </select> <select name="bln"> <option value="1">January</option> <option value="2">February</option> <option value="3">Maret</option> ... <option value="11">November</option> <option value="12">December</option> </select> <select name="thn"> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> </select> </td> </tr> <tr> <td width="142">E-mail</td> <td width="252"> <input type="text" name="email"> </td> </tr> <tr> <td width="142">City</td> <td width="252"> <input type="text" name="city"> </td> </tr> <tr> <td width="142">Country</td> <td width="252"> <select name="country"> <option value="Indonesia">Indonesia</option> <option value="Malaysia">Malaysia</option> <option value="Singapore">Singapore</option> <option value="Thailand">Thailand</option> </select> </td> </tr> <tr> <td width="142">Interest</td> <td width="252"> <input type="checkbox" name="checkbox" value="computer">Computer <input type="checkbox" name="checkbox2" value="software">Software <br> <input type="checkbox" name="checkbox3" value="hardware">Hardware <input type="checkbox" name="checkbox4" value="hacker_info">Hacker Info </td>
  • 12.
    </tr> <tr> <td width="142">&nbsp;</td> <td width="252"> <input type="submit" name="Submit" value="Proses"> <input type="reset" name="batal" value="Batal"> </td> </tr> </table> </form> </body> </html> Tampilan Layar
  • 13.
    Membuat Formulir Formulir (form)digunakan untuk mengisi suatu data (mis. data registrasi). Data ini akan dikirim ke server yang nantinya dapat langsung diproses atau disimpan dalam database. Untuk membuat formulir, didahului dengan form tag dan diikuti dengan tag jenis formulirnya misalkan teksbox (teksfields) , drop down menu, radio button dsb yang diletakkan di dalam form tag. Tag Form Tag form digunakan untuk memulai membuat formulir. Sintak umumnya adalah sebagai berikut: <form name=frm1 action=url method=get|post> action diisi dengan url yang merupakan alamat atau file yang akan dituju dari halaman/document ini setelah menekan/click tombol submit. ada dua jenis method yaitu get dan post. Penggunaan method get akan menampilkan semua attribute/parameter beserta nilai pada address bar web browser, sedangkan penggunaan method post hanya menampilkan url document tersebut. contoh get : http://www.detik.com/berita.asp?berita=123123123&tgl=12042002 contoh post: http://www.detik.com/berita.asp name digunakan sebagai identitas form.jika suatu saat kita ingin mereferensi form tersebut Anda dapat menggunakan nama tersebut. Berikut adalah tag-tag yang diletakkan didalam form tag. Tag Textbox Digunakan untuk mengisi data berupa teks yang panjangnya satu baris. Sintak umum: <input type=”text” name=”username”> Tag Password Digunakan untuk mengisi password. <input type=”password” name=”passwd”> Tag Checkbox Digunakan untuk mengisi data yang berupa multiple selection. Contoh: <input type=”checkbox” name=”check” value=”computer” checked>Computer <input type=”checkbox” name=”check” value=”printer”>Printer <input type=”checkbox” name=”check” value=”harddisk”>HardDisk <input type=”checkbox” name=”check” value=”cdrom”>CD-Rom hasilnya: Tag Radio Digunakan untuk membuat pilihan dengan yang bersifat single selection. Contoh: <input type=radio name="jnsKelamin" value="lk">Laki-laki <input type=radio name="jnsKelamin" value="pr">Perempuan tags radio memiliki nilai atribute name yang sama (dua-duanya mempunyai name="jnsKelamin") tetapi mempunya nilai value yang berbeda lk dan pr. Hasilnya:
  • 14.
    Tag Pilihan Digunakan untukmembuat pilihan yang berupa drop down. Contoh: <select name="negara"> <option value="none">none</option> <option value="indonesia">Indonesia</option> <option value="malaysia">Malaysia</option> <option value="singapore">Singapore</option> <option value="other">Other</option> </select> hasil: untuk membuat pilihan yang berupa list Anda dapat menggunakan attribute size pada tag select. Tag Textarea Digunakan untuk mengisi data teks dengan lebih dari satu baris. Contoh: <textarea cols=”20” rows=”5” name=comment></textarea> cols merupakan banyaknya kolom karakter rows merupakan banyakknya baris teks. Tag Hidden Digunakan untuk mengisi data yang tidak ingin ditampilkan pada user. <input type=Hidden name=MemberId value="m001"> Tag Tombol submit Digunakan untuk mengirim data jika diklik. Contoh: <input type=submit name=btSubmit value="Send"> reset digunakan untuk menghapus isi form. Contoh: <input type=reset name=btReset value="Bantal"> Button Digunakan untuk menjalankan suatu fungsi Scripting. <input type=button name=btBiasa value="Tombol Biasa">
  • 15.
    Membuat Frame Frame digunakanuntuk menampilkan beberapa halaman html dalam satu halaman. Untuk membuat suatu frame anda membutuhkan satu halaman frameset untuk mendefinisikan framenya, dan minimal 2 halaman lain untuk mengisi framenya. Berikut contoh penggunaan frameset dan frame. Frameset file name : frame.html <html> <head> <title>Using Frame</title> </head> <frameset cols="126,*" rows="*" frameborder="NO" border="0" framespacing="0"> <frame name="leftFrame" src="kiri.html" scrolling="NO" noresize > <frame name="mainFrame" src="kanan.html"> </frameset> <noframes> <body bgcolor="#FFFFFF" text="#000000"> This browser do not support frame. </body> </noframes> </html> Rancangan Tampilan Layar frame.html disini kita membagi document menjadi dua kolum(column) dimana kolum pertama dengan lebar(width) 126px. * berarti akan menggunakan sisa ruang yang tersisa. selain menggunakan pixel dan * juga dapat digunakan tanda persen(%) untuk menunjukkan ukuran baik lebar maupun tinggi suatu frame. cols menunjukkan ukuran dan jumlah column, rows menunjukkan ukuran dan jumlah row(baris). Sebelum anda membuat suatu frame, terlebih dahulu harus disiapkan file-file web page yang dibutuhkan. Dari contoh diatas anda membutuhkan file kiri.html dan kanan.html kemudian frame ini sendiri akan disimpan dengan nama file frame.html. Tags dan text diantara tags <noframes></noframes> akan digunakan jika browser yang digunakan tidak mendukung kemampuan Frame. Namun rata-rata browser sekarang
  • 16.
    sudah mendukung penuhkemampuan frame. Pemberian nama(name) pada frame sangat berguna pada saat mengkombinasikannya dengan link(anchor), contoh: <a href="page2.html" target="mainFrame">Second Page</a> dari contoh diatas, ada dua frame dimana pada frame kedua bernama "mainFrame", pengunaan ini bermanfaat pada saat ingin mengubah isi pada frame "mainFrame" sesuai dengan url yang tertera di href (href="page2.html"). syntaks anchor: <a href=url target="_self|_parent|_blank|namaframe"></a> frame target _self : menuju kehalaman dimana link itu aktif _parent : menuju ke halaman induk/parent dari frame kalau tidak ada frame berarti halaman itu sendiri juga. _blank : membuka window baru namaframe : sesuai dengan nama frame (eg. leftFrame). Document : Modul Dasar-dasar HTML. Sumber : Internet
  • 17.
    Contoh Tampilan WebSederhana Source Script dan keterangan <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style type="text/css"> .kotak { border-style:solid; background-color:#d7e7ff; Ini adalah CSS untuk memformat tampilan border-color:#3483fa; web, dari pada memakai table CSS bisa border-top-width:2px; dipakai berulang-ulang. border-bottom-width:0px; border-left-width:0px; Diawali dengan border-right-width:0px; padding:0; <style type="text/css"> ………………. height: 25px; </style> font-family: "arial"; font-size:12px; vertical-align: top; text-align: center; } </style>
  • 18.
    <TITLE> Mamad Web</TITLE> Title Web </HEAD> <BODY> <TABLE width="100%" height="102" cellpadding="0" cellspacing="0" bordercolor="#3483fa"> <TR> <TD bgcolor="#3483fa" width="91" align="right"> <IMG SRC="openbsd.jpg" WIDTH="90" HEIGHT="100" BORDER=0 ALT="Open bsd logo"> </TD> <TD bgcolor="#3483fa" align="center"> <h2> <font color="#FFFFFF"> Tabel paling atas yang terdapat logo sama Company Name Company Name </font> <h2> </TD> </TR> </TABLE> <TABLE width="100%" height="80%"> <TR> <TD width="200" bgcolor="#d7e7ff" valign="top"> Menu </TD> <TD width="85%" valign="top"> Tabel tengah untuk menu dan isi web Isi Web </TD> </TR> </TABLE> <div class="kotak"> Disini penggunaan CSS Copy right mamad 2008 <div class="kotak"> =>”kotak” sesuai dg tiap nama CSS </div> ……… </div> </BODY> </HTML> Nb file css dapat juga diletakan di luar tersendiri dan cara pemanggilanya adalah <link href="filecss.css" rel="stylesheet" type="text/css">
  • 19.
    Source Script danketerangan <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Mamad Web</title> <base target="contents"> </head> <body > <style type="text/css"> BODY { background : #FFFFFF; font-family : verdana; font-size : x-small; } H1 { font-style : italic; font-size : 18px; } H4 { font-size : 12px; } A{ color : #0000FF; } A:HOVER { color : #9999FF; background : white; }
  • 20.
    TABLE { } TD { font-family : verdana; font-size : 12px; } </style> <TABLE border="0" cellpadding="0" cellspacing="0" height="60" width="901"> <TR> <TD width="243" height="44"> <Img src="gambare/nick.gif" align="left" border="0" width="228" height="40">&nbsp</TD> <TD width="658" valign="top" align="center" height="80" valign="TOP"> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version =6,0,0,0" WIDTH="490" HEIGHT="80" id="1" ALIGN="left" valign="top"> <PARAM NAME=movie VALUE="gambare/top.swf"> Seluruh script iniuntuk menyisipkan <PARAM NAME=loop VALUE=false> file flash(swf) <PARAM NAME=quality VALUE=high> Disini letak filenya <PARAM NAME=bgcolor VALUE=#FFFFFF> <PARAM NAME=movie <EMBED src="gambare/top.swf" VALUE="gambare/top.swf"> loop=false quality=high bgcolor=#FFFFFF WIDTH="490" HEIGHT="80" NAME="1" ALIGN="left" valign="top" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT> &nbsp; <a class="chlnk" href Java script untuk membuat halaman web jadi default. onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.geocities .com/nickqin2001');" style="CURSOR: hand"> <img src="gambare/home.gif">&nbsp;Jadikan Hompage</a> &nbsp;&nbsp;&nbsp;&nbsp; </TD></TR> <TR> <TD height="16" align ="left" colspan="2" width="100%"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="22"> <tr> <td width="185" background="gambare/topbg.gif">&nbsp;</td> <td width="79%" background="gambare/topbg.gif"> <p align="right"><a href="index.html">Home</a>&nbsp;|&nbsp;<a href="sitemap.html" target="main">Site Map</a>&nbsp;|&nbsp;<a href="about.html" target="main">About</a>&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> </table> </TD></TR> </TABLE> </body> </html>