Docstoc

Hypertext Markup Language _HTML_

Document Sample
Hypertext Markup Language _HTML_ Powered By Docstoc
					           Hypertext Markup Language
                   (HTML)
1. Pengenalan HTML

1.1   Apakah HTML

HTML adalah ringkasan daripada Hypertext Markup Language.
Fungsinya adalah untuk mengatur struktur tampilan dokumen
tersebut dan juga untuk menampilkan "links" atau sambungan ke
lokasi di internet yang lain. Biasanya sebuah dokumen HTML
disimpan dengan menggunakan nama belakang .html (bagi sistem
operasi UNIX, Macintosh® dan Windows95®) atau .htm (bagi
Windows® 3.1).

1.2. Bagaimana Cara Kerja HTML

HTTP merupakan protokol yang digunakan untuk mentransfer
data atau dokumen antara web server ke web browser
(Netscape, Internet Explorer dll). Dan protokol ini sewaktu
melakukan transfer, dokumen atau data webnya ditulis atau
dengan menggunakan format HTML. HTML disebut dengan
markup language karena HTML berfungsi untuk memperindah
file tulisan (text) biasa untuk dapat dilihat pada web browser-web
browser yang ada.

2. Membuat HTML

2.1 Sintaks Dasar HTML

File HTML minimal terdiri dari perintah berikut:

      <HTML>
      <BODY>

      Ini file HTML pertama saya. Klik "back button" pada browser
      untuk kembali.

      </BODY>
      </HTML>

Selanjutnya buka notepad anda. Ketik ulang kode di atas.
Kemudian simpan file anda dengan ekstension html, contohnya
simpan dengan nama file1.html. Setelah itu buka file tersebut
dengan browser favorit anda, mungkin Internet Explorer atau
Netscape.
2.2 Manipulasi Teks
Berikutnya saya akan memberikan contoh tentang manipulasi
teks. Perhatikan beberapa tag yang dapat digunakan, seperti:

     <B>Untuk membuat huruf tebal.</B>
     <I>Untuk membuat huruf miring.</I>
     <U>Untuk membuat garis bawah.</U>

Kita juga dapat dapat menggabung lebih dari satu tag
sekaligus, sebagai contoh :

<B><U>membuat huruf tebal bergaris bawah</U></B>.

Hanya jangan lupa jika tag pembuka berada di dalam, maka
tag penutupnya juga sebaiknya di dalam, seperti tag <U> di
atas. Baik kita lihat kembali contoh berikut:

     <FONT COLOR="red">Ini warna merah.</FONT>
     <FONT COLOR="blue">Ini warna biru.</FONT>
     <FONT COLOR="green">Ini warna hijau.</FONT>
     <FONT COLOR="yellow">Ini warna kuning.</FONT>
     <FONT>Ini warna hitam sebagai default. </FONT>

     <FONT SIZE="1">Ini ukuran 1.</FONT>
     <FONT SIZE="2">Ini ukuran 2.</FONT>
     <FONT SIZE="3">Ini ukuran 3.</FONT>
     <FONT SIZE="4">Ini ukuran 4.</FONT>
     <FONT SIZE="5">Ini ukuran 5.</FONT>
     <FONT SIZE="6">Ini ukuran 6.</FONT>
     <FONT SIZE="7">Ini ukuran 7.</FONT>

     <FONT FACE="Arial">Ini memakai font arial.</FONT>
     <FONT FACE="Arial Black">Ini font arial black.</FONT>
     <FONT FACE="Comic Sans MS"> Font comic sans MS.</FONT>
     <FONT FACE="Courier New">Ini font courier new.</FONT>
     <FONT FACE="Helvetica">Ini font helvetica.</FONT>
     <FONT FACE="Impact">Ini font impact.</FONT>
     <FONT FACE="Times New Roman">Ini times new roman.</FONT>
     <FONT FACE="Verdana">Ini memakai font verdana.</FONT>

     <FONT SIZE="4" FACE="Comic Sans MS"
     COLOR="green"><B> Ini huruf tebal, memakai font Comic
     Sans MS, berukuran 4, berwarna hijau. </B></FONT>

Perhatikan bahwa urutan antara FACE, SIZE, dan COLOR di
dalam tag FONT tidak memiliki aturan baku, dalam arti anda
bebas menulis mana duluan. Selain itu anda dapat menulis
dengan huruf besar, seperti "FONT" maupun dengan huruf kecil,
seperti "font". Keduanya akan memberikan hasil yang sama.
Anda juga dapat mengubah ukuran huruf dengan tag heading,
yaitu <H1> sampai <H6>, di mana <H1> adalah yang terbesar,
dan <H6> adalah yang terkecil. Perhatikan contoh berikut:

    <H1>Ini menggunakan Heading 1</H1>
    <H2>Ini menggunakan Heading 2</H2>
    <H3>Ini menggunakan Heading 3</H3>
    <H4>Ini menggunakan Heading 4</H4>
    <H5>Ini menggunakan Heading 5</H5>
    <H6>Ini menggunakan Heading 6</H6>

Dalam memanipulasi tulisan, harus mengenal tag berikut:

    <CENTER> Membuat tulisan berada di tengah.</CENTER>
    <BR>: Tag ini berfungsi untuk membuat baris baru.
    <P>: Tag ini untuk membuat paragraf baru.</P>

