Make your own free website on Tripod.com

HTML

Pengenalan HTML

Apa sich HTML itu?

Pengertian orang tentang HTML berbeda-beda. tapi satu yang pasti, HTML itu bahasa yang kita gunakan untuk membuat web. HTML menggunakan tanda (markup/kurung siku) untuk menandai perintahnya, tanda-tanda itu disebut tag.Bagaimana bentuk tag?, perhatikan contoh di bawah:

contoh1:

 

<html>

<head><title>Web Pertamaku</title></head>

<body>

  Hi semua, ini web pertama ku loohhh....

</body>

</html>

 

perhatikan dengan seksama contoh diatas, apa kesimpulan loe? ya betul..., setiap tulisan yang ada di kurung siku selalu ada pasangannya.

<html> dengan </html>

<head> dengan </head>

dan seterusnya

 

naahhh.... <html>,<head>,<title>, dst... itulah yang disebut tag. perlu diperhatikan penulisan tag-tag itu sangat disarankan menggunakan hurup kecil. Sekarang gua terangin fungsi-fungsi tag yang ada:

<html>

tag ini menandai awal dan akhir dokumen HTML, tag ini harus ada loohh...

<head>

tag ini berfungsi sebagai informasi halaman web yang kita buat dan gak bakal ditampilin di web kita

<title>

loe pasti tahukan artinya? tag ini berada didalam tag <head>, fungsinya sebagai judul browser yang digunakan. Coba liat bagian paling atas di browser ini, title yang gua gunakan "Tutorial":

 

<body>

naaahhh..... pada tag inilah yang kita tulis akan ditampilkan di web yang kita buat. Semua tulisan yang ingin loe tampilkan harus ditulis di antara tag ini.

 

Gimana...., mudah bukan. Untuk membuat HTML, kita hanya perlu menulis tag dan jangan lupa tag pentupnya (yang pake garis miring itu loohhh....).

Heading

Sekarang kita mencoba cara menggunakan heading. Di novel atau buku pelajaran kan sering diliat BAB 1, judul pelajaran, dll (biasanya dengan cetak tebal). Naahh... disitulah heading digunakan. Heading dalam html ada 6. Contoh di bawah ini adalah contoh penggunaan heading dan ukurannya (taruh di tag body yach...)

<h1>ini heading 1</h1>

<h2>ini heading 2</h2>

<h3>ini heading 3</h3>

<h4>ini heading 4</h4>

<h5>ini heading 5</h5>

<h6>ini heading 6</h6>

 

Pada setiap tag dalam html terdapat attribut. Atribut ini berfungsi membantu proses pemformatan dokumen yang dilakukan oleh tag yang bersangkutan. Contohnya adalah atribut "align", atau kalo di microsoft word seperti membuat rata kanan, rata kiri atau tengah. Atribut ini bisa digabung dengan heading lohh... Coba ketik dan coba dibrowser perintah berikut:

 

<h1 align="center">ini heading 1 dan posisinya ditengah loh...</h1>

 

Line Break

Fungsi tag ini adalah untuk membuat baris baru. Tag ini gak ada tag penutup. Kalo orang yang gak ngerti html dan kebiasaan menggunakan fasilitas yang ada di dreamweaver, frontpage, dll biasanya pindah baris dengan menekan enter. Kalo itu yang dilakukan maka itu akan membuat paragraf baru dan jarak pindahnya rada jauhan. Coba jalankan perintah ini:

 

 

Hi.. apa kabar <br> gimana kabar kamu? <br> kapan datangnya?

 

Horizontal Rule

Fungsinya untuk membuat garis horizontal. Perhatikan contoh berikut:

 

<hr width="50%" align="center"  size="10" color="red">

Atribut width berfungsi untuk mengatur panjang garis, defaultnya sepanjang sepanjang layar aktif. Atribut size untuk mengatur ketebalan garis (dalam pixel). Kalo atribut align dan color sudah tahu kan?

 

Paragraf

