Html wordpress
- 1. ภาษา HTML (HyperText Markup Language) - ความหมาย - โครงสร้างของภาษา - คาสั่งต่างๆ - การเขียน Webpage ด้วยภาษา HTML โดยครูกิตติ์ชญาห์ เมธาวรารักษ์1
- 2. Bangkok University 2 HTML คืออะไร ? • HTML = HyperText Markup Language • คือภาษาที่ใช้ในการกาหนดการแสดงผลข้อมูลภายใน หน้าเว็บเพจ เพื่อแสดงผลบน Browser • ลักษณะของไฟล์ HTML จะเป็น Text File • HTML สามารถจัดการกับข้อความ, ภาพ, ตาราง และการสร้าง การเชื่อมโยงเอกสารได้ • ลักษณะคาสั่งของภาษา HTML เรียกว่า “TAG” ซึ่งเป็นส่วน ของการกาหนดรูปแบบในการแสดงผลบน Browser
- 3. Bangkok University 3 จะเขียน HTML ได้อย่างไร ? • เขียนคำสั่ง (TAG) ในลักษณะ Text file โดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus, UltraEdit เป็นต้น • บันทึก (Save) ไฟล์ให้มีประเภทของไฟล์ เป็น .htm หรือ .html • เปิดไฟล์ HTML เพื่อดูผลลัพธ์ โดยใช้โปรแกรม Browser เช่น Internet Explorer, Netscape เป็นต้น ไฟล์ .html Internet Explorer Netscape เขียนด้วย Text Editor
- 4. Bangkok University 4 HTML Tag • HTML Tag ประกอบด้วยเครื่องหมำย < (Left angle bracket) ตำมด้วยชื่อ Tag และ > (Right angle bracket ) เช่น – head tag : <HEAD> – title tag : <TITLE> – body tag : <BODY> • ชื่อ tag ที่เขียนอยู่ในเครื่องหมำย <> นี้จะเขียนเป็นตัว ใหญ่หรือตัวเล็กก็ได้แต่นิยมเขียนตัวใหญ่เพื่อให้เห็นควำม แตกต่ำง
- 5. Bangkok University 5 ชนิดของ HTML Tag มี 2 ชนิด • tag คู่(Paired tag) • tag เดี่ยว (Single tag)
- 6. Bangkok University 6 Tag คู่ (Paired Tag) • tag คู่(Paired tag) ใส่ tag เปิดไว้หน้ำข้อควำม และ ใส่ tag ปิด(ลักษณะเหมือน tag เปิดแต่มี เครื่องหมำย / นำหน้ำ) ไว้หลังข้อควำม <Tag name> ข้อควำม</Tag name> เช่น <HTML> ………</HTML> <HEAD> ………</HEAD> <BODY> ……….</BODY>
- 7. Bangkok University 7 Tag เดี่ยว (Single Tag) • tag เดี่ยว (Single tag) เป็น tag ที่มีเฉพำะ Tag เปิด เท่ำนั้น ไม่มี tag ปิด <Tag name> เช่น <BR> ใช้สำหรับขึ้นบรรทัดใหม่ <HR> ใช้ตีเส้นตำมแนวนอน <IMG> ใช้แทรกรูปภำพ
- 9. Bangkok University 9 การใช้งาน <BODY> Tag • ในการใช้งาน <BODY> Tag นั้นสามารถกาหนดค่าต่างๆ ได้ดังนี้ – การกาหนดสีพื้นหลังของเว็บเพจ <BODY BGCOLOR=“#รหัสสี หรือชื่อสี”> Ex. <BODY BGCOLOR=“#FF0000”> พื้นหลังสีแดง Ex. <BODY BGCOLOR=“RED”> พื้นหลังสีแดง – การกาหนดภาพพื้นหลังของเว็บเพจ <BODY BACKGROUND=“ไฟล์รูปภาพ”> Ex. <BODY BACKGROUND=“cat.jpg”> พื้นหลังรูป cat.jpg
- 10. Bangkok University 10 แปลภำษำลงในสมุด 1. RED = 2. GREEN = 3. BLUE = 4. BLACK = 5. BROWN = 6. PINK = 7. YELLOW = 8. ORANGE = 9. GRAY = 10. GOLD = 11. WHITE = 12. PURPLE = 13. VIOLET = 14. SILVER = 15. DARK = มืด 16. LIGHT = สว่าง
- 11. Bangkok University 11 Tag ที่ใช้ในการจัดการตัวอักษร • <FONT> ข้อความ </FONT> – การกาหนดรูปแบบของตัวอักษร <FONT FACE=“ชื่อรูปแบบตัวอักษร”> ข้อความ </FONT> Ex. <FONT FACE=“AngsanaUPC”> ข้อความ </FONT> – การกาหนดขนาดของตัวอักษร <FONT SIZE=“ขนาดเป็นตัวเลข -7 ถึง +7”> ข้อความ </FONT> Ex. <FONT SIZE=“3”> ข้อความ </FONT> – การกาหนดสีของตัวอักษร <FONT COLOR=“#รหัสสี หรือชื่อสี”> ข้อความ </FONT> Ex. <FONT COLOR=“BLUE”> ข้อความ </FONT>
- 12. Bangkok University 12 Tag ที่ใช้ในการจัดการตัวอักษร • การกาหนดรูปแบบข้อความ – <B> ข้อความ </B> ทาข้อความเป็นตัวหนา – <I> ข้อความ </I> ทาข้อความเป็นตัวเอียง – <U> ข้อความ </U> ขีดเส้นใต้ข้อความ – <SUB> ข้อความ </SUB> ทาข้อความเป็นตัวห้อย – <SUP> ข้อความ </SUP> ทาข้อความเป็นตัวยก – <STRIKE> ข้อความ </ STRIKE >ขีดฆ่าข้อความ – การขึ้นบรรทัดใหม่ ข้อความบรรทัดที่ 1 <BR> ข้อความบรรทัดที่ 2 Ex. <B><I> สวัสดี </B></I> == สวัสดี
- 13. Bangkok University 13 Tag ที่ใช้ในการจัด Paragraph • ย่อหน้าใหม่โดยเว้น 1 บรรทัด <P> ข้อความ </P> • การกาหนดการวางตาแหน่งข้อความ <P ALIGN=Left / Center / Right> ข้อความ </P> Ex. <P ALIGN=Right> ข้อความ </P> • การขึ้นบรรทัดใหม่ ข้อความบรรทัดที่ 1 <BR> ข้อความบรรทัดที่ 2 • การเว้นช่องไฟ ข้อความ ข้อความ เส้นคั่น <HR>
- 15. Bangkok University 15 Tag ที่ใช้ในการกาหนดขนาดหัวเรื่อง • <Hx> … </Hx> การกาหนดขนาดของหัวเรื่อง โดย กาหนดตามค่าของ x ตั้งแต่ 1 (ใหญ่ที่สุด) ถึง 6 (เล็ก ที่สุด) Ex. <H3>หัวข้อ</H3> <H6>หัวข้อ</H6>
- 16. Bangkok University 16 Tag ที่ใช้ในการแสดงผลแบบรายการ • เครื่องหมายหน้ารายการแบบไม่เรียงลาดับ (Unnumbered List) <UL TYPE=n> <LI> ข้อมูล 1 </LI> <LI> ข้อมูล 1 </LI> ……….. </UL> n = สัญลักษณ์กากับรายการ n = circle (วงกลมโปร่ง) n = disc (วงกลมทึบ) n = square (สี่เหลี่ยม) หรือ <UL> <LI TYPE=n> ข้อมูล 1 <LI> <LI TYPE=n> ข้อมูล 1 <LI> ……….. </UL>
- 17. Bangkok University 17 กำรเชื่อมโยงเอกสำร(Link) กาหนดให้เชื่อมโยงในเอกสารเดียวกันหรือ หรือต่าง เอกสาร หรือ ต่างที่อยู่ ได้ • การเชื่อมโยงเอกสารใน HTML แบ่งได้ 2 ประเภท คือ • การเชื่อมโยงกับข้อความ (Text Link) • การเชื่อมโยงกับรูปภาพ (Graphic Link)
- 18. Bangkok University 18 กำรเชื่อมโยงกับข้อควำม(Text Link) • ใช้ เขียน tag Anchor และ แอตทริบิวต์ HREF (Hypetext REFerence) • รูปแบบ <A HREF =“ เป้าหมาย”> ข้อความ </A> • หากต้องการให้ข้อความที่เชื่อมโยงไม่มีการขีดเส้นใต้ ให้ใช้ attribute style ร่วมกับ tag Anchor ดังนี้ <A HREF =“เป้ำหมำย” style=“text-decoration:none”> ข้อควำม </A>
- 19. Bangkok University 19 กำรเชื่อมโยงข้อมูลภำยในแฟ้มเอกสำรเดียวกัน มีขั้นตอนดังนี้ 1. การสร้างเป้าหมายเพื่อใช้เป็นจุดเชื่อมโยง ด้วยคาสั่งดังนี้ <A NAME=“ชื่อเป้าหมาย”> โดย tag <A> ไม่ต้องมี tag ปิด</A> 2. เชื่อมโยงด้วย tag Anchor โดยใช้เครื่องหมาย # นาหน้าชื่อ เป้าหมาย <A HREF =“#เป้าหมาย”> ข้อความ </A>
- 20. Bangkok University 20 กำรเชื่อมโยงข้อมูลต่ำงแฟ้มเอกสำร ข้อความที่จะเชื่อมโยงอยู่ต่างแฟ้มแต่อยู่ในโฟลเดอร์เดียวกัน <A HREF =“ชื่อแฟ้ม.html“ > ข้อความ </A> ตัวอย่าง <A HREF = “INDEX.HTML> หน้าแรก</A>
- 21. Bangkok University 21 กำรใช้ภำพเป็นจุดเชื่อมโยง ให้เพิ่มคำสั่ง <IMG SRC= “รูปภำพ”> เข้ำไปใน tag Anchor รูปแบบ <A HREF= “URL” > <IMG SRC = “ขื่อแฟ้มรูปภำพ”> </A>
- 22. Bangkok University 22 กำรใช้ mailto เป็นคำสั่งที่ใช้สำหรับกำรสื่อสำรข้อมูลแบบจดหมำย อีเล็กทรอนิกส์ รูปแบบ <A HREF=“mailto:username@hostname”> ตัวอย่ำง Address your comment or suggestions at <A HREF=“mailto:jaewjing@hotmail.com”> jaewjing@hotmail.com </A>
- 23. Bangkok University 23 กำรสร้ำงตำรำง <TABLE> • Table ประกอบด้วยแถว (row) และคอลัมน์ (col) จุดตัดของเรียกว่ำ cell ซึ่งใช้บรรจุข้อมูล • คำสั่งที่ใช้สร้ำงตำรำง • <TABLE>...</TABLE> สำหรับใช้เริ่มต้นกำรสร้ำง และจบกำร สร้ำงตำรำง โดยจะไม่มี เส้นแบ่ง cell • <TABLE BORDER=n>… </TABLE> สำหรับใช้เริ่มต้นกำรสร้ำง และจบกำรสร้ำงตำรำง โดยจะมี เส้นแบ่ง Cell แสดงให้เห็น • <TR>...</TR> ใช้กำหนดแถวของตำรำง (Table Row)
- 24. Bangkok University 24 tag <TABLE> <TABLE> <TR> <TD>ข้อควำม </TD> <TD>ข้อควำม </TD> <TD>ข้อควำม </TD> </TR> <TR> <TD>ข้อควำม </TD> <TD>ข้อควำม </TD> <TD>ข้อควำม </TD> </TR> …….. </TABLE>
- 25. Bangkok University 25 กำรตีกรอบตำรำง • คำสั่ง <TABLE>...</TABLE> เป็นกำรสร้ำงตำรำงที่ไม่มีเส้น • กำรกำหนดเส้นในตำรำงใช้ แอตทริบิวต์ BORDER กำหนด ลงในคำสั่ง <TABLE> ดังนี้ <TABLE BORDER= ควำมหนำ> ……. </TABLE>
- 26. Bangkok University 26 ตัวอย่ำง <HTML> <HEAD><TITLE> Table Demo </TITLE></HEAD> <BODY> <H1> ตำรำง 2 x 2 พร้อมเส้นกรอบ </H1> <TABLE BORDER> <TR> <TD>กรรณิกำร์</TD> <TD>ธวัชชัย</TD></TR> <TR> <TD>วิชัย</TD> <TD>ถมกนก</TD> </TR> </TABLE> </BODY> </HTML>
- 27. Bangkok University 27 กำรเข้ำบันทึกงำน 1. ครั้งแรก 1) File 2) SaveAs 3) ไปที่โฟลเดอร์ที่จะบันทึก(Desktop) 4) ตั้งชื่อชิ้นงำน 5) เลือกประเภท AllFile 6) UTF-8 กำรบันทึกครั้งต่อไป 1. File 2. Save 3. หรือ CTRl + S
- 28. Bangkok University 28 โครงสร้ำงตำรำง <TABLE> <TR> <TH>หัวข้อ1</TH> <TH>หัวข้อ2 </TH> </TR> <TR> <TD>รายละเอียด1 </TD> <TD>รายละเอียด2</TD> </TR> </TABLE> 28 หัวข้อ1 หัวข้อ2 รายละเอียด1 รายละเอียด2 1 2 3 4 5 6 7 8 9 10 11 12 13 14
- 29. Bangkok University 29ส่วนขยำย ตำรำง ALIGN กาหนด ตาแหน่งตาราง โดย LEFT=กาหนดตารางให้อยู่ทางซ้าย RIGHT=กาหนดตารางให้อยู่ทางขวา BACKGROUND ใส่ภาพกราฟิก เป็นพื้นหลังตาราง urlเป็น ตาแหน่ง ภาพ BGCOLOR กาหนดสีให้ตาราง BORDER เส้นขอบ ตาราง nเป็นค่า ความหนาของ ขอบตาราง BORDERCOLOR กาหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER CELLPADDING กาหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง CELLSPACING กาหนดขนาดของเส้นตาราง WIDTH กาหนดความกว้างของตาราง เป็นตัวเลขและเป็น % HEIGHT กาหนดความสูงของตารางเป็นตัวเลขและเป็น %
- 30. Bangkok University 30 กำรทำตัวอักษรวิ่ง <MARQUEE>……………..</ MARQUEE > DIRECTION คือ ทิศทางการวิ่ง ซึ่งมี 4 อย่างตามแผนภาพที่ได้จดไปแล้ว <MARQUEE DIRECTION=LEFT>ข้อความวิ่งจากขวาไปซ้าย</ MARQUEE > <MARQUEE BGCOLOR=“สี” DIRECTION=“ทิศทาง” “WIDTH=“ความ กว้าง” HEIGHT=ความสูง> .... </ MARQUEE >