Selasa, 10 Januari 2012

Dokumen HTML, Head, Body

setelah kita sudah pengenalan sekarang pembuatan web di mulai.....
 A.1. PROGRAM EDITOR HTML

            Untuk  membuat dokumen HTML, anda perlu mengetahui dan mempelajari tag-tag yang digunakan untuk menandai bagian-bagian dari suatu dokumen HTML. Anda dapat menggunakan program editor teks biasa seperti Notepad untuk aplikasi Windows atau Sidekick dan WordStar dalam format Non Document untuk aplikasi DOS.

            Semua dokumen HTML harus disimpan sebagai file teks murni. Ada dua macam ekstensi file yang dapat digunakan, yaitu ekstensi file “.html”  ( untuk sistem operasi UNIX atau WINDOWS 95) atau “.htm” ( untuk sistem operasi DOS/WINDOWS 3.x)




           

A.2. STRUKTUR DOKUMEN HTML


            Dalam  dokumen HTML, elemen dibagi menjadi tiga kategori utama, yaitu :

1.    Elemen <HTML> yang menyatakan suatu dokumen HTML

2.    Elemen-elemen <HEAD> yang memberikan informasi tentang dokumen tersebut, seperti judul dokumen atau hubungannya dengan dokumen lain

3.    Elemen-elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftar), tabel dan lain-lain.

Struktur dokumen HTML terlihat seperti berikut ini :



<HTML>

      <HEAD>

      *** Bagian HEAD ***

      </HEAD>

      <BODY>

      *** Bagian  BODY ***                                                     

</BODY>

</HTML>



A. ELEMEN HEAD

            Tidak semua tag dapat diletakan dibagian HEAD. Tag-tag yang hanya boleh diletakan di bagian HEAD adalah :

1.    TITLE      

v  Judul dari dokumen. Tag ini mutlak  diperlukan dalam semua dokumen HTML. Sewaktu membuat judul, sebaiknya tidak menuliskan judul lebih dari 64 karakter

v   Contoh :

<HTML>

<HEAD>

<TITLE>Home Pribadi Saya</TITLE>

</HEAD>

</HTML>

2.    BASE        Menyatakan URL asal dari suatu dokumen

v  Base menyediakan suatu jalur pencarian bagi dokumen-dokumen atau gambar yang mempunyai hubungan dengan dokumen dari pengguna tag BASE tersebut.

v  Contoh :

<HTML>

<HEAD>

<TITLE>Home Pribadi Saya</TITLE>

      <BASE HREF=Http://www.ina.com/homepage.html>

</HEAD>

</HTML>

3.    ISINDEX  

v  Digunakan untuk menyatakan bahwa server dapat melakukan pencarian dalam dokumen

v  <ISINDEX> memberitahukan browser untuk membuat suatu bentuk pencarian sederhana dimana pemakai dapat memasukan satu atau lebih variabel pencarian.

v  Contoh :

<HTML>

<HEAD>

<TITLE>Home Pribadi Saya</TITLE>

      <BASE HREF=Http://www.ina.com/homepage.html>

      <ISINDEX>

</HEAD>

<BODY>

      *** isi dokumen html anda

</BODY>

</HTML>



4.    LINK        

v  Menyatakan hubungan antara dokumen dengan dokumen lainnya

v  <LINK> juga digunakan untuk menyatakan pengarang, indeks dan istilah, dokumen sebelum atau sesudahnya, dan lain-lain.

v  <LINK> merupakan suatu tag tunggal karena tidak mempunyai tag akhir </LINK>, itu sebabnya <LINK>  berada pada bagian < HEAD>

v  Berikut ini adalah atribut yang bisa digunakan pada tag <LINK>, yaitu :

Ø            HREF  Menunjuk pada dokumen atau bagian dokumen yang dituju oleh LINK tersebut

Ø            REL     Menyatakan hubungan antara dokumen saat ini dengan nilai pada HREF

Ø            REV    Seperti REL, menyatakan hubungan antara dokumen saat ini dengan nilai pada HREF, hanya saja dalam hubungan yang berlawanan dengan REL

Ø  NAME             Menyatakan suatu link dari suatu anchor atau URL ke dokumen ini

Ø            URN    Menyatakan suatu Uniform Resource Number untuk dokumen saat ini

Ø  TITLE              Seperti tag <TITLE> befungsi sebagai judul

Ø            METHODS     Menampilkan fungsi-fungsi yang didukung oleh dokumen saat ini, bagaimana ia bisa dilihat oleh suatu browser

v  Contoh :

