คำสั่ง HTML พื้นฐาน | ระบบห้องเรียนเครือข่าย

คำสั่ง HTML พื้นฐาน
คำสั่งในภาษา HTML

คำสั่งพื้นฐาน
< !? ข้อความ ?>	คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ
<br>	คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p>	คำสั่งย่อหน้าใหม่
<hr width=?50%? size = ?3?>	คำสั่ง ตีเส้น, กำหนดขนาดเส้น
	คำสั่ง เพิ่มช่องว่าง
<IMG SRC = ?PHOTO.GIF?>	คำสั่งแสดงรูปภาพชื่อ Photo.gif
<CENTER> ข้อความ </CENTER>	คำสั่งจัดให้ข้อความอยู่กึ่งกลาง
<HTML> </HTML>	คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม
<HEAD> </HEAD>	คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน
<TITLE> </TITLE>	คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar
<BODY> </BODY>	คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น

รูปแบบตัวอักษร
<font size = ?3?> ข้อความ </font>	ขนาดตัวอักษร
<font color = ?red?> ข้อความ </font>	สีตัวอักษร
<font face = ?Arial?> ข้อความ </font>	รูปแบบตัวอักษร
<besefont size = ?2?> ข้อความ </font>	กำหนดค่าเริ่มต้นของขนาดตัวอักษร
<b> ข้อความ </b>	ตัวอักษรหนา
<i> ข้อความ </i>	ตัวอักษรเอน
<u> ข้อความ </u>	ขีดเส้นใต้ตัวอักษร
<tt> ข้อความ </tt>	ตัวอักษรแบบพิมพ์ดีด
	หมายเหตุ เราสามารถใช้คำสั่งกำหนดรูปแบบตัวอักษร หลายๆรูปแบบได้ เช่น <font face = ?Arial? size = ?3? color = ?red?> ข้อความ </font> เป็นต้น

จุดเชื่อมโยงข้อมูล
<a href =?#news?> Hot News </a> , <a name =?news?>	กำหนดจุดเชื่อมชื่อ news ส่วน ?a name? คือตำแหน่งที่ลิงค์ไป (เอกสารเดียวกัน)
<a href =?news.html?> Hot News </a>	สร้างลิงค์ไปยังเอกสารชื่อ ?news.html?
<a href =?http://www.thai.com?> Thai </a>	สร้างลิงค์ไปยังเวปไซท์อื่น
<a href =?http://www.thai.com? target = ?_blank? > Thai </a>	สร้างลิงค์ไปยังเวปไซท์อื่น และเปิดหน้าต่างใหม่
<a href =?http://www.thai.com?> <img src = ?photo.gif?> </a>	สร้างลิงค์โดยใช้รูปภาพชื่อ photo.gif เป็นตัวเชื่อม
<a href =?mailto:yo@mail.com?> Email </a>	สร้างลิงค์มายังอีเมล

การแสดงผลแบบรายการแบบมีหมายเลขกำกับ

<OL value = ?1? >
<LI> รายการที่ 1
<LI> รายการที่ 2
</OL>

การแสดงผลแบบรายการ ใช้คำสั่ง <OL> เป็นเริ่มและปิดท้ายด้วย </OL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการได้หลายแบบเช่น เรียงลำดับ 1,2,3? หรือ I,II,III? หรือ A,B,C,? ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <OL value = ?A?> เป็นต้น

การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ

<UL type = ?square?>
<LI> รายการที่ 1
<LI> รายการที่ 2
</UL>

การแสดงผลแบบรายการ ใช้คำสั่ง <UL> เป็นเริ่มและปิดท้ายด้วย </UL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการ ที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการแบบต่างๆ ดังต่อไปนี้

- รูปวงกลมทึบ ?disc?
- รูปวงกลมโปร่ง ?circle?
- รูปสี่เหลี่ยม ?square?

ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <UL type = ?square?> เป็นต้น

การสร้างตาราง

<TABLE BORDER = ?2? >
<CAPTION> การสร้างตาราง </CAPTION>
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>

ผลลัพธ์ที่ได้

การสร้างตาราง
หัวเรื่อง 1	หัวเรื่อง 2
ข้อมูล 1	ข้อมูล 2

การสร้างตาราง ใช้คำสั่ง <TABLE> เป็นเริ่มและปิดท้ายด้วย </TABLE> ส่วน BORDER เป็นคำสั่งย่อยเพื่อใช้ กำหนดขนาดของเส้นตาราง ถ้ากำหนด = ?0? จะหมายถึงไม่มีเส้น

- คำสั่ง <CAPTION> และ< /CAPTION> เป็นคำสั่งแสดงข้อความอธิบายชื่อตาราง
- คำสั่ง <TR> และ< /TR> เป็นคำสั่งเพื่อกำหนดแถวในตาราง
- คำสั่ง <TH> และ< /TH> เป็นคำสั่งเพื่อกำหนดหัวเรื่อง ผลลัพธ์ที่ได้คือตัวอักษรจะหนากว่าปกติ (ดูตัวอย่างประกอบ)
- คำสั่ง <TD> และ< /TD> เป็นคำสั่งแสดงข้อมูลปกติ

ความหมายของคำสั่ง Table
- TR หมายถึง Table Row
- TH หมายถึง Table Head
- TD หมายถึง Table Data

การทำ LINK ให้กับรูปภาพ

อธิบาย CODE

1.ตัวอักษรสีเทา คือ URL ที่ต้องการจะให้ไปเวลานำ MOUSE ไปคลิ๊ก
2.ตัวอักษรสีแดง คือ ขนาดของกรอบของรูป ถ้าเป็น ?0? จะไม่มีกรอบ และถ้ายิ่งมีค่าเลขสูงกรอบก็จะยิ่งหนา
3.ตัวอักษรสีน้ำเงิน คือ ตำแหน่งที่เก็บรูปภาพครับ (หมายถึง รูปภาพคุณเก็บไว้ที่ไหนก็พิมพ์ตำแหน่งที่เก็บเหมือนด้านล่างครับ)
4.ตัวอักษรสีเขียว คือ ตัวอักษรที่ต้องการให้แสดงเมื่อนำ MOUSE ไปวางบนรูปครับ

ต้องใส่ CODE

การแสดงผล