HTML

HTMLHTML

Hypertext Markup Language

HTML

โครงสร�างของ HTMLซอฟต์ แวร ที่��ต์�องใช้�ร�ปแบบโครงสร�าง HTMLการสร�างและการบ�นที่�กเอกสาร HTMLการแสดงไฟล เอกสาร HTMLต์ารางแสดงต์�วอย่#าง Tag และค$าอธิ&บาย่Tag HTML

โครงสร�างของ HTML

โครงสร�างของภาษา HTML แบ#งเป)น 2ส#วน

ส#วนที่��เป)นข�อความ จะเป)นล�กษณะของข�อความที่��วๆ ไป

ส#วนที่��เป)นค$าส��ง จะเป)นส#วนที่��ใช้�ในการก$าหนดร�ปแบบของข�อความซ��งจะเร�ย่กว#า Tag หร/อ แที่0ก โดย่จะอย่�#ในเคร/�องหมาย่ < และ >

ร�ปแบบโครงสร�าง HTML

โครงสร�างของเอกสาร HTML จะประกอบไปด�วย่ Tag เป1ด และ Tag ป1ดต์#างๆ ด�งน�2

<html><head> …</head>

<body> …</body>

</html>

Tag เป1ด

Tag ป1ด

จ3ดเร&�มต์�น และส&2นส3ด ของเอกสาร HTML

ร�ปแบบโครงสร�าง HTML (ต่�อ)

<html>…</html> จะต์�องม�ในเอกสาร HTML เสมอ เน/�องจากเป)นการประกาศให�ที่ราบว#าเป)นเอกสาร HTML

Tag HTML ประกอบไปด�วย่ 2 ส#วน ส#วนของ HEAD เป)นส#วนของการก$าหนดการที่$างาน

และค3ณสมบ�ต์&พิ&เศษบางอย่#างของ Web Page ส#วนของ BODY เป)นส#วนที่��ให�ใส#เน/2อหาและก$าหนด

ค3ณสมบ�ต์&พิ/2นฐานของ Web Page

Tag ที่��เกี่��ยวข�องในส�วนของ HEAD

Tag <title> เป)น Tag ส$าหร�บก$าหนดห�วข�อของ Web page ร�ปแบบค$าส��ง

<title>ห�วข�อเร/�องที่��แสดงบน Title</title>

<html><head> <title>สร�าง web page ด�วย่ HTML</title></head><body> การใส#ห�วข�อเร/�องให� web page แสดงบน Title Bar</body>

</html>

Tag ที่��เกี่��ยวข�องในส�วนของ HEAD (ต่�อ)

ผลจากการใส# Tag <title>…</title>

Tag ที่��เกี่��ยวข�องในส�วนของ BODY

ส#วนของ BODY เป)นส#วนที่��ให�ใส#เน/2อหา และก$าหนดค3ณสมบ�ต์&พิ/2นฐานของ Web Page

<body>…</body>

กี่ารสร�างและกี่ารบ�นที่�กี่เอกี่สาร HTMLเราจะใช้� Text Editor ที่��ต์&ดมาก�บระบบ

ปฏิ&บ�ต์&การ (จะเป)นต์�วอ/�นก0ได� ) ในที่��น�2ขอใช้�โปรแกรมช้/�อว#า NotePad

หากต์�องการบ�นที่�กให�เป)นเอกสาร HTML ก0จะต์�องก$าหนดส#วนขย่าย่ หร/อนามสก3ลให�เป)น .html หร/อ .htm เที่#าน�2น **ส$าค�ญมาก**

start>Programs>Accessories> Notepad

กี่ารสร�างและกี่ารบ�นที่�กี่เอกี่สาร HTML (ต่�อ)ว&ธิ�การบ�นที่�กเอกสาร HTMLเล/อกเมน� File>Save จะปรากฏิหน�าต์#าง Save As ให�เล/อก

ต์$าแหน#งที่��จะจ�ดเก0บไฟล ที่�� Save inเล/อกช้น&ดของไฟล ที่�� Save as type เป)น

All Filesต์�2งช้/�อไฟล HTML ที่�� File name โดย่จะ

ต์�องให�ม�นามสก3ลเป)น .html หร/อ htmคล&:ก Save

กี่ารสร�างและกี่ารบ�นที่�กี่เอกี่สาร HTML (ต่�อ)

ช้/�อไฟล โดย่ให�ม�นามสก3ล .html หร/อ .htm

ต์$าแหน#งที่��จ�ดเก0บไฟล

กดป3;ม Save

ช้น&ดของไฟล

กี่ารแสดงไฟล!เอกี่สาร HTML

ด�บเบ&2ลคล&กที่�� Web Browser ในที่��น�2ค/อ Internet Explorer

เล/อก File>open คล&ก Browse เพิ/�อค�นหาไฟล ที่��ต์�องการ

จากน�2นคล&กป3;ม Openในช้#อง Open จะเจอเส�นที่าง(path) ที่��เก0บ

ไฟล HTML ด�งกล#าวคล&ก OK

ต่ารางแสดงต่�วอย�าง Tag และค"าอธิ$บาย

ร�ปแบบ ความหมาย<html>…</html> เป)น Tag เร&�มต์�น และส&2นส3ดของเอกสาร HTML

<head>…</head> เป)น Tag ที่��ใช้�ก$าหนดในส#วนที่��เป)นช้/�อเร/�อง<title>…</title> เป)น Tag ที่��ใช้�แสดงช้/�อเอกสารที่�� Title Bar ของ

