วันพฤหัสบดีที่ 6 กันยายน พ.ศ. 2555

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

การแทรกตาราง

คำสั่งหรือ Tag ที่ใช้ในการสร้างตารางคือ <table>...</table>
     ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้
     <table>...</table> เป็นการบอกจุดเิ่ริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
     <tr>....</tr>          เป็นการบอกจำนวนแถว (row)
     <td>...</td>           เป็นการบอกจำนวนคอลัมน์ (colunm)

ตัวอย่างการสร้างตาราง

ผลลัพธ์

การปรับความกว้างและความสูงให้กับตาราง

     การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้

      1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
<table width="50%" height="60%">       2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์
ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
<table width="400" height="200">

ตัวอย่างการกำหนดความกว้างและความสูงของตาราง

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="500" height="400">
<caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table>
</body>
</html>

ผลลัพธ์

การกำหนดความกว้างและความสูงของตาราง

ตารางที่ 1 การทดลองสร้างตาราง
แถว 1 คอลัมน์ 1	แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1	แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1	แถว 3 คอลัมน์ 2

การตีเส้น และสีเส้นตาราง การกำหนดระยะห่างระหว่างช่องเซลล์ และการเว้นระยะข้อมูลในเซลล์

หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์ border ช่วย ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้ <table border="1"> นอกจากความหนาของเส้นตารางแล้ว ยังมีแอททริบิวต์ที่กำหนดสีของเส้นตาราง bordercolorความห่างของช่องเซล์ cellspacing และการเว้นระยะ ระหว่างข้อมูลในเซลล์ กับกรอบเซลล์ cellpadding โดยใช้แอททริบิวต์ดังต่อไปนี้ bordercolor,cellspacing และ cellpadding เขียนต่อท้่ายในแท็ก <table> ดังนี้ <table border="1" bordercolor="blue" cellspacing="5" cellpadding="10">

border="1" หมายความว่าให้ตีเส้่นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่า
เป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็น
ค่าตัวเลขฐานสิบหกก็ได้
cellspacing="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel)
cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)

การกำหนดข้อความกำกับให้กับตาราง <caption>
     สามารถใส่ข้อความกำกับตาราง เพื่อให้ทราบว่าตารางนั้นนำเสนอข้อมูลเกี่ยวกับเรื่องใด โดยมีรูปแบบดังนี้

<caption align="ตำแหน่ง">ข้อความกำกับตาราง</caption>       โดยค่า "ตำแหน่ง" มีดังนี้
           "top" หมายถึง อยู่กลางตารางด้านบน
           "bottom" หมายถึง อยู่กลางตารางด้านล่าง
           "left" หมายถึง อยู่ด้านบนซ้าย
           "right" หมายถึง อยู่ด้านบนขวา

การจัดตำแหน่งข้อมูลในตาราง

ข้อมูลในตารางแต่ละช่องสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา หรือตรงการเซลล์ได้ โดยการใช้ แอททริบิวต์ align="ตำแหน่งของข้อมูล" ลงในแท็ก <tr> หรือ <td> เช่น

<tr align="center"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>

หมายถึง จัดตำแหน่งข้อมูลแถวที่ 1 ทั้งแถวให้อยู่ตรงกลางเซลล์

<tr><td align="center"> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>

หมายถึง จัดตำแหน่งข้อมูลในแถวที่ 1 คอลัมน์ที่ 1 ให้อยู่ตรงกลางเซลล์ เพียงเซลล์เดียว

"ตำแหน่งของข้อมูล" มีดังนี้

"center" หมายถึง อยู่ตรงกลางเซลล์

"justify" หมายถึง เต็มช่องเซลล์

"left" หมายถึง อยู่ชิดด้านซ้ายเซลล์

"right" หมายถึง อยู่ชิดด้านขวาเซลล์

เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป เหมือนตารางใน Microsoft Word หรือ Microsoft Excel การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์ และการรวมแถว

1) การรวมคอลัมน์ เป็นการรวมเซลล์ตามแนวนอนตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN กำหน ดไว้ในคำสั่ง <TD> รูปแบบ <TR> <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR> เช่น <TD COLSPAN = "3">จำนวนนักเรียน</TD> เป็นคำสั่งรวมคอลัมน์จำนวน 3 คอลัมน์มาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ จำนวนนักเรียน ตัวอย่าง ภาพแสดงการใช้คำสั่ง colspan ภาพแสดงผลการใช้คำสั่ง colspan

2) การรวมแถว

เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์ รูปแบบ <TR> <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD></TR> เช่น <TD ROWSPAN ="2">ลำดับที่</TD> เป็นคำสั่งรวมแถวจำนวน 2 แถวมาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ ลำดับที่ ตัวอย่าง ภาพแสดงการใช้คำสั่ง rowspan และ colspan จากตัวอย่างมีการใช้ำคสั่ง   เป็นการกำหนดช่องว่างให้กับเซลล์ หากไม่กำหนดเซลล์ในตารางจะไม่เห็นเส้นขอบ ดังภาพ

