Minggu, 17 Agustus 2008

Teori Dasar HTML

Membangun sebuah Web Page dibutuhkan sebuah bahasa pemprograman yang lebih dikenal dengan sebutan WEB SCRIPTING. Dikatakan Script karena perintah kode program tersebut akan diinterpreter dan tidak ada kompilasi untuk menjadikannya executable. Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori, yaitu bersifat client side dan server side.

Client Side dilaksanakan oleh web browser seperti Internet Explorer, Netscape, Opera, Firefox dan lain-lain. Contoh daripada Client Side misalnya HTML,CSS, Javascript, VBscript maupun XML. Sedangkan Server Side dikerjakan oleh Web Server seperti Personal Web Server untuk system operasi Windows 98, IIS untuk system operasi Windows 2000/XP, Apache, Tomcat, Xitami dan Zope. Sedangkan untuk contoh bahasa server side adalah ASP (.Net), PHP, JSP,CFM dan CGI/PL.

Web Scripting yang bersifat Client Side akan menghasilkan web page yang statis dalam arti menekankan pada design format tampilan informasi yang disajikan dan tidak dapat diupdate seketika, karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak dapat menghasilkan output apapun. Sehingga untuk menghasilkan aplikasi web bersifat dinamis tidak mungkin, dan harus dikombinasikan dengan web scripting yang bersifat server side.

HTML ( Hypertext Markup Language ) adalah bahasa dasar untuk web scripting bersifat Client Side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga untuk menghubungkan antar tampilan web page atau yang lebih dikenal dengan Hyperlink.

Tidak diperlukan suatu program editor khusus untuk menggunakan kode perintah-perintah HTML, kita dapat menggunakan Notepad, Edit Plus ataupun editor lainnya yang berbasis GUI ( Graphical User Interface ) seperti Microsoft Front Page, Dreamweaver CS3, Adobe Golive dan sebagainya,namun dengan program-program ini kita tidak perlu mengetik kode HTMLnya, semua perintah diwujudkan secara Icon Base. Sebagai seorang pengembang aplikasi web maka kemampuan penguasaan kode-kode HTML sangat diperlukan, dengan demikian kita mampu menguasai program-program editor lainnya. Untuk dapat menguasai kode-kode HTML sangat disarankan menggunakan editor teks misalnya Notepad .

Aturan penulisan HTML adalah sebagai berikut :

1. Memilki struktur minimal dari dokumen HTML.

<HTML>

<head>

<title>Judul Web Page</title>

</head>

<body>

Isi artikel anda di sini

</body>

</HTML>

2. Bentuk tulisan pada point 1 disebut TAG. Tag memiliki pembuka <TAG>, tetapi tidak semua Tag mempunyai penutup </TAG>. Tag memberi instruksi interpreter kepada browser.

3. Di dalam Tag HTML terdapat atribut Tag, yang mana atribut tersebut berbeda-beda antar tag yang satu dengan tag yang lainnya.

4. Penulisan Tag bersifat Non Case Sensitive, ini berarti bahwa penulisan tag huruf besar dan atau huruf kecil akan dianggap sama. Sebagai contoh <HTML> akan sama dengan <html> atau <HtmL>.

