วันเสาร์ที่ 2 พฤศจิกายน พ.ศ. 2556

หลักการใช้คำสั่ง html

หลักการใช้คำสั่ง html

บทที่ 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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น