Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Session1 part2

686 views

Published on

html 2

  • Be the first to comment

  • Be the first to like this

Session1 part2

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

×