Session1 part2

Orjix

www.RongRean.com

หลกสตร สรางเวบดวย HTML: Session ท 1 ตอนท 2

www.rongrean.com Orjix

Contentsรจกกบ html1

ลกษณะของภาษา html2

โครงสรางพนฐานของ html3

เครองมอทใชสรางเอกสาร html 4

Eclipse เครองมอทโปรแกรมเมอรเลอกใช

5

รจกกบภาษา xhtml6

รจกกบ htmlHTML ยอมาจาก Hypertext markup

Languageเปนภาษาหลกทใชในการสรางเวบเพจ โดยมแนวคดมากจากเอกสารไฮเปอรเทกซ ซงขอความในเอกสารเชอมโยงถงขอมลอนๆได

ลกษณะของภาษา HTMLภาษา HTML แบงไดเปน 2 สวนคอ สวนเปนขอความทวๆไป และสวนทเปนคำาสงทใชในการกำาหนดรปแบบของขอความทแสดงเรยกวา Tag

<h1> this is tag </h1>รปแบบของ tag จะแยกเปนสองสวนคอ “tag เปด” และ “tag ปด”


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


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


HTML Attributes โดยปกตแลวเกอบทก HTML Elements จะม Attributes Attribute ใชสำาหรบกำาหนดขอมลเพมเตมใหกบ HTML

Elements (Tag) Attribute จะถกกำาหนดภายใน start tag เสมอ Attribute จะถกกำาหนดอยในรปของ name/value pair

เชน name=“value”<hr width=“300”>


โครงสรางพนฐานของ html


<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 ตางๆในการทำางานมากมาย

เครองมอทใชสรางเอกสาร htmlในการสรางเวบเพจดวย HTML นน

เราจะใชเครองมอทเรยกวา Text Editor ซงเปนโปรแกรมทใชแกไขขอความ เชน notepad, crimson editor, notepad++และ dreamweaver

ทดลองเขยนเวบเพจแรกดวยภาษา HTML


แนะนำาเครองมอท Programmer ตวจรงใช

Eclipse IDE (Integrated Development Environment) เปนโปรแกรมฟรใชสำาหรบการพฒนา Software หรอ เวบไชต ม Function: Code Auto completion ทำาใหไมตองจำารป

แบบคำาสงทงหมด Home Page: http://www.eclipse.org http://www.eclipse.org/downloads/

download.php?file=/technology/epp/downloads/release/galileo/R/eclipse-jee-galileo-win32.zip


รจกกบภาษา 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 ใชตวเลกเสมอ


W3schools.com: Online Web Tutorials

http://www.w3schools.com/html/default.asp

เปนเวบไชตรวบรวมเอาชดคำาสงและคณสมบตทงหมดของภาษา HTML มเครองมอทสามารถใชทดสอบวาแตละคำาสง HTML ทำางานอยางไร


Education

Session1 part2