รูปแบบการใส่รูปภาพ
<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
<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 แต่ก็มียกเว้นบ้าง สำหรับแท็กบางแท็ก ที่ไม่จำเป็นต้องมีการปิดแท็ก จะมีแท็กใดบ้างติดตามศึกษาในบทความต่อ ๆ ไป
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง มีโครงสร้างการเขียนโดยใช้แท็ก (Tag) ควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเว็บเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล
ภาษา HTML เป็นภาษาที่ถูกกำหนดให้เป็นมาตรฐานในการเขียนโฮมเพจ ดังนั้นการศึกษาถึงโครงสร้างของภาษา HTML จึงถือเป็นพื้นฐานที่สำคัญ ในการต่อยอดเพื่อเขียนภาษาคอมพิวเตอร์อื่น ๆ ที่ทำงานผ่านเว็บเบราเซอร์ หรือการพัฒนา Web Application ต่าง ๆ ใครที่คิดว่าจะเมินภาษา HTML เพราะสามารถสร้างโฮมเพจ หรือเว็บเพจโดยอาศัย โปรแกรมช่วยสร้าง ประเภท WYSIWYG (What – You -See -Is – What – You – Get) เช่น Dreamweaver Frontpag ฯลฯ เีพียงอย่างเดียว คงไม่สามารถต่อยอดความรู้ในการพัฒนาโฮมเพจ โดยใช้ภาษา PHP หรือ ASP ได้ ซึ่งในอนาคตสำหรับคนทำเว็บแล้ว ภาษาสคริปต์ PHP หรือ ASP เป็นสิ่งจำเป็นทีเดียวในการพัฒนา Web Application
]]>ก่อนที่เราจะเริ่มลงมือเขียน HTML เราต้องเตรียมเครื่องมือที่จำเป็นต้องใช้ในการเขียน homepage เบื้องต้น ซึ่งคงต้องมีอย่างน้อยที่สุด 2 อย่าง คือ
1. Editer สำหรับใช้เขียนภาษา HTML ซึ่งในที่นี้เพื่อความสะดวกที่สุด ขอแนะนำให้ใช้ Notepad ซึ่งมีติดเครื่องมาอยู่แล้วเมื่อลงวินโดวน์ หรือหากใครจะดาวน์โหลดโปรแกรม Editplus มาใช้ก็ได้ เพราะโปรแกรมตัวนี้สามารถแบ่งแยกสีของ Tag ได้ ซึ่งในอนาคตหากจะเขียน PHP โปรแกรมตัวนี้ก็ช่วยให้เขียนโปรแกรมได้ง่ายกว่า Notepad เยอะเลยคับ เพิ่มเติมนิดนึงคับถ้ายังไม่เข้าใจเรื่องของ Tag ต่างๆเท่าใดนักก็แนะนำเป็น Macromedia Dreamweaver ก็ได้นะคับ ใช้งานได้ง่ายทีเดียว
2. Web Browser สำหรับใช้แสดงผลของโฮมเพจ สำหรับเว็บเบราเซอร์ ปัจจุบันมีให้เลือกหลายตัวมากเลยคับ ไม่ว่าจะเป็น Mozilla Firefox,Netscape, Opera, Neoplanet และ Internet Explorer หรือที่เรียกย่อ ๆ ว่า IE แล้วล่าสุดผลงานของ Google คือ Google Chorme ซึ่งแต่ละตัวก็มีหน้าตาแตกต่างกันไป แต่ที่อยากจะแนะนำให้ใช้ก็คือ IE เพราะว่าเจ้าตัวนี้จะถูกติดตั้งมาพร้อมกับวินโดว์อีกเช่นกัน ไม่ต้องไปเสียเวลาดาวน์โหลดเพิ่ม หรือชอบตัวไหนหาโหลดมาติดตั้งใช้งานได้เลยคับ
