Anda di halaman 1dari 12

Bengkel iProgramming

- Asas HTML -

akmal Komputer Kolej Melati UiTM Shah Alam @ Exco IPM Media Melati
Tentatif Bengkel
Waktu - Perkara

8.30 10.00 Storyboard dan Kod asas HTML (Hands-On)

10.00 10.30 Minum Pagi

10.30 12.30 Bina Web dan Kod asas HTML (Hands On)

12.30 2.00 Makan Tengahari & Solat Zuhur

2.00 4.00 Membina Laman Web HTML

4.00 4.30 Penyampaian Sijil & Penutup

4.30 5.00 Minum Petang


Starting Point Menguji kod HTML?
Buka Notepad (*.txt)

Save As fail dengan format


.html

Buka semula fail .html


dengan browser
Kod Asas : Tag HTML
1. Tag merupakan arahan kepada pelayar (browser).
Hands-On Sessio
Tag wujud berpasangan
< adalah pembuka <html>
<header><title>Kursus Asas HTML Tingkatan 1</title></header>
/> adalah penutup <body>
Contoh : <html> ..</html> <p title="I'm a tooltip">
<font color="blue"> <h1> Pengatucaraan HTML Tingkatan 1 </h1> </font>
</p>
<p> <font color="red"> <h2>Kursus berlangsung di Kolej Melati</h2> </font> </p>
<p> <h3>Kursus berlangsung di Kolej Melati</h3> </p>
<p> <h4>Kursus berlangsung di Kolej Melati</h4> </p>
) <html></html> <p> <h5>Kursus berlangsung di Kolej Melati</h5> </p>
<p> <h6>Kursus berlangsung di Kolej Melati</h6> </p>
) <head></head>
<title></title> <p title="Hai..saya tooltip"> Kursus berlangsung di Kolej Melati </p>

) <body></body> <p><a href="http://www.uitm.edu.my/index.php/en/">Universiti Teknologi MARA</a></p>

) <p>.</p> <img src="uitm.jpg" alt="W3Schools.com" width="10%" height="10%">

<h1>..<h2> </body>
) <font color=blue>.</font>
) <p title=tooltip></p> </html>

<a href=></a>
<img src=><img>
https://www.w3schools.com/tags/ref_attribute
Output HTML
Banner, Frame & Menu HTML
anner
ody>
nner></banner>
ody>

Frameset
<frameset rows=*,*,*>
</frameset>

Menu
Ordered
<ol type=A>
<li>Coffee</li>
</ol>

Unordered
<ul>
<li>Coffee</li>
</ul>

Navigation
nav><a href=></a></nav>
Pull Down Menu HTML
<html>
<header>
<title>
Pull Down Menu @ Selection Box @ Drop Down
</title>
</header>

<body>
<select>
<option value="0"> Select Option</option>
<option value="1"> Rambutan</option>
<option value="2"> Durian</option>
<option value="3"> Manggis</option>
</select>

</body>
</html>
TextArea HTML
<html>

<header>
<title>Textarea</title>
</header>

<body>

<textarea rows="20" cols="20">


Ruangan komen yang menerima jumlah karakter tanpa had
</textarea>

</body>

</html>
Table HTML
Table COLUMN COLUMN

<table>
Header 1 Header 2 Header 3
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
ROW
</tr>
<tr> Row 1 Row 1 Row 1
<td> Row 1 Column 1</td> Column 1 Column 2 Column 3
<td> Row 1 Column 2 </td>
<td> Row 1 Column 3 </td>
<tr>
<tr> ROW
<td>Row 2 Column 1</td> Row 2 Row 2 Row 2
<td>Row 2 Column 2</td> Column 1 Column 2 Column 3
<td>Row 2 Column 3</td>
</tr>

</table>
Samb : Table HTML
COLSPAN =X

ROWSPAN= Y

<TD
BGCOLOR=BLUE></TD>
Storyboard @ Papan Cerita
Praktikal Membina Laman Web