HTML H yper T ext M arkup L anguage

HTMLHTMLHHyperyperTText ext MMarkup arkup LLanguageanguage

1

วิ�ชา การเขียนโปรแกรมบนเวิ�บ (Web Programming)

ความหมายของ HTML

• HTML หรื�อ HyperT ext M arkupLanguage เป็�นภาษาคอมพิ�วเตอรื�รื�ป็แบบหน��ง ที่��ม�โครืงสรื างการืเข�ยนโดยอาศั$ยต$วก%าก$บ

(Tag) ควบค&มการืแสดงผลข อความ , รื�ป็ภาพิ หรื�อว$ตถุ&อ��นๆ ผ+านโป็รืแกรืมบรืาวเซอรื�

• แต+ละ Tag อาจจะม�ส+วนขยายที่��เรื�ยกว+า Attribute ส%าหรื$บรืะบ& หรื�อควบค&มการืแสดงผล ของเว/บได ด วย

• HTML เป็�นภาษาที่��ถุ�กพิ$ฒนาโดย World WideWeb Consor t i um( W3 C )

2

• Tag เป็�นส$ญล$กษณ์�ที่��บอกให Browser แสดงผลในรื�ป็แบบใด –ชื่��อ Tag จะอย�+ในครื��องหมาย < > เชื่+น <body>–แบ+งเป็�น 2 ป็รืะเภที่ค�อ• Tag เดี่�ยวิ เป็�น Tag ที่��ไม+ต องม�การืป็6ดรืห$ส เชื่+น <HR>,

<BR> เป็�นต น• Tag เป�ดี่/ป�ดี่ เป็�น Tag ที่��ป็รืะกอบด วย Tag เป็6ด และ

Tag ป็6ด โดย Tag ป็6ด จะม�เครื��องหมาย S lash ( / ) น%าหน าค%าส$�งใน Tag น$7นๆ เชื่+น –<B>…</B>– <BLINK>…</BLINK> เป็�นต น

องค�ป็รืะกอบของ HTML

• Attribute เป็�นส+วนขยายความสามารืถุของ Tag น$7นๆ จะต องใส+ภายในเครื��องหมาย < > ในส+วน Tag เป็6ดเที่+าน$7น• Tag ค%าส$�ง HTML แต+ละค%าส$�ง จะม� Attribute แตกต+างก$น

ไป็ ม�จ%านวนไม+เที่+าก$น การืรืะบ& Attribute มากกว+า 1 Attrib ute ให ใชื่ ชื่+องว+างเป็�นต$วค$�น

–โดยจะเข�ยนไว ใน Tag เป็6ด เชื่+น <h1 align = “right”>, align = “right” ค�อ Attribute– เชื่+น Attributes ของ Tag เก��ยวก$บการืจ$ดพิารืากรืาฟ ค�อ <P> ป็รืะกอบ

ด วย ALIGN="Left/Right/Center" ซ��งสามารืถุเข�ยนได ด$งน�7 <P ALIGN="Left">...</P> หรื�อ <P ALIGN="Right">...</P>


• Content ค�อเน�7อหาที่��ต องการืให แสดงบนหน าเว/บ –เชื่+น <h1>My homepage</h1>, My

homepage ค�อ Content

• Element ค�อชื่&ดของ Tag เรื��มต$7งแต+เครื��องหมาย Tag เป็6ด ไป็จนกรืะที่$�ง Tag ป็6ด ซ��งรืวมที่$7ง Attribute และ Content ด วย


<html><head>

<title>NPRU Travel</title></head><body>

<p align="center"> มหาว�ที่ยาล$ยเที่คโนโลย�รืาชื่มงคลล านนา </p> </body>

</html>

Tag เป็6ดTag เป็6ด

Tag ป็6ดTag ป็6ด

element

element

content

content


การืเข�ยน HTML ต องค%าน�งถุ�งไวยากรืณ์� (Syntax ) ด$งต+อไป็น�7• Tag ต องล อมรือบด วยเครื��องหมายน�7 < >• ในวงเล/บ <Tag> Tag จะต องพิ�มพิ�ต�ดก$บ < ม�ฉะน$7น

Web browser จะไม+สามารืถุแป็ลภาษาได • Tag ใชื่ ต$วพิ�มพิ�เล/กหรื�อใหญ+ก/ได ความหมายเด�ยวก$น เชื่+น

<title>, <Title>, <TITLE> ม�ความหมายเที่+าก$น• Tag ส+วนใหญ+จะมาเป็�นค�+ ม� tag เป็6ด และ tag ป็6ด เชื่+น

<h1>ย�นด�ต อนรื$บ</h1> ยกเว น บาง tag ที่��ยอมให ม� tag เป็6ดได อย+างเด�ยว เชื่+น <br>

• Tag ป็6ด ต องม�เครื��องหมาย / (Slash) น%าหน า เชื่+น </table>

• ในการืพิ�มพิ�เอกสารื HTML สามารืถุพิ�มพิ�แยกบรืรืที่$ดหรื�อเคาะ ชื่+องว+าง หรื�อพิ�มพิ�ต�ดก$นก/ได

• ในมาตรืฐาน XHTML ถุ าเป็�น Tag เด��ยว ต องม�เครื��องหมาย / (Slash) ก+อนป็6ด > เชื่+น <br />

กฎการืเข�ยนเอกสารื HTML

ม�การืเข�ยนเป็�นแบบ LiFo (Last in – First out) Tag ที่��เป็6ดก+อนต องป็6ดที่�หล$ง เชื่+น

กฎการืเข�ยนเอกสารื HTML

<html><head><meta name = "keywords" content = “รืาชื่มงคลล านนา,เที่คโน"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>RMUTL University</title></head>

<body><p align="center">มหาว�ที่ยาล$ยเที่คโนโลย�รืาชื่มงคลล านน

า </p> </body>

</html>

แที่/ก Meta Elementแที่/ก Meta Element

Tag HTMLTag

HTML

Tag headTag head

Tag bodyTag body

โครืงสรื างของเอกสารื HTML

• <HTML>..... </HTML> เป็�น Tag ที่��ใชื่ เพิ��อ ก%าหนดว+าเอกสารืน�7ม�การืใชื่ ภาษา HTML เป็�น

Markup Language• <HEAD>.....</HEAD> เป็�น Tag ที่��ใชื่ ก%าหนด

ส+วนห$วของเอกสารื HEAD ไม+ได เป็�นส+วนของเอกสารื ภายใน แต+จะให รืายละเอ�ยดเก��ยวก$บเอกสารืฉบ$บน�7

ข อม�ลตรืงส+วนน�7จะไม+ป็รืากฏอย�+บนหน าจอ• <BODY>.....</BODY> เป็�น Tag ที่��บอกถุ�ง

ล$กษณ์ะต+างๆ ของเอกสารืฉบ$บน�7 ข อความที่��อย�+ภายใต Tag <BODY> จะเป็�นข อความที่��แสดงในหน าเว/บเพิจ


• <TITLE>..... </TITLE> เป็�นการืรืะบ&ข อความที่��ต องการืให เป็�นชื่��อของเอกสารื โดย TITLE เป็�น ส+วนหน��งของ HEAD และจะต องป็6ด Tag ให เรื�ยบรื อยม�ฉะน$7นจะเก�ดข อผ�ดพิลาดได ผลล$พิธ์�ของ Tag น�7 ค�อ ข อความที่��อย�+รืะหว+าง <TITLE>..... </TITLE> จะแสดงใน Title bar ของ Windows


โครืงสรื างเอกสารื HTML• ไฟล�เอกสารื HTML ป็รืะกอบด วยส+วนป็รืะกอบสองส+วนค�อ Head ก$บ

Body โดยสามารืถุเป็รื�ยบเที่�ยบได ง+ายๆ ก/ค�อ ส+วน Head จะคล ายก$บส+วนที่��เป็�น Header ของหน าเอกสารืที่$�วไป็ หรื�อบรืรืที่$ด Title ของหน าต+างการืที่%างานในรืะบบ Windows

• ส%าหรื$บส+วน Body จะเป็�นส+วนเน�7อหาของเอกสารืน$7นๆ โดยที่$7งสองส+วนจะอย�+ภายใน Tag <HTML>…</HTML>

12

ส+วนห$วเรื��องเอกสารืเว/บ (Head Section)

<HEAD><TITLE>ขี�อควิามอธิ�บายช��อเร��อง</TITLE><META HTTP-EQUIV="Content-Type"

CONTENT="text/html; charset=UTF-8"><META NAME="Author" CONTENT="ช��อผู้��พั�ฒนา

เวิ�บ"><META NAME="KeyWords"

CONTENT=" ขี�อควิาม 1, ขี�อควิาม 2, …"></HEAD>

13

