Salam 1malaysia. Pengetahuan tentang
HTML dan
CSS adalah sangat penting dalam membina template blogger. Aku ingin menerangkan asas sahaja dalam tutorial ni, kalau ada yang korang tak paham, boleh tanya di ruangan komen ye. HTML atau nama lainnya Hypertext Markup Language boleh dianggap sebagai tulang rangka/badan sesebuah rupa bentuk blog. Manakala CSS atau nama lainnya Cascading Style Sheet pula boleh dianggap sebagai alat solek bagi mencantikkan website/blog.
HTML
Korang boleh rujuk website seperti
w3school bagi mendapatkan kod kod(attributes) html yang lebih banyak kerana aku hanya nak bagi penerangan asas sahaja.
Untuk memudahkan pembelajaran yang seterusnya, aku akan mulakan dengan pautan html(
html links). Kod bagi pautan html dimulakan dengan tag <a> iaitu bermaksud anchor. Sebagai contoh, Super
Dorky Guy adalah hensem. Ada nampak tak pautan pada perkataan "Dorky Guy" tu? bila diklik kan, korang akan dibawa ke blog si dorkyguy yang hensem kan? Secara asalnya ia ditulis dalam mode html dan kelihatan seperti ini, Super <a href="http://dorkyguy.blogspot.com/">Dorky Guy</a> adalah hensem. Nampak? pemulaan pautan di mulakan dengan tag <a>.
Seterusnya korang nampak dalam kod itu terdapat satu lagi kod/attribute iaitu "href". href bermaksud
hyperlink reference iaitu kod untuk meletakkan URL yang ingin ditujukan. Dan sebelom penutupan pautan </a> korang lihat perkataan "Dorky Guy" di tengah-tengah kod tersebut. Nampak? Di situ juga korang boleh tukarkan kod gambar bagi menggantikan perkataan Dorky Guy dengan gambar yang dikehendaki. Aku akan terangkan caranya selepas ini.
Sekarang saya akan menunjukkan kod bagi meletakkan gambar. Tag attribute untuk gambar adalah "img" dimana bermaksud image. Kod tersebut adalah seperti berikut <img src="url gambar korang" />. sebagai contoh kod yang aku nak tunjukkan <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9NrN64uL8cs-MaT_58Tp3X6pZaI3BOba2ucHyDoQVGOAgZIxxtQlqMfzEfRsfL2-bC1PrlsOVC5spZZ7ap56-PJ-WhG45MVXm1jvBn3h-s0i0jCA5sIjuqCEriTV7vBcBJBxDuqjQYKT/s1600/gambar-yang-kacak.gif" /> gambar yang bakal dilihat adalah seperti berikut:
Korang cuba lihat code tersebut. selepas tag "img" ada tag "src" kan? src bermaksud source atau dalam bahasa melayunya sumber. Sumber gambar iaitu url gambar itu berada.
Untuk memasukkan pautan pada gambar, korang boleh tambahkan kod pautan sebelom kod pautan. Ia kelihatan seperti ini <a href="url yang dituju"><img src="url sumber gambar" /></a>. Nampak tak? Dari penggunaan perkataan "Dorky Guy" aku dah gantikan dengan kod html gambar disitu.
Ok disini sedikit asas yang korang perlu tahu sebagai seorang yang bukan dari aliran IT(sama macam aku). Untuk kod kod lain, korang boleh rujuk
w3school. Untuk lebih memahami, korang boleh cuba dulu diblog masing-masing. Jika ada masalah boleh bertanya saya di ruangan komen. Pada entri seterusnya aku akan bincangkan tentang asas CSS.
nota:
a = anchor
href = hyperlinks reference
img = image
src = source
Setiap tag/attribute perlu ditutup dengan attributenya juga. contoh <p> perlu ditutup dengan </p> jika <b> perlu ditutup dengan </b> jika <title> perlu ditutup dengan </title>. Sila google untuk maklumat yang lebih mendalam.
