2. www.rongrean.com Orjix Contents 1 รู้จักกับ html 2 ลักษณะของภาษา html 3 โครงสร้างพื้นฐานของ html 4 เครื่องมือที่ใช้สร้างเอกสาร html 5 Eclipse เครื่องมือที่โปรแกรมเมอร์เลือกใช้ 6 รู้จักกับภาษา xhtml
3. รู้จักกับ html HTML ย่อมาจาก Hypertext markup Language เป็นภาษาหลักที่ใช้ในการสร้างเว็บเพจ โดยมีแนวคิดมากจากเอกสารไฮเปอร์เท็กซ์ ซึ่งข้อความในเอกสารเชื่อมโยงถึงข้อมูลอื่นๆได้ ลักษณะของภาษา HTML ภาษา HTML แบ่งได้เป็น 2 ส่วนคือ ส่วนเป็นข้อความทั่วๆไป และส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของข้อความที่แสดงเรียกว่า Tag <h1> this is tag </h1> รูปแบบของ tag จะแยกเป็นสองส่วนคือ “tag เปิด”และ “tag ปิด” www.rongrean.com Orjix
4. 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
5. 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
6. 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
8. เครื่องมือที่ใช้สร้างเอกสาร html ในการสร้างเว็บเพจด้วย HTML นั้น เราจะใช้เครื่องมือที่เรียกว่า Text Editor ซึ่งเป็นโปรแกรมที่ใช้แก้ไขข้อความ เช่น notepad, crimson editor, notepad++และ dreamweaver ทดลองเขียนเว็บเพจแรกด้วยภาษา HTML www.rongrean.com Orjix
9. แนะนำเครื่องมือที่ 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 www.rongrean.com Orjix
10. รู้จักกับภาษา xhtml XHTML เป็นภาษามาตราฐานใหม่ที่มาแทน 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
11. W3schools.com: Online Web Tutorials http://www.w3schools.com/html/default.asp เป็นเว็บไชต์รวบรวมเอาชุดคำสั่งและคุณสมบัติทั้งหมดของภาษา HTML มีเครื่องมือที่สามารถใช้ทดสอบว่าแต่ละคำสั่ง HTML ทำงานอย่างไร www.rongrean.com Orjix
