ขอบคุณเครดิตภาพจาก : https://www.freepik.com/ ค่ะ ในยุคสมัยนี้ผู้คนเข้าใช้เว็บไซต์มากมาย โดยชีวิตประจำวันตั้งเว็บไซต์ Google, Twitter, Facebook, และอีกมากมายทั้งเพื่อการศึกษาค้นคว้า ความบันเทิง ทางธุรกิจ และอื่นๆอีกมากมาย รู้หรือไม่คะว่าในแต่ละบรรทัดของเว็บไซต์ เบื้องหลังของประโยคหนึ่งมีอะไรบ้างวันนี้จะมาแบ่งปันความรู้เกี่ยวกับ code ที่ใช้ในการเขียนเว็บไซต์ขั้นพื้นฐาน กังวลหรือเปล่าคะว่า นี่ ต้องมีโปรแกรมเฉพาะหรือเปล่า ต้องมีคอมพิวเตอร์ที่ดีหรือเปล่าขอแค่เปิดคอมพิวเตอร์ของคุณมี Notepad และ Google Chrome หรือ Internet Explorer เท่านี้ก็ทำได้แล้วค่ะ ไม่ได้ล้อเล่นน้า ทำได้จริงๆค่ะ หากรู้สึกว่าอยาก advance ขึ้นมาหน่อยขอแนะนำเป็น Notepad++ หรือ Visual Studio ก็ได้ (โปรแกรมที่สามารถเขียนได้สามารถนำมาเขียน code ได้หมดเลยค่ะ แต่ไม่แนะนำพวก Microsoft word หรือโปรแกรมที่ไม่รองรับอะไรจำพวกนี้นะคะ)ว่าแล้วเรามาเริ่มกันดีกว่าค่ะ อันนี้ผู้เขียนใช้เป็นโปรแกรม Notepad++ นะคะมาดู code ของเรากันดีกว่าค่ะว่าเบื้องหลังของหน้าตาแบบนี้ เขียน code อะไรบ้างแต่ละบรรทัดจะสังเกตว่ามีคำสั่งที่อยู่ใน <> จะเรียกว่า Tag นะคะ เรามาดูคำสั่งแต่ละ Tag กันค่ะ - ตัวนี้เป็นตัวประกาศมาตรฐานของเว็บไซต์นี้นะคะ โดยในนี้ใช้ของ HTML 5 ค่ะ (เวอร์ชั่นล่าสุด)HTML ย่อมาจาก Hypertext Markup Language คือ ภาษาที่ใช้ในการเขียนเว็บ หรือ อีกความหมายหนึางก็คือข้อความที่ใช้ในการเชื่อมต่อกันผ่านลิ้งค์ ใช้ Tag ในการกำหนดลักษณะแสดงผลต่างๆ - เป็นตัวเปิดของการใช้งาน html ค่ะ เวลาเขียนจะต้องเขียน และปิดด้วย เสมอค่ะ - เป็นตัวกำหนดลักษณะข้อมูลของเว็บเพจนี้ โดยในที่นี้เราจะใช้ </strong> ตัวนี้จะแสดงผลอยู่บน Title Bar ของเว็บเพจ (สังเกตที่แถบข้างบนค่ะ) เราสามารถเปลี่ยนข้อความตรงนี้ได้ค่ะ</p><p> <title>Google</tilte> (อย่าลืมปิด tap ให้ครบทุกคู่นะคะ)</p><p><strong><body> </strong>- ตัวนี้เป็นตัวกำหนดรูปแบบของเว็บเพจว่าอยากให้แสดงผลออกมาอย่างไร ในภาพเราใช้ <h1> และ <p> อธิบายคร่าวๆก็คือ</p><p><h1> เป็น header โดยตัวเลขจะเป็นการกำหนดขนาด เรียงลำดับจากใหญ่ไปเล็ก (h1, h2, h3, ... , h6) โดยขนาดเล็กที่สุดอยู่ที่ <h6> ค่ะ</p><p><p> กำหนด paragraph เป็นข้อความหรือบทความที่อยู่ในเว็บเพจ</p><p>ขั้นตอนต่อไปคือการบันทึกไฟล์เว็บของเรานะคะ กด save เพื่อบันทึก</p><p><img src="https://trueid-slsapp-storage-prod.s3-ap-southeast-1.amazonaws.com/partner_files/trueidintrend/83601/ExHTMLเซฟไฟล์.PNG" alt="ตั้งชื่อไฟล์สกุลเป็น .html" />ตอนเราตั้งชื่อไฟล์ให้เราตั้งชื่อไฟล์ที่เราต้องการตามด้วย .html ค่ะ เช่น program.html, html_test.html เป็นต้น</p><p><img src="https://trueid-slsapp-storage-prod.s3-ap-southeast-1.amazonaws.com/partner_files/trueidintrend/83601/Capture_49.PNG" alt="ไฟล์ที่ได้" />ไฟล์ที่เราได้จะเป็นลักษณะประมาณนี้ค่ะ หรือหากเราไม่ได้ใช้ chrome เราสามารถเปิดโปรแกรมเว็บบราวเซอร์อื่นได้เหมือนกัน ลองเอาไปทำตามดูนะคะ</p><p> ง่ายใช่ไหมคะ ทุกคนสามารถเอาไปทำตามและเอาไปต่อยอดได้นะคะ และ สิ่งสุดท้ายที่อยากจะฝากเอาไว้ก็คือ ไม่ว่าเราจะอายุเท่าไหร่ เราเชื่อว่าการเรียนรู้ไม่มีที่สิ้นสุดค่ะ ชอบอะไร รักอะไรในสิ่งไหน ศึกษาค้นคว้าหาความรู้ได้เลยค่ะ เพราะความรู้ไม่ได้มีแค่ให้ห้องเรียนค่ะ code ก็เช่นเดียวกันค่ะ ภาษาที่เกี่ยวกับคอมพิวเตอร์มีมากมาย อยากให้ลองศึกษาดูนะคะถ้าหากสนใจ</p>