P. 1
การสร้างเว็บเพจด้วยภาษา HTML

การสร้างเว็บเพจด้วยภาษา HTML

|Views: 2,810|Likes:
เอกสารประกอบการเรียนรู้ภาษาhtml
เอกสารประกอบการเรียนรู้ภาษาhtml

More info:

Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

05/12/2014

pdf

text

original

Sections

การสร้ างเว็บเพจด้วยภาษา html

หน่ วยที่ หน่ วยที่ 2 2 การสร้างเว็บเพจด้วยภาษา การสร้างเว็บเพจด้วยภาษา HTML HTML 0
ภาษา HTML (HyperText Markup Language)
รูปที่ 1 การติดต่อสื ่ อสารผ่าน เวิลด์ไวด์เว็ บ
ภาษา HTML (HyperText Markup Language) เป็ นภาษา
หลักที ่ ใช้ในการสร้างเว็บเn¬ (Web Page) เป็ นภาษาปรtเภท Markup
Language เกิดtน¬ากการnัWนารtบบ World Wide Web ในเดือน
uีนาnu 1989 lดuนักวิ¬ัu¬ากสnาบัน CERN (Conseil European Pour
La Re!er!e Nuleaire) T่งเป็ นห้องทดลองในเuืองเ¬นี วา ปรtเทn
สวิสเTอร์uลนด์ ชื ่ อ ทิu เบอร์เนอร์ " ลี (#i$ %erners " Lee) T่ง ทิu
เบอร์เนอร์ " ลี ได้นาuนวnวาunิดในเรื ่ อง &ypertext tอง 'anne(ar
%us! uลt #ed Nelson uาใช้เnื ่ อกรt¬าut้อuลในองn์ ต่อuาuีการnัWนา
uลtกาหนดuาตรjานlดuองn์กรที ่ ชื ่ อว่า W)C (World Wide Web
Consortiu$)
ไฮเปอร เท็กซ (Hypertext) เปuเอกสารท uñกษu.พเuษกวาเอกสารท วไป
uรงท สาuารuสร้างuวเ1 อuÏยงไปยงเอกสารอ uuร อlu้lu ¡uเอกสารเดยวกuได้
เอกสารไฮเปอรเท็ กซ uกอาulñ.lปñnñด้วยÏปรlกรuบราวเซอร Ïปรlกรu
บราวเซอรuวlรก1 อ Ïuเซอu (Mosaic) ซ งทางาuบuร.บบ X-WindowsÏปรlก
รuu สร้างปราก_การu¡uuI uuา¡uร.บบการส อสารI้อuñบuอuเทอรเu็ulñ.
เปuu้ ulบบIองÏปรlกรuบราวเซอรlบบอ u_ เ1u เuสเuป uอuuu เuเuอร
(Netscape Communicator) อuเทอรเu็u เอ็กพñอเรอร (Internet Explorer) Ïอ
เปรา (Opera) เปuu้u
uร1ยวuu เทยuuาวา
1
การสร้ างเว็บเพจด้วยภาษา html
การสร้างเว็บเพจu uสาuารuเñอกสร้างได้ 2 วü ดงu
l. ¡1้Ïปรlกรuปร.เภทเท็กซเอดเuอร (text editor) ซ งÏปรlกรuท u
ยu¡1้กuuากuอ Notepad เพรา. เป uÏปรlกรuท ¡1้งาย lñ.uอย¡uเuร อง
uอuพวเuอรท ¡1้ร.บบป_บuการวuÏดวส
2. ¡1้Ïปรlกรuปร.เภทเว็บเอดเuอร (web editor) เ1u Microsoft
FrontPage, Macromedia
Dreamweaver, Homesite, lñ.Thai HTML เปuu้u Ïดยสวu
¡uQÏปรlกรuสาเร็จเuñาu uวü
การ¡1้ท uñ้ายกบÏปรlกรuสาเร็จท ¡1้¡uสาuกงาuท วไป uอ
n้¡1้สาuารuเu็uส งท uวเองพuพ
uร อสร้างได้Ïดยไuจาเปuu้องพจารuาlท็ก (tag) ท ¡1้¡uการกาuuด
Ïuรงสร้างIองเว็บเพจ
รูปที่ 2 Ïปรlกรu Macromedia Dreamweaver
รูปที่ 3 Ïปรlกรu Thai HTML Editor
ภาษา &#ML เป็ นภาษาที ่ uีลักษnttองt้อuลที ่ เป็ นตัวอักษรใน
uาตรjานtองรหัสuอสกี (*+C,, Code)lดuเtีuนอu่ในรปtองเอกสาร
t้อnวาu (#ext -ou$ent) ¬งกาหนดรปuบบuลtlnรงสร้างได้ง่าu
uร1ยวuu เทยuuาวา
2
การสร้ างเว็บเพจด้วยภาษา html
ภาษา &#ML ได้nกnัWนาtนอu่างต่อเนื ่ องตั งuต่ &#ML Le(el 1 (ร่นดัง้
เดิu). &#ML /01. &#ML )01. &#ML )0/ uลt &#ML201 T่งเป็ นร่นที ่
นิ uuเtีuนกันในป¬ั ¬ บัน ( tntนี W)C ได้nัWนา &#ML 2011 ออกuาuล้ว
เnื ่ อลองรับuาตรjานภาษา 3ML) ¬ งทาให้ภาษา &#ML ในป¬ั ¬ บัน
สาuารnuสดงภาnทางกราnnิ กuลtรtบบเสีuงได้ เnื ่ อตอบสนองในการทา
งานในป¬ั ¬ บัน
ภาษา &#ML สาuารnสร้างtนได้¬ากlปรuกรuสร้างไnล์t้อnวาu
(#ext Editor) ทั ่ ว q ไป เช่น Notepad หรือ Word Proessing ได้ อีกทั ง
ง่าuต่อการเรีuนร้เnราtภาษา &#ML ไu่uีlnรงสร้างnวาu
เป็ นProgra$$ing เลuuu้uต่น้อu uลtไnล์ที ่ ได้¬ากการสร้างเอกสาร
&#ML uังuีtนาดเล็กอีกด้วu
นาuสกลtองไnล์ &#ML ¬tเป็ นไnล์นาuสกล 0!t$ หรือ 0!t$l T่ง
ใช้ในทั ง รtบบป_ิบัติการuนิ กT์(4N,3) uลtรtบบป_ิบัติการ Windo5s
uลtเรีuกใช้งานได้¬ากเว็บบราวเTอร์ (Web %ro5ser)
โปรแกรมที่ต้องใช้ในการเขียนโฮมเพจ และการดูผลล พnจาก
เ1LLรา1เYอร
Ïปรlกรuท ¡1้¡uการเIยuÏฮuเพจuuñายÏปรlกรuuาก บางÏปรlกรu1วย
¡u้เIยuได้งาย click luไuเกu 5 uร งก็เสร็จlñ้วเ1u Ïปรlกรu Dreamweaver ,
Flash lunñเสยก็uอทา¡u้เราไuเI้า¡จภาษา Html อยางuองlท้ดงu u จงIอ¡1้
Ïปรlกรu note pad ¡uการเIยuuร บnu
1.การเป ดโปรแกรม Notepad ทาดงตอÌปนี Click ท Start > Program
> Accessories > Notepad
uร1ยวuu เทยuuาวา
3
การสร้ างเว็บเพจด้วยภาษา html
2.¡น้าตาโปรแกรม Notepad
3. จากน นลองพมพÌnลต1อยางลงÌปดงนี
<HTML>
<HEAD>
<TITLE> ÏฮuเพจlรกIอง
กร.nu</TITLE>
</HEAD>
<BODY>
สวสดuร บ uuอาu
uu้าuาดจงเñย
</BODY>
</HTML>
4. การLนทก(save)
ทาดงuอไปu Click ท เuu File > Save
uร1ยวuu เทยuuาวา
4
รูปที่ 4 การเI้าÏปรlกรu
รูปที่ 5 uu้ าuาÏปรlกรu
รูปที่ 6 ñกษu.การเIยu
การสร้ างเว็บเพจด้วยภาษา html
uร อ
5.การดูผลลพnโดยใช้โปรแกรม Internet Explorer
การเป ดÏปรlกรu Internet Explorer สาuารuทาได้uñายวü ก็ñองเñอกเอาสกวü
u.uร บ
l) double click ท ไอuอu(Icon) IองÏปรlกรu Internet Explorer
2) ดบเบ ñuñก(double click) ท ไ¡ñIองÏปรlกรu Internet Explorer
(ไ¡ñuาuสกñ html)
3) เñอกÏปรlกรu Internet Explorer จากป uสuารท(start)
4) กรu ท เป็ u Windows 9S สาuารuuñก(click) เñอกÏปรlกรu Internet
Explorer ได้จาก ทาสกบาร(taskbar)
เu อปราก_uu้าuางÏปรlกรu Internet Explorer จ.uuu้าuา ดงu
uร1ยวuu เทยuuาวา
5
uñ งจากu u¡u1อง File name : ¡u้
¡11 อไ¡ññงไป ¡uuวอยางพuพ ñง
ไปวา First.html
¡u1อง Save as type : ¡u้เñอกเป็ u
รูปที่ 7 การบuทกไ¡ñ
การสร้ างเว็บเพจด้วยภาษา html
จากu u¡u้ Click ท File > open จ.ได้uu้าuางดงu
¡u้ Click ท Browse เพ อไปเñอกไ¡ñท u้องการจ.ดnññพü ¡uuวอยาง
เñอกไ¡ñ1 อ First.html จากu u Click ท Open uñงจากu u click ท ok จ.ได้
nññพüดงu
จ.เu็uได้วาท title bar uuาวา "ÏฮuเพจlรกIองกร.nu" lñ.uI้อuวาuวา
"สวสดuร บ uuอาuuu้าuาดจงเñย"
uร1ยวuu เทยuuาวา
6
การสร้ างเว็บเพจด้วยภาษา html
Tip ! จ.เu็uได้วาI uuอuไuยากเทาไรu.uร บ uI้อเสuอuอ เu อเราเป ดไ¡ñu ด
lñ้วlñ.uากไปlก้ไII้อuñ¡u Note Pad lñ้วทาการบuทก uากu้องการด
nññพü uากเรา¡1้ Internet Explorer เป ดไ¡ñu อยlñ้ว ¡u้ Click ท uาวา
"Refresh" ได้เñย ไuจาเป็ uu้องไป File > Open อก
โครงสร้างภาษา HTML
คำาสั่ ง ในภาษา HTML เรีuกว่า uท็ก (#ag) ¬tเtีuนอu่ใน
เnรื ่ องหuาu 6 uลt 7 uท็ก¬tuบ่งได้เป็ นสอง
กล่u nือ uท็กuบบเปิ ด uลtuท็กuบบปิ ด lดuปกติuล้วuท็กtองภาษา
&#ML ¬tเปิ ดuลtปิ ด lดuuีรปuบบดังนี
รปuบบ 6#*87 0000 69#*87
เช่น 6&#ML7 0000 69&#ML7. 6%7 0000 69%7
การปิ ดuท็ก¬tใช้เnรื ่ องหuาu 9 (+las!) เป็ นตั วกาหนดในuท็กที ่ ปิ ด
ส่วนuท็กอีกปรtเภทหน่ ง¬tเป็ นuท็ก
ในลักษntเปิ ด nือ ไu่ต้องuีuท็กเปิ ดท้าu เช่น 6,M87. 6%R7. 6W%R7
เป็ นต้น
รูปแLLnาLา HTML
ภาษา HTML ปร.กอบด้วยlท็ก (tag) ทาuu้าท uวบuuÏuรงสร้างlñ.การ
lสดงnñIองเว็บเพจ ซ งจ.
uกlปñnñด้วยÏปรlกรuบราวเซอร รปlบบIองuาส งจ.ปร.กอบด้วย uวอกษร
uาส งอยภาย¡u้เuร องuuาย
< > lท็กu 2 รปlบบดงu
 แทกnู ปร.กอบด้วยuIองlท็กท อยภาย¡u้เuร องuuาย < > uาส งluñ.
uจ.u1 อเร ยกวา แท็กเปด(open tag) lñ.แท็กปด (close tag)
lท็กเปดเปuuาส งท อยuu้าI้อuวาuเพ อกาuuดจดเร uu้uñกษu.uร อรป
lบบการlสดงnñ lท็กปด uñ้ายกบlท็กเปดluuเuร องuuายสlñ1 (/)
อยภาย¡uทาuu้าท ปดท้ายI้อuวาuเพ อกาuuดจดส uสดIองñกษu.uร อรป
lบบการlสดงnñu u_ uรปlบบดงu
uร1ยวuu เทยuuาวา
7
<nาJ่ ง> ข้ อn1าม </nา
การสร้ างเว็บเพจด้วยภาษา html
uวอยางIองlท็กเปดlñ.lท็กปดlสดงไว้¡uรปท 7.l
lท็กเป ด lท็กป ด

ต1อยางแทกเปดและ
แทกปด
 แทกเดี่ย1 เปulท็กท uเ0พา.lท็กเปดเทาu u uรปlบบดงu
ซ งlท็กเuñาu เปulท็กท ไuทางาuเก ยวกบการlสดงnñอกษรuร อรปภาพ
การเIยulท็กจ.¡1้อกษรuวเñ็ก (lower case) uร อuว¡uQ (upper case)
uร อnสuกuก็ได้ เ1u
< HTML> uร อ <html> uร อ <Html> Ïปรlกรuบราวเซอรจ.uอวาเปuuาส ง
เดยวกu ยกเว้uuาเ0พา.uร อ
uาร.บเส้uทาง 1 อl¡ uI้อuñ 1 อไดเรuทอร uวอกษรเñ็กuร อ¡uQจ.uอวาเปu
uuñ.uวกu เ1u<IMG
SRC=¨picture.gif¨></IMG> lñ. <IMG SRC=¨PICTURE.GIF¨></IMG>
เปuu้u
เnื ่ อnวาuเt้าใ¬ง่าuในการกาหนดlnรสร้างภาษา &#ML เรา¬งnวร
กาหนดuท็กเปิ ดuลtเปิ ดให้เหuาtสu
uร1ยวuu เทยuuาวา
8
<HTM
L>
<HEA
D>
<BOD
Y>
<
/HTML
>
</HEA
D>
</BOD
Y>
<nาJ่ ง>
การสร้ างเว็บเพจด้วยภาษา html
เnื ่ อสร้างnวาuสuดล เช่น เuื ่ อเราต้องการใช้กาหนดให้ตัวอักษรเป็ นตัว
หนาlดuใช้uท็ก 6%7 uลtให้uีการtีดเส้น
ใต้lดuใช้uท็ก 647 เราnวรที ่ ¬tกาหนดการเปิ ดuลtปิ ดuท็กlดuเuื ่ อtนต้น
ด้วuuท็ก 6%7 uลtตาuด้วuuท็ก 647
nวร¬tปิ ดด้วuuท็ก 6947 ก่อน uล้วตาuด้วuuท็ก 69%7 ดังนี
6%7647 0000 694769%7
โครงสร้างหลัก
รปuบบuาตรjานในการสร้างเว็บเn¬ปรtกอบด้วunาสั ่ ง หลักอu่ 2
nาสั ่ ง ดังนี
6&#ML7 0000 69&#ML7 เป็ นnาสั ่ ง ที ่ ทาหน้ าที ่ บอก¬ดเริ ่u ต้ นuลt
¬ดสินสดtองเว็บเn¬
6&E*-7 0000 69&E*-7 เป็ นnาสั ่ ง ในส่วนtองการกาหนดส่วนหัว
เรื ่ องtองเว็บเn¬ lดuในnาสั ่ ง &E*-
¬tuีnาสั ่ ง 6#,#LE7 0000 69#,#LE7 อu่ด้วu T่งทาหน้ าที ่ กาหนดt้อnวาuที ่
uสดงบน #itle %ar lดuสาuารnกาหนด
nวาuuาวtองt้อnวาuได้ :2 ตัวอักษร
6%;-<7 0000 69%;-<7 เป็ นnาสั ่ ง ในส่วนเนื อหาtองเว็บเn¬ทั ง
หuด
รปuบบการเtีuนuีดังต่อไป
6&#ML7
6&E*-7 6#,#LE7 #itle %ar 69#,#LE7
69&E*-7
6%;-<7
ส่วนเนื อหาร ร ปภาn
69%;-<7
69&#ML7
การจัดรูปแบบเaกสาร
คำาสั่ ง ในการกำาหนดหัวเร ่ aง (Headding)
การกาหนดหัวเรื ่ องเรา¬tใช้nาสั ่ ง &eadding 6&7 เnื ่ อuสดงอัตรา
อักษรtนาดใหq่กว่าปกติ เช่น ชื ่ อบท. ชื ่ อหัวt้อ เป็ นต้น nาสั ่ ง !eading uี
ด้วuกัน : รtดับ lดuที ่ รtดับ 1 ¬tuีtนาดใหq่สด uลtรtดับ : ¬tuีtนาด
เล็กที ่ สด uีรปuบบnาสั ่ ง ดังนี
6&17 0000 69&17
6&/7 0000 69&/7
uร1ยวuu เทยuuาวา
9
การสร้ างเว็บเพจด้วยภาษา html
6&)7 0000 69&)7
6&27 0000 69&27
6&=7 0000 69&=7
6&:7 0000 69&:7
ตัวอย่างที ่1 head.html
6&#ML7
6&E*-76#,#LE7 &eading
69#,#LE769&E*-7
6%;-<7
6&17 &eading
Le(le 1 69&17
6&/7 &eading
Le(le / 69&/7
6&)7 &eading
Le(le ) 69&)7
6&27 &eading
Le(le 2 69&27
6&=7 &eading
Le(le = 69&=7
6&:7 &eading
Le(le : 69&:7
69%;-<7
69&#ML7
คำาสั่ ง B นบรรทัดใหM่ (Line Break)
lดuปกติในการnิun์เอกสารทั ่ ว q ไป เรา¬ttนบรรทัดใหu่lดuใช้การ
กด Enter uต่ในการสร้างเอกสาร&#ML เว็ บบราวเTอร์¬tnือเป็ นการเว้น
วรรn 1 ช่อง uลtใช้เป็ น¬ดตัดnาtนบรรทัดใหu่n้าuาวเกินtนาดบรรทัดuต่
n้าเราต้องการให้เว็บบราวเTอร์ตัดt้อnวาu n ตาuหน่ งที ่ กาหนดเรา¬tใช้
nาสั ่ ง Line %reak 6%R7 lดuuี
รปuบบดังนี
t้อnวาu00000 6%R7
ตัวอย่างที ่ 2 break_rule.htm l
6&#ML7
6&E*-76#,#LE7 %reak Rule 69#,#LE769&E*-7
6%;-<7
6P7
Miroso>t nกตัดสินlดunาลสหรัjuล้ว
lดunาลสั ่ ง ให้ Miroso>t uuกบริษั ทออกเป็ นบริษั ทu่อu q
6,7( ในu่อหน้ า t้างบนนี uu้¬tuีการกด Enter tน บรรทัดใหu่
uต่ &#ML ¬tตีnวาuเป็ นบรรทัดเดีuว)69,7
uร1ยวuu เทยuuาวา
10
การสร้ างเว็บเพจด้วยภาษา html
6P7
Miroso>t nกตัดสินlดunาลสหรัjuล้ว 6%R7
lดunาลสั ่ ง ให Miroso>t uuกบริษั ทออกเป็ นบริษั ทu่อu q 6%R7
6,7( ส่ วนu่อหน้ าใช้nาสั ่ ง ?lt@%R?gt@ ¬งtนบรรทัดใหu่ )69,7
69%;-<7
69&#ML7
คำาสั่ ง ยกเลกการB นบรรทัดใหM่ (No Break Rule)
เuื ่ อเราต้องการuกเลิกnnสuบัติการตัดnาtองเว็บบราว์เTอร์ เราสา
uารทาได้lดuใช้nาสั ่ ง 6N;%R7
lดuuีรปuบบดังนี
6N;%R70000 t้ อnวาu 000069N;%R7
ตัวอย่างที ่ 3 no_break.html
6&#ML7
6&E*-76#,#LE7 %reak Rule 69#,#LE769&E*-7
6%;-<7
6N;%R7 A#!e >ist step to5ard suess is identi>ying you o5n
leaders!ip strengt!sA6%R7 ( ก้าวuรกส่nวาuสาเร็¬ nือการรtบnnสuบัติเด่นtอง
การเป็ นผ้นาที ่ uีอu่ในตัวnn)
69N;%R7
69%;-<7
69&#ML7
n้าเราเปิ ดตัวอu่างt้างต้น uล้วu่อเว็บบราวเTอร์ด ¬tเห็นได้ว่า
บรรทัดuรก¬tไu่uีการตัดnาuu้¬tเว้นวรรnไว้ ¬นเว็บบราว์เTอร์nบnาสั ่ ง
6%R7 ¬งทาการตัดnาtนบรรทัดใหu่
คำาสั่ ง การจัดnำาแหน่ งBaงB้aควาM (Paragraph Break)
เรา¬tใช้nาสั ่ ง 6P7 ในการ¬ัดu่อหน้ าtองt้อnวาuในเว็บเn¬ T่งnา
สั ่ ง 6P7 นั น ¬tuี *ttributes เป็ น nาสั ่ ง เสริuช่วuในการ¬ัดตาuหน่ งtอง
u่อหน้ าnือ *lign$ent lดuuีรปuบบดังนี
6P *lign B Aตาuหน่ งA 7 0000 t้ อnวาu 0000 69P7
ตาuหน่ งที ่ ใช้ในการ¬ัดu่อหน้ าuีด้วuกันสาuลักษntnือ
• Le>t ¬ัดt้อnวาuชิดT้าuบรรทัด
• Center ¬ั ดt้อnวาuก่งกลางบรรทัด
• Rig!t ¬ัดt้อnวาuชิดtวาบรรทัด
lดuปกติn่าเริ ่u ต้นtอง *lign$ent ¬tอu่ที ่ Le>t nือ¬ัดt้อnวาuชิดT้าu
tองบรรทัด
ตัวอย่างที่4 paragraph.html
6&#ML7
6&E*-76#,#LE7 Paragrap! 69#,#LE769&E*-7
6%;-<7
6&27 การ¬ัดu่อหน้ า ในเว็บเn¬69&276%R7
6P *L,8NBALe>tA7 t้ อ nวาuชิดT้าuบรรทัด 69P7
uร1ยวuu เทยuuาวา
11
การสร้ างเว็บเพจด้วยภาษา html
6P *L,8NBACenterA7 t้ อnวาuก่งกลางบรรทัด 69P7
6P *L,8NBARig!tA7 t้ อnวาuชิดtวาบรรทัด 69P7
69%;-<7
69&#ML7
คำาสั่ ง จั ดวางB้aควาMก่ งกลางบรรทัด (Center)
ในการ¬ัดวางตาuหน่ งtองt้อnวาuด้วuภาษา &#ML นอก¬าก¬tใช้
nาสั ่ ง 6P *lignB Aตาuหน่ งA7 uล้วเราuังสาuารnกาหนดกล่ut้อnวาu
หรือรปภาnให้อu่ก่งกลางได้ด้วunาสั ่ ง 6CEN#ER7 ที ่ uีรปuบบกรtชับ
กว่าlดuuีรปuบบดังนี
6CEN#ER7 0000 t้ อnวาu 0000 69CEN#ER7
T่งt้อnวาuที ่ ได้¬tอu่ก่งกลางบรรทัด เหuาtกับการสร้างt้อnวาuที ่
เป็ นหั วเรื ่ อง
ตัวอย่างที ่5 center.html
6&#ML7
6&E*-76#,#LE7 Center 69#,#LE769&E*-7
6%;-<7
6&176CEN#ER7การn กอบรuเชิงป_ิบัติการ
เรื ่ อง69CEN#ER769&17
6&/76CEN#ER7 การสร้างเว็บเn¬เบื องต้น 69CEN#ER769&/7
6&)76CEN#ER7 วิทuากร อ0 ชัuวัWน์ เทีuนนาวา69CEN#ER769&)7
69%;-<7
69&#ML7
การnีเส้นแนวนaน (Horizontal Line)
ภาษา &#ML uีnาสั ่ ง ช่วuในการตีเส้นuนวนอน เnื ่ อuuกเอกสารออก
เป็ นส่วน q ให้ง่ าuต่อการดรปuบบ
เอกสารuากtน lดuuีรปuบบดังนี
6&R7
สาหรับnาสั ่ ง 6&R7 นี ¬tไu่uีuท็กปิ ด เป็ นnาสั ่ ง ในลักษntที ่ เรีuกว่า
uท็กเปิ ด T่งn้าเป็ นnา de>ault ¬tuสดงเส้นtนาด / pixels เต็u¬อภาn
uต่nาสั ่ ง 6&R7 uังuี *ttributes ช่วuในการกาหนดnวาuหนา.
nวาuuาว. การ¬ัดตาuหน่ ง uลtการกาหนดnวาuทบtองเส้น lดuuีรปuบบ
ดังนี
6&R +iCe B A nวาuหนาtองเส้น A
Widt! B A nวาuuาวtองเส้น A
*lign B Aตาuหน่ งการ¬ัดวางA
Nos!ade7
ize เป็ นการกาหนดnวาuหนาให้กับเส้น tนาดปกติ nือ /
pixels
!idth เป็ นการกาหนดnวาuuาวให้กับเส้น สาuารnกาหนดเป็ นทั ง
pixels uลt D lดuปกติ
n้าไu่กาหนด เส้น¬tuาวเต็u¬อภาn
uร1ยวuu เทยuuาวา
12
การสร้ างเว็บเพจด้วยภาษา html
"lign เป็ นการกาหนดตาuหน่ งการ¬ัดวางtองเส้น ปรtกอบด้วu
Le>t nือ การ¬ัดเส้นชิดT้าutองบรรทัด
Center nือ การ¬ัดเส้นอu่ก่งกลางบรรทัด
Rig!t nือ การ¬ัดเส้นชิดtาวtองบรรทัด
No#hade เป็ นการกาหนดuสดงเส้นทบไu่uีการuรงเงาtองเส้น
ตัวอย่างที ่6 horizontal_line.html
6&#ML7
6&E*-76#,#LE7 &oriContal Line 69#,#LE769&E*-7
6%;-<7
เส้น tนาดปกติ 6&R7 เส้น nวาuหนา = 6&R +iCeBA=A7
เส้น nวาuหนา /1 6&R +iCeBA/1A7 เส้น nวาuuาว /11 6&R
Widt!BA/11A7
เส้น nวาuuาว =1D tอง¬อภาn 6&R Widt!BA=1DA7
เส้น nวาuหนา /1 nวาuuาว /1D 6&R siCeBA/1A Widt!BA/1DA7
เส้น nวาuหนา 11 nวาuuาว /1D uลtอu่ ชิดT้าutองบรรทัด 6&R siCeBA11A
Widt!BA/1DA *lignBALe>tA7
เส้น nวาuหนา 11 uลtuสดงเส้น ทบlดuไu่uีการuรเงาtองเส้น 6&R +iCeBA11A
Nos!ade7
69%;-<7
69&#ML7
การจัดรูปแบบnัวaักษร แล:การใB้สี
คำาสั่ ง ในการกำาหนดแบบnัวaักษร ($ont Type)
nาสั ่ ง ในการกาหนดuบบตัวอักษรนั น เราใช้uท็ก 6E;N#7 T่งuท็
กนี สาuารnที ่ ¬tกาหนดได้ตั งuต่ uบบ
ตัวอักษร (Eont Eae). tนาดtองตัวอักษร (Eont +iCe) uลtสีtองตัว
อักษร (Eont Color)
การกาหนดuบบตัวอักษร หรือที ่ เรีuกว่า nอนต์ (Eont) lดuปกติn่า
เริ ่u ต้นtองเว็ บบราวเTอร์¬tกาหนดเป็ นuบบ #i$e Ne5 Ro$an เnื ่ อ
nวาuหลากหลาutองรปuบบตัวอักษรuากกว่า 1 รปuบบบน¬อภาntอง
บราวเTอร์ เราสาuารnใช้nาสั ่ ง 6E;N#7 ตาuด้วu *ttributes AE*CEA
เnื ่ อกาหนดรปuบบการuสดงผลภาษาไทuให้กับตัวอักษรtองเว็บเn¬tอง
เราได้ T่งการuสดงผลภาษาไทuนั นuีnอนต์ให้เลือกหลาuuบบตัวอu่างเช่น
*ngsana4PC. Cordia4PC. %ro5allia4PC. M+ +ans +eri> เป็ นต้น
uต่สาหรับnอนต์ที ่ เหuาtสuกับการuสดงผลภาษาไทuในเว็บบราวเTอร์ nือ
M+ +ans +eri> lดuuีรปuบบดังนี
6E;N# Eae B Aชื ่ อnอนต์ A7 000 t้ อnวาu 000 69E;N#7

n้าต้องการรtบuากกว่า 1 nอนต์ ให้กาหนดรปuบบดังนี
uร1ยวuu เทยuuาวา
13
การสร้ างเว็บเพจด้วยภาษา html
6E;N# Eae B Aชื ่ อnอนต์ 1A.ชื ่ อnอนต์ /A.0007 000 t้ อnวาu 000 69E;N#7
t้อดีtองการกาหนดnอนต์ไว้uากกว่า 1 nอนต์ ก็nือ เuื ่ อเว็บ
บราวเTอร์หาnอนต์ที ่ 1 ไu่เ¬อก็¬tหา
nอนต์ที ่ / ต่อไปตาuลาดับ
ตัวอย่างที ่7 font_face.html
6&#ML7
6&E*-76#,#LE7 Eont Eae 69#,#LE769&E*-7
6%;-<7
6E;N# EaeBA*ngsana4PCA7 uบบตัวอักษรuบบ *ngsana4PC69E;N#7
6%R7
6E;N# EaeBAMs +ans +eri>A7 uบบตัวอักษรuบบ Ms +ans
+eri>69E;N#76%R7
6E;N# EaeBACo$i +ans M+A7Eont +tyle Co$i +ans M+69E;N#7
6%R7
6E;N# EaeBA%ook$an ;ld +tyleA7Eont +tyle %ook$an ;ld
+tyle69E;N#76%R7
69%;-<7
69&#ML7
เราสาuารnกาหนดtนาดtองตัวอักษรในnาสั ่ ง 6E;N#7 lดuใช้
*ttributes A+iCeA ในภาษา &#ML กาหนดtนาดtองตัวอักษรได้ F tนาด
lดuใช้ตัวเลt 1"F เป็ นตั วกาหนด n่าเริ ่u ต้น¬tuีtนาดเป็ น )
6E;N# +iCe B AtนาดA7 000 t้ อnวาu 000 69E;N#7
ตัวอย่างที ่8 font_size.html
6&#ML7
6&E*-76#,#LE7 Eont Eae 69#,#LE769&E*-7
6%;-<7
6E;N# +iCeBA1A7Eont +iCe 169E;N#76%R7
6E;N# +iCeBA/A7Eont +iCe /69E;N#76%R7
6E;N# +iCeBA)A7Eont +iCe )69E;N#76%R7
6E;N# +iCeBA2A7Eont +iCe 269E;N#76%R7
6E;N# +iCeBA=A7Eont +iCe =69E;N#76%R7
6E;N# +iCeBA:A7Eont +iCe :69E;N#76%R7
6E;N# +iCeBAFA7Eont +iCe F69E;N#76%R7
69%;-<7 69&#ML7
การกาหนดสีให้กับตัวอักษรเราใช้ *ttributes AColorA ในการ
กาหนดสีtองตัวอักษรทาได้ / วิ 8ี nือ
10 กาหนด¬ากชื ่ อtองสีuาตรjาน เป็ นการกาหนด¬ากชื ่ อสีuาตรjาน
lดuตรง เช่น %lak. Red เป็ นต้น
/0 กาหนด¬ากรหัสเลtjาน 1: ¬tใช้การอ้างอิงเลtjาน 1: ในรtบบ
tองหuาuเลtสี R8% (Red.8reen. %lue) T่งuีรปuบบtองรหัสสีเป็ น
GRR88%% lดuใช้uทนรหัสด้วuเลtjาน 1: ในช่วง 1.
1./.).2.=.:.F.8.9.*.%.C.-.E.E ตาuลาดับ
lดuuีรปuบบดังน ี
6E;N# Color B Aชื ่ อสีuาตรjานA7 000 t้ อnวาu 000 69E;N#7
หรือ
uร1ยวuu เทยuuาวา
14
การสร้ างเว็บเพจด้วยภาษา html
6E;N# Color B AGRR88%%A7 000 t้ อnวาu 000 69E;N#7
ตัวอu่าง สีuาตราjานในการuสดงผลบนเว็บบราวเTอร์ (ในที ่ นี tอใช้
,nternet Explorer เป็ นหลัก) ทั ง ชื ่ อ
tองสี uลtรหัสเลtjาน 1: uีดังนี
ตัวอย่างที ่ font_color.html
6&#ML7
6&E*-76#,#LE7 Eont Color69#,#LE769&E*-7
6%;-<7
6E;N# olorBA%lueA7#!is is %lue Color69E;N#76%R7
6E;N# olorBA8reenA7#!is is 8reen Color69E;N#76%R7
6E;N# olorBAGEE*=11A7#!is is GEE*=1169E;N#76%R7
69%;-<7
69&#ML7
คำาสั่ ง ในการกำาหนดลักษm:nัวaั กษร (tyle)
ในภาษา &#ML uีnาสั ่ ง ที ่ ช่วuในการกาหนดลักษntตัวอักษรให้uี
nวาuเด่นชัด เnื ่ อnวาuเหuาtสuกับงานในลักษntต่าง q lดuuีรปuบบต่าง
q ดังนี
• การกาหนดตัวอักษรตัวหนา (%old) ใช้uท็ก 6%7
• การกาหนดตัวอักษรตัวเอีuง (,tali) ใช้uท็ก 6,7
• การกาหนดtีดเส้นใต้ตัวอักษร (4nderline) ใช้uท็ก 647
• การกาหนดตัวอักษรตัวnิun์ดีด (#ype5riter) ใช้uท็ก 6##7
• การกาหนดtีดเส้นnาดทับกลางตัวอักษร (+triket!roug!) ใช้uท็ก
6+7
uร1ยวuu เทยuuาวา
15
การสร้ างเว็บเพจด้วยภาษา html
• การกาหนดตัวอักษรตัวห้อu (+ubsript) ใช้uท็ก 6+4%7
• การกาหนดตัวอักษรตัวuก (+upersript) ใช้uท็ก 6+4P7
• การกาหนดตัวอักษรตัวlต (%ig) ใช้uท็ก 6%,87
• การกาหนดตัวอักษรตัวเล็ก (+$all) ใช้uท็ก 6+M*LL7
6%7 000 t้ อnวาu 000 69%7
6,7 000 t้ อnวาu 000 69,7
647 000 t้ อnวาu 000 6947
6##7 000 t้ อnวาu 000 69##7
6+7 000 t้ อnวาu 000 69+7
6+4%7 000 t้ อnวาu 000 69+4%7
6+4P7 000 t้ อnวาu 000 69+4P7
6%,87 000 t้ อnวาu 000 69%,#7
6+M*LL7 000 t้ อnวาu 000 69+M*LL7
ตัวอย่างที ่10 st!le.html
6&#ML7
6&E*-76#,#LE7 Eont Eae 69#,#LE769&E*-7
6%;-<7
uบบตัวอักษรปกติ
uบบตัวอักษรหนา 6%7%old69%76%R7
uบบตัวอักษรเอีuง 6,7,tali69,76%R7
uบบตัวอักษรtีดเสน้ ใต 6474nderline69476%R7
uบบตัวอักษรตัวnิun์ดีด 6##7#ype5riter69##76%R7
uบบตัวอักษรtีดเสน้ nาดทับกลางตัวอักษร 6+7+triket!roug!69+76%R7
uบบตัวอักษรตัวหอ้ u 6+4%7+ubsript69+4%76%R7
uบบตัวอักษรตัวuก 6+4P7+upersript69+4P76%R7
uบบตัวอักษรตัวlต 6%,87%ig69%,876%R7
uบบตัวอักษรตัวเล็ก 6+M*LL7+$all69+M*LL7
69%;-<7
69&#ML7
การกำาหนดสีพ นหลัง
การกาหนดสีnื นหลังtองเว็บเn¬เราสาuารnทาได้¬ากuท็ก
6%;-<7 lดuกาหนด¬าก *ttributes A%8ColorA lดuuีรปuบบดังนี
กาหนดสีnื นหลัง¬ากชื ่ อ สีuาตรjาน
6%;-< %8Color B A สีnื น หลังA7
0000
69%;-<7
กาหนดสีnื น หลัง¬ากเลtjาน 1:
6%;-< %8Color B AGRR88%%A7
0000
69%;-<7
ตัวอย่างที ่11 bgcolor.html
6&#ML7
6&E*-76#,#LE7 %8Color 69#,#LE769&E*-7
6H"" %;-< %8ColorBA<ello5A ""7
6%;-< %8ColorBAGEEEE11A7 #!e ,nternet is a olletion o> in>or$ation
stored in o$puters p!ysially loated t!roug!out t!e 5orld06%R7
Mu! o> t!e in>or$ation on t!e ,nternet is organiCed onto eletroni pages0
uร1ยวuu เทยuuาวา
16
การสร้ างเว็บเพจด้วยภาษา html
<ouIll bring one page to your o$puter sreen. diso(er its ontents. and !a(e
t!e option o> bringing $ore pages o> in>or$ation0
69%;-<7
69&#ML7
การกำาหนดสีให้กับnัวaักษรทั งเaกสาร
การกาหนดสีให้กับตัวอักษรทั ง เว็ บเn¬เราสาuารnทาได้¬ากuท็ก
6%;-<7 lดuกาหนด¬าก *ttributes
A#extA lดuuีรปuบบดังนี
กาหนดสีnื น หลัง¬ากชื ่ อ สีuาตรjาน
6%;-< #ext B A สีnื น หลังA7
0000
69%;-<7
กาหนดสีnื น หลัง¬ากเลtjาน 1:
6%;-< #ext B AGRR88%%A7
0000
69%;-<7
ตัวอย่างที ่12 bod!_te"t.html
6&#ML7
6&E*-76#,#LE7 &eading 69#,#LE769&E*-7
6H"" %;-< #extBARedA ""7
6%;-< #extBAGEE1111A7 #!e ,nternet is a olletion o> in>or$ation stored
in o$puters p!ysially loated t!roug!out t!e 5orld06%R7
Mu! o> t!e in>or$ation on t!e ,nternet is organiCed onto eletroni pages0
<ouIll bring one page to your o$puter sreen. diso(er its ontents. and !a(e
t!e option o> bringing $ore pages o> in>or$ation0
69%;-<7
69&#ML7
การกำาหนดเคร ่ aงหMายหัวB้aแล:เลBลำาดับ
คำาสั่ ง ในการแสดงรายการแบบÎM่Mีลำาดับ (%nordered Li#t)
4nordered List หรือ %ullet List นั น ในภาษา &#ML ได้กาหนดnา
สั ่ ง ในการอานวunวาuสtดวกในการ
สร้าง %ullet tนไว้ด้ วu เnื ่ อuสดงเnรื ่ องหuาuหน้ าหัวt้อเรื ่ องหรือลาดับ
tองราuการต่าง q lดuไu่uีการ
เรีuงลาดับ lดuuีรปuบบดังนี
64L7
6L,7 000 t้ อnวาu 000
6L,7 000 t้ อnวาu 000
6L,7 000 t้ อnวาu 000
000 00000000000
694L7
ตัวอย่างที ่13 bullet1.html
uร1ยวuu เทยuuาวา
17
การสร้ างเว็บเพจด้วยภาษา html
6&#ML7
6&E*-76#,#LE7 List ,te$ 69#,#LE769&E*-7
6%;-<7
64L7'ie5ing t!e Na(igator Windo5
6L,7Windo5 and >ra$es
6L,7Colors and underlining
6L,7Co$pany logo
6L,7Progress bar
6L,7+tatus $essage area
694L7
69%;-<7
69&#ML7
เราuังสาuารnรtบชนิ ดtองเnรื ่ องหuาuได้ด้วu *ttributes A#ypeA ใน
uท็ก 64L7 หรือ 6L,7 lดuuี
รปuบบดังนี
64L #ype B Aชนิ ดtองเnรื ่ องหuาuA7
6L, #ype B Aชนิ ดtองเnรื ่ องหuาuA7
ชนิ ดtองเnรื ่ องหuาuuีด้วuกัน ) uบบ ดังนี
ตัวอย่างที ่1# bullet2.html
6&#ML7
6&E*-76#,#LE7 List ,te$ 69#,#LE769&E*-7
6%;-<7
64L #ypeBACirleA7วิวัWนาการnอunิวเตอร์
6L,7unหลอดส qqากาn
6L,7 unทรานTิสเตอร์
6L,7unวง¬รรวu
6L,7 unวีuอลเอสไอ
6L,7 unเnรือt่าu
694L7
69%;-<7
69&#ML7
คำาสั่ ง ในการแสดงรายการแบบเป็ นลำาดับ (&rdered Li#t)
เราสาuารnuสดงราuการuบบเป็ นลาดับ nือ ;rdered List หรือ
Nu$ber List ได้ lดuการใช้ตัวเลtหรือ
uร1ยวuu เทยuuาวา
18
การสร้ างเว็บเพจด้วยภาษา html
ตัวอักษร
รเป็ นตัวกาหนดuสดงลาดับ lดuuีรปuบบดังนี
6;L #ype B Aชนิ ดtองตัวเลtA +tart B A ตัวเลtเริ่uต้น A7
6L,7 000 t้ อnวาu 000
6L,7 000 t้ อnวาu 000
6L,7 000 t้ อnวาu 000
000 00000000000
69;L7
ชนิ ดtอง #ype กาหนดเลtลาดับได้ดังนี
ตัวอย่างที ่15 order_list.html
6&#ML7
6&E*-76#,#LE7 ;rder List 69#,#LE769&E*-7
6%;-<7
6;L #ypeBA,A7My o$puter in $y drea$
6L,7,nter Pentiu$ 2 proessor /01 8&C
6L,7R-R*M /=: M%
6L,7&arddisk =1 8% *#*"111
6L,7=/3 C-"Ro$ -ri(e
6L,7+peakers (Labte) 1:1 Watt
6L,7*sus 8eEore) :2 M%
6L,7Creati(e +ound %aster
69;L7
69%;-<7
69&#ML7
การสร้างnาราง
คำาสั่ ง ในการสร้างnาราง (Ta'le)
การสร้างเว็บเn¬ในปั ¬¬ บันuีการนาตารางเt้าuาเกี ่ uวt้องกับหลาu
q ส่วน ตั ง uต่การสร้างตารางเnื ่ อuสดงnวาuสัunัน8์ในลักษntunว
(Ro5) uลtnอลัuน์ (Colu$n) รวunงการuบ่งtอบเtตให้กับt้อnวาuเnื ่ อ
การ¬ากัดuลtnวบnut้อnวาuให้อu่ในส่วนที ่ เราต้องการnาสั ่ ง สาหรับ
สร้างตารางปรtกอบด้วunาสั ่ ง ดังนี
uร1ยวuu เทยuuาวา
19
การสร้ างเว็บเพจด้วยภาษา html
สาหรับlnรงสร้างtองnาสั ่ ง ในการสร้างตารางuีดังนี
6#*%LE7
6C*P#,;N7 t้ อnวาuกากับตาราง 69C*P#,;N7
6#R7
6#&7 t้ อnวาuส่วนหัว 69#&7
00000000000000000000
69#R7
6#R7
6#-7 t้ อnวาuส่วนtองt้ อuล 69#-7
000000000000000000000000
69#R7
6#R7
6#-7 t้ อnวาuส่วนtองt้อuล 69#-7
000000000000000000000000
69#R7
000000000000000000000000
69#*%LE7
ตัวอย่างที ่16 table1.html
6&#ML7
6&E*-76#,#LE7 #able #ag 69#,#LE769&E*-7
6%;-<7
6CEN#ER7 Exa$ple -ata
6&/7Report +ale /11169&/7
6#*%LE7
6#R7
6#&7Mont!69#&7 6#&7+ale *69#&7 6#&7+ale
%69#&7
69#R7
6#R7
6#-7January69#-7 6#-7=1169#-7
6#-781169#-7
69#R7
6#R7
6#-7Eebruary69#-7 6#-71/1169#-7
6#-7111169#-7
69#R7
6#R7
6#-7Mar69#-7 6#-791169#-7 6#-721169#-7
69#R7
69#*%LE7
69CEN#ER7
69%;-<7
69&#ML7
uร1ยวuu เทยuuาวา
20
การสร้ างเว็บเพจด้วยภาษา html
เราuังสาuารnใช้ *ttributes เnื ่ อให้เว็บบราวเTอร์uสดงตารางให้ชัดเ¬น
uิ ่ง tน *ttributes ต่าง q uีดังนี
การกาหนดn่าต่าง q tอง *ttributes ที ่ กล่าวuาuล้ว nวาu
uตกต่างtองการกาหนดn่าเป็ น pixel uลtเป็ น perent นั นuีu)=88
nวาuuตกต่างกันดังนี
• nิกเTล (Pixel) การกาหนดn่าเป็ นuบบnิกเTล เuื ่ อการลดtนาด
tองเว็บบราวเTอร์ตาราง¬tไu่ลดtนาดตาunวาuกว้าง หรือuาวtอง
เว็ บบราวเTอร์
• เปอร์เT็นต์ (Perent หรือ D) n้ากาหนดn่าในลักษnttอง
Perent เuื ่ อบราวเTอร์uีการลดtนาดลง tนาดtองตาราง¬tลด
สัดส่วนตาutนาดtองตัวเว็บบราวเTอร์ด้วu
ตัวอย่างที ่17 table2.html
6&#ML7
6&E*-76#,#LE7 #able #ag 69#,#LE769&E*-7
6%;-<7
6CEN#ER7 Exa$ple -ata
6&/7Report +ale /11169&/7
6#*%LE %orderBA)A Cell+patingBA=A CellPaddingBA)A7
6#R7
6#&7Mont!69#&7 6#&7+ale *69#&7 6#&7+ale
%69#&7
69#R7
6#R7
6#-7January69#-7 6#-7=1169#-7 6#-781169#-7
69#R7
6#R7
6#-7Eebruary69#-7 6#-71/1169#-7
6#-7111169#-7
69#R7
6#R7
6#-7Mar69#-7 6#-791169#-7 6#-721169#-7
69#R7
69#*%LE7
uร1ยวuu เทยuuาวา
21
การสร้ างเว็บเพจด้วยภาษา html
69CEN#ER7
69%;-<7
69&#ML7
คำาสั่ ง ในการกำาหนดสี แล:การจัดnำาแหน่ งBaงB้aMูลในnาราง
ในการสร้างตารางในภาษา &#ML uี *ttributes ที ่ ช่วuเnuิ ่ สีสันuลt
nวาuเหuาtสuให้กับตาราง nือ
• *lign ใช้กาหนดการ¬ัดตาuหน่ งtองt้อuลในตางราง ไu่ว่ า¬tเป็ น
t้อnวาuหรือภาn กาหนดได้ ) ลักษnt
Le>t กาหนดการ¬ัดวางuบบชิดtอบT้าutองตาราง
Rig!t กาหนดการ¬ัดวางuบบชิดtอบtาวtองตาราง
Center กาหนดการ¬ัดวางuบบก่งกลางtองตาราง
• %8Color เป็ นการกาหนดnื นสีภาuในตารางที ่ อu่ในunวนั น
ตัวอย่างที ่18 table3.html
6&#ML7
6&E*-76#,#LE7 #able #ag 69#,#LE769&E*-7
6%;-<7
6CEN#ER7
6&/7Report +ale /11169&/7
6#*%LE %orderBA)A Cell+patingBA=A CellPaddingBA)A7
6C*P#,;N *lingBA%otto$A7 +u$$ation +ale Report
69C*P#,;N7
6#R *lingBACenterA %8ColorBAW!itegreenA7
6#&7Mont!69#&7 6#&7+ale *69#&7 6#&7+ale
%69#&7
69#R7
6#R *lignBACenterA %8ColorBA<ello5A7
6#-7January69#-7 6#-7=1169#-7
6#-781169#-7
69#R7
6#R *lignBACenterA %8ColorBA+kyblueA7
6#-7Eebruary69#-7 6#-71/1169#-7
6#-7111169#-7
69#R7
6#R *lignBACenterA %8ColorBAPinkA7
6#-7Mar69#-7 6#-791169#-7 6#-721169#-7
69#R7
69#*%LE7
69CEN#ER7
69%;-<7
69&#ML7
การนำ ารูปภาพMาใB้กับเว็บเพจ
Bน ดBaงรูปภาพ
การนารปภาnuาใส่ในเว็ บเn¬เป็ นส่วนหน่ งที ่ สร้างnวาuน่ าสนใ¬ให้
กับเว็ บเn¬เป็ นอu่างuาก lดuเ0nาt
uร1ยวuu เทยuuาวา
22
การสร้ างเว็บเพจด้วยภาษา html
การสร้างเว็บเn¬ในป¬ั ¬ บันก้าวไปnงtัน้ uีการตอบlต้กับผ้ที ่ เt้าชuเว็บเn¬
หรือที ่ เรีuกกว่า อินเตอร์uอ็nทีn
(,nterati(e) การนารปภาnในใช่ในเว็บเn¬uงิ ่ uีnวาu¬าเป็ นuากuงิ ่ tน
ในการuสดงผลในเว็บเn¬นั น ภาnในuบบที ่ เหuาtสunือภาnในuบบ 8,E
หรือ JPE8 เนื ่ อง¬ากภาnที ่
ได้¬tuีtนาดเล็ก ทาให้uสดงผลได้อu่างรวดเร็ว
10 8rap!is ,nter!ange Eor$at (8,E) เป็ นภาnที ่ uีการบีบอัด
t้อuล ภาn¬งuีtนาดเล็ก uต่สีที ่
รปภาnในuบบ 8,E นั นสาuารnuสดงผลได้เnีuง /=: สี ¬ งเหuาtกับภาn
ในลักษntภาnวาด ไnล์ภาnuบบ
8,E uีอu่ด้วuกัน / ชนิ ด nือ
" 8,E8Fa เป็ นไnล์ 8,E ทั ่ ว ไป
" 8,E89a เป็ นไnล์ 8,E ที ่ สาuารnเnลื ่ อนไหวได้ หรือที ่ เรีuกว่า
8,E *ni$ation
ไnล์ภาnuบบ 8,E ทั ง สองชนิ ดสาuารnปรับการuสดงผลได้ ) uบบ
ได้uก่
" uบบ ,nterlaed ¬tทาการuสดงภาnออกเป็ นช่วง q uทนที ่
¬tuสดงไล่ลงuา¬ากบนลงล่างตาuปกติ
" uบบ Progressi(e ¬tทาการuสดงภาnuบบหuาบ q ก่อน
uล้วn่อu q ชัดtน
" uบบ #ransparent %akground ¬tuสดงภาnlดuไu่uีnื น
0ากหลัง
/0 Joint P!otograp!i Experts 8roup (JPE8 หรือ JP8) เป็ น
รปภาnที ่ nกบีบอัดt้อuลไว้ lดuใช้เทnนิ n Lossy T่งnnภาntองภาnที ่ ได้
¬tuีnnภาnลดลงตาutนาดที ่ บีบอัดt้อuล uต่ไu่¬ากัด¬านวนสี ไnล์ภาn
uบบ JPE8 เหuาtสาหรับภาnในลักษntภาnn่าu
คำาสั่ ง ในการใส่รูปภาพในเว็บเพจ (()age)
เรา¬tใช้uท็ก 6,M87 ในการนาภาnเt้าuาuสดงผลในเว็บเn¬ lดuuี
รปuบบดังนี
6,M8 +RC B Aไnล์ภาnA7
สาหรับ *ttributes ที ่ ใช้รtบตาuหน่ งtองรปภาnnือ +RC หรือ
+oure เราสาuารnที ่ ¬tชี ตาuหน่ งที ่ เก็บ
ภาnได้ เช่น 6,M8 +RCBA!ttpK995550bpts0org9i$age9logo0gi>A7
เป็ นต้น
ตัวอย่างที ่1 image1.html
6&#ML7
uร1ยวuu เทยuuาวา
23
การสร้ างเว็บเพจด้วยภาษา html
6&E*-76#,#LE7 ,$age 69#,#LE769&E*-7
6%;-<7
6CEN#ER7 6,M8 +RCBA$ypi0LpgA7 69CEN#ER7
69%;-<7
69&#ML7
n้าเราต้องการใส่nาอ8ิบาuภาn ภาษา &#ML uี *ttributes ที ่ ช่วu
ทาในส่วนนี nือ *L# (*lternati(e #ext) ปรtluชน์ สาหรับ *ttributes นี
nือ เuื ่ อผ้ใช้เว็บบราวเTอร์ที ่ ไu่รองรับการuสดงผลในuบบกราnnิ n ในส่วน
tองภาn¬tuีt้อnวาutนuาอ8ิบาuในส่วนนั น lดuuีรปuบบดังนี
6,M8 +RC B Aไnล์ภาnA *L# B Anาอ8ิบาuA7
ตัวอย่างที ่20 image2.html
6&#ML7
6&E*-76#,#LE7 ,$age 69#,#LE769&E*-7
6%;-<7
6CEN#ER7 6,M8 +RCBA $ypi0LpgA *L#BAรปใnรเอ่uA769CEN#ER7
69%;-<7
69&#ML7
การนำ ารูปภาพทำาเป็ นพ นหลัง
เราสาuารnนารปภาnไปปรtกอบเป็ นnื นหลังหรือที ่ เรีuกว่าวอลล์
เปเปอร์ (Wall Paper) tองเว็บเn¬ได้ lดuกาหนดในส่วนtองuท็ก %ody
T่งใช้ *ttributes %akground lดuuีรปuบบดังนี
6%;-< %akground B Aไnล์ภาnA7
ตัวอย่างที ่21 image_background.html
6&#ML7
6&E*-76#,#LE7 Wall Paper 69#,#LE769&E*-7
6%;-< %akgroundBAlogoMbg0gi>A7
6CEN#ER7 We are students69CEN#ER7
69%;-<7
69&#ML7
การเB ่ aMโยงเว็บเพจ (Link)
การเชื ่ อuluงเว็บเn¬ หรือที ่ เรีuกว่าลิงn์ (Link) nือว่าเป็ นnnสuบัติที ่
สาnัqtองภาษา &#ML ดัง¬tเห็นได้¬ากเว็บเn¬ทั ่ ว q ไป ¬ ดเชื ่ อuluง
เว็ บเn¬อา¬¬tเป็ นt้อnวาuหรือรปภาnก็ได้
การสร้างจดเB ่ aMโยงB้aควาM (Text Link)
ในการเชื ่ อuluงเว็บเn¬เรา¬tใช้uท็ก 6*7 lดuการกาหนดt้อnวาu
ในเอกสาร &#ML เป็ น¬ดเชื ่ อuluง
uร1ยวuu เทยuuาวา
24
การสร้ างเว็บเพจด้วยภาษา html
lดuuีรปuบบดังนี
6* &REE B A4RLA7 t้ อ nวาu 69*7
* &REE หuาunง &ypertext Re>erene ส่วน 4RL (4ni>or$
Resoure Loation) nือ รปuบบuาตรjานที ่ เป็ นuหล่งที ่ tอใช้บริการ
อินเทอร์เน็ ต lดuเtีuนอu่ในรปuบบดังนี
lปรlตnอลK99 ชื ่ อ luส0lดเuน9 ชื ่ อ ไnล์
ตัวอu่างเช่น
!ttpK995550$iroso>t0o$9 >tpK99>tp0nete0or0t!9
!ttpK995550nort!0rit0a0t!9index0!t$l
ตัวอย่างที ่22 link1.html
6&#ML7
6&E*-76#,#LE7Link69#,#LE769&E*-7
6%;-<7
6CEN#ER76&/7สภาบันการnกษา69&/769CEN#ER76%R7
6* &REEBA!ttpK995550nort!0rit0a0t!9A7สnาบันเทnlนlลuีราชuงnล
วิ ทuาเtตภาnnาuัn69*76%R7
6* &REEBA!ttpK995550ru0a0t!9A7uหาวิทuาลัuราunาuหง69*76%R7
6* &REEBA!ttpK995550u0a0t!9A7¬nาลงกรn์ uหาวิทuาลัu69*76%R7
6* &REEBA!ttpK995550tu0a0t!9A7uหาวิทuาลัu8รรunาสตร์69*76%R7
69%;-<7
69&#ML7
การสร้างจดเB ่ aMโยงกับรูปภาพ (*raphi+ Link)
เป็ นการกาหนดให้รปภาnเป็ น¬ดเชื ่ อuluง lดuuีรปuบบดังนี
6* HR,$ B -%RL-76,M8 RC B - B ่ a ÎHล- 769*7
ตัวอย่างที ่23 link2.html
6&#ML7
6&E*-76#,#LE7Link69#,#LE769&E*-7
6%;-<7
6CEN#ER7 6&/7หนังสือnิun์ไทu69&/7
6P7
6* &REEBA!ttpK995550ko$!adluek0o$9A7
6,M8 +RCBAko$!adluek0gi>A %;R-ERBA1A7
69*7
6P7
6* &REEBA!ttpK995550t!airat!0o$9A7
6,M8 +RCBAt!airat!0gi>A %;R-ERBA1A7
69*7
69CEN#ER7
69%;-<7
69&#ML7
การกำาหนดสีให้กับจดเB ่ aMโยงเว็บเพจ
uร1ยวuu เทยuuาวา
25
การสร้ างเว็บเพจด้วยภาษา html
การสร้างเว็บเn¬ด้วuภาษา &#ML นั น ¬ ดเชื ่ อuluงt้อnวาuที ่ เรา
สร้างtน¬tuีสีที ่ uตกต่าง¬ากปกติnร้อuทั ง uีเส้นใต้บ่งบอก¬ดเชื ่ อuluงด้วu
เรา¬tกาหนดสีtอง Link ในเว็ บเn¬¬ากuท็ก %ody lดuuีรปuบบดังนี
6%;-< *ttributes B A ชื ่ อ สีuาตราjานA7
หรื อ
6%;-< *ttributes B AGRR88%%A7
*ttributes ที ่ ใช้ในการกาหนดสีuีด้วuกันดังนี
%8C;L;R กาหนดสีnื นหลังให้กับเว็บเn¬
#E3# กาหนดสีตัวอักษรปกติ
L,NN กาหนดสีตัวอักษรที ่ เป็ น¬ดเชื ่ อuluง
'L,NN ('isited Link) กาหนดสีตัวอักษรที ่ ทาการnลิกเnื ่ อไปuัง
เป้ าหuาuuล้ว
*L,NN (*ti(e Link)กาหนดสีตัวอักษรที ่ กาลังnลิกไปuังเป้ าหuาu
ตัวอย่างที ่2# link3.html
6&#ML7
6&E*-76#,#LE7Link69#,#LE769&E*-7
6%;-< #E3#BARE-A L,NNBA%L4EA 'L,NNBA8REENA *L,NNBA;R*N8EA7
6CEN#ER76&/7สภาบันการnกษา69&/769CEN#ER76%R7
6* &REEBA!ttpK995550nort!0rit0a0t!9A7สnาบันเทnlนlลuีราชuงnล
วิ ทuาเtตภาnnาuัn 69*76%R7
6* &REEBA!ttpK995550ru0a0t!9A7uหาวิทuาลัuราunาuหง69*76%R7
6* &REEBA!ttpK995550u0a0t!9A7¬nาลงกรn์ uหาวิทuาลัu69*76%R7
6* &REEBA!ttpK995550tu0a0t!9A7uหาวิทuาลัu8รรunาสตร์69*76%R7
69%;-<7
69&#ML7
การเB ่ aMโยงร:หว่างเว็บเพจ
ในการรtบตาuหน่ งที ่ อu่สาหรับลิงn์นั น n้าอu่ต่างเว็บไTต์กัน¬tต้อง
รtบไว้ให้nรบn้วน ตาuตัวอu่างที ่ //"/2 ที ่ ผ่านuา uต่n้าเป็ นไnล์ &#ML
ในเว็ บไTต์เดีuวกันเราสาuารnลtชื ่ อเว็บไTต์ได้ เหลือเnีuงชื ่ อไnล์ก็nอ
ตัวอย่างที ่25 link3.html
6&#ML7
6&E*-76#,#LE7Link69#,#LE769&E*-7
6%;-<7
6CEN#ER76&/7สภาบันการnกษา69&/769CEN#ER76%R7
6* &REEBA!ead0!t$lA7 ตัวอu่างท ี ่ 169*76%R7
6* &REEBAparagrap!0!t$lA7 ตัวอu่างท ี ่ 269*76%R7
6* &REEBA >ontMsiCe0!t$lA7 ตัวอu่างท ี ่ 869*76%R7
6* &REEBA orderMlist0!t$lA7 ตัวอu่างท ี ่ 1=69*76%R7
6* &REEBA table)0!t$lA7 ตัวอu่างท ี ่ 1869*76%R7
69%;-<7
69&#ML7
uร1ยวuu เทยuuาวา
26
การสร้ างเว็บเพจด้วยภาษา html
การสร้างเ¡รu (Frame) uอการlบงuu้าจอIองเว็บเพ็จออกเป็ uสวuuาง
_ ทางด้าuluวu งlñ.luวuอuuาuท เราu้องการ ซ ง¡uluñ.สวuสาuารulสดง
nñได้อยางอสร. lñ.สาuารulสดงnñได้uากกวา l ไ¡ñ เราสาuารu¡1้luบ
เñ อu(Scroll Bar) เñ อuดI้อuñ¡uluñ.เ¡รuได้ การสร้างเ¡รuเป็ uการlบงสวu
Iองพ uท lสดงnñuu้าจออยางuปร.สทüภาพ uอกจากu ยงสาuารuเ1 อuÏยงไป
ยง ไ¡ñlñ.เว็บไซดอ u _ ได้อกด้วย
1. รู ปแLLnาJ่ งการJร้าง Frame
การสร้างเ¡รu (Frame) uอการlบงuu้าจอIองเว็บเพ็จออกเป็ uสวuuาง
_ ทางด้าuluวu งlñ.luวuอuuาuท เราu้องการ ซ ง¡uluñ.สวuสาuารulสดง
nñได้อยางอสร. lñ.สาuารulสดงnñได้uากกวา l ไ¡ñ เราสาuารu¡1้luบ
เñ อu(Scroll Bar) เñ อuดI้อuñ¡uluñ.เ¡รuได้ Ïดยท วไปuาส ง ท ¡1้¡uการสร้าง
เ¡รuuดงuอไปu uอ
<FRAMESET>........</FRAMESET> ¡1้¡uการlบงสวuIองเ¡รu
เป็ uñกษu.luวuอulñ.
luวu ง(ROWS AND COLS) uรปlบบuาส งดงu
<FRAMESET COLS ="VALUE l,VALUE 2,......VALUE n"> lบง
uu้าจอuาuluวu ง
<FRAMESET ROWS ="VALUE l,VALUE 2,......VALUE n"> lบง
uu้าจอuาuluวuอu

<FRAME > ¡1้¡uการกาuuดการlสดงnñ¡uluñ.เ¡รu uรปlบบดงu
<FRAME NAME="1 อเ¡รu" SRC="1 อไ¡ñ.html"> เป็ uสวuท ¡1้lสดง
uร1ยวuu เทยuuาวา
27
การสร้ างเว็บเพจด้วยภาษา html
ไ¡ñ html ¡uกรu ท u้อง
การlสดงไ¡ñ¡ดก็¡u้กาuuดเร ยกไ¡ñu u _ uาuu้องการ
2. ประเnทการJร้างเnรมแLLตาง _
2.1 การแLง¡น้าจอโดยกา¡นด¡น1ยตามn1ามละเอียด
การlบงuu้าจอÏดยกาuuดuuวยuาuuวาuñ.เอยดจอภาพ จ.uuuวยเป็ u
พกเซñ ( Pixel )เ1u 64• X 4S• , S•• X 6•• lñ. l,•24 X 76S เป็ uu้u
การlบงuu้าจอจ.u้องuาu งuงn้¡1้ท วไปวา สวu¡uQกาuuดuวาuñ.เอยด
uาuร€าuก พกเซñ uวรออกlบบuu้าเว็บเพ็จ¡u้เuuา.สulñ.uuวาu สวยงาu
Ïดยuรปlบบการ¡1้งาuuาส งดงu uอ
<FRAMESET COLS/ROWS = •VALUE l,VALUE 2,......VALUE
n¨>
uวอยางการ¡1้งาu
<FRAMESET COLS = •4••,l5•,l5•¨> lบงuu้าจอuาuluวu งเป็ u 3
สวu uอ 4••,l5•,l5•
<FRAMESET COLS = •4••,4••¨> lบงuu้าจอuาuluวu งเป็ u 2 ส วu
uอ 4••,4••
<FRAMESET ROWS = •2••,2••,2••¨> lบงuu้าจอuาuluวuอuเป็ u
3 สวu uอ 2••,2••,2••
<FRAMESET ROWS = •35•,35•¨> lบงuu้าจอuาuluวuอuเป็ u 2
สวu uอ 35•,35•
ต1อยาง
uร1ยวuu เทยuuาวา
28
การสร้ างเว็บเพจด้วยภาษา html
Code Iองuวอยางการlบงเ¡รulบบกาuuดIuาด
nññพทจากการlบงเ¡รu
2.2 การแLง¡น้าจอโดยกา¡นด¡น1ยตามเปอรเYนต
การlบงuu้าจอÏดยกาuuดuuวยเป็ uเปอรเซ็uu (‚) uu้าจอจ.uกlบง
สวuuาuเปอรเซ็uuท กาuuด สาuารuกาuuดuาuluวuอuuร อluวu งก็ได้ Ïดย
uรปlบบการ¡1้uาส งดงu
<FRAMESET COLS/ROWS = •VALUE l,VALUE
2,......VALUE n¨>
uร1ยวuu เทยuuาวา
29
การสร้ างเว็บเพจด้วยภาษา html
uวอยางการ¡1้งาu
<FRAMESET COLS = "5•‚,25‚,25‚"> lบงuu้าจอuาuluวu งเป็ u
3 สวu uอ 5•‚,25‚,25‚
<FRAMESET COLS = "5•‚,5•‚"> lบงuu้าจอuาuluวu งเป็ u 2
สวu uอ 5•‚,5•‚
<FRAMESET ROWS = "5•‚,25‚,25‚"> lบงuu้าจอuาuluวuอu
เป็ u 3 ส วu uอ 5•‚,25‚,25‚
<FRAMESET ROWS = "5•‚,5•‚"> lบงuu้าจอuาuluวuอuเป็ u 2
สวu uอ 5•‚,5•‚
ต1อยาง

Code Iองuวอยางการlบงเ¡รulบบ
กาuuดเป็ uเปอรเซ็uu
uร1ยวuu เทยuuาวา
30
การสร้ างเว็บเพจด้วยภาษา html
nññพทจากการlบงเ¡รu
2.3 การแLง¡น้าจอโดยกา¡นดดอกจนทรร1ม
การlบงuu้าจอÏดย¡1้เuร องuuายดอกจuทรวu เป็ uการlบงuu้าจอÏดย
กาuuดuาuuวาuสuพuüIองluñ.เ¡รu ซ งดอกจuท (ƒ) uuายuงกว้าง
ยาวuาuuวาuสuพuüIองเ¡รu uวอยางเ1u
<FRAMESET COLS = • 5•‚ , ƒ ¨ > lบงuu้าจอuาuluวu งเป็ u 2
สวu uอ 5•‚,5•‚
<FRAMESET COLS = •2•• , ƒ ,¨> lบงuu้าจอuาuluวu งเป็ u 2
สวu uอ 2•• พกเซñlñ.สวuท เuñอท งuuดIองuu้าจอ
<FRAMESET COLS = • ƒ , ƒ , ƒ ¨> lบงuu้าจอuาuluวu งเป็ u 3
สวu ส วuñ.เทา _ กu
<FRAMESET ROWS = • 5•‚ , ƒ ¨ > lบงuu้าจอuาuluวuอuเป็ u
uร1ยวuu เทยuuาวา
31
การสร้ างเว็บเพจด้วยภาษา html
2 สวu uอ 5•‚,5•‚
<FRAMESET ROWS = •2•• , ƒ ,¨> lบงuu้าจอuาuluวuอuเป็ u 2
สวu uอ 2•• พกเซñlñ.สวuท เuñอท งuuดIองuu้าจอ
<FRAMESET ROWS = • ƒ , ƒ , ƒ ¨> lบงuu้าจอuาuluวuอuเป็ u 3
สวu ส วuñ.เทา _ กu
ต1อยาง
Code Iองuวอยางการlบงเ¡รulบบกาuuดเป็ uดอกจuทร
uร1ยวuu เทยuuาวา
32
การสร้ างเว็บเพจด้วยภาษา html
nññพทจากการlบงเ¡รu
2.4 การกา¡นดÌมใ¡้มีการปรLขนาดของเnรม
จากการสร้างเ¡รuท nาuuา เu อร uÏปรlกรulñ้วเราสาuารuปร บIuาดIอง
เ¡รuเพ อเñ อuดI้อuñ¡uเ¡รu¡ดเ¡รuuu ง Ïดยการ¡1้เuาสuñกlñ้วñากบร เวu
เส้ulบงเ¡รuได้ u้าร uÏปรlกรu¡uuจ.ได้uu้าจอการlบงเ¡รuเuuอuเดu lu
u้าไuu้องการ¡u้ปร บIuาดIองเ¡รu ¡u้กาuuดรปlบบIอง uาส งดงuอไปu
<FRAME NAME="1 อเ¡รu" SRC="1 อไ¡ñ.html¨ NORESI„E> NORESI„E
lท็กท ¡1้กาuuดไu¡u้uการปร บIuาดIองเ¡รu
3. การJร้างเnรมยอย
การสร้างเ¡รuยอย uอการสร้างเ¡รuเพ uI uภาย¡uเ¡รuปกuuากกวาuu ง
เ¡รu เพ อทา¡u้สาuารu¡1้งาuได้ส.ดวกlñ.จดuu้าจอได้เuuา.สuuากย งI u
เป็ uการสร้างlท็ก <FRAMESET>ซ้อuไว้¡ulท็ก <FRAMESET> อกทuu ง
ต1อยาง
uร1ยวuu เทยuuาวา
33
การสร้ างเว็บเพจด้วยภาษา html
เ¡รu¡uQlบงuาuluวu ง Ïดยlบงพ uท เป็ uสองสวuuอ 2•‚ lñ. S•‚
¡uสวuIอง 2•‚จ.เร ยกไ¡ñu้u0บบท 1 อ frame…a.html uา¡สไว้ สวuพ uท ท
เuñอจ.lบงออกเป็ uสองส วuuอ 2•‚lñ. S•‚ พ uท 2•‚ จ.เร ยกไ¡ñ
u้u0บบท 1 อ frame…b.html uา¡สไว้ ส วuอก S•‚ จ.เร ยกไ¡ñu้u0บบท 1 อ
frame…c.html uา¡สไว้
nññพท
uร1ยวuu เทยuuาวา
34
การสร้ างเว็บเพจด้วยภาษา html
4. การเช ่ อมโยงnายในเnรม
การเ1 อuÏยงภาย¡uเ¡รuเป็ uการเ1 อuÏยงไ¡ñเu อทาการuñกเuาสท
รายการท u้องการlñ้วจ.ปราก_nññพüIองไ¡ñuร อuร อเว็บไซด ท ทาการเ1 อu
Ïยงไป Ïดยทาการสร้างไ¡ñเป็ u 2 ส วuuอ ส วuท uu งสร้างไ¡ñเพ อทาการlบง
เ¡รuสาuร บlสดงการเ1 อuÏยง สวuท สองเพ อทาการกาuuดการเ1 อuÏยง¡u
เ¡รuÏดยการอ้างอง1 อเ¡รu
ต1อยาง
5. การแJดงผลปลายทาง
การlสดงnñปñายทาง เป็ uการlสดงnñÏดยไuuาu งuง1 อเ¡รuuาง _
เuuอuuวอยางท nาuuาluจ.¡1้วüอ้างuงlบบพเuษซ งuดงuอไปu uอ
<A HREF = "1 อไ¡ñuร อ1 อเว็บไซด " TARGET="รปlบบการ
lสดงnñ">I้อuวาu</A> ซ งรปlบบการlสดงnñuดงuอไปu
uร1ยวuu เทยuuาวา
35
การสร้ างเว็บเพจด้วยภาษา html
Jร้างเJียงดนตรี Lนเ1Lเพจ
แLL Background Sound
uร1ยวuu เทยuuาวา
36
การสร้ างเว็บเพจด้วยภาษา html
รูปแLL <BGSOUND SRC="......." LOOP=n>
เป็ uการ¡สเสยงเพñง ทาเป็ u Background ¡u้กบÏฮuเพจ เu อn้เย ยu1u
เป ดเI้าuา uuจ.ทาการ Ïuñดเพñง ¡u้Ïดย อuÏuuu Ïดย
BGSOUND เป็ uรปlบบการ¡สเสยงเพñงIอง Microsoft Internet
Explorer
SRC ¡ส uาluuง ท อย Iองไ¡ñเสยง เพñงท u้องการ
LOOP จาuวuรอบท u้องการ¡u้เñu u้าu้องการ¡u้เñuไปเร อย
_ ¡u้¡ส Infinite
ต1อยาง <BGSOUND SRC="sound.mid" LOOP=5>
แLL EMBED
รูปแLL <EMBED SRC="......" HIDDEN=TRUE HIGHT=n
WIDTH=n CONTROLS=COLSOLE/SMALLCONSOLE
AUTOSTART=TRUE LOOP=TRUE/n>
เป็ uการ¡สเสยงเพñง ทาเป็ u background ¡u้กบÏฮuเพจIอง Netscape
Navigator Ïดย
† EMBED เป็ uรปlบบการ¡สเสยงเพñงIอง Netscape Navigator
† SRC ¡ส uาluuง ท อย Iองไ¡ñเสยง เพñงท u้องการ
† HIDDEN เป็ uการซ้อuป uuวบuuการเñuเพñง u้าไuu้องการก็ไu
u้อง¡สเI้าไปเñย เu อ¡สuาส งu lñ้ว uาส งอ uuอ hight,width,controls ก็ไu
u้อง¡สเI้าไป
† HIGHT เป็ uการกาuuดuวาuสง¡u้กบlnงuวบuu
uร1ยวuu เทยuuาวา
37
การสร้ างเว็บเพจด้วยภาษา html
† WIDTH เป็ uการกาuuดuวาuกว้าง¡u้lnงuวบuu
† CONTROLS กาuuดรปlบบlnงuวบuu Ïดย smallconsole
เป็ ulบบอยางยอ ส วu console เป็ uเu็uรปlบบ
† - AUTOSTART กาuuดการเñuเพñงÏดยอuÏuuu (TRUE) u้า
ไuu้องการ¡u้ ñบท งไปได้เñย
† LOOP จาuวuรอบท u้องการ¡u้เñu u้าu้องการ¡u้เñuไปเร อย
_ ¡u้¡ส TRUE luu้าu้องการ กาuuดจาuวuรอบก็¡สเป็ uuวเñIเI้าไป
เu อไuu้องการไu¡u้วu¡u้¡ส FALSE (ไuจาเป็ uu้อง¡สก็ได้ เพรา.uาปกu
เป็ u FALSE อยlñ้ว)
ต1อยาง
<EMBED SRC="sound.mid" HIGHT=60 WIDTH=144
CONTROLS=COLSOLE AUTOSTART=TRUE LOOP=TRUE>
แLLกา¡นดต1เช ่ อม
รูปแLL < A HREF="......">nาอnLาย</A>
เป็ uการ¡สเพñงÏดยการกาuuดuวเ1 อu ¡u1องวาง _¡u้¡สuาluuงไ¡ñ
เสยง ñงไป ส วuuรง "uาอüบาย" ¡u้¡สI้อuวาuท ส อuวาuuuาย¡u้ร้วา uวเ1 อu
u เป็ uไ¡ñเพñง เ1u "เพñงlสuสu ก"
ต1อยาง < A HREF="sound.mid"> nงเพลงกดตรงนี จ้า</A>
แLL META
uร1ยวuu เทยuuาวา
38
การสร้ างเว็บเพจด้วยภาษา html
รูปแLL < META HTTP-EQUIV="Refresh"
CONTENT="1;URL=........">
¡1้uาส ง meta เพ อเป็ uการÏuñดไ¡ñออดÏอlñ. เñuเพñงu u _ Ïดย
อuÏuuu ทuทเu อเว็บเพจuกÏuñดI uuา ¡1้ได้ท ง IE lñ. NS Ïดย
† uาส ง <META> ¡สอยร.uวาง uาส ง <HEAD>......</HEAD>
† HTTP-E‡UIV="Refresh" กาuuดการÏuñดไ¡ñเพñงÏดยอuÏuuu
† CONTENT="lˆURL=...." เป็ uการกาuuดเวñาท จ.Ïuñดเพñงเu อ
เว็บเพจuกÏuñดI uuา Ïดย URL เป็ u1 อเพñงท u้องการ¡u้Ïuñด เ1u
<HEAD>
<META HTTP-E‡UIV="Refresh"
CONTENT="lˆURL=sound.mid">
</HEAD>
ใJÌnล1ีดโอใ¡้เ1Lเพจ(IE)
รูปแLL <IMG DYNSRC="....." SRC="......" ALT="......"
LOOP=n START=FILEOPEN/MOUSEOVER
CONTROLS>
เป็ uรปlบบการ¡สไ¡ñวดÏอIอง Internet Explorer Ïดยuñกษu.uาส งดงu
† D‰NSRC="......" ¡u้¡ส1 อไ¡ñวดÏอñงไป เ1u video.avi
† SRC="......" ¡u้¡สไ¡ñรปภาพ ไว้ เป็ uuวlทu ไ¡ñวดÏอu u _ เu อ
บราวเซอร n้¡1้ไuสuuสu u
uร1ยวuu เทยuuาวา
39
การสร้ างเว็บเพจด้วยภาษา html
† ALT="......" ¡สI้อuวาu¡ด _ ก็ได้ñงไปเพ อ ¡u้n้¡1้ท ไuสาuารuดวดÏอ
สาuารuร้I้อuñได้
† LOOP=n กาuuดจาuวuuร งท จ.¡u้วดÏอเñu ¡ส เป็ uuวเñIuร อ infinite
ก็ได้
† START=FILEOPEN/MOUSEOVER Ïดย fileopen เป็ uการกาuuด ¡u้
เร uเñuทuท ท ไñวดÏอÏuñดเสร็จ (ปกulñ้ววดÏอจ.uกเñu ทuทท ดาวuÏuñด
เสร็จ ดงu u -STRAT=FILEOPEN จ งไuu้อง¡สก็ได้) mouseover เป็ uการ
กาuuด ¡u้เñuวดÏอ เu อเอาเuาสไปวางบuวดÏอu u _
ต1อยาง
< IMG D‰NSRC="SPORT.AVI" SRC=PICTURE.GIF ALT="ทดสอบการ¡1้
ไ¡ñวดÏอ(IE)" LOOP="2" >
ใJÌnล1ีดโอใ¡้เ1Lเพจ(NS)
รูปแLL
< EMBED SRC="....." LOOP="TRUE/FALSE WIDTH=pixels
HEIGHT=pixels ALIGN="....." >
เป็ uรปlบบการ¡สไ¡ñวดÏอIอง Netscape Navigator จ.ยงยากuรงท วา
เราu้องร้IuาดIองไ¡ñวดÏอ วาu Iuาดยาวก พกเซñ uาuIuาดuาuร€าulñ้ว
(height x width) จ.uอuราสวuเป็ u 3Š4 Iuาดuาuร€าuได้lก 9• x l2• l2•
x l6•,lS• x 24• lñ. 24• x 32• Ïดยuñกษu.uาส งดงu
† SRC="......" ¡u้¡ส1 อไ¡ñวดÏอñงไป เ1u •2sticks.avi
† LOOP u้ากาuuดเป็ u true จ.ทา¡u้วดÏอเñuไปเร อย _ u้าu้องการ ¡u้
เñuuร งเดยวไuu้อง¡สก็ได้
uร1ยวuu เทยuuาวา
40
การสร้ างเว็บเพจด้วยภาษา html
† WIDTH กาuuดIuาดuวาuกว้างIองวดÏอ uาuuาuร€าu
† HEIGHT กาuuดuวาuสงIองวดÏอ uาuuาuร€าu
† ALIGN="...." เป็ uการกาuuดuาluuง ดงu
top,bottom,center,baseline,left,right,
ต1อยาง <EMBED SRC=sport.avi WIDTH=240 HEIGHT=180>
uร1ยวuu เทยuuาวา
41

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->