|
|
 |
Article
HTML
IT's Easy
?
คำสั่งพื้นฐาน ? การใส่รูปภาพในเว็บเพจ
? คำสั่งในการจัดหน้าเอกสาร ?การเขียนคำสั่งเชื่อมโยง(link)
? การใช้
form และการเขียน form ? ทดสอบเขียน
html online
|
[
<<prev ] [ next>>
]
การใส่รูปภาพในเว็บเพจ
จะมีการใช้คำสั่งดังนี้
- คำสั่ง <IMG SRC="ไฟล์รูปภาพ"
ALT="ข้อความ"> ใช้สำหรับแสดงรูปภาพบนเว็บเพจ คำสั้ง
ALT="ข้อความ" นั้นจะเป็นการอธิบาย ให้ผู้ที่ใช้งานอินเตอร์เน็ตแบบ
Text Mode ได้เห็นการวางตำเหน่งของรูปนั้น
- การปรับขนาดของรูปภาพ เราสามารถปรับขนาดของรูปภาพคือ
<IMG SRC="ไฟล์รูปภาพ" WIDTH="ขนาด" HEIGHT="ขนาด"
ALT="ข้อความ"> คำสั่ง width="ขนาดของความกว้าง"
height="ความยาว" เช่น
**ต่อไปผมจะไม่เขียนคำสั่ง head และ title นะครับคิดว่าเข้าใจแล้วนะครับในการเขียน
head กำกับในเว็บเพจ แต่หากเพื่อนๆ เขียนเว็บเพจละก็ผมขอแนะนำว่าควรจะมีอยู่ทุกหน้าครับ**
<HTML>
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="easy.gif" ALT="Eesy logo">
<IMG SRC="easy.gif" ALT="Easy logo" WIDTH="200" HEIGHT="100">
</BODY>
</HTML> |
Test
คำสั่งในการจัดหน้าเอกสาร
คำสั่งในการจัดหน้าเอกสารนี้มีอยู่ด้วยกัน
หลายอย่างในที่นี้ผมจะยกตัวอย่างมาเฉพาะที่จำเป็นนะครับ
- <P> จะเป็นการขึ้นบรรทัดใหม่โดยจะเว้นทีละ
2 บรรทัด **ใช้คำสั่งนี้ต่อท้ายข้อความ หรือ รูปภาพที่ต้องการเว้น**
- <BR>จะเป็นการขึ้นบรรทัดใหม่ทีละ
บรรทัด **ใช้คำสั่งนี้ต่อท้ายข้อความ หรือ รูปภาพที่ต้องการเว้น**
- <HR> เป็นการขีดเส้นคั่นหน้าหรือ
ขั่นข้อความ
- <CENTER>...</CENTER>
จะเป็นการจัดข้อความ หรือรูปภาพนั้นให้อยู่ตรงกลางหน้ากระดาษ ในแนวนอน
เช่น <CENTER>กลาง</CENTER>
- <DIV ALIGN="CENTER,LEFT,RIGHT">...</DIV>
สามารถใช้แทน คำสั่ง center ข้างบนได้ครับ สามารถใช้ได้หลากหลาย
- <ALIGN="LEFT,CENTER,RIGHT">
(เลือกอย่างใดอย่างหนึ่ง) ใช้สำหรับจัดวางข้อความ หรือรูปภาพ ตามที่เราต้องการ
เช่น เราต้องการที่จะวางภาพใดภาพหนึ่ง โดยให้อยู่ทางด้านขวามือ
เขียนได้ดังนี้ <IMG SRC="mypicture.gif" ALIGN="RIGHT">
- <TABLE>...</TABLE>
คำสั่งนี้เป็นที่นิยมมากครับ เพราะสามารถจัดหน้าเอกสาร ได้อย่างอิสระและง่าย
ภายใน Tags ของ table นี้ จะประกอบไปด้วย <TR>...</TR>
คือ แถว และ <TD>...</TD> คือ คอลัมน์ และเราสามารถกำหนดความหนาของตารางได้
โดยระบุความหนาเป็นตัวเลข หรือไม่ต้องการ ที่จะให้เห็นเส้นตารางละก็
เราก็ระบุเป็น 0 ซะหรือไม่ต้องเขียนก็ได้ เรายังสามารถกำหนดความ
กว้าง และ ความสูง ของตาราง โดยเป็นได้ทั้ง เปอร์เซ็นต์ หรือ พิกซ์เซลส์
ได้อีกครับ และเราสามารถกำหนดสีของตารางได้อีกด้วย ตัวอย่างในการเขียนตาราง
เช่น
<HTML>
<BODY BGCOLOR="#FFFFFF">
<TABLE WIDTH=100%>
<TR><TD>แถวที่ 1 คอลัมน์ที่ 1</TD><TD>แถวที่
1 คอลัมน์ที่ 2 </TD></TR>
<TR><TD>แถวที่ 2 คอลัมน์ที่ 1</TD><TD>แถวที่
2 คอลัมน์ที่ 2</TD></TR>
</TABLE>
**ในการเขียนตัวอย่างข้างต้น จะไม่มีการแสดงเส้นตาราง แต่จะแสดงให้ดูในตัวอย่างต่อไปนี้**
<TABLE WIDTH=100% BORDER=n>
n=1,2,3,4,...(**เลือกกำหนดขนาดที่ต่องการตามใจชอบ** )>
<TR><TD>แถวที่ 1 คอลัมน์ที่ 1</TD><TD>แถวที่
1 คอลัมน์ที่ 2 </TD></TR>
<TR><TD>แถวที่ 2 คอลัมน์ที่ 1</TD><TD>แถวที่
2 คอลัมน์ที่ 2</TD></TR>
</TABLE>
**ต่อไปจะเป็นการกำหนดสี เฉพาะฉากหลังของ ตาราง ดังนี้**
<TABLE WIDTH=100% BGCOLOR="#408080" BORDER=1>
<TR><TD>แถวที่ 1 คอลัมน์ที่ 1</TD><TD>แถวที่
1 คอลัมน์ที่ 2 </TD></TR>
<TR><TD>แถวที่ 2 คอลัมน์ที่ 1</TD><TD>แถวที่
2 คอลัมน์ที่ 2</TD></TR>
</TABLE>
**เป็นการกำหนดขนาดความกว้าง และความยาวเป็นแบบ พิกซ์เซลส์
<TABLE WIDTH=300 HEIGHT=200 BGCOLOR="#408080" BORDER=1>
<TR><TD>แถวที่ 1 คอลัมน์ที่ 1</TD><TD>แถวที่
1 คอลัมน์ที่ 2 </TD></TR>
<TR><TD>แถวที่ 2 คอลัมน์ที่ 1</TD><TD>แถวที่
2 คอลัมน์ที่ 2</TD></TR>
</TABLE>
</BODY>
</HTML>
|
Test
การเขียนคำสั่งเชื่อมโยง(link)
มีอยู่หลายวิธีดังนี้
- การเชื่มโยงระหว่างเพจที่อยู่ในไดเรตเทอร์รี่เดียวกัน
เขียนดังนี้
<A HREF="ไฟล์ที่ต้องการเชื่ม หรือลิงค์ไปหา">คำที่แสดงที่ที่ลิงค์</A>
- การเชื่อมโยงระหว่างระหว่าง
เพจที่อยู่คนละไดเรตเทอร์รี่
<A HREF="ไดเรตเทอรี่/ไฟล์ที่ต้องการเชื่อม">คำที่แสดงที่ที่ลิงค์</A>
- การเชื่อมโยงระหว่างโฮมเพจ
<A HREF="http://ที่อยู่ของโอมเพจนั้น">คำที่แสดงที่ที่ลิงค์</A>
- การเชื่อมโยงโดยใช้รูปภาพ
<A HREF="ไฟลล์ที่ต้องการเชื่อม"><IMG SRC="ไฟลล์รูปภาพ"></A>
[
ใช้ได้กับ Netcape เท่านั้น ]
คำสั่งนี้เป็นคำสั่งที่ทำให้ตัวหนังสือกระพริบโดยที่เราพิมพ์ตัวหนังสือ
ภายในคำสั่งนี้โดยที่เราสามารถกำหนดว่าจะเน้นข้อความนั้นเป็นตัวหนา
เอน ขีดเส้นใต้ ก็ได้ เช่น
**--ต่อไปนี้ผมจะไม่เขียนคำสั่ง
<HTML>,<BODY> คิดว่าคุณคงเข้าใจในการเขียนคำสั่งนี้
แล้วนะครับต่อไปนี่คำสั่งทุกคำสั่งจะอยู่ภายในคำสั่งนี้--**
<BLINK><font size=+2><B>ขนาดฟ้อนท์ +3
เน้นข้อความเป็น ตัวหนาสีแดง</B></FONT></BLINK>
|
[
<<prev ] [ next>>
]
|
|
