Begin HTML : Dreamweaver Program Tip & Trick DwThai.Com

เรื่อง : มาเริ่มต้นรู้จัก 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> เช่น

<html> <head> <meta http-equiv=content-type content="text/html; charset=tis-620"> <title>ข้อความปรากฏบน Title Bar</title> </head> <body> ................................................................. ................................................................. </body> </html>

- <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> เป็นต้น

<body> <p>Hello.....HTML</p> <a href=”http://www.dwthai.com”>GO TO DWTHAI.COM</a> </body> </html>

- <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 คุณก็จะได้พบเว็บไซต์ขุมทรัพย์ทางปัญญามากมายให้คุณได้เรียนรู้...โชคดีครับ.