<HTML>

<HEAD>

<TITLE>Contoh LINK</TITLE>

<BASE HREF=”http://www.link.com/contoh_link.html”>

<LINK HREF=”welcome.html” REL=”precedes”>

<LINK HREF=”welcome.html” TITLE=”Selamat Datang”>

<LINK REV=”made”      HREF=”mailto:sampurna@hotmail.com”>

<LINK REV=”previous”  HREF=”informasi.html”>

<LINK REV=”next”      HREF=”pesan.html”> 

</HEAD>

</HTML>

5.    META      

v  Menyatakan meta-information ( informasi tentang suatu informasi ) dalam suatu dokumen

v  META mempunyai tiga buah atribut, yaitu :

Ø  NAME       Merupakan informasi untuk suatu dokumen, bukan sebagai judul dokumen

Ø  HTTP-EQUIV       Atribut ini menghubungkan elemen META ke respon protokol tertentu

Ø  CONTENT                        Isi dari nama suatu meta atau respon yang dibuat oleh HTTP-EQUIV

v  Contoh potongan program :

<META HTTP-EQUIV=”Expires”  CONTENT=”10 Jul 1996”>

<META HTTP-EQUIV=”Refresh”  CONTENT=”7”>

<META NAME=”GENERATOR”  CONTENT=”Internet Assistant for Microsoft Word 2.0z”>

6.    NEXTID   

v  Digunakan oleh editor HTML untuk membuat pengenal unik untuk dokumen tersebut

7.    STYLE      Mendefinisikan style untuk elemen-elemen HTML







B. ELEMEN BODY

            Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.

Atribut BODY beserta fungsinya, yaitu :

1.    ALINK                   :  Menyatakan warna dari link yang sedang aktif

2.    BACKGROUND   : Menyatakan file gambar yang digunakan sebagai latar belakang

3.    BGCOLOR           : Menyatakan warna yang digunakan sebagai latar belakang

4.    BGPROPERTIES            : Jika di set fixed, membuat suatu watermark yaitu background tetap

5.    LEFTMARGIN      : Mengatur margin kiri dari isi dokumen dengan ukuran pixel

6.    LINK                      : warna dari link yang belum pernah dikunjungi

7.    TEXT                     : Mengatur warna teks dokumen web

8.    TOPMARGIN       : Mengatur margin atas dari isi dokumen dengan ukuran pixel

9.    VLINK                   : Warna link yang pernah dikunjungi



Tabel warna yang digunakan pada dokumen HTML yang menggunakan kode heksadesimal atau nama dari RGB :

WARNA
NOMOR HEXADESIMAL
Black
#000000
Maroon
#800000
Green
#008000
Olive
#808000
Navy
#000080
Purple
#800080
Teal
#008080
Gray
#808080
Silver
#C0C0C0
Red
#FF0000
Lime
#00FF00
Yellow
#FFFF00
Blue
#0000FF
Fuchsia
#FF00FF
Aqua
#00FFFF
White
#FFFFFF



Berikut potongan program untuk menentukan warna background suatu dokumen :

      <BODY BGCOLOR=”#FFFFFF”>

      <BODY BGCOLOR=”WHITE”>

Contoh program dengan menggunakan stylesheet dan warna teks :

<HTML>

<HEAD>

<TITLE>Uji coba warna link</TITLE>

<STYLE type=”text/css”>

BODY {background:white;color:black}

A:link {color:red}

A:visited {color:maroon}

A:active {color:fuchsia}

</STYLE>

</HEAD>

<BODY>

<A HREF=P6_1.html>Teks warna merah-doc.belum pernah dikunjungi<BR>

<A HREF=P6_2.html>Teks warna maroon-doc.pernah dikunjungi

</BODY>

</HTML>



C. TAG

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>). Tag biasanya merupakan suatu pasangan yang disebut dengan :

1.    Tag awal, dinyatakan dalam bentuk <nama tag>

2.    Tag akhir, dinyatakan dalam bentuk </nama tag>



Format  :  <nama tag> teks yang ditampilkan </nama tag>

Contoh : untuk menampilkan teks dalam format teks miring

            <I>Teks ini terlihat miring di browser anda</I>

           

Tidak semua tag mengikuti aturan diatas. Ada beberapa macam bentuk tag yang dikenal oleh HTML, dimana umumnya tag-tag dalam dokumen HTML muncul dalam bentuk seperti barikut ini :

1.    <nama_elemen>teks</nama_elemen>

v  Contoh : <TITLE>Home Page Saya</TITLE>

