asas -asas html - learningict.files.wordpress.com · merupakan singkatan kepada hypertext markup...

F3026 – WEB AUTHORING 1

Objektif

2.1 Pengenalan kepada HTML 2.5 Stail tag

2.2 Kod-kod HTML 2.6 Garis melintang

2.3 Format tek HTML 2.7 Imej (grafik)

2.4 Tag berstruktur 2.8 Pautan (linking)

ASASASAS--ASASASAS HTMLHTML

* Klik pada tajuk untuk keterangan selanjutnya*


Asas-asas HTML

Objektif

• Memahami HTML, peraturan tag HTML, tag berstruktur, stail

tag dan bagaimana untuk memautkan laman web.

• Menulis kod HTML yang asas berdasarkan struktur asas dan

stail tag HTML.


Asas-asas HTML

2.1 Pengenalan kepada HTML

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk

membina dokumen berasaskan web.

Dicipta oleh Tim Berners-Lee, seorang ahli fizik di CERN, Geneva.

Bahasa ini difahami oleh semua sistem komputer yang mempunyai sistem

pengoperasian yang berbeza.

HTML boleh ditaip di Notepad di Windows, Bbedit di Macintosh dan Emac

atau vi di Unix.

Fail HTML diakhiri dengan format .HTML.

Pelayar web seperti Netscape membaca dokumen HTML dan menentukan

bagaimana ia akan dipaparkan di skrin.

HTML bergantung kepada tag bertanda (markup tags) untuk mengenalpasti

blok perkataan.

Asas-asas HTML

2.2 Kod-kod HTML

Dokuman HTML adalah fail teks biasa, bezanya ialah ia mempunyai kod-kod

tertentu yang di namakan tag HTML yang boleh di terjemahkan oleh pelayar

web sebagai sekumpulan arahan.

2.2.1 Tag HTML

Tag menentukan teks yang mana satu akan dipaparkan sebagai tajuk,

bagaimana perenggan di format, di mana grafik akan ditempatkan, dan

bagaimana untuk membuat pautan (link) ke halaman WWW yang lain.

Contoh: This text will be displayed in Bold 

Teks ini akan dipaparkan sebagai tulian tebal (bold) oleh pelayar web di skrin

Asas-asas HTML

Tag bertanda selalunya berpasangan.

Tag Pembuka : Dimulakan dengan simbol “kurang daripada” (<), nama tag,

diikuti dengan simbol “lebih besar daripada” (>).

Contohnya .

Tag Penutup : Dimulakan dengan simbol “kurang daripada” (<),

simbol palang (/),nama tag, diikuti dengan simbol “lebih besar

daripada” (>). Contohnya .

Asas-asas HTML

2.2.2 Asas HTML

Setiap dokumen HTML mesti mengandungi:

(1) Head

Mengandungi tajuk dan keterangan tentang dokumen tersebut.

Terletak diantara tag <HEAD> dan </HEAD>.

(1)Body

Mengandungi teks, senarai, jadual, imej, tag penanda dan elemen-

elemen lain.

Terletak diantara tag <BODY> dan </BODY>.

Tag-tag asas yang diperlukan oleh pelayar web ialah <HTML>,

<HEAD>, <TITLE> dan <BODY>.

Asas-asas HTML

2.2.2.1 Tag <HTML>

Taip tag <HTML> di bahagian paling atas di dalam fail anda.

Ia memberitahu pelayar web bahawa dokumen ini ditulis di dalam

HTML.

Kedua- dua tag di bawah mesti berada di setiap dokumen HTML.

<HTML>

</HTML>

Asas-asas HTML

2.2.2.2 Tag <HEAD>

Mengenal pasti serta menanda maklumat di dalam dokumen HTML

sebagai tajuk dokumen.

Tag-tag HTML yang dibenarkan berada di antara tag <HEAD> dan

</HEAD> ialah <TITLE>, <BASE>, <META>, <STYLE>, dan <LINK>.

Taip tag <HEAD> selepas tag <HTML> diikuti dengan tag </HEAD>

dibaris seterusnya.

<HTML>

<HEAD>

</HEAD>

</HTML>

