Pengekodan HTML ~ Pena Nurhidayati

Minggu lepas, masa kelas Aplikasi Komputer Puan Hafiza ada bagi tahu yang kami semua akan belajar tentang data base dan HTML. Kedua-dua topik ini kemungkinan akan jadi topik Lab test 2 nanti, bersiap sedia la nak berperang otak dalam makmal komputer nanti. ~~Mimpi ngeri lab test 1 tak habis lagi.~~ 😁

Untuk post blog minggu ini, Nur nak cerita tentang HTML sebab Nur belajar buat HTML ini masa dulu awal-awal Nur belajar buat blog. Setiap perkara yang kita nak ubah dalam setting blog atau nak cantikkan blog, kita mesti menggunakan HTML. Jadi, sebelum Nur ajar macam mana nak cantikkan blog anda semua. Jom kita kenal apa itu HTML dulu. 😉

HTML...

HTML ini sebenarnya ayat singkatan bagi Hypertext Markup Languange. HTML ialah bahasa standard pemprograman untuk seseorang membuat laman web yang boleh diakses melalui Internet. Dalam erti kata lain, laman web yang kita lihat dan baca sekarang ini ialah susunan HTML yang telah diterjemahkan oleh komputer supaya mudah difahami oleh pengguna Internet.

TAG

HTML tag kebiasaannya dibuat secara berpasangan, itu tag pembuka < > dan tag penutup </ > yang perlu diletak pada bahagian awal dan akhir sesuatu konteks. Kalau setiap HTML yang kita buat tidak menggunakan tag yang betul (tag pembuka dan tag penutup), komputer tak dapat nak baca HTML itu dan akan jadi error.

Penggunaan HTML tag yang mesti ada dalam sesebuah laman web:

<HTML> : Tag permulaan kod aturcara bagi bahasa HTML

<HEAD> : Kebanyakan koding seperti Javascript, XML dan ASP dimasukkan dalam bahagian ini. Kebiasaannya "script" di dalam <HEAD> perlu dijalankan sebelum keseluruhan halaman dimuat turun sebagai persediaan.

</HEAD> : Penamat bagi <HEAD>

<BODY> : Sebarang koding yang ditulis di ruangan ini akan dipaparkan

</BODY> : Penamat bagi paparan

</HTML> : Penamat bagi bahasa HTML
---------------------------------------------------------------

<html>
<head>
<div>
<h1>Kelas Aplikasi Komputer</h1>
</h2>Jom belajar tentang HTML</h2>
</div>
</head>
<body>
<div>
<p>Perenggan 1</p><img src="png"alt="URL gambar">
<p>Perenggan 2 dan link<a href="https://example.com">hyperlink</a></p>
</div>
</body>
<html>

--------------------------------------------------------------

Division (div) : Unsur pada bahagian atas dan bawah (<div> </ div>) yang digunakan untuk menanda dalam bahagian kandungan yang lebih besar.
Heading (h)
Paragraph (p)
Atribut (a) : Unsur untuk meliputi sebuah link (<a> </a>) dengan attribut href="URL"

Nur pun masih tak pakar lagi dalam bab HTML ini, jadi Nur bagi tahu setakat yang Nur tahu dan pernah guna je sebab takut tersalah bagi maklumat pula. Tapi secara keseluruhannya, kalau kita nak buat HTML koding, ini laa aturcara yang asas perlu ada dalam HTML kita itu.

CARA UNTUK MENCANTIKKAN BLOG

Design Template

Nur akan ajar macam mana nak tukar template blog kita untuk nampak lagi menarik dan cantik! Seperti yang kita tahu, kalau nak tukar design template kita akan ikut langkah-langkah ini.

1. Log in ke dalam blog > klik Theme dan pilih design mana yang kita suka.

2. Klik Customise untuk tukar warna dan jenis tulisan mengikut kesukaan masing-masing.

3. Lepas dah siap setting, jangan lupa klik APPLY TO BLOG.