Head Section เป!นส่#วินที่�ใช�อธิ�บายเก�ยวิก�บขี�อม�ลเฉพัาะขีองหน�าเวิ�บน�*นๆ เช#น ช��อเร��องขีองหน�าเวิ�บ (Title), ช��อผู้��จั�ดี่ที่-าเวิ�บ (Author), คย.เวิ�ร.ดี่ส่-าหร�บการค�นหา (Keyword) โดี่ยม Tag ส่-าค�ญ ค�อ

• ข อความที่��ใชื่ เป็�น TITLE ไม+ควรืพิ�มพิ�เก�น 64 ต$วอ$กษรื , ไม+ต องใส+ล$กษณ์ะพิ�เศัษ เชื่+น ต$วหนา , เอ�ยง หรื�อส� และควรืใชื่ เฉพิาะภาษาอ$งกฤษที่��ม�ความหมายครือบคล&มถุ�งเน�7อหาของเอกสารืเว/บ หรื�อ ม�ล$กษณ์ะเป็�นค%าส%าค$ญในการืค นหา (Keyword)

• การืแสดงผลจาก Tag TITLE บนเบรืาเซอรื�จะป็รืากฏข อความที่��ก%าก$บด วย Tag TITLE ในส+วนบนส&ดของกรือบหน าต+าง (ใน Title

Bar ของ Window น$�นเอง )• Tag META จะไม+ป็รืากฏผลบนเบรืาเซอรื� แต+จะเป็�นส+วนส%าค$ญ ใน

การืที่%าคล$งบ$ญชื่�เว/บ ส%าหรื$บผ� ให บรื�การืส�บค นเว/บ (Search Engine) และค+าอ��นๆ ของการืแป็ลความหมาย

• การืพิ�มพิ�ชื่&ดค%าส$�ง HTML สามารืถุพิ�มพิ�ได ที่$ 7งต$วพิ�มพิ�เล/ก ต$วพิ�มพิ�ใหญ+ หรื�อผสม การืย+อหน า เว นบรืรืที่$ด หรื�อชื่+องว+าง สามารืถุกรืะที่%าได อ�สรืะ โป็รืแกรืมเบรืาเซอรื�จะไม+สนใจเก��ยวก$บรืะยะเว นบรืรืที่$ดหรื�อย+อหน า หรื�อ ชื่+องว+าง

14

ส่#วินห�วิเร��องเอกส่ารเวิ�บ (Head Section)

ส+วนเน�7อหาเอกสารืเว/บ (Body Section)

• Body Section เป็�นส+วนเน�7อหาหล$กของหน าเว/บ ซ��งการืแสดงผลจะต องใชื่ Tag จ%านวนมาก ข�7นอย�+ก$บล$กษณ์ะของข อม�ล เชื่+น ข อความ, รื�ป็ภาพิ, เส�ยง, ว�ด�โอ หรื�อไฟล�ต+างๆ

• ส+วนเน�7อหาเอกสารืเว/บ เป็�นส+วนการืที่%างานหล$กของหน าเว/บ ป็รืะกอบด วย Tag มากมายตามล$กษณ์ะของข อม�ล ที่��ต องการืน%าเสนอ การืป็@อนค%าส$�งในส+วนน�7 ไม+ม�ข อจ%าก$ดสามารืถุป็@อนต�ดก$น หรื�อ 1 บรืรืที่$ดต+อ 1 ค%าส$�งก/ได แต+ม$กจะย�ดรื�ป็แบบที่��อ+านง+าย ค�อ การืที่%าย+อหน าในชื่&ดค%าส$�งที่��เก��ยวข องก$น

15

ส+วนเน�7อหาเอกสารืเว/บ (Body Section) ต+อ..

• ที่$7งน�7ให ป็@อนค%าส$�งที่$7งหมดภายใต Tag <BODY> … </BODY> และแบ+งกล&+มค%าส$�งได ด$งน�7 กล&+มค%าส$�งเก��ยวก$บการืจ$ดการืพิารืากรืาฟ กล&+มค%าส$�งจ$ดแต+ง/ควบค&มรื�ป็แบบต$วอ$กษรื กล&+มค%าส$�งการืที่%าเอกสารืแบบรืายการื (List) กล&+มค%าส$�งเก��ยวก$บการืที่%าล�งค� กล&+มค%าส$�งจ$ดการืรื�ป็ภาพิ กล&+มค%าส$�งจ$ดการืตารืาง (Table) กล&+มค%าส$�งส%าหรื$บสรื างฟอรื�ม (Form)

16

การืสรื างเอกสารื HTML - ว�ธ์�การืสรื าง

การืสรื าง HTML Document น$7นสามารืถุสรื างได หลายว�ธ์�เชื่+น1. ใช�โปรแกรม Text Editor อย+างเชื่+น Notepad ,

Editplus ที่��รื$บข อม�ลของ Text เป็�นรืห$ส ASCII สรื างเอกสารืHTML ข�7นมาแล ว save file ด วยนามสก&ล .html หรื�อ .htm

2. ใช�โปรแกรมส่ร�างเวิ�บส่-าเร�จัร�ป (Web Authoring Tools) สรื างข�7นมา โดยโป็รืแกรืมเหล+าน�7จะม�องค�ป็รืะกอบต+างๆ ของ

Web Page มาให แล ว ผ� ใชื่ เพิ�ยงแค+เล�อกใชื่ งานเที่+าน$7น เชื่+นDream Weaver , Frontpage เป็�นต น


• 3. ใช�โปรแกรมอย#าง เช#น Microsoft Office สรื างเอกสารื แล วที่%าการื Save File ให เป็�น HTML

Document ก/ได • การืแสดง HTML Document น$7นไม+จ%าเป็�นที่��จะต องม�

ค%าส$�ง HTML ในเอกสารืน$7 นเลยก/ได ม�เพิ�ยงข อความแล วsave file ให เป็�น .HTML แค+น$7นก/สามารืถุใชื่ งานได แล วเพิ�ยงแต+ว+ารื�ป็แบบการืแสดงอาจจะไม+ถุ�กต องตามที่��ต องการื


ต$วอย+างการืใชื่ Notepad สรื าง

เอกสารื HTML ข�7น มาโดยย$งไม+ม�ค%าส$�ง

HTML

ค%าส$�งในการืเรื��มต นในการืสรื างเว/บเพิจ

• ค%าส$�งเรื��มต น • <HTML>..........</HTML>– ค%าส$�ง <HTML> เป็�นค%าส$�งเรื��มต นในการืเข�ยนโป็รืแกรืม

และค%าส$�ง </HTML> เป็�นการืส�7นส&ดโป็รืแกรืม HTML– ค%าส$�งน�7จะไม+แสดงผลในโป็รืแกรืมเว/บเบรืาเซอรื� แต+ต อง

เข�ยนเพิ��อให เก�ดความเป็�นรืะบบของงาน และเพิ��อจะให รื� ว+าเอกสารืน�7เป็�นเอกสารืของภาษา HTML

20

ส+วนห$วของโป็รืแกรืม

<HEAD>..........</HEAD>ค%าส$�ง <HEAD> เป็�นค%าส$�งที่��ใชื่ ก%าหนด

ข อความในส+วนที่��เป็�นชื่��อเรื��องของไฟล� HTML และภายในค%าส$�ง <HEAD>...</HEAD> จะม�ค%าส$�งย+อยอ�กค%าส$�งหน��งค�อ <TITLE>........</TITLE>

21

ก%าหนดข อความในส+วนห$วของโป็รืแกรืมหรื�อไตเต�ลบารื�

• <TITLE>..........</TITLE >ค%าส$�ง <TITLE> เป็�นค%าส$�งที่��

แสดงชื่��อของเอกสารื หรื�อชื่��อเรื��องของไฟล� HTML ซ��งข อความภายในค%าส$�งจะป็รืากฏหรื�อ

แสดงผลในส+วนของไตเต�ลบารื� (Title Bar)ของโป็รืแกรืมเว/บเบรืาเซอรื� แต+จะไม+แสดงในส+วนของการืแสดงผลในโป็รืแกรืมเว/บเบรืาเซอรื�

22

ส+วนเน�7อหาของโป็รืแกรืม

• <BODY>..........</BODY>– ค%าส$�งน�7เป็�นส+วนที่��ส%าค$ญในการืแสดงผลในเว/บเบรืา

เซอรื� ซ��งจะป็รืะกอบไป็ด วยต$วอ$กษรื รื�ป็ภาพิกรืาฟ6กต+างๆ

23

• ส%าหรื$บ <BODY> จะม� Attribute อย�+หลายๆ ต$ว ซ��งจะม�รืายละเอ�ยดด$งน�7

• <BODY TEXT="BLACK" BGCOLOR ="YELLOW" LINK="BLUE" VLINK="BLUE" ALINK="WHITE" BACKGROUND="IMAGE_NAME">