Untuk mencipta tajuk di dokumen HTML.

Tajuk tersebut akan dipaparkan di bar tajuk pelayar web.

Terletak diantara tag <HEAD> dan </HEAD>.

Contoh: <TITLE> Laman Web Pertama </TITLE>.

2.2.2.3 <TITLE>

<HTML>

<HEAD>

<TITLE> Laman Web Pertama

</TITLE>

</HEAD>

</HTML>

Output terpapar di bar

tajuk pelayar

Asas-asas HTML

Asas-asas HTML

<HTML>

<HEAD>

<TITLE> Laman Web Pertama </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Semua isi kandungan tapak web (web site) ditempatkan di sini.

Taip tag <BODY> selepas tag </HEAD>.

Akhiri seksyen dengan menaip tag </BODY> sebelum tag </HTML>.

Tag-tag dan kod-kod HTML akan ditempatkan di antara kedua-dua tag ini.

Kedudukan tag <BODY>

2.2.2.4 Tag <BODY>

Asas-asas HTML

<HTML>

<HEAD>


</TITLE>

</HEAD>

<BODY>

Selamat Datang…

</BODY>

</HTML>

Sekarang, dokumen HTML anda telah diformat tetapi tidak mengandungi isi

kandungan.

Taip teks diantara tag <BODY>…..</BODY>. Contoh: Selamat Datang…

Output yang terhasil apabila

perkataan Selamat Datang…

diletakkan di antara <BODY> dan

</BODY>


Asas-asas HTML

Berikut ialah tag stail fizikal dan tag stail logikal untuk memformat teks HTML:

Stail Fizikal – Digunakan untuk menakrif atribut seperti menebalkan (bold),

condong (italic), dan bergaris (underline).

Stail Logikal – digunakan di dalam badan (body) dokumen untuk

menunjukkan atribut seperti tajuk utama (heading), justifikasi perenggan

dan penggunaan pra-format.

2.3 Format teks HTML

<HTML>

<HEAD>


</TITLE>

</HEAD>

<BODY>

 Selamat Datang... 

</BODY>

</HTML>

Asas-asas HTML

Digunakan untuk tajuk, sub tajuk atau sebagai salah satu cara untuk menarik

perhatian pembaca.

Teks yang berada di antara tag-tag ini akan dipaparkan sebagai huruf tebal.

Kod HTML: Taip teks di antara tag dan .

Contoh:

Teks Selamat Datang…

telah ditebalkan

2.3.1 Memformat teks HTML – stail fizikal

2.3.1.1 Penggunaan Tag B

Asas-asas HTML

<HTML>

<HEAD>


</HEAD>

<BODY>

 Selamat Datang... 

</BODY>

</HTML>

Untuk mengubah teks menjadi condong.

Taip teks di antara tag dan .

Contoh:

Teks Selamat datang…

telah dicondongkan

2.3.1.2 Penggunaan tag I

Asas-asas HTML

<HTML>

<HEAD>


</HEAD>

<BODY>

 Selamat Datang... 

</BODY>

</HTML>

Untuk menggariskan teks di dalam laman web.

Kod HTML: Taip teks di antara tag dan .

Tidak semua pelayar web menyokong penggunaan tag ini.

Contoh:

Teks Selamat Datang…

telah digariskan

2.3.1.3 Penggunaan tag U

Asas-asas HTML

Teks akan diformat sebagai superscript ( Saiz teks lebih kecil dan

kedudukannya lebih tinggi daripada baris teks biasa).

Selalu digunakan di dalam persamaan matematik atau nota kaki.

Kod HTML: Taip teks di antara tag dan .

Contoh:

<HTML>

<HEAD>

<TITLE> Second Web page </TITLE>

</HEAD>

<BODY>

Keluasan : 200 m 2 

<BODY>

</HTML>

Teks Superscript

2.3.1.4 Penggunaan tag SUP

Asas-asas HTML

Teks akan diformat sebagai subscript ( Saiz teks lebih kecil dan

kedudukannya lebih rendah daripada baris teks biasa).

Selalu digunakan di dalam formula saintifik.

Kod HTML: Taip teks di antara tag dan .

