Course Content
พื้นฐานHTML
HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Languageโดย Hypertext หมายถึงข้อความที่เชื่อมต่อกันผ่านลิงค์(Hyperlink) Markup languageหมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเองปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
0/4
HTML เบื้องต้น
ภาษา HTML HTML ย่อมาจาก Hyper Text Markup Language เป็นโปรแกรมภาษาประเภทหนึ่งสำหรับแสดงข้อความต่าง ๆ ในรูปแบบข้อความ รูปภาพ หรือภาพเคลื่อนไหว ฯลฯ และสามารถเชื่อมโยงข้อมูลไปยังเอกสารอื่นได้ที่มีความสามารถสูงเหนือกว่าเอกสารทั่วไปเพราะสามารถเปิดดูข้อมูลภายในได้ ทำได้โดยการใส่คำสั่งลงไปในเอกสาร ซึ่งเรียกว่า แท็ก (TAG) และการนำเอกสารมาแสดงบนหน้าจอภาพในระบบอินเทอร์เน็ตได้ เรียกดูผลได้บนโปรแกรมเบราเซอร์ได้เลย โครงสร้างของภาษา HTML โครงสร้างของไฟล์ภาษา HTML มี 2 ส่วน คือ 1) ส่วนที่เป็นข้อมูลที่ต้องการแสดง เช่น ข้อความ ภาพ เสียง ภาพเคลื่อนไหว เป็นต้น 2) ส่วนที่เป็นคำสั่งแท็ก (TAG) เพื่อใช้กำหนดลักษณะของข้อมูล โดยกำหนดเป็นแท็กเปิดและแท็กปิด เช่น การวางตำแหน่งของข้อมูล ขนาดของขอความ การกำหนดสีข้อความ ส่วนหัว (HEAD) ประกอบด้วยการกำหนดชื่อของเว็บเพจที่เรียกว่า Title บอกให้ทราบว่าเอกสารนั้นเกี่ยวกับอะไร โดยคำสั่ง เป็นการเริ่มต้นชื่อเรื่องเอกสาร ภายในคำสั่งประกอบด้วยคำสั่ง <TITLE> อีกที่เพื่อแสดงชื่อของเอกสารนั้น ส่วนเนื้อหาของเอกสาร (BODY) ประกอบด้วยส่วนที่เป็นเนื้อหาของเว็บเพจ เช่น ข้อความ ตาราง รูปภาพ พื้นหลังสีตัวอักษร และแบบฟอร์มต่าง ๆ โดยใช้คำสั่ง
0/9
วิชาคอมพิวเตอร์เพื่ออาชีพ 3-4 (ม.5/2 สหศิลป์) ภาคเรียนที่ 2 ปีการศึกษา 2564
About Lesson

โครงสร้างของไฟล์ภาษา HTML มี 2 ส่วน คือ

1) ส่วนที่เป็นข้อมูลที่ต้องการแสดง เช่น ข้อความ ภาพ เสียง ภาพเคลื่อนไหว เป็นต้น

2) ส่วนที่เป็นคำสั่งแท็ก (TAG) เพื่อใช้กำหนดลักษณะของข้อมูล โดยกำหนดเป็นแท็กเปิดและแท็กปิด เช่น การวางตำแหน่งของข้อมูลขนาดของข้อความ การกำหนดสีข้อความ เป็นต้น

ภาษา HTML มีโครงสร้างเหมือนการเขียนโปรแกรมอื่น เช่น โปรแกรมภาษา Pascal จะมีการกำหนดส่วนเรื่มต้นเป็น Begin และสิ้นสุดเป็น End สำหรับภาษา HTML จะมีโครงสร้าง 2 ส่วนคือ ส่วนหัว (HEAD) และส่วนเนื้อหาของเอกสาร (BODY) ดังนี้

รูปที่ 2.16 แสดงโครงสร้างของภาษา HTML

คำสั่ง   <HTML>        เป็นคำสั่งกำหนดจุดเริ่มต้นของไฟล์ HTML

            <HEAD>      เป็นคำสั่งกำหนดจุดเริ่มต้นส่วนหัวของไฟล์

            <TITLE>      เป็นคำสั่งกำหนดจุดเริ่มต้นของชื่อเรื่อง