• ควิามหมายขีอง Attribute ต่#างๆ เป!นดี่�งน* – text ใชื่ ส%าหรื$บก%าหนดส�ของข อความที่$�วไป็– bgcolor ก%าหนดส�พิ�7น แต+ถุ าม�การืก%าหนดภาพิ Background เอา

ไว ด วยจะไม+ม�ผลอะไรื – link ก%าหนดส�ของข อความที่��ม�การืเชื่��อมโยงไป็ย$ง page อ��น (ก+อน

เชื่��อม)– vlink ก%าหนดส�ของข อความที่��ม�การืเชื่��อมโยงไป็ย$ง page อ��นที่��เคยไป็

มาแล ว (หล$งเชื่��อม)– alink ก%าหนดส�ของข อความที่��ม�การืเชื่��อมโยงไป็ย$ง page อ��นในขณ์ะที่��

ก%าล$งกดป็&Aมบนเมาส�ค างอย�+ (ขณ์ะเล�อก)– background ก%าหนดรื�ป็ภาพิที่��จะใชื่ เป็�นฉากหล$ง

ส+วนเน�7อหาของโป็รืแกรืม

การก-าหนดี่ส่ขีองพั�*นหล�งขีองต่�วิอ�กษร

<HTML><HEAD> <TITLE>การืก%าหนดส�พิ�7นหล$งโดยการืก%าหนดส�</TITLE> </HEAD> <BODY BGCOLOR="yellow"> การืก%าหนดส�พิ�7นหล$งโดยการืก%าหนดส� </BODY></HTML> 25

จะที่%าการืเข�ยนในส+วนของค%าส$�ง <BODY> โดยเรืาจะใชื่ แอตที่รื�บ�วต�มาเป็�นต$วก%าหนด การก-าหนดี่ส่ขีองพั�*นหล�ง - การืก%าหนดส�พิ�7นหล$งน$7น เรืาสามารืถุม�รื�ป็แบบการืก%าหนดส�พิ�7นหล$งได อย�+ 2 รื�ป็แบบ รืะบ&ชื่��อของส�ที่��ต องการื อาที่�เชื่+น red, green, yellow, blue เป็�นต น

การก-าหนดี่ส่ขีองพั�*นหล�งขีองต่�วิอ�กษร แบบที่� 2

<HTML><HEAD> <TITLE>การืก%าหนดส�พิ�7นหล$งโดยการืก%าหนดส�</TITLE> </HEAD><BODY BGCOLOR="#FF66FF"> การืก%าหนดส�พิ�7นหล$งโดยใชื่ หล$ก "#RBG"</BODY></HTML>

26

การืรืะบ&แบบต$วเลขโดยจะใชื่ ค+าส�ในรืะบบฐาน 16 หรื�อเรื�ยกว+าหล$กการืผสมส�แบบ RBG

การก-าหนดี่ส่ขีองต่�วิอ�กษร

<HTML><HEAD> <TITLE>การืก%าหนดส�ต$วอ$กษรื</TITLE> </HEAD><BODY BGCOLOR="yellow" text="blue" > การืก%าหนดส�ต$วอ$กษรื</BODY></HTML>

27

ร�ปแบบ :: <BODY TEXT="#RGB หรื�อ ก%าหนดชื่��อส�ที่��ต องการื">

การก-าหนดี่ส่ขีองต่�วิอ�กษร

<HTML><HEAD> <TITLE>การืก%าหนดส�ต$วอ$กษรื</TITLE> </HEAD><BODY BGCOLOR="yellow" text="#FF0066" > การืก%าหนดส�ต$วอ$กษรื</BODY></HTML>

28

การืรืะบ&แบบต$วเลขโดยจะใชื่ ค+าส�ในรืะบบฐาน 16 หรื�อเรื�ยกว+าหล$กการืผสมส�แบบ RBG

การืแบ+งย+อหน าและการืจ$ดต%าแหน+ง – ย+อหน า / เว นบรืรืที่$ด

<P> เป็�นต$วจ$ดให ข อความที่��ตามหล$งมาข�7น ย+อหน า (Paragraph) ใหม+

<BR /> เพิ��อให ข อความข�7นบรืรืที่$ดใหม+ ( Tag <BR /> ไม+จ%าเป็�นต องม� Tag ป็6ดก/ได ) ความแตกต+างของ <P> และ <BR /> ค�อ ถุ า

หากเรืาต องการืข�7นย+อหน าใหม+ จะใชื่ Tag <P> การืข�7นบรืรืที่$ดใหม+น$7นก/เว นรืะยะรืะหว+างย+อหน าเด�มก$บย+อหน าใหม+เพิ��มข�7น แต+ถุ าหากจบบรืรืที่$ดต องการืจะข�7นบรืรืที่$ดใหม+ โดยข อความย$งเป็�นใจความต+อเน��องก$นอย�+ก/สามารืถุใชื่ <BR /> แที่นได

การืแบ+งย+อหน าและการืจ$ดต%าแหน+ง – การืจ$ดต%าแหน+ง

จ$ดชื่�ดซ าย โดยที่$�วไป็ต$วอ$กษรืหรื�อป็รืะโยคจะถุ�กจ$ดชื่�ดซ ายโดย

อ$ตโนม$ต�อย�+แล ว แต+ถุ าต องการืรืะบ&จรื�งๆ ก/ที่%าได ด วยการืใชื่ <p> โดยรืะบ& Attribute align ให เป็�น

left ลองด�ต$วอย+าง<p align="left">ข อความ</p>

ผลที่��ได ค�อข อความน�7ถุ�กจ$ดชื่�ดซ าย

การืแบ+งย+อหน าและการืจ$ดต%าแหน+ง – การืจ$ดต%าแหน+ง

จั�ดี่กลางหน�า ใชื่ ค%าส$�งง+ายๆ ข างล+างน�7

<p align=“center”></p> หรื�อ <center>ข อความ</center> ก/ได

ผลที่��ได ค�อ

ขี�อควิามน*ถู�กจั�ดี่กลางหน�า

จั�ดี่ช�ดี่ขีวิา ใชื่ ค%าส$�งคล ายก$บการืจ$ดชื่�ดซ าย ด$งน�7

<p align="right">ข อความ</p>

ผลที่��ได ค�อขี�อควิามน*ถู�กจั�ดี่ช�ดี่ขีวิา

แบ+งข อความหน าจอ เส นค$�นที่��ไม+ใชื่+การืข�ดเส นใต ต$วอ$กษรื

Horizontal Rule <HR />ต$วอย+าง<body>It has been Information

technology</body>ผลล$พิธ์�ค�อIt has been Information technology

การืแบ+งย+อหน าและการืจ$ดต%าแหน+ง – การืข�ดเส นค$�น


ควิามยาวิขีองการค��น<HR WIDTH = NUMBER/PERCENT>

ก%าหนดได 2 รื�ป็แบบ ที่�� Attribute Width1. ก%าหนดตามจ%านวนจ&ดของพิ�กเซล(Pixel)บน

จอภาพิ2. ก%าหนดเป็�นเป็อรื�เซ/นความยาว เป็รื�ยบเที่�ยบก$บหน า

จอ<hr width = 500> และ <hr width =

75%> จัาก 100%ขีองหน�าจัอ


ควิามหนาขีองเส่�นค��น<HR SIZE = NUMBER>

ก%าหนดขนาดความหนา (ส�ง) ของเส นจะใชื่ Attribute Size

โดยก%าหนดค+าเป็�น พิ�กเซล

<hr size = 3> จะหนากว+า <hr size = 6> ต$วเลขเพิ��มข�7น ขนาดความหนา(ส�ง)จะส�งข�7น

การวิางต่-าแหน#งเส่�นค��น• บ+อยครื$7งที่��เส นแบ+งข อความไม+ยาวเต/มจอ และจะป็รืากฎ

ตรืงกลางจอภาพิเสมอ• ถุ าต องการืเป็ล��ยนไป็ชื่�ดรื�ม ให เพิ��ม Attribute Align =

Left หรื�อ Align = Right ลงในค%าส$�ง <HR> หรื�อ ต องการืให อย�+ตรืงกลางเหม�อนเด�ม ก/ก%าหนด Align =

Center

<hr size=n width=n align="left,right or center" noshade>


36

ค%าส$�งการืเว นวรืรืค • (None Breaking Space) เป็�นค%าส$�ง

ชื่+วยให เว นวรืรืครืะหว+างข อความ เพิรืาะป็กต�เบรืาเซอรื�จะ แสดงชื่+องว+างจากการืเคาะ Space Bar เพิ�ยงชื่+องเด�ยว

แม ว+าผ� สรื างจะเคาะไป็หลายครื$7งก/ตาม• น�7เป็�นหน��งในจ%านวนรืห$สใชื่ แที่นอ$กษรืพิ�เศัษ ใน

