APA ITU HTML?
ANDA mesti pernah mendengarnya walaupun sekali di dalam hidup anda, lagi-lagi jika anda membaca mengenainya atau cuba membina laman web sendiri. HTML memang tidak dapat dipisahkan daripada laman web kerana ia adalah asas utama kepada sebuah laman web.
Soalnya di sini, apakah itu HTML?
v HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafik dari sebuah halaman web dan merupakan bahasa yang digunakan untuk membuat laman web. Bukan suatu bahasa pengaturcaraan seperti c, c++ atau Pascal. Ia lebih kepada bahasa yang menetapkan corak paparan dokumen. Didalam file HTML terdapat beberapa "tag" atau kod –kod yang difahami dan diterjemahkan oleh web browser atau pelayar web dan dapat ianya akan menampilkannya di layar monitor.
v File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara lain : Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML ini juga dapat dibuat di aplikasi word processor asalkan saat menyimpan file tersebut disimpan dengan format text-only.
v Salah satu kelebihan file HTML adalah cross platform, di mana file HTML dapat ditampilkan di beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun waktu cara pembuatannya menggunakan satu OS tertentu saja.
BAGAIMANA HTML BERFUNGSI?
v Seperti yang anda tahu, File HTML berada di dalam Server dan tugas Server ialah memastikan File-File laman web yang mengandungi kod-kod HTML berfungsi dengan baik. Laman web yang mengandungi kod-kod HTML tadi sebenarnya adalah bahasa yang difahami oleh Browser. Kod-kod (dipanggil juga sebagai tag) seperti <HTML>, <TABLE>, <BODY> dan banyak lagi adalah sebuah bahasa yang difahami oleh Browser seperti Internet Explorer, Chrome, Firefox, Safari, Opera dan lain-lain pelayar. Jadi, untuk menghasilkan laman web yang lengkap dan ‘cantik’, kita tetap perlu menghasilkan laman web itu dalam bentuk HTML agar Browser (seperti Firefox, Internet Explorer, dan lain-lain) ‘faham’ apa yang perlu dilakukan. Sebab itulah HTML dipanggil sebagai sebuah ‘bahasa’ iaitu bahasa yang difahami oleh Server dan Browser.
v Secara mudah, ini adalah proses sebelum sesebuah laman web dijana:
v Server (Kod HTML) -> Browser -> Laman Web Dipaparkan
v Pengguna Internet (pelawat laman web) akan menggunakan Browser seperti Internet Explorer atau Mozilla Firefox untuk melawati sesebuah laman web. Apabila URL laman web ditaip, Browser sebenarnya akan melakukan ‘request’ kepada Server di mana laman web itu berada.Kemudian, Server akan membalas ‘request’ itu dan Browser laman web akan mula mengakses laman web tersebut. Mengakses di sini bermaksud Browser mendownload kod-kod HTML laman web tadi ke komputer yang anda gunakan dan menterjemahkan kod tersebut kepada sebuah laman web yang difahami dan boleh dilayari
STRUKTUR ASAS DOKUMEN HTML
Setiap HTML dokumen bermula dengan tag markup <HTML>. Tanda <HTML> permulaan ini memberi tahu browser jenis dokumen yang dibaca untuk dipaparkan. Tag penutup </HTML> memaklum browser bahawa dokumen telah berakhir. Tag penutup ini biasanya adalah teg yang terakhir dalam dokumen HTML.
Dokumen HTML dibahagikan kepada dua bahagian, pertama; bahagian kepala atau HEAD (yang dibatasi oleh teg <HEAD></HEAD>) dan kedua; bahagian kandungan atau BODY ( yang dibatasi oleh teg <BODY></BODY>).
Dalam bahagian kepala (atau HEAD), terkandung di dalamnya adalah tag <TITLE> dan tag <DOCTYPE>. Teg <DOCTYPE> diperlukan untuk mendefinisikan standard yang diikuti oleh dokumen tersebut. Mengikut kod ini kandungan minimum dokumen HTML adalah seperti berikut:
<HTML>
<HEAD>
<TITLE> Contoh tajuk dokumen</TITLE>
</HEAD>
</HTML>
Perhatikan bahawa jika dokumen ini dibuka dalam browser, tiada apa-apa yang. Untuk paparan selanjutnya, dokumen ini memerlukan kandungan atau BODY yang boleh mengandungi teks atau imej dll. Ringkasnya, apa jua yang tertulis dalam bahagian head akan dipaparkan dalam bar tajuk browser.
HTML membenarkan anda memuatkan komen dalam dokumen. Komen yang anda tulis ini tidak akan dibaca oleh browser tetapi ia adalah sebahagian daripada bahasa markup dokumen tersebut. Lazimnya komen ini digunakan untuk menulis nota rujukan untuk diri anda ataupun untuk menandakan bahagian - bahagian tertentu dokumen tersebut.
Untuk memasukkan komen, anda perlu menuliskan deklarasi komen yang dimulakan dengan tanda tag <! diikuti oleh 0 atau teks dan diakhiri dengan tanda >. Setiap komen bermula dengan -- dan gunakannya semula untuk barisan teks seterusnya. Dalam deklarasi komen, anda boleh menggunakan spaces, tabs dan barisan baru. Browser akan tidak membaca langkah/komen tersebut. Contoh komen adalah:
<!---Bahagian ini mengenai rujukan --->
Harap prihatin bahawa setiap dokumen HTML mesti dimulakan dengan teg deklarasi DOCTYPE seperti berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Tag ini perlu untuk menyatakan kepada browser bahawa dokumen HTML ini adalah versi yang perlu dibezakan dengan versi yang lain seperti yg di bawah iaitu :-
TAG HEAD
Selepas tag <HTML>, perlu dituruti dengan tag <HEAD>. Tag ini memungkinkan pelayan HTTP untuk mencari maklumat tentang dokumen tersebut. Tag <HEAD> memulakan kepala dokumen tersebut dan ditutup dengan teg </HEAD>. Kandungan dalam teg ini tidak akan dipaparkan. Selepas tag HEAD, anda boleh memuatkan pelbagai tag untuk mencorakkan kandungan atau BODY dokumen anda. Di bawah ini diturunkan beberapa tag asas yang akan anda gunakan dalam dokumen HTML.
Selepas tag <HEAD>, anda perlu memasukkan tag TITLE. Kandungan dalam TITLE akan dipaparkan oleh browser dan ia digunakan sebagai indeks maklumat untuk program pencari dalam Web. Tag <TITLE> adalah tag container yang mengandungi kandungan dan perlu ditutup dengan tag penutup.
Untuk menghasilkan tajuk, tuliskan tajuk dokumen antara tag pembuka <TITLE> dan tag penutup </TITLE> seperti berikut:
<TITLE>Laman Web Fakulti Ekonomi dan Pengurusan</TITLE>
Tag META boleh digunakan untuk memasukkan nama atau nilai menerangkan ciri dokumen seperti pengarang, tarikh matang, senarai kata kunci dsbnya. Ciri NAME menentukan butir (atau property) nama, CONTENT menerangkan nilai butir atau property tadi. Sebagai contoh:
<META NAME="Author" CONTENT="Ahmad Malik, Rushdi Ali">
Dalam contoh ini tag <META> digunakan untuk menunjukkan pengarang dokumen tersebut. Kadangkala maklumat mengenai HTTP-EQUIV juga dimuatkan dalam ruang <NAME> Sebagai contoh, anda boleh menghantar maklumat kepada browser mengenai tarikh matang sesuatu dokumen seperti berikut:
<META HTTP-EQUIV="Expires" CONTENT="1 January 2000 00:00:00 GMT">
Browser akan membaca maklumat ini sebagai: dokumen ini akan matang pada tarikh dan masa yang telah dituliskan. Maka laman ini akan dipadamkan daripada browser.
Tag lain yang temuncul dalam bahagian HEAD kadangkala termasuk:
a) ISINDEX yang menyediakan kata kunci mudah untuk pencarian;
b) BASE yang mendefinisikan URL asas berbanding dengan URL relatif;
c) LINK untuk mendefinisikan hubungan dengan dokumen lain;
d) SCRIPT, untuk memuatkan bahasa skrip baru yang sedang dibangunkan;
e) STYLE. Untuk memuatkan teg baru bagi stail baru yang sedang dibangunkan.
TAG BODY
Bahagian utama dokumen anda adalah kandungan yang terkandung dalam elemen BODY. Terkandung dalam bahagian ini adalah tajuk, perenggan, askara tertentu, senarai, imej, hyperlinks dan sebagainya. Tag – tag ini adalah perlu untuk mencorakkan reka bentuk, lakaran dan ciri paparan dokumen tersebut yang akan dipaparkan oleh browser. Di bawah ini di bincangkan secara ringkas beberapa tag asas BODY yang perlu anda ketahui.
HTML mempunyai 6 paras tajuk atau heading (bernombor 1 hingga 6) dimana nombor 1 adalah heading yang paling terbesar. Heading akan dipaparkan dalam saiz font yang lebih besar dan ditebalkan daripada font yang lain. Syntax untuk elemen heading adalah seperti berikut:
<Hy> Tajuk dokumen</Hy>
dimana y merujuk kepada nombor 1 hingga 6 - yang menentukan paras heading.
Tidak seperti pemproses kata biasa, kekunci Return tidak memberi apa - apa makna atau kesan. Malahan jika anda memuatkan spaces, tabs dan return, ia akan dibaca sebagai satu ruang kosong sahaja oleh browser. Jadi anda tidak perlu bimbang jika barisan ayat anda adalah panjang. Dalam contoh di bawah ini, browser akan membaca ayat-ayat berikut sebagai satu perenggan.
<P> Selamat Datang ke dunia HTML.
Ini cuma perenggan pertama.
Walaupun isinya ringkas
ia adalah satu perenggan.</P>
Perhatikan bahawa browser tidak akan membaca ruang pemisah antara ayat-ayat. Setiap perenggan perlu dimulakan dengan teg <P> dan diakhiri dengan tag </P>. Anda boleh mengenepikan tag </P> jika anda meneruskan penulisan dengan menggunakan perenggan baru yang ditandakan dengan tag <P>.
Anda boleh menempatkan perenggan anda di tepi, tengah dan kanan dokumen dengan menulis attribute ALIGN=alignment dalam fail anda. Sebagai contoh, jika anda mahu meletakkan perenggan di tengah-tengah halaman, maka anda tulis seperti berikut:
<TT><P ALIGN=CENTER></TT>
Perenggan ini akan diketengahkan.
</P>
Untuk menempatkan perenggan ke kanan, gunakan ALIGN=RIGHT, dan ke kiri ALIGN=LEFT. Jika ciri ALIGN tidak ditulis, maka perenggan akan dikirikan.
HTML menyediakan senarai bernombor, tanpa bernombor dan senarai berdefinisi.
· Senarai Tanpa Nombor:
Untuk membuka senarai tanpa nombor:
1. mulakan dengan tag <UL>
2. masukkan <LI> atau butiran senarai satu persatu
3. akhiri senarai dengan tag </UL>
Contoh senarai yang mengandungi tiga butiran:
<UL>
<LI> Ekonomi
<LI> Perniagaan
<LI> Perakaunan
</UL>
Paparan dalam browser adalah seperti berikut:
- Ekonomi
- Perniagaan
- Perakaunan
Senarai boleh mengandungi beberapa perenggan. Pastikan anda menulis <P> untuk menunjukkan perenggan baru.
· Senarai bernombor:
Senarai bernombor (kadangkala dipanggil ordered list) sama seperti senarai tanpa nombor, cuma tegnya adalah <OL>. Tuliskan teg sebagaimana yang diatas. Contoh senarai yang bernombor adalah:
<OL>
<LI> Ekonomi
<LI> Perniagaan
<LI> Perakaunan
</OL>
Paparan dalam browser adalah seperti berikut:
1. Ekonomi
2. Perniagaan
3. Perakaunan
· Senarai Berdefinisi:
Untuk senarai berdefinisi kita gunakan teg <DL> yang memelrlukan teg sampingan <DT> dan definisi kepada definisi <DD>. Contoh senarai berdefinisi adalah seperti berikut:
<DL>
<DT>FEP
<DD>FEP, Fakulti Ekonomi dan Pengurusan, Universiti Putra Malaysia, 43400 Serdang Selangor, Malaysia.
<DT>Persatuan Ekonomi Pertanian Malaysia (PETA)
<DD>PETA, Fakulti Ekonomi dan Pengurusan, Universiti Putra Malaysia, 43400 Serdang Selangor, Malaysia.
</DL>
Paparannya dalam browser adalah seperti berikut:
FEP
FEP, Fakulti Ekonomi dan Pengurusan, Universiti Putra Malaysia, 43400 Serdang Selangor, Malaysia
Persatuan Ekonomi Pertanian Malaysia (PETA)
PETA, Fakulti Ekonomi dan Pengurusan, Universiti Putra Malaysia, 43400 Serdang Selangor Malaysia
·
senarai Bersarang:
Senarai bersarang ditulis seperti berikut:
<UL>
<LI>Senarai Kursus <UL> <LI>Perniagaan Runcit <LI> Pemasaran <LI> Pengurusan Projek
</UL>
<LI>Senarai Penyelidikan
<UL>
<LI> Kajian Pasaran Saham
<LI> Kajian Pasaran Hadapan
</UL>
</UL>
Paparan senarai bersarang adalah seperti berikut:
Senarai Kursus
- Perniagaan Runcit
- Pemasaran
- Pengurusan Projek
Senarai Penyelidikan
- Kajian Pasaran Saham
- Kajian Pasaran Hadapan
Gunakan tag <PRE> (yang bermakna praformat) untuk menghasilkan format font yang telah ditetapkan terlebih dahulu. Tag ini juga membolehkan anda menentukan bilangan spaces, barisan baru, tabs dan pemisahan ayat dan ungkapan. Ia dalah sesuai untuk menyenaraikan program. Sebagai contoh lihat tag berikut:
<PRE> #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </PRE>
akan dipaparkan sebagai:
#!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm *
Tag <PRE> boleh digunakan dengan pilihan WIDTH yang akan menentukan bilangan maksimum aksara bagi sesuatu barisan. WIDTH juga boleh digunakan untuk memberi tahu browser jenis font yang akan digunakan dan indentasi teks yang diperlukan.
Gunakan tag <BLOCKQUOTE> untuk memuatkan petikan yang panjang. Kebanyakan browser akan mengubah margin petikan tersebut untuk memisahkannya daripada teks yang lain. Sebagai contoh,
<P>Perhatikan petikan ini.</P> <BLOCKQUOTE> <P>Manfaat Teknologi Maklumat tidak terletak pada teknologi atau maklumatnya. Hakikatnya, manfaat TM bergantung kepada kebijaksanaan masyarakat menerimapakai TM dalam pelbagai aspek kehidupan terutama pembelajaran, pengajaran dan menguasai pengetahuan. </P> <P>--Tanpa Nama , 1998 </P> </BLOCKQUOTE>
Outputnya adalah seperti berikut:
Perhatikan petikan ini .
Manfaat Teknologi Maklumat tidak terletak pada teknologi atau maklumatnya. Hakikatnya, manfaat TM bergantung kepada kebijaksanaan masyarakat menerimapakai TM dalam pelbagai aspek kehidupan terutama pembelajaran, pengajaran dan menguasai pengetahuan.
-- Tanpa Nama, 1998
Tag <BR> memastikan bahawa satu barisan ayat atau ungkapan dipisahkan dengan barisan yang lain tanpa sebarang ruang antaranya. Sebagai contoh, katakan anda ingin menulis alamat, maka tag yang sesuai adalah seperti berikut::
Fakulti Ekonomi dan Pengurusan <BR> 43400 Serdang Selangor Malaysia<BR> Tel; 603 – 9486101 ext. 1666<BR>
Paparannya adalah:
Fakulti Ekonomi dan Pengurusan
43400 Serdang Selangor Malaysia
Tel: 603 – 9486101 ext. 1666
Tag <HR> menghasilkan garis lurus mengikut saiz tetingkap komputer anda. Garisan lurus adalah sesuai untuk memisahkan bahagian-bahagin dalam dokumen anda. Anda boleh menentukan ketebalan garisan dan kelebaran garisan (mengikut peratus daripada lebar skrin komputer). Anda perlu mencuba beberapa kali untuk mendapat saiz yang bersesuaian dengan skrin. Sebagai contoh:
<HR SIZE=4 WIDTH="50%">
HTML mempunyai dua jenis stail untuk perkataan dan ayat; iaitu logikal dan fizikal. Teg untuk teks “stail logikal” adalah mengikut maknanya dan stail fizikal menunjukkan corak tertentu sesuatu bahagian. Sebagai contoh, dalam ayat ini ungkapan “stail logikal” adalah ditekankan. Anda boleh memformatkan ungkapan ini supaya ia tertulis dalam italik dengan memebritahu browser supaya teks itu ditulis dalam italik.
Stail Logikal vs Stail Fizikal
Antara tag untuk stail logikal adalah:
<DFN>
untuk perkataan yang didefinisikan akan dipaparkan dalam italik.
<EM>
untuk penekanan – akan dipaparkan dalam italik.
<CITE>
untuk tajuk buku, filem dsbnya akan dipaparkan dalam italik. <CODE>
untuk kod komputer akan dipaparkan dalam font yang tetap lebarnya.
<KBD>
untuk kemasukan daripada papan kekunci akan dipaparkan dalam font yang tetap lebarnya.
<SAMP>
untuk askara yang berturutan – akan dipaparkan dalam font yang tetap lebarnya.
<STRONG>
untuk penekanan – paparan yang tebal.
<VAR>
untuk pembolehubah untuk menggantikan pembolehubah yang memiliki maklumat khusus – akan dipaparkan dalam italik.
Stail Fizikal
<B>
teks tebal
<I>
teks italik
<TT>
teks mesin taip yang tetap lebarnya
(g) Entiti Askara
Askara mempunyai dua fungsi:
- Mengelakkan penggunaan askara khusus
- Memaparkan askara yang tidak wujud dalam set askara ASCII
Dalam HTML ketiga askara ASCII iaitu (<), (>), dan ampersand (&) membawa makna tertentu – maka ia tidak boleh digunakan dalam teks. (<), (>) digunakan sebagai pembuka dan penutup teg HTML dan ampersand digunakan untuk menunujukkan permulaan untuk langkah mengelakkan turutan. Tanda “ digunakan sebagai makana sebenar dan juga sebagai entiti askara (“).
Untuk menggunakan salah satu daripada aksara di atas dalam dokumen HTML, anda perlu menggunakan turutan elakan seperti berikut:
< turutan elakan untuk <
> turutan elakan untuk >
& turutan elakan untuk &
Nota: Tidak seperti teg HTML yang lain, turutan elakan perlu ditulis dalam huruf kecil.
No comments:
Post a Comment