Sabtu, 03 Desember 2011

HTML

A. PENGERTIAN DAN STRUKTUR DASAR HTML

HTML adalah suatu bahasa pemrograman yang merupakan bahasa markup (penandaan)
terhadap sebuah dokumen teks. biasanya ditandai dengan tanda lebih kecil (<)
dan tanda lebih besar (>). HTML dapat dibuat mengunnakan teks editor sederhana seperti:
Notepad, Ms. Frontpage, Macromedia dreamiver, dan lain-lainnya.

berikut ini merupakan struktur dasar HTML :

<html>
<head>
<title> ..... </title>
</head>
<body>
...........................
</body>
</html>


keterangan :

<HTML></HTML> = Jenis dokumen. Terdapat pada awal dan akhir dari file HTML
<TITLE></TITLE> = Judul. (Harus selalu terdapat pada mukadimah)
<HEAD></HEAD> = keterangan umum, seperti judul dsb. (mukadimah header)
<BODY></BODY> = Batang tubuh atau isi dari file HTML.

B. TAG DAN ATTRIBUT PADA HTML

Tag-tag yang digunankan untuk menformat dokumen HTML, antara lain :
  • Tag <BR> =  Membuat baris baru (pengganti enter) dan tidak memerlukan penutup </BR> 
  • Tag <P> = Untuk memulai paragraf baru, tidak memerlukan penutup </P> 
  • Tag <Hn> = Heading sebuah dokumen. Nilai n bernilai 1 hingga 7 
  • Tag <PRE> = Untuk membuat tampilan dokumen HTML pada browsew sama dengan tampilan pada teks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR> jadi tidak berlaku lagi. Memerlukan penutup </PRE>
  • Tag <CENTER> = untuk teks rata tengah. mengunakan penutup </CENTER>.
  • Tag <B> = Untuk memampilkan atau membuat huruf tebal. Memerlukan penutup </B>. 
  • Tag <I> = Untuk memampilkan atau membuat huruf miring. Memerlukan penutup </I>. 
  • Tag <U> = Untuk memampilkan atau membuat huruf bergaris bawah pada teks. Memerlukan penutup </U>. 
  • Tag <TT> = untuk menampilkan huruf seperti huruf mesin ketik. memerlukan penutup </TT>. 
  • Tag <STRIKE> = Untuk menampilkan garis horozintal pada bagian tengah huruf. Memerlukan penutup </STRIKE>.
  • Tag <BIG> = Untuk menampilkan ukuran huruf yang lebih besar. Memerlukan penutup </BIG> .
  • Tag <SMALL> = Untuk menampilkan ukuran huruf yang lebih kecil. Memerlukan penutup </SMALL>. 
  • Tag <SUB> = Untuk menampilkan teks subscript (menurunkan teks 1/2 ke bawah). Memerlukan penutup </SUB> 
  • Tag <SUP> = Untuk menampilkan teks superscript (menaikan teks 1/2 ke atas). Memerlukan penutup </SUP>. 
  • Tag <HR> = Untuk membuat garis batas horizontal. 
  • Tag <FONT> = Digunakan untuk menentukan ukuran, jenis, dan warna pada teks. Memerlukan penutup </FONT> 
  • Tag <MARQUEE> = Digunakan untuk memberi efek berjalan pada teks. Memerlukan penutup </MARQUEE>. 
  • Tag <IMG> = untuk menambahkan gambar. Tidak memerlukan penutup </IMG>.

 Attribut-attribut  :
  • Tag <BODY> =
    • ALINK, Menentukan warna link aktif. 
    • BACKGROUD, untuk merjadikan URL atau direktori dari file gambar sebagai  latar belakang dokumen. 
    • BGCOLOR, untuk menentukan warna latar belakang dokumen. 
    • BGPROPERTIES, jika nilai attribut ini diisi "FIXED" maka gambar latar belakang tidak ikut tergulung. 
    • LINK, untuk menentukan warna link yang belum dikunjungi. 
    • TEXT, untuk menentukan warna teks. 
    • VLINK, untuk menentukan warna link yang belum dikunjungi.
      example:

      <html>
      <head>
      <title> .....</title>
      </head>
      <BODY BACKGROUND="......"> ..... </BODY>
      </html>
  • Tag <HR> =
    • ALIGN, merupakan posisi vertikal garis pemisah. Nilainya : LEFT, RIGHT, atau CENTER. 
    • WIDTH, lebar garis batas. Nilainya berupa pixel atau persen (%) dari jendela browser. 
    • SIZE, untuk menentukan tebal garis batas. Nilainya : 1 hingga 7. 
    • NOSHADE, untuk menonaktifkan efek tiga dimensi. 
    • COLOR, untuk menentukan warna garis batas.
      example : 

<html>
<head>
<title> ..... </title>
</head>
<body>
...........................
<hr width=...% size="..." color="..." align="...">
</body>
</html>
  • Tag  <FONT> =
    • FACE, untuk menentukan tipe atau jenis teks. 
    • SIZE, untuk menentukan ukuran teks. 
    • COLOR, untuk menentukan warna dari teks.
      example : 

<html>
<head>
<title> ..... </title>
</head>
<body>
<FONT FACE"..."  SIZE="..."  COLOR="..."> ......</FONT>
...........................
</body>
</html>
  • Tag <IMG> =
    • SCR, menunjukkan URL atau direktori file gambar. 
    • ALIGN, posisi teks disekitar gambar. nilainya : TOP atau MIDDLE. 
    • WIDTH, lebar gambar dalam pixel atau persen (%). 
    • HEIGHT, Tinggi gambar dalam pixel atau persen (%). 
    • ALT, menampilkan teks pengganti jika gambar tidak dapat ditampilkan. example :