</TITLE>     เป็นคำสั่งกำหนดจุดสิ้นสุดของชื่อเรื่อง

</HEAD>     เป็นคำสั่งกำหนดจุดสิ้นสุดส่วนหัวของไฟล์

            <BODY>      เป็นคำสั่งกำหนดจุดเริ่มต้นของส่วนเนื้อหาไฟล์

            </BODY>     เป็นคำสั่งกำหนดจุดสิ้นสุดของส่วนเนื้อหาตัวไฟล์

            </HTML>      เป็นคำสั่งกำหนดจุดสิ้นสุดของไฟล์ HTML

การกำหนดคำสั่งแท็กโดยใช้เครื่องหมายน้อยกว่า  <  และเครื่องหมายมากกว่า  >  ภายในเครื่องหมายเมื่อพิมพ์คำสั่งลงไปหลังเครื่องหมาย  <  ต้องไม่มีช่องว่าง และก่อนเครื่องหมาย  >  ไม่มีช่องว่าง เช่น <BODY>  <HTML>  เป็นต้น

แต่หากใช้คำสั่งร่วมกันหลายคำสั่งภายในเครื่องหมาย ต้องมีช่องว่างเพื่อทำการแบ่งคำสั่งได้ถูกต้อง เช่น <P ALIGN = CENTER> หรือ <BODY BGCOLOR = BLUE> เป็นต้น

ภายในคำสังแท็กจะใช้ตัวพิมพ์ใหญ่หรือพิมพ์เล็กก็ได้ ส่วนมากจะนิยมใช้เป็นตัวพิมพ์เล็กและกำหนดรูปแบบต่าง ๆ จะอยู่ในเครื่องหมาย “ ” หรือไม่ก็ได้ เช่น <P ALIGN = “CENTER”> หรือ <P ALIGN = CENTER> ก็ได้

            การหมายเหตุของคำสั่งหรือต้องการไม่ให้คำสั่งนั้นทำงาน โดยการพิมพ์เครื่องหมายอัศเจรีย์ (!) ลงในคำสั่งแท็ก เช่น <!  การใช้คำสั่งแท็ก>

1) ส่วนหัว (HEAD)

ประกอบด้วยการกำหนดชื่อของเว็บเพจที่เรียกว่า  Title บอกให้ทราบว่าเอกสารนั้นเกี่ยวกับอะไร โดยคำสั่ง <HEAD> เป็นการเริ่มต้นชื่อเรื่องเอกสาร ภายในคำสั่งประกอบด้วยคำสั่ง <TITLE> อีกทีเพื่อแสดงชื่อของเอกสารนั้น

รูปแบบ

            <HEAD>         ชื่อเรื่อง

                                    <TITLE>        ชื่อ Title                       </TITLE>

            </HEAD> 

              ตัวอย่างที่ 1 การกำหนดส่วนหัวของเว็บเพจ

                        

                            รูปที่ 2.17 แสดงการใช้คำสั่ง <HEAD> และ <TITLE>

กาจรูปที่ 2.17 คำสั่งที่กำหนด Title ให้จะแสดงผลบนโปรแกรม Internet Explorer ที่ Title bar ดังรูปที่ 2.18

                        

                           รูปที่ 2.18 แสดงผลของการใช้คำสั่ง <HEAD> และ <TITLE>         

2) ส่วนเนื้อหาของเอกสาร (BODY)

ประกอบด้วยส่วนที่เป็นเนื้อหาของเว็บเพจ เข่น ข้อความ ตาราง รูปภาพ พื้นหลัง สีตัวอักษร และแบบฟอร์มต่าง ๆ โดยใช้คำสั่ง <BODY> ดังรูปที่ 2.19

                     ตัวอย่างที่ 2 การกำหนดส่วนของ <BODY>

                    

                       รูปที่ 2.19 แสดงการใช้คำสั่ง <BODY>

จากรูปที่ 2.19 การกำหนดข้อความในคำสั่ง <BODY> จะแสดงผลบนบราเซอร์

ดังรูปที่ 2.20

                   
 

                     รูปที่ 2.20 แสดงผลที่ได้จากการใ้ชคำสั่ง <BODY>