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

มาเริ่มต้นรู้จักกับ 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
ขอบคุณครับ




ความคิดเห็น

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

รวมชุดคำสั่ง Assembly ของ AVR

บทความนี้ได้รวบรวมชุดคำสั่งภาษา assembly ของไมโคคอนโทรลเลอร์ตระกูล AVR และสรุปการใช้งานเป็นภาษาไทยอย่างง่ายหากมีข้อผิดพลาด ขออภัยด้วยครับ ชุดคำสั่งทางคณิตศาสตร์และลอจิก add Rd, Rr   :   Rd + Rr เก็บผลลัพธ์ไว้ใน Rd adc Rd, Rr   :   Rd + Rr + Carry flag  เก็บผลลัพธ์ไว้ใน Rd mul Rd, Rr   :   Rd x Rr ได้ผลลัพธ์เป็น 16 bit เก็บไว้ใน R0, R1 sub Rd, Rr   :   Rd - Rr เก็บผลลัพธ์ไว้ใน Rd sbc Rd, Rr   :   Rd - Rr - Carry flag  เก็บผลลัพธ์ไว้ใน Rd and Rd, Rr   :   Rd and Rr แบบ bit ต่อ bit or Rd, Rr   :   Rd or Rr แบบ bit ต่อ bit eor Rd, Rr   :    Rd exclusive or Rr แบบ bit ต่อ bit com Rd   :   complement (กลับบิต) Rd neg Rd   :   2'complement (ติดลบ) Rd inc Rd   :   Rd++ dec Rd   :   Rd-- clr Rd   :   เคลียร์ bit Rd เป็น 0 ชุดคำสั่งเคลื่อนย้ายข้อมูล mov Rd, Rr   :   copy ข้อมูลขนาด 1 byte จาก Rr ไว้ใน Rd movw Rd, Rr   :   copy ข้อมูลขนาด 2 bytes จาก Rr, Rr+1 ไว้ใน Rd, Rd+1 ldi   Rd, k   :   โหลดค่าใส่ register , k มีค่า 0 - 255 ld Rd, X   :   อ่านค่าตำแหน่งที่ X ชี้อยู่เก

รู้จักกับการออกแบบอินโฟกราฟิกส์ infographics design

      infographics คือการออกแบบโดยการใช้ภาพนิ่ง, ภาพเคลื่อนไหวหรือสัญลักษณ์แทนข้อความหรือข้อมูลต่างๆ ที่ต้องการจะสื่อความหมายถึงข้อความหรือข้อมูลนั้นโดยภาพนิ่ง, ภาพเคลื่อนไหวหรือสัญลักษณ์ที่ใช้แทนจะมีรูปแบบที่ผู้อ่านสามารถเข้าใจได้อย่างรวดเร็วและชัดเจน โดยไม่ต้องมีผู้นำเสนอมาช่วยขยายความอีก       infographics มาจากคำว่า information + graphics การนำเสนอข้อมูลแบบ infographics จะนำเสนอข้อมูลที่เข้าใจยาก ข้อมูลที่ตัวอักษรเยอะๆ ในรูปแบบสร้างสรรค์เข้าใจได้ง่าย เช่น ภาพ ลายเส้น แผนภูมิ แผนที่ ฯลฯ สามารถสื่อข้อมูลนั้นออกมาได้อย่างชัดเจน มีองค์ประกอบที่สำคัญ        ตัวอย่างการนำเสนอข้อมูลแบบ infographics http://www.alychidesigns.com/30-templates-and-vector-kits-to-design-your-own-infographic กระบวกการออกแบบดีไซน์ infographics โดย Hyperakt's Josh Smith  1. รวบรวมข้อมูล รวบรวมข้อมูลทุกอย่างเกี่ยวกับสิ่งที่จะนำเสนอโดยข้อมูลที่ดีควรเป็นข้อมูลดิบจากต้นฉบับและควรเก็บรวบรวมลิ้งค์ข้อมูลไว้ด้วย 2. การอ่านข้อมูลทั้งหมด การออกแบบอินโฟกราฟิกต้องมีทักษะในการจัดการข้อมูลและต้องแน่ใจว่าข้

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

วันนี้จะมาแนะนำทุกๆ คนเกี่ยวกับ การเขียนโปรแกรมง่าย ๆ เพื่อให้คอมพิวเตอร์อ่านออกเสียงตามที่เราได้พิมพ์ให้ โดย ใช้ library คือ gTTS และ play sound จะมีวิธีการเขียนอย่างไร มาดูกันเลย เริ่มจากติดตั้ง package gTTS และ play sound ก่อน                                                                          pip install gTTS                                                                                pip install playsound                                                                                                                                                                               จากนั้น เรามาเริ่มเขียนโปรแกรมกันเลย โดยการทำงานของโปรแกรมนี้คือ โปรแกรมจะรับค่าข้อความจากผู้ใช้ จากนั้น เรียกใช้ library gTTS โดยส่งข้อมูลคือ ข้อความ และ ภาษา สำหรับการแปลงข้อความเป็นเสียงผ่าน google translate API แล้วจากนั้นจึงทำการ save ข้อมูลลงไปยัง file ชื่อ "sound.mp3" ต่อมาไฟล์จะถูกเล่นโดย playsound เป็นเสียงให้เราได้ยินกัน และในบรรทัดสุดท้ายเป็นการลบไฟล์ที่บัน