Contoh:

<HTML>

<HEAD>

<TITLE> Second Web Page </TITLE>

</HEAD>

<BODY>

Math equation : 2Y2-4

</BODY>

</HTML>

Teks Subscript

Output

2.3.1.5 Penggunaan tag SUB


Asas-asas HTML

Cara pengguna memaparkan teks berdasarkan kecenderungan

mereka.

Menjadikan dokumen anda mudah untuk di fahami dan

dikemaskini.

Setiap pelayar web menentukan bagaimana tag stail logikal akan

dipaparkan.

Setiap pelayar web mungkin menafsirkannya berbeza.

Sekiranya teks tersebut tidak berubah di skrin, ia bermakna

pelayar web yang anda gunakan tidak menyokong stail itu.

2.3.2 Memformat teks HTML – stail logikal

Asas-asas HTML

Digunakan untuk membuat tajuk

utama (heading).

Tajuk utama akan mengasingkan

seksyen di dalam satu

mukasurat.

Tajuk utama mempunyai

peringkat 1 hingga 6.

Panjang tajuk utama tiada had, ia

akan turun ke barisan seterusnya

sekiranya teks melebihi saiz

tetingkap .

Sekiranya anda lupa menaip tag

penutup, semua teks akan

menjadi sebahagian daripada

kepala (header).

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1> Tajuk Utama Saiz 1 </H1>






</BODY>

</HTML>

Contoh:

Output

2.3.2.1 Penggunaan tag H

* Sila klik pada perkataan output untuk melihat output yang dihasilkan*

Asas-asas HTML

Digunakan untuk membuat perenggan.

Tanpa tag , semua teks akan menjadi satu perenggan sahaja.

Ia beritahu pelayar web untuk selang satu baris dan mulakan dengan

perenggan baru.

Contoh:

<HTML>

<HEAD>


</HEAD>

<BODY>

Secara ringkasnya ada dua teknologi yang memberi

tenaga kepada internet: HTTP dan HTML. HTTP ialah

singkatan kepada Protokol Alihan Hyperteks dan HTML

merupakan singkatan kepada Hypertext Markup Language.

</BODY>

</HTML>

Output

2.3.2.2 Penggunaan tag P

Asas-asas HTML

Digunakan untuk menukar justifikasi perenggan atau teks.

Taip ALIGN diikuti dengan justifikasi.

Memformat perenggan menjadi justifikasi-kanan (right-justified):

Taip 

Memformat perenggan menjadi justifikasi-kiri (left-justified):

Taip 

Memformat perenggan ditengah-tengah (centered):

Taip 

Memformat perenggan menjadi selari (justified):

Taip 

2.3.2.3 Penggunaan tag ALIGN

Sambungan…

Asas-asas HTML

<HTML>

<HEAD>


</HEAD>

<BODY>

Secara ringkasnya ada dua teknologi yang memberi

tenaga kepada

internet: HTTP dan HTML. HTTP ialah singkatan

kepada ProtokolAlihan Hyperteks dan HTML merupakan singkatan

kepada Hypertext Markup Language. Protokol

HTTP digunakan untuk memancarkan laman web dari pelayan web

agar dapat dilihat melalui komputer lain.HTML

pula digunakan untuk membina laman web.

</BODY>

</HTML>

Contoh:

Output

Asas-asas HTML

Tag baris henti (line break) menghasilkan baris kosong di mana

sahaja ia berada.

Teks seterusnya akan muncul di margin sebelah kiri baris

selepasnya.

Tiada baris kosong akan ditambah.

Baris henti boleh diletakkan di dalam mana-mana tag seperti tajuk

utama dan senarai item.

Tag tiada henti (no break) akan menghalang baris dipisah-

pisahkan oleh pelayar.

Contoh: Taip teks disini .

Kod HTML: Taip teks diantara tag dan .

2.3.2.4 Penggunaan tag BR

Sambungan…

Output

Contoh:

<HTML>

<HEAD>

<TITLE> PANTUN </TITLE>

</HEAD>

<BODY>

Buah cempedak di luar pagar, 

Ambil galah tolong jolokkan, 