ภาษา HTML ซ��งใชื่ ป็รืะโยชื่น�ส%าหรื$บแที่นต$วอ$กษรืที่��ม�ความ หมายพิ�เศัษ เชื่+น <, > อ$กษรืพิวกน�7จะไม+สามารืถุเข�ยนลง

ไป็ตรืงๆ เพิ��อให Browser แสดง ที่$7งน�7เพิรืาะ Browser จะต�ความเอาว+าเป็�น Tags ซ��งอาจที่%าให การืแป็ลผ�ดพิลาดได

• ต$วอย+าง รืห$สใชื่ แที่นอ$กษรืพิ�เศัษอ��นๆ เชื่+น< ใชื่ แที่นต$ว < ( less than ) > ใชื่ แที่นต$ว > ( greater than ) & ใชื่ แที่นต$ว & ( ampersand )

การืก%าหนดขนาดของต$วอ$กษรืในแต+ละ Section (Headline) ใชื่

<Hn> และ </Hn> โดย n แที่นต$วเลข 1 – 6 1 ค�อขนาดใหญ+ส&ด และ 6 ค�อขนาดเล/กส&ด

รื�ป็แบบค%าส$�ง<Hn> … Heading Text … </Hn>

การืก%าหนดรื�ป็แบบอ$กษรื – ห$วข อ

ต$วอย+างรื�ป็แบบค%าส$�งHEADER

<H1>COMPUTER</H1><H2>COMPUTER</H2><H3>COMPUTER</H3><H4>COMPUTER</H4><H5>COMPUTER</H5><H6>COMPUTER</H6>

การืก%าหนดรื�ป็แบบอ$กษรื – ห$วข อ

COMPUTER

COMPUTER

COMPUTERCOMPUTERCOMPUTERCOMPUTER

• การก-าหนดี่ขีนาดี่ขีองต่�วิอ�กษร• ร�ปแบบ

<FONT SIZE = N> … </FONT>

N = ขนาดของต$วอ$กษรืม�ค+าต$7งแต+ 1 ถุ�ง 7

1 ค�อขนาดเล/กส&ด และ 7 ค�อขนาด ใหญ+ ส&ด

การืก%าหนดรื�ป็แบบอ$กษรื – <FONT>

การก-าหนดี่ร�ปแบบอ�กษรดี่�วิย Face Attribute Face ชื่+วยในการืรืะบ&รื�ป็แบบต$วอ$กษรืที่��

ต องการืลงไป็ได เลย เชื่+น AngsanaUPC , MS Sans Serif , CordiaUPC

ว�ธ์�การืก%าหนดเป็�นด$งน�7 <font face=“ ชื่��อFont”>ข อความ</font>

ถุ าต องการืแสดงผลเป็�นภาษาไที่ยอย+างถุ�กต อง ควรื เล�อกใชื่ แบบอ$กษรืที่��ลงที่ ายด วย UPC ซ��งเป็�นแบบ

อ$กษรืที่��สน$บสน&นภาษาไที่ย

การืก%าหนดรื�ป็แบบอ$กษรื <FONT>

• ฟอนต�ส%าหรื$บข อความภาษาไที่ย/อ$งกฤษ ที่��เหมาะสมได แก+ MS Sans Serif, Microsoft Sans Serif, Thonburi • ฟอนต�ส%าหรื$บข อความภาษาอ$งกฤษที่��เหมาะสม ค�อ

-Arial, Helvetica, sans serif

ก-าหนดี่ส่เฉพัาะให�ก�บต่�วิอ�กษรดี่�วิย color

Here is RED color Here is GREEN color Here is BLUE color

วิ�ธิการก-าหนดี่เป!นดี่�งน*<font color="ส่ที่�

ต่�องการ">ขี�อควิาม</font>


รวิมเขี�าดี่�วิยก�น การืก%าหนดรื�ป็แบบด วย TAG Font น$7น สามารืถุน%าเอา

Attribute ที่$7งหมด มาก%าหนดรืวมก$นได ต$วอย+าง<font face=“AngsanaNew" size=2

color="#FF00FF">Hey</font>

<font face="CordiaNew"><font size=5>What’s</font>

<font size=3><font color="FF0000">Up</font>


นอกจากการืก%าหนดรื�ป็แบบอ$กษรืโดยการืใชื่ <FONT> แล ว ย$งสามารืถุก%าหนดรื�ป็แบบอ$กษรือ��นๆ ได อ�ก เพิ��อให ต$วอ$กษรืเป็�นไป็ตามแบบที่��เรืาต องการื โดยการืใชื่ Tag ต+างๆ ด$งน�7

<B>…</B> ข อความที่��อย�+รืะหว+าง Tag น�7 จะแสดงผลล$พิธ์�เป็�นต$วหนา

<I>…</I> ข อความที่��อย�+รืะหว+าง Tag น�7 จะแสดงผลล$พิธ์�เป็�นต$วเอ�ยง

<U>…</U> ข อความที่��อย�+รืะหว+าง Tag น�7 จะแสดงผลล$พิธ์�เป็�นต$วข�ดเส นใต

<STRIKE>…</STRIKE> ข อความที่��อย�+รืะหว+าง Tag น�7 จะแสดงผลล$พิธ์�เป็�นต$วข�ดกลางต$วอ$กษรื

<SUP>…</SUP>ข อความที่��อย�+รืะหว+าง Tag น�7 จะแสดงผลล$พิธ์�เป็�นต$วยก

<SUB>…</SUB>ข อความที่��อย�+รืะหว+าง Tag น�7 จะแสดงผลล$พิธ์�เป็�นต$วห อย

การืก%าหนดรื�ป็แบบอ$กษรื – อ��นๆ

รืายการื (List)

ในการืสรื างเอกสารื HTML น$7นข อม�ลบางอย+างต องม�การื แสดงในรื�ป็แบบของรืายการื ไม+ว+าจะเป็�นรืายการืที่��ไม+เรื�ยงล%าด$บ

หรื�อว+ารืายการืที่��ต องม�ล%าด$บก+อนหล$ง ถุ าหากว+าใชื่ TAG ที่$�วๆ ไป็ใน การืสรื างรืายการื (List) ก/สามารืถุที่%าได เชื่+นก$น เพิ�ยงแต+ว+ารื�ป็แบบ

ของ Bullet หรื�อต$วเลข อาจจะถุ�กจ%าก$ดหรื�อว+าใชื่ ได น อยแบบ HTML จ�งม� Tag ที่��สามารืถุใชื่ ในการืแสดงรืายการืรืวมถุ�ง

การืจ$ดการืและควบค&มรื�ป็แบบของรืายการืที่��น%าเสนอได โดยม� List 3 ป็รืะเภที่ ค�อ Unordered List,

Ordered List

เป็�นการืแสดงรืายการืแบบที่��ไม+ได เรื�ยงล%าด$บ ม�การืแสดง รื�ป็แบบย+อหน าโดยม� Bullet น%าหน า รื�ป็แบบ Tag ที่��ใชื่ ค�อ

<UL><LI>….</LI>

<LI>….</LI><LI>….</LI>

</UL>

โดยที่�� <LI> เป็�น TAG ที่��ใชื่ ส%าหรื$บแสดงรืายการืแต+ละรืายการื

List – Unordered List


ต$วอย+างเชื่+น<UL>My

Unordered List<LI>Item 1</LI><LI>Item 2</LI><LI>Item 3</LI>

</UL>

ผลล$พิธ์�ที่��ได ค�อMy Unordered List• Item 1• Item 2• Item 3


การืใชื่ Bullet ให ก$บรืายการืที่��ไม+ม�ล%าด$บ สามารืถุก%าหนด Bullet รื�ป็แบบอ��นๆ ได อ�ก ด$งน�7

• Type = Circle Type = Square

o Type = Disc เพิ��ม Attribute TYPE เข าไป็ โดยถุ า

ต องการืให ที่&กรืายการืของ List เป็�น Bullet ตามที่�� ต องการืก/ให ใส+ TYPE ไว ที่�� <UL TYPE=“….”>

แต+ถุ าต องการืเฉพิาะ List ต$วใดต$วหน��ง ก/ให ใส+ไว ที่��<LI TYPE=“….”>


ต่�วิอย#างเช#น<UL TYPE =“SQUARE”>My Unordered List

<LI>Item 1</LI>

<LI>Item 2</LI>

<LI>Item 3</LI>

</UL>

ผู้ลล�พัธิ.ที่�ไดี่�ค�อMy Unordered

List• Item 1• Item 2• Item 3

เป็�นการืแสดงรืายการืแบบที่��เรื�ยงล%าด$บ ล%าด$บ ของรืายการืม�ความส%าค$ญ ม�การืแสดงรื�ป็แบบย+อหน า