อ้างอิง
http://school.obec.go.th/pp_school/html/table.html
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang
http://www.thainextstep.com/html/html_08.php
http://www.kty.ac.th/html/unit5/unit503.html'

วันพฤหัสบดีที่ 30 สิงหาคม พ.ศ. 2555

การแทรกรูปภาพ

รูปแบบโค้ดในการแทรกรูปภาพ

การใส่รูปในเว็บเพจ

HTML

           รูปนั้นสามารถบรรยายรายละเอียดได้ดีกว่าคำพูดมาก ดังนั้นแทบทุกเว็บไซต์จึงมีรูปอยู่เกือบทุกเว็บไซต์ ในบทความนี้เราจะมาใส่รูปในเว็บเพจกัน
           1.ลองใส่รูปในเว็บเพจ
           จะเห็นได้ว่าการใส่รูปที่ขยับได้ หรือขยับไม่ได้นั้น code ไม่แตกต่างกัน แต่จะแตกต่างกันที่ตัวรูปเองว่าขยับได้หรือไม่

ฟอร์ตแมตของไฟต์ที่เราจะเห็นกันบ่อยๆ
      1.JPEG เหมาะสำหรับภาพถ่าย หรือภาพที่มีความละเอียดและจำนวนสีมากๆ
      2.GIF เหมาะสำหรับภาพลายเส้น เช่นการ์ตูน ตัวหนังสือ หรือภาพที่ต้องการสร้างให้ภาพโปร่งใส หรือ ทำให้เคลื่อนไหวได้
      3.PNG เหมาะสำหรับภาพที่ต้องการให้โปร่งแสง ขนาดไฟล์จะใหญ่กว่า JPEG แต่คุณภาพจะดีกว่า JPEG
สำหรับการเปลี่ยนฟอร์ตแมตของภาพเราจะใช้โปรแกรมเช่น Photoshop ในการเปลี่ยนซึ่งเรื่องนี้เราจะไปศึกษากันที่หัวข้อ Photoshop กันต่อไป ซึ่งฟอร์ตแมตของภาพจะมีผลมากต่อการทำเว็บไซต์ของเรา
          2.ใส่รูปจาก directory ที่ต่างกัน
จะเห็นว่าการใส่รูปจาก directory ที่ต่างกันใช้หลักการเดียวกับการเขียน hyperlink นั่นเอง ซึ่งหากไม่เข้าใจสามารถกลับไปดูได้ที่หัวข้อ เชื่อมต่อเอกสารของเราด้วย hyperlink
         3.The Alt Attribute
รูปแบบ <img src="boat.gif" alt="Big Boat"> เราใช้ alt Attribute เพื่อแสดงผลในกรณีที่ไม่สามารถโหลดรูปได้ และแสดงผลเมื่อมีเมาส์ไปอยู่ด้านบน นอกจากนั้นยังไม่ผลต่อการคนหาของ google อีกด้วย
          4.การใส่รูปพื้นหลัง
รูปพื้นหลังจะถูกแสดงผลซ้ำกันเองโดยเราแม้ว่ารูปจะรูปจะมีขนาดเล็ก หรือสั้นเพียงใดก็ตาม
           5.การจัดตำแหน่งของรูปในตัวอักษร
จะเป็นการจัดตำแหน่งของรูปในตัวอักษร เมื่อเรามีตัวอักษรกับภาพอยู่ด้วยกัน เราจะใช้ Align Attribute เพื่อจัดตำแหน่งของภาพ
          6.การจัดตำแหน่งของรูปให้ชิดซ้าย หรือขวา
จะเป็นการจัดรูปของเราให้ชิดซ้ายหรือชิดขวา เมื่อแสดงผล
          7.การใช้คำสั่งกำหนดขนาดของรูป
การใส่ขนาดของรูปนั้นเราจะใส่หรือไม่ใส่ก็ได้ ถ้าเราใส่ขนาด การแสดงผลของรูปก็จะเปลี่ยนแปลงตามที่เราใส่ แต่ขนาดของรูปจริงๆจะไม่เปลี่ยนแปลง
          8.ทำให้รูปภาพเป็น hyperlink
การทำให้รูปภาพเป็น hyperlink ก็ให้ใส่คำสั่งของ hyperlink ครอบคำสั่งแสดงภาพ เท่านั้นเอง
          9.คำสั่งที่ใช้ในการแสดงพิกัดในภาพ
เป็นการแสดงพิกัดที่อยู่ในภาพโดยจะแสดงที่ status bar เป็นพิกัดค่า X,Y ตามจุดที่เมาส์ของเราอยู่ด้านบน โดยจุด 0,0 จะอยู่ที่ด้ายซ้ายบนของภาพ
        10.สร้าง hyperlink ด้วยพิกัดในรูปภาพ
ในหัวข้อที่แล้วเราทราบพิกัดจุดของภาพแล้ว ในหัวข้อนี้จะใช้พิกัดจุดในภาพมาสร้าง hyperlink ซึ่งในตัวอย่างจะเห็นว่ามี hyperlink ในรูปภาพอยู่ 2 ที่คือ keyboard , mouse.