Kami budak baru belajar, 

Kalau salah tolong tunjukkan.

</BODY>

</HTML>

Asas-asas HTML

Asas-asas HTML

Gunakan teks pra-format (preformatted) sekiranya anda mahu susunan teks di

dalam fail HTML anda kelihatan sama seperti dalam pelayar WWW.

Semua tag yang terletak diantara tag <PRE> dan </PRE> akan muncul sama

seperti di Netscape dan di Internet Explorer.

Tajuk utama dan perenggan tidak beroperasi di dalam tag pra-format.

Contoh:

<HTML> <HEAD>

<TITLE> Markah Terkini - DMA 501

</TITLE>

</HEAD> <BODY>

<PRE>

 NAMA KUIZ(10%) UJIAN (20%) 

Nur Huda 8 18

Amirul 7 15

Fatini 5 16

</PRE>

</BODY>

</HTML>

Output

2.3.2.5 Penggunaan tag PRE

Asas-asas HTML

Tag pembuka <DL> dan tag penutup </DL>.

Setiap item mempunyai satu tag pembuka. Tiada tag penutup.

Pelayar akan memaparkan istilah (term) dalam satu baris manakala

definasi di baris yang lain.

Tag-tag yang terlibat:

<DL> - Membuka senarai definisi (definition list)

<DT> - Membuka setiap definisi istilah (definition term)

<DD> - Membuka definisi bagi setiap istilah (term)

</DL> - Menutup senarai definisi (definition list)

2.4 Tag berstruktur

Tag berstruktur ialah tag yang melabel beberapa jenis isi kandungan,

pelayar atau stail lampiran (custom style sheets), ia mengawal bagaimana ia

akan kelihatan di tetingkap pelayar.

2.4.1 Senarai definisi (definition list)

Asas-asas HTML

<HTML>

<HEAD>

<TITLE> SENARAI </TITLE>

</HEAD>

<BODY>

<DL>

<DT> Tag DL <DD> Membuka senarai definisi.

<DT> Tag DT <DD> Membuka setiap definisi istilah.

</DL>

</BODY>

</HTML>

Contoh:

Istilah Definisi

Output

Asas-asas HTML

• Digunakan untuk memaparkan item dalam bentuk

nota.

• Memasukkan bullet berbentuk grafik di hadapan

setiap item.

• Saiz dan jenis bullet yang digunakan ditentukan oleh

pelayar web.

• Untuk membuat senarai tajuk utama, taip

<HL>…</HL>.

• Tag pembuka ialah <UL>.

• Setiap item dibuka dengan tag <LI>.

• Tag <LI> tiada tag penutup.

• Setiap item di set dengan bullet.

• Senarai ini ditutup dengan tag </UL>.

2.4.2 Senarai yang tidak tersusun atau senarai bullet

Digunakan untuk memaparkan

item dalam bentuk nota.

Memasukkan bullet berbentuk

grafik di hadapan setiap item.

Saiz dan jenis bullet yang

digunakan ditentukan oleh

pelayar web.

Untuk membuat senarai tajuk

utama, taip <HL>…</HL>.

Tag pembuka ialah <UL>.

Setiap item dibuka dengan tag

<LI>.

Tag <LI> tiada tag penutup.

Setiap item di set dengan bullet.

Senarai ini ditutup dengan tag

</UL>.

Contoh:

<HTML> <HEAD>

<TITLE> SENARAI </TITLE>

</HEAD> <BODY>

<HL> Produk-produk Macromedia: </HL>

<UL>

<LI> Dreamweaver 4.0

<LI> Fireworks 4.0

<LI> Flash 5.0

</UL>

</BODY> </HTML>

Output

2.4.2 Senarai yang tidak tersusun atau senarai bullet

Asas-asas HTML

Asas-asas HTML

Senarai tersusun digunakan untuk menyusun maklumat.

Nombor atau aksara akan ditambah secara automatik di hadapan

setiap item.

Taip <HL>…</HL> untuk membuat tajuk utama senarai.

Tag pembuka ialah <OL>.

Untuk menukar senarai penomboran yang sedia ada, taip kata kunci