v  Tag yang umum dipaki dalam suatu dokumen HTML, yaitu tag yang mempunyai awal dan akhir

2. <nama_elemen>

v  Contoh : <HR>

v  Tag tersebut disebut dengan tag tunggal, yaitu tag yang hanya terdiri dari tag awal saja tanpa disertai dengan tag akhir.

3. <nama_elemen nama_atribut=argumen>teks</nama_elemen>

v  Contoh :  <A HREF=’http://www.microsoft.com/”>Microsoft Page</A>

v  Tag yang disertai dengan suatu atribut didalamnya. Banyak elemen dari suatu tag mempunyai argumen-argumen yang mengirimkan parameter pada browser yang menangani elemen ini. Argumen-argumen dari elemen ini disebut atribut elemen.

v  Contohnya adalah elemen Anchor (<A>) yang mempunyai beberapa atribut, salah satunya adalah HREF yang menyatakan dokumen atau link yang dihubungkan dengan teks yang mengandung anchor tersebut.



D. ATRIBUT

            Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya :    <P ALIGN=”left”>       digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.

            Dalam HTML, nilai atribut dalam pasangan tanda petik ganda, kecuali jika :

v  Nilai     merupakan     suatu     kumpulan  dari  nilai  tertentu  ( misalnya  dalam <P ALIGN=”left”>    tanda  petik ganda boleh dihilangkan,  maka penulisan boleh <P ALIGN=left> ).

v  Nilai hanya berisi angka, huruf dan titik ( dalam <IMG SRC=”picture/hiasan.gif”   ALT=”Menampilkan hiasan”>, kedua nilai tersebut memerlukan tanda petik ganda karena SRC mengandung tanda “/” dan ALT mengandung spasi ).



B. MEMPUBLIKASIKAN WEB SITE


            Setelah Web Page anda selesai, maka Web Page tersebut perlu dipublikasikan agar Web Site anda bisa diketahui oleh orang lain.  Untuk mempublikasikan Web Site tersebut,  anda tinggal mendaftarkan Web Site tersebut pada Web Site-Web Site yang mengkhususkan dirinya sebagai yang memberitahukan kehadiran suatu Web Site baru.

Ada 4 tempat yang bisa dipergunakan untuk mempublikasikan  Web Site anda, yaitu :

1.    Situs yang gratis

v  Contoh : www.geocities.com

v  Biasanya fasilitas yang diberikan hanya sekedar untuk mempublikasikan Web, tanpa dukungan fasilitas-fasilitas lainnya.

2.    Pada provider tempat anda berlangganan internet


v  Fasilitas yang diberikan hampir sama dengan situs gratisan, tetapi yang bisa menggunakan situs ini untuk publish hanya yang berlangganan dengan provider tersebut.

3.    Pada perusahaan yang melayani jasa Web Hosting ( penyewaan penitipan Web )

v  Contoh : www.cakraweb.co.id

v  Fasilitas yang diberikan bervariasi, tergantung jenis layanan yang hendak dipilih.

4.    Mempunyai server sendiri

v  Contoh : www.gunadarma.ac.id

v  Fasilitas yang ada bervariasi, tergantung dari keinginan Web Developer situs tersebut.



Cara untuk mempublikasikan Web Site anda :

1.    Melalui situs gratis ( www.geocities.com )

v  Anda harus memilki e-mail di www.yahoo.com

v  Melakukan registrasi pendaftaran di situs www.geocities.com , setelah melakukan registrasi akan mendapatkan informasi sebagai berikut :


v  Selanjutnya anda dapat melakukan uploading atau transfer halaman Web anda ke situs www.geocities.com dengan alamat www.geocities.com/account ( e-mail ) , dengan menggunakan fasilitas file transfer yang sudah disediakan oleh mereka.



2.    Melalui provider internet

v  Tentunya kita harus berlangganan salah satu provider yang ada

v  Format Alamat Web yang akan digunakan: www.nama-provider.net.id/~account

v  Untuk melakukan uploading menggunakan fasilitas file transfer protokol.



3.    Melalui perusahaan jasa Web Hosting

v  Anda harus mendaftarkan nama domain yang anda inginkan

v  Kemudian melakukan registrasi ke salah satu perusahaan layanan Web Hosting

v  Setelah melakukan registrasi anda dapat mentransfer halaman-halaman Web ke alamat situs yang sudah anda daftarkan.



4.    Melalui server sendiri

v  Anda harus membangun server Web dengan koneksi internet yang permanen

v  Dengan demikian maka anda dapat memulai membangun situs Web anda.