Tag <p> digunakan untuk membuat paragraf baru. Atribut yang paling sering digunakan adalah align. nilai yang digunakan adalah left (rata kiri), right (rata kanan), center (rata tengah) dan justify (rata kanan kiri). Contoh penggunaannya:

 

<p align="right">  <-- yang ini biar rata kanan, coba dech

 

Daftar/List

Ada beberapa macam jenis pembuatan list untuk dokumen html, beberapa diantaranya:

Unordered List

Daftar list yang digunakan adalah bullet. Secara default bentuk listnya adalah lingkaran hitam, tetapi jika ingin mengubahnya gunakan atribut type="circle" untuk list berbentuk lingkaran tapi bagian tengah tidak diarsir atau atribut type="square" untuk yang berbentuk kotak. Berikut ini adalah contoh penggunaannya:

 

 

<ul type="box">

  <li>visual basic

  <li>visual C++

  <li>visual foxpro

</u>

Ordered List

Yang ini list biasa yang berupa nomor. Model penomorannya bisa diubah sesuai kebutuhan dengan memakai atribut type

1 untuk model list 1, 2, 3, 4, ...

A untuk model list A, B, C, D, ...

a untuk model list a, b, c, d, ...

I untuk model list I, II, III, ...

i untuk model list i, ii, iii, ...

Untuk memulai dari nomor tertentu gunakan atribut start, perhatikan contoh:

 

<ol type=i start=4>

  <li>Perumusan Masalah

  <li>Pemecahan Masalah

  <li>Kesimpulan

</ol>

Definition List

List model ini adalah list yang memiliki keterangan untuk setiap item yang dibentuk. Perhatikan Contoh

 

<dl>

  <dt>Donal<dd>adalah bebek yang selalu sial

  <dt>Dodol<dd>adalah makanan khas sunda

  <dt>Donat<dd>adalah cincin gede yang bisa dimakan

</dl>

Font

Tag font berfungsi mengatur komposisi huruf dan penampakan huruf pada dokumen html. Ada tiga attribut yang paling sering digunakan untuk tag font. Size untuk mengatur ukuran huruf, face untuk mengatur jenis huruf yang ditampilkan (mis. Times New Roman), color untuk mengatur warna huruf (bisa menggunakan nama dari warna atau heksadesimal dari RRGGBB). Khusus attribut face bisa digunakan beberapa jenis huruf untuk dijadika alternatif. Perhatikan contoh:

 

<font color="#2267BA" size="2" face="Arial, Helvetica, sans-serif">

  Contoh penggunaan attribut font

</font>

 

Link

Ini adalah tag terpenting di dunia web. Bisa dibayangkan apa yang terjadi jika tidak ada fasilitas ini. Dengan adanya tag ini dokumen kita bisa saling terhubung. <a> itulah tagnya. Gunakan attribut href untuk membuat link. Ini contoh bila file buku tamu dalam satu folder dengan dokumen yang disisipi link ini:

 

<a href="guestbook.htm">klik di sini untuk mengisi buku tamu </a>

 

Selain menghubungkan/menyambungkan dengan dokumen lain, anda juga dapat melakukan link ke bagian lain di dokumen anda. Caranya berikan attribut name pada tag <a> untuk menandai suatu daerah, metode ini sering disebut Anchor. Sebagai contoh:

 

<a name="tanda1">Bagian ini ditandai</a>

Langkah selanjutnya, untuk membuat link ke bagian yang telah ditandai, buat kode sebagai berikut:

 

 

<a href="#tanda1"> Menuju kebagian yang telah ditandai</a>

 

Image

Web tanpa gambar rasanya kurang lengkap. Tahu kah kalian cara menampilkan gambar? Yup, betul gunakan tag <img>, contohnya:

 

<img src="gambar1.gif">

. Tag ini bisa digabungkan dengan tag <a> untuk membuat link pada gambar. Beberapa atribut yang sering digunakan adalah sebagai berikut:

alt

Untuk memberikan alternatif teks jika browser yang digunakan tidak mendukung penampilan file gambar

width dan length