Perhatikan Contoh berikut :

    <HTML>
    <BODY>
    <H1>Pemakaian tag</H1>

    <P align="right"><FONT COLOR="red"><B> Penggunaan tag
    P align="right" yang menyebabkan keseluruhan paragraf
    menjadi rata kanan. Penggunaan tag FONT COLOR="red"
    menyebabkan seluruh huruf berwarna merah, dan tag B
    menyebabkan semua huruf tebal. </B></FONT></P>

    Sedang kalau paragraf ini memberi contoh <BR>
    pengunaan tag BR. <BR>
    Dapat anda lihat walaupun masih tersisa banyak space di
    kanan, dengan <BR>
    menggunakan <BR>
    tag BR tulisan dipaksa membuat baris baru. Tanpa tag BR
    tulisan akan terus mengalir membentuk paragraf yang wajar
    seperti sekarang. Tulisan tanpa tag BR ini hanya akan
    membentuk baris baru manakala space sudah habis terisi.

    <P align="center">Sekarang adalah contoh penggunaan tag P
    align="center". Tag ini menyebabkan tulisan menjadi berada di
    tengah, seperti dapat anda lihat sekarang. Juga anda mungkin
    dapat merasakan perbedaan antara tag P dengan tag BR.
    Kalau tag BR hanya menyebabkan pindah ke baris baru, tag P
    menyebabkan lompat membentuk paragraf baru. </P>

    </BODY>
    </HTML>
2.3 Bullet and Numbering
Membuat Bullet

Untuk membuat web, gunakan tag <UL> (unordered list).
Formatnya ialah:

     perkara lis anda
     <UL>
     <LI> item satu
     <LI> item dua
     <LI> item tiga
     </UL>

Lis tersebut akan kelihatan seperti berikut:

     perkara lis anda

          item satu
          item dua
          item tiga

Membuat Numbering

Anda boleh mencipta lis bernombor dengan menggunakan
tag <OL> (ordered list) tag. Formatnya ialah:

     Daftar item anda

     <OL>
     <LI> item satu
     <LI> item dua
     <LI> item tiga
     </OL>

Lis itu akan kelihatan seperti ini:

     Daftar Item anda

          1. item satu
          2. item dua
          3. item tiga
List Definasi

Cara paling mudah untuk menerangkan Lis Definasi ini ialah
dengan mengemukakan anda satu

contoh: Ia kelihatan seperti ini:

Kereta
     Ialah sebuah kenderaan beroda empat dan menggunakan
     kuasa enjin. Ia boleh membawa biasanya empat orang
     penumpang selain drebar.
Motorsikal
     Ialah sebuah kenderaan beroda dua yang juga menggunakan
     kuasa enjin. Ia hanya boleh membawa seorang penumpang
     selain pemandu.

Ini adalah lis yang serupa tetapi dengan disertakan tag-
tagnya:

<dl>
 <dt>Kereta
    <dd>Ialah sebuah kenderaan beroda empat dan menggunakan
      kuasa enjin. Ia boleh membawa biasanya empat orang
      penumpang selain drebar.
 <dt>Motorsikal
    <dd>Ialah sebuah kenderaan beroda dua yang juga
menggunakan
      kuasa enjin. Ia hanya boleh membawa seorang penumpang
      selain pemandu.
</dl>
2.4 Hyperlink
Hyperlink Dalam Dokumen Yang Sama

Amat mudah untuk mencipta satu `sambungan' di dalam
dokumen yang serupa yang hanya boleh dilakukan secara
mengklik di tetikus. Terdapat dua langkah yang perlu.

  1. SELITKAN TARGET titik dimana anda hendak melompat.
     Target tersebut akan kelihatan seperti berikut:

     <A NAME="nama_target_di_sini">teks yang ditarget </A>

  2. SELITKAN SAMBUNGANNYA untuk diklik yang akan
     menghasilkan lompatan tersebut. Sambungan itu akan
     kelihatan seperti ini:

     <A HREF="#nama_target_di_sini_">Teks Yg Disambung </A>

Teks Yang Disambungkan itu akan kelihatan bergaris dan di
dalam warna yang ditentukan pada awalnya. Apabila anda
mengklik di Sambungan tersebut, browser melompat ke teks
yang ditarget.

Gunakan VIEW SOURCE browser anda untuk melihat tag-tag
HTML sambungan-sambungan dan teks yang ditarget pada
kepala Indeks.

Hyperlink ke Satu File Yang Lain Di dalam Komputer
yang sama

Juga satu hal yang mudah untuk mencipta satu sambungan yang
akan menyebabkan browser anda membuka fail yang lain di
dalam server yang sama. Format tag untuk jenis ini adalah:

<A HREF="Folder dan nama fail">Teks Penghubung </A>

 Jika fail itu berada di direktori yang serupa, hanya perlu
tentukan nama failnya sahaja. Jika fail yang dihubungkan itu
berada di direktori yang berbeza maka tuliskan "direktori penuh"
dimana fail tersebut berada. Contohnya fail yang sedang
digunakan ialah "Asia.html" dan nama fail yang hendak dipanggil
ialah    "Surabaya.html"    yang    berada     di    subdirektori
"Asia/Indonesia", maka tagnya adalah seperti berikut:

<A HREF="/Indonesia/Surabaya.html"</A>
Hyperlink Ke Dokumen Di Server Yang Berlainan

Mencipta satu hubungan yang melompat ke dokumen di
server yang berlainan di dalam satu rangkaian internet
adalah serupa dengan di atas. Bezanya ialah "direktori" yang
menentukan kedudukan fail digantikan dengan URL (uniform
resource locator, or "internet address").

Hubungannya:

 <A    HREF="http://start.at/ittc">Pergi   Ke   "Web    Site
Integrated Web Design"</A>

akan membawa anda ke halaman yang dipanggil Integrated
Web Design yang terletak di http://start.at/ittc

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:13
posted:7/26/2011
language:Malay
pages:7