HTML คืออะไร?
HTML คือ ภาษาที่ใช้ในการเขียนเว็บเพจ ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ในการเขียนข้อความ ลงบนเอกสารที่ต่างก็เชื่อมถึงกันใน cyberspace ผ่านHyperlink นั่นเอง HTML เริ่มขึ้นเมื่อ ปี 1990 เพื่อตอบสนองความต้องการในการสื่อสารแลกเปลี่ยนข้อมูลกันของนักวิทยาศาสตร์ระหว่างสถาบันและมหาวิทยาลัยต่างๆทั่วโลก โดย Tim Berners-Lee นักพัฒนาของ CERN ได้พัฒนาภาษาที่มีรากฐานมาจาก SGML ซึ่งเป็นภาษาที่ซับซ้อนและยากต่อการเรียนรู้ จนมาเป็นภาษาที่ใช้ได้ง่ายและสะดวกในการแลกเปลี่ยนเอกสารทางวิทยาศาสตร์ผ่านการเชื่อมโยงกันด้วยลิ้งในหน้าเอกสาร เมื่อ World Wide Web เป็นที่แแพร่หลาย HTML จึงถูกนำมาใช้จนเกิดการแพร่หลายออกไปยังทั่วโลก จากความง่ายดายในการใช้งาน HTML ในปัจจุบันพัฒนามาจนถึง HTML 4.01 และ HTML 5 กำลังจะออกมาในเร็วนี้ นอกจากนี้ยังมีการพัฒนาไปเป็น XHTML ซึ่ง คือ Extended HTML ซึ่งมีความสามารถและมาตรฐานที่รัดกุมกว่าอีกด้วย
โดยอยู่ภายใต้การควบคุมของ W3C (World Wide Web Consortium)
ประโยชน์ของ HTML ·
- ทำให้คนทั่วโลกสามารถได้รับข้อมูลข่าวสารของเราในพริบตา ·
- เผยแพร่เอกสารต่าง ๆ ของเราให้คนทั้งโลกได้อ่านอย่างไม่จำกัด ·
- ใช้ในการนำเสนอข้อมูลในที่ประชุมแทน สไลด์ หรือ แผ่นใส
การเขียนภาษาHTML
HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลใช้เครื่องหมาย < > แบ่งเป็น 2 แบบ 1. Tag เดี่ยวเป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> 2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <BLINK>…</BLINK> ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <BLINK>…</BLINK> โครงสร้างพื้นฐานของ HTML <HTML> <HTML> <HEAD> <TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงใน ส่วนหัว </TITLE> </HEAD> <BODY> คำสั่งหรือข้อความที่ต้องการให้แสดง </BODY> </HTML> คำสั่งพื้นฐานทั่วไปของภาษา html ·
การปรับแต่งเอกสาร HTML
1. แบบใส่สีให้พื้นหลัง bgcolor = "ชื่อสี" หรือ bgcolor = "#รหัสสี"<html> <head><title> ....การใส่สีให้พื้นหลังเป็นสีแดง....</title></head> <body bgcolor = "red"> </body> </html>2. แบบใส่ภาพให้พื้นหลัง background = "ชื่อภาพ“<html> <head><title> ....การใส่ภาพให้พื้นหลัง....</title></head> <body background = "lilies.jpg"> </body> </html> <body background = "lilies.jpg"> </body> </html>
การจัดรูปแบบข้อความ
1. การกำหนดแบบตัวหนา (Bold) <b> ...ข้อความ...</b> หรือ <strong> ...ข้อความ...</strong> 2. การกำหนดแบบตัวเอียง (Italic) <i> ...ข้อความ...</i> 3. การกำหนดแบบตัวขีดเส้นใต้ (Underline) <u>...ข้อความ...</u> 4. การกำหนดแบบตัวขีดฆ่า (Strike) <strike>...ข้อความ...</strike> <html> <head><title> ....การจัดรูปแบบข้อความ....</title></head> <body> <b><font size = "2"> ข้อความนี้กำหนดตัวหนา b</font></b><br> <strong><font size = "2"> ข้อความนี้กำหนดตัวหนา strong</font></strong><br> <i><font size = "2"> ข้อความนี้กำหนดตัวเอียง i </font></i><br> <u><font size = "2"> ข้อความนี้กำหนดตัวขีดเส้นใต้ u </font></u><br> <strike><font size = "2"> ข้อความนี้กำหนดตัวขีดฆ่า strike </font></strike><br> </body> </html>
การจัดตำแหน่งข้อความ
1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ...</center> 2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้ <p align = "ตำแหน่ง"> ...ข้อความ...</p> <html> <head><title> ....การจัดตำแหน่งข้อความ....</title></head> <body> <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br> <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br> <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br> <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br> </body> </html> 2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้ <p align = "ตำแหน่ง"> ...ข้อความ...</p> <html> <head><title> ....การจัดตำแหน่งข้อความ....</title></head> <body> <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br> <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br> <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br> <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br> </body> </html>
การใส่รูปภาพ
1.รูปแบบแท็กการใส่รูปภาพ <img src = "ชื่อภาพ"> <html> <head><title> ....การใส่รูปภาพ....</title></head> <body> <img src = "lilies.jpg"> </body> </html
การใส่เสียง <HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY> <BGSOUND SRC="nice.mid" LOOP="Infinite"> </BODY> </HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY> <BGSOUND SRC="nice.mid" LOOP="Infinite"> </BODY> </HTML>
หมายเหตุ SRC=“ชื่อเพลง.สกุล” บทสรุป
ภาษา HTML
HTML ย่อมาจาก hyper text markup language เป็นโปรเเกรมภาษาประเภทหนึ่งสำหรับเเสดงข้อความต่างๆ ในรูปแบบของข้อความ รูปภาพ หรือภาพเคลื่อนไหว ฯลฯ เเละสามารถเชื่อมโยงข้อมูลไปยังเอกสารอื่นได้ที่มีความสามารถสูงเหนือกว่าเอกสารมาแสดงบนหน้าจอภาพในระบบอินเทอร์เน็ตได้เรียกดูผลได้บนโปรเเกรมเบราเซอร์ได้เลย
โครงสร้างของภาษา HTML
โครงสร้างของไฟล์ภาษา HTML มี 2 ส่วนคือ1. ส่วนที่เป็นข้อมูลที่ต้องการเเสดง เช่น ข้อความ ภาพ เสียง ภาพเคลื่อนไหวเป็นต้น2. ส่วนที่เป็นคำสั่งเเท็ก (TAG) เพื่อใช้กำหนดลักษณะของข้อมูล โดยกำหนดเป็นเเท็กแท็กเปิดเเละเเท็กปิด เช่นการวางตำเเหน่งของข้อมูล ขนาดของข้อความ การกำหนดสีของข้อความ
ส่วนหัว (HEAD) ประกอบด้วยการกำหนดชื่อของเว็บเพจที่เรียกว่า title บอกให้ทราบว่าเอกสารนั้นเกี่ยวกับอะไร โดยคำสั่ง<HEAD> เป็นการเริ่มต้นชื่อเรื่องเอกสาร ภายในคำสั่งประกอบด้วยคำสั่ง <title> อีกทีเพื่อเเสดงชื่อของเอกสารนั้น
ส่วนเนื้อหาของเอกสาร (BODY) ประกอบด้วยส่วนที่เป็นเนื้อหาของเว็บเพจ เช่น ข้อความ ตาราง รูปภาพ พื้นหลังสีตัวอักษร เเละเเบบฟอร์มต่างๆ โดยใช้คำสั่ง <BODY>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น