วันนี้เราจะมาพูดถึงพื้นฐานของการทำเว็บไซต์กันเลยนะครับ เกี่ยวกับเรื่องของ HTML ซึ่งน่าจะยังมีคนสงสัยและไม่เข้าใจกันอยู่ ดังนั้นบทความนี้จึงเหมาะสำหรับมือใหม่มากๆ ในการทำเว็บไซต์ เราจะมาเริ่มตั้งแต่ความหมายของ HTML กันเลยว่า HTML คืออะไร มีการใช้งานอย่างไร เรามาดูกันครับ
HTML คืออะไร
HTML (Hypertext Markup Language) คือ ภาษาคอมพิวเตอร์ภาษาหนึ่งที่เอาไว้ใช้สร้างหน้าเว็บไซต์ ซึ่งจะช่วยในเรื่องการสร้างโครงสร้างของหน้าเว็บ (Web Page) การแสดงลิงก์ ย่อหน้า รายการ การสร้างแบบฟอร์ม ภาพและวิดีโอ โดยสามารถเรียกดูผ่านทางเบราว์เซอร์ต่างๆ เช่น Chrome, Firefox, หรือ MacOS ได้ ปัจจุบัน HTML นี้อยู่ที่เวอร์ชั่น 5 หรือที่เรียกว่า HTML5
ตัวอย่างโครงสร้างของ HTML
<!DocType html>
<html>
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://localhost/html/style.css" type="text/css" media="all">
<title>Title</title>
</head>
<body>
<h1 id="head-1" class="big">Heading 1</h1>
<p>Content of the document....</p>
<footer class="footer">
This is footer.
</footer>
<script src="https://localhost/html/js/jquery.js"></script>
<script type="text/javascript" src="https://localhost/html/script.js"></script>
</body>
</html>ขยายความโครงสร้าง HTML
- <!DOCTYPE html> คือการประกาศว่าจะใช้ HTML 5
- <html> เริ่มต้นใช้ HTML
- <head> คือส่วนหัวข้อเนื้อหา จะประกอบไปด้วย
- <meta> – meta tag ระบุว่าใช้อักษรแบบ UTF-8 ทำให้อ่านเป็นภษาไทยได้
- <title> ชื่อหัวข้อของหน้าจะปรากฏอยู่ตรงแท็บด้านบนของเบราเซอร์
- </head> ส่วนปิดของส่วนหัว
- <body> เริ่มต้นในส่วนของเนื้อหาหน้าเว็บไซต์ เนื้อหาของเว็บไซต์จะใส่เข้าไประหว่างการเปิดและปิดของส่วน Body นี้
- </body> ปิดในส่วนของเนื้อหาหน้าเว็บไซต์
- </html> ปิดในส่วนของ HTML
เราสามารถที่จะเรียกคำสั่งต่างๆ ที่อยู่ภายในวงเล็บที่มีลักษณะเหมือนเครื่องหมายมากกว่าและน้อยกว่า ว่า แท็ก เช่น <body> ก็จะเรียกว่าแท็กบอดี้ หรือ Body Tag ในส่วนของแท็กต่างๆ ในภาษา HTML นี้ จะต้องมีการเปิดและปิดแท็กเสมอ จากตัวอย่างโค้ดด้านบนจะเห็นว่าเมื่อมีการเปิดแท็กบอดี้แล้วก็ต้องมีปิดแท็กบอดี้ </body> แบบนี้ ยกเว้นบางแท็กเช่น img, input ที่ไม่จำเป็นต้องมีการปิดแท็กครับ
แท็กใน HTML นั้น แต่ละตัวมีหน้าที่แตกต่างกันไป บางตัวทำหน้าที่ในการกำหนดขนาดตัวอักษร บางตัวทำหน้าที่ในการสร้างลิงก์ หรือ บางตัวมีหน้าที่ในการแบ่งพื้นที่การทำงาน และการแสดงผลอื่นๆ
ตัวอย่างแท็ก HTML
- แท็ก h2 – เป็นแท็กที่กำหนดขนาดตัวอักษรให้มีความใหญ่ลำดับที่ 2 ซึ่งแท็กนี้มีหลายขนาดตั้งแต่ h1 ไปถึง h6
- แท็ก a – เป็นแท็กที่กำหนดให้มีการเชื่อมโยงหรือทำลิงก์ไปหน้าอื่นๆ ทั้งในและนอกเว็บไซต์
- แท็ก div – เป็นแท็กที่กำหนดขอบเขตของเนื้อหา
- แท็ก table – เป็นแท็กที่ใช้สำหรับสร้างตารางในหน้าเว็บเพจ
- แท็ก img – เป็นแท็กที่ระบุว่าเนื้อหาด้านในเป็นรูปภาพ
- แท็ก p – เป็นแท็กที่บอกว่าเนื้อหาด้านในเป็นหนึ่งพารากราฟหรือข้อความ
- แท็ก form – เป็นแท็กที่เอาไว้สร้างฟอร์มใน HTML
- แท็ก input – เป็นแท็กที่มีกล่องให้ใส่ข้อมูลต่างๆ
สำหรับ HTML5 นนั้นได้เพิ่มแท็กใหม่ๆ ขึ้นมาเพื่อช่วยการทำงานของผู้พัฒนาเว็บไซต์ให้ง่ายขึ้น ลดความซ้ำซ้อนของโค้ด และแบ่งประเภทหน้าที่การทำงานได้ชัดเจนขึ้น เช่น
- แท็ก article – เป็นแท็กระบุพื้นที่ของเนื้อหาบทความอยู่ตรงส่วนนี้
- แท็ก aside – เป็นแท็กระบุพื้นที่แถบด้านข้างหรือ Sidebar
- แท็ก figure – เป็นแท็กระบุพื้นที่ของรูป
- แท็ก footer – เป็นแท็กระบุพื้นที่ส่วนล่างของเนื้อหาหรือ Footer
- แท็ก header – เป็นแท็กระบุพื้นที่ส่วนหัวของเนื้อหาหรือ Header
- แท็ก nav – เป็นแท็กระบุพื้นที่เมนูหรือเนวิเกเตอร์ต่างๆ
ดูเพิ่มเติมแท็กใหม่ๆ ได้ที่หัวข้อ แท็กใหม่ใน HTML5
แอตทริบิวต์ในแท็ก HTML (Attributes in HTML)
ภายในแท็กต่างๆ ที่เราเขียนบางด้านบน ภายในแท็กยังมีองค์ประกอบหนึ่งที่ชื่อว่าแอตทริบิวต์ ที่ช่วยขยายหน้าที่การทำงานของแท็กต่างๆ เช่น id, class, href, src และอื่นๆ บางแอตทริบิวต์สามารถใช้งานได้ทุกแท็ก HTML แต่บางแอตทริบิวต์จะต้องใช้งานเฉพาะแท็ก
ตัวอย่างการใช้งานแอตทริบิวต์
<h1 id=”example”>ตัวอย่าง</h1> เป็นการบอก id หรือรหัสประจำตัวแท็ก h1 นี้ ชื่อว่า example สำหรับ id จะสามารถใช้งานได้ทุกแท็กแต่งในหนึ่งหน้าเพจจะต้องมีไอดีเดียว
<p class=”small”>รายละเอียดตัวอย่าง</p>เป็นการบอก class ของแท็ก p ชื่อว่า small ซึ่งคลาสนี้จะถูกนำไปใช้งานกับ CSS ในการดีไซน์หรือออกแบบหน้าเว็บไซต์ของเรา ในที่นี้เป็นการบอกว่า ในส่วนของเนื้อหานี้ให้มีขนาดเล็กกว่าปกติ
<a href="www.google.com">Google</a>Href นี้จะเป็นการบอกว่าเมื่อมีคนมากดลิงก์ที่ชื่อว่า Google แล้วจะถูกนำไปยังหน้าเว็บ Google.com ครับ
<img src="www.example.com/images/img.jpg"> Src เป็นการบอกว่า รูปจะถูกนำมาจากโฟลเดอร์ใด ในที่นี้รูปที่ชื่อ img.jpg จะมาจากโฟลเดอร์ images
สำหรับแอตทริบิวต์อื่นๆ สามารถดูได้จากหน้า HTML Attributes ครับ
เป็นอย่างไรกันบ้างครับ พอจะได้พื้นฐานการใช้งานของ HTML กันไปบ้างไหม สำหรับบทความนี้เอาไว้เพียงเท่านี้ก่อนนะครับ ไว้ติดตามกันใหม่ในหัวข้อถัดไป สวัสดีครับ
Pingback: CSS คืออะไร - WebDoDee
Pingback: PHP คืออะไร สามารถทำอะไรได้บ้าง และสิ่งที่ต้องการก่อนเริ่มใช้งาน - WebDoDee
Pingback: สอน WordPress [คู่มือและวิธีใช้งาน] ตอนที่ 1 - Themevilles