HTML
NARISSARA THONG.
HTML(Hypertext Markup Language) คืออะไร
 HTML คือภาษาที่ใช้สร้างเอกสารข้อมูล
ในลักษณะมัลติมีเดีย เพื่อแสดงบนระบบ
เครือข่ายอินเตอร์เน็ต
HTML(Hypertext Markup Language) คืออะไร
HTML Editor เช่น Edit plus ,Dreamweaver ,Cute
HTML เป็นต้น
Text Editor เขียนได้เช่น Node Pad , Word Pad ฯลฯ
แต่จะต้องบันทึกให้อยู่ในรูปแบบนามสกุล .html เสมอ
Web Browser หรือ Browser เช่น Internet
Explorer , google Chrome ,Mozilla firefox เป็นต้น
ข้อกาหนดของภาษา HTML
 คาสั่ง เรียกว่า Tag อยู่ในเครื่องหมาย < >
 Tag จะใช้ตัวอักษรพิมพ์ใหญ่ เล็ก มีความหมายเดียวกัน
เช่น <IMG SRC> หรือ <img src> เป็นต้น
 Tag เกือบทุก Tag จะมีทั้ง Tag เปิด และ ปิด โดยTag ปิดจะมี
เครื่องหมาย / เสมอ
เช่น Tag เริ่มต้น ของ HTML คือ <HTML> และสิ้นสุดการ
เขียนภาษาHTML ด้วย</HTML>
จาแนกโครงสร้างของคาสั่งออกเป็น 3 ส่วน
 Tags คือ คำสั่งในภำษำ HTML โดยจะมีประสิทธิภำพสูงสุด เมื่อ
กำหนดส่วนขยำยให้กับ tags
 Attributes เป็นส่วนประกอบหนึ่งของส่วนขยำย ทำหน้ำที่กำหนด
ทิศทำงของ tags
 Values เป็นส่วนประกอบสุดท้ำยของส่วนขยำย ทำหน้ำที่กำหนด
ขนำด หรือ ลักษณะ ให้กับ attributes
จาแนกโครงสร้างของคาสั่งออกเป็น 3 ส่วน
<Font Face=“Ms Sans Serif” Color=“Blue”>
Tag=Font
Attributes = Face , Color
Value= “Ms Sans Serif”, “ Blue”
โครงสร้างพื้นฐาน HTML
โครงสร้างพื้นฐาน HTML
Title(ชื่อหัวเรื่อง)
จะถูกกำหนด อยู่ภำยใน Tag คำสั่ง
<HEAD>..</HEAD>
<HEAD> <TITLE> ชื่อหัวเรื่อง </TITLE>
</HEAD>
 ข้อมูลที่ถูก เขียนอยู่ภำยใน Tag จะแสดงผล
ออกมำให้เห็น ที่บนบำร์ของ Web Browser
ข้อมูลที่ต้องการแสดงผล
จะอยู่ ระหว่าง tag BODY ทั้งหมด
คาสั่งComment Tag
เป็นคำสั่งที่ใช้ ในกำรอธิบำย อยู่ภำยใน
HTML จะไม่มีกำรแสดงผล ออกมำที่ Browser
จะมีประโยชน์สำหรับ ผู้ที่จะทำกำรแก้ไข
โปรแกรม ในภำยหลัง
<!--ใส่ข้อความใดๆก็ได้ เพื่อใช้ในการ
อธิบาย-->
คาสั่งขึ้นบรรทัดใหม่ <BR>
เป็นคาสั่ง ที่ใช้กาหนดให้ ข้อความที่
เราพิมพ์ ลงไปในเอกสาร ขึ้นบรรทัด
ใหม่ ได้ตามที่เราต้องการ เพราะ ถ้า
เราไม่ใช้ คาสั่งสั่งให้เอกสาร
คาสั่งการย่อหน้าใหม่รูปแบบคาสั่ง
<P>........... </P> หรือ <P>
มีลักษณะคล้ำยกับคำสั่ง < BR > แต่คำสั่ง
นี้จะมีกำรเว้น บรรทัดว่ำง ให้หนึ่งบรรทัด
เพรำะบำงครั้ง เรำต้องกำร เว้นบรรทัดว่ำง
หนึ่งบรรทัด แต่โปรแกรม Web Browser จะ
ไม่เข้ำใจกำรพิมพ์บรรทัดเปล่ำ
การกาหนดสีของพื้นฉากหลัง
เป็นคำสั่งที่ใช้กำหนดสีของ Background
จอภำพให้มีสีต่ำงๆตำมต้องกำรโดยกำรกำหนด
เลขฐำน16
รูปแบบคาสั่ง <BODY BGCOLOR="#เลขฐาน
16 จานวน 6 ตัว">......</BODY>
การกาหนดสีของพื้นฉากหลัง
เป็นคำสั่งที่ใช้กำหนดสีของ Background จอภำพให้มีสี
ต่ำงๆตำมต้องกำรโดยกำรกำหนดเลขฐำน16
รูปแบบคาสั่ง <BODY BGCOLOR="#เลขฐาน16
จานวน 6 ตัว">......</BODY>
ตัวอย่าง
 <HTML> <HEAD> <TITLE>กำรกำหนดสีของพื้นฉำกหลัง</TITLE> </HEAD> <BODY
BGCOLOR="#0000FF" TEXT="#FFFFFF"> กำหนดBACKGROUNDเป็นสีน้ำเงิน </BODY> </HTML>
รูปแบบตัวอักษร (Font) / สี (Color)
 การกาหนดหัวเรื่อง
 คาสั่ง <FONT SIZE>
 การกาหนดสีของตัวอักษร
 การกาหนดสีของตัวอักษรเฉพาะส่วน
 การกาหนดชนิดของตัวอักษร FONT FACE
 การกาหนดรูปแบบตัวอักษร
 การจัดวางตาแหน่งข้อความโดยใช้ ALIGN
 คาสั่งรายการ [ Lists ]
การกาหนดหัวเรื่อง
<Hx> จะมีขนำดของ ตัวอักษร อยู่ 6 ขนำด คือ ขนำดใหญ่
สุด คือ
<H1> ( ใช้มำก ) และเล็กที่สุดคือ <H6> (ใช้น้อย )
รูปแบบคาสั่ง <Hx>........<Hx>
โดยที่ x คือค่ำตัวเลขตั่งแต่ 1 ถึง 6
การกาหนดหัวเรื่อง
<HTML> <HEAD>
<TITLE> กำรกำหนดหัวเรื่อง</TITLE> </HEAD>
<BODY>
<H1> กำรกำหนดหัวเรื่องH1 </H1>
<H2> กำรกำหนดหัวเรื่องH2</H2 >
<H3> กำรกำหนดหัวเรื่องH3</H3>
<H4> กำรกำหนดหัวเรื่องH4</H4>
<H5> กำรกำหนดหัวเรื่องH5</H5>
<H6> กำรกำหนดหัวเรื่องH6</H6>
<BR>นี่คือ ตัวอักษรปกติ
</BODY> </HTML>

Html 2