รูปแบบการใส่รูปภาพ
<img src = “ชื่อภาพ” width=”ขนาดความกว้างที่ต้องการ” height=”ขนาดความสูงที่ต้องการ” border=”ขนาดของเส้นขอบ”>
Attribute กำกับเพิ่มเติม
src=”ระบุที่เก็บรูปภาพ,ชื่อรูปภาพ”
width=”ตัวเลขระบุความกว้าง”
height=”ตัวเลขระบุความสูง”
border=”ตัวเลขระบุความหนาของเส้นขอบ”
***หากเราไม่ได้ระบุขนาดกว้างและสูง ภาพจะมีขนาดเท่าขนาดของภาพต้นฉบับ
ตัวอย่าง
<html> <head><title> ....การใส่รูปภาพ....</title></head> <body> <img src = "lilies.jpg" width="200" height="200" border="1"> </body> </html>
ผลลัพธ์ที่ได้คับ
การใส่รูปภาพ
โดยใช้ Attribute align รูปแบบดังนี้]]>
- การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> …ข้อความ…</center>
- . การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้
<p align = “ตำแหน่ง”> …ข้อความ…</p>
ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right
ตัวอย่างคับ
<html></div> <div><head><title> ....การจัดตำแหน่งข้อความ....</title></head></div> <div><body></div> <div><center><font size = "4"> ข้อความนี้อยู่กึ่งกลาง</font></center><br></div> <div><p align = "left"><font size = "4"> ข้อความชิดซ้าย </font></p><br></div> <div><p align = "center"><font size = "4"> ข้อความนี้อยู่กึ่งกลาง </font></p><br></div> <div><p align = "right"><font size = "4"> ข้อความนี้ชิดขวา </font></p><br></div> <div></body></div> <div id="_mcePaste"></html>
]]>ตัวอย่างการจัดตำแหน่งข้อความ
นอกจาก คำสั่ง align ทั้งสามแบบแล้ว ยังมีการจัดตำแหน่งอีกแบบ นั่นก็คือ <p align=”justify”>….</p> นิยมใช้จัดข้อความที่เป็นเนื้อหาเยอะ ๆ เพื่อให้มีการจัดข้อความอัตโนมัติ โดยข้อความที่จัดด้วยรูปแบบนี้ ข้อความทั้งซ้ายและขวา จะชิดขอบทั้งสองด้าน ทำให้ดูเป็นระเบียบ ถ้าอยากรู้ว่าผลลัพธ์ที่จะแสดงออกมานั้นเป็นยังไง ก็ต้องลองเอาไปทำดูกันนะคับ
ในแท็กภาษา HTML ก็มีคำสั่งเหล่านี้อยู่ด้วยเหมือนกัน โดยรูปแบบของแท็ก มีดังนี้
- การกำหนดแบบตัวหนา (Bold) <b> …ข้อความ…</b> หรือ <strong> …ข้อความ…</strong>
- การกำหนดแบบตัวเอียง (Italic) <i> …ข้อความ…</i>
- การกำหนดแบบตัวขีดเส้นใต้ (Underline) <u>…ข้อความ…</u>
- การกำหนดแบบตัวขีดฆ่า (Strike) <strike>…ข้อความ…</strike>
ตัวอย่างรูปแบบการจัดรูปแบบข้อความแบบต่าง ๆ
<html> <head><title> ....การจัดรูปแบบข้อความ.ใน HTML ....</title></head> <body> <b><font size = "2"> ข้อความนี้กำหนดตัวหนา b</font></b><br /> <strong><font size = "2"> ข้อความนี้กำหนดตัวหนา strong</font></strong><br /> <i><font size = "2"> ข้อความนี้กำหนดตัวเอียง i </font></i><br /> <u><font size = "2"> ข้อความนี้กำหนดตัวขีดเส้นใต้ u </font></u><br /> <strike><font size = "2"> ข้อความนี้กำหนดตัวขีดฆ่า strike </font></strike><br /> </body> </html>
ผลลัพธ์ที่ได้
: แล้วอย่าลืมมาติดตาม HTML ตอนต่อไปนะคับ….
- การกำหนดชื่อฟอนต์ Attribute ที่ใช้ คือ face = “ชื่อฟอนต์“
- การกำหนดขนาดของข้อความ Attribute ที่ใช้ คือ size = “ขนาดของข้อความ“
- การกำหนดสีของข้อความ Attribute ที่ใช้ คือ color= “ชื่อสี” หรือ color = “#รหัสสี“
1. การกำหนดชื่อฟอนต์
การกำหนดฟอนต์ ก็คล้าย ๆ กันกับตอนที่เราิพิมพ์งานใน Ms word คับซึ่งเราสามารถเลือกได้ว่าเราจะใช้ฟอนต์แบบไหน อาจจะเป็น Arial ,MS Sans Serif ,Angsana New,Tahoma เป็นต้น ในการเขียนเว็บเพจนั้น ฟอนต์ที่เป็นที่นิยมจะมีด้วยกัน 2 ชนิดคือ MS Sans Serif และ Tahoma โดยฟอนต์แบบ MS Sans Serif จะนิยมใช้กับเว็บที่มีการแสดงผลข้อความเป็นภาษาไทย และ Tahoma มักใช้การแสดงผลข้อความเป็นภาษาอังกฤษ แต่ก็สามารถใช้กับข้อความภาษาไทยได้เหมือนกัน ดูตัวอย่างกันคับ
<html> <head><title> ....การหนดรูปแบบฟอนต์ของข้อความ....</title></head> <body> <font face = "MS Sans Serif"> ข้อความนี้กำหนดฟอนต์แบบ MS Sans Serif<br /> </font> <font face = "Arial"> ข้อความนี้กำหนดฟอนต์แบบ Arial<br /> </font> <font face = "Tahoma"> ข้อความนี้กำหนดฟอนต์แบบ Tahoma </font> </body> </html>ผลลัพธ์ที่ได้
2.การกำหนดขนาดของข้อความ
การกำหนดขนาดของข้อความสามารถกำหนดได้โดยใช้ตัวเลขเป็นตัวกำหนด ซึ่งสามารถกำหนดได้ 7 ระดับ รูปแบบการใส่มีด้วยกัน 3 แบบ คือ แบบแรกการกำหนดโดยใช้ตัวเลข 1-7 สองการกำหนดตัวเลขโดยใส่เครื่องหมาย + คือตั้งแต่ +1 – +7 และ การใส่แบบใส่เป็นค่าแบบ – ตั้งแต่ -1 – -7 ซึ่งรูปแบบการใส่มีดังนี้คับ
<html> <head><title> ....การหนดรูปแบบขนาดข้อความ....</title></head> <body> <font size = "-1"> ข้อความนี้กำหนดขนาดเท่ากับ -1</font> <br /> <font size = "-2"> ข้อความนี้กำหนดขนาดเท่ากับ -2</font> <br /> <font size = "-3"> ข้อความนี้กำหนดขนาดเท่ากับ -3</font> <br /> <font size = "-4"> ข้อความนี้กำหนดขนาดเท่ากับ -4</font> <br /> <font size = "-5"> ข้อความนี้กำหนดขนาดเท่ากับ -5</font> <br /> <font size = "-6"> ข้อความนี้กำหนดขนาดเท่ากับ -6</font> <br /> <font size = "-7"> ข้อความนี้กำหนดขนาดเท่ากับ -7 </font> <br /> <font size = "1"> ข้อความนี้กำหนดขนาดเท่ากับ 1</font> <br /> <font size = "2"> ข้อความนี้กำหนดขนาดเท่ากับ 2</font> <br /> <font size = "3"> ข้อความนี้กำหนดขนาดเท่ากับ 3</font> <br /> <font size = "4"> ข้อความนี้กำหนดขนาดเท่ากับ 4</font> <br /> <font size = "5"> ข้อความนี้กำหนดขนาดเท่ากับ 5</font> <br /> <font size = "6"> ข้อความนี้กำหนดขนาดเท่ากับ 6</font> <br /> <font size = "7"> ข้อความนี้กำหนดขนาดเท่ากับ 7</font> <br /> </body> </html>ผลลัพธ์ที่ได้
3. การกำหนดสีของข้อความ
การกำหนดสีสันของข้อความเป็นเรื่องสำคัญอยู่ในลำดับต้น ๆ ของการทำเว็บเลยทีเดียว เพราะสีสันข้อความสามารถดึงดูดสายตาของผู้เยี่ยมชม หากข้อความของเว็บใช้สีที่อ่านยาก เพราะว่าสีกลืนกันไปหมดกับพื้นหลัง ความสำคัญของการสื่อความหมายของข้อความนั้น ๆ อาจอ่อนด้อยลง ดังนั้นการพิจารณาเลือกใช้สีควรเลือกให้เหมาะกับโทนสีทั้งหมดของเว็บ ไม่ควรอ่อนด้อยเกินไป หรือโดดเด่นเิกินไป (สำหรับข้อความเล็ก ๆ ต้องการเน้นอาจทำได้) ซึ่งรูปแบบการใส่สีให้ข้อความในเว็บมีดังนี้
<html> <head><title> ....การหนดรูปแบบสีข้อความ....</title></head> <body> <font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br /> <font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> <br /> <font color = "green"> ข้อความนี้กำหนดให้เป็นสีเขียว </font> <br /> <font color = "#000000"> ข้อความนี้กำหนดให้เป็นสีดำ </font> <br /> </body> </html>ผลลัพธ์ที่ได้
*** การกำหนดลักษณะข้อความในแท็กเดียว
ในการกำหนดลักษณะข้อความสามารถกำหนดได้ในแท็กเดียว โดยการเิ่พิ่ม Attribute ของแท็ก <font> โดยใช้ Space หรือช่องว่างเป็นตัวแบ่งระหว่างแต่ละ Attribute โดยเขียนโค้ดตามตัวอย่างดังนี้
<font face = “ชื่อฟอนต์” size = “ขนาดข้อความ” color = “สี”> …. </font>
เช่น
<html> <head><title> ....การกำหนดลักษณะข้อความในแท็กเดียว....</title></head> <body> <font color = "red" size="5" face="Tahoma"> ข้อความนี้กำหนดให้เป็นสีแดง ขนาดเท่ากับ 5 ฟอนต์ชื่อ "Tahoma"</font> <br /> </body> </html>
ผลลัพธ์ที่ได้ 
]]>**** มีแท็กอื่นเพิ่มเติมสำหรับบทความนี้นะคับ นั่นคือ แท็ก <br /> หรือ <br> แท็กนี้เป็นแท็กสำหรับการขึ้นบรรทัดใหม่ นอกจากแท็ก <br /> แล้ว ยังมีแท็กสำหรับขึ้นบรรทัดใหม่อีกหนึ่งแท็กคือ <p> หรือ <p>….</p> แต่แตกต่างกันที่ <br /> เป็นการขึ้นบรรทัดใหม่ของย่อหน้าเดียวกัน แต่ <p> จะเป็นการขึ้นบรรทัดย่อหน้า ดังนั้น ช่องว่างของการขึ้นบรรทัดใหม่ของ <p> จะมีความสูงมากกว่า <br />
ในการใส่รูปแบบนั้นจะใส่ในส่วนของแท็กเปิด ของแท็ก เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก นั้นเอง โดยจะมีรูปแบบดังนี้
1. แบบใส่สีให้พื้นหลัง bgcolor = “ชื่อสี” หรือ bgcolor = “#รหัสสี”
2. แบบใส่ภาพให้พื้นหลัง background = “ชื่อภาพ”
รูปแบบการใส่สีพื้นหลัง
<html> <head><title> ....การใส่สีให้พื้นหลังเป็นสีน้ำเงิน....</title></head> <body bgcolor = "blue"> </body> </html>
รูปแบบการใส่ภาพพื้นหลัง
<html> <head><title> ....การใส่ภาพให้พื้นหลัง....</title></head> <body background = "lilies.jpg"> </body> </html>
]]>Tips
การระบุค่าสีสำหรับภาษา HTML
การระบุค่าสีสำหรับภาษา HTML สามารถระบุค่าได้ 2 แบบ คือ แบบระบุโดยใช้ชื่อสี (ภาษาอังกฤษ) เช่น red green blue เป็นต้น และอีกรูปแบบหนึ่ง คือการระบุค่าสีเป็นรหัสสี ซึ่งอยู่ในรูปแบบของเลขฐาน 16 ได้แก่ 1-9 และ E-F (ทั้งหมดรวม 16 ตัว) และเพื่อให้ได้สีที่หลากหลายจึง มีการผสมของหลักสีกลายมาเป็นรหัสค่าสี 6 หลัก ซึ่งมีตั้งแต่รหัส 000000 – FFFFFF ซึ่งจะได้สีทั้งหมดประมาณ 16.7 ล้านสีด้วยกันในรหัสสี 6 หลักนี้ มีความหมายเกี่ยวการผสมสีอยู่ โดยแบ่งเป็น 3 สีหลัก หรือจะเรียกว่าแม่สีก็ได้คือ สองหลักแรก คือสีแดง และ 2 หลักกลางคือสีเขียว และ 2 หลักสุดท้ายคือสีน้ำเงิน ซึ่งเราจะเรียกว่า RGB (Red Green Blue) โดยแม่สีสามตัวหลักนี้ เขียนอยู่ในรูปแบบรหัสสีสำหรับใช้กับภาษา HTML ได้ดังนี้
- รหัสสีแดง #FF0000
– รหัสสีเขียว #00FF00
- รหัสสีน้ำเงิน #0000FF
นอกจากนี้ก็มีสีหลักอีก 2 สี ซึ่งก็คือ
- รหัสสีดำ #000000
- รหัสสีขาว #FFFFFF
หลักการของสีทางคอมพิวเตอร์เราจะเรียกว่าสีทางแสง ซึ่งจะมีความแตกต่างจากสีทางวัตถุอยู่บ้าง นั้นก็คือ หากเป็นสีในทางวัตถุเมื่อเราผสมสี แดง เขียว น้ำเงิน เข้าด้วยกันจะได้ผลลัพธ์เป็นสีดำ แต่สำหรับสีทางแสง เมื่อผสมสีีทั้ง 3 นี้เข้าด้วยกันจะได้เป็นสีขาว ดังเช่นเมื่อเรา เราเอารหัสสี แดง เขียว น้ำเงิน ซึ่งก็คือ #FF0000 #00FF00 และ #0000FF รวมกันจะได้รหัสสีของสีขาว #FFFFFF
การใส่ภาพในเอกสาร HTML
ในบทความตอนนี้มีส่วนที่เกี่ยวข้องกับการใช้ภาพ ดังนี้จึงขอให้ความรู้เกี่ยวกับเรื่องของภาพที่จะนำมาใช้ทำเว็บกันซะเลย ซึ่งไฟล์ภาพที่เป็นมาตรฐานที่สามารถนำำมาใส่ในเว็บมีอยู่ด้วยกัน 3 ชนิด โดยแต่ละภาพก็มีลักษณะการนำมาใช้ที่แตกต่างกัน ดังนี้1. GIF (Graphic Intechange Format)
ไฟล์ภาพชนิดนี้ นิยมใช้สำหรับภาพกราฟิคที่เป็นลักษณะลายเส้น ข้อความตัวอักษร หรือภาพการ์ตูนต่าง ๆ ซึ่งมีสีไม่มากนัก เพราะไฟล์ GIF มีค่าสีสูงสุด 256 สี จึงทำให้ภาพกราฟิคที่เป็นไฟล์ประเภท GIF เป็นภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก แต่มีข้อดีคือ สามารถสร้างและเซฟภาพประเภทนี้ให้มีลักษณะพื้นหลังโปร่งใส (Transparent) ซึ่งสามารถนำภาพเหล่านี้ไปใช้กับพื้นหลังสีอะไรก็ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .gif2. JPG (Joint Photographic Expert Group)
ไฟล์ประเภทนี้สามารถแสดงผลของสีได้สูงสุดถึง 16.7 ล้านสี ดังนั้นจึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายต่าง ๆ หรือภาพอื่น ๆ ที่มีสีเยอะ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง และไฟล์ประเภทนี้ไม่สามารถทำเป็นแบบพื้นหลังโปร่งใส่ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .jpg และ.jpeg3. PNG (Portable Network Graphic)
ไฟล์ประเภทนี้จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง 16.7 ล้านสีเหมือนไฟล์ JPG นอกจากนี้ยังสามารถทำเป็นภาพพื้นหลังโปร่งใส เหมือนกับ GIF ได้ด้วย แต่ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็ก ๆ แต่มีการใช้สีมาก เช่น ภาพไอคอน ต่าง ๆ ไฟล์ประเภทนี้มีนามสกุล .png
คบหาดูใจกันมานมนานทั้ง 2 คู่ สำหรับคู่รัก10 ปี แอ้ม – ศิรประภา สุขดำรงค์ กับ เอิร์ธ – ชินทัพพ์ ศดิศสิทธินนท์ และ คู่รักสุดแนวอย่าง ก้อย – วลัยลักษณ์ มุสิกโปฎก แห่งวง Saturday Seiko และ โย่ง – อนุสรณ์ มณีเทศ แห่งวง Armchair ที่วาเลนไทน์ปีนี้ ในงานแถลงข่าว หัตถศิลป์ แห่งรักสร้างสรรค์ ที่จะจัดขึ้นในวันที่ 12-14 กุมภาพันธ์ศกนี้ ณ ศูนย์ส่งเสริมศิลปาชีพระหว่างประเทศ (องค์การมหาชน) จ.พระนครศรีอยุธยา
คู่แรกของแอ้มและเอิร์ธ สาวแอ้มเล่าว่า 10 ปีที่ผ่านมา คบกันด้วยดีตลอด เพราะรู้จักนิสัยใจคอกันดี และที่คบกันได้นานขนาดนี้ใช้หลักการเป็นเพื่อนกันมากกว่า เวลาที่โกรธกันก็จะหลบๆ กันไปสงบสติ แล้วค่อยคุยกัน ไม่เคยโกรธกันข้ามวันเลย ซึ่งเป็นสิ่งที่ดี ไม่เป็นการเพิ่มดีกรีความโกรธ ส่วนของขวัญวาเลนไทน์ปีนี้มองหาของไทยๆ ให้กันก็ดีนะ หากนึกถึงแต่ดอกไม้ ช็อคโกแลต หรือเครื่องประดับ จริงๆ แล้วไทยเราเองก็มีเครื่องประดับ สร้อย แหวน ลงยา ซึ่งสวยงามไม่แพ้เครื่องประดับฝรั่งเช่นกัน แถมยังเป็นภูมิปัญญาของคนไทยอีกด้วยค่ะ
ส่วนหนุ่มเอิร์ธ ก็เล่าว่า ปีแรกๆ คบกันดูเหมือนจะไปไม่รอด แต่พอได้เรียนรู้กันและใช้หลักเป็นเพื่อนกัน ก็ดีขึ้นเรื่อยๆ เพราะคนรัก จริงๆ แล้วก็คือเพื่อนที่รู้ใจที่จะอยู่ร่วมกันไปตลอดชีวิต ของขวัญก็เป็นสิ่งสำคัญเหมือนกัน อย่างวาเลนไทน์ปีนี้ จะเลือกของขวัญให้ทั้งทีก็น่าจะดูดี มีคุณค่าในตัวเอง อย่างสินค้าแบบไทยๆ ก็น่าสนใจ ไม่ได้มีแบบเชยๆ แก่ๆ หรือชิ้นใหญ่เสมอไป แต่มีพวกของใช้น่ารักๆ กุ๊กกิ๊ก เก๋ๆ ให้เลือกซื้อหาไว้มอบให้แก่กัน เช่น กรอบรูป หมอน กล่องใส่ของที่ทำจากผ้าไหม ผ้าทอมือสวยๆ ก็น่าจะเหมาะครับ
ส่วนคู่รัก คู่รักสุดแนวอย่าง โย่ง อาร์มแชร์ และ ก้อย เซทเทอร์เดย์ เซย์โกะ ที่ครองรักกันมาเป็นปีที่ 8 สาวก้อยเล่าว่า คู่ของเรามีความสุขกับความเรียบง่าย ตั้งแต่คบกันแรกๆ ได้ตกลงกันว่าจะทำอะไรดีๆ ให้คนรอบข้างด้วยในวันวาเลนไทน์ เช่น บริจาคโลหิต ช่วยเหลือเด็กกำพร้า ส่วนของขวัญก็สำคัญนะ แต่ต้องไม่แพง หรือไม่ก็แฮนด์เมดด้วยตัวเอง อย่างก้อยเองชอบแต่งตัว และเย็บปักถักร้อย ได้ใช้ผ้าไทยมาเย็บตกแต่งเสื้อผ้าประจำ หรือทำปกไดอารี่ให้โย่งเมื่อวาเลนไทน์ปีก่อนด้วย ของไทยสวยๆ เยอะนะ วัยรุ่นก็ยังใช้ได้ เก๋ด้วยซ้ำไป อยู่ที่มิกซ์แอนด์แมทช์มากกว่า อย่างครั้งหนึ่งก้อยไปต่างประเทศด้วยชุดประดิษฐ์จากผ้าไทยแล้วมีฝรั่งมาถาม ว่าแบรนด์อะไรสวยจัง ภูมิใจมาก รู้สึกว่าของไทยๆ เป็นของดีที่คนไทยมองข้าม วาเลนไทน์นี้จึงน่าจะมองหางานหัตศิลป์แบบไทยมอบให้กันก็ดูเก๋ไปอีกแบบ ก้อยเองเล็งหมอนผ้าไหมไว้ให้โย่งนอนหนุนในรถตู้เวลาไปทัวร์คอนเสิร์ตด้วย รูปทรงมันแปลกดี น่าจะเป็นภูมิปัญญาไทยที่ออกแบบมาให้เข้ากับสรีระ
ส่วน หนุ่มโย่ง ก็เล่าว่า เวลาผมกับก้อยไปเที่ยวกันก็ชอบไปดูวิถีชาวบ้าน งานโอท็อปอะไรพวกนี้จะชอบมาก ดูมันคลาสสิก และมีชิ้นเดียวด้วย ของขวัญที่ผ่านมาจึงมักจะชอบทำเอง ทำตุ๊กตา ทำไดอารี่ ที่มีชิ้นเดียวให้เหมือนกัน ผมว่าของขวัญมันก็สำคัญนะ ไม่ต้องแพง แต่มีคุณค่าทางจิตใจ เป็นส่วนเสริมให้มีวันเวลาดีๆ น่าจดจำด้วยกัน ส่วนปีนี้ผมรู้ว่าก้อยชอบแต่งตัว และขี้หนาวด้วย เลยให้ผ้าพันคอ เขาชอบมากพวกลายไทยๆ แบบนี้ คิดว่าต้องถูกใจแน่นอนครับ นอกจากของขวัญแล้วในทุกวันก็ต้องดูแลซึ่งกันและกัน จริงใจ มีอะไรบอกกันตรงๆ เหมือนเพื่อนคนหนึ่งที่ดีต่อกัน
หวานกันซะขนาดนี้ รับเคล็ดลับครองรักดีๆ ของ 2 คู่ไว้ทำกันดูบ้าง จะได้แฮปปี้กันทุกๆ วัน
ที่มาข้อมูล : บริษัท แม็กซิม่า คอนซัลแตนท์ จำกัด
หรือใช้ /* ข้อความต่างๆ ที่ comment ไว้กันลืม */ สำหรับละเว้นคำสั่งหลายบรรทัด
ดูตัวอย่างกันเลยคับ
<html> <head> <title>การ Comments ในภาษา PHP</title> </head> <body> <?php //นี่คือ comment #นี่ก็ comment /* นี่ก็ comment แบบหลายบรรทัด นะ..... */ ?> </body> </html>
]]>ซึ่งข้อความ หรือคำสั่งต่างๆ ที่อยู่หลังเครื่องหมาย // …..,#….. หรือ ภายในระหว่าง /* …. */ จะไม่ถูกนำไปประมวลผลนั่นเองคับ
แท็กสคริปต์ PHP จะเริ่มด้วย <?php และปิดด้วย ?> ซึ่งสามารถทำได้หลายรูปแบบ เช่น
- <? ... ?> (SGML style)
- <?php ... ?> (XML style) เป็นแบบที่นิยมใช้กันในปัจจุบันนี้
- <script language=”php”> ... </script> (JavaScript style)
- <% ... %> (ASP style)
เราสามารถวางคำสั่ง PHP ไว้ภายในเอกสาร HTML ตามที่ต้องการได้ อาจจะสลับกับ Tag ของภาษา HTML ก็ได้ ตัวอย่างเช่น
<HTML> <HEAD><TITLE> My Homepage </TITLE></HEAD> <BODY BGCOLOR=#FFFFFF> <H1><?php echo "Hello World"; ?></H1> Your web browser is <?php echo $HTTP_USER_AGENT; ?>. </BODY> </HTML>
แต่ละบรรทัดที่จบชุดโค้ดของ PHP จะปิดด้วยตัว semicolon (“;”) ตัวนี้จะเป็นตัวบอกว่าจบ 1 ชุดคำสั่ง
มี 2 คำสั่ง ที่คุณสามารถใส่เพื่อให้แสดงผลออกมาเป็นข้อความโชว์บนเบราเซอร์ คือ echo และ print ตัวอย่างข้างบนของเราใช้ echo เพื่อแสดงผล ซึ่งผลลัพธ์ที่ได้ ตามนี้คับ
ถ้าใครรู้จัก Server Side Include (SSI) ก็จะสามารถเข้าใจการทำงานของ PHP ได้ไม่ยาก สมมุติว่า เราต้องการจะแสดงวันเวลาปัจจุบันที่ผู้เข้ามาเยี่ยมชมเว็บไซด์ในขณะนั้น ในตำแหน่ง ใดตำแหน่งหนึ่งภายในเอกสาร HTML ที่เราต้องการ อาจจะใช้คำสั่งในรูปแบบนี้ เช่น <!–#exec cgi=”date.pl”–> ไว้ในเอกสาร HTML เมื่อ SSI ของ web server มาพบคำสั่งนี้ ก็จะกระทำคำสั่ง date.pl ซึ่งในกรณีนิ้ เป็นสคริปต์ที่เขียนด้วยภาษา perl สำหรับอ่านเวลาจากเครื่องคอมพิวเตอร์ แล้วใส่ค่าเวลาเป็นเอาพุท (output) และแทนที่คำสั่งดังกล่าว ลงในเอกสาร HTML โดยอัตโนมัติ ก่อนที่จะส่งไปยังผู้อ่านอีกทีหนึ่ง
อาจจะกล่าวได้ว่า PHP ได้รับการพัฒนาขึ้นมา เพื่อแทนที่ SSI รูปแบบเดิมๆ โดยให้มีความสามารถ และมีส่วนเชื่อมต่อกับเครื่องมือชนิดอื่นมากขึ้น เช่น ติดต่อกับคลังข้อมูลหรือ database เป็นต้น
PHP ได้รับการเผยแพร่เป็นครั้งแรกในปีค.ศ.1994 จากนั้นก็มีการพัฒนาต่อมาตามลำดับ เป็นเวอร์ชั่น 1 ในปี 1995 เวอร์ชั่น 2 (ตอนนั้นใช้ชื่อว่า PHP/FI) ในช่วงระหว่าง 1995-1997 และเวอร์ชั่น 3 ช่วง 1997 ถึง 1999 จนถึงเวอร์ชั่น 4 ในปัจจุบัน
PHP เป็นผลงานที่เติบโตมาจากกลุ่มของนักพัฒนาในเชิงเปิดเผยรหัสต้นฉบับ หรือ OpenSource ดังนั้น PHP จึงมีการพัฒนาไปอย่างรวดเร็ว และแพร่หลายโดยเฉพาะอย่างยิ่งเมื่อใช้ร่วมกับ Apache Webserver ระบบปฏิบัติอย่างเช่น Linux หรือ FreeBSD เป็นต้น ในปัจจุบัน PHP สามารถใช้ร่วมกับ Web Server หลายๆตัวบนระบบปฏิบัติการอย่างเช่น Windows 95/98/NT เป็นต้น
รายชื่อของนักพัฒนาภาษา PHP ที่เป็นแก่นสำคัญในปัจจุบันมีดังต่อไปนี้
- Zeev Suraski, Israel
- Andi Gutmans, Israel
- Shane Caraveo, Florida USA
- Stig Bakken, Norway
- Andrey Zmievski, Nebraska USA
- Sascha Schumann, Dortmund, Germany
- Thies C. Arntzen, Hamburg, Germany
- Jim Winstead, Los Angeles, USA
- Rasmus Lerdorf, North Carolina, USA
เนื่องจากว่า PHP ไม่ได้เป็นส่วนหนึ่งของตัว Web Server ดังนั้นถ้าจะใช้ PHP ก็จะต้องดูก่อนว่า Web server นั้นสามารถใช้สคริปต์ PHP ได้หรือไม่ ยกตัวอย่างเช่น PHP สามารถใช้ได้กับ Apache WebServer และ Personal Web Server (PWP) สำหรับระบบปฏิบัติการ Windows 95/98/NT
ในกรณีของ Apache เราสามารถใช้ PHP ได้สองรูปแบบคือ ในลักษณะของ CGI และ Apache Module ความแตกต่างอยู่ตรงที่ว่า ถ้าใช้ PHP เป็นแบบโมดูล PHP จะเป็นส่วนหนึ่งของ Apache หรือเป็นส่วนขยายในการทำงานนั่นเอง ซึ่งจะทำงานได้เร็วกว่าแบบที่เป็น CGI เพราะว่า ถ้าเป็น CGI แล้ว ตัวแปลชุดคำสั่งของ PHP ถือว่าเป็นแค่โปรแกรมภายนอก ซึ่ง Apache จะต้องเรียกขึ้นมาทำงานทุกครั้ง ที่ต้องการใช้ PHP ดังนั้น ถ้ามองในเรื่องของประสิทธิ ภาพในการทำงาน การใช้ PHP แบบที่เป็นโมดูลหนึ่งของ Apache จะทำงานได้มีประสิทธิภาพมากกว่า
ลักษณะเด่นของ PHP
]]>- ใช้ได้ฟรี
- PHP เป็นโปร แกรมวิ่งข้าง Sever ดังนั้นขีดความสามารถไม่จำกัด
- Conlatfun นั่นคือ PHP วิ่งบนเครื่อง UNIX,Linux,Windows ได้หมด
- เรียนรู้ง่าย เนืองจาก PHP ฝั่งเข้าไปใน HTML และใช้ดครงสร้างและไวยากรณ์ภาษาง่ายๆ
- เร็วและมีประสิทธิภาพ โดยเฉพาะเมือใช้กับ Apach Server เพราะไม่ต้องใช้โปรแกรมจากภายนอก
- ใช้ร่วมกับ XML ได้ทันที
- ใช้กับระบบแฟ้มข้อมูลได้
- ใช้กับข้อมูลตัวอักษรได้อย่างมีประสิทธิภาพ
- ใช้กับโครงสร้างข้อมูลใช้ได้แบบ Scalar,Array,Associative array
- ใช้กับการประมวลผลภาพได้
<html> <head> <title>...ส่วนของข้อความที่จะปรากฏที่ Title Bar ของ Browser...</title> </head> <body> ส่วนร่างกายใช้สำหรับเขียนข้อมูลต่าง ๆ มีทั้ง - รูปภาพต่าง ๆ ควรจะเป็น ไฟล์ชนิด .gif เพราะมีขนาดเล็ก - text หรือ ข้อความต่าง ๆ ภาษาไทย ภาษาอังกฤษ - sound หรือเสียงเพลง เป็นไฟล์ .mp3 - ภาพยนต์ หรือภาพเคลื่อนไหว - รวมทั้งโค้ดภาษาอื่น ๆ เช่นแทรกภาษา C , C++ , JAVA Script </body> </html>
ผลลัพธ์ที่ได้ดังนี้คับ
]]>จะสังเกตได้ว่า Tag ที่มีปรากฏอยู่จะมีทั้งหมด 4 Tag ดังนี้
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>เมื่อลองสังเกตดูเราจะพบสัญลักษณ์ <…> และ เป็นคู่ จากโครงสร้างจะมี <…> 4 ตำแหน่ง และ อีก 4 ตำแหน่ง ซึ่งลักษณะการเขียน HTML จะมีลักษณะแบบนี้ สัญลักษณ์ <…> เราเรียกว่าการเปิด Tag ส่วน คือการปิด Tag นั้นเอง โดยส่วนใหญ่รูปแบบของการเขียน HTML จะมีการเปิดและปิด Tag แต่ก็มียกเว้นบ้าง สำหรับแท็กบางแท็ก ที่ไม่จำเป็นต้องมีการปิดแท็ก จะมีแท็กใดบ้างติดตามศึกษาในบทความต่อ ๆ ไป