1 / 23

HTML เบื้องต้น

HTML เบื้องต้น. ธวัชชัย สลางสิงห์. HTML เบื้องต้น. ประวัติความเป็นมา HTML. ความเป็นมาของ HTML Makeup L. HTML >> HyperText Markup L anguage ภาษาที่ใช้สำหรับสร้างเอกสารแบบ HyperText ข้อความในเอกสารที่เชื่อมโยงถึงข้อมูลต่างๆได้ Tim Berners-Lee ปี 1990

eben
Download Presentation

HTML เบื้องต้น

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML เบื้องต้น ธวัชชัย สลางสิงห์

  2. HTML เบื้องต้น • ประวัติความเป็นมา HTML

  3. ความเป็นมาของ HTMLMakeup L • HTML >> HyperText Markup Languageภาษาที่ใช้สำหรับสร้างเอกสารแบบ HyperTextข้อความในเอกสารที่เชื่อมโยงถึงข้อมูลต่างๆได้ • Tim Berners-Lee ปี 1990 • มีการพัฒนาและถูกนำไปใช้อย่างแพร่หลาย จึงกำหมดรูปแบบมาตรฐานขึ้น

  4. ความเป็นมาของ HTMLMakeup L • HTML 1.0 เกิดขึ้นในปี 1993 โดย Tim Berners-Lee and Dave Ragget กำหนดให้เอกสาร HTML ไม่ว่าเขียนด้วยมาตรฐานใดๆ ต้องไม่ทำให้เอกสารที่สร้างนั้นอ่านไม่ได้ • HTML 2.0 1995 พัฒนาโดย IETF (Internet Engineering Task ForceX) มุ่งหวังให้สามารถเปิดแสดงผลกับบราวเซอร์ที่ใช้งานทั่วไป

  5. ความเป็นมาของ HTMLMakeup L • HTML3.0 ในปี 1995 ยังมีการพัฒนา HTML เพิ่มการทำตาราง ปรับข้อความรอบภาพ และช่วยให้บราวเซอร์ย้อนกลับไปดูเว็บเพจหน้าที่เคยชมก่อนได้ดีกว่าเวอร์ชั่น 2.0 • HTML 3.2 ในปี 1996 เพิ่ม element และ attribute ที่ทำงานร่วมกับบราวเซอร์หลายๆตัวมากขึ้น

  6. ความเป็นมาของ HTMLMakeup L • HTML4.0 ในปี 1997 องค์กรกลางที่ชื่อว่า W3C (the world wide web consortium) พัฒนาให้การแสดงผลให้มีประสิทธิภาพมากขึ้นด้วย style sheet, frame,การฝังออบเจ็กของโปรแกรมเสริมเพื่อแสดงภาพและเสียง การสร้างฟอร์ม และใช่ร่วมกับภาษา script แบบต่างๆ

  7. ความเป็นมาของ HTMLMakeup L • HTML4.1 W3C หยุดพัฒนา HTML เปลี่ยนมาเป็นภาษามาตรฐานใหม่ XHTML เพื่อขยายการใช้เว็บไปสู่อุปกรณ์ต่างๆมากขึ้น แต่ยังคงให้มีการแสดงผล HTML ได้เหมือนเดิม • HTML 5.0 ในปี 2012W3C และ WHATWG ได้พัฒนาภาษาที่สามารถใช้งานได้ทุกแพล็ตฟอร์ม และยังสามารถอ้างถึงเทคโนโลยีต่างๆและAPI อื่นๆได้ ทำให้การทำงานของ HTML เหมาะกับการทำ application และงาน multimedia มากขึ้น

  8. ลักษณะของ HTML • คำสั่งของภาษา html จะเรียกว่า แท็ก (tag) โดยคำสั่งแต่ละตัวจะอยู่ภายในเครื่องหมาย < และ > • หลักการเขียนtag html • tag จะแยกเป็น 2 ส่วนแท็กเปิดและแท็กปิด โดยส่วนของแท็กปิดจะมีเครื่องหมาย slash(/) เช่น <title>…</title> กรณีที่มี tag ซ้อนกันให้ปิดแท็กในสุดก่อนแล้วไล่ปิดตามลำดับ • บางแท็กก็ไม่ต้องปิดก็ได้ <br> • HTML จะเขียนตัวใหญ่หรือเล็กก็ได้ แต่ XHTML ตัวใหญ่ตัวเล็กต่างกัน • บางแท็กจะมีตัวกำหนดคุณสมบัติ (attribute) จะเขียนไว้หลักแท็ก • เช่น <hr width=600 size=5>

  9. โครงสร้างของ HTML

  10. โครงสร้างของ HTML • <html>….</html> tag แรกที่ต้องมีในภาษา html บ่งบอกว่าเป็นเอกสาร html อยู่ที่จุดเริ่มและสุดท้ายของเอกสาร • <head>…..</head> กำหนดรายละเอียดหัวเอกสาร HTMl เช่น กำหนดชื่อเว็บเพจ <title>…</title> กำหนดรูปแบบสไตล์ซีท • <body>….</body> ส่วนที่เป็นเนื้อหาของเว็บเพจ

  11. เครื่องมือที่ใช้สร้างเอกสาร HTML • เนื่่องจาก html เป็นการเขียนรูปแบบ ASCII text ธรรมดา จึงสามารถใช้โปรแกรม Text Editor ทั่วไปได้ เช่น Notepad และEditPlus • นอกจากนี้ยังมีโปรแกรม web editor ที่สามารถแปลง graphic ให้เป็นภาษา HTML เช่น Frontpage, Dreamweaver, และ MUSE เป็นต้น

  12. สร้างเว็บเพจง่ายๆ ด้วย Notepad

  13. HTML and XHTML XHTML (ย่อมาจากExtensible Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML และ HTML มารวมกัน  กลายเป็นมาตรฐานใหม่ของ HTML     คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป และเนื่องจาก html มีข้อเสียในการแสดงผลใน brownserต่างๆ อาจไม่เหมือนกัน เช่น เว็บไซต์ที่ออกแบบอาจแสดงผลออกมาสวยงามใน IE แต่ไม่สามารถแสดงผลสวยงามได้ใน browser อื่นๆ W3C จึงพัฒนา HTML4.0โดยปรับปรุงใหม่ ให้เป็นมาตรฐานมากยิ่งขึ้น เพื่อเป็นแนวทางให้ browser ต่างๆได้พัฒนาโปรแกรมไปในแนวทางเดียวกัน

  14. ข้อแตกต่างระหว่าง html และxhtml • ค่าของ attribute ต้องอยู่ในเครื่องหมาย ".." เสมอ • ใช้ attribute id แทน attribute name

  15. ข้อแตกต่างระหว่าง html และxhtml • ทุก XHTML element ต้องทำการปิดให้เรียบร้อย ไม่เว้นแม้แต่ element ที่ไม่มี tag ปิด เช่น <br> จะต้องทำการปิด โดยใช้เครื่องหมาย ' /' เป็น <br /> เป็นต้น

  16. ข้อแตกต่างระหว่าง html และxhtml • ทุก XHTML element ต้องเขียน tag, attribute และค่าของ attribute ด้วยตัวพิมพ์เล็ก

  17. ข้อแตกต่างระหว่าง html และxhtml • เอกสาร XHTML จะต้องประกาศ DOCTYPE และจะต้องมี element html, head, title และ body/frame อย่างครบถ้วนเสมอ

  18. Document Type Definitions Document Type Definition (DTD) คือ ตัวกำหนดโครงสร้างของเอกสาร ไม่ว่าจะเป็นเอกสาร HTML หรือ XHTML หรือ XML ก็ต้องมี DTD ด้วยกันทั้งนั้น แต่ใน HTML นั้นไม่ได้บังคับว่าต้องประกาศ Doctype การประกาศ <!DOCTYPE> ก็เพื่อบอกให้เว็บเบราเซอร์์ทราบว่า เว็บเพจของเราใช้ภาษา HTML หรือ XHTML และคำสั่ง HTML/XHTML ที่ใช้เป็นรุ่นใด และบอกชนิดของเอกสาร (Document Type Definition : DTD) ที่ใช้ ซึ่งจะช่วยให้เว็บเบราเซอร์แปลเอกสารได้อย่างถูกต้อง สามารถตรวจสอบความถูกต้องของคำสั่งในเอกสาร XHTML ว่าถูกต้องตามกฏเกณฑ์หรือไม่ ตาม DTD ที่ระบุไว้ในแถวแรกของเอกสาร ที่ http://validator.w3.org

  19. Document Type Definitions

  20. Document Type Definitions

More Related