TYPE di dalam tag <OL>. Berikut ialah lima jenis senarai yang boleh

digunakan sebagai sistem penomboran:

- <OL TYPE=1> : Sistem penomboran yang piawai (1,2,3…)

- <OL TYPE=A> : Huruf besar (A,B,C…)

- <OL TYPE=a> : Huruf kecil (a,b,c…)

- <OL TYPE=I> : Sistem penomboran Roman – huruf besar.

(I,II,III…)

- <OL TYPE=i> : Sistem penomboran Roman – huruf besar

(i,ii,iii,iv..)

Setiap item dibuka dengan tag <LI>.

Tag <LI> tidak mempunyai tag penutup.

Senarai ini ditutup dangan tag </OL>.

2.4.3 Senarai tersusun

Asas-asas HTML

Contoh 1: Menggunakan sistem pernomboran yang piawai (1,2,3…).

<HTML> <HEAD>

<TITLE> RESIPI </TITLE></HEAD> <BODY>

<HL> Cara-cara membuat air limau ais </HL><OL>

<LI> Ambil sedikit perahan limau kasturi.<LI> Campurkan perahan limau kasturi bersama-sama dengan air gula dan air.

<LI> Masukkan ais dan boleh dihidang.

</OL></BODY> </HTML>

Output

<HTML> <HEAD>

<TITLE> RESIPI </TITLE></HEAD> <BODY>

<HL> Cara-cara membuat air limau ais </HL><OL TYPE=i>

<LI> Ambil sedikit perahan limau kasturi.<LI> Campurkan perahan limau kasturi bersama-sama dengan air gula dan air.

<LI> Masukkan ais dan boleh dihidang.

</OL></BODY> </HTML>

Asas-asas HTML

Contoh 2: Menggunakan Sistem Penomboran Roman (i,ii,iii).

Output

Asas-asas HTML

Membenarkan anda membentuk senarai yang berperingkat.

Contoh: untuk membentuk item atau garis bentuk

(outline) berhirarki.

Prosesnya sama seperti membuat senarai tunggal (single list).

Taip <HL>…</HL> untuk membuat senarai tajuk utama.

Anda boleh gunakan tag <OL> atau <UL> untuk membuka senarai.

Kemudian, masukkan senarai satu persatu menggunakan tag <LI>.

Tekan kekunci tab setiap kali anda ingin membuka senarai di peringkat

seterusnya di dalam fail HTML.

Pastikan anda taip tag </UL> untuk menutup setiap subsenarai dan

senarai utama.

2.4.4 Senarai di dalam senarai

Sambungan…

<HTML> <HEAD>

<TITLE> Senarai Bersarang </TITLE>

</HEAD> <BODY>

<HL> Jenis-jenis haiwan:</HL>

<OL>

<LI> Mamalia

<UL>

<LI>Kucing

<LI>Lembu

</UL>

<LI> Reptilia

<UL>

<LI>Ular

<LI>Cicak

</UL>

</OL>

</BODY> </HTML>

Asas-asas HTML

Output

Asas-asas HTML

Tag yang memberi arahan-arahan khas tentang penampilan elemen. Contoh:

- Baris henti (line breaks) 

- Tulisan (font) 

- Saiz tulisan <BIG> 

- Warna tulisan <BODY alink=> <BODY link=> <BODY text => 

- Stail tulisan <S> <STRIKE> <TT> 

- Placement <CENTER> <IMG align=>

Warna di fail HTML direkabentuk oleh nilai RGB (Hexadecimal color code):

Warna Kod Warna Kod

Hitam #000000 Kelabu #C0C0C0

Putih #FFFFFF Merah hati #8E046B

Kuning #FFFF00 Hijau #00FF00

Merah #FF0000 Merah Lembayung (Magenta) #880088

Biru #0000FF Biru firus (Cyan) #008888

2.5 Stail tag

Asas-asas HTML

Pelayar membenarkan anda memilih 16 warna yang berbeza. Warna-warna

tersebut ialah: Hitam, Biru tua (Navy), Perak, Biru, Merah hati, Ungu, Merah,

Fuchsia, hijau, Teal, Lime, Aqua, Olive, kelabu, kuning dan putih.

