About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

มาเริ่มต้นรู้จักภาษา HTML กันเถอะ [Article ID : 175]


เรื่อง : เป็นนักพัฒนาเว็บไซต์ต้องเข้าใจ 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

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



บทความอื่นที่คุณอาจสนใจ

รหัสค่าสีที่ใช้กันใน Web Page (Web Color)

เรื่อง : รหัสค่าสีที่ใช้กันใน Web Page ระบบค่าสีที่เราใช้กันกับเว็บหรือใช้ที่หน้าเว็บเพจ (Web Page) ต่าง ๆ นั้น สำหรับคนท...  

Cookies เรื่องของคุกกี้

เรื่อง :: Cookie Fileเรื่องนี้จริง ๆ แล้วไม่เกี่ยวกับโปรแกรม Dreamweaver หรอกครับ แต่อยากเขียนเพื่อเป็นเกร็ดเล็ก ๆ น...  

การใช้ Developer Tools ใน Web Browser

เรื่อง : มารู้จักเครื่องมือสำหรับนักพัฒนาเว็บไซต์ที่มีมากับ Web Browser บทความนี้มาพูดถึงเรื่อง Feature ที่มีมากับ Web Br...  

ทำความเข้าใจเกี่ยวกับความแตกต่างระหว่าง Elements และ Tags (Elements vs. Tags)

เรื่อง : ความแตกต่างระหว่าง Elements กับ Tags การเขียนโค้ดในลักษณะของภาษาแบบ Markup อ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*