HTML ย่อมาจาก Hyper Text Markup Language

HTML ย่อมาจาก Hyper Text Markup Language เป็นภาษา ที่ใช้ในการเขียนเว็บเพจอย่างนึง 
โดยใช้คำสั่ง เป็นตัวกำหนดค่าต่างๆที่เราต้องการให้แสดงผลในเว็บเพจ เช่น การควบคุมสี ตำแหน่ง รูปภาพ ซึ่งคำสั่งนั้นเราเรียกว่า Tag

 

Tag เป็นข้อความที่อยู่ในเครื่องหมาย < >  Tag มีอยู่มากมายหลายชนิด และทำหน้าที่แตกต่างกันไป บางอันใช้กำหนดตัวอักษร หรือใช้แสดงรูปภาพ เป็นต้น โดยทั่วๆไปการใช้งาน Tag จะต้องมี  Tagเปิด และ  Tagปิด
รูปแบบจะเป็นแบบนี้  <Tag คำสั่ง> ข้อความ หรือรูปภาพที่ต้องการแสดง </Tag คำสั่ง>
จะสังเกตุเห็นว่า tagปิด ก็คือ Tag ที่มีเครื่องหมาย / เพิ่มมาน่ะเอง และข้อความ หรือ รูปภาพ ที่อยู่ระหว่าง Tagเปิด และ Tagปิด ก็จะถูกควบคุมให้แสดงผลไปตามที่ Tag นั้นกำหนด

 

ทีนี้ ในแต่ละ Tag ก็จะมีตัวแปร หรือ ลักษณะที่กำหนดเข้าไปเพื่อเพิ่มรายละเอียดให้กับการแสดงผลข้อมูลของเรา โดยลักษณะนี้เราจะใส่เอาไว้ในส่วนของ Tagเปิด เช่น Tag แสดงตัวอักษร ชื่อว่า Tag  <FONT>...</FONT> (ตรง ... คือข้อมูลที่เราต้องการแสดงนะคะ) ถ้าเราต้องการให้ตัวอักษรของเราเป็นสีแดง ก็จะต้องกำหนด ค่าสีแดงลงไปใน Tag <FONT> แบบนี้  --->     <FONT color=#ff0000> ข้อความ </FONT>   ตรงคำว่า ข้อความ ก็จะมีสีแดง color ก็คือการกำหนดสีให้กับแท็ก <FONT> และ #ff0000 คือ โค้ดสีแดง

 

คิดว่าอ่านมาถึงตรงนี้แล้วคงพอจะรู้แล้วว่า Tag หรือ คำสั่ง ในภาษา Html ทำงานยังไงนะจ๊ะ ต่อไปนี้เราจะแนะนำให้เพื่อนๆรู้จักกับ Tag ที่ชื่อว่า <Table> สาเหตุที่นำแท็กนี้มาอธิบาย ก็เพราะว่า มันใช้ประโยชน์ได้ดีในการ จัดตำแหน่งข้อความ และ รูปภาพ รวมถึง ไว้ใช้ทำกรอบสวยๆ ที่เราเอามาแจกน่ะแหละ อิอิ

 

 

---

Table

---

 

