Munuบทที่่ 2 คำสั่ง html
HTML Tags
HTML ทำงานในรูปแบบง่ายๆและมีเหตุมีผลมาก มันอ่านเหมือนที่คุณอ่าน จากซ้ายไปขวา จากบนลงล่าง ซึ่งนั่นเป็นหลักสำคัญที่ควรจำไว้ HTML ถูกเขียนด้วยตัวหนังสือ ซึ่งหากคุณพิมพ์ข้อความลงไปตามธรรมดา เมื่อ save และเปิดออกมาดูจะพบว่า ข้อความถูกแสดงออกในหน้าจอ จะเหมือนกับตอนที่คุณพิมพ์ลงไป คือเป็นตัวเล็กๆธรรมดาๆ(ลองทำดูได้ครับ)
การที่คุณจะทำให้ตัวหนังสือนั้นใหญ่เล็กเพียงใดเป็นตัวหนาหรือมีขีดเส้นใต้ คุณจำเป็นต้องใช้คำสั่งของ HTML ที่เรียกว่า tag หากคุณต้องการให้ข้อความช่วงหนึ่งเป็นตัวหนา คุณจะต้องใส่คำสั่งที่ทำให้เป็นตัวหนา 2 จุด ใส่จุดแรกตรงที่คุณต้องการจะเริ่มให้เป็นตัวหนา และใส่อีกจุดตรงที่คุณต้องการให้ตัวหนาจบที่จุดนี้ หากคุณต้องการทำให้ข้อความช่วงหนึ่งเป็นตัวเอียง คุณก็ต้องใส่คำสั่งที่ทำให้ตัวเอียง ไปไว้หน้าจุดที่ต้องการเริ่มให้ตัวเอียง และอีกจุดคือหลังจุดที่ต้องการให้สิ้นสุดการทำให้เป็นตัวเอียง
รูปแบบของ tag หรือคำสั่งจะเหมือนๆกันทุกๆคำสั่ง จะเริ่มต้นด้วยเครื่องหมายน้อยกว่า < และลงท้ายด้วยเครื่องหมายมากกว่า > ซึ่งต้องเป็นเช่นนี้เสมอ ไม่มีข้อยกเว้น และสิ่งที่อยู่ในระหว่างสองเครื่องหมายนี้ คือคำสั่งของ HTML (หรือ tag) การเรียน HTML จึงเป็นการเรียนรู้ว่า คำสั่งต่างๆจะให้ผลอย่างไรบ้าง เพื่อนำมาใช้อย่างที่คุณต้องการ และนี่คือตัวอย่างแรกของคำสั่ง :
คำสั่งที่ทำให้ตัวหนังสือเป็นตัวหนาคือ “b” หรือจะใช้ “B” ก็ได้ครับ จะพิมพ์คำสั่ง HTML เป็นตัวใหญ่หรือเล็กก็ได้ และนี่เป็นการเขียน HTML เพื่อให้ข้อความ “ข้าวมันไก่” เป็นตัวหนา (ลองพิมพ์ลงไป save ไว้ แล้วเปิดดูครับ) :
<B>ข้าวมันไก่</B>
ลองดูว่าเกิดอะไรขึ้นบ้างครับ
1. <B> เป็นคำสั่งเริ่มต้นที่ทำให้เป็นตัวหนา
2. “ข้าวมันไก่” เป็นข้อความที่เราต้องการให้เป็นตัวหนา
3. </B> เป็นคำสั่งปิดท้ายที่บอกว่า การทำให้เป็นตัวหนาจบที่ตรงนี้ คำสั่งปิดท้ายทุกคำสั่งจะเหมือนกับคำสั่งเริ่มต้น แต่จะมีเครื่องหมายทับ / อยู่ก่อนหน้าคำสั่งนั้น
4. <b>ข้าวมันไก่</B> จะให้ผลในหน้าจอเช่นนี้ : ข้าวมันไก่
ไขข้อข้องใจ
ถาม : คำสั่งปิดของคำสั่งอื่นๆ จะเหมือนกับคำสั่งเปิด เพียงแต่เพิ่มเครื่องหมาย / เข้าไปใช่ไหม
ตอบ : แม่นแล้ว
ถาม : แล้วคำสั่งที่เราใส่เข้าไป จะแสดงบนหน้าจอไหม ?
ตอบ : ไม่ครับ หากว่าคำสั่งนั้นยังอยู่ในเครื่องหมาย < และ > คำสั่งใช้เปลี่ยนแปลงตัวหนังสือ และเป็นโค้ดที่ซ่อนไว้ไม่ให้ผู้อ่านเห็น
ถาม : คำสั่งของคุณใช้ B ตัวใหญ่น่ะ ทุกคำสั่งต้องเป็นตัวใหญ่ด้วยไหม ?
ตอบ : เล็กหรือใหญ่ Browser ไม่ใส่ใจหรอกครับ มันจะเห็นทั้งตัวใหญ่และเล็กเท่ากัน แต่ผมคิดว่า หากคุณฝึกนิสัยให้พิมพ์คำสั่งเป็นตัวใหญ่ จะช่วยให้สามารถแยกแยะคำสั่งออกจากตัวหนังสือธรรมดา และยังช่วยให้คุณกลับมาแก้ไขโค้ดได้ง่ายขึ้น
ถาม : เราต้องใส่คำสั่งให้กับตัวหนังสือทั้งหมดเลยรึเปล่า ?
ตอบ : ไม่ครับ เพียงแต่ถ้าคุณพิมพ์แต่ตัวหนังสืออย่างเดียว ก็จะถูกแสดงในหน้าจอได้ แต่จะไม่มีลักษณะพิเศษอะไร
ถาม : แล้วถ้าผมลืมใส่คำสั่งปิดล่ะ หรือลืมใส่เครื่องหมายทับ / ลงไป ?
ตอบ : ยุ่งเหยิงได้ครับ ถ้าคุณใส่แต่คำสั่งเปิด คำสั่งนั้นก็จะให้ผลตั้งแต่จุดนั้น ยาวไปจนจบเอกสาร แต่ว่ามีวิธีแก้ไขง่ายๆ โดยเพิ่มคำสั่งปิดเข้าไป หรือเพิ่ม / หากคุณลืมไว้ แล้ว save ทับ แล้วเปิดออกมาดูผลที่แก้ไขแล้ว
ถาม : ทุกๆคำสั่งของ HTML ต้องมีทั้งคำสั่งเปิดและปิดไหม ?
ตอบ : ไม่ครับ มีข้อยกเว้นในกฏนี้อยู่ แต่ตอนนี้ให้คุณใช้กฏนี้ไปก่อนครับ
คำสั่งต่างๆในแบบเปิดและปิด
คำสั่ง HTML ส่วนใหญ่ต้องใช้ทั้งคำสั่งเปิดและปิด และส่วนใหญ่จะเข้าใจได้ง่าย นี่เป็นบางส่วนที่ให้ผลแบบต่างๆ :
|
อธิบายคำสั่ง
|
โค้ด
|
ตัวอย่างการใช้โค้ด
|
ผลของโค้ด
|
|
ทำให้เป็นตัวหนา
|
B
|
<B>หนา</B>
|
หนา
|
|
ทำให้เป็นตัวเอียง
|
I
|
<I>เอี่ยง</I>
|
เอียง
|
|
ทำการขีดเส้นใต้
|
U
|
<U>ขีดเส้นใต้</U>
|
ขีดเส้นใต้
|
ใช้สองคำสั่งพร้อมกันได้รึเปล่าครับ ?
ได้ครับ แต่ต้องใส่ทั้งคำสั่งเปิดและปิดให้ครบและเป็นไปตามลำดับ เช่น :
<B><I>หนาและเอียง</I></B> จะได้ หนาและเอียง
<B><U>หนาและขีดเส้นใต้</U></B> จะได้ หนาและขีดเส้นใต้
หากคุณใช้คำสั่งมากกว่าสอง ให้ใช้คำสั่งเปิดและปิดให้ถูกต้อง ลองดูตัวอย่างนี้สิครับ
<B><I><U>ข้อความ</I></B></U>
รูปแบบข้างบนนี้ไม่ถูกต้องนะครับ มีการวางตำแหน่งคำสั่งเปิดและปิดผิดไป (ฝรั่งบอกอย่างนี้ แต่ผมทดลองแล้วได้ผลดังนี้ครับ.. ข้อความ เอาเถอะครับใช้รูปแบบที่มีระเบียบดีกว่า)
ที่ถูกต้องนั้น ต้องวางคำสั่งเปิดแล้วปิดหุ้มข้อความเป็นชั้นๆ ดังนี้ :
<B><I><U>ข้อความ</U></I></B>
คำสั่งที่ไม่ต้องใช้คำสั่งปิด
คำสั่ง HTML ส่วนใหญ่ใช้ทั้งคำสั่งเปิดและปิด แต่มีบางคำสั่งที่ใช้ด้วยคำสั่งเดี่ยว ไม่มีคำสั่งปิด ซึ่งนี่เป็น 3 ตัวอย่างที่นิยมใช้กันมาก
|
คำสั่ง
|
หน้าที่ของคำสั่ง
|
|
<HR>
|
สร้างเส้นในแนวนอนของหน้าจอ(ย่อจากคำว่า Horizontal(แนวนอน) Reference)
|
|
<BR>
|
มาจากคำว่า BREAK ซึ่งหมายถึงการขึ้นบรรทัดใหม่
|
|
<P>
|
มาจากคำว่า Paragraph ซึ่งแปลว่าย่อหน้า ทำหน้าที่คล้าย <BR> แต่จะเป็นการเว้นหนึ่งบรรทัดแล้วขึ้นบรรทัดใหม่ ซึ่งจะใช้ <P> ติดต่อกันในการเว้นหลายๆบรรทัดไม่ได้
|
เขียน HTML หน้าแรกของคุณ
เอาล่ะครับ คุณกำลังจะเขียน HTML หน้าแรกของคุณ ด้วยสิ่งที่คุณเรียนมา ร่วมกับสองสิ่งที่ผมจะบอกต่อไปนี้ และสองสิ่งนี้ก็สำคัญมากต่อทุกๆหน้าของคุณ เพราะว่าคุณต้องเขียนสองสิ่งนี้ไว้ในทุกๆหน้าครับ
ให้เริ่มต้นทุกหน้าด้วยคำสั่ง : <HTML>
ซึ่งหมายความว่านี่คือเอกสารแบบ HTML
ต่อมาให้ใส่คำสั่ง : <TITLE> และ </TITLE>
คำสั่งนี้มีผล… เอ่อ …ลองสังเกตด้านบนสุดของหน้าต่างที่เหนือเมนู File Edit View… ที่เป็นแถบสีน้ำเงินที่ตอนนี้มีตัวหนังสือเขียนว่า “บทเรียนที่ 2 คำสั่งของ HTML (tags)” ซึ่งนั่นเป็นหัวข้อ(Title) ซึ่งเป็นผลจากคำสั่งนี้ คุณจะนำชื่อหัวข้อมาวางระหว่างคำสั่งเปิดและปิดนี้ครับ สุดท้าย ให้ปิดทุกๆหน้าด้วย : </HTML>
เข้าใจไหมครับ ? คุณเริ่มเขียนด้วย HTML และปิดด้วย /HTML
มาเริ่มกันเลย !
ผมอยากให้คุณเล่นกับคำสั่งเหล่านี้ ให้จำไว้ว่า HTML อ่านเหมือนกับที่คุณอ่าน บนลงล่าง ซ้ายไปขวา และให้ผลต่างๆ เมื่อคุณใส่คำสั่งเปิดและปิดในช่วงที่คุณต้องการ และอย่าลืมใส่ทุกๆคำสั่งไว้ใน < และ >
และนี่เป็นหน้าตัวอย่างเพื่อที่จะแสดง… เอ่อ ..หมายถึงให้คุณทำในค่ำคืนนี้
<HTML>
<TITLE>หน้าแรกของฉัน</TITLE>
<B>นี่เป็นหน้าแรกของฉัน</B><P>
ฉันสามารถเขียนตัว <I>เอียง</I> หรือ <B>หนา</B><BR>
<HR>
<B><I>หรือทั้งสองแบบรวมกัน</I></B><BR>
<HR>
<U>…พอแค่นี้</U>
</HTML>
สังเกตว่าผมจะใช้แต่คำสั่งที่แสดงในหน้านี้ครับ เป็นหน้าที่ง่ายๆธรรมดาๆครับ เพราะว่าคุณเพิ่งเริ่มต้นเท่านั้น ให้สังเกตการใช้ <HTML> และ </HTML> กับการใช้ <TITLE> และ </TITLE> แล้วสังเกตการใช้ P และ BR ว่าเกิดช่องว่างระหว่างบรรทัดได้ต่างกันเพียงใด
บทเรียนการเขียนเว็บด้วยภาษา html
กำลังอ่านบทที่ 2 คำสั่ง html
