เริ่มเข้าสู่ระดับโค้ด HTML นะคะ โดยหลักการเขียนโค้ด HTML นั้น ง่ายๆ ไม่ยาก เป็นหลักการที่เป็นเหตุเป็นผลมากๆ ทำให้เราเข้าใจได้ง่าย และจำได้ง่ายค่ะ
พยายามผ่อนคลายนะคะ ไม่ต้องปวดหัวที่ต้องเรียนโค้ด หรือต้องจำโค้ด เดี๋ยวพอทำไปเรื่อยๆ ก็จะได้เอง ที่สำคัญ เรารู้โค้ดเพียงไม่กี่โค้ด ก็นำโค้ดนั้นไปใช้ได้แล้วค่ะ
1. ใช้ Tag เพื่อเป็นโค้ดคำสั่งเสมอ เราจะใช้ Tag เป็นคำสั่งที่จะบอกให้หน้าเว็บไซต์แสดงผลอย่างไร โดยมี Tag เปิด และ Tag ปิด ครอบอยู่ Tag เปิด คือ <> Tag ปิด คือ </> />(มีเครื่องหมาย / เพิ่มขึ้นมา)
ตัวอย่างการใส่โค้ด 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>3 />2 />1 />3 />2 />1 />
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 หลักๆ ที่ใช้กัน มาลงให้เพื่อนๆนำไปใช้กันได้เลย (โดยใช้หลักการที่เรียนรู้ในบทนี้นะคะ) คนสอน มีเวลาน้อย มาอัพเดทวันละนิดวันละหน่อย ยังไงก็อดใจรอกันหน่อยนะคะ สำหรับวันนี้ ขอตัวจอระรีไปนอนก่อน แล้วพบกันใหม่วันหน้าค่า
ปล.ปูเสื่อรออ่านต่อไป