1 / 37

Introduction to HTML

Introduction to HTML. Agenda ระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML. โครงสร้างของ ไฟล์ HTML ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body. < html > </ html >. < head > <title> Page Title </title> </ head >. กำหนดส่วนหัว. < body >

kato-fernandez
Download Presentation

Introduction to HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. โครงสร้างของ ไฟล์ HTMLไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body <html> </html> <head> <title> Page Title </title> </head> กำหนดส่วนหัว <body> ……...เนื้อหา </body> กำหนดเนื้อหา Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  3. ส่วนหัวเรื่อง (Head Section) ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆมี Tag สำคัญคือ <head> <title>Title of page</title> </head> Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  4. 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

  5. ตัวอย่าง <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

  6. ข้อควรจำ Web Browser ทุกโปรแกรมเมื่อทำการแปลง HTML ให้แสดงเป็นภาพบนจอ • Web Browser จะไม่สนใจช่องว่าง การเว้นวรรค หรือขึ้นบรรทัดใหม่ (white space, tab, carriage returns) • Tag สามารถใช้ตัวอักษรตัวพิพม์ใหญ่หรือพิมพ์เล็กก็ได้ (non case-sensitive) • Tags เกือบทุกตัว ต้องปรากฏเป็นคู่เสมอ นั่นคือเมื่อมี Tag เปิด ก็ต้องมี Tag ปิด ยกเว้น Tags พิเศษบางตัวเท่านั้น Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  7. ตัวอย่างต่อไปนี้แสดงผลออกมาเหมือนกันตัวอย่างต่อไปนี้แสดงผลออกมาเหมือนกัน <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>

  8. Attributes • Attributes เป็นส่วนขยายความสามารถของ Tag ใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น • แต่ละ Tag จะมี Attribute แตกต่างกันไป มีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น       เช่น Tag เกี่ยวกับการจัดพารากราฟ คือ <P> สามารถกำหนด attribute ALIGNเช่น <P ALIGN="Left">...</P> Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  9. การจัดวางข้อความในเอกสารการจัดวางข้อความในเอกสาร • คำสั่งการจัดตำแหน่งของข้อความ (Paragraph Break) • คำสั่งขึ้นบรรทัดใหม่ (Line Break) • คำสั่งในการกำหนดหัวเรื่อง (Heading) • คำสั่งจัดวางข้อความกึ่งกลางหน้า (Center) Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  10. คำสั่งการจัดตำแหน่งของข้อความ (Paragraph Break) รูปแบบ :: <P Align = "ตำแหน่ง"  > ... ข้อความ ... </P> <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>

  11. คำสั่งขึ้นบรรทัดใหม่ (Line Break) รูปแบบ :: ข้อความ..... <BR> <HTML> <HEAD><TITLE> Lind Break </TITLE></HEAD> <BODY> This is my first page. <BR> That is created by Notepad. </BODY> </HTML> Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  12. คำสั่งในการกำหนดหัวเรื่อง (Headding) รูปแบบ :: <Hn> ...ข้อความหัวเรื่อง... </Hn> nคือหมายเลขแสดงระดับ ระดับ 1 จะมีขนาดใหญ่สุด ระดับ 6 จะมีขนาดเล็กที่สุด ระดับ 3 เป็นขนาดมาตรฐาน <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>

  13. คำสั่งจัดวางข้อความกึ่งกลางหน้า (Center) รูปแบบ :: <CENTER>.... ข้อความ... </CENTER> <HTML><HEAD><TITLE> CenterExample </TITLE></HEAD><BODY> <CENTER>Hello Heading</CENTER> <H1><CENTER>Hello Heading</CENTER></H1></BODY></HTML>

  14. คำสั่งการจัดรูปแบบตัวอักษรคำสั่งการจัดรูปแบบตัวอักษร • คำสั่งการกำหนดรูปแบบตัวอักษร (Font Type) • คำสั่งการกำหนดลักษณะตัวอักษร (Style) • คำสั่งการกำหนดสีพื้นหลัง (Background) • คำสั่งการกำหนดสีให้กับตัวอักษรทั้งเอกสาร Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  15. คำสั่งการกำหนดรูปแบบตัวอักษร (Font Type) ใช้ Tag <FONT> ตามด้วย Attribute เพื่อกำหนด • แบบตัวอักษร (Font Face) • ขนาดของตัวอักษร (Font Size) • สีของตัวอักษร (Font Color) Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  16. การกำหนดแบบตัวอักษรใช้ Attribute “Face” <FONT Face = "ชื่อฟอนต์"> ... ข้อความ ... </FONT> แบบตัวอักษร (Font Face) สามารถระบุมากกว่า 1 ฟอนต์ ให้กำหนดรูปแบบดังนี้ <FONT Face = "ชื่อฟอนต์1",ชื่อฟอนต์2",...> ... ข้อความ ... </FONT> ข้อดีของการกำหนดฟอนต์ไว้มากกว่า 1 ฟอนต์คือ เมื่อ Web Browser หาฟอนต์ที่ 1 ไม่เจอก็จะหาฟอนต์ที่ 2 ต่อไปตามลำดับ Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  17. ตัวอย่างการกำหนดแบบตัวอักษร ตัวอย่างการกำหนดแบบตัวอักษร <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

  18. ขนาดของตัวอักษร (Font Size) การกำหนดขนาดของตัวอักษรใช้ Attribute "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> ตัวอย่าง มี 7 ขนาด ใช้ตัวเลข 1-7 เป็นตัวกำหนด ค่ามาตรฐานคือ 3

  19. สีของตัวอักษร (Font Color) • การกำหนดสีให้กับตัวอักษรใช้ Attribute “color“ • สามารถกำหนดสีของตัวอักษรทำได้ 2 วิธี คือ • กำหนดโดยชื่อของสีมาตรฐาน • 2. กำหนดโดยรหัสเลขฐาน 16 <FONT Color = "ชื่อสีมาตรฐาน"> ... ข้อความ ... </FONT> <FONT Color = "#RRGGBB"> ... ข้อความ ... </FONT> โดยใช้แทนรหัสด้วยเลขฐาน 16 ในช่วง 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  20. ตัวอย่างค่าสีในระบบเลขฐาน 16 RGB (Red Green Blue) FF0000 คือ สีแดง 00FF00 คือสีเขียว 0000FF คือสีน้ำเงิน Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  21. ตัวอย่างการกำหนดสีของตัวอักษร ตัวอย่างการกำหนดสีของตัวอักษร <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

  22. ตัวอย่างการกำหนดสีของตัวอักษร และขนาด <HTML><HEAD>             <TITLE>FONT COLOR </TITLE> </HEAD><BODY text=“blue"> ข้อความปกติ<FONT COLOR=“Red”SIZE="5"> สีแดง ขนาด5</FONT> ข้อความปกติ</BODY> </HTML> ข้อความปกติ สีแดง ขนาด5 ข้อความปกติ

  23. คำสั่งการจัดรูปแบบตัวอักษรคำสั่งการจัดรูปแบบตัวอักษร • คำสั่งการกำหนดรูปแบบตัวอักษร (Font Type) • คำสั่งการกำหนดลักษณะตัวอักษร (Style) • คำสั่งการกำหนดสีพื้นหลัง (Background) • คำสั่งการกำหนดสีให้กับตัวอักษรทั้งเอกสาร Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  24. คำสั่งการกำหนดลักษณะตัวอักษร (Style) ช่วยในการกำหนดลักษณะตัวอักษรให้มีความเด่นชัด เพื่อความเหมาะสมกับงานในลักษณะต่างๆ มีรูปแบบต่างๆ ดังนี้ • การกำหนดตัวอักษรตัวหนา (Bold) ใช้ Tag <B> • การกำหนดตัวอักษรตัวเอียง (Italic) ใช้ Tag <I> • การกำหนดขีดเส้นใต้ตัวอักษร (Underline) ใช้ Tag <U> • การกำหนดขีดเส้นพาดทับกลางตัวอักษร (Strikethrough) ใช้ Tag <S> • การกำหนดตัวอักษรตัวห้อย (Subscript) ใช้ Tag <SUB> • การกำหนดตัวอักษรตัวยก (Superscript) ใช้ Tag <SUP>

  25. ตัวอย่างการกำหนดลักษณะตัวอักษรตัวอย่างการกำหนดลักษณะตัวอักษร <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>

  26. ตัวอย่างตัวอักษรตัวอักษรห้อย (subscript) <HTML><HEAD>             <TITLE>SUBSCRIPT</TITLE> </HEAD><BODY text=“blue”> H<Sub>2</Sub>0 = Water</BODY> </HTML> H2O Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  27. คำสั่งการกำหนดสีพื้นหลัง (Background) การกำหนดสีพื้นหลังของ Web Page เราสามารถทำได้จาก Tag <BODY> โดยกำหนดจาก Attributes “BGColor” สามารถกำหนดได้ 2 วิธีคือ กำหนดโดยชื่อของสีมาตรฐาน และกำหนดโดยรหัสเลขฐาน 16 มีรูปแบบดังนี้ <BODY BGColor = "สีพื้นหลัง">....</BODY> 1 2 <BODY BGColor = "#RRGGBB">....</BODY> Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  28. ตัวอย่างการกำหนดสีพื้นหลังตัวอย่างการกำหนดสีพื้นหลัง <HTML><HEAD><TITLE> Background Color </TITLE></HEAD><BODY BGColor="#FFFF00"> The body background is Yellow.</BODY> </HTML> Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  29. คำสั่งการกำหนดสีให้กับตัวอักษรทั้งเอกสารคำสั่งการกำหนดสีให้กับตัวอักษรทั้งเอกสาร สามารถทำได้จาก Tag <BODY> โดยกำหนดจาก Attributes "Text“ สามารถกำหนดได้ 2 วิธีคือ กำหนดโดยชื่อของสีมาตรฐาน และกำหนดโดยรหัสเลขฐาน 16 มีรูปแบบดังนี้ <BODY Text = "สีพื้นหลัง"> .... </BODY> 1 2 <BODY Text = "#RRGGBB"> .... </BODY> Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  30. ตัวอย่างการกำหนดสีให้กับตัวอักษรทั้งเอกสารตัวอย่างการกำหนดสีให้กับตัวอักษรทั้งเอกสาร <HTML><HEAD><TITLE> Heading </TITLE></HEAD><BODY Text="#FF0000"> The body text color is Red.</BODY> </HTML> Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  31. คำสั่งการแสดงรายการ Tag ที่ใช้แสดงผลแบบรายการ (Lists) การแสดงข้อมูลแบบรายการจะมีการแสดงผล 3 แบบ คือ 1. รายการแบบมีลำดับ (Ordered list) 2. รายการแบบไม่มีลำดับ (Unordered list) 3. รายการแบบจำกัดความ (Definition List) Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  32. คำสั่งการแสดงรายการแบบมีลำดับ (Ordered list) • ใช้ Tag <OL> • มีตัวเลขกำกับในแต่ละรายการ • หมายเลขจะถูกกำหนดให้กับสมาชิกที่อยู่ในรายการโดยอัตโนมัติ <OL> <LI> ข้อมูลใน List <LI> ข้อมูลใน List ... </OL> รูปแบบ

  33. คำสั่งการแสดงรายการแบบมีลำดับ (ต่อ) • สามารถกำหนดตัวเลขหรือตัวอักษรเป็นตัวแสดงลำดับได้โดยใช้ Attribute “Type” <OLType= “n”>

  34. ตัวอย่างรายการแบบมีลำดับตัวอย่างรายการแบบมีลำดับ <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

  35. คำสั่งการแสดงรายการแบบไม่มีลำดับ (Unordered list) • ใช้ Tag <UL> • ไม่มีตัวเลขกำกับในแต่ละรายการ <UL> <LI> ข้อมูลใน List <LI> ข้อมูลใน List ... </UL> รูปแบบ Agendaระบบเครือข่าย Internet การสืบค้นข้อมูล Social Network ภาษา HTML

  36. การใส่รูปภาพ ไฟล์รูปภาพที่แสดงบน Web จะเรียกว่า "Image" +ผลดีทำให้ Web Page ดูน่าสนใจและสวยมากขึ้น - ผลเสียทำให้การแสดงผลช้าลง ดังนั้นการเลือกรูปภาพ • ไม่ควรจะเลือกภาพที่มีขนาดใหญ่ • ใน Web Page ไม่ควรมีภาพมากเกินไป โดยทั่วไปจะใช้มาตรฐาน 2 ชนิด คือ gif และ jpeg (jpg) รูปแบบ <IMG SRC=“ชื่อไฟล์รูปภาพ”>

  37. ตัวอย่างการใส่รูปภาพ • เก็บไฟล์รูปภาพใน 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”

More Related