Session1Part2.pptx

Orjix
www.RongRean.com
หลักสูตร สร้างเว็บด้วย HTML: Session ที่ 1 ตอนที่ 2

www.rongrean.com Orjix
Contents
รู้จักกับ html
1
ลักษณะของภาษา html
2
โครงสร้างพื้นฐานของ html
3
เครื่องมือที่ใช้สร้างเอกสาร html
4
Eclipse เครื่องมือที่โปรแกรมเมอร์เลือกใช้
5
รู้จักกับภาษา xhtml
6

รู้จักกับ html
HTML ย่อมาจาก 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/r
elease/galileo/R/eclipse-jee-galileo-win32.zip

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

W3schools.com: Online Web Tutorials
http://www.w3schools.com/html/default.asp
 เป็นเว็บไชต์รวบรวมเอาชุดคาสั่งและคุณสมบัติทั้งหมดของภาษาHTML
 มีเครื่องมือที่สามารถใช้ทดสอบว่าแต่ละคาสั่งHTML ทางานอย่างไร

Session1Part2.pptx

Recommended

Recommended

More Related Content

More from pinglada1

More from pinglada1 (20)

Session1Part2.pptx