โดยม�หมายเลขเรื�ยงล%าด$บจาก 1,2,3, ..... รื�ป็แบบ Tag ที่��ใชื่ ค�อ

<OL>

<LI>….</LI> <LI>….</LI></OL>

List – Ordered List


ต$วอย+างเชื่+น<OL>My Ordered

List<LI>Item 1</LI><LI>Item 2</LI><LI>Item 3</LI>

</OL>

ผลล$พิธ์�ที่��ได ค�อMy Ordered List1. Item 12. Item 23. Item 3


รืายการืแบบม�ล%าด$บจะม�เลขล%าด$บน%าหน า รืายการืที่&กๆ รืายการืโดยอ$ตโนม$ต� ซ��งสามารืถุ

จะใชื่ ล%าด$บรื�ป็แบบอ��นๆ แที่นต$วเลข โดยใชื่ Attribute ได

เพิ��ม Attribute TYPE เข าไป็ โดยถุ า ต องการืให ที่&กรืายการืของ List เป็�น รื�ป็แบบ ต$วเลขตามที่��ต องการืก/ให ใส+ TYPE ไว ที่�� <OL

TYPE=“….”> แต+ถุ าต องการืเฉพิาะ List ต$วใดต$วหน��ง ก/ให ใส+ไว ที่�� <LI TYPE=“….”>


รื�ป็แบบ TYPE ของ Ordered List ม�ด$งน�7 Arabic <OL TYPE=1> ซ��งตรืงน�7เป็�นค+า Default

อย�+แล ว Capital Letters <OL TYPE=A> จะม�รื�ป็แบบ

ค�อ A,B,C, … Small Letters <OL TYPE=a> จะม�รื�ป็แบบ ค�อ a

, b , c , … Large Roman <OL TYPE=I> จะม�รื�ป็แบบ ค�อ I ,

II , III , … Small Roman <OL TYPE=i> จะม�รื�ป็แบบ ค�อ i ,

ii , iii , iv , ...

List – List ซ อนก$น

<OL>Ordered List<LI>Item 1</LI>

<UL><LI>Item A</LI><LI>Item B</LI>

</UL><LI>Item 2</LI></OL>

จากที่��กล+าวมาข างต นแล ว นอกจากน$7นเรืาย$ง สามารืถุใชื่ งาน List ในรื�ป็แบบอ��นๆที่��เป็�นการืรืวม List

หลายๆ ป็รืะเภที่เข าด วยก$น หรื�อใชื่ งานในล$กษณ์ะของList ซ อน List ก/ได เชื่+น

File Format ที่�ส่น�บส่น5นการที่-างานบนเวิ�บเพัจั

ไฟล�กรืาฟ6กที่��สน$บสน&นรืะบบอ�นเที่อรื�เน/ต ป็Cจจ&บ$นม� 3 ไฟล�หล$กๆ ค�อ ไฟล�สก&ล GIF (Graphics Interlace File) ไฟล�สก&ล JPG (Joint Photographer’s Experts Group) ไฟล�สก&ล PNG (Portable Network Graphics)

Image Tag and Attribute

เรืาสามารืถุน%าภาพิกรืาฟ6กตามที่��ได กล+าวมาข าง ต นมาใส+รืวมเข าก$บเอกสารื HTML ได โดยใชื่ Tag ด$งน�7

<img src= "ที่��อย�+/ชื่��อรื�ป็ภาพิ" >

โดยจะต องที่%าการือ างอ�งชื่��อรื�ป็ภาพิ พิรื อมที่$7งที่�� อย�+ของรื�ป็ภาพิน$7นให ถุ�กต องด วย ซ��ง Attribute

SRC หรื�อ Source น$7น เป็�น Attribute ที่��ใชื่ ส%าหรื$บ การืก%าหนดที่��อย�+ของรื�ป็ภาพิ ซ��งโดยป็กต�จะใชื่ ค�+ก$บ

Tag <IMG> เสมอ รื�ป็แบบการืน%าภาพิมาใส+ในเอกสารื HTML

แบบน�7เรืาเรื�ยกว+า Inline Graphic

Alt= เป็�นการืก%าหนดข อความอธ์�บาย โดยจะป็รืากฎก/ต+อเม��อน%าเมาส� ลากมาที่��รื�ป็ข อความก/จะป็รืากฎ

Align= เป็�นการืจ$ดต%าแหน+งของรื�ป็ภาพิก$บข อความที่��อย�+ใกล เค�ยงโดยม�ค+าต+างด$งน�7 Align = "top" เป็�นการืก%าหนดข อความที่��อย�+ด านบนของรื�ป็ภาพิ Align = "middle" เป็�นการืก%าหนดข อความที่��อย�+ก��งกลางของ

รื�ป็ภาพิ Align = "bottom" เป็�นการืก%าหนดข อความที่��อย�+ด านล+างของ

รื�ป็ภาพิ Align = "left" เป็�นการืก%าหนดข อความที่��อย�+ด านขวาของรื�ป็ภาพิ Align = "right" เป็�นการืก%าหนดข อความที่��อย�+ด านซ ายของรื�ป็ภาพิ


• Width = การืก%าหนดขนาดความกว างของรื�ป็ภาพิ• Height = การืก%าหนดขนาดความส�งของรื�ป็ภาพิ• Border = เป็�นการืก%าหนดเส นกรือบของรื�ป็ภาพิ -

ส%าหรื$บการืใส+เส นขอบให ก$บรื�ป็ใดๆ น$7น ให ใชื่ แอตที่รื�บ�วต� BORDER แล วตามด วยความหนาของ

เส นขอบโดยม�หน+วยเป็�นพิ�กเซล ซ��งหากไม+ก%าหนดหรื�อก%าหนดเป็�นศั�นย�ก/หมายความว+าไม+ม�เส นขอบ

น$�นเอง โดยป็กต�ถุ าหากว+าม�การืน%ารื�ป็ภาพิไป็เป็�นจ&ดLink จะไม+น�ยมให ม�เส นขอบ ก/ค�อใชื่ Border=0


Hspace = เป็�นการืก%าหนดรืะยะเว นขอบจากด าน ซ ายก$บรื�ป็ภาพิ - ในการืแสดงข อความล อมรือบรื�ป็น$7น

เป็�นว�ธ์�ที่��ใชื่ ก$นมากก$บรื�ป็ที่��เป็�นต$วส�นค าและม�ค%า อธ์�บายล อมอย�+ข างๆ แต+การืที่��ข อความอย�+ใกล ก$บรื�

ป็น$7นๆ มากไป็อาจที่%าให เพิจน$7นด�แน+นไม+น+าอ+าน ด$งน$7น แที่/ก <IMG> จ�งถุ�กออกแบบให ม�แอตที่รื�บ�วต�

VSPACE และ HSPACE เพิ��อใชื่ ก%าหนดรืะยะห+าง รืะหว+างรื�ป็และข อความที่��ล อมรื�ป็ โดยค+าที่��ก%าหนดน$7น

อาจใชื่ หน+วยที่��เป็�นพิ�กเซล หรื�อ ก%าหนดเป็�นเป็อรื�เซ/นต� ของหน าจอแที่นก/ได


Vspace = เป็�นการืก%าหนดรืะยะเว นขอบจาก ด านบนก$บรื�ป็ภาพิ - ในการืแสดงข อความล อมรือบรื�ป็

น$7น เป็�นว�ธ์�ที่��ใชื่ ก$นมากก$บรื�ป็ที่��เป็�นต$วส�นค าและม�ค%า อธ์�บายล อมอย�+ข างๆ แต+การืที่��ข อความอย�+ใกล ก$บรื�

ป็น$7นๆ มากไป็อาจที่%าให เพิจน$7นด�แน+นไม+น+าอ+าน ด$งน$7นแที่/ก <IMG> จ�งถุ�กออกแบบให ม�

แอตที่รื�บ�วต� VSPACE และ HSPACE เพิ��อใชื่ ก%าหนด รืะยะห+างรืะหว+างรื�ป็และข อความที่��ล อมรื�ป็ โดยค+าที่��

ก%าหนดน$7นอาจใชื่ หน+วยที่��เป็�นพิ�กเซล หรื�อ ก%าหนดเป็�น เป็อรื�เซ/นต�ของหน าจอแที่นก/ได


Absolute Path and Relative Path

ในการือ างอ�งชื่��อ file ต+างๆ ใน HTML ไม+ว+าจะเป็�น file รื�ป็ภาพิ หรื�อว+า file ที่��เป็�น

HTML Document หรื�อว+า file อ��นๆ เรืา สามารืถุที่%าการือ างอ�งได 2 แบบ ค�อ

1. Absolute Path2. Relative Path

1. Absolute Path เป็�นการือ างอ�งชื่��อไฟล� โดยตรืง เชื่+น <IMG SRC=“flower.gif”> การือ างอ�งแบบน�7