แปลตรงๆตัวเลยก็คือ ตาราง น่ะเอง (ไม่ใช่โต๊ะ นะจ๊ะ - -") ในการสร้างตารางนี้ก็ไม่ยากอย่างที่หลายคนคิดเลยนะ เพราะมันจะมีรูปแบบในการสร้างที่ค่อนข้างจะแน่นอนอยู่แล้ว สำหรับแท็กที่ใช้ในการสร้างตารางก็จะมีหลายแท็กด้วยกันและมักจะต้องใช้ควบคู่กันไปด้วย  เพื่อที่จะให้ได้ตารางสักหนึ่งตาราง ^^" มาดูกันดีกว่าว่ามันใช้ Tag อะไรบ้าง

 

<TABLE>...</TABLE> แท็กเปิด จะอยู่บนสุด และแท็กปิดจะอยู่ท้ายสุดของตาราง เป็นการบอกว่า นี่คือ 1 ตารางนะจ๊ะ

<TBODY>...</TBODY> ตำแหน่งจะอยู่คร่อมแท็ก <TR>...</TR> เป็นการแบ่งกลุ่มให้กับแถว โดยที่ในกลุ่มนั้นอาจมีมากกว่า 1 แถวก็ได้  ถึงแม้เราไม่ใส่ก็จะถือว่า ข้อมูลที่อยู่ระหว่างแท็ก Table นั้นเป็นส่วนของ Tbody

<TR>...</TR> คือ 1 แถวของตาราง ตำแหน่งที่ใช้ อยู่ระหว่าง <TABLE>...</TABLE> ถ้าต้องการให้ตารางมีกี่แถว เราก็ต้องเพิ่มแท็ก <TR>...</TR> ไปเท่านั้น

<TD>...</TD> คือ 1 ช่องในแถวของตาราง ตำแหน่งที่ใช้ อยู่ระหว่าง <TR>...</TR> ถ้าต้องการให้ใน 1แถว มีกี่ช่อง เราก็ต้องเพิ่มแท็ก <TD>...</TD> ไปเท่านั้น

ตัวอย่างการสร้างตาราง ในที่นี้จะสร้างตาราง 3 แถวโดยให้แต่ละแถวมี 4 ช่อง และใส่คำสั่ง border เพื่อแสดงขอบตาราง

 

<TABLE border=1> <TBODY> <TR> <TD>ช่องที่ 1 แถว 1</TD> <TD>ช่องที่ 2 แถว 1</TD> <TD>ช่องที่ 3 แถว 1</TD> <TD>ช่องที่ 4 แถว 1</TD> </TR> <TR> <TD>ช่องที่ 1 แถว 2</TD> <TD>ช่องที่ 2 แถว 2</TD> <TD>ช่องที่ 3 แถว 2</TD> <TD>ช่องที่ 4 แถว 2</TD> </TR> <TR> <TD>ช่องที่ 1 แถว 3</TD> <TD>ช่องที่ 2 แถว 3</TD> <TD>ช่องที่ 3 แถว 3</TD> <TD>ช่องที่ 4 แถว 3</TD> </TR> </TBODY> </TABLE>

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

 

การประยุกต์ใช้ตาราง

---

 

ตอนนี้ทุกคนคงสร้างตารางกันได้แล้วนะคะ ส่วนการนำตารางไปใช้ในแบบอื่นๆ ถ้าจะมีคนจำได้
เราเคยนำเสนอวิธีการ ใส่ Background โดยใช้ Table ไปแล้วนะคะ ไปหาอ่านได้นะ ตามที่เราทำลิ้งค์ไว้ให้
สำหรับตอนนี้เราจะมาสร้างกรอบข้อความสวยๆ โดยใช้ตารางกันนะ

สำหรับกรอบข้อความ เราต้องมาดูกันก่อนว่ามันประกอบด้วยส่วนอะไรบ้าง
ก่อนอื่นก็ต้องมีรูป ที่เราจะเอามาทำเป็นขอบทั้ง 4 ด้าน และมุม ทั้ง 4 ก่อนนะคะ
ยกตัวอย่าง กรอบที่แจกไปในบลอคล่าสุด เมื่อวันก่อน 

รูปด้านล่างนี้เป็นการแสดงภาพของ ขอบ และ มุม ทั้ง 8 ส่วน นะคะ

 

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

<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>

<TR>
<TD background=Url ภาพมุมซ้ายบน></TD>
<TD style="WIDTH: 240px; HEIGHT: 13px" background=Url ภาพขอบด้านบน></TD>
<TD background=Url ภาพมุมขวาบน></TD></TR>

<TR>
<TD style="WIDTH: 30px" background=Url ภาพขอบด้านซ้าย></TD>
<TD style="WIDTH: 240px; HEIGHT: 169px" align=middle>
<P><FONT color=#993300>Text Here</P>
<P>ข้อความ</P>
<P>Text Here</P></FONT></TD>
<TD style="WIDTH: 30px" background=Url ภาพขอบด้านขวา></TD></TR>

<TR>
<TD background=Url ภาพมุมซ้ายล่าง></TD>
<TD style="WIDTH: 240px; HEIGHT: 12px" background=Url ภาพขอบด้านล่าง></TD>
<TD background=Url ภาพมุมขวาล่าง></TD></TR>

</TBODY></TABLE>

อธิบาย

เราจะแบ่งอธิบายไปทีละแถวนะ ตามที่เว้นวรรคเอาไว้ เพื่อจะได้ดูง่ายๆ

เริ่มจากแท็ก <TABLE> เราเพิ่มคำสั่ง
cellSpacing=0 กำหนดให้ระยะห่างระหว่างแต่ละช่องในตารางเป็น 0 เพื่อให้ภาพแบคกราวที่เราสร้างมันต่อกันสนิทจะได้ดูเหมือนเป็นภาพๆเดียว  
cellPadding=0 กำหนดให้ระยะห่างระหว่าง ขอบตาราง กับข้อความเป็น 0 อันนี้จะมีผลกับส่วนที่เราเอาไว้เขียนข้อความ คือช่องตรงกลางของตาราง 
align=center จัดตารางนี้ให้อยู่ตรงกลางของ Blog และใส่  border=0 ไม่ต้องการให้เห็นขอบตารางเพื่อความสวยงาม

 

แถวที่ 1

ในแท็ก <TD> เราใส่คำสั่ง background=Url ของภาพที่ต้องการ เข้าไปเพื่อภาพให้เป็นแบบแบคกราวตามที่ต้องการ
และในแท็ก <TD> ของ ช่องที่ 2แถว 1 ใส่คำสั่ง  style="WIDTH: 240px; HEIGHT: 13px" เพื่อกำหนดความกว้างและความสูงให้กับภาพ มีขนาดเป็น พิกเซล 

แถวที่ 2

เราใส่ background ตามแบบเดียวกับในแถวที่ 1แต่เพิ่ม คำสั่ง style="WIDTH: 30px" ให้ตารางด้านซ้าย กว้างพอดีรูป และทำแบบเดียวกันกับ ด้านขวาด้วย
ส่วนตรงกลางแท็ก <TD> ช่องที่ 2 ของแถว 2  ที่เป็นพื้นที่ไว้เขียนข้อความ กำหนดขนาดให้ style="WIDTH: 240px; HEIGHT: 169px"

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

และในแท็ก <TD> ช่องที่ 2 ของแถว 2 มีคำสั่ง align=middle เป็นการกำหนดให้จัดข้อความในช่องนี้ ให้อยู่กึ่งกลางช่อง

ส่วนที่เป็น สีชมพู คือส่วนข้อความที่เราพิมลงไป มีแท็ก <FONT> กำหนดสีอักษร และมีแท็ก <P>...</P> ข้อความที่อยู่ในแท็กนี้คือ 1 ย่อหน้า ( บางคนอาจเคยสังเกตุว่า เวลาเราพิมข้อความในบลอคของเราแล้วกด Enter ถ้าดูในโหมด Html มันจะมีแท็ก <P> ต่อหัวกับท้ายข้อความแสดงว่าขึ้นย่อหน้าใหม่ แต่ถ้าเรากด Shift+Enter จะเป็นการขึ้นบรรทัดใหม่ โดยใช้แท็ก <BR> นะจ๊ะ ความแตกต่างของ 2 แท็กนี้ คือ เวลาเรากด Shift+Enter ระยะห่างของบรรทัดจะแคบกว่าเวลาเรากด Enter เฉยๆน่ะ อันนี้รู้ไว้เฉยๆ เพราะเวลาพิมก็คงพิมในโหมด พรีวิว อยู่ดี ไม่ได้พิมในโหมด Html ^^")

 

แถวที่ 3

แถวนี้จะเหมือนกับ แถวที่ 1 เลยค่ะเปลี่ยนแค่ภาพ ปิดท้ายด้วยแท็ก </TBODY></TABLE> เป็นการปิดตาราง

สำหรับตัวอย่างโค้ดที่ใส่ Url ของภาพเรียบร้อยแล้ว ไปดูได้ที่บลอคข้างล่างนี้นะ วันที่ 26 ค่ะ