<html>
<head>
<title> ..... </title>
</head>
<body>
...........................
<IMG SCR="nama_gambar . Extention"  WIDTH="...%"  HEIGHT="...%">
</body>
</html>

C. BULLET AND NUMBERING

 TAG <OL> = ORDER LIST
  •  struktur dasar :
    <OL>
    <LI> ... </LI>
    </OL>

    Type <OL> terdiri : I, A, i, a, 1.
    TAG <uL> = UNORDER LIST
    struktur dasar :

    <UL>
    <LI> ... </LI>
    </UL>

  • Type <UL> terdiri : circle, disc, squre.


D. TABLE
  •  Tag <TABLE> : untuk mendefinisikan sebuah tabel. Memerlukan penutup </TABLE> 
  • Tag <TR> : untuk mendefinisikan baris tabel. Memerlukan penutup </TR> 
  • Tag <TH> : untuk mendefinisikan judul tiap kolom atau baris. Memerlukan penutup </TH> 
  • Tag <TD> : untuk mendefinisikan isi tiap kolom. Memerlukan penutup </TD>
struktur dasar table :

<TABLE>

<TR>

<TD> ..... </TD>

</TR>

</TABLE>

Attribut-attribut pada table :

  • ALIGN, posisi horizontal tabel. 
  • BACKGROUND, menentukan gambar latar belakang tabel. 
  • BGCOLOR, menentukan warna latar belakang tabel. 
  • BORDER, menentukan tebal bingkai. 
  • BORDERCOLOR, menentukan warna pada bingkai tabel.
  • CELLSPACING, jarak spasi antar sel. 
  • CELLPADDING, jarak isi sel dengan bingkai. 
  • HEIGHT, tinggi tabel. 
  • WIDTH, lebar tabel. 
  • VALIGN, menentukan posisi vertikal teks dalam sel.
    example :
<html>
<head>
<title> ..... </title>
</head>
<body>

<TABLE BORDER="..." BORDERCOLOR="...">
<TR>
<TD> .... </TD>
</TR>
</TABLE>

</body>
</html>
E. FORM
    Adalah sebuah untuk meminta informasi dari user untuk kemudian diolah. Tipe input yang dapat dibuat:
  • text, untuk membuat kotak teks.
  • password, untuk membuat kotak teks, tetapi semua karakter yang ditampilkan  akan berupa tanda *.
  • check box, untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.
  • radio, untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.
  • reset, untuk membuat tombol yang berfungsi menghapus semua isian form yang telah diberikan.
  • submit,  untuk membuat tombol yang berfungsi untuk mengirimkan data form agar diolah.

Tag-tag yang diperlukan :
  • Tag <FORM> = digunakan untuk mendefinisikan sebuah form. Attribut-attributnya :
    • METHOD, menentukan metode pengolahan form. 
    • ACTION, menentukan URL atau direktori dari file yang digunakan untuk  mengolah  form.
  • Tag <TEXTAREA> = digunakan untuk membuat sebuah kotak teks multi baris. Attribut-attributnya :
    • NAME, mendefinisikan nama objek textarea
    • ROWS, menentukan jumlah baris textarea 
    • COLS,menentukan lebar textarea.
      example :
<html>
<head>
<title> ..... </title>
</head>
<body>

<FORM>
<TEXTAREA NAME="..." ROWS="..." COLS="..."> 
.....
</TEXTAREA>
</FORM>

</body>
</html>
  • Tag <SELECT> = digunanakan untuk membuat sebuah daftar pilihan. Attribut-attributnya :
    • NAME,  mendefinisikan  nama dari objek select.
    • SIZE,  menentukan berapa pilihan yang akan ditampilkan. 
    • MULTIPLE, mengizinkan untuk memilih lebih dari satu.
      example :
<html>
<head>
<title> ..... </title>
</head>
<body>

<FORM>
<SELECT NAME="..." SIZE="..."> 
.....
</SELECT>
</FORM>

</body>
</html>
  • Tag <INPUT> = digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol,dll. Attribut-attributnya :
    • NAME, mendefinisikan nama dari objek imput. (kecuali untuk tipe submit dan clear)
    • SIZE, menentukan ukuran kotak teks.
    • MAXLENGHTH, menentukan jumlah maksimum karakteryang dapat dimasukkan pada kotak teks.
    • VALUE, untuk :
      • kotak teks, menetukan teks yang ditulis.
      • Cheks box  dan radio, menentukan nilai item yang dipilih.
      • Submit dan reset, menentukan teks yang ditulis pada tombol.
    • HECKED, digunakan untuk check box dan radio menentukan pilihan yang dipilih secara default. ( pada check box dan radio )
    • TYPE,menentukan tipe input yang dibuat.
      example :
<html>
<head>
<title> ..... </title>
</head>
<body>

<FORM>
....... : <INPUT TYPE="..."  NAME="..." SIZE="..."> 
....... : <INPUT TYPE="..."  NAME="..." SIZE="...">

<INPUT TYPE="..."  NAME="..." SIZE="..." VALUE="...">    .........
<INPUT TYPE="..."  NAME="..." SIZE="..." VALUE="...">    .........
</FORM>

</body>
</html>


 SELAMAT MENCOBA



    





Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)