มาเริ่มต้นรู้จัก HTML กันเถอะ
ภาษา HTML เป็นภาษาพื้นฐานหรือเป็นเรื่อง BASIC ที่ผู้ต้องการจัดทำเว็บไซต์จำเป็นต้องรู้ ไม่รู้ไม่ได้ (ขอย้ำ) จริงอยู่โปรแกรมอย่าง Dreamweaver ถูกพัฒนาขึ้นมาเพื่ออำนวยความสะดวกให้เราไม่ต้องเรียนรู้ภาษา HTML เราก็สามารถสร้างเว็บเพจได้ แต่คุณรู้ไหมว่า...กว่า 80 % ที่มีปัญหาเกี่ยวกับการออกแบบเว็บที่ถามเข้ามายังผม ส่วนใหญ่เกิดจากการที่ผู้ถามไม่มีความเข้าใจในเรื่องของภาษาพื้นฐาน HTML นี้ (ไม่เกี่ยวกับเรื่องการพัฒนาโปรแกรมบนเว็บนะ) พอมีปัญหาก็ไม่อาจจะแก้ไขได้ พาลโทษไปที่ตัว Dreamweaver ใช้งานยาก บางรายปัญหาหนักคิดว่าเป็นที่ตัวโปรแกรมถึงขนาดถอดออกและลงโปรแกรมใหม่ก็มี ในบทความนี้ผมจึงเขียนขึ้นมาเพิ่อให้เรามีความเข้าใจในพื้นฐานของภาษา HTML กัน ลองอ่านกันดูนะครับ
............................................................................................................................................................
HTML คืออะไร
HTML ย่อมาจากคำว่า HyperText Markup Language เป็นภาษาที่ใช้ในการแสดงผลของเอกสารบน website หรือที่เราเรียกกันว่าเว็บเพจ เป็นภาษาที่พัฒนาโดย World Wide Web Consortium (W3C)
HTML เป็นภาษาที่สำคัญมากกับเทคโนโลยีบนเว็บไซต์ ไม่ว่าคุณจะเขียนโปรแกรมบนเว็บไซต์ด้วยภาษาใด ๆ ๆ เช่น PHP, ASP, Perl หรืออื่น ๆ คุณก็ต้องมีความจำเป็นในการแสดงผลข้อมูลออกมายัง Web Browser ด้วยภาษา HTML เป็นหลักใหญ่ หรือให้เรามองว่า HTML คือ Output ในการแสดงผลสู่จอภาพของ Web Browser
รูปแบบการเขียนของภาษา HTML
HTML มีรูปแบบการเขียนในลักษณะ TAG ซึ่ง TAG นี้จะมีทั้ง TAG เปิด และ Tag ปิด โดยที่ TAG จะมีลักษณะ ดังนี้
<TAG>
</TAG>
<TAG> คือ TAG เปิด
</TAG> คือ TAG ปิด
แต่กระนั้นในภาษา HTML ก็ยังมีรูปแบบของ TAG อีกประเภทหนึ่ง คือ TAG เดี่ยว ๆ ที่ไม่จำเป็นต้องมี TAG ปิดเข้าร่วมด้วย เช่น
<BR> เป็น TAG สำหรับการขึ้นบรรทัดใหม่ของ HTML
<IMG> เป็น TGA สำหรับการแสดงรูปภาพ
ภาษา HTML เป็นภาษาที่ไม่คำนึงถึงขนาดของตัวอักษร เช่น TAG <IMG> เราจะเขียนเป็น <img> or <Img> ก็จะสามารถแสดงผลได้เช่นเดียวกัน และภาษา HTML ไม่มีการแจ้ง Error แต่อย่างใดหากผู้เขียนมีการเขียน TAG ซึ่งผิดพลาด เพียงแต่ภาษา HTML จะไม่แสดงผลตามที่ต้องการเท่านั้นหากเรามีการเขียน TAG คำสั่งผิดพลาด
โครงสร้างของ HTML
HTML มีรูปแบบโครงสร้างที่ประกอบอยู่ 2 ส่วน คือ
1. ส่วนของ HEAD สำหรับข้อมูลในส่วนหัวของ HTML เช่น ข้อความบน Title bar เป็นต้น
2. ส่วนของ BODY สำหรับการแสดงผลยังหน้าเอกสาร หรือหน้า Web Browser
โดยทั้ง 2 ส่วนประกอบข้างต้น จะถูกกำกับภายใต้ TAG <HTML>
.. </HTML>
» HEAD Section
ส่วนของ HEAD ของเอกสาร HTML เป็นส่วนที่เราจะสามารถใส่คำอธิบายเว็บเพจ เช่น Title หรือชื่อเรื่องของเอกสาร, Keyword สำหรับการค้นหา ซึ่งเราจะเขียน TAG ในกลุ่มของ HEAD ไว้ภายใน TAG <HEAD>
</HEAD> เช่น
- <TITLE>
คือข้อความที่จะแสดงผลบน Title Bar บน Web Browser
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=TIS-620">
คือ TAG สำหรับการกำหนด Encoding ของ webpage
Head เรายังสามารถใส่หรือพิมพ์ TAG อื่น ๆ เข้าไปได้อีก เช่น TAG <script> หรืออื่น ๆ เป็นต้น
» Body Section
ส่วนของ Body เป็นส่วนที่จะแสดงผลออกไปยังหน้า Web Browser เช่น การแสดงผลรูปภาพ การแสดงผล Contents การสร้างจุดเชื่อมโยง ซึ่งเราจะเขียน TAG ในกลุ่มของ Body ไว้ภายใน TAG <BODY>
.. </BODY> เป็นต้น
- <P> คือ การกำหนด Paragraph ของข้อมูลภายในเว็บเพจ
- <A> คือ การสร้างจุดเชื่อมโยง หรือ Link
ภายใน TAG <BODY> ยังมี TAG ที่เราจะใช้งานอยู่มากมายเพื่อใช้ในการตกแต่งหน้า webpage ของเรา เช่น การกำหนดสีตัวอักษร, การแทรกรูปภาพ, การสร้างตาราง เป็นต้น
เริ่มต้นเขียน HTML
เราสามารถเขียน HTML ได้จากโปรแกรม TEXT Editor ทั่วไป เช่น Notepad เป็นต้น โดยวิธีการเขียน ก็เหมือนกันการพิมพ์เอกสารทั่ว ๆ ไป เพียงแต่เวลาที่เราทำการเซพ (Save) ไฟล์ให้เราทำการ Save เก็บไว้เป็นไฟล์นามสกุลเป็น *.htm or *.html
วิธีการ Save ไฟล์ HTML
ให้ไปที่เมนู Save ของโปรแกรม Notepad จากนั้นให้เราทำการ save ไฟล์ ดังรูป
การกำหนดค่าที่จำเป็นเมื่อทำการ Save ไฟล์ HTML จาก Notepad
- File name ให้เราทำการพิมพ์ชื่อไฟล์พร้อมทั้งนามสกลุของไฟล์เป็น *.htm or *.html เช่น MyHTML.htm เป็นต้น
- Save as Type ให้ทำการเลือกไปที่ All File
............................................................................................................................................................
ข้างต้นเป็นเพียงแนะนำให้รู้จักการเริ่มต้นเรียนรู้ในเรื่องของ HTML ภาษา HTML ยังมีเรื่องอื่น ๆ อีกมากมายให้คุณได้เรียนรู้ คุณอาจจะค้นหาแหล่งเรียนรู้นั้นได้จากเว็บไซต์ GOOGLE โดยการค้นคำว่า Begin HTML คุณก็จะได้พบเว็บไซต์ขุมทรัพย์ทางปัญญามากมายให้คุณได้เรียนรู้...โชคดีครับ.
ที่มา : http://www.dwthai.com
|
