Session1 part2

997 views

Published on

Published in: Self Improvement
  • Be the first to comment

  • Be the first to like this

Session1 part2

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

×