5. Setelah tanda "<" harus langsung diikuti oleh nama Tag dan ditutup tanda ">", tidak boleh ada spasi, angka, tanda baca dan nama Tag tidak dapat dibuat sendiri dan harus mengikuti standar W3C, yaitu sebuah lembaga atau organisasi internasional yang mengatur standarisasi web ( http://www.w3c.org).

6. Dalam dokumen HMTL diperlukan tag <HEAD></HEAD>, dalam tag ini diletakkan judul web page dengan menggunakan tag <TITLE>judul Web</TITLE>, sedangkan di dalam tag <BODY></BODY> berisikan isi dari web page kita. Untuk ekstensi dari file HTML perlu ditambahkan .html atau .htm dibelakang nama filenya. Misalnya Uji Coba.html

7. Penulisan tag-tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi, sehingga diperbolehkan menyusun tag-tag HTML secara countinue horizontal seperti berikut ini :

<HTML><HEAD><TITLE>Judul</TITLE></HEAD>..... dan seterusnya.

Atribut di dalam TAG.

• Tag <BODY> memiliki atribut : <BODY bgcolor=#......"background="....."

Dalam HTML nilai warna yang dapat diberikan pada atribut bgcolor adalah menggunakan aturan komposisi RGB ( Red-Green-Blue) dengan angka hexadecimal maksimal adalah FF (setara dengan 255 decimal) tiap komposisinya. Sebagai contoh bila diinginkan untuk memberikan warna merah (Red) maka nilainya "#FF0000", warna hijau nilainya adalah "#00FF00" dll. Adapun untuk nilai atribut background adalah nama file gambar lengkap dengan lokasi folder dan ekstensi filenya. Format gambar yang didukung oleh HTML antara lain JPEG, PNG dan GIF

• HEADING.

Digunakan untuk menampilkan format huruf yang besar dan dicetak tebal, biasanya digunakan untuk judul atau topik utama dari sebuah paragraf, ukurannya dari terbesar <H1> sampai terkecil <H6>, sedangkan untuk mengatur posisi heading digunakan atribut "align". Contoh <H1 align="..."> ditutup dengan </H1> yang nilai atributnya dapat diisi nilai LEFT untuk rata kiri, RIGHT untuk rata kanan dan CENTER untuk rata tengah.

• PARAGRAF

Untuk memformat paragraf agar dapat rata kiri, rata kanan, rata tengah dan justify digunakan tag pembuka <P align="..."> dan ditutup dengan </p>, adapun isi dari atribut "align" adalah LEFT,RIGHT,CENTER dan JUSTIFY. Antara paragraf dalam HTML akan dibatasi secara otomatis oleh sebuah jeda baris.

• BREAKING NOW

Tag <BR> ini digunakan untuk berpindah ke baris baru dalam isi dokumen. Ini adalah salah satu tag HTML yang tidak memiliki tag penutup

• HORIZONTAL RULER

Tag yang digunakan untuk membuat garis horizontal adalah <HR>, adapun atribut yang dimiliki "align" untuk perataan, "size" untuk mengatur ketebalan garisnya dalam pixel (px) dan "width" untuk mengatur lebar garisnya (dalam pixel atau persen). Penggunaan satuan persen (%) memiliki arti bahwa ukuran garis horizontal akan diambil persentase terhadap WIDTH dari tampilan jendelanya. Tag <HR> juga tidak memiliki tag penutup.

• PREFORMAT

Fasilitas ini tampilan akan diformat sama persis dengan isi yang ada di dalam Tag <PRE>isi</PRE>. Di dalam tag <PRE> tombol enter untuk ganti baris atau spasi untuk jeda dapat digunakan.

• BOLD, ITALIC, UNDER LINE, SUBSCRIPT, SUPERSCRIPT dan STRIPE

Cara memberikan efek huruf dalam dokumen HTML adalah sebagai berikut :

- Untuk huruf tebal (bold).............. <b>cetak tebal</b>

- Untuk huruf miring (italic) ............. <i>cetak miring</i>

- Untuk huruf dengan garis bawah (underline) ......... <u>garis bawah</u>

- Untuk huruf sebagai subscript .......... <sub>cetak subscript</sub>

- Untuk huruf sebagai superscript ......... <sup>cetak superscript</sup>

- Untuk huruf yang dicoret (strike) ............<s>cetak strike</s>

• LIST

Dalam dokumen HTML dapat menampilkan datar list seperti bullet & Numbering pada aplikasi program Microsoft Word. Ada dua macam list, yaitu UnorderList ( mirip bullets ) dan OrderedList ( Mirip Numbering )

Pada Unorderlist digunakan tag <UL> sebagai pembuka dan tag </UL> sebagai tag penutup. Untuk item-item list yang ada di dalamnya digunakan tag <LI> untuk mengawalinya. Unorderedlist mempunyai atribut "type" yaitu bentuk dari bulletnya. Ada beberapa jenis type yaitu DISC (default) untuk lingkaran tidak berlubang, CIRCLE untuk bentuk lingkaran berlubang, SQUARE untuk kotak. Orderedlist juga memiliki atribut tipe untuk menentukan tipe penomorannya, tipe tersebut adalah

1 untuk penomoran 1,2,3,….

A untuk penomoran A,B,C,….

I untuk penomoran I,II,III,IV …

a untuk penomoran a,b,c …

i untuk penomoran i,ii,iii, …

Bila kita tidak mendifinasikan tipenya, maka secara default Ordered List akan memberikan penomoran angka ( 1,2,3 … )

• KOMENTAR DALAM HTML

Komentar dalam tag HTML menggunakan tanda <!— sebagai pembuka dan tanda -- > sebagai penutup. Komentar tidak akan diinterpreter oleh we browser, hanya menjadi keterangan saja.

• Karakter khusus dalam HTML.


bentuk

perintah

<

&lt;

>

&gt;

spasi

&nbsp;

©

&copy;

®

&reg;

&#8482;

-

&#8212;

±

&plusmin;

&para;

'

&acute;

2 komentar:

Poskan Komentar

Silahkan berikan komentar yang bersifat membangun, admin akan menghapus komentar yang bersifat SPAM

 
Copyright @ 2009 CoretanAsal: Teori Dasar HTML | Original Template: MINIMA| Modified By NATALUDIN | Top
Thanks for : BLOGGER | PHOTOBUCKET | PICASSA