Introduction to HTML

Introduction to HTML

Agenda ระบบเคร�อข่าย Internet การสื�บค�นข่�อมู�ล Social Network ภาษา HTML

<html>

</html>

<body> ……...เนื้��อหา</body>

<head> <title> Page Title </title></head>

กำาหนื้ดส่ วนื้ห�ว

กำาหนื้ดเนื้��อหา

โครงส่ร�างของ ไฟล์� HTMLไฟล�เอกสืาร HTML ประกอบด้�วยสืวนประกอบสืองสืวนค�อ Hea

d ก�บ Body

ส่ วนื้ห�วเร��อง (Head Section)

<head> <title> Title of page </title></head>

ใช้�อธิ�บายเกำ!�ยวกำ�บข�อมู#ล์เฉพาะของหนื้�าเว'บนื้��นื้ๆ มู! Tag ส่าค�ญ ค�อ

Tag

อย�ในเคร��องหมูาย - less than bracket ( < )และ - greater than bracket ( > )

Tag ใน HTML แบงได้� 2 ล�กษณะ ค�อ – Tag เด!�ยว

Tag ที่%�ไมูต้�องมู%การป'ด้รห�สื เช่น , เป)นต้�น– Tag เปิ+ด/ปิ+ด

Tag ที่%�ประกอบด้�วย Tag เป'ด้ และ Tag ป'ด้ โด้ย Tagป'ด้ จะมู%เคร��องหมูาย slash ( / ) น,าหน�าค,าสื��งใน Tagน�-นๆ เช่น …, <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. This text is bold </body></html>

ข�อควรจำา

Web Browser ทุ/กำโปิรแกำรมูเมู��อทุากำารแปิล์ง HTML ให�แส่ดงเปิ1นื้ภาพบนื้จำอ

• Web Browser จำะไมู ส่นื้ใจำช้ องว าง กำารเว�นื้วรรค หร�อข3�นื้บรรทุ�ดใหมู (white space, tab, carriage returns)

• Tag ส่ามูารถใช้�ตั�วอ�กำษรตั�วพ�พมู�ใหญ หร�อพ�มูพ�เล์'กำกำ'ได� (non case-sensitive)

• Tags เกำ�อบทุ/กำตั�ว ตั�องปิรากำฏเปิ1นื้ค# เส่มูอ นื้��นื้ค�อเมู��อมู! Tag เปิ+ด กำ'ตั�องมู! Tag ปิ+ด ยกำเว�นื้ Tags พ�เศษบางตั�วเทุ านื้��นื้


ตั�วอย างตั อไปินื้!�แส่ดงผล์ออกำมูาเหมู�อนื้กำ�นื้

<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 เกำ!�ยวกำ�บกำารจำ�ดพารากำราฟ ค�อ ส่ามูารถกำาหนื้ด attribute ALIGN เช้ นื้

...

กำารจำ�ดวางข�อความูในื้เอกำส่าร

• คาส่��งกำารจำ�ดตัาแหนื้ งของข�อความู (Paragraph Break)

• คาส่��งข3�นื้บรรทุ�ดใหมู (Line Break) • คาส่��งในื้กำารกำาหนื้ดห�วเร��อง (Heading)

• คาส่��งจำ�ดวางข�อความูกำ3�งกำล์างหนื้�า (Center)


คาส่��งกำารจำ�ดตัาแหนื้ งของข�อความู (Paragraph Break)

<HTML><HEAD><TITLE> Paragraph </TITLE></HEAD><BODY> Left Alignment Center Alignment Right Alignment </BODY></HTML>

ร#ปิแบบ :: ... ข่�อความู ...

คาส่��งข3�นื้บรรทุ�ดใหมู (Line Break)

<HTML>

<HEAD><TITLE> Lind Break </TITLE></HEAD>

<BODY>

This is my first page. That is created by Notepad.

</BODY>

</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)

• คาส่��งกำารกำาหนื้ดส่!ให�กำ�บตั�วอ�กำษรทุ��งเอกำส่าร

คาส่��งกำารจำ�ดร#ปิแบบตั�วอ�กำษร


คาส่��งกำารกำาหนื้ดร#ปิแบบตั�วอ�กำษร (Font Type)

• แบบตั�วอ�กำษร (Font Face) • ขนื้าดของตั�วอ�กำษร (Font Size)

• ส่!ของตั�วอ�กำษร (Font Color)

ใช้� Tag ตัามูด�วย Attribute เพ��อกำาหนื้ด

