Tutorial ini menggunakan HTML Editor yang terdapat di http://htmledit.squarefree.com/.
Anda juga boleh menggunakan apa jua jenis HTML Editor lain yang anda tahu.
1. Berikut adalah contoh HTML Editor yang mengandungi 2 panel; Panel di atas (biru) mengandungi kod HTML manakala panel di bawah (putih) mengandungi output iaitu hasil terjemahan kod HTML di atasnya.
2. Dalam contoh di atas kod "<h3>Welcome to the real-time HTML editor!</h3>" telah diterjemah kepada paparan berwarna hitam dan tebal. Tag <h3>...</h3> bermaksud Heading Level 3. HTML mengandungi Level 1 hingga Level 6. Melalui penggunaan tag Heading ini, pengguna akan faham kedudukan teks ini di dalam struktur kandungan sesebuah Dokumen Web.
2. Dalam contoh di atas kod "<h3>Welcome to the real-time HTML editor!</h3>" telah diterjemah kepada paparan berwarna hitam dan tebal. Tag <h3>...</h3> bermaksud Heading Level 3. HTML mengandungi Level 1 hingga Level 6. Melalui penggunaan tag Heading ini, pengguna akan faham kedudukan teks ini di dalam struktur kandungan sesebuah Dokumen Web.
3. Cuba ubahsuai kod <h3>Welcome to the real-time HTML editor!</h3> kepada <h3>Selamat Datang!</h3>, anda akan mendapat paparan seperti berikut.
4. Dalam contoh di atas, kita telah menukarkan kandungan yang berada di antara tag <h3> dan </h3> dan mendapat hasil yang baru. Secara default, <h3> akan memaparkan kandungannya dalam saiz yang besar, tebal dan berwarna hitam.
5. Adakalanya, kita mahu paparan dalam format yang berbeza. Contohnya, kita mahu teks di atas berwarna merah. Maka di sini, kita memerlukan peranan Cascading Style Sheet (CSS).
6. Ubahsuai pula seperti berikut, <h3 style="color:red;">Selamat Datang!</h3>. Perhatikan penambahan kod style="color:red;". Lihat hasil di bawah.
7. Dalam contoh di atas, kita telah menukarkan warna default kepada warna merah dengan menggunakan kod CSS. Kaedah memasukkan kod CSS ke dalam tag HTML dipanggil inline styling iaitu memasukkan kod penggayaan secara terus ke dalam elemen HTML.
8. Kita juga boleh memisahkan kod CSS dan HTML seperti berikut,
| <style> h3 { color:red; } </style> <h3 class="tajuk">Selamat Datang!</h3> |
9. Dalam contoh di atas, kita telah memisahkan kod CSS dan HTML. kod CSS yang terpisah ini berada di dalam tag <style>...</style>. Untuk menghubungkan style ini dengan elemen HTML, kod CSS ditulis seperti berikut
h3 {color:red;}
Maksudnya, cari elemen <h3> dan berikan sifat warna merah (red).
No comments:
Post a Comment