คำสั่งที่ใช้ประกอบกับคำสั่งแสดงภาพ

1. กำหนดให้ภาพอยู่ทางซ้ายและข้อความ(ที่ตามมา) อยู่ทางขวา เพิ่มคำสั่ง ALIGN=LEFT ไว้ในคำสั่งแสดงภาพ เช่น

2. กำหนดให้ภาพอยู่ทางขวาและข้อความ(ที่ตามมา) อยู่ทางซ้าย เพิ่มคำสั่ง ALIGN=RIGHT ไว้ในคำสั่งแสดงภาพ เช่น

3. กำหนดขนาดของช่องว่างระหว่างภาพกับข้อความ(ที่ล้อมรอบ) ในแนวนอน ใช้คำสั่ง HSPACE=ค่าตัวเลข(pixel) เช่น

4. กำหนดขนาดของช่องว่างระหว่างภาพกับข้อความ(ที่ล้อมรอบ) ในแนวดิ่ง ใช้คำสั่ง VSPACE=ค่าตัวเลข(pixel) เช่น

5. สามารถเขียนคำสั่งในข้อ 1-4 ประกอบกันได้ เช่น

กรณีที่ 1 รูปภาพอยู่ที่เดียวกับไฟล์เว็บเพจ
คือไฟล์รูปภาพที่อยู่ในตัวเครื่อง จะต้องอยู่ใน Folder เดียวกับไฟล์เว็บเพจ

ถ้ารูปภาพอยู่ในโฟลเดอร์เดียวกับไฟล์ HTML ไม่ต้องระบุไดรฟ์และโฟลเดอร์ที่รูปภาพอยู่ ให้ระบุชื่อไฟล์รูปภาพกับสกุลเท่านั้น

ตัวอย่าง การแทรกภาพชื่อ girl1.gif ซึ่งอยู่ในโฟล์เดอร์เดียวกัน

<html>
<body>
<center><h3>การแทรกภาพที่อยู่ในโฟล์เดอร์เดียวกัน </h3>
<img src= "girl1.gif">
</center>
</body>
</html>

ผลจากตัวอย่าง

การแทรกภาพที่อยู่ในโฟล์เดอร์เดียวกัน

ตัวอย่าง การแทรกภาพชื่อ girl2.gif ซึ่งอยู่ในโฟล์เดอร์ย่อยชื่อ pic6

<html>
<body>
<center><h3>การแทรกภาพที่อยู่ในโฟล์เดอร์</h3>
<img src= "pic6/girl1.gif">
</center>
</body>
</html>

ผลจากตัวอย่าง

การแทรกภาพที่อยู่ในโฟล์เดอร์

จากตัวอย่างจะเห็นได้ว่าถ้ารูปภาพอยู่ในโฟล์เดอร์จะต้องระบุชื่อโฟล์เดอร์ด้วย เช่น รูปภาพอยู่ในโฟล์เดอร์ pic6 เราจึงแทรกภาพด้วยคำสั่ง
<img src= "pic6/girl1.gif">

กรณีที่ 2 รูปภาพอยู่คนละที่กับไฟล์เว็บเพจ

รูปแบบโค้ด

<IMG SRC ="N/X.Y"> (โดยที่ Nคือชื่อโฟลเดอร์ที่อยู่ของภาพ/X คือชื่อไฟล์รูปภาพที่ต้องการแสดง.Yคือนามสกุลของภาพ)

เช่น <IMG SRC ="photo/zen2.jpg">

คำสั่ง หรือ Tag

            Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ

     Tag เดี่ยว     เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น

     Tag เปิด/ปิด     รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่

            <tag> เราเรียกว่า tag เปิด

            </tag> เราเรียกว่า tag ปิด

การจัดวางตำแหน่งของรูปภาพ

คำสั่ง <IMG SRC = "ชื่อรูปภาพ" ALIGN="ตำแหน่ง" >

align=left หรือ center หรือ Right หรือ top หรือ bottom : เป็นการกำหนดตำแหน่งของรูปว่าจะให้อยู่ด้านซ้าย ขวา หรือ ตรงกลาง ส่วน top กับ bottom ใช้จัดตำแหน่งอักษร เช่น จัดรูปให้อยู่ด้านขวา <img src="sura.jpg" align=right>

ตารางแสดงคำสั่งการจัดตำแหน่งของภาพ

การแสดงผล	คำสั่งที่ใช้กำหนดตำแหน่งข้อความ	ตำแหน่งที่แสดงผลข้อความ
1. แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ	ALIGN = "LEFT"	ตำแหน่งซ้ายของจอภาพ
1. แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ	ALIGN = "RIGHT"	ตำแหน่งขวาของจอภาพ
2. แบบแนวนอนเป็นคำสั่งที่ใช้กับข้อความ	ALIGN = "TOP"	ตำแหน่งบนสุดของรูปภาพ
	ALIGN = "MIDDLE","ABSMIDDLE"	ตำแหน่งกึ่งกลางของรูปภาพ
	ALIGN = "BOTTOM","BASELINE","ABSBOTTOM"	ตำแหน่งล่างสุดของรูปภาพ