แบบต้�วอ�กษร (Font Face)

 ... ข�อความู ... ส่ามูารถระบ/มูากำกำว า 1 ฟอนื้ตั� ให�กำาหนื้ดร#ปิแบบด�งนื้!� ... ข�อความู ... 

ข�อด!ของกำารกำาหนื้ดฟอนื้ตั�ไว�มูากำกำว า 1 ฟอนื้ตั�ค�อ เมู��อ Web Browser หาฟอนื้ตั�ทุ!� 1 ไมู เจำอกำ'จำะหาฟอนื้ตั�ทุ!� 2 ตั อไปิตัามูล์าด�บ

กำารกำาหนื้ดแบบตั�วอ�กำษรใช้� Attribute “Face”

<HTML><HEAD><TITLE> Font Face </TITLE></HEAD><BODY> Font Face AngsanaUPC Font Face Comic Sans MS

</BODY>

</HTML>

ต้�วอยางการก,าหนด้แบบต้�วอ�กษร

ข่นาด้ข่องต้�วอ�กษร (Font Size) ..........<HTML><HEAD><TITLE> Font Face </TITLE></HEAD><BODY>Font Size 1 Font Size 2 Font Size 3 Font Size 4 Font Size 5 Font Size 6 Font Size 7 </BODY></HTML>

กำารกำาหนื้ดขนื้าดของตั�วอ�กำษรใช้� Attribute "Size"

มู! 7 ขนื้าด ใช้�ตั�วเล์ข 1-7 เปิ1นื้ตั�วกำาหนื้ดค ามูาตัรฐานื้ค�อ 3

ตั�วอย าง

สื%ข่องต้�วอ�กษร (Font Color) กำารกำาหนื้ดส่!ให�กำ�บตั�วอ�กำษรใช้� Attribute “color“

ส่ามูารถกำาหนื้ดส่!ของตั�วอ�กำษรทุาได� 2 ว�ธิ! ค�อ1 .กำาหนื้ดโดยช้��อของส่!มูาตัรฐานื้

2. กำาหนื้ดโดยรห�ส่เล์ขฐานื้ 16 ... ข�อความู ...

โดยใช้�แทุนื้รห�ส่ด�วยเล์ขฐานื้ 16 ในื้ช้ วง 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

 ... ข�อความู ...

ตั�วอย างค าส่!ในื้ระบบเล์ขฐานื้ 16

RGB (Red Green Blue)FF0000 ค�อ สื%แด้ง00FF00 ค�อสื%เข่%ยว0000FF ค�อสื%น,-าเง4น


<HTML><HEAD><TITLE> Font Color</TITLE></HEAD><BODY>

 Blue Color Green Color #FFA500 

</BODY></HTML>

ต้�วอยางการก,าหนด้สื%ข่องต้�วอ�กษร

ตั�วอย างกำารกำาหนื้ดส่!ของตั�วอ�กำษร แล์ะขนื้าด

<HTML><HEAD> <TITLE>FONT COLOR </TITLE> </HEAD><BODY text=“blue"> ข�อความูปิกำตั� ส่!แดง ขนื้าด5 ข�อความูปิกำตั�</BODY>

</HTML> ข่�อความูปกต้4สื%แด้ง ข่นาด้5ข่�อความูปกต้4

• ค,าสื��งการก,าหนด้ร�ปแบบต้�วอ�กษร (Font Type)

• ค,าสื��งการก,าหนด้ล�กษณะต้�วอ�กษร (Style)• ค,าสื��งการก,าหนด้สื%พื้�-นหล�ง (Background)• ค,าสื��งการก,าหนด้สื%ให�ก�บต้�วอ�กษรที่�-งเอกสืาร

คาส่��งกำารจำ�ดร#ปิแบบตั�วอ�กำษร


คาส่��งกำารกำาหนื้ดล์�กำษณะตั�วอ�กำษร (Style)

ช้ วยในื้กำารกำาหนื้ดล์�กำษณะตั�วอ�กำษรให�มู!ความูเด นื้ช้�ด เพ��อความูเหมูาะส่มูกำ�บงานื้ในื้ล์�กำษณะตั างๆ มู!ร#ปิแบบตั างๆ ด�งนื้!�

