ใบงานที่6 HTML

HTML 

◕Hypertext Markup Language◕

✮HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเอง

❀ ประวัติความเป็นมาของภาษา HTML ❀

ความที่ภาษา HTML เป็นภาษาที่ได้รับการพัฒนา อย่างต่อเนื่อง จนปัจจุบันมายเป็นภาษาที่มีความสามารถในการจัดรูปแบบเอกสารอย่างเต็มรูปแบบ สิ่งกระตุ้น แรกที่ก่อให้เกิดการพัฒนาดังกล่าว เกิดขึ้นในปี 1993 เมื่อโปรแกรม Web browser มีความสามารถจะดูเอกสารแบบ Hypertext พร้อมกับมีรูปภาพประกอบได้พร้อมๆ กัน และในระยะหลังจากนั้นอีก 5 ปี ภาษา HTML ก็ได้พัฒนาตนเองมาเรื่อยๆ จนเป็นเวอร์ชัน ปัจจุบัน — เวอร์ชัน 4.0
สิ่งที่ทำให้ HTML เวอร์ชันปัจจุบัน มีความสามารถในการจัดรูปแบบเอกสารอย่างเต็มรูปแบบ คือ ความสามารถในการใช้ Cascading Style Sheet เพิ่มเติมจากเวอร์ชันก่อนหน้านี้ (เวอร์ชัน 3.2) ซึ่งมีความสามารถจัดรูปแบบเอกสารอยู่ในขั้นมาตรฐานปีค.ศ. 1961 อินเตอร์เน็ตได้เกิดและเติบโตขึ้น พร้อมกับภาษาคอมพิวเตอร์และโปรโตคอล (Protocol) จำนวนมาก เพื่อรองรับกับ การเติบโตอย่างรวดเร็วของอินเตอร์เน็ต หนึ่งในภาษาคอมพิวเตอร์และโปรโตคอลนั้นคือ ภาษา HTML และ TCP/IP (Transmission Control Protocol/ Internet Protocol) ทั้งนี้เพราะ World Wide Web แม้จะเป็นเพียงส่วนหนึ่งของอินเตอร์เน็ต แต่ได้รับความนิยม อย่างสูง และรวดเร็ว โปรโตคอล HTTP (ซึ่งเป็นส่วนย่อยของโปรโตคอล TCP/IP) จึงได้รับการพัฒนาเพื่อสนับสนุนภาษา HTML ซึ่ง ใช้ในการจัดเก็บเอกสารบน World Wide Web
ภาษา HTML ในยุคแรกเริ่ม ถูกใช้เพื่อจัดทำรูปแบบตัวอักษรบนเอกสารประเภท Hypertext ความสามารถจึงยังคงจำกัดอยู่มาก เพียงทำได้แต่ การกำหนดรูปแบบ heading แต่สำหรับตัวอักษรทำได้แค่ bold และ italic เท่านั้นาถึง เวอร์ชัน 4.0 จึงได้เพิ่มขีดความสามารถจากเดิม ที่มีความสามารถเพียงเพื่อจัดรูปแบบตัวอักษร กล

ในอดีต สิ่งที่ทำให้ผู้เขียนภาษา HTML ประสบกับปัญหามากมาย คือ การที่โปรแกรม browser หลักๆ ยังคงมีความแตกต่างทาง ด้านเทคโนโลยีกันอย่างมาก และต่างก็ได้พัฒนาภาษา HTML ของตนเพิ่มเติมจากมาตรฐานในเวอร์ชัน 3.2 กันเอง โดยไม่ได้มีการตกลง ระหว่างกัน เป็นผลให้ผู้เขียนภาษา HTML โดยถือตามมาตรฐาน หรืออ้างอิงค่ายใดค่ายหนึ่งไม่สามารถจะแสดงรูปแบบของเอกสาร ให้เป็นอย่างที่ต้องการได้ ในปัจจุบัน ปัญหาดังกล่าวกลับไม่ลดน้อยลงไป แม้ว่าจะได้มีการจัดตั้งคณะกรรมการ เพื่อกำหนดมาตรฐาน ให้โปรแกรม browser ในเวอร์ชันใหม่ๆ นำเอา HTML เวอร์ชัน 4.0 เป็นมาตรฐานก็ตาม แต่ปัญหายังคงมีอยู่ ต่อไป ด้วยเหตุที่คณะกรรมการชุดดังกล่าวไม่สามารถผลักดันให้โปรแกรม browser รับเอามาตรฐานดังกล่าวไปใช้อย่างรวดเร็ว เพียงพอ

🌞คำสั่ง หรือ Tag🌞

Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ

Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น

Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่

<tag> เราเรียกว่า tag เปิด

</tag> เราเรียกว่า tag ปิด

🌞Attributes🌞
Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย


🌞not case sensitive🌞
หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน

♛โครงสร้างของหลักของ HTML♛

โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ

1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง

◆ คำสั่งในหัวข้อของ head (Head Section)
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ

✽TITLE
ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser

✽META
Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการจัดอันดับบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine เช่น google , yahoo)

charset=TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้ charset=TIS-620 หรืออาจเป็น charset=windows-874 ก็ได้ ตอนนี้แนะนำให้ใช้เป็น charset=utf-8

✽KEYWORD
ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คำได้โดยใช้เครื่องหมาย (,) ในการคั่นระหว่างคำ

การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง

Source Code
<html>
    <head>
        คำสั่งในหัวข้อของ head 
    </head>
    <body>
        คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล 
    </body>
</html>

2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web brower โดยตรง

⬧คำสั่งในส่วนของ (Body Section)
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ

ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้

◐กลุ่มคำสั่งเกี่ยวกับการจัดรูปแบบเอกสาร

◐กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร

◐กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)

◐กลุ่มคำสั่งเกี่ยวกับการทำลิงค์

◐กลุ่มคำสั่งจัดการรูปภาพ

◐กลุ่มคำสั่งจัดการตาราง (Table)

◐กลุ่มคำสั่งควบคุมเฟรม

◐กลุ่มคำสั่งอื่นๆ

Source Code
<HEAD>
      <TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE>
      <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      <META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ">
      <META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2 ">
</HEAD>