ดาวโหลดเอกสาร [DOC]  [PDF]

      HTML คืออะไร
      HTML มาจากคำว่า Hyper Text Markup Language เป็นรูปแบบของภาษาที่ใช้ในการเขียนโปรแกรมในเว็บเพจเพื่อแสดงผลบนเว็บบราวเซอร์ เกิดขึ้นจากการพัฒนาระบบ World Wide Web ลักษณะของภาษา HTML จะเป็นเท็กซ์ไฟล์ธรรมดาที่ต้องอาศัยการแปลความจากเว็บบราวเซอร์ ในรูปแบบต่างๆเพื่อให้แสดงผลเป็น ข้อความ รูปภาพ เสียง ภาพเคลื่อนไหว มัลติมิเดีย เป็นต้น
      ในเดือนมีนาคม 1989 โดยนักวิจัยจากสถาบัน CERN (Conseil European Pour La Recherche Nucleaire) ซึ่งเป็นห้องทดลองในเมืองเจนีวา ประเทศสวิสเซอร์แลนด์ ชื่อ ทิม เบอร์เนอร์ - ลี (Tim Berners - Lee) ซึ่ง ทิม เบอร์เนอร์ - ลี ได้นำแนวความคิดในเรื่อง Hypertext ของ Vannevar Bush และ Ted Nelson มาใช้เพื่อกระจายข้อมูลในองค์กรต่อมามีการพัฒนาและกำหนดมาตรฐานโดยองค์กรที่ชื่อว่า W3C (World Wide Web Consortium)
      ภาษา HTML เป็นภาษาที่มีลักษณะของข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปของเอกสารข้อความ (Text Document) จึงกำหนดรูปแบบและโครงสร้างได้ง่าย ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Level 1 (รุ่นดั้งเดิม), HTML 2.0, HTML 3.0, HTML 3.2 และ HTML 4.0 HTML 4.01 ซึ่งเป็นรุ่นที่นิยมเขียนกันในปัจจุบัน (ขณะนี้ ได้พัฒนา HTML 5 ออกมาแล้ว) จึงทำให้ภาษา HTML ในปัจจุบันสามารถแสดงภาพทางกราฟิกระบบเสียงและมัลติมีเดียได้ เพื่อตอบสนองในการทำงานในปัจจุบัน
      เครื่องมือที่ใช้ในการเขียนภาษา HTML สามารถสร้างขึ้นได้จากโปรแกรมสร้างไฟล์ข้อความ (Text Editor) ได้แก่ Notepad (มาพร้อมกับ Windows) ,Text Editor (อยู่ใน Mac) ,Aloha Editor , Adobe Dreamweaver , MacFlux, Maqetta และ EditPlus เป็นต้น ไฟล์ที่ได้จากการสร้างเอกสาร HTML มีขนาดเล็กนามสกุลของไฟล์ HTML เป็นไฟล์นามสกุล .htm หรือ .html
      Tag คือคำสั่งของภาษา HTML ซึ่งโดยทั่วไปจะอยู่ในรูปแบบ <>…….. เว็บบราวเซอร์จะแปลงคำสั่งแล้วแสดงผลให้เห็น โดยปกติการพัฒนาเว็บไซต์ด้วยภาษา HTML โดยใช้ เอดีเตอร์ต่างๆ เช่น NotePad ของ Windows หรือโปรแกรม Editplus ซึ่งเป็นเรื่องที่ดีทำให้ผู้เขียนโปรแกรมเข้าใจโครงสร้างโดยรวมทั้งหมด โปรแกรมเมอร์จะต้องเข้าใจรูปแบบคำสั่งหรือแท็กของ HTML ทั้งหมด
      โครงสร้างภาษา html
      ตัวอย่างที่ 1 แสดงคำสั่งโครงสร้างตาราง
    <html>  
      <head> 
          <title> โรงเรียนชะอวดวิทยาคาร </title>  
      </head> 
      <body> 
       คำสั่งหรือข้อความที่ต้องการแสดงผลบนเว็บบราวเซอร์
      </body>
    </html>   

      แสดงผลตัวอย่างที่ 1
     
      1 คำสั่ง (tag) <html> ... </html>
      เป็นคำสั่ง แรกที่จะต้องมีในเอกสาร และจะครอบคลุมคำสั่ง (tag) ต่างๆ คือ เอกสาร html ทุกเอกสารจะต้องขึ้นต้นด้วย <html> และ ปิดท้ายด้วย </html> แต่ละ file และคำสั่งอื่นๆ จะถูกเขียนอยู่ในคำสั่ง (tag) นี้ โดยจะมีคำสั่งหลักๆ อยู่ 2 คำสั่ง ก็คือ คำสั่ง (tag) head และbody
      2 คำสั่ง (tag) <head> ... </head>
      เป็นส่วนหัวเรื่องของเอกสาร ภายในจำเป็นจะมี คำสั่ง <title>... </title> ซึ่งจะเป็นคำสั่ง ผู้เขียน html นั้นใช้ตั้งเป็นไตเติ้ลสำหรับบอกโดยรวมว่าเอกสารนั้นต้องการเสนออะไร แล้วเวลาที่จะ bookmark ชื่อที่จะ save คือชื่อที่อยู่ใน คำสั่ง title นี้ ชื่อไตเติ้ลนี้จะต้องมีความยาวไม่เกิน 64 ตัวอักษร
      3 คำสั่ง (tag) <body> ... </body>
      เป็นคำสั่ง (tag) ที่บรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบน browser ไม่ว่าจะเป็น ข้อความ รูป ตาราง หรือคำสั่ง (tag) ที่ใช้ในการกำหนดรูปแบบของเอกสาร
      4 คำสั่ง (tag) Comment (หมายเหตุ)
      การเขียนโปรแกรมต้องมีการเขียน comment เพื่อช่วยเป็นหมายเหตุ รูปแบบของคำสั่ง comment คือ <! เป็นคำสั่งเปิด และใช้ > เป็นคำสั่งปิดข้อความที่อยู่ระหว่าง <!...> จะไม่ถูกแสดงบน เว็บบราวเซอร์
      การบันทึกแฟ้มเอกสาร HTML
      ถ้าเป็นเอกสาร html ล้วนๆ แฟ้มที่บันทึก ต้องมีนามสกุล html หรือ html เท่านั้น ไม่สามารถ ใช้เป็นอย่างอื่นได้ แต่ถ้ามีการแทรกภาษาสคริปต์อื่น ๆ ก็สามารถ ใช้นามสกุลอื่นๆ ได้ เช่น php, asp, aspx, jsp เป็นต้น
      การปรับแต่งเอกสาร HTML
      ในการใส่รูปแบบนั้นจะใส่เพิ่มในส่วนของคำสั่งเปิด ของคำสั่ง เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของคำสั่ง นั้นเอง โดยจะมีรูปแบบ คือ
      แบบใส่สีให้พื้นหลัง bgcolor = "ชื่อสี" หรือ bgcolor = "#รหัสสี"
      แบบใส่ภาพให้พื้นหลัง background = "ชื่อภาพ"
      รูปแบบการใส่สีให้พื้นหลัง
      ตัวอย่างที่ 2 การใส่สีให้พื้นหลัง
      <html>
        <head><title> ....การใส่สีให้พื้นหลังเป็นสีแดง....</title></head>
        <body bgcolor = "red">
        </body>
      <html>
      แสดงผลตัวอย่างที่ 2
     
      รูปแบบการใส่ภาพให้พื้นหลัง
      ตัวอย่างที่ 3 การใส่ภาพพื้นหลัง
      <html>
        <head><title> ....การใส่ภาพให้พื้นหลัง....</title></head>
        <body background = "bg.jpg">
        </body>
      </html>
      แสดงผลตัวอย่างที่ 3