<HTML>
<HEAD>
<TITLE> การจัดตำแหน่งภาพ</TITLE>
</HEAD>
<BODY bgcolor=white>

<div align="center"><strong>การวางตำแหน่งของภาพ</strong></div>
<p> <font size="2" face="ms sans serif"><img src = "images/cl_breakdance.gif" align = "TOP">
ข้อความนี้อยู่ส่วนบนของรูปภาพ (align = top) </font></p>
<hr>
<p> <font size="2" face="ms sans serif"><img src = "images/cl_breakdance.gif" align = "MIDDLE">
ข้อความนี้อยู่ส่วนกลางของรูปภาพ (align = middle) </font></p>
<hr>
<p> <font size="2" face="ms sans serif"><img src = "images/cl_breakdance.gif" align = "BOTTOM">
ข้อความนี้อยู่ส่วนล่างของรูปภาพ (align = bottom) </font></p>
<hr>
<p> <font size="2" face="ms sans serif"><img src = "images/cl_breakdance.gif" align = "LEFT">
เป็นการกำหนดรูปภาพให้ชิดซ้าย (align = left) </font></p>
<p><br> <br> <br> </p>
<p> </p><hr>
<p align="right"> <font size="2" face="ms sans serif"><img src = "images/cl_breakdance.gif" align = "RIGHT">
เป็นการกำหนดรูปภาพให้ชิดขวา (align = right) และ ข้อความนี้อยู่ส่วนบนของรูปภาพ </font></p>
<p></p>
<div align="center">
<p> </p>
<p> </p>
<br>
<hr>

</BODY>
</HTML>

การวางตำแหน่งของภาพ

ข้อความนี้อยู่ส่วนบนของรูปภาพ (align = top)

ข้อความนี้อยู่ส่วนกลางของรูปภาพ (align = middle)

ข้อความนี้อยู่ส่วนล่างของรูปภาพ (align = bottom)

เป็นการกำหนดรูปภาพให้ชิดซ้าย (align = left)

เป็นการกำหนดรูปภาพให้ชิดขวา (align = right) และ ข้อความนี้อยู่ส่วนบนของรูปภาพ

การเปลี่ยนขนาดรูปภาพ

รูปภาพบนคอมพิวเตอร์ไม่เหมือนกับรูปถ่าย รูปภาพคอมฯประกอบขึ้นจากเม็ดสีเล็กๆจำนวนมาก ซึ่งแต่ละเม็ดสีถูกเรียกสั้นๆว่า พิกเซล(pixel) ดังนั้นให้คุณจำไว้ว่าในบทนี้ ตัวเลขของขนาดที่เราจะพูดถึงอยู่ในรูปของพิกเซล ไม่ได้อยู่ในรูปนิ้วหรือเซนติเมตรหรืออื่นๆ

ภาพในคอมฯทุกๆภาพประกอบขึ้นจากพิกเซลจำนวนมาก ยิ่งจำนวนพิกเซลต่อนิ้วของภาพมีมากขึ้น ภาพนั้นจะมีรายละเอียดมากขึ้น และปรากฎให้เราเห็นได้ แต่ความจุข้อมูลจะมากขึ้น และใช้พื้นที่ในคอมฯของคุณเพิ่มขึ้นเช่นกัน ภาพบนเว็บเกือบทั้งหมดจะมีความละเอียดอยู่ระหว่าง 72 ถึง 100 พิกเซลต่อนิ้ว ซึ่งจะให้ละเอียดน้อยหรือมากกว่านี้ได้ แต่ว่าระดับ 72-100 เป็นจุดที่คุ้มกันระหว่าง ความจุที่ไม่มากไปและรายละเอียดที่กำลังดี

ทุกภาพถูกระบุขนาดเป็นพิกเซล ด้วยเหตุนี้คุณจึง สามารถระบุขนาดใหม่ได้ด้วยตัวเลขพิกเซล ยกตัวอย่างรูปผืนนาที่ผมใช้อยู่ มีความกว้าง 305 พิกเซล และสูง 213 พิกเซล อ้าว !? แล้วผมรู้ได้อย่างไรกัน ...รู้ได้จากโปรแกรม ที่คุณใช้เปิดรูปนั้นครับ เช่น คุณอาจดับเบิ้ลคลิ๊กที่ไฟล์รูป โปรแกรม Photoshop(หรืออื่นๆ) จะเปิดรูปให้คุณ และคุณสามารถกดดูขนาดรูปได้โดยเข้าไปในคำสั่งแก้ไขขนาดรูป จะมีบอกขนาดในแบบพิกเซลของรูปอยู่ แต่จะยุ่งยากครับ ผมแนะนำให้นำรูปมาลงในหน้าเว็บที่คุณสร้าง แล้วเปิดรูปออกมาดู แล้วคลิ๊กขวาที่รูปแล้วกดที่ propeties ซึ่งอยู่ล่างสุด (สำหรับ Internet Explorer) จะเห็นขนาดพิกเซลของรูปอยู่ข้าง Dimension : ลองทำดูสิครับ กับรูปผืนนาข้างบน

