Posted on

Asas HTML untuk orang baru – Bahagian 1

Dah lama nak tulis tutorial asas html. Html kepada yang masih belum tahu, adalah bahasa pengaturcaraan untuk membina laman web. Jika anda seorang blogger dan mahu mengedit template, adalah lebih senang sekiranya anda tahu html.

Ramai orang baru menggunakan Dreamweaver untuk membina laman web, tetapi itu adalah tidak memadai kerana anda tidak akan dapat menyelesaikan banyak masalah dan lebih sukar untuk belajar php. Dalam tutorial ini saya akan cuba mengajar anda asas html, khas untuk orang baru. Kalau dah mahir html, boleh la saya tulis tutorial php pula.

Sebelum bermula, pastikan anda mendapatkan perisian ini dulu:

Programmer Notepad  (http://notepad-plus.sourceforge.net/uk/site.htm)

Anda boleh juga menggunakan Notepad++ atau Notepad tersedia dalam Windows.

Apa yang wajib anda tahu:

1. Setiap code html wajib dibuka dengan <html> dan diakhiri dengan </html>

2. Setiap tag html wajib ditutup selepas dibuka. Contoh <html></html> dan <head></head>

Laman html pertama anda

Kita akan membina sebuah page html yang memaparkan sebaris ayat dengan tajuk, image, table dan juga  hyperlink.

1. Buka Programmer Notepad dan save as sebagai index.html

2. Taip <html> dan pastikan diakhiri dengan </html>. Tag ini adalah wajib untuk setiap page html. Kesemua code html yang anda akan taip selepas ini adalah didalam tag <html></html> tersebut.

<html>

</html>

3. Taip tag <head> dan diakhiri dengan </head>. Tag head digunakan untuk Title, link ke CSS dan juga javascript.

<html>

<head></head>

</html>

4. Sekarang masukkan tag <title></title> ke dalam tag <head>. Masukkan title yang anda mahu diantara tag <title></title>.

<html>

<head>

<title>My First HTML</title>

</head>

</html>

save dan double click index.html yang telah anda create dalam langkah 1 untuk melihat apakah itu Title.

5. Masukkan tag <body></body> dibawah tag head. Tag ini digunakan untuk table, form, list, image dll. Selepas ini semua code html anda akan dibuat didalam linkungan tag <body></body>

<html>

<head>

<title>My First HTML</title>

</head>

<body>

</body>

</html>

 

6. Untuk memaparkan tajuk artikel, kita boleh gunakan samaada tag <h1> ataupun <h2>. Dalam tutorial ini saya akan menggunakan tag <h2> untuk memaparkan tajuk artikel tersebut.

<html>

<head>

<title>My First HTML</title>

</head>

<body>

<h2>Asas HTML untuk orang baru - Bahagian 1</h2>

</body>

</html>

Save dan refresh page index.html untuk melihat hasilnya.

7. Untuk memasukkan ayat ke dalam code html, kita perlu menggunakan tag <p>

<html>

<head>

<title>My First HTML</title>

</head>

<body>

<h2>Asas HTML untuk orang baru - Bahagian 1</h2>

<p>

Dah lama nak tulis tutorial asas html. Html kepada yang masih belum tahu, adalah bahasa pengaturcaraan untuk membina laman web. Jika anda seorang blogger dan mahu mengedit template, adalah lebih senang sekiranya anda tahu html. 

</p>

</body>

</html>

Save dan refresh page index.html untuk melihat hasilnya.

8. Sekarang kita mahu meletakkan gambar dibawah ayat. Barulah nampak menarik artikel kita. Tag yang digunakan ialah <img src=”linkgambar”/>. Pastikan perkataan linkgambar dalam tag tersebut digantikan dengan link ke gambar yang anda mahu gunakan. Tag image tidak memerlukan untuk kita menutup tag seperti tag html yang lain.

<html>

<head>

<title>My First HTML</title>

</head>

<body>

<h2>Asas HTML untuk orang baru - Bahagian 1</h2>

<p>

Dah lama nak tulis tutorial asas html. Html kepada yang masih belum tahu, adalah bahasa pengaturcaraan untuk membina laman web. Jika anda seorang blogger dan mahu mengedit template, adalah lebih senang sekiranya anda tahu html. 

</p>

<img src="http://img99.imageshack.us/img99/1170/htmleb.jpg"/>

</body>

</html>

BACA :  6 free html css admin template ready to use with your web based project

Save dan refresh page index.html untuk melihat hasilnya.

 

9. Sekarang sampai masanya untuk kita membina table. Table yang kita mahu bina mempunyai 3 row dan 2 column dan mempunyai border.

Tag untuk table ialah <table>. Untuk menambah table row, tag yg digunakan ialah <tr> dan untuk table column, tag ialah <td>. Untuk melabelkan column, gunakan tag <th>. Parameter bagi table ialah border=1

<html>

<head>

<title>My First HTML</title>

</head>

<body>

<h2>Asas HTML untuk orang baru - Bahagian 1</h2>

<p>

Dah lama nak tulis tutorial asas html. Html kepada yang masih belum tahu, adalah bahasa pengaturcaraan untuk membina laman web. Jika anda seorang blogger dan mahu mengedit template, adalah lebih senang sekiranya anda tahu html. 

</p>

<img src="http://img99.imageshack.us/img99/1170/htmleb.jpg"/>

<h2>HTML use in this lesson</h2>

<table border=1>

<th>Name</th>

<th>Desc</th>

<tr><td>html</td><td>Open A</td></tr>

<tr><td>head</td><td>Open B</td></tr>

<tr><td>title</td><td>Open C</td></tr>

</table>

</body>

</html>

Save dan refresh page index.html untuk melihat hasilnya.

 

10. Untuk membina hyperlink, gunakan tag ini < a href=”alamatweb”></a>. Gantikan alamatweb ke link website atau file yang anda mahu.

<html>

<head>

<title>My First HTML</title>

</head>

<body>

<h2>Asas HTML untuk orang baru - Bahagian 1</h2>

<p>

Dah lama nak tulis tutorial asas html. Html kepada yang masih belum tahu, adalah bahasa pengaturcaraan untuk membina laman web. Jika anda seorang blogger dan mahu mengedit template, adalah lebih senang sekiranya anda tahu html. 

</p>

<img src="http://img99.imageshack.us/img99/1170/htmleb.jpg"/>

<h2>HTML use in this lesson</h2>

<table border=1>

<th>Name</th>

<th>Desc</th>

<tr><td>html</td><td>Open A</td></tr>

<tr><td>head</td><td>Open B</td></tr>

<tr><td>title</td><td>Open C</td></tr>

</table>

<a href="http://www.w3schools.com/html/html_primary.asp">Good HTML Basic Tutorial</a>

</body>

</html>

Save dan refresh page index.html untuk melihat hasilnya.

11. Hasil akhir tutorial ini:

Setakat ini sahaja tutorial kali ini. Dalam Bahagian ke 2, kita akan belajar membina form dan juga menggunakan list. Dapatkan html tag yang lain untuk dicuba disini : W3School HTML


RELATED POSTS

22 thoughts on “Asas HTML untuk orang baru – Bahagian 1

  1. nice.. really basic.. nanti ajar buat gambo gerak2 ea…
    aku dah lupe plak… marquee kot.. :devil:
    .-= Piratz´s last blog ..Panduan & Infomasi Mengenai Twitter =-.

  2. bagus.. bagus.. nnt ajar tukar html jadi theme wordpress plak ye.. :happy:

    1. Kl wat theme wordpress, aku pn terkial2 lg. Hihihi

      1. Nak buat dari scratch memang susah…kalo pakai framework tu maybe keje lg senang la…buat child theme jek…

        xpun generate pakai artisteer sudah…hehe
        .-= EiNS´s last blog ..Asas HTML untuk orang baru – Bahagian 1 =-.

  3. […] This post was mentioned on Twitter by jomphp.com. jomphp.com said: Asas HTML untuk orang baru – Bahagian 1 http://goo.gl/fb/Bzfbt #jomphp […]

  4. Bagus bagus 😉
    .-= Annamir´s last blog ..2 Years in Flickr & Photography ツ =-.

  5. Waa… best best.. tq…
    tapi rasa cam susah je..

  6. erk… aku fail bab menda2 ni… thanx, dpt gak blaja sket2..
    .-= syahirul´s last blog ..Sehari bersama pemilik Justkhai.com =-.

  7. thanks bro..ilmu baik utk kepintaran kepala otak..

    p/s: image tak nampak..kuat istockphoto
    .-= azizuan´s last blog ..Pilihanraya Kecil Menguntungkan Rakyat =-.

  8. kagum penerangan yang lengkap untuk basic HTML
    bermanfaat untuk kawan kawan. thanks beb.
    .-= Kreuger´s last blog ..Mana dapat tu kak Mon??? =-.

    1. hehehe sama2 bro 😉

  9. wah .. bagus ni.. ada x buku yang penuh untuk tutorial macam ni?? bagus ni.. nak download kat mana ek buku mcm ni?? 😀

    1. @matdin:Kat popular bookstore ada orang jual kot buku2 pasal html, web progamming nie…nak belajar online boleh baca kat http://www.w3schools.com/

    2. @matdin:laju ke bitcomet mod? aku dah biasa guna utorrent…dlu guna deluge

  10. Thanks a lot. Useful guides for undergraduate students who are taking website design as their major.

  11. tq la jom php atas posting ni.. jangan berheti wat post pasal html ni ..walau pun banyak tutor dalam en tapi tak semua yang pandai bahasa en … tq sekali lagi …. biasanya aku pakai NVU je wat website … hehe

  12. nice job! Ringkas dan padat!
    .-= RozaniGhani´s last blog ..RG Pindah Dari Exabytes Ke DataKL =-.

  13. thanx bro…dah lame da cari artikel yang terangkan satu-satu step camni.akhirnya ku temui juga.good job! :heart: :biggrin:
    .-= ajoism´s last blog ..Rahsia Keyboard =-.

  14. u are termendous bro, salute u thanks for the lesson

  15. good artikel.Thanks

Tinggalkan komen anda