ข้ามไปที่เนื้อหาหลัก

มาเริ่มต้นรู้จักกับ HTML กันเถอะ Part I

มาเริ่มต้นรู้จักกับ HTML กันเถอะ

     หลายคนอาจทราบหรือไม่ทราบว่า HTML นั้น ย่อมาจาก HyperText Markup Language ซึ่งเป็นภาษาหนึ่งที่ใช้ในการเขียนเว็บ แต่ในบทความนี้เราจะอธิบายเกี่ยวกับเรื่องราวต่าง ๆ ว่าเจ้า HTML เนี่ยมันมาจากไหนกันแน่นะ และบอกรายละเอียดเกีี่ยวกับ tag และ element ต่าง ๆ ของ HTML  แน่นอนคุณจะได้ลองเขียน HTML เพื่อเสริมความเข้าใจของคุณเกี่ยวกับการเขียนเว็บด้วย HTML มาเริ่มกันเลย

About HTML

     HTML เป็นต้นแบบแรก ๆ ที่ถูกสร้างโดย ทิม เบิร์นเนอร์-ลี ( Tin Berners-Lee ) ในปี ค.ศ. 1992 หรือ พศ 2535 เบิร์นเนอร์-ลีรู้สึกว่ามีความเป็นไปได้ที่จะเชื่อมต่อเอกสารต่าง ๆ เข้าด้วยกันโดยใช้ hypertext ( ระบบซอฟต์แวร์ที่เชื่อมต่อหัวข้อต่าง ๆ บนหน้าจอกับข้อมูลหรือกราฟิกที่เกียวข้องซึ่งโดยทั่วไปจะเข้าถึงด้วยวิธีการชี้หรือคลิก หรือเรียกว่า hyperlinks ) และแนวคิด HTML ก็ได้ถือกำเนิดขึ้น
     ในสมัยก่อนเนื่องจากบริษัทที่ได้พัฒนา hypertext เช่น Zog และ Intermedia ได้กำหนดค่าให้ hypertext ที่บริษัทตนเองพัฒนาทำงานเข้ากับประเภทคอมพิวเตอร์ของบริษัทตนเองเท่านั้น และ hypertext ดังกล่าวต่างมีรูปแบบที่ไม่ชัดเจนทำให้การนำ hypertext มาเชื่อมต่อนั้นเป็นไปได้ยากมาก ๆ
     เบิร์นเนอร์-ลีพัฒนา HTML จาก ภาษามาร์คอัปหนึ่งที่เรียกว่า Standard Generalized Markup Language ( SGML ) โดยนำมาเชื่อมต่อกับโปรโตคอลที่เขาได้พัฒนาขึ้นมาโดยโปรโตคอลนี้จะเข้าถึงข้อความจากเอกสารผ่าน hyperlinks  ชื่อของโปรโตคอลเป็นที่รู้จักกันดีคือ HTTP
    HTML กลายมาเป็นมาตราฐานหลักในการใช้งานโดยทั่วไปและได้พัฒนาออกมาเป็นเวอร์ชั่นต่าง ๆดังนี้
  • HTML 2.0 ( เดือนพฤศจิกายน ค.ศ.1995 )
  • HTML 3.2 ( เดือนมกราคม ค.ศ.1997 )
  • HTML 4.0 ( เดือนธันวาคม ค.ศ.1997 )
  • HTML 4.01 ( เดือนธันวาคม ค.ศ.1999 )
  • HTML 5 ( เดือนสิงหาคม ค.ศ.2014)  กำลังใช้ในปัจจุบัน
  • HTML 5.1 กำลังพัฒนา

Getting Started with HTML

     เรามาเริ่มสร้างเว็บของเราโดยใช้ภาษา HTML กันดีกว่าก่อนอื่นเลยเปิด Texteditor ที่มีในเครื่องของเราขึ้นมาเลยไม่ว่าจะเป็น Atom , Sublime, Notepad++, หรือ Notepad ธรรมดาก็ได้ทั้งนั้น
  1. เขียนโค้ดดังรูปใน Texteditor  ของตัวเอง
  2. บันทึกไฟล์เป็น ( ชื่อไฟล์ ).html ในรูปคือชื่อ helloworld.html 
  3. จะพบไฟล์ helloworld.html ในโฟล์เดอร์ตัวเอง
  4. มาเปิดไฟล์ที่เราสร้างบนเว็บเบราว์เซอร์กัน
     นี่เป็นแค่การเริ่มต้นเท่านั้นอาจจะเสียเวลาไปบ้างสำหรับคนที่ทราบดีอยู่แล้ว งั้นเราไปต่อกันเลยดีกว่า

     อย่างที่ทราบกันดีว่า HTML เป็นภาษามาร์คอัปและประกอบไปด้วยมาร์กอัปแท็กโดยทั่วไปเราจะเห็น เอกสารที่สร้างจาก HTML ประกอบไปด้วย HTML แท็กและเนื้อหาภายใน สังเกตจากโค้ดต่อไปนี้
     <!DOCTYPE html>
     <html>
     <body>
          <p>Hello ! </p>
          <p>I'm "MiniG" </p>
     </body>
     </html>
     Tags ( แท็ก ) คือคำที่ใช้เรียกคำที่ถูกล้อมรอบด้วย ( <  > ) เช่น <html> เป็น opening tag และ           </html> เป็น closing tag โดยเจ้าแท็ก <html> นี้จะบอกเว็บเบราว์เซอร์ว่าทุกอย่างที่อยู่ระหว่างมันนั้นเป็น HTML document และเรียกแท็กที่อยู่ระหว่างมันว่า Elements โดยสิ่งที่ปรากฏบนหน้าเว็บเบราว์เซอร์นั้นจะมีเพียงข้อความภายในแท็กเท่านั้นเราจะไม่เห็น opening tag และ closing tag
      เป็นอย่างไรบ้างครับกับข้อมูลเกี่ยวกับ HTML ครั้งหน้ากระผมจะมาอธิบายเกี่ยวกับ Tags element ต่าง ๆ ใน HTML ว่าจะมีอะไรบ้างและแต่ละอย่างคืออะไร พบกันครั้งหน้าครับ

