Embed Size (px)
Citation preview
Orjix
www.RongRean.com
หลั�กสู�ตร สูรางเว็�บด้ว็ย HTML: Session ที่�� 1 ตอนที่�� 2HTML แลัะXHTML
www.rongrean.com Orjix
Contents
ร�จั�กก�บ html1
ลั�กษณะของภาษา html2
โครงสูรางพื้"#นฐานของ html3
เคร"�องมื"อที่��ใช้สูรางเอกสูาร html 4
Eclipse เคร"�องมื"อที่��โปรแกรมืเมือร)เลั"อกใช้
5
ร�จั�กก�บภาษา xhtml6
Orjix
ร�จั�กก�บ html
HTML ย*อมืาจัาก Hypertext markup Language
เป็�นภาษาหลักที่ �ใช้�ในการสร�างเว็�บเพจ โดยมี แนว็คิ ดมีากจากเอก สารไฮเป็อร$เที่�กซ์$ ซ์&�งข้�อคิว็ามีในเอกสารเช้(�อมีโยงถึ&งข้�อมี*ลัอ(�นๆได�
ลั�กษณะของภาษา HTML ภาษา HTML แบ,งได�เป็�น 2 ส,ว็นคิ(อ ส,ว็นเป็�นข้�อคิว็ามีที่�ว็ๆไป็ แลัะ
ส,ว็นที่ �เป็�นคิ.าส�งที่ �ใช้�ในการก.าหนดร*ป็แบบข้องข้�อคิว็ามีที่ �แสดงเร ยก ว็,า Tag
<h1> this is tag </h1> ร*ป็แบบข้อง tag “จะแยกเป็�นสองส,ว็นคิ(อ tag เป็/ด” “แลัะ tag
ป็/ด”
www.rongrean.com
Orjix
HTML Elements (ค+าสู��ง HTML หร"อ Tag)
เร �มีด�ว็ย start tag / opening tag / tag เป็/ด ลังที่�ายด�ว็ย end tag / closing tag / tag ป็/ด Element content ส,ว็นข้�อคิว็ามีตรงกลัางหร(อช้1ดคิ.าส�งที่1ก
อย,างที่ �อย*,ระหว็,าง start tag แลัะ end tag บาง HTML Element (Tag) ไมี,มี ส,ว็นตรงกลัาง ซ์&�งเราเร ยน
กว็,า empty element / empty tag Empty element ถึ*กป็/ดในส,ว็นข้อง start tag เช้,น
<br /> HTML Elements ส,ว็นมีากจะมี attribute
www.rongrean.com
Orjix
HTML Elements (ค+าสู��ง HTML หร"อ Tag)
เร �มีด�ว็ย start tag / opening tag / tag เป็/ด ลังที่�ายด�ว็ย end tag / closing tag / tag ป็/ด Element content ส,ว็นข้�อคิว็ามีตรงกลัางหร(อช้1ดคิ.าส�งที่1ก
อย,างที่ �อย*,ระหว็,าง start tag แลัะ end tag บาง HTML Element (Tag) ไมี,มี ส,ว็นตรงกลัาง ซ์&�งเราเร ยน
กว็,า empty element / empty tag Empty element ถึ*กป็/ดในส,ว็นข้อง start tag เช้,น
<br /> HTML Elements ส,ว็นมีากจะมี attribute Complete HTML References:
http://www.w3schools.com/tags/default.asp
www.rongrean.com
Orjix
HTML Attributes
โดยป็กต แลั�ว็เก(อบที่1ก HTML Elements จะมี Attributes Attribute ใช้�ส.าหรบก.าหนดข้�อมี*ลัเพ �มีเต มีให�กบ HTML
Elements (Tag) Attribute จะถึ*กก.าหนดภายใน start tag เสมีอ Attribute จะถึ*กก.าหนดอย*,ในร*ป็ข้อง name/value pair
เช้,น name=“value”<hr width=“300”>
www.rongrean.com
Orjix
โครงสูรางพื้"#นฐานของ html
www.rongrean.com
<html><head>
<title> น��ค"อ title </title></head><body>
<h1>Header</h1><p>First Paragraph</p><p>Second Paragraph</p>
</body></html>
<html> : ป็ระกาศให�ร* �ว็,าเป็�นจ1ดเร �มีข้องเว็�บเพจ
<head>: ส,ว็นหว็ข้องหน�าเว็�บเพจ เป็�นส,ว็นที่ �ป็ระกาศ ลักษณะโดยรว็มีข้องเว็�บเพจไว็� เช้,น ช้(�อข้อง หน�าเว็�บ หร(อคิ.าคิ�นต,างๆ โดยป็ระกาศไว็�ใน tag <meta>
<title> : เป็�นส,ว็นช้(�อข้องหน�าเว็�บเพจ<body>: เป็�นส,ว็นหลักในการแสดงผลั
หน�าเว็�บเพจ ป็ระกอบไป็ด�ว็ย tag ต,างๆในการที่.างานมีากมีาย
Orjix
เคร"�องมื"อที่��ใช้สูรางเอกสูาร html
ในการสูรางเว็�บเพื้จัด้ว็ย HTML น�#น เราจะใช้�เคิร(�องมี(อที่ �เร ยกว็,า Text Editor ซ์&�งเป็�นโป็รแกรมีที่ �ใช้�
แก�ไข้ข้�อคิว็ามี เช้,น notepad, crimson editor, notepad++ แลัะ dreamweaver
ที่ด้ลัองเข�ยนเว็�บเพื้จัแรกด้ว็ยภาษา HTML
www.rongrean.com
แนะน+าเคร"�องมื"อที่�� Programmer ต�ว็จัร,งใช้Eclipse IDE (Integrated Development
Environment) เป็�นโป็รแกรมีฟร ใช้�ส.าหรบการพฒนา Software หร(อ เว็�บไช้ต$ มี Function: Code Auto completion ที่.าให�ไมี,ต�องจ.าร*ป็
แบบคิ.าส�งที่8งหมีด Home Page: http://www.eclipse.org http://www.eclipse.org/downloads/download.ph
p?file=/technology/epp/downloads/release/galileo/R/eclipse-jee-galileo-win32.zip
www.rongrean.com Orjix
Orjix
ร�จั�กก�บภาษา xhtml
XHTML เป-นภาษามืาตราฐานใหมื*ที่��มืาแที่น HTML เน(�องจาก xhtml จะลับจ1ดอ,อนหลัายๆอย,างข้อง html ลังเช้,น
คิว็ามีแน,นอนข้องร*ป็แบบภาษา เช้,น ข้&8นเต(อนเมี(�อใส, tag ไมี,เป็�นไป็ตามีลั.าดบ<b><u> this is text </b></u>
ภาษา html ในกรณ แรกน 8จะไมี,ข้&8นเต(อนข้�อผ ดพลัาด ซ์&�งคิว็ามีจร งคิว็รจะเป็�นแบบน 8
<b><u> this is text </u></b> กฎที่ �ส.าคิญในการเข้ ยน XHTML
“คิ.าส�งต�องเร �มีด�ว็ย Tag เป็/ด” “แลัะ ป็/ดที่�ายด�ว็ย Tag ป็/ด” เสมีอ “การใช้�คิ.าส�งซ์�อนที่บกน ต�องจดลั.าดบให�ถึ*กต�องเสมีอ มีาที่ หลังป็/ดก,อน
มีาก,อนป็/ดที่ หลัง” ในกรณ ที่ �คิ.าส�ง ไมี,มี ส,ว็น Body ( หร(อส,ว็นเน(8อหาตรงกลัาง เช้,น คิ.าส�ง
br) “ให�ลังที่�ายด�ว็ย />” ตว็อย,าง <br/> <hr/> คิ,าข้องคิ1ณสมีบต ข้อง Tag ( ที่ �เราเร ยกว็,า Attribute ) ต�องเร �มีด�ว็ย
“ “ เคิร(�องหมีาย แลัะป็/ดด�ว็ยเคิร(�องหมีาย เสมีอ เช้,น <hr width=“600”/>
ช้(�อ Tag แลัะ Attribute ใช้�ตว็เลั�กเสมีอwww.rongrean.com
Orjix
W3schools.com: Online Web Tutorials
http://www.w3schools.com/html/default.asp เป็�นเว็�บไช้ต$รว็บรว็มีเอาช้1ดคิ.าส�งแลัะคิ1ณสมีบต ที่8งหมีดข้องภาษา HTML มี เคิร(�องมี(อที่ �สามีารถึใช้�ที่ดสอบว็,าแต,ลัะคิ.าส�ง HTML ที่.างานอย,างไร
www.rongrean.com
