Tuesday, June 23, 2009

PEMROGRAMAN WEB

Sesuai dengan permintaan mahasiswa agar mata kuliah Komputer dan Masyarakat dibuat modul baik teori maupun praktek dalam menunjang system pembelajarannya. Hendaknya agar mahasiswa lebih maju dalam pengetahuan tidak hanya belajar dari modul atau kuliah saja, tapi juga belajar dari buku lainnya dan internet. Untuk modul latihan web ini tidak dijelaskan bagaimana cara pemrograman tingkat lanjut, namun hanya sebatas pengenalan dan bagaimana cara mendesain web baik melalui penulisan script dengan notepad maupun desain visual dengan macromedia dreamweaver.
WWW (World Wide Web) atau lebih dikenal dengan web merupakan salah satu layanan yang didapat oleh pemakai computer yang terhubung ke internet. Awalnya sebagai penyedia informasi, kini juga untuk komunikasi dari e-mail sampai dengan chating sampai dengan melakukan transaksi bisnis (e-commerce).
Berikut cara kerja dari WWW :
1.      Informasi web disimpan dalam bentuk dokumen yang disebut dengan halaman – halaman web (web page).
2.      Web page adalah file – file yang disimpan dalam computer yang disebut dengan server web.
3.      Komputer – computer membaca web page disebut sebagai web client.
4.      Web client menampilkan page dengan menggunakan program yang disebut dengan browse web, contoh internet explorer, netscape navigator.

Pengenalan web :
·        Browser web : software yang digunakan untuk menampilkan informasi dan server web.
·        HTML : Hypertext markup language.
·        PHP : Perl hypertext preprocessor.
·        ASP : Active server page.
·        Dokumen HTML : file text murni yang dapat ditulis dieditor sembarang yang berisi informasi ataupun interface  aplikasi di dalam internet.
·        Untuk menandai berbagai elemen dalam suatu dokumen HTML digunakan tag. Berupa tanda besar dan tanda kecil “ < “ dan “ > “.
·        Nama file HTML mempunyai ekstensi “.htm” atau “.html”.
·        Dokumen html disusun oleh elemen seperti :
Head,body,table,paragraph dan list.

Ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan elemen tersebut diantaranya :
1.      paragraph : <p>.
2.      ganti baris : <br>.
3.      garis data : <hr>.
4.      list item : <li>.

Struktur dokumen html :
<html>
        <head>
           ………informasi tentang dokumen
        </head>
        <body>
        </body>
</html>


Anggap saja anda tidak mempunyai suatu program editor khusus, sehingga dalam menuliskan script html dapat digunakan notepad yang telah disediakan oleh windows. Start – Programs – Accessories – Notepad. Lalu ketikan contoh script html yang ada di bawah ini, kemudian simpan script dengan ekstensi .htm atau .html. Hasilnya dapat anda lihat setelah anda browser di browser aplikasi seperti Internet Eksplorer atau lainnya.

Latihan – latihan :
<!-coba1.html->
<html>
  <head>
     <title> contoh 1 html sederhana </title>
  </head>
  <body>
     <p>ini pertama kali saya belajar HTML, selamat datang</p>
  </body>
</html>

<!-coba2.html->
<html>
  <head>
     <title> contoh 2 html sederhana </title>
  </head>
  <body>
     <p>paragraph 1 </p>
     <p>paragraph 2 </p>
     <p>paragraph 3 </p>
  </body>
</html>

<!-coba3.html->
<html>
  <head>
     <title> contoh line break html sederhana </title>
  </head>
  <body>
     <p>teks ini <br> tidak menggunakan <br> tag paragraph, <br> tambahkan tulisan lainnya….</p>
  </body>
</html>

<!-coba4.html->
<html>
  <head>
     <title> contoh heading html sederhana </title>
  </head>
  <body>
      <h1>heading 1 </h1>
      <h1>heading 2 </h2>
      <h3>heading 3 </h3>
  </body>
</html>

<!-coba5.html->
<html>
  <head>
     <title> contoh letak heading html sederhana </title>
  </head>
  <body>
      <h1 align = “left”>heading 1 </h1>
      <h1 align = “center”>heading 2 </h2>
      <h3 align = “right”>heading 3 </h3>
  </body>