จะต องให ไฟล� .HTML และไฟล� รื�ป็ภาพิน�7อย�+ในDirectory หรื�อ Folder เด�ยวก$น

2. Relative Path โดยป็กต�แล วไฟล� รื�ป็ภาพิ หรื�อไฟล� อ��นๆ อาจจะไม+ได อย�+ใน Directory เด�ยวก$น เน��องจาก

การืจ$ดรืะบบไฟล� หรื�อ เพิ��อที่%าให ม�การืแบ+งแยกไฟล� ป็รืะเภที่ต+างๆ เป็�นไป็ตามที่��ผ� สรื างก%าหนด หรื�อเพิ��อความ

ง+ายในการืบ%ารื&งรื$กษาเว/บเพิจ ด$งน�7 เม��อเวลาที่��อ างอ�งไฟล� ต+างๆ ในเว/บแต+ว+าคนละ Directory ก$น จ�งจ%าเป็�นที่��จะ

ต องม�การือ างอ�ง Path ด วย เพิ��อความถุ�กต องของการืแสดงผลน$7นๆ

Absolute Path and Relative Path

TAG ที่��ใชื่ ส%าหรื$บการืสรื าง การืเชื่��อมโยง ค�อ

<A HREF=“URL ”หรื�อ ป็ลายที่าง >ข อความที่��ใชื่ เป็�นต$วเชื่��อมโยง</A>

• HREF หรื�อ Hypertext Reference เป็�นAttribute ที่��ใชื่ บอกว+าจะเชื่��อมโยงไป็ย$งป็ลายที่างที่��ไหน

• การืที่%า Link ข อความที่��ใชื่ เป็�นต$วเชื่��อมโยงน$บเป็�นเรื��อง ที่��ส%าค$ญ ถุ าไม+ใส+ไป็ เวลาที่��แสดงผลก/ไม+ม�จ&ด หรื�อ

ข อความที่��จะเป็�นต$วเชื่��อมโยงไป็ได ( ผ� ใชื่ ไม+สามารืถุClick จ&ดไหนได เพิ��อที่��จะที่%าการืเชื่��อมโยง)

การืเชื่��อมโยง (LINK)

ป็รืะเภที่ของการืเชื่��อมโยงสามารืถุแบ+งได ด$งน�71. การืเชื่��อมโยงภายในเว/บไซต�เด�ยวก$น• การืเชื่��อมโยงต+างแฟ@มเอกสารื• การืเชื่��อมโยงภายในแฟ@มเอกสารื

2. การืเชื่��อมโยงภายนอกเว/บไซต�3. การืเชื่��อมโยงแบบอ��นๆ• การืเชื่��อมโยงแบบ Email• การืเชื่��อมโยงแบบ Download


<a href=" ไฟล�ที่��จะที่%าการืเชื่��อมโยงที่��ม�นามสก&ล .html">ข อความ</a>

1. การเช��อมโยงภายในเวิ�บไซต่.เดี่ยวิก�น หมายถุ�งfile ต+างๆ น$7นจะอย�+ภายในเว/บไซต�เด�ยวก$น หรื�อว+าอย�+ที่��เครื��องเด�ยวก$นน$�นเอง1.1 การเช��อมโยงต่#างแฟ้9มเอกส่าร หมายถุ�ง จะ

เชื่��อมโยงไป็ย$ง file อ��นๆ ที่��อย�+ในเว/บไซต�เด�ยวก$น ที่�� ไม+ใชื่+ file ต นฉบ$บ หรื�อ file ที่��ก%าล$งแสดงผลอย�+ รื�ป็แบบ Tag ที่��ใชื่ จะม�ด$งน�7

ซ��งการืเชื่��อมโยงแบบน�7จะใชื่ ว�ธ์�การือ างอ�งPath แบบ Absolute Path หรื�อ Relative Path ก/ได ข�7นอย�+ก$บว+าในเว/บไซต�จะม�การืจ$ดการืfile อย+างไรื


1.2 การเช��อมโยงภายในแฟ้9มเอกส่าร หมายถุ�ง การืเชื่��อมโยง ไป็ย$งส+วนอ��นๆ เชื่+น ส+วนต น ส+วนที่ าย หรื�อส+วนกลาง ของ

เอกสารืเด�ยวก$น (File เด�ม แต+ว+าเอกสารืในหน��งหน าน$7นม�ขนาดยาวมาก) โดย Tag ที่��ใชื่ ค�อ

<a name="ชื่��อที่��ต$7งไว เพิ��อที่��จะที่%าการืเชื่��อมโยงมาหา">ข อความ</a>

<a href="#ที่%าการืต$7งชื่��อตามความต องการื">ข อความ</a>

หล$กการืที่��ส%าค$ญจะต องม�การืก%าหนด name ให ก$บ ข อม�ลที่��จะที่%าการืเชื่��อมโยงมาหาก+อน จากน$7นจ�งจะไป็สรื างจ&ด

เชื่��อมโยงต+อข�7นมา


2. การเช��อมโยงภายนอกเวิ�บไซต่. เป็�นการืเชื่��อมโยงไป็ย$ง เอกสารืที่��อย�+ต+างเว/บไซต�ก$นรื�ป็แบบ Tag ที่��ใชื่ ค�อ

<a href="http://URLที่��ต องการืจะเชื่��อมโยงไป็">ข อความ</a>

• โดยจะต องม�การืใส+ http:// ก+อนซ��งเป็�นการืบอกว+าจะใชื่ Protocol HTTP

• ในการืต�ดต+อ แล วตามด วยที่��อย�+ของเว/บไซต� แล วชื่��อ file ที่�� ต องการื (ถุ าม�)


3. การเช��อมโยงแบบอ��นๆ3.1 การเช��อมโยงแบบ Email ในการืสรื าง

เว/บเพิจ ถุ าเรืาต องการืให ผ� เย��ยมชื่มสามารืถุต�ดต+ก$บผ� สรื างเว/บเพิจโดยที่��ผ� ชื่มเว/บเพิจไม+รื� จะต�ดต+อ

ได อย+างไรื เรืาก/สามารืถุให ผ� เย��ยมชื่มสามารืถุ ต�ดต+อก$บเรืาได โดยการืส+งอ�เมล� Tag ที่��ใชื่ ค�อ

<a href="mailto:E-mail address ของผ� ที่��จะส+ง E-mail ">ข อความ</a>


3.2 การเช��อมโยงแบบ Downloadในเว/บเพิจในป็Cจจ&บ$นน�7 ม$กจะน�ยมน%าเอาข อม�ลต+าง ๆ ลงส�+เว/บเพิจ เพิ��อจะที่%าให

เน�7อหาของเว/บเพิจน$7นม�ป็รืะโยชื่น�แก+ผ� เข าเย��ยมชื่ม จ�งที่%าให ม�การืน%าข อม�ลต+างที่��จะที่%าการืเผยแพิรื+ ไม+ว+าจะเป็�น ข อม�ลที่��

เป็�นไฟล� Word ไฟล� Power Point และไฟล�อ��นๆ อ�ก มากมาย ในการืที่��จะน%าไฟล�ต+างๆ น�7ลงส�+เว/บเพิจน$7นเรืาจะ

ต องที่%าการื zip ไฟล�ข อม�ลน$7น เพิ��อเป็�นการืง+ายต+อการืจะน%าไฟล�ไป็

ใชื่ โดยการื Download ไฟล�น$7น Tag ที่��ใชื่ ค�อ <a href=" ไฟล�ที่��ต องการืให

Download">ข อความ</a>


การืเชื่��อมโยงไฟล�ด วยรื�ป็ภาพิ ในการืเชื่��อมโยงข อม�ลโดยใชื่ ต$วอ$กษรืน$7น อาจจะที่%าให

เว/บเพิจของเรืาน$7นไม+น+าสนใจ เรืาสามารืถุใชื่ รื�ป็ภาพิมา ที่ดแที่นการืเชื่��อมโยงข อม�ลด วยต$วอ$กษรื Tag ที่��ใชื่ ค�อ

<a href=" ไฟล�ที่��ม�นามสก&ล .html"><img src="ชื่��อไฟล�รื�ป็ภาพิ" ></a>

* โดยป็กต�จะต$7ง Border = 0 ไว ด วย เพิ��อที่%าให จ&ดที่��เป็�น ภาพิ Link ไม+ม�เส นขอบข�7นมา


การืสรื างตารืาง(Table)

< TABLE > ใชื่ สรื างตารืาง ซ��งในเว/บเพิจส+วนใหญ+หรื�อเก�อบ ที่&กเว/บเพิจม$กใชื่ แที่/กน�7ก$นที่$7งน$7น ด วยเหต&ผลที่��ว+าตารืางสามารืถุ

