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
รจกกบ htmlHTML ยอมาจาก 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 สวนขอความตรงกลางหรอชดคำาสงทก
อยางทอยระหวาง 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 สวนขอความตรงกลางหรอชดคำาสงทก
อยางทอยระหวาง 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 โดยปกตแลวเกอบทก 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> : ประกาศใหรวาเปนจดเรมของเวบเพจ
<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 ทำาใหไมตองจำารป
แบบคำาสงทงหมด 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
รจกกบภาษา xhtmlXHTML เปนภาษามาตราฐานใหมทมาแทน HTML
เนองจาก xhtml จะลบจดออนหลายๆอยางของ html ลงเชน ความแนนอนของรปแบบภาษา เชน ขนเตอนเมอใส tag ไมเปนไปตามลำาดบ
<b><u> this is text </b></u> ภาษา html ในกรณแรกนจะไมขนเตอนขอผดพลาด ซงความจรงควรจะเปนแบบน
<b><u> this is text </u></b> กฎทสำาคญในการเขยน XHTML
“คำาสงตองเรมดวย Tag เปด” “และ ปดทายดวย Tag ปด” เสมอ “การใชคำาสงซอนทบกน ตองจดลำาดบใหถกตองเสมอ มาทหลงปดกอน
มากอนปดทหลง” ในกรณทคำาสง ไมมสวน Body ( หรอสวนเนอหาตรงกลาง เชน คำาสง
br) “ใหลงทายดวย />” ตวอยาง <br/> <hr/> คาของคณสมบตของ Tag ( ทเราเรยกวา Attribute ) ตองเรมดวย
“ “ เครองหมาย และปดดวยเครองหมาย เสมอ เชน <hr width=“600”/>
ชอ Tag และ Attribute ใชตวเลกเสมอwww.rongrean.com
Orjix
W3schools.com: Online Web Tutorials
http://www.w3schools.com/html/default.asp เปนเวบไชตรวบรวมเอาชดคำาสงและคณสมบตทงหมดของภาษา HTML มเครองมอทสามารถใชทดสอบวาแตละคำาสง HTML ทำางานอยางไร
www.rongrean.com
