C:\fakepath\session1 part2

$: C:\fakepath\session1 part2$
Orjix

www.RongRean.com

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

www.rongrean.com Orjix

Contents

ร�จั�กก�บ html1

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

โครงสูรางพื้!"นฐานของ html3

เคร!�องมื!อที่��ใช้สูรางเอกสูาร html 4

Eclipse เคร!�องมื!อที่��โปรแกรมืเมือร)เลั!อกใช้

5

ร�จั�กก�บภาษา xhtml6

ร�จั�กก�บ html

HTML ย*อมืาจัาก Hypertext markup Languageเป็�นภาษาหลักที่ �ใช้�ในการสร�างเว็�บเพจ โดยมี แนว็คิ!ดมีากจากเอกสารไฮเป็อร%เที่�กซ์% ซ์'�งข้�อคิว็ามีในเอกสารเช้)�อมีโยงถึ'งข้�อมี+ลัอ)�นๆได�

ลั�กษณะของภาษา HTMLภาษา HTML แบ-งได�เป็�น 2 ส-ว็นคิ)อ ส-ว็นเป็�นข้�อคิว็ามีที่�ว็ๆไป็ แลัะส-ว็นที่ �เป็�นคิ/าส�งที่ �ใช้�ในการก/าหนดร+ป็แบบข้องข้�อคิว็ามีที่ �แสดงเร ยกว็-า Tag

<h1> this is tag </h1>ร+ป็แบบข้อง tag จะแยกเป็�นสองส-ว็นคิ)อ “tag เป็0ด” แลัะ “tag ป็0ด”


HTML Elements (ค+าสู��ง HTML หร!อ Tag)

เร!�มีด�ว็ย start tag / opening tag / tag เป็0ด ลังที่�ายด�ว็ย end tag / closing tag / tag ป็0ด Element content ส-ว็นข้�อคิว็ามีตรงกลัางหร)อช้2ดคิ/าส�งที่2ก

อย-างที่ �อย+-ระหว็-าง start tag แลัะ end tag บาง HTML Element (Tag) ไมี-มี ส-ว็นตรงกลัาง ซ์'�งเราเร ยน

กว็-า empty element / empty tag Empty element ถึ+กป็0ดในส-ว็นข้อง start tag เช้-น

<br /> HTML Elements ส-ว็นมีากจะมี attribute


HTML Elements (ค+าสู��ง HTML หร!อ Tag)

เร!�มีด�ว็ย start tag / opening tag / tag เป็0ด ลังที่�ายด�ว็ย end tag / closing tag / tag ป็0ด Element content ส-ว็นข้�อคิว็ามีตรงกลัางหร)อช้2ดคิ/าส�งที่2ก

อย-างที่ �อย+-ระหว็-าง start tag แลัะ end tag บาง HTML Element (Tag) ไมี-มี ส-ว็นตรงกลัาง ซ์'�งเราเร ยน

กว็-า empty element / empty tag Empty element ถึ+กป็0ดในส-ว็นข้อง start tag เช้-น <br /> HTML Elements ส-ว็นมีากจะมี attribute Complete HTML References:

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


HTML Attributes

โดยป็กต!แลั�ว็เก)อบที่2ก 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> : ป็ระกาศให�ร+ �ว็-าเป็�นจ2ดเร!�มีข้องเว็�บเพจ

<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 ที่/าให�ไมี-ต�องจ/าร+ป็

แบบคิ/าส�งที่8งหมีด 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


ร�จั�กก�บภาษา xhtml

XHTML เป-นภาษามืาตราฐานใหมื*ที่��มืาแที่น HTMLเน)�องจาก xhtml จะลับจ2ดอ-อนหลัายๆอย-างข้อง html ลังเช้-น

คิว็ามีแน-นอนข้องร+ป็แบบภาษา เช้-น ข้'8นเต)อนเมี)�อใส- tag ไมี-เป็�นไป็ตามีลั/าดบ<b><u> this is text </b></u>

ภาษา html ในกรณ แรกน 8จะไมี-ข้'8นเต)อนข้�อผ!ดพลัาด ซ์'�งคิว็ามีจร!งคิว็รจะเป็�นแบบน 8<b><u> this is text </u></b>

กฎที่ �ส/าคิญในการเข้ ยน XHTML คิ/าส �งต�องเร!�มีด�ว็ย “Tag เป็0ด” แลัะ ป็0ดที่�ายด�ว็ย “Tag ป็0ด” เสมีอ การใช้�คิ/าส �งซ์�อนที่บกน ต�องจดลั/าดบให�ถึ+กต�องเสมีอ “มีาที่ หลังป็0ดก-อน มีาก-อน

ป็0ดที่ หลัง” ในกรณ ที่ �คิ/าส �ง ไมี-มี ส-ว็น Body ( หร)อส-ว็นเน)8อหาตรงกลัาง เช้-น คิ/าส �ง br) ให�

ลังที่�ายด�ว็ย “/>” ตว็อย-าง <br/> <hr/> คิ-าข้องคิ2ณสมีบต!ข้อง Tag ( ที่ �เราเร ยกว็-า Attribute ) ต�องเร!�มีด�ว็ยเคิร)�องหมีาย

“ แลัะป็0ดด�ว็ยเคิร)�องหมีาย “ เสมีอ เช้-น <hr width=“600”/> ช้)�อ Tag แลัะ Attribute ใช้�ตว็เลั�กเสมีอ


W3schools.com: Online Web Tutorials

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

เป็�นเว็�บไช้ต%รว็บรว็มีเอาช้2ดคิ/าส�งแลัะคิ2ณสมีบต!ที่8งหมีดข้องภาษา HTML มี เคิร)�องมี)อที่ �สามีารถึใช้�ที่ดสอบว็-าแต-ลัะคิ/าส�ง HTML ที่/างานอย-างไร


C:\fakepath\session1 part2

Documents

Transcript of C:\fakepath\session1 part2