Jumat, 23 Mei 2008

web

BELAJAR WEB MENGGUNAKAN HTML

WWW atau lebih dikenal dengan web merupakan layanan penyajian informasi diinternet menggunakan kode HTML.Beberapa hal yang perlu diperhatikan dalam penggunaan HTML yaitu:

  • Tag HTML diapit dengan dua karakter kurung bersudut(angle bracket) <>
  • Tag HTML secara normal selalu berpasangan seperti <b> disini untuk menginputkan tulisan tebal <⁄b>
  • Tag pertama dalam suatu pasangan adalah tag awal dan tag kedua merupakan tag akhir
  • Tag HTML tidak "case sensitive" berarti tidak mempengaruhi apabila kita ingin menulis huruf besar atau kecil
  • Jika dalam suatu tag ada tag lagi maka penulisan tag akhir tidak boleh bersilang, tetapi harus berurutan misalnya <b>&lti>huruf tebal dan miring maka ditutup dengan<⁄b><⁄i>
  • Dokumen HTML secara mendasar terdiri atas teks informasi, maka terdapat beberapa urutan dalam penulisan sebuah dokumen HTML yaitu:


  • Penulisan tag HTML diawali dengan <HTML> menandakan bahwa itu sebuah dokumen HTML
  • Tag kedua yaitu <HEAD> dalam elemen head dituliskan tag <TITLE> yaitu judul atau dokumen dari topik utama &amp ditutup dengan <⁄TITLE> setelah tag title ditutup kemudian berulah menutup tag head <⁄HEAD>
  • Tag informasi disimpan dalam elemen body <BODY> dan <⁄BODY> tag sisusun dalam paragraf-paragraf tag <p>
  • untuk penulisan judul dalam teks informasi, meggunakan tag heading, dalam HTML mempunyai level 1 s/d 6 dinyatakan dengan tag <H1> s/d <H6> ditutup dengan <⁄H1> s/d<⁄H6>
  • Berikut contoh sederhana

    <html>

    <head>

    <title> contoh HTML SEDERHANA

    <⁄title>

    <⁄head>

    <⁄body>

    <b> huruf tebal<⁄b>

    <u> garis bawah<⁄u>

    <i> tulisan miring <⁄i>

    <sup> tulisan supersript<⁄sup>

    <sub> tulisan subscript<⁄sub>

    <s> tulisan strikout ⁄ bergaris ditengah<⁄s>

    <⁄body>

    <⁄html>

    untuk mencobanya dapat dituliskan dinotepad dan disave dengan sebuah ekstensi .htm atau .html maka hasil dari tampilan yang telah dibuat tadi dapat dilihat di internet explorer, atau browser lainnya.
    Output atau hasil dari program diatas yaitu:

    huruf tebal

    garis bawah

    tulisan miring

    kalimat ini adalah tulisan superscript

    kalimat ini adalah tulisan subsrcipt

    tulisan strikout/bergaris ditengah

    Membuat Link

    untuk membuat link dapat digunakan tag link yaitu <A HREF="http://www.yahoo.com/"> didalam tag <A HREF> dapat ditambahkan target untuk menentukan letak suatu halaman,untuk menutup digunakan <⁄A> beberapa terget yang digunakan yaitu:

  • target="_blank" yaitu untuk membuka link ke jendela baru
  • target="_top" yaitu arah link ke sisi utama
  • target="_parent" yaitu membuka jendela sebelumnya
  • target="_self" yaitu menimpa dijendela yang sama
  • List HTML

    list merupakan bentuk umum yang bisa kita gunakan untuk menguraikan daftar sesuatu.
    jenis-jenis list dalam HTML:

  • list dengan nomor, caranya dengan menggunakan tag <ol>
  • list tanpa nomor ⁄bulleted list <ul>
  • list defenisi⁄ definition list menggunakan tag<dl>

  • contohnya:
    <dl>
    <dt>kopi<⁄dt>
    <dd> ibu membuat kopi<⁄dd>
    <⁄dl>

    Image HTML

    file gambar yang umum digunakan untuk Homepage ada tiga jenis. pertama file gif(Graphics Interchange Format), file jpg(joint photogrphic expert group, atau jpeg) dan yang terakhir file bmp(bitmap). diantara ketiganya file bmp memiliki kualitas gambar terbaik, namun berukuran relatif besar sehingga akan menambah beban saat proses loading halaman homepage. gambar gif memiliki suatu kenggulan, yaitu memungkinkan latar transparan.

    sebuah gambar juga bisa kita gunakan sebagai link, dengan cara menuliskan tag berikut:<A HREF="http://www.zwani.com/" target="_blank"><IMG SRC="GAMBAR.GIF"><⁄A>.selain itu kita juga bisa memasukkan atribut. perhatikan tag berikut<IMG SRC="nama gambar.gif" border="0" align="right" height="100" width="50" alt="gambar apa ini ya?" hspace="5" vspace="5">
    ALT disini akan memberikan keterangan tentang gambar yang akan ditampilkan. Juga saat gambar tidak ditampilkan(misalnya gambar yang dipanggil tidak terletak dalam satu dokumen) maka tulisan yang ada pada ALT tersebut yang akan ditampilkan. Tag IMG SRC ini digunakan untuk mencari sebuah file gambar yang berada pada direktori yang sama dengan penyimpanan .htm/.html

    Atribut hspace dan vspace ini mengatur jarak antara gambar dan tulisan yang berada disekitarnya HSPACE mengatur jarak horizontal gambar ketulisan sedangkan VSPACE mengatur jarak vertikal antara gambar dan tulisan. selain gambar, dalam sebuah web juga dapat dimasukkan suara, file suara yang bisa dimasukkan adalah *.wav,*mid,*.au.

    Tabel

    untuk dapat membuat tabel, minimal memiliki tag <TABLE>, <TR>,<TD> setelah diawali dengan membuka tag table jangan lupa untuk menutup tag table tersebut<⁄TABLE>

    tag <TR> digunakan untuk membuat baris<⁄TR> sedangkan tag <TD> digunakan untuk membuat kolom.
    dalam mengatur sebuah kolom dapat digunakan CELLSPACING dan CELLPADDING, cellspacing yaitu untuk mengatur jarak antar cell dengan teks dan cellpadding untuk menetukan jarak antara isi cell dengan bordernya. Tag Rowspan="2" digunakan untuk menyatukan dua baris, dan tag Colspan="2" digunakan untuk menyatukan 2 kolom
    contoh html sebuah tabel yaitu:

    <table border="5" height="50" width="500" bgcolor="skyblue">

    <tr>

    <td rowspan="2" align="center" vlign="middle">No.<⁄td>

    <td rowspan="2" align="center">nama Mahasiswa<⁄td>

    <td align="center" valign="middle" colspan="2">nilai<⁄td>

    <td align="center" valign="middle" rowspan="2">alamat<⁄td>

    <⁄tr>

    <tr>

    <td>MTK<⁄td>

    <td>English<⁄td>

    <⁄tr>

    <td>1<⁄td>

    <td>Badu<⁄td>

    <td>65<⁄td>

    <td>75<⁄td>

    <td>jl.kenangan<⁄td>

    <⁄tr>

    <⁄table>
    maka dihasilkan tampilan seperti berikut

    No. nama Mahasiswa nilai alamat
    MTK english
    1 Badu 65 75 jl.kenangan

    Form

    Form dapat digunakan untuk meminta input dari pengunjung tantang apapun, baik mengisi angket, mengisi polling, mengisi guest book juga mengisi form pembelian barang, semua aplikasi tersebut menggunakan prinsip pembuatan form.

    form selalu diawali dengan tag<Form> dan ditutup lagi dengan tag<⁄Form>, diantara tag pembuka dan tag penutup tadi dapat diisi <input> yang jenisnya ada beberapa macam:

  • Method ~ digunakan untuk menentukan bagaimana informasi akan dikirim.Terdapat 2 cara pengiriman data yaitu post dan get. Metode Post untuk pengiriman data secara biasa saja/normal sedangkan metode Get untuk pengiriman data dengan menambahkan sesuatu pada alamat URL dibagian atas browser anda
  • Action ~ adalah tag untuk menentukan tag alamat data dikirimkan
  • Input ~ mendefenisikan bahwa kita sedang meminta input(masukan kepada pengunjung situs
  • Type ~ akan menjelaskan jenis input yang kita minta. diantaranya: text, button, checkbox,file,hidden, image,password,radio, reset, submit,textarea dan select.
  • Name ~ berguna untuk meberikan nama kepada input ini
  • Size ~ Ukuran
  • Jenis masukan dalam form

  • Text, digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server.nilai yang dimasukkan dapat berupa angka ataupun teks
  • Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.
  • checkbox menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih
  • List, menydiakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu
  • Button, digunakan untuk mendefenisikan tombol untuk melakukan pemprosesan form
  • Submit, digunakan untuk memanggil URL, setelah input selesai dimasukkan
  • Button,digunakan untuk membuat form lebih interaktif, untuk memenggil script yang ada dalam dokumen html.
  • Image,digunakan sebagai pengganti button, berupa button yang berbentuk gambar
  • Text area, digunakan untuk memasukkan data dalam bentuk tesk berupa memo.
  • Tag text

    <input type=”text” name=”var1” size=”15”>
    Value pada atribut size menunjukkan besar text box. Disini juga dapat menginputkan password yaitu caranya:
    password: <input type="password" name="password" size="15"><br>

    Tag Radio

    <input type=”radio”>pilihan1

    <input type=”radio”>pilihan2

    Tag checkbox

    <input type=”checkbox”>pilihan1

    <input type=”checkbox”>pilihan2

    Tag select

    <Select size=”1”>

    <option>pilihan1

    <option>pilihan2

    <option>pilihan3

    <⁄select>

    Tag Button

    <input type=”submit”>

    <input type=”reset”>

    Tag image

    <input type=”image” src=”url_image”>

    Text area

    <textarea cols=”50” rows=”5”><⁄textarea>

    contoh code html untuk form yaitu:

    nama:<input type="text" name="nama" size="15"><br>

    e-mail<input type="text" name="imel" size="15"><br>

    komentar<br>

    <textarea name="komentar" rows="3" cols="30" wrap="soft"><⁄textarea><br>

    <input type="submit" name="name" value="submit"><br>
    tampilan dari kode html untuk form tersebut yaitu:

    nama:

    e-mail

    komentar: