Karya Anak Bangsa - beta: Pengenalan HTML

Februari 03, 2010

Pengenalan HTML

0 bAlas
HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.
Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.
Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagai subset  SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.
FUNGSI HTML
1. Memodifikasi format teks
Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :
Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
Kita dapat menampilkan teks dalam bentuk cetakan tebal
Kita dapat menampilkan sekelompok kata dalam bentuk miring
Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan  hasil ketikan mesin ketik
Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
2. Menampilkan daftar sesuatu dalam bentuk point-point (item)
Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami
3. Membuat link
Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :
Link menuju bagian lain dari page
Link menuju page lain dalam satu web site
Link menuju resource atau web site yang berbeda
4. Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.
5. Menampilkan informasi dalam bentuk tabel
Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.

STRUKTUR DASAR WEB PAGE

File-file HTML dapat ditampilkan sesuai dengan keinginan kita seperti pada contoh-contoh sebelumnya adalah karena terdapat marker yang diimplementasikan dalam bentuk tag-tag HTML. Secara umum format tag HTML tersebut dapat dituliskan sebagai berikut:
Teks yang akan dipengaruhi oleh tag
Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka yang harus kita tuliskan dalam file HTML adalah:
B>Tulisan yang tercetak tebal
Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini.
Tag yang paling dasar yang digunakan dalam file HTML adalah dan . Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara kedua tag tersebut adalah dalam format HTML.
   
    Teks
   
Untuk mendefinisikan head,  kita dapat menambahkan tag dan
setelah penggunaan tag sedemikian hingga struktur page menjadi :



   
   
   
   
Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page. Bagian ini dapat didefinisikan dengan meletakkan tag dan di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan sesudah tag , sehingga struktur dasar sebuah page dapat dituliskan sebagai :
   
   
   
   
   
   
Untuk mendefinisikan judul page (title) maka kita dapat melakukannya dengan meletakkan naskah judul di antara tag dan .  Judul ini akan ditampilkan pada title bar web brower Misalkan kita akan membuat sebuah page dengan judul "Latihan HTML" maka kita harus menambahkan:
    Latihan HTML
Perhatikan bahwa tag dan ini harus diletakkan pada bagian head, sehingga dokumen HTML dasar kita menjadi:
   
   
    Latihan HTML
   
   
    Teks yang akan ditampilkan pada bagian body

   
Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk membuat atau mendefinisikan naskah dalam bentuk paragraf harus ditambahkan tag khusus yakni
. Sebagai contoh kita dapat menampilkan beberapa paragraf sekaligus dalam satu dokumen HTML.
   
   
    Latihan HTML</HTML><br>    </HEAD><br>    <BODY><br>    Teks yang akan ditampilkan pada bagian body<br>    <P>Paragraf satu </P><br>    <P>Paragraf dua </P><br></BODY><br>    </HTML><br>Penggunaan Heading<br>Seperti halnya pada pembuatan buku, kita dapat membagi naskah atau dokumen HTML ke dalam beberapa seksi untuk memudahkan proses pembacaan. Masing-masing seksi atau bagian itu terdapat satu subjudul. Untuk menangani format tampilan yang seperti ini kita dapat menggunakan tag HTML yang khusus untuk kepentingan tersebut. Terdapat enam tag yang dapat digunakan untuk membentuk format heading yakni mulai dari <H1> yang menggunakan ukuran font paling besar hingga ke <H6> yang ukuran font-nya paling kecil.<br>Contoh penggunaannya dalam file HTML adalah sebagai berikut:<br>     <HTML><br>     <HEAD><br>     <TITLE>A Text Formatting and Headings    Extravaganza
    
    
    

From Buck-Naked to Beautiful: Dressing Up Your Page


    

Sprucing Up Your Text


    

Yer Basic Text Formatting Styles


    

Combining Text Formats


    

Accessorizing: Displaying Special Characters


    

Sectioning Your Page With Headings


    

A Few More Formatting Features


    

Handling Preformatted Text


    

Them's the Breaks: Using <BR> for Line Breaks


    

Inserting Horizontal Lines


    
    
