ภาษา html
DESCRIPTION
ภาษา HTML. ( HyperText Markup Language) ภาษาหลักที่ใช้ในการสร้าง เว็บ เพจ (Web Page). ภาษา HTML. เป็นภาษาหลักที่ใช้ในการสร้างเว็บเพ็จเขียนอยู่ในรูปของเอกสารข้อความ ( Text Document) ภาษาที่เป็น Static Language มีลักษณะของข้อมูลคงที่สำหรับสร้างข้อมูลประเภทตัวอักษรและภาพ - PowerPoint PPT PresentationTRANSCRIPT
ภาษา HTML (HyperText Markup Language)
ภาษาหลั�กที่ใช้ ในการสร างเว็�บเพจ (Web Page)
ภาษา HTML
• เป็�นภาษาหลั�กที่ใช้ ในการสร างเว็�บเพ�จเขียนอย��ใน ร�ป็ขีองเอกสารขี อคว็าม (Text Document)
• ภาษาที่เป็�น Static Language มลั�กษณะขีองขี อม�ลัคงที่ส#าหร�บสร างขี อม�ลัป็ระเภที่ตั�ว็อ�กษรแลัะภาพ
• นามสก&ลัขีองไฟลั) HTML จะเป็�นไฟลั)นามสก&ลั .htm หร*อ .html
• ค#าส�งในภาษา HTML เรยกว็�า แที่�ก (Tag) จะเขียน อย��ในเคร*องหมาย < แลัะ > แที่�กจะแบ�งได้ เป็�นสอง
กลั&�ม ค*อ แที่�กแบบเป็,ด้ แลัะแที่�กแบบป็,ด้
โครงสรางหลั�ก• ร�ป็แบบมาตัรฐานในการสร างเว็�บเพจป็ระกอบด้ ว็ยค#าส�งหลั�ก
อย�� 4 ค#าส�ง ด้�งน.• <HTML> .... </HTML> เป็�นค#าส�งที่ที่#าหน าที่บอกจ&ด้เร/มตั น
แลัะจ&ด้ส/.นส&ด้ขีองเว็�บเพจ• <HEAD> .... </HEAD> เป็�นค#าส�งในส�ว็นขีองการก#าหนด้ส�ว็น
ห�ว็เร*องขีองเว็�บเพจ โด้ยในค#าส�ง HEAD จะมค#าส�ง<TITLE> .... </TITLE> อย��ด้ ว็ย ซึ่2งที่#าหน าที่ก#าหนด้ขี อคว็ามที่
แสด้งบน Title Bar โด้ยสามารถก#าหนด้คว็ามยาว็ขีอง ขี อคว็ามได้ 64 ตั�ว็อ�กษร
• <BODY> .... </BODY> เป็�นค#าส�งในส�ว็นเน*.อหาขีองเว็�บเพจ ที่�.งหมด้
ร�ปแบบการเขี�ยน• <HTML>• <HEAD>• <TITLE> Title Bar </TITLE>• </HEAD>• <BODY>• .• .• .• .• </BODY> • </HTML>
ค�าส��งเร��มต้น ร�ปแบบ <HTML>.....</HTML>
ค#าส�ง <HTML> เป็�นค#าส�งเร/มตั นใน การเขียนโป็รแกรม แลัะ </HTML> เป็�น
ค#าส�งจ&ด้ส/.นส&ด้ โป็รแกรมเหม*อนค#าส�งBeign แลัะ End ในภาษา Pascal
ส�วนห�ว ร�ปแบบ <HEAD>.....</HEAD>
ใช้ ก#าหนด้ขี อคว็าม ในส�ว็นที่เป็�น ช้*อเร*อง ภายในค#าส�งน. จะมค#าส�ง
ย�อย อกหน2งค#าส�ง ค*อ <TITLE>
ก�าหนดขีอความในไต้เต้�ลับาร" ร�ปแบบ <TITLE>.....</TITLE>
ต้�วอย�าง<TITLE> บทเร�ยน HTML </TITLE>
เป็�นส�ว็นแสด้งช้*อขีองเอกสาร จะป็รากฎ ขีณะที่ไฟลั)HTML ที่#างานอย�� ขี อคว็าม ที่ก#าหนด้ ในส�ว็นน. จะไม�ถ�กน#า
ไป็แสด้ง ผลัขีอง เว็�บเบราเซึ่อร)แตั�จะป็รากฎในส�ว็นขีองไตั เตั/บาร) (Title bar) ที่เป็�นช้*อขีองว็/นโด้ว็)ขี างบนไม�คว็รให ยา เก/นไป็ เพยงให ร� ว็�าเว็�บเพจที่ก#าลั�ง ใช้ งานอย��เกยว็ขี องก�บ
อะไร
ส�วนขีองเน$%อหา
ร�ปแบบ<BODY>.....</BODY>
ส�ว็นเน*.อหาขีองโป็รแกรมจะ เร/มตั นด้ ว็ย ค#าส�ง <BODY> แลัะ
จบลังด้ ว็ย </BODY> ภายในค#าส�ง น. ค$อ ส�วนท��จะแสดงทางจอภาพ
การก�าหนดร�ปแบบขีองต้�วอ�กษร
ค�าส��งในการก�าหนดห�วเร$�อง (Headding)• <H1> .... </H1>• <H2> .... </H2>• <H3> .... </H3>• <H4> .... </H4>• <H5> .... </H5>• <H6> .... </H6>• ……………………ต้�วอย�างการปร�บขีนาดอ�กษร• <HTML>• <HEAD><TITLE> Heading </TITLE></HEAD>• <BODY>• <H1> Heading Levle 1 </H1>• <H2> Heading Levle 2 </H2>• <H3> Heading Levle 3 </H3>• <H4> Heading Levle 4 </H4>• <H5> Heading Levle 5 </H5>• <H6> Heading Levle 6 </H6>• </BODY></html>
การก�าหนดห�วเร$�องร�ปแบบ <Hx>ขีอความ</Hx>
ต้�วอย�าง <H1>ห�วขีอใหญ่�ส*ด</H1>
ในการก#าหนด้ขีนาด้ให ห�ว็เร*องน�.นม การก#าหนด้ ไว็ 6 ระด้�บตั�.งแตั� 1 - 6 โด้ย
x แที่นตั�ว็เลัขีแตั�ลัะลั#าด้�บโด้ย H1 ม ขีนาด้ใหญ่�ที่ส&ด้ H6 เลั�กที่ส&ด้เม*อ
ตั องการใช้ ห�ว็เร*องที่มขีนาด้ตั�ว็อ�กษร เที่�าใด้เขียนอย��ระหว็�าง <Hx>....</Hx>
การก�าหนดขีนาดต้�วอ�กษรร�ปแบบ <FONT SIZE=x>ขีอความ</FONT>ต้�วอย�าง <FONT SIZE=2>bcoms.net</FONT>
เราสามารถก#าหนด้ขีนาด้ขีองตั�ว็อ�กษรให แตักตั�างก�นได้ ภายในบรรที่�ด้เด้ยว็ก�น โด้ยเราใช้ <FONT SIZE=value> มาก#าหนด้ โด้ยที่ value เป็�นตั�ว็เลัขีแสด้งขีนาด้ ตั�ว็อ�กษร 7 ขีนาด้ ตั�ว็เลัขีย/งมาก ย/งมขีนาด้ใหญ่� ตั�.งแตั� -7 ไป็จนถ2ง +7
ค�าส��งในการก�าหนดลั�กษณะต้�วอ�กษร (Style)
• การก#าหนด้ตั�ว็อ�กษรตั�ว็หนา ใช้ แที่�ก <B>
• การก#าหนด้ตั�ว็อ�กษรตั�ว็เอยง ใช้ แที่�ก <I>
• การก#าหนด้ขีด้เส นใตั ตั�ว็อ�กษร ใช้ แที่�ก <U>
• การก#าหนด้ตั�ว็อ�กษรตั�ว็พ/มพ)ด้ด้ ใช้ แที่�ก <TT>
• การก#าหนด้ขีด้เส นพาด้ที่�บกลัางตั�ว็อ�กษร ใช้ แที่�ก <S>
• การก#าหนด้ตั�ว็อ�กษรตั�ว็ห อย ใช้ แที่�ก <SUB>
• การก#าหนด้ตั�ว็อ�กษรตั�ว็ยก ใช้ แที่�ก <SUP>
• การก#าหนด้ตั�ว็อ�กษรตั�ว็โตั ใช้ แที่�ก <BIG>
• การก#าหนด้ตั�ว็อ�กษรตั�ว็เลั�ก ใช้ แที่�ก <SMALL>
ค#าส�งป็ร�บแตั�งตั�ว็หน�งส*อ
• ตั�ว็หนา ค*อ "b" หร*อจะใช้ "B" ก�ได้ คร�บ แลัะใช้ สองค#าส�งพร อม ก�นได้
• <B><U>หนาแลัะขีด้เส นใตั </U></B> จะได้ หนาแลัะขี�ดเสนใต้
อธิ�บายค�าส��ง
โคด ต้�วอย�างการใช้โคด
ผลัขีองโคด
ที่#าให เป็�นตั�ว็หนา
B <B>หนา</B>
หนา
ที่#าให เป็�นตั�ว็เอยง
I <I>เอยง</I>
เอยง
ที่#าการขีด้เส นใตั
U <U>ขีด้เส นใตั </U>
ขีด้เส นใตั
อ�กษรต้�วหนา (Bold)
ร�ปแบบ <B>ขีอความ</B>ต้�วอย�าง <B>bcoms.net</B>
จะที่#าให ขี อคว็ามที่อย��ใน<B>....</B> มคว็ามหนาเก/ด้ขี2.นเช้�น bcoms.net
อ�กษรต้�วเอน (Itatic)
ร�ปแบบ <I>ขีอความ</I>ต้�วอย�าง <I>bcoms.net</I>
ที่#าให ขี อคว็ามที่อย��ใน <I>....</I> เก/ด้เป็�นตั�ว็เอนขี2.น เช้�น bcoms.net
ต้�วขี�ดเสนใต้ (Underline)
ร�ปแบบ <U>ขีอความ</U>ต้�วอย�าง <U>bcoms.net</U>
ที่#าให ขี อคว็ามที่อย��ใน <U>.....<U> มเส นขีด้อย��ใตั ตั�ว็อ�กษรเก/ด้ขี2.น เช้�น bcoms.net
ต้�วอ�กษรม�ขีนาดคงท�� (Typewriter text)
ร�ปแบบ <TT>ขีอมความ</TT>ต้�วอย�าง <TT>bcoms.net</TT>
ที่#าให ขี อคว็าม ที่อย��ใน <TT>.....</TT>มลั�กษณะเป็�น fixed space เก/ด้ขี2.น เช้�นbcoms.net
แบบต้�วอ�กษร (FONT) ร�ปแบบ <FONT FACE="font name>ขีอความ</FONT>
ต้�วอย�าง <FONT FACE="AngsanaUPC">bcoms.net</FONT>
Font name เป็�นช้*อขีอง Font ที่เราตั องการให เป็�น เช้�น <FONT FACE="AngsanaUPC"> bcoms.net</FONT>
การก�าหนดขีนาด Font ท�%งเอกสาร
ร�ปแบบ <Basefont size="X">ต้�วอย�าง <Basefont size=3>
เป็�นการก#าหนด้ขีนาด้ขีองตั�ว็อ�กษรในโฮมเพจให มขีนาด้ เที่�าก�นที่�.งเอกสาร เพ*อสะด้ว็กเราจะได้ ไม�ตั องก#าหนด้บ�อย ๆ ป็กตั/แลั ว็จะก#าหนด้ขีนาด้เป็�น 3 โด้ยไม�ต้องม�ต้�วป0ดเหม*อนค#าส�งอ*น ๆ (X แที่นตั�ว็เลัขี)
การก�าหนดก1�งกลัางหนาเว2บเพจร�ปแบบ <CENTER>ขีอความ</CENTER>
ต้�วอย�าง <CENTER>คอมพ�วเต้อร"เบ$%องต้น </CENTER>
ค#าว็�า คอมพ/ว็เตัอร)เบ*.องตั น จะอย��ตัรงก2งกลัางหน าเว็�บพอด้
การก�าหนดส�ช้$�อมาต้รฐาน ต้�วเลัขีฐาน 16 ในระบบส� #RRGGBB ส�ท��ปรากฏบนจอภาพ ส�ท��ได
Black #000000 ส�ด�า
Blue #0000FF ส�น�%าเง�นเขีม
Cyan #00FFFF ส�คราม
Darkgray #A9A9A9 ส�เทาเขีม
Gray #808080 ส�เทา
Green #008000 ส�เขี�ยว
Lightgray #D3D3D3 ส�เทาอ�อน
Magenta #FF00FF ส�ม�วงอ�อน
Orange #FFA500 ส�สม
Pink #FFC0CB ส�ช้มพ�
Red #FF0000 ส�แดง
White #FFFFFF ส�ขีาว
Yellow #FFFF00 ส�เหลั$อง
การก�าหนดส�ต้�วอ�กษรร�ปแบบ <FONT COLOR=“ส�”>ขีอความ </FONT>
ต้�วอย�าง <FONT COLOR=“BLUE”>คอมพ�วเต้อร"</FONT>
ผลัลั�พธ์) ค*อ ค#าว็�า “คอมพ�วเต้อร" ” จะแสด้งเป็�นสน#.าเง/น
การก�าหนดส�พ$%นหลั�งใหหนาเว2บเพจร�ปแบบ <BODY BGCOLOR=“ส�”>ต้�วอย�าง <BODY BGCOLOR=“YELLOW”>
ก#าหนด้สพ*.นหลั�งจากช้*อสมาตัรฐานผลัลั�พธ์) ค*อ พ*.นหน าเว็�บจะกลัายเป็�นส�เหลั$อง -----------------------------------------นอกจากน�%ย�งก#าหนด้สพ*.นหลั�งจากเลัขีฐาน 16
ค#าส�งที่ไม�ตั องใช้ ค#าส�งป็,ด้• เช้�น– ค#าส�งขี2.นบรรที่�ด้ใหม� (Line Break) <BR>– ค#าส�งสร างเส นในแนว็นอนขีองหน าจอ <HR>
……………………ต้�วอย�าง• <HTML>• <HEAD><TITLE> Break Rule </TITLE></HEAD>• <BODY>• Microsoft ถ�กตั�ด้ส/นโด้ยศาลัสหร�ฐแลั ว็<BR>• โด้ยศาลัส�งให Microsoft แยกบร/ษ�ที่ออกเป็�นบร/ษ�ที่ย�อย ๆ
<HR>• </BODY>• </HTML>
การขี�ดเสนค��นร�ปแบบ <HR WIDTH=“ความยาวขีอง
เสน”><HR SIZE=“ขีนาดขีองเสน”><HR COLOR=“ส�ขีองเสน”>
<HR Align = "ตั#าแหน�งการจ�ด้ว็าง" >ต้�วอย�าง<HR WIDTH=“250”SIZE=“10”
COLOR=“RED”>
การแทรกภาพบนเว2บเพจช้น�ดขีอง
ร�ปภาพ
1. Graphics Interchange Format (GIF) เป็�นภาพที่มการบบอ�ด้ ขี อม�ลั ภาพจ2งมขีนาด้เลั�ก แตั�สที่ร�ป็ภาพในแบบ GIF น�.นสามารถ
แสด้งผลัได้ เพยง 256 ส จ2งเหมาะก�บภาพในลั�กษณะภาพว็าด้
2. Joint Photographic Experts Group (JPEG หร*อ JPG) เป็�น ร�ป็ภาพที่ถ�กบบอ�ด้ขี อม�ลัไว็ ซึ่2งค&ณภาพขีองภาพที่ได้ จะม
ค&ณภาพลัด้ลังตัามขีนาด้ที่บบอ�ด้ขี อม�ลั แตั�ไม�จ#าก�ด้จ#านว็นส ไฟลั)ภาพแบบ JPEG เหมาะส#าหร�บภาพในลั�กษณะภาพถ�าย
การแทรกร�ปภาพใหหนาเว2บเพจร�ปแบบ <IMG SRC=“ช้$�อร�ปภาพ”></IMG>
ต้�วอย�าง <IMG SRC=“PIC01.JPG”></IMG>
ผลัลั�พธ์) ค*อ พ*.นหน าเว็�บจะกลัายเป็�นส�เหลั$อง
การใส�ร�ป็ภาพ• ระบ*ดวย Tag img <img scr=“x”> โดยท�� x ค$อไฟลั"ร�ปภาพท��ต้องการแสดง
เช้�น <img scr=“logo.jpg”>
• หากไฟลั"ร�ปภาพไม�ไดเก2บไวท�� path (ต้�าแหน�ง)เด�ยวก�บเอกสาร html จะต้องระบ* path ขีองร�ปภาพไวหนาไฟลั"ดวย เช้�น<img scr= “http://www.macare.net/images/logo.jpg”>
ต้�วอย�าง ……………………
<html>
<head><title>Font</title></head>
<body> Google Banner <br>
<img src=“http://www.macare.net/images/logo.jpg ">
</body>
</html>
ค�าส��งในการสรางต้าราง (Table)• Tag• ค�าอธิ�บาย• <TABLE> ... </TABLE> ค#าส�งในการสร างตัาราง• <CAPTION> ... </CAPTION> ค#าส�งในการก#าหนด้ขี อคว็าม
ก#าก�บตัาราง• <TR> ... </TR> ค#าส�งในการก#าหนด้แถว็ขีองตัาราง 1 แถว็• <TH> ... </TH> ค#าส�งในการก#าหนด้ส�ว็นห�ว็ขีองตัารางแถว็
แรก• <TD> ... </TD> ค#าส�งในการก#าหนด้ส�ว็นขีองขี อม�ลัในแถว็ หร*อ
ที่#าคอลั�มน)
โครงสร างขีองค#าส�งในการสร างตัาราง• <TABLE>
<CAPTION> ขี อคว็ามก#าก�บตัาราง </CAPTION> <TR> <TH> ขี อคว็ามส�ว็นห�ว็ </TH> .................... .................... </TR> <TR> <TD> ขี อคว็ามส�ว็นขีองขี อม�ลั </TD> ........................ ........................ </TR> <TR> <TD> ขี อคว็ามส�ว็นขีองขี อม�ลั </TD> ........................ ........................ </TR> ........................ ........................ ........................
• </TABLE>
การเช้$�อมโยงเว2บเพจ (Link)
• การสรางจ*ดเช้$�อมโยงขีอความ (Text Link)• ในการเช้*อมโยงเว็บเพจเราจะใช้ แที่�ก <A> โด้ยการก#าหนด้
ขี อคว็ามในเอกสาร HTML เป็�นจ&ด้เช้*อมโยง โด้ยมร�ป็แบบด้�งน.
• <A HREF = "URL"> ขี อคว็าม </A>
• เช้�น <A HREF="http://www.ru.ac.th/">มหาว็/ที่ยาลั�ยรามค#าแหง</A><BR>
<A HREF="http://www.cu.ac.th/">จ&ฬาลังกรณ)มหาว็/ที่ยาลั�ย</A><BR><A HREF="http://www.tu.ac.th/">มหาว็/ที่ยาลั�ยธ์รรมศาสตัร)</A><BR>
การสรางจ*ดเช้$�อมโยงก�บร�ปภาพ (Graphic Link)
• เป็�นการก#าหนด้ให ร�ป็ภาพเป็�นจ&ด้เช้*อมโยง โด้ยมร�ป็แบบด้�งน.
• <A HREF = "URL"><IMG SRC = "ช้$�อไฟลั""></A>• เช้�น• <A HREF="http://www.thairath.com/">
<IMG SRC="thairath.gif" BORDER="0"></A>