การปรับขนาดรูปทำได้โดยการกำหนดขนาดใหม่ ทั้งความกว้างและความสูง ในหน่วยของพิกเซล ด้วยการเพิ่มคำสั่งปรับความกว้าง(Width)และความสูง(Height)ลงในคำสั่ง IMG <IMG WIDTH="##" HEIGHT="##" SRC="na.jpg">
จะวางคำสั่งทั้งสองไว้หลัง SRC="--" ก็ได้ครับ คุณจะแทน ## ด้วยเลขพิกเซลของความกว้างและสูงที่คุณต้องการ หรือจะกำหนดเป็น % ของหน้าจอ (ซึ่งหากเป็น % จะให้ผลในแต่ละเครื่องไม่เท่ากัน เพราะความกว้างและสูงของหน้าจอคอมฯแต่ละเครื่องแตกต่างกันไป)ก็ได้ครับ ข้างล่างคือตัวอย่าง...

รูปภาพขนาดปกติ

รูปภาพขนาดกว้าง 80% ของความกว้างจอ สูง 50 พิกเซล

รูปภาพขนาดกว้าง 600 พิกเซล สูง 300 พิกเซล

รูปภาพขนาดกว้าง 2.52% ของความกว้างจอ สูง 20.5% ของความสูงหน้าจอ

(แต่ส่วนที่ละเอียดสุดของเลขพิกเซลคือ 1 นะครับ การกำหนด 50.1 พิกเซล จะมีค่าเท่ากับ 50 พิกเซล ไม่สามารถกำหนดได้ละเอียดเหมือนแบบ %)
อ้างอิง
http://www.bloggang.com/mainblog.php?id=kunyawat&month=15-05-2008&group=8&gblog=6
http://www.hellomyweb.com/index.php/main/content/2
http://school.obec.go.th/krurenu/html/p4-1.html
http://www.freebsd.sru.ac.th/index.php/macromedia-dreamweaver-8/42-chapter-4-insert-image
http://bu.lpc.rmutl.ac.th/naravit/begin-programming/basic_PHP/Chapter2_intro_HTML.htm
http://www.dwthai.com/Article/broken_img.htm
http://www.yupparaj.ac.th/CAI/32102/image1.html
http://www.aw.ac.th/web_html/010.htm
http://www.kty.ac.th/html/unit6/unit602.html
http://www.freewebs.com/maneemana/h6.html

วันที่ 30 สิงหาคม พ.ศ.2555

วันเสาร์ที่ 14 กรกฎาคม พ.ศ. 2555

การแต่งตัวอักษร

การแต่งตัวอักษร

การกำหนดแบบอักษร

เมื่อคุณใส่ tag <font face="ชื่อแบบอักษร"> ลงไปข้อความเหล่านั้นก็จะเปลี่ยนเป็นแบบมี่คุณเลือก

<body>
<font face="AngsanaUPC">สวัสดีจ้า ทุกคน</font>
<font face="CordiaUPC">สวัสดีจ้า ทุกคน</font>
<font face="MS sans serif">สวัสดีจ้า ทุกคน</font>
</body>

แบ่งตามลักษณะที่ปรากฏ เช่นตัวเอียง ตัวหนา

<B>
<I>
<S>
<Sub>
<Sup>
<U>

ตัวอักษรแบบตัวหนา (bold)
ตัวอักษรแบบตัวเอียง (italic)
ตัวอักษรแบบตัวขีดฆ่า (strike)
ตัวอักษรแบบตัวห้อย (subscripted)
ตัวอักษรแบบตัวยก (superscripted)
ตัวอักษรแบบขีดเส้นใต้ (underline)

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

<Em>
<Stong>
<Ins>
<Del>
<Code>
<Address>

ใช้เน้นข้อความ คำพูดหรือวลี (emphasized)
ใช้เน้นข้อความที่สำคัญมากๆ (strong)
ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted)
ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted)
ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code)
ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)

ซึ่งจริงแล้วนั้น ผลลัพธ์ออกมาก็เหมือนกัน เช่น B ให้ผลลัพธ์เหมือนกับ Strong เราจะเลือกใช้แบบใดก็ได้ แต่เราแยกเพื่อความสะดวกในการใช้งานมากกว่า

คำสั่งที่ทำให้รูปแบบตัวอักษรใน soure code เหมือนกับที่แสดงผล
Pre tag จะมีประโยชน์มากในการที่เราจะแสดงบทความที่มีเนื้อหามาก หรือ คัดลอกเนื้อหาจากที่อื่นมาทำให้เราไม่ต้องขึ้นบรรทัดใหม่ด้วยคำสั่ง br และใช้ในการแสดง source code ได้ดีอีกด้วย

รูปแบบของ Pre tag

คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ
สัญลักษณ์พิเศษบางตัวเช่น เครื่องหมายมากว่า (>) หรือ เครื่องหมายน้อยกว่า (<) ซึ่งเครื่องหมายเหล่านี้ใช้ในภาษา HTML ด้วยทำให้ตัวอักษรที่อยู่ในเครื่องหมายเหล่านี้กลายเป็น Tag หมด หรือเครื่องหมายที่ไม่มีบนคีบอร์ด แต่ถ้าเราต้องการแสดงเครื่องหมายเหล่านี้เราต้องใช้ Entity Name แทน ตามแบบด้านล่าง

ขนาดตัวอักษร

สามารถกำหนดขนาดของตัวอักษรได้ 2 วิธี

1. ในกรณีที่เป็นหัวข้อ (Heading) สามารถใช้คำสั่งต่อไปนี้

<H1>ขนาดใหญ่สุด</H1>
<H2>ขนาดใหญ่</H2>
<H3>ขนาดกลาง</H3>
<H4>ขนาดปกติ</H4>
<H5>ขนาดเล็ก</H5>
<H6>ขนาดเล็กสุด<H6>

2. ในกรณีทั่วไป จะใช้คำสั่ง <FONT SIZE=ค่าตัวเลข> เช่น

<FONT SIZE=3>ตัวอักษรขนาด 3</FONT> หรือ
<FONT SIZE=5>ตัวอักษรขนาด 5</FONT>

ตัวอย่างโค้ด

<html>
<head><title>webthaidd</title></head>
<body>
<font size=1>แสดงข้อความที่มีขนาด n=1</font><br>
<font size=2>แสดงข้อความที่มีขนาด n=2</font><br>
<font size=3>แสดงข้อความที่มีขนาด n=3</font><br>
<font size=4>แสดงข้อความที่มีขนาด n=4</font><br>
<font size=5>แสดงข้อความที่มีขนาด n=5</font><br>
<font size=6>แสดงข้อความที่มีขนาด n=6</font><br>
<font size=7>แสดงข้อความที่มีขนาด n=7</font><br>
</body>
</html>

ผลที่ได้

สีตัวอักษร

การใส่สีอักษร

รูปแบบคำสั่ง : <font color=ชื่อสีหรือ#รหัสสี > .....ข้อความ...... </font>. [ตารางค่ารหัสสี]

คำอธิบาย : เป็นคำสั่งที่ใช้ในการตกแต่งอักษรให้เป็นสีต่างๆ ตามชื่อสีหรือรหัสสี โดยนำคำสั่งนี้ไปคร่อมข้อความที่จะตกแต่ง

ตัวอย่าง : การตกแต่งสีอักษร

รูปแบบคำสั่ง

การแสดงผล

<HTML>
<HEAD>
<TITLE> การใส่สีอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>

<font color=red> อักษรสีแดง </font> <br>
<font color=blue> อักษรสีน้ำเงิน </font> <br>
<font color=#66CCFF> อักษรสีฟ้า </font> <br>

</BODY>
</HTML>

อักษรสีแดง
อักษรสีน้ำเงิน
อักษรสีฟ้า

ตัวเอียง ตัวหนา ขีดเสีนใต้

รูปแบบคำสั่ง :<B>...ข้อความ..... </B> :คำสั่งตัวหนา
<I>...ข้อความ..... </I> :คำสั่งตัวเอียง<U>...ข้อความ..... </U> :คำสั่งขีดเส้นใต้

: คำอธิบาย : เมื่อเราต้องการทำให้ตัวอักษรหนา เอียง หรือขีดเส้นให้ ให้นำคำสั่งข้างต้นไปคร่อม ข้อความนั้นไว้ อย่างเช่น ต้องการแต่งคำว่า "สุระ วรรณแสง" ให้เอียงและหนา ให้ทำดังนี้ : <I><B> การเขียนเว็บเพจด้วยภาษา HTML</B></I> ผลลัพธ์ที่ได้คือ การเขียนเว็บเพจด้วยภาษา HTML

ตัวอย่าง : ทดสอบการทำตัวอักษรหนา,เอียง,ขีดเส้นใต้

รูปแบบคำสั่ง

การแสดงผล

<HTML>
<HEAD>
<TITLE> การใส่สีอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>

<font size=2 face="ms sans serif"><B>ข้อความหนา</B><br><I>ข้อความเอียง</I><br>   <U>ข้อความขีดเส้นใต้<U><br>
<B><I>ข้อความหนา+เอียง</I></B><br>
<B><I><U>ข้อความหนา+เอียง+ขีดเส้นใต้</U></i></B> <br>
<I><U>ข้อความเอียง+ขีดเส้นใต้</U></I><br>
<U><B>ข้อความขีดเส้นใต้+หนา</B></U><br>
</font>

</BODY>
</HTML>

ข้อความหนา
ข้อความเอียง
ข้อความขีดเส้นใต้
ข้อความหนา+เอียง
ข้อความหนา+เอียง+ขีดเส้นใต้
ข้อความเอียง+ขีดเส้นใต้
ข้อความขีดเส้นใต้+หนา

