เนื่องจากมีหลายท่านได้สอบถามเกี่ยวกับโค๊ด html เข้ามา ผมจึงถือโอกาสเขียนเนื้อหาในส่วนนี้ซะเลย เผื่อว่าจะมีประโยชน์สำหรับท่านที่สนใจครับ
ปล. สำหรับเนื้อหานี้ผมได้นำมาจากเว็บอื่น และมีการปรับแต่งนิดหน่อยนะครับ
ส่วนประกอบที่สําคัญของภาษา HTMLได้แก่ Tag และ Attribute
Tag คือ คําสั่งที่ใช้ในภาษา HTML อยู่ในเครื่องหมาย < และ > ใช้สําหรับจัดรูปแบบข้อความ ภาพหรือ วัตถุอื่นๆ
ซึ่ง tag ในภาษา HTML ส่วนมาก จะมี tag เปิด และ tag ปิด ซึ่ง tag ปิด จะมีเครื่องหมาย / นำหน้า เช่น
<h1>
</h1> ใช้เน้นหัวข้อเรื่อง
<p>
</p> ใช้จัดพารากราฟ
<b>
</b> ใช้กำหนดให้ตัวอักษรเป็นตัวหนา
แต่บาง tag ก็ไม่มี tag ปิด เช่น
<hr> ใช้สร้างเส้นคั่น
<br> ใช้สําหรับการขึ้นบรรทัดใหม่
Attribute เป็นส่วนขยายใน tag ใช้สําหรับจัดรูปแบบเพิ่มเติม เช่น ขนาด สี ระยะห่าง เป็นต้น ค่าของ attribute จะอยู่ในเครื่องหมาย "
" เช่น
<p align="center">ข้อความในพารากราฟนี้จัดวางอยู่กึ่งกลางหน้าจอ</p>
<hr width="200" color="red" noshade> ใช้สร้างเส้นคั่นยาว 200 pixel สีแดงทึบ
ในการเขียน tag, attribute และค่าของ attribute ตามมาตรฐานของ (X)HTML รุ่นใหม่ จะใช้เป็นตัวอักษรพิมพ์เล็กทั้งหมด และสำหรับ tag ที่ไม่มี tag ปิด ให้ใส่ เป็น " / >" เช่น <hr />, <br />
การเขียน comment <!-- ... -->
Comment หรือข้อความหมายเหตุ มีประโยชน์หลายอย่าง เช่น ใช้เพื่อเตือนความจำ กำกับ code แต่ละส่วนที่เราเขียนว่าเพื่อทำอะไร ทำให้อ่านและแก้ไข code ภายหลังได้ง่าย ข้อความใน tag comment จะไม่ถูกเว็บเบราเซอร์์แสดงออกมาให้ผู้ใช้งานได้เห็น จะเห็นเมื่อมีการ view source code เท่านั้น
Body เป็นส่วนที่แสดงเนื้อหาที่จะแสดงทางหน้าจอทั้งหมด มีส่วนประกอบ ได้แก่ ข้อความ ตาราง ลิสต์ รูป ภาพ ลิงค์ เป็นต้น
เราสามารถกำหนดคุณสมบัติให้กับ Body โดยผ่าน attribute ต่าง ๆ ได้แก่
- bgcolor="สี" กำหนดสีพื้นหลังในหน้าเว็บเพจ
- text="สี" กำหนดสีตัวอักษร
- background="url" กำหนดพื้นหลังเป็นรูปภาพ
- bgproperties="fixed" กำหนดให้รูปพื้นหลังไม่เลื่อนตาม scrollbar
- topmargin="number" กำหนดระยะของเนื้อหาให้ห่างจากขอบด้านบน
- leftmargin="number" กำหนดระยะของเนื้อหาให้ห่างจากขอบด้านซ้าย
การกำหนดสีพื้น background กับสีตัวอักษรที่ใช้ในหน้าเว็บเพจ
<body bgcolor="สี" text="สี">...<body>
กำหนดพื้นหลังเป็นรูปภาพ
ถ้าไม่ต้องการให้รูปภาพเลื่อนตาม scrollbar ให้กำหนด attribute bgproperties="fixed"
<body background="url ของรูปภาพ" bgproperties="fixed">... </body>
การจัดระยะของเนื้อหาให้ห่างจากขอบแต่ละด้าน
<body topmargin="number" leftmargin="number">...</body>
เราจะต้องใช้สัญลักษณ์พิเศษ เวลาที่เราพิมพ์ใน Text Editor
ให้เราพิมพ์เป็น <![CDATA[<]]> สำหรับเครื่องหมาย <
พิมพ์ <![CDATA[>]]> สำหรับเครื่องหมาย >
และพิมพ์ <![CDATA["]]> สำหรับเครื่องหมาย "
การเว้นวรรคหลายครั้งทำได้โดยใช้ <![CDATA[ ]]> ใส่ไปหลายๆ ครั้ง ก็จะสามารถจะเว้นวรรคได้ห่างตามที่ต้องการ
เราสามารถใช้เส้นขีดคั่นแนวนอนเป็นเส้นแบ่งเนื้อหาออกเป็นส่วนๆ เพื่อจัดระเบียบ หรือเพื่อความสวยงามได้
<hr width="number" size="number" align="left | center | right" color="สี" noshade>
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้
<hr width="number" size="number" align="left | center | right" color="สี" noshade="noshade" />
attribute ที่ใช้กำหนดคุณสมบัติเพิ่มเติมให้ tag <hr> ได้แก่
- width="number | %" ความยาวของเส้นคั่น
- size="number" ความหนาของเส้นคั่น มีค่าเป็น 1 ถึง 7 และ -1 ถึง -7
- align="left | center | right" ตำแหน่งที่จัดวาง
- color="สี" สีของเส้นคั่น
- noshade กำหนดให้เป็นเส้นทึบ
ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ
<p align="left | center | right |justify">...</p>
"justify"ข้อดวามในพารากราฟ กระจายคำให้พอดี
การขึ้นบรรทัดใหม่
ปกติ ถ้าข้อความยาวมากๆ เว็บเบราเซอร์์จะตัดคำขึ้นบรรทัดใหม่ให้อยู่แล้ว แต่ถ้าต้องการกำหนดการขึ้นบรรทัดใหม่เอง ให้ใช้ tag <br> ถ้าให้เป็นไปตามมาตรฐานใหม่ของ (X)HTML ใช้ <br />
และสามารถกำหนดรูปแบบการขึ้นบรรทัดใหม่ได้หลายแบบ ผ่าน attribute clear ที่มีค่่าเป็น left / right / all /none
<br clear="left | right | all | none">
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้
<br clear="left | right | all | none" />
ตัวอักษร (Font)
เราสามารที่จะระบุชนิด ขนาดของ และ สี ให้ตัวอักษร ด้วย tag <font>
<font face="ชนิดตัวอักษร" size="number" color="สี">ข้อความ</font>
attribute ที่ใช้กับ <font> ได้แก่
face="ชนิดตัวอักษร" กำหนดชนิดให้ตัวอักษร
size="number" กำหนดขนาดให้ตัวอักษร มีค่าตั้งแต่ -7 ถึง 7
color="สี" กำหนดสีให้ตัวอักษร
<del> กำหนดขีดฆ่าข้อความ
เช่น <del>ขีดฆ่า</del>
<ins> กำหนดขีดเส้นใต้ข้อความ
เช่น <ins>ขีดเส้นใต้</ins>
<sup> กำหนดข้อความตัวยก
เช่น 4<sup>2</sup>=16
<sub> กำหนดข้อความตัวห้อย
เช่น H<sub>2</sub>O
<strong>เน้นหนักข้อความ (ตัวหนา)
เช่น <strong>เน้นหนัก</strong>
<small> กำหนดข้อความให้มีขนาดเล็กลง
เช่น <small>เล็กลง</small>
<i> กำหนดข้อความเป็นตัวเอียง
เช่น <i>ตัวเอียง</i>
<em> เน้นข้อความ (ตัวเอียง)
เช่น <em>เน้นข้อความ</em>
<big> กำหนดข้อความให้มีขนาดใหญ่ขึ้นจากขนาดปัจจุบันขึ้น 1 ระดับ
เช่น <big>ใหญ่ขึ้น</big>
ถ้าเขียนซ้อนกันก็จะทำให้ตัวใหญ่ขึ้นอีก
เช่น <big><big>ใหญ่ขึ้นอีก</big></big>
<b> กำหนดข้อความเป็นตัวหนา
เช่น <b>ตัวหนา</b>
<u> กำหนดขีดเส้นใต้ข้อความ
เช่น <u>ขีดเส้นใต้</u>
แนะนำโปรแกรมสำหรับดูรหัสสีบนหน้าจอเราซะหน่อย จะได้ง่ายในการเขียนโค๊ดสี
โหลดโปรแกรม Instant Eyedropper มาลงเครื่องเราก่อนที่นี่เลย
Instant Eyedropper
เมื่อลงโปรแกรมเสร็จก็เปิดโปรแกรมขึ้นมา มันจะมีไอคอนกลมๆมีกากบาทอยู่ด้านใน อยู่ที่ด้านขวาของ taskbar
เราก็เลื่อนเมาส์ไปกดแล้วลากไปตรงจุดที่เราต้องการดูรหัสสี จดเอาไว้แล้วเอาไปใช้ได้เลย ง่ายต่อการนำไปใช้ครับอยากได้สีตรงไหนดูได้หมดเลย
ฝากข้อความหลังไมค์
Rss Feed
ผู้ติดตามบล็อก : 33 คน [