Tuesday, January 13, 2015

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

คำสั่งพื้นฐาน
< !– ข้อความ –>คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ
<br>คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p>คำสั่งย่อหน้าใหม่
<hr width=”50%” size = “3″>คำสั่ง ตีเส้น, กำหนดขนาดเส้น
&nbsp;คำสั่ง เพิ่มช่องว่าง
<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>


<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
</TABLE>

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


การสร้างตาราง
หัวเรื่อง 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

No comments:

Post a Comment