บทที่ 3 หลักการใช้คำสั่ง HTML


เริ่มเข้าสู่ระดับโค้ด HTML นะคะ โดยหลักการเขียนโค้ด HTML นั้น ง่ายๆ ไม่ยาก เป็นหลักการที่เป็นเหตุเป็นผลมากๆ ทำให้เราเข้าใจได้ง่าย และจำได้ง่ายค่ะ


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


1. ใช้ Tag เพื่อเป็นโค้ดคำสั่งเสมอ


เราจะใช้ Tag เป็นคำสั่งที่จะบอกให้หน้าเว็บไซต์แสดงผลอย่างไร โดยมี Tag เปิด และ Tag ปิด ครอบอยู่ Tag เปิด คือ <> Tag ปิด คือ </>(มีเครื่องหมาย / เพิ่มขึ้นมา)



tag ของ html

ตัวอย่างการใส่โค้ด HTML
ใส่ข้อความที่ต้องการก่อนเช่น


เรียนภาษา HTML

แล้วใส่โค้ด html ครอบลงไปเพื่อกำหนดรูปแบบ


<b>เรียนภาษา HTML</b>

ในที่นี้ เราใส่ แท็ก b เพื่อกำหนดให้เป็นตัวหนา (ข้อความที่ถูกแท็ก b ครอบทั้งหมด จะกลายเป็นตัวหนา)
ใส่โค้ดตามพื้นฐานที่สอนไปในบทที่แล้วนะคะ คือใส่ใน Notepad , เซฟ แล้วดูผลค่ะ


ผลลัพธ์


เรียนภาษา HTML

หมายเหตุ: <b>ข้อความ</b> ตรงชื่อ b นี้เรียกว่า element แต่ในเว็บนี้ทั้งหมดจะขอเรียกว่า แท็ก b เพื่อให้เข้าใจกันง่ายๆนะคะ

2. ลำดับการใส่โค้ด HTML


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



<b><u>เรียนภาษา HTML</u></b>

ผลลัพธ์


เรียนภาษา HTML


ลำดับการเขียนโค้ด จะต้องเรียงลำดับ ก่อนหลังให้ถูกค่ะ จะเอาโค้ดไหนไว้ด้านนอก หรือด้านในก็ได้ แต่ต้องเรียงลำดับให้ถูก ต้องดังนี้



<1><2><3>ข้อความ</3></2></1>

ลำดับการเขียน Tag html



3.โค้ดบางโค้ด ไม่มี Tag ปิด


โค้ดบางโค้ด ก็ไม่มีแท็กปิดนะคะ ต่อท้ายได้เลย


เช่น โค้ด แจ้งว่า ขึ้นบรรทัดใหม่ ใช้แท็ก <br /> ค่ะ ลองทดสอบเขียนข้อความดูนะคะ



เรียนภาษา HTML<br /> 
เรียนภาษา HTML


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

แต่การขึ้นบรรทัดใหม่นั้น ไม่จำเป็น เพราะข้อความที่อยู่หลังจากแท็ก <br />  นั้น ก็ต้องลงไปอยู่บรรทัดใหม่ทั้งหมด อยู่แล้ว



หมายเหตุ: แท็กที่ไม่มีแท็กเปิด มักจะมีลักษณะเหมือนแท็ก <br /> คือ เป็นชื่อแท็ก แล้วต่อด้วยขีดทับ /


4. จะเขียนพิมพ์เล็ก หรือพิมพ์ใหญ่ก็ได้


โค้ด html ตัวพิมพ์เล็ก หรือพิมพ์ใหญ่ ก็ให้ผลลัพธ์เหมือนกัน ค่ะ จะเขียนยังไงก็ได้ แต่อย่าสับสนระหว่าง โค้ด กับข้อความนะคะ ถ้าเป็นข้อความ ถ้าเราเขียนตัวพิมพ์ใหญ่ ก็จะได้ผลลัพธ์ออกมาเป็นตัวพิมพ์ใหญ่เลย เช่น HTML เป็นต้น


และ ชื่อรูปภาพ ชื่อไฟล์ ต่างๆนั้น ให้เขียนให้ตรงตามชื่อ ตามลำดับอักษรพิมพ์ใหญ่ และ พิมพ์เล็กค่ะ เช่น ถ้ารูปภาพชื่อ picture.jpg ก็ควรเขียนเป็น picture.jpg ไม่ใช่ PICTURE.JPG ค่ะ



การบ้าน
ให้ลองเขียนข้อความให้ได้ผลลัพธ์ ตามรูปแบบด้านล่างนี้ดูนะคะ


เรียนภาษา HTML
เรียนภาษา HTML
เรียนภาษา HTML
เรียนภาษา HTML เรียนภาษา HTML
เรียนภาษา HTML เรียนภาษา HTML
เรียนภาษา HTML เรียนภาษา HTML


*ให้พยายามเขียน โดยใช้โค้ดน้อยที่สุดนะคะ



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





 

Create Date : 03 ธันวาคม 2551
5 comments
Last Update : 16 มกราคม 2553 16:56:58 น.
Counter : 2481 Pageviews.

 

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

ปล.ปูเสื่อรออ่านต่อไป

 

โดย: Mr.Whisper (wsteven ) 3 ธันวาคม 2551 22:29:15 น.  

 

เป็นกำลังใจให้เขียนต่อไปเรื่อยๆ ครับ
(ผมหมดไฟซะแล้ว อิอิ)

 

โดย: Horrible Member 3 ธันวาคม 2551 22:38:53 น.  

 

ชอบมากๆ ครับ...ที่เด็กรุ่นใหม่ๆ อย่างพวกคุณทำเพื่อ
สังคมโดยไม่คิดราคา...ค่าหนังสือ...หนังหา...และเป็น
ประโยชน์อย่างมากในองค์ความรู้ที่ถ่ายทอดโดยไม่
แสวงหาผลกำไร...ขอให้มีผู้อ่านเยอะๆ นะครับ...

เมนต์นิดนะ ... ออกแบบกราฟฟิกสวยมากครับ...

 

โดย: แคทอาย (ปฐมเชทย์ ) 5 ธันวาคม 2551 9:46:23 น.  

 

แก้ไขนิดนึง ตรงข้อ 4 ...ที่จริง จะพยายามสื่อว่า จะเขียนตัวพิมพ์เล็ก หรือพิมพ์ใหญ่ ผลลัพธ์ ก็ออกมาเหมือนกันค่ะ
ขออภัยนะคะ ขอบคุณสำหรับคอมเม้นต์นะคะ (ช่วยเตือนได้ดีเลย)

และก็ ขอบคุณสำหรับกำลังใจทุกท่านเลยค่ะ

 

โดย: nHuy (huytumhuy ) 5 ธันวาคม 2551 15:52:37 น.  

 

ขอบคุณมากนะค๊าา กาลังหัดทำเวปค๊า

 

โดย: goy (mylife_by_aupair ) 9 มีนาคม 2553 2:37:25 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 


Buckethuy
Location :
Thailand United States

[ดู Profile ทั้งหมด]

ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 26 คน [?]




Group Blog
 
<<
ธันวาคม 2551
 123456
78910111213
14151617181920
21222324252627
28293031 
 
3 ธันวาคม 2551
 
All Blogs
 
Friends' blogs
[Add Buckethuy's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.