Mengatur dimensi image dan dan lebar image. Bila tidak digunakan maka ukuran image akan sesuai dengan ukuran image sebenarnya.

align

Mengatur posisi gambar relatif terhadap teks/dokumen.

hspace dan vspace

Dapat digunakan untuk mengatur frame yang mengelilingi gambar.

 

Contoh penggunaan tag image adalah sebagai berikut:

 

<img src="gambar1.gif" alt="gambar1" align="left" hspace="50" vspace="1">

 

Huff... kelar juga tutorial 2-nya, gimana, gampang kan? Kalo udah nguasain semuanya kamu bisa ngelanjutin belajar menggunakan frame, tabel dan membuat form.

Sekarang kita ngebahas tentang "frame". Dengan menggunakan frame memungkinkan browser dibagi-bagi menjadi beberapa bagian yang masing-masing berdiri sendiri dan tidak salingm mempengaruhi. Untuk membuat frame diperlukan tiga hal penting; tag <frameset>, tag <frame> dan file-file untuk masing-masing framenya.

 

Jika kita membuat tiga frame, maka 4 file yang terlibat. Masing-masing file menampilkan satu file html biasa dan satu file lain adalah file induknya (tempat men-set frame). File induk ini sama dengan file html biasa tetapi tag <body> di ganti dengan tag <frameset>

 

Atribut-atribut yang dimilki tag <frameset>

rows

Attribut ini untuk menentukan baris yang membuat frame secara horizontal. Bila ingin membagi menjadi tiga maka:

 

<html>

  <head></head>

  <frameset rows="10%, 70%, 20%">

     <frame>

     <frame>

  </frameset>

</html>

Untuk nilai rows bisa dalam ukuran pixel, persentase atau bila ingin membagi rata menjadi tiga gunakan rows="*, *, *"

cols

Attribut ini untuk menentukan kolom yang membuat frame secara vertikal. contoh:

 

<frameset cols="200, *">

 

Perhatikan kembali contoh row di atas. Setelah mendefinisikan tag <frameset> ada tag <frame> di dalamnya. Nah tag <frame> inilah yang mengatur bagaimana dokumen ditampilkan. Attribut yang dimiliki frame adalah sebagai berikut:

src

fungsi attribut ini menunjukkan dokumen yang akan ditampilkan dalam frame. Contoh:

 

 

<html>

  <head>

  </head>

  <frameset cols="20%, *">

    <frame src="dokumen1.htm" name="kiri">

    <frame src="dokumen2.htm" name="kanan">

  </frameset>

</html>

name

Attribut ini memberi nama suatu frame. Penamaan frame diperlukan agar frame dapat dijadikan target link (dengan tag <target>) dari dokumen lain.

marginwidth dan marginheight

Dipergunakan untuk mengatur margin frame dalam pixel

scrolling

Attribut ini menentukan apakah frame akan diberi scroll bar atau tidak. Nilai yang diberikan untuk attribut ini berupa pernyataan yes, no atau auto

noresize

Dipergunakan untuk mencegah frame agar tidak dapat diubah ukurannya oleh pengguna dokumen

target

Dipergunakan untuk membuat link dari suatu dokumen ke frame-frame tersebut tanpa mempengaruhi frame lain. Contoh:

 

<html>

<head>

</head>

<body>

  ini dokumen 1

  <a href="dokumen3.htm" target="kanan">dokumen3</a>

</body>

</html>

Bila penggalan dokumen tersebut dijalankan, file dokumen "dokumen3.htm" akan ditampilkan pada frame yang bernama "kanan", sedangkan frame lain tidak berpengaruh.

base target

Bila semua link yang ada pada suatu dokumen mau ditampilkan di frame yang sama, bisa mempergunakan perintah <base target> untuk mengganti attribut target.

 

<base target="kanan">

  <a href="dokumen3.htm">dokumen 3</a>

  <a href="dokumen3.htm">dokumen 3</a>

border

Secara default frame ditampilkan dengan garis pemisah, untuk menghilangkan garis itu gunakan attribut ini.

 