ตัวอักษรวิ่ง ตัวอักษรกระพริบ

ตัวอักษรกระพริบ

เป็นคำสั่งที่ใช้กำหนดตัวอักษรที่อยู่ใน Tag เกิดการกระพริบ ซึ่งคำสั่งนี้จะใช้ได้กับ Browser ของ Netscape เท่านั้น
รูปแบบคำสั่ง
<BLINK>......</BLINK>

ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
<TITLE>ตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY> <BLINK>welcome</BLINK>
</BODY>
</HTML>

การแสดงผล

การทำตัวอักษรวิ่ง
นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์
นำไปใช้ในการตกแต่งเวบเพจ

รูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>

ทิศทางการวิ่ง

ทิศทาง	คำอธิบาย
UP	วิ่งจากด้านล่างขึ้นด้านบน
DOWN	วิ่งจากด้านบนลงด้านล่าง
LEFT	วิ่งจากด้านขวาไปด้านซ้าย
RIGHT	วิ่งจากด้านซ้ายไปด้านขวา

ตัวอย่างโปรแกรม

<HTML>
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์กวี คนดีศรีอยุธยา

การจัดตำแหน่งข้อความ

ในการกำหนดตำแหน่งในภาษา HTML สามารถกำหนดได้หลายรูปแบบค่ะ ทั้งแบบกำหนดเป็นแท็ก และการกำหนดเป็น Attribute ของแท็กค่ะ โดยมีรูปแบบดังนี้ค่ะ

           1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center  <center> ...ข้อความ...</center>
           2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้
                       <p align = "ตำแหน่ง"> ...ข้อความ...</p>
               ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

รูปแบบการจัดตำแหน่งข้อความ

  <html>
  <head><title> ....การจัดตำแหน่งข้อความ....</title></head>
       <body>
               <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br>
               <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br>
               <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br>
               <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br>
        </body>
  </html>

นอกจาก คำสั่ง align ทั้งสามแบบแล้ว ยังมีการจัดตำแหน่งอีกแบบหนึ่งค่ะ นั้นก็คือ

<p align="justify">....</p>นิยมใช้จัดข้อความที่เป็นเนื้อหาเยอะ ๆ เพื่อให้มีการจัดข้อความอัตโนมัติ โดยข้อความที่จัดด้วยรูปแบบนี้ ข้อความทั้งซ้ายและขวา จะชิดขอบทั้งสองด้าน ทำให้ดูเป็นระเบียบ

อ้างอิง

http://www.hellomyweb.com/index.php/main/content/14

http://www.webthaidd.com/html/webthaidd_article_387_.html

http://www.bkk2.in.th/Topic.aspx?TopicID=7177

http://www.bkk2.in.th/Topic.aspx?TopicID=7179

http://www.chandra.ac.th/office/ict/document/it/it06/html03.html
http://webcache.googleusercontent.com/search?q=cache:http://school.obec.go.th/phusing/html/chapter3.htm
http://113.53.238.199/it/elearning/html/html2.html
http://www.thainextstep.com/html/html_05.php
http://webcache.googleusercontent.com/search?q=cache:http://school.obec.go.th/krurenu/html/p2-8.html
วันที่ 7 ก.ค. 2555

วันพฤหัสบดีที่ 28 มิถุนายน พ.ศ. 2555

HTML

HTML Tag พื้นฐาน

HTML

ย่อมาจาก Hyper Text Markup Language
ใช้โปรแกรม Text Editor เช่นจาก Notepad หรือ Word pad ในการสร้างHTML
เปิดเอกสาร การแสดงไฟล์เอกสาร การแสดงไฟล์เอกสาร HTML มี 2 วิธีคือ
1. การแสดงไฟล์เอกสาร โดยเปิดผ่าน IE มีขั้นตอนดังนี้ - ดับเบิ้ลคลิกที่ IE แล้วเลือกเมนู File ,Open , Brows - เลือกชื่อไฟล์ที่ต้องการเปิด, Open , OK
2. การแสดงไฟล์เอกสาร HTML โดยตรง มีขั้นตอนดังนี้ - ดับเบิ้ลคลิกที่ชื่อไฟล์เอกสารนั้น - จะปรากฏผลลัพธ์ของไฟล์เอกสาร HTML ผ่านเว็บบราวเซอร์ การเปิดดู CODE ภาษา HTML เมื่อแสดงบนเว็บบราวเซอร์ - เลือกเมนู View , Source

Text Editor
คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย

โปรแกรม Notepad

โปรแกรม EditPlus

โปรแกรม Macromedia Dreamweaver

องค์ประกอบของ html

โครงสร้างของภาษา HTML ประกอบด้วย 3 ส่วน คือ

1. ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML ซึ่งจะมีแท็ก <html>…</html> กำกับอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของแฟ้มข้อมูล
2. ส่วนหัวเรื่อง (Head) เป็นส่วนที่กำหนดให้แสดงข้อความที่แถบหัวเรื่องของหน้าเว็บเพจนั้น ๆ เช่น แท็ก <title>....</title>และเก็บแท็กพิเศษอื่น ๆ
3. ส่วนเนื้อหา (Body) เป็นส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมดซึ่งประกอบด้วย ข้อความและแท็กต่าง ๆ เช่น แท็กสำหรับจัดการกับรูปแบบของข้อความ ตาราง รูปภาพ กราฟิกต่างๆ สีของตัวอักษร สีพื้น เป็นต้น

<html>
คือ คำสั่งเริ่มต้น คำสั่ง HTML จะถือเป็นคำสั่งเริ่มต้นของการเขียน HTML จะบอกเว็บบราวเซอร์ให้รู้ว่านี่เป็นเอกสาร HTML
<head>
คือ ส่วนหัว เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่อง ซึ่งจะมีคำสั่งย่อยลงไปอีกหนึ่งคำสั่งคือ <TITILE>
<title>
คือ การกำหนดข้อความใน Title bar คำสั่งนี้ เป็นส่วนที่จะแสดงชื่อของเอกสาร ที่จะปรากฏในขณะที่ไฟล์ HTML นั่นทำงานอยู่ ข้อความนี้จะถูกนำไปแสดง ในส่วนของ Title Bar สำหรับโปรแกรม Mosaic จะแสดงไตเติลที่ทูลบาร์ข่างล้างเมนูหลัก

<body>
คือ ส่วนเนื้อหา,คำสั่งต่างๆ ส่วนนี้เป็นส่วนสำคัญในการแสดงผล ในการเขียน HTML เราอาจจะไม่เขียนคำสั่งในส่วนที่เป็นส่วนหัวก็ได้ แต่ถ้าเป็นส่วนนึ้จะไม่เขียนไม่ได้
<BR>
คือ คำสั่งขึ้นบรรทัดใหม่โดยตัวคำสั่งจะใช้เพียงตัวเดียวไม่ต้องใช้ 2 ตัวเหมือนคำสั่งอื่น อยู่ภายในคำสั่ง <body>
<P>
คือ คำสั่งขึ้นย่อหน้าใหม่ใช้กับข้อความ โดยใช้เพียวตัวเดียวแทรกในข้อความ ภายในคำสั่ง<body>

ตัวอย่าง
<HTML>
<HEAD>
<TITLE>การกำหนดขนาดตัวอักษร </TITLE>
</HEAD>
<BODY>
<FONT SIZE=6>
นี่คือขนาดตัวอักษร = 6 <BR>
</FONT>
<FONT SIZE=5>
นี่คือขนาดตัวอักษร = 5 <BR>
</FONT>
<FONT SIZE=4>
นี่คือขนาดตัวอักษร =4 <BR>
</FONT>
<FONT SIZE=2>
นี่คือขนาดตัวอักษร =2 <BR>
</FONT>
</BODY>
</HTML>
ผลที่ได้
นี่คือขนาดตัวอักษร = 6นี่คือขนาดตัวอักษร = 5
นี่คือขนาดตัวอักษร = 4
นี่คือขนาดตัวอักษร = 2

การกำหนดตัวอักษร
การกำหนดตัวอักษรเป็นหัวเรื่อง กำหนดโดยใช้ Tag<hn> ซึ่งมีขนาด 1 – 7 โดยเรียงจากใหญ่ไปเล็กรูปแบบคำสั่ง HTML ในการกำหนดตัวอักษรเป็นหัวเรื่อง <hn>ข้อความ</hn>

<HTML>
<HEAD>
<TITLE> การกำหนดตัวอักษรเป็นหัวเรื่อง</TITLE>
</HEAD>
<BODY>
<h1>การกำหนดตัวอักษรเป็นหัวเรื่อง H1 ขนาด 1 </h1>
<h2>การกำหนดตัวอักษรเป็นหัวเรื่อง H2 ขนาด 2</h2>
<h3>การกำหนดตัวอักษรเป็นหัวเรื่อง H3 ขนาด 3</h3>
<h4>การกำหนดตัวอักษรเป็นหัวเรื่อง H4 ขนาด 4</h4>
<h5>การกำหนดตัวอักษรเป็นหัวเรื่อง H5 ขนาด 5</h5>
<h6>การกำหนดตัวอักษรเป็นหัวเรื่อง H6 ขนาด 6</h6>
<h7>การกำหนดตัวอักษรเป็นหัวเรื่อง H7 ขนาด 7</h7>
</BODY>
</HTML>

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

อ้างอิง
http://guru.google.co.th/guru/thread?tid=765abefbc7fb4de5
http://school.obec.go.th/pp_school/html/editor.html
http://www.twebmaster.com/viewArticle.php?id=1
http://school.obec.go.th/pp_school/html/html_stu.html
http://tc.mengrai.ac.th/paisan/e-learning/HTML/html.htm
http://www.webthaidd.com/html/webthaidd_article_295_.html
http://school.obec.go.th/krurenu/html/p2-4.html
วันที่ 6 มิถุนายน 2555