Tutorial 2 HTML Programming
Objective : To practice the techniques of HTML programming
1 Creating your first HTML program
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>My First Exercise
</title>
</head>
<body>
<p>Student Name: Wong Tang Paai</p>
<p>Student ID. : 03906165D</p>
<p>Congratulation!!!
This is my first HTML program!!!</p>
</body>
</html>
2 Set the font attributes in your first HTML program
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>My First Exercise
</title>
</head>
<body>
<p><B><font size="34">Student Name: Wong Tang Paai</font></B></p>
<p><B><font size="34">Student ID. : 03906165D</font></B></p>
<p align=left>"(1)Congratulation!!! This is my first HTML program!!!</p>
<p align=right>"(2)Congratulation!!! This is my first HTML program!!!</p>
<p align=center>"(3)Congratulation!!! This is my first HTML program!!!</p>
<p><I><font color="Blue">"(4)Congratulation!!! This is my first HTML program!!!</font></I></p>
<p><I><B><font color="Green">"(5)Congratulation!!! This is my first HTML program!!!</font></I></B></p>
<p><U><B><font color="Red">"(6)Congratulation!!! This is my first HTML program!!!</font></I></U></p>
<p><B><font size ="34">(7) This is my second exercise!! I like it very much!!</font></B></p>
<p><B><font size ="34">(H1)</font></B></p>
</body>
</html>
3 Put some links in the web page
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>My Second Exercise
</title>
</head>
<body>
<p><B><font size="34">Student Name: Wong Tang Paai</font></p>
<p><B><font size="34">Student ID. : 03906165D</font></p>
<p><img src = "http://www.polyu.edu.hk/cpa/polyu/img_index/home-logo.gif"</p>
<p>
<h2>Go to <a href = "http://www.eie.polyu.edu.hk/">Department of Electronic and Information Engineering</a> main page
</h2>
</p>
<p><img src = "http://www.eie.polyu.edu.hk/images/eieLogo01.jpg"</p>
<p>
<h2>Go to <a href = "http://www.polyu.edu.hk/">Hong Kong Polytechnic University</a> main page </h2>
</p>
<p>
<h5>
If you get any question about your exercise, please send <a href="enpklun@polyu.edu.hk">e-mail</a> to Dr.Daniel P.k.Lun.
</h5>
</p>
</body>
</html>
4 Basic Table
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>My Second Exercise
</title>
</head>
<body>
<p><B><font size="34">Student Name: Wong Tang Paai</font></p>
<p><B><font size="34">Student ID. : 03906165D</font></p>
<table border="1" width="25%">
<tr>
<td>Row 1 col 1</td> <td colspan="2">Row 1 col 2-3 </td>
</tr>
<tr>
<td>Row 2 col 1</td> <td> Row 2 col2 </td> <td> Row 2 col 3 </td>
</tr>
<tr>
<td>Row3 col 1</td> <td> Row 3 col2 </td> <td> Row 3 col 3 </td>
</tr>
</table>
</body>
</html>
5 Web Form
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>My Second Exercise
</title>
</head>
<body>
<p><B><font size="34">Student Name: Wong Tang Paai</font></p>
<p><B><font size="34">Student ID. : 03906165D</font></p>
<form method = "post" action = "/cgi-bin/formmail">
<p><label>Your English Name: <input type= "text" name= "name" size="25" maxlength="30" /> </label> </p>
<p><label>Gender: <input type= "radio" name= "size" value="Male" checked="checked" />Male
<input type= "radio" name= "size" value="Male" />Female </label> </p>
<p>
<label>Data if birth : <select name= "rating">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
</select></label>
<label>(MM) <select name= "rating">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
</select></label>
<label>(DD) <select name= "rating">
<option value = "1980">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
</select></label>
<label>(YYYY></label>
</p>
<p><label>User ID: <input type= "text" name= "name" size="25" maxlength="30" /> </label> </p>
<p> What is your favour:</p>
<p><input type = "checkbox" name="favour" value="apple"/>Apple </p>
<p><input type = "checkbox" name="favour" value="Orange"/>Orange </p>
<p><input type = "checkbox" name="favour" value="Pineapple"/>Pineapple </p>
<p><input type = "checkbox" name="favour" value="Mango"/>Mango </p>
<p><input type = "checkbox" name="favour" value="Other"/>Other <input type = "text" name = "name" /></p>
<p><label>Comments:<br /><textarea name="comments" rows="4" cols="36"></textarea></label></p>
<input type="submit" value="submit"/>
<input type="reset" value="Reset"/>
</form>
</form>
</body>
</html>