HTML การสร้างเมนู

หัวข้อ:

HTML การสร้างเมนู

inplug

แนวทางในการสร้างเมนู

1. ดาวน์โหลดภาพแบ็คกราวนด์ bg17.gif และภาพตึกยุพราช yupparaj.jpg ไว้ใน My Documents

2. สร้างเมนู ตั้งชื่อว่า menu.html โดยใช้คำสั่งสร้างตาราง ดังนี้

สร้างตารางที่ 1 (กำหนดความกว้าง 100%) ประกอบด้วยบรรทัดจำนวน 2 บรรทัด และ 1 คอลัมน์ ดังนี้

<table width=100% border=1>
<tr>
<td>ข้อมูลในบรรทัดที่ 1</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 2</td>
</tr>
</table>

ในบรรทัดแรกหรือบรรทัดบน ให้บรรจุภาพแบ็คกราวนด์และข้อความตามที่โจทย์กำหนด ในบรรทัดที่ 2 ให้บรรจุคำสั่งสร้างตารางอีก 1 ตาราง (เรียกว่าตารางที่ 2)

ตารางที่ 2 มี 1 บรรทัด แต่มี 2 คอลัมน์ กำหนดความกว้างคอลัมน์แรกเป็น 30% ดังชุดคำสั่งคือ

<table width=100% border=1>
<tr>
<td width=30%>ข้อมูลในบรรทัดที่ 1 คอลัมน์ที่ 1</td>
<td>ข้อมูลในบรรทัดที่ 1 คอลัมน์ที่ 2</td>
</tr>
</table>

ข้อมูลในคอลัมน์ที่ 1 ซึ่งอยู่ซ้ายมือบรรจุคำสั่งสร้างตาราง (เรียกว่าตารางที่ 3) ส่วนคอลัมน์ที่ 2 ที่อยู่ขวามือ บรรจุภาพอาคารตึกยุพราช

ตารางที่ 3 มี 9 บรรทัดและ 1 คอลัมน์ กำหนดความกว้างเป็น 100% ดังชุดคำสั่งคือ

<table width=100% border=1>
<tr>
<td>ข้อมูลในบรรทัดที่ 1</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 2</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 3</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 4</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 5</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 6</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 7</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 8</td>
</tr>
<tr>
<td>ข้อมูลในบรรทัดที่ 9</td>
</tr>
</table>

ในแต่ละบรรทัดกำหนดสีพื้นและข้อความตามที่กำหนดในใบงาน

เครดิต : www.yupparaj.ac.th