ป็รืะย&กต�ใชื่ งานได หลาย แบบต$7งแต+ใชื่ เป็�นตารืางธ์รืรืมดาเพิ��อแสดง ค+าต$วเลขที่างสถุ�ต�หรื�อต$วเลขที่��ม�ความส$มพิ$นธ์�ก$น ซ��งการืใชื่ ตารืางน%า

เสนอข อม�ลแบบน�7ที่%าให เห/นการืเป็รื�ยบเที่�ยบ ที่��ชื่$ดเจน ต+อมาม�การืป็รืะย&กต�ใชื่ ตารืางก$บข อม�ลป็รืะเภที่อ��นๆ เชื่+น

ข อความ หรื�อรื�ป็ภาพิเพิ��อชื่+วยออกแบบโฮมเพิจ (ค�อเว/บเพิจแรืกที่��จะ แสดงให เห/นเม��อเข าส�+ เซ�รื�ฟเวอรื�น$7น) หรื�อเว/บเพิจที่$�วๆ ไป็ด วย จนบาง

ครื$7งด�ไม+ออกว+าเป็�นตารืาง ในบที่น�7จะค+อยๆ อธ์�บายจากการืที่%าตารืาง ง+ายๆ ไป็จนถุ�งการืใชื่ ตารืางชื่+วยออกแบบเว/บเพิจ

โครงส่ร�างขีองต่ารางโครืงสรื างตารืางโดยที่$�วไป็จะป็รืะกอบไป็ด วยแถุว

และคอล$มน� โดยชื่+องข อม�ลที่��อย�+ในแนวนอนเด�ยวก$นก/ค�อ แถุว Row และชื่+องข อม�ลที่��อย�+ตรืงก$นในแนวต$7งก/ค�อ

คอล$มน�น$�นเอง Column

หล�กการในการส่ร�างต่าราง ป็รืะกาศั <TABLE> ก+อน จากน$7นจะเรื��มสรื างจาก

Row <TR> โดยที่�ศัที่างจะเป็�น ซ าย --> ขวา แล วค+อยๆ สรื าง Cell , ชื่+องในแต+ละ Column ต+อมา <TD>

การืสรื างตารืาง (Table)

การืสรื างตารืาง – ต$วอย+าง<TABLE>

<TR>

<TD>.........</TD> <TD>.........</TD></TR><TR> <TD>.........</TD> <TD>.........</TD></TR><TR> <TD>.........</TD> <TD>.........</TD></TR>

</TABLE>

ผลล$พิธ์�ที่��ได ค�อ ตารืางขนาด 3 แถุว แถุวละ 2 คอล$มน�น$�นเอง

การืสรื างตารืาง – Tag ที่��เก��ยวข อง

<TABLE> ก%าหนดการืสรื างตารืาง และม�ค%าส$�งป็6ดค�อ</TABLE>

<TR> (Table Row) เป็�นการืก%าหนดแถุวของตารืาง และม�ค%าส$�ง ป็6ดค�อ </TR>

<TD> (Table Data) เป็�นการืก%าหนดข อม�ลในตารืาง และม�ค%าส$�ง ป็6ดค�อ </TD>

นอกจากน�7ย$งม� Tag อ��นๆ ที่��ชื่+วยในการืสรื างตารืาง ค�อ <CAPTION> เป็�นการืก%าหนดค%า หรื�อข อความอธ์�บายตารืาง และ

ม�ค%าส$�งป็6ดค�อ</CAPTION>

* <TH> ม�ค+าเที่+าก$บ <TD> เพิ�ยงแต+ที่%าให ข อม�ลที่��อย�+ในน�7เป็�นต$วหนาและจ$ดรื�ป็แบบให อย�+ตรืงกลาง

การืสรื างตารืาง การืก%าหนดเส นขอบ –BORDER

การก-าหนดี่เส่�นขีองต่าราง โดยที่$�วไป็แล วข อม�ลในตารืางจะถุ�กแบ+งออกเป็�นส+วน ๆ อย+าง

ชื่$ดเจนโดยม�เส นกรือบล อมรือบแต+ละชื่+องข อม�ล แต+บางครื$7งเพิ��อ ความสวยงามแล ว น$กออกแบบเว/บเพิจอาจเล�อกที่��จะไม+แสดง

เส นกรือบที่��ที่%าให รืกห�รืกตาน$7นได โดยเฉพิาะในกรืณ์�ที่��น$กออกแบบ ให แที่/ก <TABLE> ในการืตกแต+งเว/บเพิจ การืก%าหนดว+าจะ

แสดงหรื�อไม+แสดงกรือบที่%าได โดยใชื่ แอตที่รื�บ�วต� BORDER และ BORDERCOLOR ที่�� Tag <TABLE> เที่+าน$7น

ต่�วิอย#าง<TABLE BORDER="ค+าต$วเลข"

BORDERCOLOR="#RGB หรื�อชื่��อส�" >

หมายเหต่5 โดยป็กต�ถุ าไม+ใส+ Attribute น�7 จะไม+ม�เส นขอบข�7นมาให

การืสรื างตารืาง การืก%าหนดเส นขอบ –BORDER

<TABLE> <TR>

<TD>data</TD>

<TD>data</TD>

</TR> <TR>

<TD>data</TD>

<TD>data</TD>

</TR></TABLE>

<TABLE BORDER=1>

<TR>

<TD>data</TD>

<TD>data</TD>

</TR> <TR>

<TD>data</TD>

<TD>data</TD>

</TR></TABLE>

data

data

data

data

data

data

data

data

Attribute ส%าหรื$บ Table - Cellpadding และ Cellspacing

โดยป็กต�เม��อม�การืใส+ข อความลงไป็ใน Cell หรื�อ <TD> จะม�ชื่+องว+างต+างๆ เก�ดข�7น เรืาสามารืถุก%าหนดให ค+าของชื่+องว+างเรืาน�7มากข�7นหรื�อน อยลงก/ได

Cellpadding = ชื่+องว+างรืะหว+างข อม�ลก$บกรือบ ภายในCell

Cellspacing = ชื่+องว+างรืะหว+าง Cell ก$บ Cell Cellpadding ก$บ Cellspacing จะเป็�น Attribute ที่��ใส+ไว ใน

<TABLE> โดยก%าหนดค+าเป็�นต$วเลข Pixel เชื่+นเด�ยวก$บ Attribute Border

ข อม�ลCellpadding ข อม�ล

Cellspacing

Attribute ส%าหรื$บ Table – Width และ Height

• การืใชื่ แอตที่รื�บ�วต� WIDTH และ HEIGHT เพิ��อก%าหนด ขนาดของชื่+องข อม�ลและต%าแหน+งของข อม�ลในแต+ละชื่+อง

• โดยการืก%าหนดที่$7ง WIDTH และ HEIGHT สามารืถุ ก%าหนดเป็�นแบบ Percent หรื�อ ว+าก%าหนดเป็�น Pixel

ก/ได • สามารืถุก%าหนดได ใน Tag ใดก/ได ไม+ว+าจะเป็�น

<TABLE>, <TR>, <TD> แต+ต องให ม�ความ ส$มพิ$นธ์�ก$น เชื่+น ถุ าในแถุวเด�ยวก$นก%าหนด Height ไว

เที่+าไรื ในแถุวน$7นถุ าม� <TD> ใดก%าหนดส�งกว+า ก/จะให ผลล$พิธ์�เที่+าก$บค+าที่��ส�งส&ดในแถุวน$7น

• เชื่+นเด�ยวก$นก$บ Column ถุ าใน Column ม�การื ก%าหนด Width ไว ตารืางจะน$บค+าที่��มากที่��ส&ดแที่นค+า

อ��นๆ ที่��ก%าหนดเอาไว

Width = 150Height = 50

Height = 40

Width = 200

เล�อกเอา Height ที่��มากที่��ส&ด

เล�อกเอา Width ที่��มากที่��ส&ด

Attribute ส%าหรื$บ Table – Width และ Height

Attribute ส%าหรื$บ Table – การืจ$ดต%าแหน+ง

• เรืาสามารืถุก%าหนดต%าแหน+งให ก$บข อม�ลที่��อย�+ในตารืางได โดยการืใชื่ Attribute Align = ก%าหนดต%าแหน+ง Left, Center, Right ( ซ าย กลาง

ขวา) Valign = ก%าหนดต%าแหน+ง Top, Middle, Bottom ( บน กลาง

ล+าง)• ซ��งเรืาสามารืถุใส+ Attribute Align, Valign ได ที่�� TAG <TR>, <TD> • ถุ าก%าหนด Align ไว ที่�� <TABLE> จะเป็�นการืจ$ดต%าแหน+งของ Table ก$บ

จอภาพิแที่น• ที่��ส%าค$ญค�อ ถุ าหากว+าเรืาก%าหนดไว ใน <TR> แล วไป็ก%าหนดต+อใน <TD>