<frame src="dokumen1.htm" border=0>

 

Ada satu lagi jenis frame yaitu iframe. iframe memungkinkan kita membuat frame yang mengambang, frame ini berlaku mirip seperti text box, jika browser melakukan scroll maka frame ini juga ikut ter-scroll. Contoh:

 

<iframe name="nama_frame" src="url" rows=x cols=x></iframe>

 

Sekian pembahasan tentang frame. Sebenarnya frame udah pada ditinggalin karena ruang penulisan menjadi sempit dan kurang bebas berkreasi. Penggunaan tabel akan lebih baik. Tapi untuk beberapa hal frame masih bisa diandalkan seperti membuat web yang sifatnya formal.

Tabel adalah salah satu komponen representasi data yang sering digunakan untuk mereprentasikan data yang seragam. Tapi kenyataannya sekarang banyak (gua rasa hampir semua) menggunakan tabel untuk membuat desain web. Tag yang digunakan adalah <tabel>. Perhatikan contoh berikut:

 

<html>

 

<head></head>

 

<body>

 

  <table border="1">

 

    <tr>

 

      <td>Kolom 1 baris 1</td>

 

      <td>Kolom 2 baris 1</td>

 

      <td>Kolom 3 baris 1</td>

 

      <td>Kolom 4 baris 1</td>

 

    </tr>

 

    <tr>

 

      <td>Kolom 1 baris 2</td>

 

      <td>Kolom 2 baris 2</td>

 

      <td>Kolom 3 baris 2</td>

 

      <td>Kolom 4 baris 2</td>

 

    </tr>

 

  </table>

 

</body> 

 

</html>

 

Untuk membangun komponen pada sebuah tabel disediakan tag khusus yaitu:

Tag <tr> dan </tr>

Tag ini digunakan untuk mendefinisikan sebuah baris pada sebuah tabel. Tag <tr> memiliki attribut align untuk mengatur alignment horizontal dan valign untuk mengatur alignment vertikal

Tag <td> dan </td>

Tag ini digunakan untuk mendefinisikan kolom pada satu baris yang mengapitnya. Hal ini mengindikasikan bahwa tag <td> harus selalu berada diantara tag <tr> dan </tr>

 

Tag <table> memiliki banyak attribut, diantaranya adalah:

width

Atyribut ini untuk menyatakan lebar tabel. Apabila dinyatakan dalam %, maka lebar ditentukan dari persentase terhadap layar. Selain itu atribut ini dapat digunakan dengan tag <td> untuk mengatur lebar kolom.

cellspacing

Attribut cellspacing menyatakan jarak antar sel satu dengan sel lainnnya (satuannya pixel)

cellpadding

Attribut cellpadding menyatakan jarak antara isi sel dengan batas dari sel tersebut (satuannya pixel)

 

Perhatikan contoh berikut:

 

<table width="75% "border="1" cellpadding="4" cellspacing="5">

 

  <tr>

 

    <td align="center" valign="middle">Kolom 1</td>

 

    <td align="left">Kolom 2</td>

 

    <td align="right">Kolom 3</td>

 

  </tr>

 

  <tr>

 

    <td height="50" valign="top">Kolom 4</td>

 

    <td valign="bottom">Kolom 5</td>

 

    <td valign="middle">Kolom 6</td>

 

  </tr>

 

</table>

rowspan dan colspan

Rowspan berfungsi untuk menggabungkan beberapa buah baris menjadi satu. Sedangkan colspan digunakan untuk menggabunngkan beberapa kolom menjadi satu. Attribut ini dipakai berdasarkan tag <td>. Sebagai contoh:

 

<table width="75% "border="1" cellpadding="4" cellspacing="5">

 

  <tr>

 

    <td align="center" valign="middle" rowspan="2">Kolom 1 dan kolom4</td>

 

    <td align="left" colspan="2">Kolom 2 kolom3</td>

 

  </tr>

 

  <tr>

 

    <td valign="bottom">Kolom 5</td>

 

    <td valign="middle">Kolom 6</td>

 

  </tr>

 

