Thaimisc.com : เริ่มเรียนรู้พื้นฐานการเขียน HTML ตอนที่ 2
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : HTML It's EASY Print Article Only Print Aticle With Comment
เริ่มเรียนรู้พื้นฐานการเขียน HTML ตอนที่ 2
เขียนโดย thaimisc , 05-01-2002
ครั้งที่สองนี้จะเป็นการเรียนรู้การใส่รูปภาพลงไปในเวบเพจนะการใส่ตารางและการจัดหน้าเอกสารแบบต่าง ๆ ครับ

การใส่รูปภาพในเว็บเพจ     จะมีการใช้คำสั่งดังนี้

  • คำสั่ง <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>

<BLINK>...</BLINK>[ ใช้ได้กับ Netcape เท่านั้น ]     คำสั่งนี้เป็นคำสั่งที่ทำให้ตัวหนังสือกระพริบโดยที่เราพิมพ์ตัวหนังสือ ภายในคำสั่งนี้โดยที่เราสามารถกำหนดว่าจะเน้นข้อความนั้นเป็นตัวหนา เอน ขีดเส้นใต้ ก็ได้ เช่น

**--ต่อไปนี้ผมจะไม่เขียนคำสั่ง <HTML>,<BODY> คิดว่าคุณคงเข้าใจในการเขียนคำสั่งนี้ แล้วนะครับต่อไปนี่คำสั่งทุกคำสั่งจะอยู่ภายในคำสั่งนี้--** <BLINK><font size=+2><B>ขนาดฟ้อนท์ +3 เน้นข้อความเป็น ตัวหนาสีแดง</B></BLINK>
<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com