Wednesday, August 3, 2011

Mari Belajar HTML Bahagian 1


Html bermaksud Hyper Text Markup Language dibangunkan oleh World Wide Web consortium. Tim Berners-Lee merupakan pengasas HTML juga tersenarai dalam 100 orang genius di dunia. Mempelajari tidaklah sesukar PHP atau Javascript kerana bersifat statik. Semua kod html bermula dangan tag <html> dan berakhir dengan </html> 


Sebelum itu, korang boleh muat turun Notepad++ secara percuma disini
http://notepad-plus-plus.org/download/v5.9.2.html. Untuk tutorial bahagian 1, buatkan 1 folder dan simpan sebagai html. Buka notepad++, buatkan fail baru dan simpan sebagai index.html didalam folder html. (Jika anda menaip www.contoh.com secara automatik ia akan pergi ke fail index.)

Dalam fail index.html tuliskan kod

<html>
<head>
<title>Tutorial html bahagian 1</title>
</head>
<body>
Segala kod html, design berada disini!
</body>
</html>

Simpan dan buka menggunakan web browser-ie, firefox, google chroome, opera..
ape yang korang nampak? = Segala kod html, design berada disini!

Ok, sekarang tambahkan <b></b> pada awal dan akhir ayat tadi menjadi:
<b>Segala kod html, design berada disini!</b> simpan fail index dan refresh web browser
(atau guna Ctrl + s).
Segala kod html, design berada disini! akan tertera pada web browser dalam bentuk bold.

Menukar saiz
Boleh guna <h1></h1>, <h2></h2> , <h3></h3>.

Table
Ganti Segala kod html, design berada disini! dengan kod dibawah:

<table align="center" width="800px" height="600px" bgcolor="#999999" border="0">
<tr>
<td width="50%">1</td><td width="50%">2</td>
</tr>
<tr>
<td width="50%">3</td><td width="50%">4</td>
</tr>
</table>

simpan dan refresh web browser. anda akan memahami bagaimana menggunakan table dalam html
Tips
1. align= center, left, right
2. width= px(pixel) atau % contoh width="80%" atau width="900px"
3. bgcolor boleh usha kat sini http://www.w3schools.com/cssref/css_colors.asp

Link
Cipta fail baru dan simpan sebagai about.html
Copy semua html kod pada index.html dan paste didalam about.html

pada index.html, tukar no 1 pada table dengan kod dibawah:
<a href="about.html">About</a>

Link pada gambar
Buat folder baru didalam folder html simpan sebagai gambar.
Sekarang muat turun gambar profile facebook masing2 dan simpan dalam folder gambar. Tukarkan nama gambar anda kepada logo.jpg
gunakan kod dibawah dan letakkan pada no 2 didalam table:
<a href="about.html"><img src="gambar/logo.jpg" width="300px" height="300px"></a>
simpan fail index dan refresh web browser.

Sekian untuk kali ni..
Tutorial akan datang: menggunakan css pada html

0 comments:

Post a Comment