Friday, May 22, 2009

BELAJAR HTML DAN WEBSITE - ASAS MEMAHAMI BLOG

Aslkm la sume pekabo...ini hari saya cadanglar nak cerita pasal website.Alhamdulillah Allah masih izinkan saya hidup lagi dn sy harap sy dapat sebaiknya gunekan peluang ni kongsi ape yg sy tahu.n kali ni ialah kita akan mempelajari bagaimana nak buat website dan memahami tentang website itu sendiri maka kita memerlukan asas-asas tertentu.jadi sebaiknya saya terus ceritakan tentang perkara yang kita kena tahu. pertama sekali ialah kita kena belajar tentang html.

jadi apakah itu html?html bermaksud "hyper text markup language".jadi sebenarnya html bersifat statik dan merupakan asas bahasa website yang mesti diketahui maka sesuaila untuk seseorang itu memulakan dgn html untuk mempelajari buat websitenya.semasa zaman dulu antara bahasa website yang asal ialah dengan menggunakan kod html inila.website sebenarnya boleh saya bahagikan kepada 3 bahagian.yang pertama ialah bahasanya misalnya macam html,php,javascript dan lain-lain, ke2 ialah tapaknya - contohnya seperti apache dan iis dan yang ke 3 ialah pangkalan datanya seperti mysql,access dan lelain. tapi jangan bimbang kita kali ini hanya akan mempelajari bahasa html sahaja.dengan itupun kita boleh cuba menjana website kita sendiri tapi sayangnya masih tak boleh publish di internet ye.

ok seterusnya bagi pengguna windows anda memerlukan bahan berikut:

1.notepad (sahaja!)

nota: jangan gune microsoft word ye.guna notepad atau wordpad bagi pengguna windows kerana nanti tak jadila kalau nak buat basic website


langkah-langkah

1. buka notepad anda.cara mudah ialah anda buka "start menu" pergi ke run dan taip

notepad

dan tekanla ok.

ataupun bleh pergi ke "start menu" -> "all programs" -> "accessories" dan cube cari "notepad" kat situ.

ataupun bleh juga pergi ke "my computer"->"c"->"windows" dan cuba cari notepad kat situ.

2. kita akan start tulis dengan beberapa skrip atau kod asas.ingat skrip asas ni ye.kalau boleh tooooloong hafal ye. sebab nila asas kita kena tau paling basic sekali.dimana tag html nye dimana tag head dan title nye, dimana tag body nye dan dimana penutup tag-tag ni ye.



<html>

<head><title>ini tajuk blog pertama saya</title></head>
<body><p>
ini kandungan pertama saya

</p></body>
</html>





Diatas ialah contoh notepad yang telah saya buat tapi saya buat dalam sistem operasi linux bukan dalam windows.harap maklum.

3. langkah berikutnya save dalam bentuk .html dan JANGAN save dalam bentuk .txt yek nanti tak jadi.contohnya:

websaya.html

Nota: Bagi pengguna Windows anda boleh lihat extension anda untuk ubah kepada .html dengan pergi ke "My Computer"->"Tools"->"Folder Options"->"View"-> dan jangan tandakan bagi "Hide extensions for known file types"




NOTA:PENTING SANGAT SUPAYA SAVE DALAM .html contohnya websaya.html dan jangan save jadi websaya.txt nanti tak jadi.

PENERANGAN

ok saya akan menerangkan kod kodnya.
secara umum website mestila ada kod ni di permulaannye iaitu

<html>


tanda "<" dan tanda " >" merupakan tanda yang dipanggil sebagai tag.jadi tag diatas merupakan tag html. ianya perlu ada kerana ia menandakan bahawa web tersebut mahu menggunakan kod html sebagai bahasa websitenya.

dan tanda

</html>

pula merupakan tanda tag penutup.kebiasaanya tanda tag penutup mempunyai tanda "/".jadi perasanla kan setiap tanda tag kod html diakhir setiap mereka dengan tanda "slash" tersebut.