Penambahan Link

kita telah dikenalkan pada konsep URL (Uniform Resourse Locator), yakni pada dasarnya semua resource yang ada di Internet memiliki alamat sendiri. Selanjutnya kita juga telah memahami konsep hypertext dari sebuah file HTML yang memungkinkan dibuat suatu link yang menghubungkan pada bagian lain dari dokumen HTML atau langsung mengarah pada suatu resource Internet tertentu.
URL yang digunakan untuk mengimplementasikan penambahan link pada suatu page  dapat kita sederhanakan dalam model berikut :
Bagaimana://Siapa/Dimana/Apa
Bagaimana
Pada bagian pertama dari URL ini adalah menunjukkan bagaimana cara data dikirimkan atau ditransmisikan melalui media jaringan. Secara teknis lebih sering kita sebut dengan istilah protokol. Misalnya untuk aplikasi World Wide Web ini kita menggunakan protokol yang disebut dengan protokol HTTP. Oleh karena itu pada bagian awal URL ini kita deklarasikan:
    http://
Siapa
Pada bagian selanjutnya menjelaskan "siapa" yang memiliki URL. Bagian ini berisi nama komputer tempat resource Internet tersebut berada. Istilah yang lebih teknis kita sebut dengan hostname. Misalkan page kita diletakkan di mesin www.yahoo.com maka penambahan URL sampai dengan bagian ini menjadi:
    http://www.yahoo.com
Dimana
Bagian selanjutnya menunjukkan lokasi yang lebih spesifik tempat menyimpan resource Internet tersebut. Secara fisik bagian ini berisi nama direktori tempat penyimpanan resource yang bersangkutan.
    http://www.yahoo.com/Home
Apa
Bagian terakhir ini menunjukkan nama file yang akan kita gunakan. Untuk aplikasi web file ini berisi kode-kode HTML dan teks. Secara keseluruhan URL dapat dituliskan sebagai berikut:
    http://www.yahoo.com/Home/homepage.html
Pembuatan link dalam suatu file HTML dapat dilakukan dengan menggunakan tag yang diikuti dengan parameter referensinya HREF.
   

Contoh penggunaanya:
   
Klik di sini
Selain link yang mengarah ke luar, contohnya mengarah ke file lain, web site lain atau ke resource lain, kita dapat juga menggunakan internal link untuk menunjukkan suatu bagian tertentu dari sebuah naskah HTML. Internal link ini sering dikenal dengan istilah Anchor. Tag ini digunakan untuk menandai bagian naskah yang nantinya akan ditunjuk oleh HREF (Hypertext REFerence).
    Bagian teks yang akan diberi tanda
Contoh penggunaannya:
    Bagian 1
maka untuk merujuknya digunakan:
    Klik di sini untuk menuju Bagian 1

PENYISIPAN CITRA DAN GAMBAR
Penyisipan citra pada page dimaksudkan agar tampilan dari page tersebut dapat lebih menarik dan informatif. Ada beberapa hal yang perlu diperhatikan dalam penyisipan citra atau gambar ke page, yakni:
Ukuran file citra
Ukuran file yang terlalu besar akan membuat pengunjung web harus menunggu lebih lama dalam mengakses web karena musti terlebih dahulu mendownload file citra atau gambar yang ukurannya besar
Tipe file citra
Tipe file yang mendukung untuk transmisi melalui aplikasi web adalah JPEG atau GIF
File citra dapat disisipkan ke dalam suatu file HTML dengan menggunakan tag , yakni dalam format penuh:
deskripsi teks
Atribut ALT berfungsi sebagai alternatif jika browser yang digunakan oleh pengguna tidak dapat menampilkan citra. Sedangkan atribut ALIGN dapat diisi dengan nilai-nilai TOP, MIDDLE, BOTTOM, LEFT, dan RIGHT.
Contoh penggunaan tag :
    
    
     Aligning Text and Images
    
    
     This text appears at the top of the image.
    

     This text appears in the middle of the image.
    


     This text appears at the bottom of the image.
    
    


0 bAlas:

Posting Komentar