HTML ********* - WordPress.com

Download Report

Transcript HTML ********* - WordPress.com 

+
HTML เบือ
้ งตน
้
ธวัชชัย สลางสิ งห ์
+
HTML เบือ
้ งตน
้

ประวัตค
ิ วามเป็ นมา HTML
+
ความเป็ นมาของ
HTMLMakeup L
HTML >> HyperText Markup
Language ภาษาทีใ่ ช้สาหรับสราง
้
เอกสารแบบ HyperText ขอความใน
้
เอกสารทีเ่ ชือ
่ มโยงถึงขอมู
้ ลตางๆได
่
้


Tim Berners-Lee ปี 1990
มีการพัฒนาและถูกนาไปใช้อยาง
่
แพรหลาย
จึงกาหมดรูปแบบมาตรฐาน
่
ขึน
้

+
ความเป็ นมาของ
HTMLMakeup L
HTML 1.0 เกิดขึน
้ ในปี 1993 โดย
Tim Berners-Lee and Dave Ragget
กาหนดให้เอกสาร HTML ไมว่ าเขี
่ ยน
ดวยมาตรฐานใดๆ
ตองไม
ท
้
้
่ าให้
เอกสารทีส
่ รางนั
้นอานไม
ได
้
่
่ ้

HTML 2.0 1995 พัฒนาโดย IETF
(Internet Engineering Task ForceX)
มุงหวั
งให้สามารถเปิ ดแสดงผลกับ
่

+
ความเป็ นมาของ
HTMLMakeup L
HTML 3.0 ในปี 1995 ยังมีการ
พัฒนา HTML เพิม
่ การทาตาราง
ปรับขอความรอบภาพ
และช่วยให้
้
บราวเซอรย
บไปดูเว็บเพจหน้าที่
้
์ อนกลั
เคยชมกอนได
ดี
ชั
่ 2.0
่
้ กวาเวอร
่
์ น

HTML 3.2 ในปี 1996 เพิม
่
element และ attribute ทีท
่ างาน
รวมกั
บบราวเซอรหลายๆตั
วมากขึน
้
่
์

+
ความเป็ นมาของ
HTMLMakeup L
HTML 4.0 ในปี 1997 องคกรกลาง
์
ทีช
่ อ
ื่ วา่ W3C (the world wide web
consortium) พัฒนาให้การแสดงผลให้
มีประสิ ทธิภาพมากขึน
้ ดวย
style
้
sheet, frame, การฝังออบเจ็กของ
โปรแกรมเสริมเพือ
่ แสดงภาพและเสี ยง
การสรางฟอร
ม
บภาษา
้
่
์ และใช่รวมกั
script แบบตางๆ
่

+
ความเป็ นมาของ
HTMLMakeup L
HTML 4.1 W3C หยุดพัฒนา HTML
เปลีย
่ นมาเป็ นภาษามาตรฐานใหม่
XHTML เพือ
่ ขยายการใช้เว็บไปสู่อุปกรณ ์
ตางๆมากขึ
น
้ แตยั
่
่ งคงให้มีการแสดงผล
HTML ไดเหมื
อนเดิม
้

HTML 5.0 ในปี 2012 W3C และ
WHATWG ไดพั
่ ามารถใช้
้ ฒนาภาษาทีส
งานไดทุ
้ กแพล็ตฟอรม
้
์ และยังสามารถอาง
ถึงเทคโนโลยีตางๆและAPI
อืน
่ ๆได้ ทา
่

+
ลักษณะของ HTML
คาสั่ งของภาษา html จะเรียกวา่ แท็ก
(tag) โดยคาสั่ งแตละตั
วจะอยูภายใน
่
่
เครือ
่ งหมาย < และ >


หลักการเขียน tag html
tag จะแยกเป็ น 2 ส่วน แท็กเปิ ดและแท็ก
ปิ ด โดยส่วนของแท็กปิ ดจะมีเครือ
่ งหมาย
slash(/) เช่น <title>…</title> กรณีทม
ี่ ี tag
ซ้อนกันให้ปิ ดแท็กในสุดกอนแล
วไล
ปิ่ ด
่
้
ตามลาดับ
 บางแท็กก็ไมต
ดก็ได้ <br>
่ องปิ
้
 HTML จะเขียนตัวใหญหรื
่ อเล็กก็ได้ แต่
XHTML ตัวใหญตั
น
่ วเล็กตางกั
่

+
โครงสรางของ
HTML
้
+
โครงสรางของ
HTML
้
<html>….</html> tag แรกทีต
่ องมี
้
ในภาษา html บงบอกว
าเป็
่
่ นเอกสาร
html อยูที
่ ุดเริม
่ และสุดทายของ
่ จ
้
เอกสาร

