html เบื้องต้น

+

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) ม3*งห์วั�งให์�สามารถึเป4ด้แสด้งผลก�บื้บื้ราวัเซอร�ที่ !ใช�งานที่�!วัไป

+ควัามเป�นมาของ HTMLMakeup L HTML 3.0 ในป. 1995 ย�งม การพั�ฒนา HTML เพั�!มการที่#าต้าราง ปร�บื้ข�อควัามรอบื้ภาพั และช*วัยให์�บื้ราวัเซอร�ย�อนกล�บื้ไปด้)เวั7บื้เพัจึห์น�าที่ !เคยชมก*อนได้�ด้ กวั*าเวัอร�ช� !น 2.0

HTML 3.2 ในป. 1996 เพั�!ม element และ attribute ที่ !ที่#างานร*วัมก�บื้บื้ราวัเซอร�ห์ลายๆต้�วัมากข(�น

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

+ควัามเป�นมาของ HTMLMakeup L HTML 4.1 W3C ห์ย3ด้พั�ฒนา HTML เปล !ยนมา

เป�นภาษามาต้รฐานให์ม* XHTML เพั�!อขยายการใช�เวั7บื้ไปส)*อ3ปกรณ์�ต้*างๆมากข(�น แต้*ย�งคงให์�ม การแสด้งผล HTML ได้�เห์ม�อนเด้�ม

HTML 5.0 ในป. 2012 W3C และ WHATWG ได้�พั�ฒนาภาษาที่ !สามารถึใช�งานได้�ที่3กแพัล7ต้ฟอร�ม และย�งสามารถึอ�างถึ(งเที่คโนโลย ต้*างๆและAPI อ�!นๆได้� ที่#าให์�การที่#างานของ HTML เห์มาะก�บื้การที่#า application และงาน multimedia มากข(�น

+ล�กษณ์ะของ HTML ค#าส�!งของภาษา html จึะเร ยกวั*า แที่7ก (tag) โด้ยค#า

ส�!งแต้*ละต้�วัจึะอย)*ภายในเคร�!องห์มาย < และ >

ห์ล�กการเข ยน tag html tag จึะแยกเป�น 2 ส*วัน แที่7กเป4ด้และแที่7กป4ด้ โด้ยส*วันของ

แที่7กป4ด้จึะม เคร�!องห์มาย slash(/) เช*น <title>…</title> กรณ์ ที่ !ม tag ซ�อนก�นให์�ป4ด้แที่7กในส3ด้ก*อนแล�วัไล*ป4ด้ต้ามล#าด้�บื้

บื้างแที่7กก7ไม*ต้�องป4ด้ก7ได้� <br> HTML จึะเข ยนต้�วัให์ญ่*ห์ร�อเล7กก7ได้� แต้* XHTML ต้�วัให์ญ่*

ต้�วัเล7กต้*างก�น บื้างแที่7กจึะม ต้�วัก#าห์นด้ค3ณ์สมบื้�ต้� (attribute) จึะเข ยนไวั�

ห์ล�กแที่7กเช*น <hr width=600 size=5>

+โครงสร�างของ HTML

+โครงสร�างของ HTML

<html>….</html> tag แรกที่ !ต้�องม ในภาษา html บื้*งบื้อกวั*าเป�นเอกสาร html อย)*ที่ !จึ3ด้เร�!มและส3ด้ที่�ายของเอกสาร

<head>…..</head> ก#าห์นด้รายละเอ ยด้ห์�วัเอกสาร HTMl เช*น ก#าห์นด้ช�!อเวั7บื้เพัจึ <title>…</title> ก#าห์นด้ร)ปแบื้บื้สไต้ล�ซ ที่

<body>….</body> ส*วันที่ !เป�นเน��อห์าของเวั7บื้เพัจึ

