ความรู้เบื้องต้น : ภาษา HTML
ภาษา HTML เป็นภาษาพื้นฐานหรือเป็นเรื่อง BASIC ที่ผู้ต้องการจัดทำเว็บไซต์จำเป็นต้องรู้ ไม่รู้ไม่ได้ (ขอย้ำ) จริงอยู่โปรแกรมอย่าง Dreamweaver ถูกพัฒนาขึ้นมาเพื่ออำนวยความสะดวกให้เราไม่ต้องเรียนรู้ภาษา HTML เราก็สามารถสร้างเว็บเพจได้
แต่คุณรู้ไหมว่า...กว่า 80 % ที่มีปัญหาเกี่ยวกับการออกแบบเว็บที่ถามเข้ามายังผม ส่วนใหญ่เกิดจากการที่ผู้ถามไม่มีความเข้าใจในเรื่องของภาษาพื้นฐาน HTML นี้ (ไม่เกี่ยวกับเรื่องการพัฒนาโปรแกรมบนเว็บนะ) พอมีปัญหาก็ไม่อาจจะแก้ไขได้ พาลโทษไปที่ตัว Dreamweaver ใช้งานยาก บางรายปัญหาหนักคิดว่าเป็นที่ตัวโปรแกรมถึงขนาดถอดออกและลงโปรแกรมใหม่ก็มี ในบทความนี้ผมจึงเขียนขึ้นมาเพิ่อให้เรามีความเข้าใจในพื้นฐานของภาษา 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 คำสั่งผิดพลาด
<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>
1. ส่วนของ HEAD สำหรับข้อมูลในส่วนหัวของ HTML เช่น ข้อความบน Title bar เป็นต้น
2. ส่วนของ BODY สำหรับการแสดงผลยังหน้าเอกสาร หรือหน้า Web Browser
โดยทั้ง 2 ส่วนประกอบข้างต้น จะถูกกำกับภายใต้ TAG <HTML> ….. </HTML>
» HEAD Section
ส่วนของ HEAD ของเอกสาร HTML เป็นส่วนที่เราจะสามารถใส่คำอธิบายเว็บเพจ เช่น Title หรือชื่อเรื่องของเอกสาร, Keyword สำหรับการค้นหา ซึ่งเราจะเขียน TAG ในกลุ่มของ HEAD ไว้ภายใน TAG <HEAD> …… </HEAD> เช่น
ส่วนของ 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>- <TITLE>
คือข้อความที่จะแสดงผลบน Title Bar บน Web Browser
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=TIS-620">
คือ TAG สำหรับการกำหนด Encoding ของ webpage
Head เรายังสามารถใส่หรือพิมพ์ TAG อื่น ๆ เข้าไปได้อีก เช่น TAG <script> หรืออื่น ๆ เป็นต้น
คือข้อความที่จะแสดงผลบน 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 เป็นส่วนที่จะแสดงผลออกไปยังหน้า 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 ของเรา เช่น การกำหนดสีตัวอักษร, การแทรกรูปภาพ, การสร้างตาราง เป็นต้น
- <A> คือ การสร้างจุดเชื่อมโยง หรือ Link
ภายใน TAG <BODY> ยังมี TAG ที่เราจะใช้งานอยู่มากมายเพื่อใช้ในการตกแต่งหน้า webpage ของเรา เช่น การกำหนดสีตัวอักษร, การแทรกรูปภาพ, การสร้างตาราง เป็นต้น
ขอบคุณบทความจาก : www.dwthai.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น