Windows ที่��เป1ดเอกสารอย่�#<body>…</body> เป)น Tag เร&�มต์�นและส&2นส3ดของเน/2อหาในเอกสาร

ซ��งใน Tag <body> จะม� Tag อ/�นๆ แที่รกอย่�#<br> เป)น Tag ส$าหร�บข�2นบรรที่�ดใหม#<b>…</b> เป)น Tag ส$าหร�บก$าหนดต์�วอ�กษรให�เป)นต์�วหนา<i>…</i> เป)น Tag ส$าหร�บก$าหนดต์�วอ�กษรให�เป)นต์�วเอ�ย่ง<u>…</u> เป)น Tag ส$าหร�บก$าหนดให�ต์�วอ�กษรเป)นต์�วข�ดเส�น

ใต์�<hr> เป)น Tag ส$าหร�บก$าหนดให�เข�ย่นเส�นใน web

page ในแนวนอน<a>…</a> เป)น Tag ที่��ก$าหนดการเช้/�อมโย่ง

ต่ารางแสดงต่�วอย�าง Tag และค"าอธิ$บาย (ต่�อ)

ร�ปแบบ ความหมาย<img>…</img> เป)น Tag ส$าหร�บแที่รกร�ปภาพิ<table>…</table> เป)น Tag ส$าหร�บสร�างต์าราง<tr>…</tr> เป)น Tag ส$าหร�บก$าหนดแถวในต์าราง<td>…</td> เป)น Tag ส$าหร�บก$าหนดคอล�มน ในแถว<form>…</form> เป)น Tag ส$าหร�บสร�าง Form

<input>…</input> เป)น Tag ส$าหร�บก$าหนด Input ใน Form

หมายเหต่'จากต์ารางข�างต์�น เป)นเพิ�ย่งบางส#วนของ Tag ที่��ส$าค�ญๆ เที่#าน�2น Tag อ/�นๆ ย่�งม�อ�กจ$านวนมาก ซ��งย่ากแก#การจดจ$า ด�งน�2น จ�งได�ม�การสร�างเคร/�องม/ออ$านวย่ความสะดวกในการสร�าง web page น��นก0ค/อ Web Editor น��นเอง

ซอฟต่!แวร!ที่��ต่�องใช้�Web Editor (Macromedia

Dreamweaver,Microsoft Frontpage,etc.)

Text Editor (Notepad,Editplus,Wordpad,etc.)

Web Browser (Internet Explorer,Mozilla Firefox,etc.)

Tag HTML

การก$าหนดส�พิ/2นหล�งการข�2นบรรที่�ดใหม#การจ�ดข�อความให�

อย่�#ก��งกลางการจ�ดย่#อหน�าการก$าหนดล�กษณะ

และแบบต์�วอ�กษรการเว�นช้#องว#างใน

เอกสาร

การใส# comment ในเอกสาร

การใส#เส�นค��นแนวนอนในเอกสาร

การแที่รกร�ปภาพิการสร�าง Linkการสร�างต์ารางการสร�าง Form

กี่ารกี่"าหนดส�พื้+,นหล�งร�ปแบบของค$าส��ง HTML ในการก$าหนดส�

พิ/2นหล�งของ Web Page

<body bgcolor=“ส�หร/อรห�สส� ”>...<body>

<body bgcolor=“black”>…</body>

กี่ารข�,นบรรที่�ดใหม�ร�ปแบบของค$าส��ง HTML ที่��ใช้�ในการข�2นบรรที่�ดใหม#

<br> ข�อความที่��ต์�องการน$าไปข�2นบรรที่�ดใหม#

กี่ารจั�ดข�อความให�อย��กี่��งกี่ลางร�ปแบบของค$าส��ง HTML ที่��ใช้�ในการจ�ด

ข�อความให�อย่�#ก��งกลางหน�ากระดาษ

<center>ข�อความที่��ต์�องการจ�ดให�อย่�#ก��งกลาง</center>

กี่ารจั�ดย�อหน�าการจ�ดย่#อหน�าจะช้#วย่ให�การแบ#งเน/2อหาน�2นเป)น

ส�ดส#วนและด�ง#าย่ข�2น<p align =ร�ปแบบที่��ต์�องการจ�ด>ข�อม�ลที่��ต์�องการจ�ดย่#อหน�า</p>

ร�ปแบบที่��ต่�องกี่ารจั�ด

ค"าอธิ$บาย

left จ�ดช้&ดซ�าย่center จ�ดก��งกลางright จ�ดช้&ดขวา

<p align = left>การจ�ดย่#อหน�าแบบช้&ดซ�าย่</p>

กี่ารเว�นช้�องว�างในเอกี่สารโดย่ปกต์& ไม#ว#าเราจะพิ&มพิ ข�อม�ลในเอกสาร

HTML โดย่การเว�นช้#องว#างไว�มากกขนาดไหนก0ต์าม เม/�อน$าไปแสดงบน Browser ก0จะเปร�ย่บเสม/อนว#าเราได�เว�นช้#องว#างเพิ�ย่ง 1 อ�กขระ

หากต์�องการให�แสดงข�อม�ลที่��ม�การเว�นช้#องว#างให�ต์ามต์�องการก0ต์�องใช้�ค$าส��ง

กี่ารใส� comment ในเอกี่สารค/อการที่��เราต์�องการใส#ข�อความ หร/อข�อม�ลไว�ใน

เอกสาร แต์#ไม#ต์�องการให�แสดงบน Browser ร�ปแบบของค$าส��ง HTML ในการใส#

comment ให�ก�บเอกสาร

<! หมาย่เหต์3>

Documents

HTML