เรื่อง : เป็นนักพัฒนาเว็บไซต์ต้องเข้าใจ HTML
ภาษา HTML เป็นภาษาพื้นฐานหรือเป็นเรื่อง Basic ที่ผู้ต้องการเรียนรู้ด้านเว็บไซต์จำเป็นต้องรู้ ไม่รู้ไม่ได้ (ขอย้ำ)
จริงอยู่โปรแกรมอย่าง
Dreamweaver ถูกพัฒนาขึ้นมาเพื่ออำนวยความสะดวกให้เราไม่ต้องเรียนรู้ภาษา HTML เราก็สามารถสร้างเว็บไซต์ได้
แต่คุณรู้ไหมว่า...กว่า 80% ที่มีปัญหาเกี่ยวกับการพัฒนาเว็บที่ถามเข้ามายัง DwThai.Com ส่วนใหญ่เกิดจากการที่ผู้ถามไม่มีความเข้าใจในเรื่องของภาษา HTML นี้
พอมีปัญหาก็ไม่อาจจะแก้ไขได้ พาลโทษไปที่ตัวโปรแกรม Dreamweaver ใช้งานยาก บางรายปัญหาหนักคิดว่าเป็นที่ตัวโปรแกรมถึงขนาดถอดโปรแกรม Dreamweaver ออก
และลงโปรแกรมใหม่ก็มี
ดังนั้น...ในบทความนี้ผมจึงเขียนขึ้นมาเพื่อให้ผู้อ่านมีความรู้ความเข้าใจในพื้นฐานของภาษา HTML และส่งเสริมแนะนำให้ฝึกเขียน HTML กันดู อย่างไรลองอ่านดูครับ *ภาษา HTML ไม่ยาก แต่ต้องใส่ใจ
HTML คืออะไร ?
HTML ย่อมาจากคำว่า
HyperText Markup Language
เป็นภาษาที่ใช้ในการเขียนเพื่อกำกับข้อมูลต่าง ๆ และทำงานร่วมกับ Web Browser ซึ่ง HTML นี้ เป็นภาษาพื้นฐานที่สุดที่เราใช้ในการพัฒนา Website และปัจจุบัน HTML เป็นภาษาที่พัฒนาภายใต้การดูแลขององค์กรที่ชื่อว่า
World Wide Web Consortium (W3C) สำหรับเวอร์ชั่นของ HTML ปัจจุบันได้พัฒนามาอยู่ที่เวอร์ชั่น 5 หรือเราเรียกกันว่า
HTML5
...HTML เป็นภาษาที่สำคัญมากกับเทคโนโลยีเว็บไซต์ ไม่ว่าเราจะเขียนโปรแกรมบนเว็บไซต์ด้วยภาษาใด ๆ ก็ตาม
เช่น PHP, ASP.Net, Perl, Java หรืออื่น ๆ เรามีความจำเป็นในการแสดงผลข้อมูลกับ Web Browser ด้วยภาษา HTML
หรือให้เรามองว่า HTML คือ Output ในการแสดงผลสู่จอภาพของ Web Browser แบบนั้นก็ได้ครับ
รูปแบบการเขียนของภาษา HTML
HTML มีรูปแบบการเขียนในลักษณะ TAG ซึ่ง TAG นี้จะมีทั้ง
TAG เปิด และ
Tag ปิด
โดยที่ TAG จะมีลักษณะ ดังนี้
<TAG>…………………</TAG>
<TAG> คือ TAG เปิด
</TAG> คือ TAG ปิด
*มีเครื่องหมาย Slash หน้าชื่อแท๊ก
แต่กระนั้นในภาษา HTML ก็ยังมีรูปแบบของ TAG อีกประเภทหนึ่ง คือ
Tag เดี่ยว ที่ไม่จำเป็นต้องมี TAG ปิดเข้าร่วมด้วย เช่น
<br> เป็น Tag สำหรับการขึ้นบรรทัดใหม่ของ HTML
<img> เป็น Tag สำหรับการแสดงรูปภาพ เป็นต้น (ศัพท์ทางการเราอาจจะเรียกแท๊กเหล่านี้ว่า Empty Tag)
ภาษา HTML เป็นภาษาที่ไม่คำนึงถึงขนาดของตัวอักษร เช่น TAG <IMG> เราจะเขียนเป็น <img> or <Img> ก็จะสามารถแสดงผลได้เช่นเดียวกัน
แต่แนะนำให้เขียนโดยใช้ตัวอักษรพิมพ์เล็กจะดีกว่า เนื่องจาก บางมาตราฐานของภาษา HTML เช่น XHTML จะคำนึงถึงตัวอักษรพิมพ์เล็ก-ใหญ่
และภาษา HTML ไม่มีการแจ้ง Error แต่อย่างใดหากผู้เขียนมีการเขียน TAG ซึ่งผิดพลาด ภาษา HTML
จะไม่แสดงผลตามที่ต้องการเท่านั้น ซึ่งผู้เขียนต้องพิจารณาหาจุดผิดพลาดด้วยตนเอง
โครงสร้างของ HTML
HTML มีรูปแบบโครงสร้างที่ประกอบอยู่ 2 ส่วน คือ
1. ส่วนของ Head สำหรับข้อมูลในส่วนหัวของเอกสาร HTML เช่น ข้อความบน Title Bar ของ Web Browser เป็นต้น
2. ส่วนของ Body สำหรับการแสดงผลยังหน้าเอกสาร หรือหน้า Web Browser
โดยทั้ง 2 ส่วนประกอบข้างต้น จะถูกกำกับไว้ภายใต้ TAG : <html> ….. </html>
» Head Section
ส่วนของ Head ในเอกสาร HTML เป็นส่วนที่เราจะสามารถใส่คำอธิบายเว็บเพจ เช่น Title หรือชื่อเรื่องของเอกสาร,
Keyword สำหรับการค้นหา หรืออื่น ๆ ลงไปได้ ซึ่งเราจะเขียน TAG ในกลุ่มของ Head นี้ไว้ภายใน TAG <head> …… </head>
เช่น
<html>
<head>
<meta charset="utf-8">
<title>ข้อความปรากฏบน Title Bar</title>
</head>
<body>
.................................................................
.................................................................
</body>
</html>
- <meta charset="utf-8">
คือ TAG สำหรับการกำหนด Encoding ภาษาของ Web Page
- <title>
คือ ข้อความที่เป็นชื่อเรื่องของเอกสาร และจะแสดงผลที่ Title Bar บน Web Browser
ที่ส่วนของ Head นี้ เรายังสามารถใส่หรือพิมพ์ TAG อื่น ๆ เข้าไปได้อีก เช่น TAG <script> ที่ใช้ในการเขียนโปรแกรมภาษา JavaScript หรืออื่น ๆ เป็นต้น
» Body Section
ส่วนของ Body เป็นส่วนที่จะแสดงผลไปยังหน้า Web Browser เช่น การแสดงผลรูปภาพ, การแสดงผล Contents,
การสร้างจุดเชื่อมโยงหรือลิงค์ ซึ่งเราจะเขียน TAG ในกลุ่มของ Body ไว้ภายใต้ TAG <body> ….. </body> เช่น
<body>
<p>Hello.....HTML
<a href=”http://www.dwthai.com”>GO TO DwThai.Com</a>
</p>
</body>
</html>
- <p> คือ การกำหนด Paragraph ของข้อมูลภายในเว็บเพจ
- <a> คือ การสร้างจุดเชื่อมโยง หรือ Link
ภายใน TAG <body> ยังมี TAG ที่เราจะใช้งานอยู่มากมายเพื่อใช้ในการแสดงผลที่หน้า Web Page ของเรา เช่น การแทรกรูปภาพ, การสร้างตาราง เป็นต้น
เริ่มต้นเขียน HTML
เราสามารถเขียน HTML ได้จากโปรแกรม Text Editor ทั่วไป เช่น โปรแกรม Notepad เป็นต้น โดยวิธีการเขียน
ก็เหมือนกันการพิมพ์เอกสารทั่ว ๆ ไป เพียงแต่เวลาที่เราทำการบันทึก (Save) ไฟล์ให้เราทำการ Save เก็บไว้เป็นไฟล์นามสกุลเป็น *.htm or *.html
วิธีการ Save ไฟล์ HTML
ถ้าเราใช้โปรแกรม Notepad ในการฝึกเขียน HTML ตามที่กล่าวไป เมื่อต้องการบันทึกไฟล์
ให้ไปที่เมนู Save ของโปรแกรม Notepad จากนั้นให้ทำการ Save ไฟล์ ดังรูป
การกำหนดค่าที่จำเป็นเมื่อทำการ Save ไฟล์ HTML จาก Notepad
-
File name ให้เราทำการพิมพ์ชื่อไฟล์พร้อมทั้งนามสกลุของไฟล์เป็น *.htm or *.html เช่น
MyHTML.html เป็นต้น
-
Save as type ให้ทำการเลือกไปที่ All File
ข้างต้นเป็นเพียงแนะนำให้รู้จักการเริ่มต้นเรียนรู้ในเรื่องของ HTML ซึ่งภาษา HTML ยังมีเรื่องอื่น ๆ อีกมากมายให้คุณได้เรียนรู้
คุณอาจจะค้นหาแหล่งเรียนรู้นั้นได้จากเว็บไซต์ Google โดยอาจใช้การค้นคำว่า Beginner HTML คุณก็จะได้พบเว็บไซต์ขุมทรัพย์ทางปัญญามากมายให้คุณได้เรียนรู้
...สวัสดีครับ.
About the Author
Mr.Sittichai Raksasuk
Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs.
He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.
Contact with him : dwthai@gmail.com
บทความอื่นที่คุณอาจสนใจ
องค์ประกอบเว็บไซต์ในแบบ CDPเรื่อง :: องค์ประกอบเว็บไซต์ในแบบ CDP
CDP คืออะไร CDP เป็นอักษรย่อของคำว่า Content - Design - Program ครับ ผมพบคำนี้ใน We...