Anda boleh mencipta warna baru dengan menggabungkan warna hijau,

merah dan biru.

Contoh 1: Menukar warna teks yang dikehendaki.

<HTML>

<HEAD>

<TITLE>Peribahasa </TITLE>

</HEAD>

<BODY>

 " Yang dikejar tak dapat,

yang dikendong berciciran" 

<HR>

 

Peribahasa Melayu 

</BODY>

</HTML>

Output

2.5.1 Menukar warna teks

<HTML>

<HEAD>


</HEAD>

<BODY TEXT = RED>

" Yang dikejar tak dapat, yang

dikendong berciciran"

<HR>

 Peribahasa Melayu

</BODY>

</HTML>

Contoh 2: Menukar warna teks bagi keseluruhan halaman.

Taip TEXT=keyword di dalam tag BODY seperti contoh berikut:

<BODY TEXT=RED>.

Output

Asas-asas HTML

Asas-asas HTML

Warna boleh digunakan sebagai latarbelakang untuk dokumen HTML.

Anda juga boleh gunakan grafik sebagai latarbelakang.

Kod-kod HTML:

2.5.2 Membuat latarbelakang

Tag Pembuka Tag Penutup Fungsi

<BODY BGCOLOR=#FFFFFF> </BODY> BGCOLOR set warna

latarbelakang.

<BODY BACKGROUND=background.jpg> </BODY> BACKGROUND set

grafik sebagai

latarbelakang.

Sambungan…

Asas-asas HTML

<HTML> <HEAD>


</HEAD>

<BODY BGCOLOR=#FFFF00>

 " Yang dikejar tak dapat, yang dikendong berciciran" 

<HR>


</BODY> </HTML>

Output

Contoh:

Asas-asas HTML

Teks boleh dipaparkan dalam tujuh saiz yang berbeza bermula daripada 1

(terkecil) hingga 7 (terbesar).

Saiz tulisan yang ditetapkan ialah 3.

Taip teks di antara tag dan .

Contoh:

<HTML><HEAD>

<TITLE>Saiz </TITLE>

</HEAD><BODY>

 Teks ini bersaiz 7 







</BODY></HTML>

Output

2.5.3 Saiz tulisan

*Klik pada perkataan Output untuk melihat output yang dihasilkan*

Asas-asas HTML

Membenarkan pengguna menukar jenis tulisan.

Taip teks di antara tag dan .

Contoh :

<HTML>

<HEAD><TITLE>Saiz </TITLE>

</HEAD><BODY>

 Teks ini ditulis dalam tulisan berjenis Arial</BODY>

</HTML>

Output

2.5.4 Menukar jenis tulisan

Asas-asas HTML

Anda boleh memasukkan garis melintang (horizontal line) di dalam laman

web untuk mengasingkan grafik dan teks.

Tag Pembuka: <HR>, Tag Penutup: Tiada

Satu garis melintang akan terhasil merentangi skrin. Contoh: tag <HR>

selalunya di letakkan di atas alamat e-mel di laman web untuk

mengasingkannya daripada teks biasa.

Ia boleh diletakkan di mana-mana sahaja di dalam seksyen Body dokumen

HTML.

Salah satu teknik pengurusan laman web yang popular.

Panjang dan ketebalan garisan boleh diubah.

Atribut Size, Width, Align dan Noshade boleh dilaksanakan di Netscape

tetapi tidak di pelayar web yang lain.

2.6 Garis melintang (horizontal rule)

Sambungan…

<HTML> <HEAD>


</HEAD> <BODY>

 " Yang dikejar tak dapat, yang dikendong berciciran"

<HR SIZE =10>


</BODY> </HTML>

<HTML> <HEAD>


</HEAD> <BODY>

" Yang dikejar tak dapat, yang dikendong berciciran"

<HR>


</BODY> </HTML>

Asas-asas HTML

Contoh 2: Atribut size (piksel) digunakan untuk menentukan ketebalan garisan

Output

Contoh 1: Satu garis lurus

Output

Sambungan…*Klik pada perkataan Output untuk melihat output yang dihasilkan*

Asas-asas HTML

