จากบทนำ หากใครสังเกตุคงเห็นว่า ถึงเราจะเว้นบรรทัดไว้ แต่เวลา browser แสดงผล จะเห็นว่ามันมาอยู่ติดกันบรรทัดเดียวเลย บทนี้เมอจะสอนเกี่ยวกับการจัดการข้อมูลที่อยู่บน web page ของเราล่ะ
การจัดการตัวอักษรก็มีหลายแบบ แต่เมอจะค่อยๆไล่ไปละกัน
อนึ่ง หลังจากนี้สำหรับการเรียน HTML อย่างเดียว เราจะอยู่กันแค่ส่วนของ tag Body นะ Head จะไม่ถูกยุ่งอีกต่อไปละ
-------------------------------------------------------------------------------------
การเว้นบรรทัด
เมื่อจะเว้นบรรทัดใดบรรทัดหนึ่งใน HTML นั้น ไม่สามารถทำได้โดยการกดปุ่ม enter นะ ต้องกำกับด้วยคำสั่งเอาไว้ ซึ่งคำสั่ง tag ตัวนั้นคือ
โดยเมื่อ browser อ่านข้อมูลจนมาเจอคำสั่งนี้ มันจะทำการขึ้นบรรทัดใหม่ให้ทันทีตอนแสดงผล
ทดสอบได้โดยการพิมพ์ดังนี้
และลองดูผล กับCode:หลังจากนี้จะต้องเว้น 1 บรรทัด จะได้อ่านง่ายๆไม่ลำบาก
จะเห็นว่าผลของทั้งสองอย่างนี้ต่างกัน โดยแบบที่สองจะเว้นบรรทัดถูกต้องตามที่ต้องการCode:หลังจากนี้จะต้องเว้น 1 บรรทัด จะได้อ่านง่ายๆไม่ลำบาก
หากต้องการเว้นหลายบรรทัดล่ะ? ............ ก็แบบนี้ไง
หรือจะใช้แบบนี้ก็ได้นะ
ชอบแบบไหนก็ตามสบายคนเขียนล่ะจ้า เวลาแสดงผลก็ออกมาครือกัน
*จุดสังเกตุ : การเว้นบรรทัดจะไม่มี tag ปิด ^^b*
-------------------------------------------------------------------------------------
การใส่ลูกเล่นให้ตัวอักษร
ในการใส่ลูกเล่นให้ตัวอักษรนั้นมีหลายแบบมาก ซึ่งเมอคงต้องขอรวบรัดง่ายๆดังนี้
ซึ่งเราสามารถซ้อน tag หลายๆ tag เข้าด้วยกันให้เกิดตัวอักษรลูกผสมได้ดังเช่นCode:: ตัวอักษรใน tag จะเป็นตัวหนา : ตัวอักษรใน tag จะเป็นตัวเอียง : ตัวอักษรใน tag จะมีการขีดเส้นใต้ <s></s> : ตัวอักษรใน tag จะมีเส้นขีดฆ่าตรงกลาง <big></big> : ตัวอักษรใน tag จะมีขนาดใหญ่ขึ้น 1 ระดับ : ตัวอักษรใน tag จะมีขนาดเล็กลง 1 ระดับ
หรือเป็นแบบนี้Code:ตัวหนาไม่พอ เอียง มีเส้นใต้ด้วย
-------------------------------------------------------------------------------------Code:<big><big><s>ตัวใหญ่บะเอิ๊บเลยโดนขีดฆ่า</s></big></big>
การจัดตัวอักษรให้อยู่ตรงกลาง
<center></center> : ตัวอักษรในนี้จะจัดอยู่กึ่งกลางของหน้า web page
ซึ่งตัวอักษรจะอยู่กึ่งกลางของขนาด browser นั้นๆ (หากมีการเปลี่ยนขนาดของ browser ตัวอักษรก็จะขยับไปมาให้อยู่ตรงกลางนั้น) ยกเว้นในบางกรณีที่มีกรอบหรืออะไรมากั้น ตัวอักษรก็จะอยู่ในบริเวณส่วนกลางของกรอบนั้นๆ
*tag center นี้เมื่อปิด </center> จะมีผลเป็นการเว้น 1 บรรทัดทันที ^^"*
-------------------------------------------------------------------------------------
การกำกับ Font
<font></font>
ข้อมูลที่อยู่ใน tag font นี้ จะมีลักษณะ font หรือตัวอักษรเปลี่ยนไปตามที่กำหนด ซึ่งโดยพื้นฐานหลักๆแล้ว จะได้ใช้บ่อยแค่
1. เปลี่ยนสี ทำได้โดยการใส่คำสั่ง color= "" ลงในตรงส่วนหัวของ tag font ซึ่งจะได้เป็น
<font></font>
และนำค่าสีมาใส่ใน "" โดยจะเป็นรหัสสีใน computer ด้วยเลขฐาน 16 ไล่ดังนี้ Red-Green-Blue ซึ่งโดยปกติจะเป็นสีดำ (000000)
สีดำ : 000000
สีแดง : FF0000
สีเขียว : 00FF00
สีน้ำเงิน : 0000FF
สีขาว : FFFFFF
สีอื่นๆลองตรวจดูได้ด้วยโปรแกรมเกี่ยวกับการจัดการรูปอย่าง Photoshop ได้นะ ^^
หรือจะใช้ paint ก็ได้ แต่จะต้องเอาเลขฐาน 10 มาแปลงเป็นฐาน 16 อีกที ^^"
2. กำหนดขนาด ทำได้โดยการใส่คำสั่ง size= "" ลงไปในส่วนหัวของ tag font ใส่ได้ตั้งแต่เลข +7 ถึง -7 เลย แต่ปกติเมอจะใช้ tag big, small เอามากกว่า ^^" ถนัดแบบไหนใช้แบบนั้นเอาได้นะ
3. กำหนด font ทำได้โดยการใส่คำสั่ง name= "" ลงไปในส่วนหัวของ tag font แต่มีข้อแม้ว่า ชื่อ font ที่นำมาใช้ต้องเว้นวรรคและพิมพ์ตัวเล็กใหญ่ให้ตรงกับ font ในเครื่องของเรา
ซึ่งปกติแล้วจะไม่มีคนนิยมใช้วิธีนี้ เพราะว่าบางครั้งหาก font ในเครื่องผู้ชม website ของเราไม่มี font นี้ ระบบก็จะตัดไปใช้ font มาตราฐานตามที่ตั้งไว้ของ browser นั้นๆ
แต่อย่างไรก็ตาม หากเป็น font สากลอย่าง tahoma, MS san shift ทำนองนี้ ก็ไม่มีปัญหาอะไร
ซึ่งเราสามารถใช้มัน combo กันในชุดเดียวเลยก็ได้เป็น
<font>ตัวอักษร Tahoma สีเขียว ขนาด +3</font>
สังเกตุอะไรไหมเอ่ย? ตรง color นั้น เราสามารถใช้ชื่อสีมาแทนตัวเลขได้ด้วยนั่นเอง แต่ว่า ถ้าต้องการสีที่ตรงกับที่ต้องการจริงๆ ใช้รหัสสีเลขฐาน 16 จะตรงกว่า ^^
ถ้าเอาไปยำรวมกับก่อนหน้านี้ ก็อาจจะออกมาเป็น
ลองทำแล้วดูผลดูซิ ^^bCode:<center><font><big>ทำหัวเรื่องตรงกลางหน้า สีเทาๆขนาดใหญ่</big></font></center> เว้นบรรทัดอัตโนมัติมาเขียนหัวเรื่องย่อ แล้วก็เป็นข้อมูลธรรมดาๆหลังจากเว้นบรรทัดด้วยคำสั่ง br
-------------------------------------------------------------------------------------
คำสั่งหัวข้อ
ในคำสั่งของ HTML จะยังมีคำสั่งที่ใช้กำหนดหัวข้อด้วย นั่นคือ tag [*] โดยคำสั่งนี้เมื่อใช้งานแล้ว จะทำให้เกิดสัญลักษณ์ วงกลมสีดำขึ้นตรงจุดที่ใส่ tag นี้ลงไป และจะบังคับเป็นย่อหน้าใหม่โดยอัตโนมัติ (ซึ่งเอาไว้เขียนย่อหน้าหรือถ้านึงไปถึง web ขาย computer ที่มีการแสดง spec เครื่องก็จะเห็นภาพง่ายขึ้น)
คำสั่งนี้จะสามารถใช้เดี่ยวๆก็ได้ หรือจะใช้ควบกับคำสั่งขยายก็ได้ ซึ่งคำสั่งขยายคือ
หรือ
ถ้าเราใช้คำสั่งขยายแล้ว การใช้งานจะเปลี่ยนไปเป็นดังนี้
จากเดิม
จะกลายเป็นCode:[*] หัวข้อที่ 1 [*] หัวข้อที่ 2 [*] หัวข้อที่ 3
นั่นคือ คำสั่งขยายจะต้องครอบส่วนที่ต้องการเอาไว้นั่นเอง เอ แล้วขยายแล้วทำอะไรได้ล่ะ?Code:
- หัวข้อที่ 1
- หัวข้อที่ 2
- หัวข้อที่ 3
จะมีผลทำให้แสดงผลออกมาเป็นตัวเลข 1 2 3 4 แทนจุดวงกลมของ[*] โดยอัตโนมัติ
ซึ่งหากขยาย คำสั่ง ol ไปอีกโดยเติม type "A" ลงไปที่ส่วนหัว tag ol (กลายเป็น )
ผลจะออกมาเป็น A B C D แทนจุดวงกลมของ[*] นั่นเอง ^^
และส่วนของ ul ล่ะ?
ถ้าเราครอบด้วย ul เฉยๆนั้น วงกลมสีดำจะยังคงเป็นวงกลมสีดำเหมือนเดิม แต่ถ้าเราใส่ขยายไปว่า type "circle" วงกลมก็จะกลายเป็นวงกลมธรรมดา ไม่ทึบดำ ถ้าเป็น type "square" ก็จะเป็นสี่เหลี่ยมทึบไปนั่นเอง
อนึ่ง สำหรับ คำสั่ง[*] เมอจำได้แค่นี้เอง ยังไงลองศึกษาเพิ่มเติมกันได้นะ
-------------------------------------------------------------------------------------
ทิ้งท้ายบท
- คำสั่งเหล่านี้ แทรกซ้อนกันได้หมดทุกตัว แต่ไม่ควรแทรกจนเกินความจำเป็น นอกจากผู้ชม website จะลำบากในการอ่านแล้ว ยังทำให้แก้ภายหลังยากและสับสนด้วย ^^"
- การเลือกสีและ font ควรให้เหมาะกับรูปแบบของ website โดยเฉพาะพื้นหลัง (จะกล่าวถึงในบทต่อไป) การทำให้อ่านยากเป็นหนึ่งในสาเหตุหลักๆที่ผู้คนไม่ต้องการเข้าชม website นั้นบ่อย
- คำสั่งช่วยเหลือในการค้นหาใน Google ใช้ได้เป็น "HTML บทเรียน" และเลือกค้นหาเฉพาะ web ในประเทศไทย (หรือเป็น "HTML code" "HTML tutorial" และ search แบบทั่วไปก็ได้)
Cradit:mercuric
Reply With Quote
