More Related Content Similar to Html wordpress Similar to Html wordpress (20) 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 ที่เขียนอยู่ในเครื่องหมำย <> นี้จะเขียนเป็นตัว
ใหญ่หรือตัวเล็กก็ได้แต่นิยมเขียนตัวใหญ่เพื่อให้เห็นควำม
แตกต่ำง
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>
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>
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>
23. Bangkok University
23
กำรสร้ำงตำรำง <TABLE>
• Table ประกอบด้วยแถว (row) และคอลัมน์ (col)
จุดตัดของเรียกว่ำ cell ซึ่งใช้บรรจุข้อมูล
• คำสั่งที่ใช้สร้ำงตำรำง
• <TABLE>...</TABLE> สำหรับใช้เริ่มต้นกำรสร้ำง และจบกำร
สร้ำงตำรำง โดยจะไม่มี เส้นแบ่ง cell
• <TABLE BORDER=n>… </TABLE> สำหรับใช้เริ่มต้นกำรสร้ำง
และจบกำรสร้ำงตำรำง โดยจะมี เส้นแบ่ง Cell แสดงให้เห็น
• <TR>...</TR> ใช้กำหนดแถวของตำรำง (Table Row)
29. Bangkok University
29ส่วนขยำย ตำรำง
ALIGN
กาหนด ตาแหน่งตาราง โดย
LEFT=กาหนดตารางให้อยู่ทางซ้าย
RIGHT=กาหนดตารางให้อยู่ทางขวา
BACKGROUND
ใส่ภาพกราฟิก เป็นพื้นหลังตาราง urlเป็น ตาแหน่ง ภาพ
BGCOLOR กาหนดสีให้ตาราง
BORDER
เส้นขอบ ตาราง nเป็นค่า ความหนาของ ขอบตาราง
BORDERCOLOR กาหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER
CELLPADDING กาหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง
CELLSPACING กาหนดขนาดของเส้นตาราง
WIDTH กาหนดความกว้างของตาราง เป็นตัวเลขและเป็น %
HEIGHT กาหนดความสูงของตารางเป็นตัวเลขและเป็น %