</table>

 

Untuk lebih memahami tentang tabel, kamu bisa membuatnya dulu di excel kemudian terapkan dengan menggunakan html. Kamu juga bisa membuat table di dalam tabel. Selamat mencoba.

Nyampe juga kepembahasan terakhir, merancang form. Kalian semua punya email kan? Naahhh... pas pertama kali ngedaftar kan disuruh ngisi biodata. Tempat ngisinya itulah yang disebut form. Untuk mengirimkan data keserver biasa digunakan method get atau post. Misal <form action=url method=post>. Berhubung ini hanya simulasi jadi gak bisa ngirim.

 

Ada beberapa elemen form yang dapat kita pergunakan dengan tag <form>, textarea, select dan input. Akan dibahas satu persatu: (ingat loh, semuanya berada di antara tag <form> </form>

 

textarea

Ini digunakan user memasukkan data yang panjang. Contohnya pemberian komentar pada bukutamu. Perintah yang digunakan:

 

<textarea name="komentar" rows=n cols="n">

Name menyatakan nama data yang dimasukan ke dalam textarea ini (seperti variabel yang menampung isi yang dimasukkan user). Cols dan rows untuk menyatakan lebar dan jumlah baris (secara default cols bernilai 40 karakter dan rows 4 baris).

 

select

Yang ini contohnya combo box atau listbox. Jadi user hanya bisa memilih satu pilihan saja atau beberapa jika di tambah pernyataan multiple.

 

<select name="pilih" size=4>

  <option selected value="sbagus">Sangat Bagus

  <option value="bagus">Bagus

  <option value="biasa">Biasa

  <option value="jorek">Jorek

</select>

Bila size dimasukkan nilai 1, maka akan berbentuk combo box, tetapi bila > 1 akan berbentuk listbox. Pernyataan selected adalah pilihan default jika program dijalankan. Value untuk menentukan nilai yang akan ditetapkan pada suatu item. Penambahan kata "multiple" pada tag <select> menyebabkan user bisa memilih lebih dari satu.

 

Input

Nahh... elemen ini lah yang paling sering digunakan. Apa saja yang bisa dilakukannya? Akan dibahas di bawah ini:

text

Dipergunakan untuk menampilkan satu kotak teks saja. Bentuknya sama seperti kita ngisi nama pas daftar buat email.

 

<input type="text" name="nama" size=20 maxlength=15>

Size berfungsi untuk menentukan panjang text box. Sedangkan maxlength untuk menentukan panjang maksimum karakter yang dapat dimasukkan sebagai data.

radio

Hhmm... contohnya seperti memilih jenis kelamin. Kita hanya bisa milih laki-laki atau perempuan.

 

<form>

  Jenis kelamin :

  <input type="radio" name="jk" value="lk">Laki-Laki

  <input type="radio" name="jk" value="pr">Perempuan

</form>

Bila ditambah pernyataan selected di tag <input>, maka itu akan dijadikan default.

checkbox

Contohnya seperti memilih hobi. Jadi bisa dipilih lebih dari satu.

 

<form>

  Apa hobi anda:

  <input type="checkbox" name="pilihan" value="tidur">tidur

  <input type="checkbox" name="pilihan" value="molor">molor

  <input type="checkbox" name="pilihan" value="sleep">sleep

  <input type="checkbox" name="pilihan" value="turu">turu

</form>

submit

Yang ini biasa ditaruh diakhir form. Pas selesai mengisi biodata kita biasa menekan tombol submit untuk mendaftar atau tombol reset untuk mengulang kembali.

 

<form>

  <input type="submit" value="kirimkan data">

  <input type="reset" value="hapus formulir">

</form>

Password

Kalo yang ini sudah tahu kan? Contohnya pas kita masukkan password email.

 

<input type="password" name="textfield">

 

Yup, kelar juga pembahasan tentang html. Untuk pendalamannya kalian bisa belajar menggunakan css kemudian mempelajari javascript dan yang terakhir bahasa yang sifatnya server side.

kembali ke halaman muka