• กำารกำาหนื้ดตั�วอ�กำษรตั�วหนื้า (Bold) ใช้� Tag • กำารกำาหนื้ดตั�วอ�กำษรตั�วเอ!ยง (Italic) ใช้� Tag • กำารกำาหนื้ดข!ดเส่�นื้ใตั�ตั�วอ�กำษร (Underline) ใช้� Tag • กำารกำาหนื้ดข!ดเส่�นื้พาดทุ�บกำล์างตั�วอ�กำษร (Strikethrough) ใช้� Tag <S> • กำารกำาหนื้ดตั�วอ�กำษรตั�วห�อย (Subscript) ใช้� Tag • กำารกำาหนื้ดตั�วอ�กำษรตั�วยกำ (Superscript) ใช้� Tag

ตั�วอย างกำารกำาหนื้ดล์�กำษณะตั�วอ�กำษร

<HTML><HEAD><TITLE> Font Style </TITLE></HEAD><BODY> Font style is normal Font style is Bold Font style is Italic Font style is Underline Font style is <S>Strikethrough</S> Font style is Subscript Font style is Superscript </BODY>

</HTML>

ตั�วอย างตั�วอ�กำษรตั�วอ�กำษรห�อย (subscript)

<HTML><HEAD> <TITLE>SUBSCRIPT </TITLE></HEAD><BODY =“blue” > H2 0 = Water </BODY>

</HTML>

H2O

คาส่��งกำารกำาหนื้ดส่!พ��นื้หล์�ง (Background)

กำารกำาหนื้ดส่!พ��นื้หล์�งของ Web Page เราส่ามูารถทุาได�จำากำ Tag <BODY> โดยกำาหนื้ดจำากำ Attributes “BGColor” ส่ามูารถกำาหนื้ดได� 2 ว�ธิ!ค�อ กำาหนื้ดโดยช้��อของส่!มูาตัรฐานื้ แล์ะกำาหนื้ดโดยรห�ส่เล์ขฐานื้ 16 มู!ร#ปิแบบด�งนื้!� <BODY BGColor = "ส่!พ��นื้หล์�ง"> .... </BODY><BODY BGColor = "#RRGGBB"> .... </BODY>

1

2

ตั�วอย างกำารกำาหนื้ดส่!พ��นื้หล์�ง

<HTML>

<HEAD><TITLE> Background Color </TITLE></HEAD>

<BODY BGColor="#FFFF00">

The body background is Yellow.

</BODY>

</HTML>

คาส่��งกำารกำาหนื้ดส่!ให�กำ�บตั�วอ�กำษรทุ��งเอกำส่าร

ส่ามูารถทุาได�จำากำ Tag <BODY> โดยกำาหนื้ดจำากำ Attributes "Text“

ส่ามูารถกำาหนื้ดได� 2 ว�ธิ!ค�อ กำาหนื้ดโดยช้��อของส่!มูาตัรฐานื้ แล์ะกำาหนื้ดโดยรห�ส่เล์ขฐานื้ 16 มู!ร#ปิแบบด�งนื้!�

<BODY Text = "ส่!พ��นื้หล์�ง"> .... </BODY><BODY Text = "#RRGGBB"> .... </BODY>

1

2

ตั�วอย างกำารกำาหนื้ดส่!ให�กำ�บตั�วอ�กำษรทุ��งเอกำส่าร

<HTML>

<HEAD><TITLE> Heading </TITLE></HEAD>

<BODY Text="#FF0000">

The body text color is Red.

</BODY>

</HTML>

Tag ทุ!�ใช้�แส่ดงผล์แบบรายกำาร (Lists) กำารแส่ดงข�อมู#ล์แบบรายกำารจำะมู!กำารแส่ดงผล์ 3 แบบ ค�อ1. รายกำารแบบมู!ล์าด�บ (Ordered list)2. รายกำารแบบไมู มู!ล์าด�บ (Unordered list)3. รายกำารแบบจำากำ�ดความู (Definition List)

คาส่��งกำารแส่ดงรายกำาร


คาส่��งกำารแส่ดงรายกำารแบบมู!ล์าด�บ (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>

คาส่��งกำารแส่ดงรายกำารแบบไมู มู!ล์าด�บ (Unordered list)

• ใช้� Tag <UL> • ไมู มู!ตั�วเล์ขกำากำ�บในื้แตั ล์ะรายกำาร

<UL> <LI> ข�อมู#ล์ในื้ List <LI> ข�อมู#ล์ในื้ List ... </UL>

ร#ปิแบบ

กำารใส่ ร#ปิภาพไฟล์�ร#ปิภาพทุ!�แส่ดงบนื้ 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”

Introduction to HTML

Documents

Transcript of Introduction to HTML