</html>

Format teks Html :
·        Untuk garis mendatar : <hr>
·        Komentar :<!->
·        Menebalkan huruf (bold) : <b> huruf<b>
·        Huruf miring : <i> huruf miring </i>
·        Memberi tekanan pada teks (emphasize) :<em> huruf emphasize </em>
·        Mengecilkan huruf : <small> huruf kecil</small>
·        Superscript : <sup> huruf </sup>
·        Subscript : <sub> huruf </sub>



Link HTML :
Ada 3 buah jenis link :
·        Link relative
Link dari satu page ke page lainnya dalam satu direktori
Contoh : <a href = “file2.html”> next </a>
·        Link absolute
Link yang dibuat dari satu page web ke page web yang lainnya yang berada pada web site lainnya. Contoh : <a href = http://www.yahoo.com> yahoo </a>
·        Link dalam dokumen yang sama
Yaitu link antar bagian, syaratnya bagian tersebut harus diberi nama. Memberi nama suatu bagian  dalam dokumen :
  • Letakkan kursor pada baris / teks yang akan menjadi awal dari bagian tersebut.
  • Sisipkan nama bagian tersebut dengan : <a name=”nama bagian”>

Design Web dengan menggunakan Macromedia Dreamweaver
Macromedia studio MX Dreamweaver merupakan integrasi dari beberapa aplikasi untuk menghasilkan website dan aplikasi internet yang kompleks lintas flatform. Macromedia dreamweaver mempunyai tools – tools yang mendukung dalam mendesign aplikasi pembuatan web, antara lain:
  • Dreamweaver MX, digunakan untuk membangun dan mengatur websites berbasis HTML.
  • Flash MX, digunakan untuk mengembangkan daya tarik aplikasi internet dengan kemampuan lintas platform yang sangat tinggi.
  • Firework MX, digunakan untuk membangun halaman web secara grafis.
  • Freehand MX, adalah aplikasi yang mempunyai dasar grafis vector dengan hasil output ilustrasi garfish cetak dan grafis web.
  • Coldfusion MX, digunakan untuk membangun program dilingkunagn server scripting.
Tuliskan kode di bawah ini ke editor kode dreamweaver, lalu lakukan desain grafis agar tampilan web menjadi lebih menarik.
Script web :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#9999ff">
<form name="form1" method="post" action="">
  <table width="82%" border="1">
    <tr>
      <td width="31%">&nbsp;</td>
      <td width="69%"><div align="center">BUKU TAMU</div></td>
    </tr>
    <tr>
      <td>Kode Pengunjung</td>
      <td><input type="text" name="textfield"></td>
    </tr>
    <tr>
      <td>Nama</td>
      <td><input name="textfield2" type="text" size="30"></td>
    </tr>
    <tr>
      <td>Jenis Kelamin</td>
      <td><input type="radio" name="radiobutton" value="radiobutton">
        Laki-laki
        <input type="radio" name="radiobutton" value="radiobutton">
        Perempuan</td>
    </tr>
    <tr>
      <td>Alamat</td>
      <td><input name="textfield3" type="text" size="45"></td>
    </tr>
    <tr>
      <td>E-Mail</td>
      <td><input name="textfield4" type="text" size="25"></td>
    </tr>
    <tr>
      <td>Hobby</td>
      <td><select name="select">
        </select></td>
    </tr>
    <tr>
      <td>Komentar</td>
      <td><textarea name="textarea"></textarea></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="23">
          <param name="BGCOLOR" value="#9999ff">
          <param name="movie" value="button1.swf">
          <param name="quality" value="high">
          <embed src="button1.swf" width="105" height="23" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#9999ff" ></embed>
        </object>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="23">
          <param name="movie" value="button2.swf">
          <param name="quality" value="high">
          <param name="bgcolor" value="#9999ff">
          <embed src="button2.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="23" bgcolor="#9999ff"></embed>
        </object> </td>
    </tr>
  </table>
</form>
</body>
</html>

No comments:

Post a Comment