+เคร�!องม�อที่ !ใช�สร�างเอกสาร HTML เน�!*องจึาก html เป�นการเข ยนร)ปแบื้บื้ ASCII text ธรรมด้า จึ(งสามารถึใช�โปรแกรม Text Editor ที่�!วัไปได้� เช*น Notepad และ EditPlus

นอกจึากน �ย�งม โปรแกรม web editor ที่ !สามารถึแปลง graphic ให์�เป�นภาษา HTML เช*น Frontpage, Dreamweaver, และ MUSE เป�นต้�น

+สร�างเวั7บื้เพัจึง*ายๆ ด้�วัย Notepad

+HTML and XHTML

XHTML (ย*อมาจึาก Extensible Hyper Text Markup Language)

เป�นภาษาประเภที่ Markup Language ที่ !เก�ด้จึากการน#า XML และ HTML มารวัมก�น กลายเป�นมาต้รฐานให์ม*ของ HTML ค#าส� !งต้*างๆน��นก7ย�งเห์ม�อนก�บื้ HTML แต้*จึะม ควัามเข�มงวัด้ในเร�!องโครงสร�างภาษามากกวั*า และม การต้�ด้ tag และ attribute ที่ !ล�าสม�ยออกไปและเน�!องจึาก html ม ข�อเส ยในการแสด้งผลใน brownser ต้*างๆ อาจึไม*เห์ม�อนก�น เช*น เวั7บื้ไซต้�ที่ !ออกแบื้บื้อาจึแสด้งผลออกมาสวัยงามใน IE แต้*ไม*สามารถึแสด้งผลสวัยงามได้�ใน browser อ�!นๆ W3C จึ(งพั�ฒนา HTML4.0 โด้ยปร�บื้ปร3งให์ม* ให์�เป�นมาต้รฐานมากย�!งข(�น เพั�!อเป�นแนวัที่างให์� browser ต้*างๆได้�พั�ฒนาโปรแกรมไปในแนวัที่างเด้ ยวัก�น

+ ข�อแต้กต้*างระห์วั*าง html และ xhtml

ค*าของ attribute ต้�องอย)*ในเคร�!องห์มาย ".." เสมอ

ใช� attribute id แที่น attribute name


ที่3ก XHTML element ต้�องที่#าการป4ด้ให์�เร ยบื้ร�อย ไม*เวั�นแม�แต้* element ที่ !ไม*ม tag ป4ด้ เช*น <br> จึะต้�องที่#าการป4ด้ โด้ยใช�เคร�!องห์มาย ' /' เป�น <br /> เป�นต้�น


ที่3ก XHTML element ต้�องเข ยน tag, attribute และค*าของ attribute ด้�วัยต้�วัพั�มพั�เล7ก


เอกสาร XHTML จึะต้�องประกาศ DOCTYPE และจึะต้�องม element html, head, title และ body/frame อย*างครบื้ถึ�วันเสมอ

+Document Type Definitions Document Type Definition (DTD) ค�อ ต้�วัก#าห์นด้โครงสร�างของ

เอกสาร ไม*วั*าจึะเป�นเอกสาร HTML ห์ร�อ XHTML ห์ร�อ XML ก7ต้�องม DTD ด้�วัยก�นที่��งน��น แต้*ใน HTML น��นไม*ได้�บื้�งค�บื้วั*าต้�องประกาศ Doctype

การประกาศ <!DOCTYPE> ก7เพั�!อบื้อกให์�เวั7บื้เบื้ราเซอร�?ที่ราบื้วั*า เวั7บื้เพัจึของเราใช�ภาษา HTML ห์ร�อ XHTML และค#าส� !ง HTML/XHTML ที่ !ใช�เป�นร3 *นใด้ และบื้อกชน�ด้ของเอกสาร (Document Type Definition : DTD) ที่ !ใช� ซ(!งจึะช*วัยให์�เวั7บื้เบื้ราเซอร�แปลเอกสารได้�อย*างถึ)กต้�อง

สามารถึต้รวัจึสอบื้ควัามถึ)กต้�องของค#าส� !งในเอกสาร XHTML วั*าถึ)กต้�องต้ามกฏเกณ์ฑ์�ห์ร�อไม* ต้าม DTD ที่ !ระบื้3ไวั�ในแถึวัแรกของเอกสาร ที่ ! http://validator.w3.org

+Document Type Definitions

html เบื้องต้น

Documents