Html คืออะไร มีหลักการ อย่างไร

การอธิบายภาษามาร์กอัป Hypertext

ย่อ HTML ย่อมาจาก Hypertext Markup Language เป็นภาษามาร์คอัปหลักที่ใช้เขียนเนื้อหาบนเว็บ ทุกๆหน้าเว็บบนอินเทอร์เน็ตมีมาร์กอัป HTML อย่างน้อยรวมอยู่ในซอร์สโค้ดและเว็บไซต์ส่วนใหญ่จะประกอบด้วยหลาย ๆ HTML หรือ. HTM

ไม่ว่าคุณจะต้องการสร้างเว็บไซต์หรือไม่ก็ตาม รู้ว่า HTML คืออะไรวิธีการที่มีอยู่และพื้นฐานของวิธีการสร้างภาษามาร์กอัปแสดงถึงความเก่งกาจอันน่าอัศจรรย์ของสถาปัตยกรรมเว็บไซต์ขั้นพื้นฐานนี้และวิธีการที่จะยังคงเป็นส่วนสำคัญในการดูเว็บของเรา

หากคุณออนไลน์แล้วคุณจะเจอ HTML อินสแตนซ์อย่างน้อยไม่กี่แห่งซึ่งอาจจะไม่ได้ตระหนักถึงมัน

ใครเป็นผู้คิดค้น HTML?

HTML ถูกสร้างขึ้นในปีพ. ศ. 2534 โดย Tim Berners-Lee ผู้สร้างอย่างเป็นทางการและเป็นผู้ก่อตั้งสิ่งที่เรารู้จักในขณะนี้เป็น World Wide Web

เขาได้คิดค้นการแชร์ข้อมูลไม่ว่าคอมพิวเตอร์จะอยู่ที่ใดโดยใช้การเชื่อมโยงหลายมิติ (HTML-coded links ที่เชื่อมต่อทรัพยากรหนึ่งไปยังอีกที่หนึ่ง), HTTP (โปรโตคอลการติดต่อสื่อสารสำหรับเว็บเซิร์ฟเวอร์และผู้ใช้เว็บ) และ URL (ระบบที่อยู่ที่คล่องตัวสำหรับทุกหน้าเว็บบนอินเทอร์เน็ต)

HTML v2.0 ได้รับการเผยแพร่ในเดือนพฤศจิกายนปี 1995 หลังจากที่มีคนอื่นอีกเจ็ดคนสร้าง HTML 5.1 ในเดือนพฤศจิกายน 2016 เผยแพร่เป็นคำแนะนำ W3C

HTML มีลักษณะอย่างไร?

ภาษา HTML ใช้สิ่งที่เรียกว่า แท็ก ซึ่งเป็นคำหรือคำย่อที่ล้อมรอบด้วยวงเล็บ แท็ก HTML ทั่วไปดูเหมือนว่าคุณเห็นในภาพด้านบน

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

แท็กแรกกำหนดว่าข้อความต่อไปนี้จะถูกจัดกลุ่มหรือแสดงอย่างไรและแท็กปิด (แสดงด้วยเครื่องหมายทับขวา) หมายถึงส่วนท้ายของกลุ่มหรือหน้าจอนี้

หน้าเว็บใช้ HTML อย่างไร?

เว็บเบราเซอร์ อ่านโค้ด HTML ที่มีอยู่ในเว็บเพจ แต่ไม่ได้แสดงมาร์กอัป HTML สำหรับผู้ใช้ ซอฟต์แวร์เบราว์เซอร์แปลเป็น HTML coding เป็นเนื้อหาที่สามารถอ่านได้

มาร์กอัปนี้สามารถมีส่วนสร้างพื้นฐานของหน้าเว็บเช่นชื่อหัวเรื่องย่อหน้าข้อความเนื้อหาและลิงก์ตลอดจนผู้ถือภาพรายการ ฯลฯ นอกจากนี้ยังสามารถกำหนดรูปลักษณ์พื้นฐานของข้อความหัวข้อข่าว ฯลฯ ภายใน HTML โดยใช้แท็กตัวหนาหรือบรรทัดแรก

วิธีการเรียนรู้ HTML

HTML เป็นภาษาที่ง่ายที่สุดในการเรียนรู้เนื่องจากเป็นภาษาที่มนุษย์สามารถอ่านได้และสามารถอ่านได้

หนึ่งในสถานที่ยอดนิยมในการเรียนรู้ HTML ออนไลน์คือ W3Schools คุณสามารถหาตัวอย่างต่างๆขององค์ประกอบ HTML ต่างๆและใช้แนวคิดเหล่านี้กับแบบฝึกหัดและแบบทดสอบ มีข้อมูลเกี่ยวกับการจัดรูปแบบข้อคิดเห็น CSS ชั้นเรียนเส้นทางไฟล์สัญลักษณ์สีแบบฟอร์มและอื่น ๆ

Codecademy และ Khan Academy เป็นอีกสองแหล่งข้อมูล HTML ฟรี

โครงสร้างพื้นฐานของ HTML 

โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้

การจัดโครงสร้างแฟ้มเอกสาร


                 ในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น
หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะว่าตัวโปรแกรม
เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้น

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

การแสดงผลที่เว็บเบราเซอร์
                   หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น
ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์
ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมายน้อยกว่า
< ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้นๆ เช่น คำสั่ง <BODY> จะมี </BODY> เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันที

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

คำสั่งเริ่มต้น


รูปแบบ   <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal

คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE -->   ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ

ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>

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

ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ 

 

การเติมสีสันให้เอกสาร

ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ
บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ

 

สี

รหัสสี

ขาว

#FFFFFF

ดำ

#000000

เทา

#BBBBBB

แดง

#FF0000

เขียว

#00FF00

น้ำเงิน

#0000FF