<HTML> <HEAD>


</HEAD> <BODY>


<HR WIDTH =60%>


</BODY> </HTML>

Contoh 3 : Atribut width diberi dalam bentuk peratus.

Output

<HTML> <HEAD>


</HEAD> <BODY>


<HR WIDTH =60% ALIGN=RIGHT>


</BODY> </HTML>

Contoh 4 : Atribut align digunakan untuk mengubah kedudukan teks sama ada

kiri, kanan atau tengah.

Output

Asas-asas HTML

Anda boleh gunakan dua jenis grafik dalam format GIF dan JPG.

Taip tag <IMG> apabila anda ingin memasukkan gambar atau animasi

ke dalam laman web.

Pastikan lokasi imej sama seperti rujukan di dalam tag <IMG>.

Kod HTML :

2.7 Imej (grafik)

Tag Pembuka Tag Penutup Fungsi

<IMG SRC=”graphic_file”> Tiada Memasukkan grafik ke dalam laman

web.

Sambungan…

Asas-asas HTML

<HTML> <HEAD>


</HEAD> <BODY>

<IMG

SRC="D:\LectureNotes\WEBAUTHORING(NEW_VERSION)\mentol.jpg">

 " Yang dikejar tak dapat, yang dikendong berciciran"



<HR>


</BODY> </HTML>

Contoh :

Output

Asas-asas HTML

Pautan (link) terdiri daripada teks atau grafik, lokasi baru (laman web) akan

dipaparkan sebaik sahaja anda klik pada pautan.

Tag anchor <A> digunakan untuk membuat hyperlink di dalam dokumen HTML.

Kod HTML : <A HREF =”Target”> </A>

Pastikan sertakan pautan kembali ke halaman asal (back link) untuk

memudahkan pelawat kembali ke halaman asal.

Dua jenis pautan (link):

(1) Pautan Teks

Ditunjukkan dalam bentuk teks berwarna biru dan bergaris. Apabila ia

disentuh oleh penuding tetikus, kursor akan berubah menjadi penuding jari

(pointing finger). Klik pada pautan dan laman web yang lain akan

dipaparkan.

(2) Pautan grafik

Dikenal pasti apabila penuding tetikus berubah daripada arrowhead kepada

penuding jari apabila penuding tetikus menyentuh grafik tersebut.

2.8 Pautan (linking)

Sambungan…

Asas-asas HTML

Contoh 1: Pautan teks.

<HTML> <HEAD>

<TITLE> Pautan </TITLE>

</HEAD> <BODY>

<H4> Pengenalan Kepada HTML </H4>

HTML digunakan untuk membangunkan

<A HREF="pautan2.html">laman web</A>

</BODY> </HTML>

<HTML> <HEAD>


</HEAD> <BODY>

<H4> LAMAN WEB </H4>

Laman web merupakan dokumen eletronik yang

mengandungi kombinasi teks, suara

dan grafik.

</BODY> </HTML>Output

<HTML> <HEAD>


</HEAD> <BODY>

Untuk melihat grafik, sila klik <A HREF ="mentol.jpg"> di sini.</A>

</BODY> </HTML>

Asas-asas HTML

Contoh 2 : Pautan grafik

Output

Asas-asas HTML

Anda boleh menukar warna hyperteks di pelayar web.

Kebiasaannya, hyperteks yang belum dilawati berwarna biru, hyperteks

yang telah dilawati berwarna ungu, dan hyperteks yang aktif berwarna

merah (dipaparkan dalam status aktif apabila pengguna klik pada

hyperteks).

Langkah-langkah untuk mengubah warna hyperteks:

Taip LINK=# diikuti dengan nilai RGB di dalam tag <BODY>.

Mengubah warna hyperteks yang telah dilawati :

Taip VLINK=# diikuti dengan nilai RGB di dalam tag <BODY>.

Mengubah warna hyperteks yang aktif :

Taip ALINK=# diikuti dengan nilai RGB di dalam tag <BODY>.

2.8.1 Menukar warna hyperteks

asas -asas html - learningict.files.wordpress.com · merupakan singkatan kepada hypertext markup...

Documents