จะน$บจากส+วนที่��ย+อยส&ดเป็�นหล$กก+อน ค�อ ด�ตามค+า ใน <TD> แล วค+อยไป็ด� ใน <TR>


ต$วอย+างเชื่+น<TABLE> <TR

ALIGN=RIGHT> <TD>x</TD> <TD

ALIGN=LEFT>x</TD>

</TR> <TR> <TD

ALIGN=CENTER>x</TD>

<TD>x</TD> </TR></TABLE>

x x

x x

จ$ดตาม<TR>

จ$ดตาม<TD>

จ$ดตาม<TD>

จ$ดตามDefault


Valign \ Align

Left Center Right

TopX X X

Middle X X X

BottomX X X

ส่ร5ปการก-าหนดี่ต่-าแหน#ง

Attribute ส%าหรื$บ Table – ส�พิ�7นหล$งและภาพิพิ�7นหล$ง

• เรืาสามารืถุใส+ส�ให ก$บชื่+องของตารืางหรื�อ Cell ได โดยการืเพิ��ม Attribute BGCOLOR เข าไป็

( เหม�อนก$บ <BODY> ) ชื่+องก/จะม�ส�ตามที่��เรืาก%าหนดไว

• สามารืถุก%าหนดได ใน Tag ใดก/ได ไม+ว+าจะเป็�น<TABLE> , <TR>, <TD> แต+ม�หล$กการื

เหม�อนก$นก$บ Align ค�อ ถุ าหากว+าเรืาก%าหนดไว ใน<TABLE> แล วไป็ก%าหนดต+อใน <TR> หรื�อ<TD> จะน$บจากส+วนที่��ย+อยส&ดเป็�นหล$กก+อน ค�อ

ด�ตามค+า ใน <TD> แล วค+อยไป็ด�ใน <TR> แล ว จ�งไป็ด�ค+าใน <TABLE> ต+อไป็


เช#น<TABLE BGCOLOR=“brown”

BORDER=1><TR>

<TD> </TD><TD> </TD>

</TR><TR>

<TD BGCOLOR=“Yellow”> </TD>

<TD> </TD></TR>

</TABLE>


นอกจากน�7เรืาย$งสามารืถุใส+ภาพิเป็�น Background ให ก$บ ตารืางได ด วย โดยใชื่ Attribute Background=“ที่��อย�+

รื�ป็ภาพิ/ ” ชื่��อรื�ป็ภาพิ โดยหล$กการืใชื่ เหม�อนๆ ก$บBACKGROUND ของ <BODY> เชื่+น

<TABLE BORDER=1><TR>

<TD> </TD><TD> </TD>

</TR><TR>

<TD BACKGROUND=“j002.jpg”> </TD>

<TD> </TD></TR>

</TABLE>

ข อควรืรืะว$งในการืใชื่ Table

• รืะว$งการืใชื่ HTML จ$ดรื�ป็แบบอ$กษรืก$บ TABLE• ถุ าต องการืก%าหนดรื�ป็แบบอ$กษรืให ก$บข อความที่&กข อความในตารืาง ไม+

สามารืถุใชื่ ค%าส$ �ง เชื่+น <B><I>…..</I></B> รืะบ&ครือบตารืาง ด�ต$วอย+าง

วิ�ธิที่�ผู้�ดี่ <B><I>….. <table> ..... </table> </I></B>

วิ�ธิที่�ถู�ก <table> <tr><td>

<B><I>ขี�อควิาม</I></B> </td></tr> </table>

Colspan และ Rowspan

ในตอนสรื างตารืางครื$7งแรืก จะเห/นได ว+า ตารืางที่��สรื างข�7นมา ได น$7นเป็�นรื�ป็แบบส��เหล��ยมที่��ม�ชื่+องแต+ละ Row แต+ละ

Column เที่+าๆก$น แต+ว+าในการืใชื่ งานจรื�งอาจไม+เป็�นอย+าง น$7น จ�งจ%าเป็�นที่��จะต องม�การืป็รื$บตารืางข�7นมา

การืป็รื$บแต+งตารืางให ม�รื�ป็รื+างที่��แตกต+างก$นไป็ในแต+ละชื่+อง เชื่+นการืขยายตามแนวนอน หรื�อการืขยายตามแนวต$7งน$7น

สามารืถุที่%าได โดยการืเพิ��ม Attribute Colspan หรื�อRowspan เข าไป็ที่�� <TD>• COLSPAN = การขียายช#องต่ามแนวิต่�*ง

(Column) ออกไปที่างดี่�านขีวิาม�อขีองช#องต่ารางน�*น

• ROWSPAN = การขียายช#องต่ามแนวินอน(Row) ลงไปที่างดี่�านล#างขีองช#องต่ารางน�*น


ต่�วิอย#างCOLSPAN

<TABLE> <TR> <TD

COLSPAN=2>…</TD>

</TR> <TR> <TD>…</TD> <TD>…</TD> </TR></TABLE>

จะเห/นว+า Row ที่�� 1 จะม�แค+ Cell เด�ยว เที่+าน$7น และ Cell น$7นก/จะม�การืขยายColumn ออกไป็ 2 Column ที่างด านขวา* ด�ได ง+ายๆ ค�อ บรืรืที่$ดไหนม�ก��ชื่+อง ก/จะม�

<TD> ตามที่��ก%าหนด และด�ได อ�กว+าชื่+องน$7นขยาย ไป็ก�� Column จากจ%านวนชื่+องด านบนหรื�อชื่+อง

ด านล+างของชื่+องที่��ขยาย ว+าขยายไป็เที่+าไรื

ต่�วิอย#างROWSPAN

<TABLE> <TR> <TD

ROWSPAN=2>…</TD>

<TD>…</TD> </TR> <TR> <TD>…</TD></TR></TABLE>

จะเห/นว+า Row ที่�� 1 จะม� Cell 2 Cell และ Cell แรืกก/จะม�การืขยาย Row ลงไป็ 2 Row ที่าง

ด านล+าง• ด�ได ง+ายๆ ค�อ ชื่+องน$7นขยายไป็ก�� Row

จากจ%านวนชื่+องข างซ ายหรื�อชื่+องด านขวา ของชื่+องที่��ขยาย ว+าขยายไป็เที่+าไรื

• ถุ าบรืรืที่$ดน$7นม�ชื่+องที่��ถุ�กขยายมาจากน$7น บน บรืรืที่$ดน$7นจะน$บจ%านวนชื่+องเฉพิาะที่��ไม+

ได ถุ�กขยายมา


Table ซ อน Table

การืสรื างตารืางก/สามารืถุที่%าการืใส+ตารืางซ อนลงไป็ได อ�กข างในตารืางโดยรื�ป็แบบของTAG จะเหม�อนการืสรื าง

ตารืางป็กต� เพิ�ยงแต+ว+าจะมอง ตารืางเป็�นข อม�ลของ<TD>..</TD> ชื่+องน$7นเองเชื่+น...<TD>

<TABLE><TR>

<TD>..</TD></TR>

</TABLE></TD>…

90

ส่ร5ป Attribute ที่�ส่-าค�ญขีอง Tableแอต่ต่ร�บ�วิต่. ค#าที่�ก-าหนดี่ ค-าอธิ�บายAlign Left,cente

r,rightจ$ดตารืางก$บหน าจอ

Bgcolor #xxxxxx, ชื่��อส�

ก%าหนดส�พิ�7นตารืาง

Border ต$วเลข ขนาดเส นขอบตารืางBordercolor

#xxxxxx, ชื่��อส�

ส�เส นตารืาง

Cellpadding

ต$วเลข รืะยะห+างรืะหว+างเส นของเซลล�ก$บเน�7อหา

Cellspacing

ต$วเลข รืะยะห+างรืะหว+างเซลล�

Width ต$วเลข หรื�อ %

ความกล างของตารืางก%าหนดได 2 แบบ ก%าหนดเป็�น pixel หรื�อก%าหนดเป็�น % ของหน าจอ หรื�อ % ของตารืางที่��ซ อนตารืาง

height ต$วเลข หรื�อ %

ความส�งของตารืาง

การืป็รืะย&กต�ใชื่ ตารืางก$บ Webpage

การืใชื่ Table ใน Webpage โดยส+วนใหญ+ที่&กWebpage ม$กจะม�การืใชื่ Table เข ามาเก��ยวข องด วยด$งน�7

จ$ดขอบซ ายขวาของ Webpage ให พิอด�ก$บหน าจอ

น%าเสนอข อม�ลในล$กษณ์ะของตารืาง จ$ดที่%ารื�ป็แบบ Webpage ให ม�ล$กษณ์ะของ

Column แบบหน$งส�อพิ�มพิ� จ$ดที่%า Menu หรื�อ Navigator ของ Website

Documents

HTML H yper T ext M arkup L anguage