Tutorial Pengenalan HTML (Hypertext Markupable Language) http://pcr.aksespraktis.net Dilarang menggandakan atau menduplikasi tanpa ijin dari penulis
Sekilas Mengenai Bahasa HTML HTML atau kependekan dari HyperText Markup(able) Language adalaah bahasa perancangan/pemrograman umum yang digunakan dalam membangun halaman web yang berbasiskan standar World Wide Web Consortium (W3C). Hingga saat ini bahasa HTML sudah mengalami evolusi sampai dengan rilis 4 dimana kelebihankelebihan yang ditambahkan pada rilis ini sudah dijadikan standar pada perangkat lunak perancang halaman web, misalnya Macromedia Dreamweaver. Dengan standar yang sudah baku dan terakomodasi ini maka tidak akan menyulitkan pemakai dalam mengetikan sintakas-sintaks bahasa HTML pada jendela Kode Macromedia Dreamweaver. Konstruksi Umum Bahasa HTML Apabila pemakai sudah membuat suatu halaman web baru pada jendela peta situs maupun melalui lingkungan terpadu Macromedia Dreamweaver maka secara tidak langsung, Macromedia Dreamweaver sudah membangkitkan kode-kode standar bahasa HTML pada jendela dokumennya. Namun untuk melihat konstruksi umum yang sudah digenerasi ini pemakai harus melihatnya terlebih dahulu pada jendela dokumem mode Kode. Untuk melakukan hal ini maka prosedur yang dapat dilakukan adalah sebagai berikut. [01] Pada jendela lingkungan terpadu, arahkan pointer mouse pada menu Edit, lalu klik. [02] Arahkan pointer mouse pada sub menu Code, lalu klik. Sebagai langkah alternatif, pemakai dapat juga mengaktifkan jendela Kode ini melalui prosedur: [02b] Arahkan pointer icon Code pada Baris Tombol Dokumen, lalu klik. Apabila prosedur benar dijalankan maka jendela Kode yang berisi konstrukdi bahasa HTML hasil generasi Dreamweaver MX 2004 tampil Gambar Kode bahasa HTML 1
Apabila diringkas, konstruksi umum yang berlaku pada halaman web kosongyang mengikuti standar baku bahasa HTML adalah sebagai berikut: <html> <head> <title> Judul halaman web diletakan di sini </title> <meta= tipe meta content= kata kunci atau gambaran umum dari isi halaman web > </head> <body> <!- Komentar dapat diletakan di sini-> Isi halaman web berbentuk bahasa HTML diletakan di sini </body> </html> Sintaks-Sintaks Dasar Bahasa HTML Dari gamabaran kontruksi umum di atas, sintaks-sintaks dasar bahasa HTML yang pada dasarnya mewarnai dan membangun suatu halaman web pada umumnya dibangun oleh tag-tag (penanda) bahasa HTML yang dapat dijelaskan sebagai berikut: Tag HTML Tag HTML digunakan sebagai penanda halaman web. Apabila browser (penerjemah halaman web) menenmukan tag ini maka halaman ini didefinisikan sebagai halaman web umum. Tag ini harus digunakan berpasangan dengan tag penutupnya yaitu </html> di akhir halaman web. Tag Head Tag Head diletakan sesudah tag HTML. Tag Head digunakan sebagai penanda di bagian awal dari halaman web. Pada penerapannya tag ini pada umumnya berisi keterangan dari halaman web atau script yang didefinisikan seperti JavaSCript maupun VBScript. Tag Title Tag title diletakan sesudah tah Head yang digunakan untuk memberijudul pada halaman web. Apabila pada bab seblumnya pemakai sudah belajar bagaimana 2
memberi judul pada halaman web pada mode Visual (Design), maka pada mode Kode(Code)nya ini pemakai cukup meletakannya di antara tag <title> dan </title>. Misalnya: <title>.: Selamat Datang di situs web Cucakrawa :. </title> Apabila nantinya halaman web kosong ini dipublikasi dan ditampilkan pada browser maka judul ini akan tertera pada judul jendela browser yang dipakai. Gambar Judul halaman web pada browser Tag Meta Tag Meta diletakan sesudah tag Head yang digunakan pada umumnya sebagai pemberi informasi dari halaman-halaman web yang dirancang. Informasi-informasi yang tertera pda tag Meta ini pada dasarnya juga digunakan sebagai acuan pencarian oleh situs-situs pencari seperti Yahoo, Google dan lain sebagainya. Dengan menampilkan informasi yang tepat dan sesuai keinginnan ke dalam tahg ini maka secara otomatis akan dijadikan informasi kunci dalam pencarian halaman maupun situs web nantinya. Dalam penggunaannya, penulisan tag Meat menggunakan dua cara yang baku dan dapat dipakai oleh pemakai yaitu: Cara pertama: <meta name= keyword content= kata kunci ke-1 sampai dengan ke n ) Apabila ditulis kembali dalam konstruksi umum yang digenerasi oleh Dreamweaver MX 2004 menjadi: <meta name= keyword content= kata kunci ke-1 sampai dengan ke-n > 3
Cara ini digunakan untuk meletakan semua kata kunci yang berhubungan dengan halaman web / situs web yang dibangun. Pemakai dapat memasukan lebih dari satu kata kunci yang nantinya digunakan sebagai informasi oleh situs pencari untuk mengarahkan informasi ini kepada situs web ini. Sebagai contoh: <meta name keyword content= penerbit buku komputer, penerbit buku umum, penerbit buku misteri > Apabila pemakai memasukan kata kunci-kata kunci di atas ke dalam informasi pencarian situs web pada situs web pencari seperti Yahoo atau Google maka secara otomatis situs web pencari akan lmeletakan siatus web yang dibangun ke dalam daftar tujuan lompatan informasi (dalam hal ini kata kunci) yang dicari. Cara kedua: <meta name= description content= isi keterangan dari situs web ) Apabila ditulis kembali dalam konstruksi umum yang digenerasi oleh Dreamweaver MX 2004 menjadi: <meta http-equiv= description content= isi keterangan dari situs web ) Cara ini digunakan untuk meletakan deskripsi (keterangan/paparan) yang berhubungan dengan halaman web / situs web yang dibangun. Cara ini dapat digunakan sebagai alternatif apabila pengunjung ingin mencari situs web Anda berdasarkan informasi deskripsi ini. Pada penerapannya, pemakai hanya dapat memasukan satu deskripsi yang nantinya digunakan sebagai informasi oleh situs pencari untuk mengarahkan informasi ini kepada situs web ini. Sebagai contoh: <meta name= description content= Penerbit Dinastindo ) Apabila pemakai memasukan informasi di atas ke dalam situs web pencari maka secara otomatis situs web pencari akan meletakan situs web Anda ke dalam daftar tujuan informasi (dalam hal ini deskripsi) yang dicari. 4
Tag Body Sebagian informasi yang diletakan pada halaman web pada umumnya diletakan pada tag ini seperti pendefinisian bentuk huruf, pendefinisian paragraf, pendefinisian tabel/sel dan sebagainya. Secara umum tag ini dikombinasikan dengan tag-tag lainnya seperti: Tag BgColor Tag ini digunakan untuk mendefinisikan warna latar belakang dari halaman web. Pada model Design (Visual). Pemakai dapat dengan mudah menentukan warna latar belakang ini melalui jendela Properties. Tag Text Peranan tag ini hampir sama dengan tag BgColor dimana tag ini digunakan untuk mendefinisikan warna tulisan (teks) yang nampak pada halaman web. Tag P (Paragraf) Tag ini digunakan untuk mendefinisikan paragraf aoabila suatu teks (huruf, kata atau kalimat) diletakan. Tag ini efektif digunakan untuk meletakan sekaligus membentuk teks ke dalam format paragraf yang diinginkan. Tag Align Tag ini pada penerapannya digunakan untuk mendefinisikan peratan pada sebuah teks (huruf, kata atau kalimat) yang diletakan. Tag ini pada pemakaiannya dikombinasikan bersama dengan tag P maupun tag Table. Format umum untuk meletakan definisi perataan ini adalah sebagai berikut: <P> atau <Table> Align= tipe perataan </Table> atau </P> Dimana, tipe perataan yang dapat dilakukan adalah: Left untuk perataan kiri Center untuk perataan tengah Right untuk perataan kanan 5
Sebagai contoh untuk mendefinisikan suatu paragraf ke dalam format perataan tengah adalah sebagai berikut: <P Align= Center > Contoh Perataan Tengah </P> Tag BR (Line Break) Tag BR dapat digunakan untuk meletakan baris kosong (line break) pada suatu paragraf. Apabila pemakai ingin mengatur jarak antar kalimat dengan memmanfaatkan ruang kosong diantaranya, pemakai dapat menggunakan tag ini. Dalam pemakaiannya tag ini tidak perlu ditutup dengan </BR> Tag A Tag A digunakan untuk memberikan alamat lompatan pada suatu teks (huruf, kata atau kalimat) pada halaman web, situs web atau ke luar dari situs web yang ada. Untuk menggunakan tag ini maka pemakai dapat mengikuti format sebagai berikut: <A HREF= alamat tujuan lompatan > Teks yang mewakili</a> Dimana: Alamat tujuan lompatan adalam alamat lompatan internet umum yang dituju dimana alamat ini dapat berupa alamat halaman web atau alamt e-mail. Teks yang mewakili adalah huruf, kata atau kalimat yang digunakan untuk mewakili teks yang tertera pada halaman web. Sebagai contoh: <a href="www.macromedia.com">situs Macromedia.com</a> Contoh penerapan tag A 6
Tag IMG Tag IMG digunakan untuk meletakan gambar (image) ke dalam halaman web. Dengan menyebutkan nama sumber file objek gambar ini maka secara otomatis akan diletakan ke dalam halaman web. Untuk meletakan objek gambar ini maka format umum yang harus diikuti: <IMG SRC= file gambar width= lebar gambar height= tinggi gambar > Dimana: File gambar adalah nama file gambat yang ingin ditampilkan beserta alamat lokasi directory/foldernya. Pemakai dapat mengambil objek gambar ini dengan format *.GIF, *.JPG atau *.PNG. Lebar gambar adalah ukuran lebar dari objek gambar yang dapat diatur, apabila lebar gambar ini tidak didefisikan maka Dreamweaver MX 2004 akan menampilkannya pada ukuran lebar asal objek gambar. Tinggi gambar adalah ukuran lebar dari objek gambar yang dapat diatur, apabila lebar gambar ini tidak didefisikan maka Dreamweaver MX 2004 akan menampilkannya pada ukuran tinggi asal objek gambar. Sebagai contoh: <IMG SRC=../Image/logo.jpg width= 100 height= 100 > Pada pemakaiannya tag ini tidak memerlukan penutup </IMG> Tag Table (Tabel) Tag Table digunakan untuk mendefinisikan suatu tabel pada halaman web. Apabila pemakai sudah mencoba untuk mendefinisikan tabel pada model Design (Visual) maka pemakai dapat mencoba meletakannya dengan tag ini sebagai cara alternatif. Format umum pendefinisian tag table pada halaman web adalah sebagai berikut: <TABLE> <TR> <TD> </TD> </TR> </TABLE> 7
Dimana: Tag TR digunakan untuk mendefinisikan satu baris tabel. Tag TD digunakan untuk mendefinisikan informasi yang terkandung pada tabel tersebut. Secara otomatis informasi yang terdapat pada tag TD akan membelah tabel ke dalam partisi (pecahan) tabel (sel) yang lebi kecil. Sebagai contoh: <TABLE> <TR> <TD>Sel Pertama</TD> <TD>Sel Kedua</TD> <TD><IMG SRC= logo.jpg width=100 height=100></td> </TR> </TABLE> Apabila kode-kode bahasa tersebut di atas ditempatkan pada jendela kode (Code) pada Dreamweaver MX 2004 maka hasil yang nampak adalah sebagai berikut: Gambar 9.4 Hasil penempatan kode Tag B (Bold) Tag B digunakan untuk mencetak teks (kata, huruf atau kalimat) menjadi tebal pada tampilan. Pada penerapannya tag ini memerlukan penutup </B> 8
Tag I (Italic) Tag I digunakan untuk mencetak teks (kata, huruf atau kalimat) menjadi miring pada tampilan. Pada penerapannya tag ini memerlukan penutup </I> Tag U (Underline) Tag U digunakan untuk mencetak teks (kata, huruf atau kalimat) yang digarisbawahi pada tampilan. Pada penerapannya tag ini memerlukan penutup </U> Tag OL Tag OL digunakan untuk menciptakan daftar yang terurut pada teks (huruf, kata atau kalimat). Dengan menggunakan tag ini maka pemakai tidak perlu memberikan nomor pengururtan pada daftar item yang dibuat. Pada pemakaiannya tah ini dikombinasikan dengan tag LI (list/daftar) untuk menciptakan suatu daftar terurut pada teks. Tag ini memerlukan penutup tab </OL> Tag UL Tag UL digunakan untuk menciptakan daftar yang diawali dengan tanda peluru (bullet) pada teks. Pada pemakaiannya tag ini dikombinasikan dengan tag LI (list/daftar) untuk menciptakan suatu daftar terurut pada suatu teks. Tag ini memerlukan penutup tag </UL> Tag LI Tag LI digunakan untuk membuat susunan daftar item pada teks (huruf, kata atau kalimat. Pada pemakaiannya, tahg ini dikombinasikan dengan tag UL atau OL. Tag LI memerlukan penutup </LI>. Untuk melihat peranan dari tag ini maka contoh yang dapat diberikan adalah sebagai berikut: <HTML> <BODY> <TABLE> <P> Daftar Koleksi Burung </P> <OL> <LI><B> Burung Kakatua Jambul Kuning</B></LI> <LI><B><U>Burung Cucakrawa sing ake wulune</u></b></li> 9
<LI><B><I>Burung Kakaktua Kepala Batu</I></B></LI> </OL> <P> Daftar Koleksi Burung </P> <UL> <LI><B> Burung Kakatua Jambul Kuning</B></LI> <LI><B><U>Burung Cucakrawa sing ake wulune</u></b></li> <LI><B><I>Burung Kakaktua Kepala Batu</I></B></LI> </UL> </TABLE> </BODY> </HTML> Apabila kode-kode bahasa tersebut di atas dicek pada browser (penerjemah halaman web) misalnya Internet Explorer maka hasil yang nampak adalah sebagai berikut: Gambar 9.5 Hasil yang tampak Tag H Tag H digunakan untuk membuat sekaligus membentuk teks (huruf, kata atau kalimat) ke dalam format judul umum. Pad apemakaiannya Tag ini menyediakan 6 format yang dapat dipakai untuk membentuk judul. Dimulai dari H1 sampai dengan H6. Tag ini memerlukan tag penutup </H1> sampai dengan </H6>. Sebagai contoh: <H1> Judul dengan menggunakan Header Pertama</H1> <H2> Judul dengan menggunakan Header Kedua</H2> <H3> Judul dengan menggunakan Header Ketiga</H3> <H4> Judul dengan menggunakan Header Keempat</H4> <H5> Judul dengan menggunakan Header Kelima</H5> <H6> Judul dengan menggunakan Header Keenam</H6> Apabila kode-kode bahasa tersebut di atas dicek pada browser (penerjemah halaman web) Internet Explorer maka hasil yang nampak adalah sebagai berikut: 10
Gambar 9.6 Hasil yang tampak Pemasukan Kode Bahasa HTML Pada Dreamweaver MX Untuk melakukan pemasukan atau kode-kode bahasa HTML seperti yang telah dijelaskan di atas maka pemakai terlebih dahulu harus mengubah model tampilan Macromedia Dreamweaver menjadi jendela model Kode (Code) atau campuran (Split) Setelah model jendela ini akrif maka pemakai dapat langsung memulai memasukan kode-kode bahasa HTML yang diinginkan dengan prosedur sebagai berikut: [01] Arahkan pointer mouse pada jendela model kode pada Macromedia Dreamweaver, lalu klik. [02] Mulailah mengetik kode-kode bahasa HTML yang diinginkan pada posisi kursor. 11