Jumat, 23 Agustus 2013

Dasar-dasar HTML

Mengenal Dasar-Dasar HTML
FrontPage menggunakan bahasa standar web, yaitu HTML (Hypertext Markup Language). Meskipun program FrontPage menggunakan sistem WYSIWYG yang sangat memudahkan kita, tetapi pengenalan tentang dasar HTML dan komponen Form hendaklah kita pahami juga.
1. Struktur HTML
Perintah HTML yang biasa disebut Tag, digunakan untuk menentukan tampilan dari dokumen HTML. Struktur dasar dari HTML adalah:
- HTML
Setiap halaman web harus diawali dan ditutup dengan tag HTML. <html> … </html>. Tag HTML tidak case sensitif, jadi bisa kita gunakan huruf besar ataupun huruf kecil, keduanya akan menhasilkan output yang sama.
- HEAD
Bagian header menggunakan tag <head> … </head>. Di dalam bagian ini biasanya terdapat tag <title> … </title> yang menampilkan judul dari halaman web ke dalam title web browser. Title ini akan disimpan pada saat kita menggunakan fasilitas Bookmark dan akan digunakan sebagai keyword pada saat kita melakukan pencarian.
- BODY
Di antara tag <body> … </body> digunakan untuk menampilkan text, image, link, dan semua yang ditampilkan pada halaman web kita.
2. Elemen Dasar HTML
Elemen-elemen dasar HTML di antaranya adalah:
- Teks Elemen:
<p> … </p>       : format paragraf
<br>                   : membuat baris baru
<hr>                   : membuat garis horizontal
<pre> …</pre>  : menampilkan format teks sesuai dengan tampilan desain
<font> … </font>       : memformat seluruh properties font
<h> … </h>       : mengubah ukuran font
<b> … </b>       : bold (font tebal)
<i> … </i>         : italic (font miring)
<u> … </u>       : underline (font bergaris bawah)
- Link, Image, dan List Elemen:
<a href=”alamat web”> … </a>   : ini adalah sebuah link
<a href=mailto:alamat e-mail> … </a>           : link ke alamat e-mail
<img scr=”gambar” align=? border=?>          : menampilkan gambar
<ul><li> … </li></ul>                  : menampilkan list bullets
<ol><li> … </li></ol>                  : menampilkan list nomor
- Tabel:
<table> … </table>     : tag tabel
<tr> … </tr>         : tag baris
<th> … </th>        : tag judul tabel
<td> … </td>       : tag kolom
Mengenal Komponen Form
Fungsi dari komponen form adalah untuk mendapatkan data atau memperoleh feedback dari user mengenai website kita. Semua kontrol biasanya diletakkan di dalam tag <form> … </form> tapi bisa juga di luar tag. Untuk menambahkan kontrol, gunakan tag <input>.
Perhatikan contoh di bawah ini.
<form action=”” method=”post/get”>
<input type=”text” name=”nama” value=”Samsudin” size=”30” maxlength=”10”>
<input type=”password”>
<input type=”checkbox”>
<input type=”radio”>
<input type=”submit”>
<input type=”reset”>
<select>
   <option>Apel
   <option selected>Pisang
   <option>Jeruk
</select>
<textarea name=”komentar” rows=”60”
Cols=”20”></textarea>
</form>

Tidak ada komentar:

Posting Komentar