jadi yang tiada tanda "slash" merupakan pembuka dan yang ada tanda "slash" tu merupakan penutup.tapi sahabat-sahabat tak semua tag macam tu.ada tag yang hanya guna satu je contohnya macam tag "break" cuma ini saya bagitau yang asas sahaja dulu ya.


kemudian kita lihat tanda ini pula:

<head><title>ini tajuk blog pertama saya</title></head>

ini merupakan khusus untuk tajuk web anda.jadi anda boleh lihatnya diataaaas sekali bahagian kiri anda ye.nampak jugakan ada tag html pembuka dan ada tag html penutup.

dan anda cuba lihat tag terakhir ni iaitu:


<body><p>
ini kandungan pertama saya

</p></body>
</html>


tag yang body tu maksudnya lebih kurang macam suatu rangka badanla ok.dan maksud huruf p ialah paragraph yang bermaksud perenggan.so harap sahabat-sahabat yang baru belajar akan mengerti ye.

namun bile sahabat sume dah siap dan klik 2x pada file html tersebut sahabat akan nampak macam biasa je dan bosan kan.jadi apa kata kalau nak menarik sahabat tambahkan tag html ni pula.tag ini akan menyebabkan perkataan sahabat-sahabat bergerak!!


<marquee>SELAMAT DATANG KE WEBSITE SAYA!!</marquee>


bleh lihat contoh gambar dibawah





err kalau nak buka file tu kembali sebab nak edit maka kena klik kanan dulu dan cari "open with" bukala kembali guna notepad ye ataupun wordpad dan jangan sesekali microsoft word dan jangan lupa agar terus save.

untuk pembelajaran lanjut mungkin sahabat sekalian boleh pergi ke sini untuk memahami lebih lanjut
http://www.htmlcodetutorial.com/

Dan untuk pelajaran seterusnya saya akan tunjukkan contoh kod html dari website Universiti Malaya. Sahabat bleh klik disini iaitu http://umisisweb.um.edu.my/
Dibawah ini ialah gambar websitenya:



OOps lupa nak bagitau,sila buka gune firefox dan kemudian anda pergi ke bahagian "view" dan klik pada "page source" takpun cara mudah gunala shortcut keyboard iaitu "Ctrl + U". tujuannya ialah untuk kita melihat kod-kod htmlnya ya. sila lihat contoh gambar dibawah ni.




Dan kemudian sahabat akan dihidangkan dengan pelbagai jenis kod atau bahasa web.Jom kite tengok sket.rujuk gambar dibawah ye!




1.Yang pertama tu iaitu diatas html tu nampak macam pelik sket kan?hehe.sebenarnya ia cuma mahu memberi penandaan kepada web browser sahabat-sahabat bahawa ianya adalah file jenis html.Dia macam mengesahkanla."Eh aku ni jenis html lar". Perkataan w3c tu sebenarnya merujuk kepada satu badan atau organisasi yang berkuasa iaitu satu organisasi yang menetapkan standard terhadap html ni.ala.. macam sijil ISO gitu..huhu yer kot..papehal bleh rujuk badan tersebut di

http://www.w3.org/


w3c = world wide web consortium

dan sahabat bleh juga belajar html disana.

2. Yang kedua tu sebenarnya nak tunjuk sahabat je bahawa umisisweb pun guna html kan?ada tag html yang saya dah tunjuk kan.kenala perhatikan betul2 ye.

3. Yang ke 3 tu saya cuma nak bagitau bahawa laman web um ni pun ada guna css ataupun bahasa cascading style sheet.css ni digunakan untuk lebih mencantikkan website .

4. Yang terakhir saya tandakan tu cuma nak tunjuk bahawa UM juga ada menggunakan bahasa javascript.perasan tak ada extension ".js" ia menandakan bahawa mereka ada menggunakan javascript juga.lagipun ada perkataan javascript tu.

maksudnya ada beberapa lagi bahasa yang berkaitanla dengan website ni.kita akan bergerak sedikit demi sedikit untuk memahami perkara seperti ini.InsyaAllah nanti mahirla untuk memahami sesebuah blog.
okla setakat tu hari ni ye...tata....

0 comments: