introduction to html
DESCRIPTION
Introduction to HTML. Agenda ระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML. โครงสร้างของ ไฟล์ HTML ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body. < html > . < head > Page Title . กำหนดส่วนหัว. < body > - PowerPoint PPT PresentationTRANSCRIPT
Introduction to HTML
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
<html>
</html>
<body> ……...เนื้��อหา</body>
<head> <title> Page Title </title></head>
กำาหนื้ดส่ วนื้ห�ว
กำาหนื้ดเนื้��อหา
โครงส่ร�างของ ไฟล์� HTMLไฟล�เอกสืาร HTML ประกอบด้�วยสืวนประกอบสืองสืวนค�อ Hea
d ก�บ Body
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ส่ วนื้ห�วเร��อง (Head Section)
<head> <title> Title of page </title></head>
ใช้�อธิ�บายเกำ!�ยวกำ�บข�อมู#ล์เฉพาะของหนื้�าเว'บนื้��นื้ๆ มู! Tag ส่าค�ญ ค�อ
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
Tag
อย�ในเคร��องหมูาย - less than bracket ( < )และ - greater than bracket ( > )
Tag ใน HTML แบงได้� 2 ล�กษณะ ค�อ – Tag เด!�ยว
Tag ที่%�ไมูต้�องมู%การป'ด้รห�สื เช่น <P>, <BR> เป)นต้�น– Tag เปิ+ด/ปิ+ด
Tag ที่%�ประกอบด้�วย Tag เป'ด้ และ Tag ป'ด้ โด้ย Tagป'ด้ จะมู%เคร��องหมูาย slash ( / ) น,าหน�าค,าสื��งใน Tagน�-นๆ เช่น <B>…</B>, <BLINK>…</BLINK>เป)นต้�น
การเข่%ยน Tags <BLINK>, <Blink> หร�อ <blink> ไมูแต้กต้างก�น ให�ผลเหมู�อนก�น (not case sensitve)Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ตั�วอย าง<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body></html>
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ข�อควรจำา
Web Browser ทุ/กำโปิรแกำรมูเมู��อทุากำารแปิล์ง HTML ให�แส่ดงเปิ1นื้ภาพบนื้จำอ
• Web Browser จำะไมู ส่นื้ใจำช้ องว าง กำารเว�นื้วรรค หร�อข3�นื้บรรทุ�ดใหมู (white space, tab, carriage returns)
• Tag ส่ามูารถใช้�ตั�วอ�กำษรตั�วพ�พมู�ใหญ หร�อพ�มูพ�เล์'กำกำ'ได� (non case-sensitive)
• Tags เกำ�อบทุ/กำตั�ว ตั�องปิรากำฏเปิ1นื้ค# เส่มูอ นื้��นื้ค�อเมู��อมู! Tag เปิ+ด กำ'ตั�องมู! Tag ปิ+ด ยกำเว�นื้ Tags พ�เศษบางตั�วเทุ านื้��นื้
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ตั�วอย างตั อไปินื้!�แส่ดงผล์ออกำมูาเหมู�อนื้กำ�นื้
<html> <head> <title>Title of page</title> </head> <body> This is
my first homepage. </body></html>
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. </body></html>
Attributes
• Attributes เปิ1นื้ส่ วนื้ขยายความูส่ามูารถของ Tagใส่ ภายในื้เคร��องหมูาย < > ในื้ส่ วนื้ Tag เปิ+ดเทุ านื้��นื้
• แตั ล์ะ Tag จำะมู! Attribute แตักำตั างกำ�นื้ไปิ มู!จำานื้วนื้ไมู เทุ ากำ�นื้ กำารระบ/ Attribute มูากำกำว า 1 Attribute ให�ใช้�ช้ องว างเปิ1นื้ตั�วค��นื้
เช้ นื้ Tag เกำ!�ยวกำ�บกำารจำ�ดพารากำราฟ ค�อ <P>ส่ามูารถกำาหนื้ด attribute ALIGN เช้ นื้
<P ALIGN="Left">...</P>
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
กำารจำ�ดวางข�อความูในื้เอกำส่าร
• คาส่��งกำารจำ�ดตัาแหนื้ งของข�อความู (Paragraph Break)
• คาส่��งข3�นื้บรรทุ�ดใหมู (Line Break) • คาส่��งในื้กำารกำาหนื้ดห�วเร��อง (Heading)
• คาส่��งจำ�ดวางข�อความูกำ3�งกำล์างหนื้�า (Center)
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
คาส่��งกำารจำ�ดตัาแหนื้ งของข�อความู (Paragraph Break)
<HTML><HEAD><TITLE> Paragraph </TITLE></HEAD><BODY> <P ALIGN="Left"> Left Alignment </P> <P ALIGN="Center"> Center Alignment </P> <P ALIGN="Right"> Right Alignment </P></BODY></HTML>
ร#ปิแบบ :: <P Align = "ต้,าแหนง" > ... ข่�อความู ... </P>
คาส่��งข3�นื้บรรทุ�ดใหมู (Line Break)
<HTML>
<HEAD><TITLE> Lind Break </TITLE></HEAD>
<BODY>
This is my first page. <BR> That is created by Notepad.
</BODY>
</HTML>
ร#ปิแบบ :: ข่�อความู..... <BR>
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
คาส่��งในื้กำารกำาหนื้ดห�วเร��อง (Headding)
n ค�อหมูายเลข่แสืด้งระด้�บ
ระด้�บ 1 จะมู%ข่นาด้ใหญ่สื1ด้ ระด้�บ 6 จะมู%ข่นาด้เล2กที่%�สื1ด้ ระด้�บ 3 เป)นข่นาด้
มูาต้รฐาน
ร#ปิแบบ :: <Hn> ...ข่�อความูห�วเร��อง... </Hn><HTML>
<HEAD><TITLE> Heading </TITLE></HEAD><BODY> <H1> This is Heading 1 </H1> <H2> This is Heading 2 </H2> <H3> This is Heading 3 </H3> <H4> This is Heading 4 </H4> <H5> This is Heading 5 </H5> <H6> This is Heading 6 </H6></BODY></HTML>
คาส่��งจำ�ดวางข�อความูกำ3�งกำล์างหนื้�า (Center)
ร#ปิแบบ :: <CENTER>.... ข่�อความู... </CENTER><HTML>
<HEAD><TITLE> Center Example </TITLE></HEAD><BODY> <CENTER>Hello Heading</CENTER> <H1><CENTER>Hello Heading</CENTER></H1></BODY></HTML>
• คาส่��งกำารกำาหนื้ดร#ปิแบบตั�วอ�กำษร (Font Type)
• คาส่��งกำารกำาหนื้ดล์�กำษณะตั�วอ�กำษร (Style)
• คาส่��งกำารกำาหนื้ดส่!พ��นื้หล์�ง (Background)
• คาส่��งกำารกำาหนื้ดส่!ให�กำ�บตั�วอ�กำษรทุ��งเอกำส่าร
คาส่��งกำารจำ�ดร#ปิแบบตั�วอ�กำษร
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
คาส่��งกำารกำาหนื้ดร#ปิแบบตั�วอ�กำษร (Font Type)
• แบบตั�วอ�กำษร (Font Face) • ขนื้าดของตั�วอ�กำษร (Font Size)
• ส่!ของตั�วอ�กำษร (Font Color)
ใช้� Tag <FONT> ตัามูด�วย Attribute เพ��อกำาหนื้ด
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
แบบต้�วอ�กษร (Font Face)
<FONT Face = "ช้��อฟอนื้ตั�"> ... ข�อความู ... </FONT> ส่ามูารถระบ/มูากำกำว า 1 ฟอนื้ตั� ให�กำาหนื้ดร#ปิแบบด�งนื้!� <FONT Face = "ช้��อฟอนื้ตั�1",ช้��อฟอนื้ตั�2",...> ... ข�อความู ... </FONT>
ข�อด!ของกำารกำาหนื้ดฟอนื้ตั�ไว�มูากำกำว า 1 ฟอนื้ตั�ค�อ เมู��อ Web Browser หาฟอนื้ตั�ทุ!� 1 ไมู เจำอกำ'จำะหาฟอนื้ตั�ทุ!� 2 ตั อไปิตัามูล์าด�บ
กำารกำาหนื้ดแบบตั�วอ�กำษรใช้� Attribute “Face”
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
<HTML><HEAD><TITLE> Font Face </TITLE></HEAD><BODY> <FONT Face="AngsanaUPC"> Font Face AngsanaUPC </FONT> <FONT Face="Comic Sans MS"> Font Face Comic Sans MS
</FONT></BODY>
</HTML>
ต้�วอยางการก,าหนด้แบบต้�วอ�กษร
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ข่นาด้ข่องต้�วอ�กษร (Font Size) <FONT Size="ค ากำาหนื้ดขนื้าดของตั�ว
อ�กำษร">..........</FONT><HTML><HEAD><TITLE> Font Face </TITLE></HEAD><BODY><FONT Size="1">Font Size 1</FONT><BR><FONT Size="2">Font Size 2</FONT><BR><FONT Size="3">Font Size 3</FONT><BR><FONT Size="4">Font Size 4</FONT><BR><FONT Size="5">Font Size 5</FONT><BR><FONT Size="6">Font Size 6</FONT><BR><FONT Size="7">Font Size 7</FONT><BR></BODY></HTML>
กำารกำาหนื้ดขนื้าดของตั�วอ�กำษรใช้� Attribute "Size"
มู! 7 ขนื้าด ใช้�ตั�วเล์ข 1-7 เปิ1นื้ตั�วกำาหนื้ดค ามูาตัรฐานื้ค�อ 3
ตั�วอย าง
สื%ข่องต้�วอ�กษร (Font Color) กำารกำาหนื้ดส่!ให�กำ�บตั�วอ�กำษรใช้� Attribute “color“
ส่ามูารถกำาหนื้ดส่!ของตั�วอ�กำษรทุาได� 2 ว�ธิ! ค�อ1 .กำาหนื้ดโดยช้��อของส่!มูาตัรฐานื้
2. กำาหนื้ดโดยรห�ส่เล์ขฐานื้ 16 <FONT Color = "ช้��อส่!มูาตัรฐานื้"> ... ข�อความู ...</FONT>
โดยใช้�แทุนื้รห�ส่ด�วยเล์ขฐานื้ 16 ในื้ช้ วง 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
<FONT Color = "#RRGGBB"> ... ข�อความู ...</FONT>
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ตั�วอย างค าส่!ในื้ระบบเล์ขฐานื้ 16
RGB (Red Green Blue)FF0000 ค�อ สื%แด้ง00FF00 ค�อสื%เข่%ยว0000FF ค�อสื%น,-าเง4น
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
<HTML><HEAD><TITLE> Font Color</TITLE></HEAD><BODY>
<FONT color="Blue"> Blue Color </FONT><BR><FONT color="Green"> Green Color </FONT><BR><FONT color="#FFA500"> #FFA500 </FONT><BR>
</BODY></HTML>
ต้�วอยางการก,าหนด้สื%ข่องต้�วอ�กษร
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ตั�วอย างกำารกำาหนื้ดส่!ของตั�วอ�กำษร แล์ะขนื้าด
<HTML><HEAD> <TITLE>FONT COLOR </TITLE> </HEAD><BODY text=“blue"> ข�อความูปิกำตั� <FONT COLOR=“Red” 5SIZE=" "> ส่!แดง ขนื้าด5 </FONT> ข�อความูปิกำตั�</BODY>
</HTML> ข่�อความูปกต้4สื%แด้ง ข่นาด้5ข่�อความูปกต้4
• ค,าสื��งการก,าหนด้ร�ปแบบต้�วอ�กษร (Font Type)
• ค,าสื��งการก,าหนด้ล�กษณะต้�วอ�กษร (Style)• ค,าสื��งการก,าหนด้สื%พื้�-นหล�ง (Background)• ค,าสื��งการก,าหนด้สื%ให�ก�บต้�วอ�กษรที่�-งเอกสืาร
คาส่��งกำารจำ�ดร#ปิแบบตั�วอ�กำษร
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
คาส่��งกำารกำาหนื้ดล์�กำษณะตั�วอ�กำษร (Style)
ช้ วยในื้กำารกำาหนื้ดล์�กำษณะตั�วอ�กำษรให�มู!ความูเด นื้ช้�ด เพ��อความูเหมูาะส่มูกำ�บงานื้ในื้ล์�กำษณะตั างๆ มู!ร#ปิแบบตั างๆ ด�งนื้!�
• กำารกำาหนื้ดตั�วอ�กำษรตั�วหนื้า (Bold) ใช้� Tag <B> • กำารกำาหนื้ดตั�วอ�กำษรตั�วเอ!ยง (Italic) ใช้� Tag <I> • กำารกำาหนื้ดข!ดเส่�นื้ใตั�ตั�วอ�กำษร (Underline) ใช้� Tag <U> • กำารกำาหนื้ดข!ดเส่�นื้พาดทุ�บกำล์างตั�วอ�กำษร (Strikethrough) ใช้� Tag <S> • กำารกำาหนื้ดตั�วอ�กำษรตั�วห�อย (Subscript) ใช้� Tag <SUB> • กำารกำาหนื้ดตั�วอ�กำษรตั�วยกำ (Superscript) ใช้� Tag <SUP>
ตั�วอย างกำารกำาหนื้ดล์�กำษณะตั�วอ�กำษร
<HTML><HEAD><TITLE> Font Style </TITLE></HEAD><BODY> Font style is normal Font style is <B>Bold</B><BR> Font style is <I>Italic</I><BR> Font style is <U>Underline</U><BR> Font style is <S>Strikethrough</S><BR> Font style is <SUB>Subscript</SUB><BR> Font style is <SUP>Superscript</SUP><BR></BODY>
</HTML>
ตั�วอย างตั�วอ�กำษรตั�วอ�กำษรห�อย (subscript)
<HTML><HEAD> <TITLE>SUBSCRIPT </TITLE></HEAD><BODY =“blue” > H<Sub>2</Sub> 0 = Water </BODY>
</HTML>
H2O
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
คาส่��งกำารกำาหนื้ดส่!พ��นื้หล์�ง (Background)
กำารกำาหนื้ดส่!พ��นื้หล์�งของ Web Page เราส่ามูารถทุาได�จำากำ Tag <BODY> โดยกำาหนื้ดจำากำ Attributes “BGColor” ส่ามูารถกำาหนื้ดได� 2 ว�ธิ!ค�อ กำาหนื้ดโดยช้��อของส่!มูาตัรฐานื้ แล์ะกำาหนื้ดโดยรห�ส่เล์ขฐานื้ 16 มู!ร#ปิแบบด�งนื้!� <BODY BGColor = "ส่!พ��นื้หล์�ง"> .... </BODY><BODY BGColor = "#RRGGBB"> .... </BODY>
1
2
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ตั�วอย างกำารกำาหนื้ดส่!พ��นื้หล์�ง
<HTML>
<HEAD><TITLE> Background Color </TITLE></HEAD>
<BODY BGColor="#FFFF00">
The body background is Yellow.
</BODY>
</HTML>
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
คาส่��งกำารกำาหนื้ดส่!ให�กำ�บตั�วอ�กำษรทุ��งเอกำส่าร
ส่ามูารถทุาได�จำากำ Tag <BODY> โดยกำาหนื้ดจำากำ Attributes "Text“
ส่ามูารถกำาหนื้ดได� 2 ว�ธิ!ค�อ กำาหนื้ดโดยช้��อของส่!มูาตัรฐานื้ แล์ะกำาหนื้ดโดยรห�ส่เล์ขฐานื้ 16 มู!ร#ปิแบบด�งนื้!�
<BODY Text = "ส่!พ��นื้หล์�ง"> .... </BODY><BODY Text = "#RRGGBB"> .... </BODY>
1
2
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
ตั�วอย างกำารกำาหนื้ดส่!ให�กำ�บตั�วอ�กำษรทุ��งเอกำส่าร
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD>
<BODY Text="#FF0000">
The body text color is Red.
</BODY>
</HTML>
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
Tag ทุ!�ใช้�แส่ดงผล์แบบรายกำาร (Lists) กำารแส่ดงข�อมู#ล์แบบรายกำารจำะมู!กำารแส่ดงผล์ 3 แบบ ค�อ1. รายกำารแบบมู!ล์าด�บ (Ordered list)2. รายกำารแบบไมู มู!ล์าด�บ (Unordered list)3. รายกำารแบบจำากำ�ดความู (Definition List)
คาส่��งกำารแส่ดงรายกำาร
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
คาส่��งกำารแส่ดงรายกำารแบบมู!ล์าด�บ (Ordered list)
• ใช้� Tag <OL> • มู!ตั�วเล์ขกำากำ�บในื้แตั ล์ะรายกำาร • หมูายเล์ขจำะถ#กำกำาหนื้ดให�กำ�บส่มูาช้�กำทุ!�อย# ในื้
รายกำารโดยอ�ตัโนื้มู�ตั� <OL> <LI> ข�อมู#ล์ในื้ List <LI> ข�อมู#ล์ในื้ List ... </OL>
ร#ปิแบบ
คาส่��งกำารแส่ดงรายกำารแบบมู!ล์าด�บ (ตั อ)
• ส่ามูารถกำาหนื้ดตั�วเล์ขหร�อตั�วอ�กำษรเปิ1นื้ตั�วแส่ดงล์าด�บได�โดยใช้� Attribute “Type”
ช้นื้�ดของ Type
แส่ดง ร#ปิแบบ
1 ตั�วเล์ข 1,2,3,…
A ตั�วอ�กำษรพ�มูพ�ใหญ A,B,C,…
a ตั�วอ�กำษรพ�มูพ�เล์'กำ a,b,c,..
I ตั�วเล์ขโรมู�นื้ตั�ว
พ�พมู�ใหญ I,II,III,…
i ตั�วเล์ขโรมู�นื้ตั�ว
พ�พมู�เล์'กำ i,ii,iii,…
<OL Type= “n”>
ตั�วอย างรายกำารแบบมู!ล์าด�บ<HTML>
<HEAD><TITLE> Order List </TITLE></HEAD><BODY> <OL>
<LI>Coffee <LI>Milk </OL> <OL Type="I">
<LI>One <LI>Two </OL> </BODY></HTML>
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
คาส่��งกำารแส่ดงรายกำารแบบไมู มู!ล์าด�บ (Unordered list)
• ใช้� Tag <UL> • ไมู มู!ตั�วเล์ขกำากำ�บในื้แตั ล์ะรายกำาร
<UL> <LI> ข�อมู#ล์ในื้ List <LI> ข�อมู#ล์ในื้ List ... </UL>
ร#ปิแบบ
Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML
กำารใส่ ร#ปิภาพไฟล์�ร#ปิภาพทุ!�แส่ดงบนื้ Web จำะเร!ยกำว า "Image" + ผล์ด! ทุาให� Web Page ด#นื้ าส่นื้ใจำแล์ะส่วยมูากำข3�นื้ - ผล์เส่!ย ทุาให�กำารแส่ดงผล์ช้�าล์ง ด�งนื้��นื้กำารเล์�อกำร#ปิภาพ• ไมู ควรจำะเล์�อกำภาพทุ!�มู!ขนื้าดใหญ • ในื้ Web Page ไมู ควรมู!ภาพมูากำเกำ�นื้ไปิ โดยทุ��วไปิจำะใช้�มูาตัรฐานื้ 2 ช้นื้�ด ค�อ gif แล์ะ jpeg (jpg)
<IMG SRC=“ช้��อไฟล์�ร#ปิภาพ”>
ร#ปิแบบ
ตั�วอย างกำารใส่ ร#ปิภาพ
• เกำ'บไฟล์�ร#ปิภาพในื้ folder เด!ยวกำ�บ web Page<HTML>
<HEAD> <TITLE>Insert Image </TITLE></HEAD>
<BODY> <IMG SRC="picture.gif" width="200" height="180" border="1"> </BODY>
</HTML>
กำรณ!อย# ในื้ folder ย อย image ส่ามูารถกำาหนื้ดได�โดย “image/picture.gif”