Itu step asas kalau kita nak tukar design template yang sedia ada dalam blogspot punya setting. Tapi kalau kita nak blog kita nampak lain daripada yang lain dan menarik, anda semua boleh cuba ikut langkah ini.

Download template

1. Buka Google dan cari Blogger Templates atau mana-mana template yang boleh download free.

2. Klik dan download template yang anda suka. File zip yang anda download itu kena Extract dulu dan simpan dalam file baru.

Download ke dalam Blog

1. Log in Blogspot > Theme > Backup/Restore (Bahagian atas sebelah kanan)

2. Kalau takut blog lama hilang, kita boleh je Download Back Up.

3. Selepas itu, klik Choose file untuk upload file template yang kita extract tadi. Upload file template yang jenis XML Document. Tekan UPLOAD dan SIAP!!

Customise Favicon

Kali ini Nur nak share pulak cara nak tukar favicon button yang dekat tab atas tu kepada icon yang kita nak. Mesti bosan asyik tengok button oren dengan Logo B saja setiap kali kita buka blog, kalau Nur pon bosan. Hari ini buat blog, kalau boleh esok itu terus nak tukar favicon. Hahahaha

Ini adalah bentuk favicon kepada sesiapa yang belum tahu lagi favicon itu apa. Nur nak ajar cara untuk tukar daripada favicon lama (1) kepada favicon baru (2).

1. Log in Blogspot> Layout> Favicon (bahagian atas sebelah kiri)
2. Klik edit> upload favicon yang kita dah download.
3. Klik upload dan SAVE!

Selain itu, kita juga boleh edit melalui HTML blog.
1. Log in Blogspot> Design> Edit html
2. Tekan CRTL+F untuk cari kod

<b:skin><![CDATA[/*

3. Kalau dah jumpa kod tadi, sila copy kod ini ▼ DI ATAS kod tadi.

<link href='URL image icon anda' rel='shortcut icon' type='image/gif'/>

4. Sila gantikan "URL image icon anda" dengan URL icon favicon yang anda pilih. *Pastikan URL gambar yang anda masukkan atau copy adalah format gif, PNG, JPEG.
5. Jangan lupa SAVE yang kita dah buat tu!

Tak tahu mana nak cari icon favicon yang comel dan cantik? Anda semua boleh tengok dekat SINI. atau google je "icon favicon"

Selain itu, kalau kita nak tambah button Instagram, Twitter atau apa-apa akaun media sosial yang kita ada, anda semua boleh cuba ikut tutorial ini. Biasa laa remaja sekarang nak promote akaun Instagram atau akaun Twitter supaya bilangan followers (pengikut) bertambah. Heheheehe 😁

Button Instagram dan Twitter di sebelah kiri

1. Log in Blogspot> Layout> Add a gadget (side bar)> HTML/ Javascript

2. Copy link di bawah ini.

</tr></tbody></table></center>

Tukarkan:

BIRU - Link Facebook
MERAH - Link Twitter
OREN - Link Instagram
UNGU - Link Pinterest

3. Klik SAVE dan lihatlah hasilnya!

Sebenarnya banyak lagi tutorial untuk blog yang menggunakan HTML, nanti Nur akan bagi tahu dekat post yang akan datang. Tapi kebanyakan idea untuk mencantikkan blog, Nur tengok dan belajar dari Blog Cik Nurfarah. Banyak perkara yang blog Cik Nur farah ini ajar tapi mungkin susah sikit untuk kita cuba sebab blog ini ajar menggunakan blog versi yang lama. Jadi, kemungkinan sebahagian daripada langkah-langkah dalam tutorial itu dah tak boleh nak diikut 100%.

Terima kasih,

Nurhidayati 💖

Pengekodan HTML

CARA UNTUK MENCANTIKKAN BLOG

Design Template

1 comment:

Social Profiles

Quotes

About Me

Popular Posts

Visitors

Categories

Blog Archive

Followers