<head>…..</head> กาหนด
รายละเอียดหัวเอกสาร HTMl เช่น
กาหนดชือ
่ เว็บเพจ <title>…</title>
กาหนดรูปแบบสไตลซี
์ ท

+
เครือ
่ งมือทีใ่ ช้สรางเอกสาร
้
HTML
เนื่่องจาก html เป็ นการเขียน
รูปแบบ ASCII text ธรรมดา จึง
สามารถใช้โปรแกรม Text Editor
ทัว่ ไปได้ เช่น Notepad และ
EditPlus

นอกจากนี้ยงั มีโปรแกรม web editor
ทีส
่ ามารถแปลง graphic ให้เป็ นภาษา
HTML เช่น Frontpage,

+
สรางเว็
บเพจงายๆ
ดวย
้
่
้
Notepad
+
HTML and XHTML
XHTML (ยอมาจาก
Extensible Hyper Text Markup
่
Language)
เป็ นภาษาประเภท Markup Language ทีเ่ กิดจากการนา
XML และ HTML มารวมกัน กลายเป็ นมาตรฐานใหมของ
่
HTML คาสั่ งตางๆนั
้นก็ยงั เหมือนกับ HTML แตจะมี
ความ
่
่
เขมงวดในเรื
อ
่ งโครงสรางภาษามากกว
า่ และมีการตัด tag
้
้
และ attribute ทีล
่ าสมั
ยออกไป
้
และเนื่องจาก html มีขอเสี
้ ยในการแสดงผลใน brownser
ตางๆ
อาจไมเหมื
อนกัน เช่น เว็บไซตที
่ อกแบบอาจแสดงผล
่
่
์ อ
ออกมาสวยงามใน IE แตไม
ใน
่ สามารถแสดงผลสวยงามได
่
้
browser อืน
่ ๆ W3C จึงพัฒนา HTML4.0 โดยปรับปรุง
ใหม่ ให้เป็ นมาตรฐานมากยิง่ ขึน
้ เพือ
่ เป็ นแนวทางให้
+
ขอแตกต
างระหว
าง
html
้
่
่
คาของ
attribute ตองอยู
ในเครื
อ
่ งหมาย
่ xhtml
้
่
และ
".." เสมอ
ใช้
attribute id แทน attribute name
+
ขอแตกต
างระหว
าง
html
้
่
่
ทุก XHTML
element ตองท
าการปิ ดให้
้
และ
xhtml
เรียบรอย ไมเวนแมแต element ทีไ่ มมี
้
่ ้
้ ่
่ tag
ปิ ด เช่น <br> จะตองท
าการปิ ด โดยใช้
้
เครือ
่ งหมาย ' /' เป็ น <br /> เป็ นตน
้
+
ขอแตกต
างระหว
าง
html
้
่
่
และ xhtml
ทุก
XHTML element ตองเขี
ยน tag,
้
attribute และคาของ
attribute ดวยตั
วพิมพ ์
่
้
เล็ก
+
ขอแตกต
างระหว
าง
html
้
่
่
และ xhtml
เอกสาร
XHTML จะตองประกาศ
้
DOCTYPE และจะตองมี
element html,
้
head, title และ body/frame อยางครบถ
วน
่
้
เสมอ
+
Document Type
Definitions
Type Definition (DTD) คือ ตัวกาหนด
โครงสรางของเอกสาร
ไมว่ าจะเป็
นเอกสาร HTML หรือ
้
่
XHTML หรือ XML ก็ตองมี
DTD ดวยกั
นทัง้ นั้น แตใน
้
้
่
HTML นั้นไมได
Doctype
่ บั
้ งคับวาต
่ องประกาศ
้
 Document
 การประกาศ
<!DOCTYPE> ก็เพือ
่ บอกให้เว็บเบราเซอร ์์
ทราบวา่ เว็บเพจของเราใช้ภาษา HTML หรือ XHTML
และคาสั่ ง HTML/XHTML ทีใ่ ช้เป็ นรุนใด
และบอกชนิด
่
ของเอกสาร (Document Type Definition : DTD) ทีใ่ ช้
ซึง่ จะช่วยให้เว็บเบราเซอรแปลเอกสารได
อย
กตอง
้ างถู
่
้
์
 สามารถตรวจสอบความถูกตองของค
าสั่ งในเอกสาร
้
XHTML วาถู
หรื
่ กตองตามกฏเกณฑ
้
์ อไม่ ตาม DTD ทีร่ ะบุ
ไวในแถวแรกของเอกสาร
ที่ http://validator.w3.org
้
+
Document Type
Definitions
+
Document Type
Definitions