การเขียนเว็บด้วยภาษา Html เบื้องต้น

การเขี�ยนเว็บด้ ว็ยภาษา Html เบ��องต้ น

เริ่��มต้�นพื้�นฐาน HTML

• คุ�ณจะได้ เร�ยนร� 1. โคุรงสร างขีองภาษา HTML แบบง ายๆ 2. คุว็ามหมายและว็%ธี�การก'าหนด้คุ'าส()ง

• ( * ) ว็%ธี�ทด้ลองเปิ,ด้โปิรแกรม NOTEPAD ขี-�นมา (อย� ใน Start ->Programs->Accesories->Notepad) หล(งจากน(�นกพิ%มพิ0ได้ เลยพิอพิ%มพิ0เสรจกเซฟโด้ย พิ%มพิ0 ชื่�)อไฟล0.htm หร�อ ชื่�)อไฟล0.html กได้ แล ว็ใชื่ เคุร�)องหมายฟ4นหน�( " ) คุร อมชื่�)อ.สก�ล เชื่ น "MyWeb.html" แคุ น��เอง แล ว็กไปิหาเว็บเบราเซอร0มาเปิ,ด้ด้�ผลงานนะจ6ะ . . .

• HTML กคุ�อภาษาคุอมพิ%ว็เต้อร0ระด้(บส�งภาษาหน-)งซ-)งถู�กออกแบบมาเพิ�)อใชื่ ในการแสด้งผลขี อม�ลบนระบบอ%นเต้อร0เนท โด้ยใชื่ เคุร�)องหมาย < > เปิ8นต้(ว็ก'าหนด้หล(ก ( เด้�9ยว็จะเหน ) โด้ยส ว็นมากจะใชื่ คุ'าส()ง 2 แบบ คุ�อ " เปิ,ด้ " ก(บ " ปิ,ด้ " เชื่ น <BODY> หมายถู-ง เปิ,ด้ส ว็นเน��อหา และ </BODY> คุ�อปิ,ด้(จบ)ส ว็นเน��อหา และม�ร�ปิแบบโคุรงสร างท()ว็ไปิ คุ�อ

โคริ่งสริ่�างของเอกสาริ่ HTML

<HTML>

<HEAD>

<TITLE>

เอกสาร HTML

</TITLE>

</HEAD>

<BODY>

รายละเอ�ยด้ต้ างๆ</BODY>

</HTML>

ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่ส่

BGCOLOR คุ�อ คุ'าส()งเสร%มใชื่ ส'าหร(บก'าหนด้ส�พิ��นหล(งขีองเว็บเพิจBACKGROUND คุ�อ คุ'าส()งเสร%มใชื่ ส'าหร(บก'าหนด้ร�ปิภาพิท�)จะน'ามาเปิ8นพิ��นหล(งบนเว็บเพิจTEXT คุ�อ คุ'าส()งเสร%มใชื่ ส'าหร(บก'าหนด้ส�ขีองขี อคุว็ามภายในเว็บเพิจTOPMARGIN คุ�อ คุ'าส()งเสร%มใชื่ ส'าหร(บก'าหนด้ระยะห างขีองเว็บเพิจจากทางด้ านบน

ขีองจอภาพิBOTTOMMARGIN คุ�อ คุ'าส()งเสร%มท�)ใชื่ ส'าหร(บก'าหนด้ระยะห างขีองเว็บเพิจจากทางด้ านล าง

ขีองจอภาพิRIGHTMARGIN คุ'าส()งเสร%มท�)ใชื่ ส'าหร(บก'าหนด้ระยะห างขีองเว็บเพิจจากทาง

ด้ านขีว็าขีองจอภาพิLEFTMARGIN คุ'าส()งเสร%มท�)ใชื่ ส'าหร(บก'าหนด้ระยะห างขีองเว็บเพิจจากทาง

ด้ านซ ายขีองจอภาพิLINK คุ�อ คุ'าส()งเสร%มท�)ใชื่ ส'าหร(บก'าหนด้ส�ขีองขี อคุว็ามท�)ใชื่ เปิ8นต้(ว็เชื่�)อมโยง (Hyperlink) ภายในเว็บเพิจALINK คุ�อ คุ'าส()งเสร%มท�)ใชื่ ส'าหร(บก'าหนด้ส�ขีองขี อคุว็ามท�)ใชื่ เปิ8นต้(ว็เชื่�)อมโยง

(Hyperlink) VLINK คุ�อ คุ'าส()งเสร%มท�)ใชื่ ส'าหร(บก'าหนด้ส�ขีองขี อคุว็ามท�)ใชื่ เปิ8นต้(ว็เชื่�)อมโยง

(Hyperlink) หล(งจากท�)เคุยคุล%กท�) Hyperlink น(�นๆไปิแล ว็

ต้�วอย่�าง<HTML><HEAD><TITLE> เอกสาร HTML </TITLE></HEAD><BODY BGCOLOR=PINK TEXT=RED TOPMARGIN="100">

โคุรงสร างขีองเอกสาร HTML</BODY></HTML>

 ต้(ว็เอ�ยง ขี อคุว็าม 

 ต้(ว็หนา ขี อคุว็าม 

<BIG> ต้(ว็ขีนาด้ใหญ่ <BIG> ขี อคุว็าม </BIG>

 ต้(ว็ขีนาด้เลก ขี อคุว็าม 

 ต้(ว็หนา ขี อคุว็าม 

 ต้(ว็เอ�ยง ขี อคุว็าม 

 ขี�ด้เส นใต้ ขี อคุว็าม 

ต้�วอย่�าง<HTML><HEAD><TITLE> ต้(ว็อ(กษรแบบ Physical Styles </TITLE></HEAD><BODY>

ต้(ว็อ(กษรแบบต้(ว็หนา ต้(ว็อ(กษรแบบต้(ว็เอ�ยง ต้(ว็อ(กษรแบบขี�ด้เส นใต้ 

</BODY></HTML>

 ขี อคุว็าม 

ต้(ว็อย าง<HTML><HEAD><TITLE> การก'าหนด้ร�ปิแบบขีองต้(ว็อ(กษร </TITLE></HEAD><BODY>ร�ปิแบบต้(ว็อ(กษร แบบ AngsanaUPC</BODY></HTML>

 ขี อคุว็าม คุ'าส()งน��เปิ8นคุ'าส()งท�)ใชื่ ส'าหร(บก'าหนด้ส�ขีองต้(ว็อ(กษร เฉพิาะต้(ว็อ(กษรท�)ต้ องการ

<BODY TEXT=ColorName>คุ'าส()งน��เปิ8นคุ'าส()งท�)ใชื่ ส'าหร(บก'าหนด้ส�ขีองต้(ว็อ(กษรท(�งเอกสาร

 ขี อคุว็าม เปิ8นคุ'าส()งส'าหร(บก'าหนด้ขีนาด้ขีองต้(ว็อ(กษรแบบสมบ�รณ0 ม�คุ าต้(�งแต้ ขีนาด้ 1 ถู-ง 7

<BASEFONT SIZE=Value>คุ'าส()งน��จะเปิ8นการก'าหนด้ขีนาด้ขีองต้(ว็อ(กษรท(�งเอกสาร

<MARQUEE Attribute=Position> ขี อคุว็าม </MARQUEE>โด้ยท�) Attribute คุ�อ คุ'าส()งเสร%มท�)ใชื่ ในการก'าหนด้อ(กษรว็%)ง Position คุ�อ คุ าท�)ใชื่ ในการก'าหนด้อ(กษรว็%)ง

โด้ยคุ'าส()งท�)ม� Attribute ในการน'ามาใชื่ ด้(งน��* BEHAVIOR ใชื่ ส'าหร(บก'าหนด้ล(กษณะการเคุล�)อนไหว็ขีองขี อคุว็ามท�)อย� ระหว็ างคุ'าส()งโด้ยคุ าส'าหร(บ Attribute ม�ด้(งน��

- Alternate จะท'าให ขี อคุว็ามท�)อย� ระหว็ างคุ'าส()งว็%)งไปิชื่นไปิชื่นมาระหว็ างขีอบซ าย-ขีว็า หน าจอบราว็เซอร0

- Scroll จะท'าให ขี อคุว็ามท�)อย� ระหว็ างคุ'าส()งว็%)งไปิจนต้(ว็อ(กษรหายไปิในขีอบหน าจอด้ านหน-)งขีองบราว็เซอร0และจะปิรากฏขี-�นใหม อ�กคุร(�งจากขีอบอ�กด้ าน

- Slide จะท'าให ขี อคุว็ามท�)อย� ระหว็ างคุ'าส()งว็%)งไปิจนถู-งขีอบขีองหน าจอบราว็เซอร0ด้ านหน-)งแล ว็หย�ด้อย� ก(บท�)

* BGCOLOR ใชื่ ส'าหร(บก'าหนด้ส�ขีองพิ��นหล(งบร%เว็ณท�)ขี อคุว็ามเคุล�)อนไหว็ไปิมาโด้ยคุ าขีอง Attribute กคุ�อ คุ าขีองชื่�)อส� * DIRECTION ใชื่ ส'าหร(บก'าหนด้ท%ศทางการแสด้งต้(ว็อ(กษรท�)อย� ระหว็ างคุ'าส()ง โด้ยคุ าขีอง Attribute ม�อย� 4 ต้(ว็ ด้(งน��

- Down หากต้ องการให ขี อคุว็ามแสด้งโด้ยเล�)อนขี อคุว็ามจากบนลงล าง- Up หากต้ องการให ขี อคุว็ามแสด้งโด้ยเล�)อนขี อคุว็ามจากล างขี-�นขี างบน- Right หากต้ องการให ขี อคุว็ามแสด้งโด้ยเล�)อนขี อคุว็ามจากด้ านซ ายไปิขีว็า- Left หากต้ องการให ขี อคุว็ามแสด้งโด้ยเล�)อนขี อคุว็ามจากด้ านขีว็าไปิซ าย

* HEIGHT ใชื่ ส'าหร(บการก'าหนด้คุว็ามส�งขีอง Block ขี อคุว็ามท�)จะแสด้ง โด้ยคุ าท�)ก'าหนด้จะม�หน ว็ยเปิ8นพิ%กเซล* WIDTH ใชื่ ส'าหร(บการก'าหนด้คุว็ามกว็ างขีอง Block ขี อคุว็ามท�)จะแสด้ง โด้ยคุ าท�)ก'าหนด้จะม�หน ว็ยเปิ8นพิ%กเซล* HSPACE ใชื่ ส'าหร(บก'าหนด้ระยะห างขีอง Block ขี อคุว็ามก(บขีอบซ าย-ขีว็า ขีองขีอบเขีต้ หร�อพิ��นท�)ท�)เราต้ องการแสด้งขี อคุว็าม โด้ยคุ าท�)ก'าหนด้จะม�หน ว็ยเปิ8นพิ%กเซล* VSPACE ใชื่ ส'าหร(บก'าหนด้ระยะห างด้ านบนและด้ านล างขีองต้(ว็อ(กษรว็%)ง โด้ยการก'าหนด้ขีนาด้ม�หน ว็ยเปิ8นพิ%กเซล

ต้�วอย่�าง<HTML><HEAD><TITLE> การสร างต้(ว็อ(กษรว็%)ง </TITLE></HEAD><BODY><MARQUEE WIDTH=60% HEIGHT=20%BGCOLOR=Pink BEHAVIOR=Alternate>การสร างต้(ว็อ(กษรว็%)ง</MARQUEE></BODY></HTML>

<Hx> ขี อคุว็าม </Hx>โด้ยท�) Hx เปิ8นคุ'าส()งท�)ใชื่ ส'าหร(บก'าหนด้ขีนาด้ขีองห(ว็ขี อขีองเอกสาร

โด้ยท�) x ม�ต้(�งแต้ 1 ถู-ง 6

จงสร างขี อคุว็ามท�)เปิ8นต้(ว็อ(กษรว็%)งเปิ8น ชื่�)อ-นามสก�ล โด้ยม�ขี อก'าหนด้ด้(งน��- ต้(ว็อ(กษรแบบ FreesiaUPC- ต้(ว็อ(กษรม�ส�แด้ง พิ��นหล(งขีองต้(ว็อ(กษรส�ชื่มพิ�- ขี�ด้เส นใต้ ต้(ว็อ(กษร- ต้(ว็อ(กษรม�ขีนาด้ 6- ต้(ว็อ(กษรว็%)งไปิชื่นขีอบด้ านหน-)งแล ว็%)งย อนกล(บ- คุว็ามกว็ างขีองขีอบท�)แสด้งขี อคุว็ามต้(ว็อ(กษรว็%)ง คุ�อ 300 Pixel

เฉลยแบบฝึ?กห(ด้

การิ่ข��นย่�อหน�าใหม� ขี อคุว็าม 

โด้ยท�) ALIGN คุ�อ คุ'าส()งเสร%มท�)ใชื่ ในการจ(ด้ขี อคุว็ามหร�อร�ปิภาพิให อย� ใน ต้'าแหน งท�)ต้ องการ

Position คุ�อ คุ าท�)ใชื่ ส'าหร(บระบ�ต้'าแหน งขีองขี อคุว็าม ซ-)งได้ แก - Left ใชื่ ส'าหร(บการจ(ด้ขี อคุว็ามให อย� ชื่%ด้ซ ายขีองหน าจอ- Center ใชื่ ส'าหร(บการจ(ด้ขี อคุว็ามให อย� ก-)งกลางขีองหน าจอ- Right ใชื่ ส'าหร(บการจ(ด้ขี อคุว็ามให อย� ชื่%ด้ขีว็าขีองหน าจอ

การิ่ข��นบริ่ริ่ทั�ดใหม�ขี อคุว็าม 

การิ่จั�ดข�อความให�อย่!�ก��งกลาง<CENTER> ขี อคุว็าม </CENTER>

การิ่สริ่�างเส�นต้ริ่งแนวนอนขี อคุว็าม <HR Attribute=Value>

โด้ยท�) Attribute คุ�อ คุ'าส()งเสร%มท�)ใชื่ ในการคุ าต้ างๆ ในการสร างแนว็นอน Value คุ�อ คุ าท�)ใชื่ ในการก'าหนด้เส นแนว็นอน

การสร างเส นแนว็นอน<HR> ร�ปิแบบคุ'าส()ง <HR Attribute=Value>โด้ยท�) Attribute คุ�อ คุ'าส()งเสร%มท�)ใชื่ ในการคุ าต้ างๆ ในการสร างเส น

แนว็นอน Value คุ�อ คุ าท�)ใชื่ ในการก'าหนด้เส นแนว็นอนคุ'าส()งเสร%ม(Attribute) ม�ด้(งน��ALIGN ใชื่ ส'าหร(บจ(ด้ต้'าแหน งขีองเส น โด้ยม�คุ าท�)ใชื่ ในการก'าหนด้

ต้'าแหน ง คุ�อ- Left ใชื่ ส'าหร(บการก'าหนด้เส นให ชื่%ด้ซ าย- Center ใชื่ ส'าหร(บการก'าหนด้เส นให อย� ก-)งกลาง- Right ใชื่ ส'าหร(บการก'าหนด้เส นให ชื่%ด้ขีว็า

SIZE ใชื่ ส'าหร(บก'าหนด้คุว็ามหนาขีองเส นWIDTH ใชื่ ส'าหร(บก'าหนด้คุว็ามกว็ างขีองเส นCOLOR ใชื่ ส'าหร(บก'าหนด้ส�ขีองเส น

การิ่แทัริ่กริ่!ปภาพื้<IMG SRC=filename>

การิ่แทัริ่กข�อความแทันริ่!ปภาพื้ขี อคุว็าม <IMG ALT=“Message”>

การิ่จั�ดต้&าแหน�งข�อความและริ่!ปภาพื้ขี อคุว็าม <IMG ALIGN=Position>

โด้ยท�) Position คุ�อ ต้'าแหน งท�)ท�)ต้ องการจ(ด้ว็างร�ปิภาพิ ซ-)งสามารถูก'าหนด้การ จ(ด้ว็างร�ปิภาพิได้ ด้(งน��

- Absbottom ท'าให ขี อคุว็ามท�)อย� ล อมรอบร�ปิภาพิจะว็างต้(ว็อย� ส ว็นล างขีองร�ปิ- Absmiddle ท'าให ขี อคุว็ามท�)อย� ล อมรอบร�ปิภาพิจะว็างต้(ว็อย� ก-)งกลางขีองคุว็ามขีองร�ปิ- Baseline ท'าให ขี อคุว็ามท�)อย� ล อมรอบร�ปิภาพิจะว็างต้(ว็อย� แนว็เด้�ยว็ก(บเส นฐาน (Baseline) ขีองร�ปิ

- Bottom ท'าให ขี อคุว็ามท�)อย� ล อมรอบร�ปิภาพิจะว็างต้(ว็อย� ส ว็นล างขีองร�ปิ

เชื่ นเด้�ยว็ก(บ Absbottom- Middle ท'าให ขี อคุว็ามท�)อย� ล อมรอบร�ปิภาพิจะว็างต้(ว็อย� ก-)งกลาง

ขีองคุว็ามส�งขีองร�ปิภาพิ เชื่ นเด้�ยว็ก(บ Absmiddle

- Left ท'าให ร�ปิภาพิว็างอย� ทางด้ านซ ายขีองเว็บเพิจ- Right ท'าให ร�ปิภาพิว็างอย� ทางด้ านขีว็าขีองเว็บเพิจ- Top ท'าให ร�ปิภาพิว็างอย� เหน�อเส นฐาน- Texttop ท'าให ขี อคุว็ามท�)ล อมรอบร�ปิภาพิจะว็างต้(ว็อย� ในระด้(บขีอง

ร�ปิภาพิ

การจ(ด้ระยะห างขีองขี อคุว็ามก(บร�ปิภาพิ<IMG HSPACE> ใชื่ ส'าหร(บระบ�ชื่ องว็ างระหว็ างร�ปิภาพิก(บ

ขี อคุว็ามหร�อว็(ต้ถู�ท�)ว็างอย� ขีอบร�ปิภาพิ ทางด้ านซ าย - ขีว็า

ต้(ว็อย าง <IMG HSPACE=Pixels>

<IMG VSPACE> ใชื่ ส'าหร(บระบ�ชื่ องว็ างระหว็ างร�ปิภาพิก(บขี อคุว็ามหร�อว็(ต้ถู�ท�)ว็างอย� ขีอบร�ปิภาพิ ทางด้ านบน - ล าง

ต้(ว็อย าง <IMG VSPACE=Pixels>

การปิร(บแต้ งขีนาด้ขีองร�ปิภาพิ<IMG WIDTH> ใชื่ ส'าหร(บระบ�คุว็ามกว็ างขีองร�ปิภาพิท�)ต้ องการจะแทรก

ต้(ว็อย าง <IMG WIDTH=Pixels><IMG HEIGHT> ใชื่ ส'าหร(บระบ�คุว็ามส�งขีองร�ปิภาพิท�)ต้ องการจะแทรก

ต้(ว็อย าง <IMG HEIGHT=Pixels>

การคุว็บคุ�มขี อคุว็ามรอบร�ปิภาพิ เปิ8นคุ'าส()งท�)ใชื่ ส'าหร(บก'าหนด้ขี อคุว็ามท�)อย� รอบๆ ร�ปิภาพิว็ าต้ องการให ขี อคุว็ามอย� ด้ านใด้ขีองร�ปิภาพิ

ต้(ว็อย าง โด้ยท�) Position คุ�อ คุ าท�)ใชื่ ก'าหนด้ต้'าแหน งขีองขี อคุว็าม โด้ยสามารถูก'าหนด้ได้ ด้(งน��

- Left ท'าให ด้ านซ ายขีองร�ปิภาพิว็ าง ไม ม�ขี อคุว็ามใด้อย� เลย- Right ท'าให ด้ านขีว็าขีองภาพิว็ าง- All ท'าให ท(�งด้ านขีว็าและด้ านซ ายขีองภาพิว็ าง

การก'าหนด้พิ��นหล(ง<Body Background=Filename>

ต้(ว็อย าง <BODY BACKGROUND=pic\boy.jpg

แบบฝึ)กห�ดจงใชื่ HTML ในการเขี�ยนปิระว็(ต้%ส ว็นต้(ว็ไม ต้')ากว็ า 10 บรรท(ด้ โด้ยก'าหนด้ให

ขี อคุว็ามแต้ ละบรรท(ด้อย� ก-)งกลางหน าจอขีองบราว็เซอร0 และบรรท(ด้ส�ด้ท ายก'าหนด้ให สร างเส นต้รงแนว็นอนส�เขี�ยว็ ชื่%ด้ขีอบด้ านขีว็าและม�คุว็ามกว็ าง 300 Pixel โด้ยม�ร�ปิภาพิปิระกอบไม ต้')ากว็ า 2 ร�ปิ โด้ยก'าหนด้ให - ร�ปิภาพิท�) 1 ให ว็างไว็ ส ว็นบนส�ด้ขีองเอกสารโด้ยอย� ก-)งกลาง ม�ระยะห างจาก

ขี อคุว็ามบรรท(ด้แรก 30 Pixel และก'าหนด้ให ร�ปิภาพิม�ขีนาด้ 100x130 Pixel

- ร�ปิภาพิท�) 2 ให ว็างร�ปิภาพิอย� ในต้'าแหน ง ด้ านซ ายขีองต้(ว็อ(กษร และก'าหนด้ให ร�ปิภาพิม�ขีนาด้ 100x100 Pixel

เฉลย่แบบฝึ)กห�ด

การิ่เชื่�อมโย่งเอกสาริ่การิ่เชื่�อมโย่งเอกสาริ่การิ่เชื่�อมโย่งเอกสาริ่สามาริ่ถแบ�งได�เป.น

2 ปริ่ะเภทั ด�งน/�1. INTERNAL LINK เป.นการิ่เชื่�อม

โย่งข�อม!ลภาย่ในเอกสาริ่เด/ย่วก�น หริ่อภาย่ในเว0บไซต้2เด/ย่วก�น

2.EXTERNAL LINK เป.นการิ่เชื่�อมโย่งข�อม!ลภาย่นอกไปย่�งเว0บไซต้2อ�นๆ

การิ่เชื่�อมโย่งข�อม!ลภาย่ในการิ่เชื่�อมโย่งข�อม!ลภาย่ในเอกสาริ่เด/ย่วก�นเอกสาริ่เด/ย่วก�น

• ค&าส��ง <A NAME> เป.นค&าส��งทั/�ใชื่�ในการิ่ก&าหนดชื่�อส�วนต้�างๆ ทั/�อย่!�ในหน�าเอกสาริ่ทั/�ต้�องการิ่ทั&าการิ่เชื่�อมโย่ง เพื้�อความสะดวกในการิ่ใชื่�ค&าส��งเชื่�อมโย่งข�อม!ลภาย่ในเอกสาริ่ริ่!ปแบบค&าส��ง <A NAME=Label>........ข�อความ......</A>

• ค&าส��ง <A HREF> เป.นค&าส��งทั/�ใชื่�ก&าหนดเป4าหมาย่ทั/�ต้�องการิ่เชื่�อมโย่งไปหา โดย่การิ่ใส� Label ของข�อม!ลทั/�ต้�องการิ่เชื่�อมโย่ง และใส�ข�อความทั/�แสดงให�ทัริ่าบได�เชื่�อมโย่งไปย่�งส�วนใดของหน�าเอกสาริ่ริ่!ปแบบค&าส��ง <A HREF=#Label>........ข�อความ......</A>

ต้�วอย่�างการิ่เชื่�อมโย่งหน�าเด/ย่วก�นต้�วอย่�างการิ่เชื่�อมโย่งหน�าเด/ย่วก�น

เฉลย่เฉลย่

การิ่เชื่�อมโย่งไปย่�งไฟล2อ�นหริ่อ การิ่เชื่�อมโย่งไปย่�งไฟล2อ�นหริ่อ Web PageWeb Page อ�นอ�น

• ค&าส��ง <A HREF> ใชื่�ในการิ่เชื่�อมโย่งไปย่�งไฟล2อ�น ซ��งเป.นค&าส��งเด/ย่วก�นก�บการิ่เชื่�อมโย่งข�อม!ลภาย่ในเอกสาริ่เด/ย่วก�น แต้�ม/ว�ธี/การิ่เริ่/ย่กใชื่�ค&าส��งทั/�แต้กต้�างก�น โดย่จัะม/การิ่ริ่ะบ7ชื่�อหน�าเว0บทั/�ต้�องการิ่เชื่�อมโย่งต้ามด�วย่ .HTML (หากเอกสาริ่น��นเป.นเอกสาริ่ HTML) ริ่!ปแบบค&าส��ง <A HREF=/Path/Filename.html>........ข�อความ......</A>

โดย่ทั/� Path เป.นการิ่ริ่ะบ7ต้&าแหน�งของไฟล2ทั/�ต้�องการิ่เชื่�อมโย่งไปถ�ง ซ��งไฟล2น��นอาจัจัะอย่!�ในโฟลเดอริ่2อ�น จั�งต้�องม/การิ่ริ่ะบ7โฟลเดอริ่2ทั/�ไฟล2น��นอย่!�ด�วย่ Filename เป.นชื่�อไฟล2ทั/�ต้�องการิ่เชื่�อมโย่งไปถ�ง

ต้(ว็อย างการเชื่�)อมโยงไปิย(งไฟล0อ�)น

เฉลย

การิ่เชื่�อมโย่งไปย่�งไฟล2อ�นโดย่ม/การิ่การิ่เชื่�อมโย่งไปย่�งไฟล2อ�นโดย่ม/การิ่ก&าหนดต้&าแหน�งก&าหนดต้&าแหน�ง

ริ่!ปแบบค&าส��ง<A HREF=/Path/Filename.html#Label>..ขี อคุว็าม…</A>

โด้ยท�) Path คุ�อ การระบ�ต้'าแหน งขีองไฟล0ท�)ต้ องการเชื่�)อมโยงไปิถู-ง ซ-)งไฟล0น(�น

อาจจะอย� ในโฟลเด้อร0อ�)น จ-งต้ องม�การระบ�โฟลเด้อร0ท�)ไฟล0น(�นอย� ด้ ว็ย

Filename คุ�อ ชื่�)อไฟล0ท�)ต้ องการเชื่�)อมโยงไปิถู-ง Label คุ�อ ชื่�)อขีองห(ว็ขี อขีองขี อม�ลท�)ต้ องการเชื่�)อมโยงไปิถู-ง ซ-)งต้ องเปิ8นชื่�)อท�) อย� ในไฟล0น(�นด้ ว็ย

/A คุ�อ คุ'าส()งปิ,ด้คุ'าส()ง A

ต้(ว็อย างการเชื่�)อมโยงไปิย(งไฟล0อ�)นโด้ยม�การก'าหนด้ต้'าแหน ง

เฉลย

การิ่เชื่�อมโย่งไปย่�ง การิ่เชื่�อมโย่งไปย่�ง Web Sites Web Sites อ�นอ�นริ่!ปแบบค&าส��ง<A HREF=URL>……..ขี อคุว็าม……..</A> หร�อ<A HREF=FTP://FtpServer>

โด้ยท�) URL คุ�อ ชื่�)อขีองเว็บไซต้0หร�อ IP Address ขีองเว็บไซต้0ท�)ต้ องการ

เชื่�)อมโยงถู-ง FTP คุ�อ คุ าท�)ใชื่ ก'าหนด้ในการเชื่�)อมโยงไปิย(งแหล งท�)ให บร%การ

ไฟล0 FTP

FtpServer คุ�อ ชื่�)อขีองเคุร�)อง Server ท�)ให บร%การไฟล0 Ftp

/A คุ�อ คุ'าส()งปิ,ด้คุ'าส()ง A

ต้(ว็อย างการเชื่�)อมโยงไปิย(งเว็บไซต้0อ�)น

เฉลย

การิ่เชื่�อมโย่งโดย่ใชื่�ริ่!ปภาพื้ริ่!ปแบบค&าส��ง<A HREF=URL><IMG SCR=Filename></A>

โด้ยท�) URL คุ�อ ชื่�)อขีองเว็บไซต้0หร�อ IP Address ขีองเว็บไซต้0ท�)ต้ องการเชื่�)อมโยงถู-ง

<IMG SCR> คุ�อคุ'าส()งท�)ให ในการแทรกร�ปิภาพิ Filename คุ�อชื่�)อไฟล0ร�ปิภาพิท�)จะน'ามาใชื่ ส'าหร(บการ

เชื่�)อมโยงขี อม�ล/A คุ�อ คุ'าส()งปิ,ด้คุ'าส()ง A

ต้�วอย่�างต้�วอย่�าง

การิ่ใชื่�การิ่เชื่�อมโย่งก�บจัดหมาย่อ�เล0กทัริ่อน�กส2 (E-Mail)

ริ่!ปแบบค&าส��ง<A HREF=Mailto:E-Mail Address>…ขี อคุว็าม…

</A>

โด้ยท�) Mailto เปิ8นการก'าหนด้การเชื่�)อมโยงโด้ยการใชื่ อ�เมล0E-Mail Address ชื่�)ออ�เมล0ท�)ต้ องการเชื่�)อมโยงถู-ง/A คุ�อ คุ'าส()งปิ,ด้คุ'าส()ง A


การิ่สริ่�างล&าด�บริ่าย่การิ่แบบเริ่/ย่งล&าด�บข�อม!ล (OrderedList)การสร างล'าด้(บรายการแบบเร�ยงล'าด้(บ คุ�อ รายการท�)

ปิระกอบไปิด้ ว็ยต้(ว็อ(กษรหร�อต้(ว็เลขีท�)ม�การเร�ยงล'าด้(บในการแสด้งผลปิรากฏอย� หน าขี อคุว็ามท�)เปิ8นรายการน(�นๆ เปิ8นขี อม�ลท�)ม�การอธี%บายอย างเปิ8นขี(�นต้อน โด้ยการล'าด้(บรายการร�ปิแบบน��จะใชื่ ต้(ว็เลขีหร�อต้(ว็อ(กษรเปิ8นเคุร�)องหมายในการล'าด้(บรายการ ซ-)งม�ร�ปิแบบคุ'าส()ง ด้(งน��

ริ่!ปแบบค&าส��ง<OL TYPE=Number_Type Start=Number>

<LI>………รายการ…………. <LI>………รายการ…………. <LI>………รายการ………….

</OL>

โด้ยท�) OL คุ�อ คุ'าส()งท�)ใชื่ ส'าหร(บการเร�ยกใชื่ คุ'าส()ง Ordered List

TYPE คุ�อ คุ'าส()งเสร%ม (Attribute) ท�)ให ก'าหนด้ว็ าจะแสด้งรายการโด้ยการใชื่ ห(ว็ขี อร�ปิแบบใด้

Number_Type คุ�อ ชื่น%ด้ขีองเคุร�)องหมายท�)น'ามาใชื่ ในการล'าด้(บรายการขีองขี อม�ลได้ แก

A ต้(ว็อ(กษรภาษาอ(งกฤษพิ%มพิ0ใหญ่ a ต้(ว็อ(กษรภาษาอ(งกฤษพิ%มพิ0เลก I ต้(ว็เลขีโรม(นพิ%มพิ0ใหญ่ i ต้(ว็เลขีโรม(นพิ%มพิ0เลก 1 ต้(ว็เลขีอารบ%คุ

การิ่สริ่�างล&าด�บริ่าย่การิ่แบบเริ่/ย่งล&าด�บข�อม!ล (OrderedList)

การิ่สริ่�างล&าด�บริ่าย่การิ่แบบเริ่/ย่งล&าด�บข�อม!ล (OrderedList)

Start เปิ8นคุ'าส()งเสร%ม (Attribute) ท�)ใชื่ ส'าหร(บก'าหนด้คุ าเร%)มต้ นส'าหร(บห(ว็ขี อแรก ส'าหร(บห(ว็ขี ออ(นด้(บต้ อไปิจะถู�กก'าหนด้ขี-�นเองโด้ยอ(ต้โนม(ต้%

Number คุ�อ คุ าเร%)มต้ นท�)ต้ องการใชื่ ล'าด้(บรายการ เชื่ น เร%)มต้ นท�) A

LI คุ�อ คุ'าส()งท�)ใชื่ ในการก'าหนด้รายการต้ างๆ /OL คุ�อ คุ'าส()งปิ,ด้การใชื่ คุ'าส()ง OL


การิ่สริ่�างล&าด�บริ่าย่การิ่แบบไม�เริ่/ย่งล&าด�บข�อม!ล (Unordered List)

การสร างล'าด้(บรายการแบบไม เร�ยงล'าด้(บขี อม�ล คุ�อ รายการท�)ปิระกอบไปิด้ ว็ยส(ญ่ล(กษณ0ต้ างๆ ว็างไว็ ขี างหน าขี อคุว็าม หร�อร�ปิภาพิท�)เปิ8นรายการ (List) ส(ญ่ล(กษณ0ท�)ม(กน%ยมใชื่ กม�ร�ปิส�)เหล�)ยมท-บ (Square) ร�ปิว็งกรมท-บ (Disc) หร�อร�ปิว็งกลม (Circle) ส'าหร(บร�ปิแบบคุ'าส()งท�)ใชื่ ในการสร างล'าด้(บรายการ แบบน�� คุ�อ

ริ่!ปแบบค&าส��ง<UL TYPE=Bullet_Type>

<LH>…………ห(ว็ขี อ…..................<LI>………รายการ…………. <LI>………รายการ………….

</UL>

การิ่สริ่�างล&าด�บริ่าย่การิ่แบบไม�เริ่/ย่งล&าด�บข�อม!ล (Unordered List)

โด้ยท�) UL คุ�อ คุ'าส()งท�)ใชื่ ในการเร�ยกใชื่ Unordered List Type คุ�อ คุ'าส()งท�)ใชื่ ส'าหร(บก'าหนด้คุ าขีอง Bullet Type

หร�ออาจไม ระบ�กได้ Bullet Type คุ�อ ร�ปิแบบขีองส(ญ่ล(กษณ0ท�)จะน'ามาใชื่ ในการ

ล'าด้(บรายการซ-)งสามารถูก'าหนด้ได้ ด้(งน��- Square จะท'าให ม�ร�ปิส�)เหล�)ยมท-บ ว็างหน าขี อคุว็ามรายการ (List)- Disc จะท'าให ม�ร�ปิว็งกลมท-บ ว็างหน าขี อคุว็ามรายการ (List) - Circle จะท'าให ม�ร�ปิว็งกลมกลว็ง ว็างหน าขี อคุว็ามรายการ (List)

LH คุ�อ คุ'าส()งท�)ใชื่ ส'าหร(บก'าหนด้ห(ว็ขี อรายการLI คุ�อ คุ'าส()งท�)ใชื่ ในการก'าหนด้รายการต้ างๆ

การเขียนเว็บด้วยภาษา Html เบื้องต้น

Documents