View
91
Download
0
Category
Preview:
DESCRIPTION
HTML. Hypertext Markup Language. HTML. โครงสร้างของ HTML ซอฟต์แวร์ที่ต้องใช้ รูปแบบโครงสร้าง HTML การสร้างและการบันทึกเอกสาร HTML การแสดงไฟล์เอกสาร HTML ตารางแสดงตัวอย่าง Tag และคำอธิบาย Tag HTML. โครงสร้างของ HTML. โครงสร้างของภาษา HTML แบ่งเป็น 2 ส่วน - PowerPoint PPT Presentation
Citation preview
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>
Recommended