อ้างอิง :THINKING IN HTML  by Aravind Shenoy
ขอบคุณครับ




ความคิดเห็น

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

โพสต์ยอดนิยมจากบล็อกนี้

Python: Chat bot &Text to Speech ภาษาไทย ด้วย gTTS

วันนี้จะมาแนะนำทุกๆ คนเกี่ยวกับ การเขียนโปรแกรมง่าย ๆ เพื่อให้คอมพิวเตอร์อ่านออกเสียงตามที่เราได้พิมพ์ให้ โดย ใช้ library คือ gTTS และ play sound จะมีวิธีการเขียนอย่างไร มาดูกันเลย เริ่มจากติดตั้ง package gTTS และ play sound ก่อน                                                                          pip install gTTS                                                                                pip install playsound                                                    ...
แสดงความคิดเห็น
อ่านเพิ่มเติม

การทำ Performance Testing ด้วย Postman

Performance Test คืออะไร? Performance Test คือการทดสอบซอฟต์แวร์หรือระบบ เพื่อประเมินความสามารถในการทำงานเมื่อมีภาระหรือโหลดต่างๆ เข้ามาในระบบ เช่น จำนวนผู้ใช้ที่เพิ่มขึ้น, ปริมาณข้อมูลที่ถูกประมวลผล หรือความซับซ้อนในการทำงานของระบบ เหตุผลที่ต้องทำ Performance Test วัดความเร็วของระบบ (Speed) ช่วยให้ทราบว่าระบบสามารถตอบสนองต่อการร้องขอ (request) ได้เร็วเพียงใดในสภาวะการใช้งานที่หลากหลาย ไม่ว่าจะเป็นเมื่อมีผู้ใช้จำนวนน้อยหรือมาก ประเมินความเสถียร (Stability) ตรวจสอบว่าระบบสามารถทำงานได้ต่อเนื่องภายใต้การทำงานหนักหรือโหลดที่สูง เช่นในช่วงที่มีจำนวนผู้ใช้เพิ่มขึ้นอย่างมาก หรือในสถานการณ์ที่ต้องประมวลผลข้อมูลจำนวนมาก ปรับปรุงประสิทธิภาพ (Optimization) ช่วยให้ระบุจุดอ่อนของระบบ เช่น API ที่ทำงานช้า หรือการใช้ทรัพยากรมากเกินไปในบางส่วน ซึ่งสามารถปรับปรุงได้เพื่อเพิ่มประสิทธิภาพ เตรียมพร้อมสำหรับการใช้งานจริง (Real-World Readiness) การทดสอบช่วยให้เราทราบถึงการตอบสนองของระบบในสภาวะที่ใกล้เคียงกับการใช้งานจริง เพื่อให้มั่นใจว่าเมื่อปล่อยระบบให้ผู้ใช้ใช้งาน จะไม่เกิดปัญหาการโหลด...
แสดงความคิดเห็น
อ่านเพิ่มเติม

การทำ Vulnerability Scanning ด้วย ZAP ( Zed Attack Proxy )

Vulnerability Scanning (การสแกนหาช่องโหว่) Vulnerability Scanning คือกระบวนการตรวจสอบระบบโดยอัตโนมัติเพื่อค้นหาช่องโหว่ด้านความปลอดภัย เช่น การตั้งค่าที่ผิดพลาด, ซอฟต์แวร์ที่ล้าสมัย หรือโค้ดที่อาจมีปัญหา ลักษณะของ Vulnerability Scanning ใช้ เครื่องมืออัตโนมัติ เช่น OWASP ZAP, Nessus, OpenVAS มุ่งเน้นการ ระบุช่องโหว่ที่มีอยู่ แต่ไม่ทำการโจมตีเพื่อทดสอบ มีการจัดอันดับความร้ายแรงของช่องโหว่ เช่น Low, Medium, High, Critical สามารถใช้ ทำซ้ำได้ง่าย และเหมาะสำหรับการตรวจสอบ Compliance (มาตรฐานความปลอดภัย) ตัวอย่างช่องโหว่ที่ตรวจพบ การตั้งค่าที่ไม่ปลอดภัย (Security Misconfigurations) การเปิดใช้โปรโตคอลที่ล้าสมัย เช่น TLS 1.0 ซอฟต์แวร์ที่ไม่ได้รับการอัปเดต ช่องโหว่ในโค้ด เช่น SQL Injection, XSS OWASP ZAP (Zed Attack Proxy) เป็นเครื่องมือโอเพนซอร์สที่ถูกพัฒนาโดย OWASP (Open Web Application Security Project) สำหรับการทำ Security Testing โดยเฉพาะการตรวจสอบช่องโหว่ (Vulnerability Assessment) ใน เว็บแอปพลิเคชัน โดย ZAP ทำหน้าที่เป็น Proxy Server ที่ดักจับและวิเคราะ...
แสดงความคิดเห็น
อ่านเพิ่มเติม