มาเริ่มต้นรู้จักกับ HTML กันเถอะ
ในบทความที่แล้วผมได้พูดถึงเนื้อหาความเป็นมาต่างๆของ HTML และก็เริ่มต้นใช้ HTML เบื้องต้นไปแล้ว ใครที่พลาดสามารถย้อนกลับไปดูเนื้อหาก่อนหน้าได้นะครับ ในบทความครั้งนี้ราจะมาดู Tag และ Element ต่างๆใน HTML กัน ไปต่อกันเลยครับ
ทบทวนนะครับ Tag และ Element ต่างกันยังไง ? Element ก็คือ Tag นั่นแหละครับแต่จะเป็น Tag ย่อยใน Tag หลัก อีกทีหนึ่ง เช่น
<html> // Tag html
<head> //Tag head เป็น Element ของ html
</head>
<body>//Tag body เป็น Element ของ html
<h1> Hello World </h1> //Tag h1 เป็น Element ของ html
</body>
</html>
แนะนำ Tag และ Element ต่างๆที่ใช้กันบ่อยๆ
อันดับแรก <head> คือ tage ที่แสดงรายละเอียดส่วนหัวของเว็บ
ภายใน tag <head> จะประกอบไปด้วย element
<title> ... </title> จะแสดงข้อความที่อยู่บน tab ของเว็บเบราว์เซอร์
<meta ... />
<link /> เป็น tag สำหรับใช้ import ไฟล์ .css ที่เรานำมาใช้ในหน้าเว็บ โดยทำได้ดังนี้
<link rel="stylesheet" href"direct part ของไฟล์ที่นี้" >
<style> ... </style> สามารถใส่ CSS code ที่นำไปใช้ในหน้าเว็บ
<script> ... </script> สามารถใส่ Javascript code ต่าง ๆ ได้
ต่อจาก <head> นะครับก็คือ
<body> ... </body> จะแสดงรายละเอียดส่วนของเนื้อหาในหน้าเว็บ
ภายใน tag <body> จะประกอบไปด้วย element มากมายโดยผมจะแนะนำที่เราใช้กันบ่อยๆๆนะครับ
<h1> MiniG </h1> , <h2> MiniG </h2> , ... , <h6> MiniG <h6> ใช้สำหรับแสดงข้อความที่เราใช้เป็นหัวข้อ เช่น
<p> ... </p> ใส่ข้อความเป็น paragraph เช่น
<a href" ... "> ... </a> ใส่ลิ้งให้ข้อความโดยใส่ direct part ที่ต้องการใน href" ..."
<br> ขึ้นบรรทัดใหม่
<div> ... </div> กำหนดให้ element ที่อยู่ภายใน tag นี้ล้อมลอบไปด้วย block หรือ container เป็นพื้นที่สี่เหลี่ยม
<img src=" ... " alt=" ... " > แสดงรูปภาพตาม url ใน src=" ... " ส่วน alt=" ... " จะบอกว่าภาพที่เรียกว่าอะไรคล้ายคำอธิบายรูปภาพแต่ไม่แสดงให้เห็น
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> ตัวอย่างจาก W3
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> ตัวอย่างจาก W3
แสดงรายละเอียดต่างๆเป็นตาราง <th> : หัวข้อของตารางแต่ละ colum <tr> : ข้อมูลแต่ละแถว
<td> ข้อมูลในแต่ละแถวโดยแสดงไปเรื่อยๆตามจำนวน colum
ผลลัพธ์
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> ตัวอย่างจาก W3
แสดงเป็น list โดยสามารถใส่ style ได้ใน style = " ... " โดยใน html จะมีด้วยกัน 4 style คือ none, disc, circle และ square ดูได้จากรูป
ผลลัพธ์
<iframe src=" ... " ></iframe> จะแสดง เนื้อหาภายใน url ที่เราใส่ไว้ใน src = " ... " ตัวอย่างจาก W3
เท่านี้เราก็ทราบเกี่ยวกับ Tag และ Element ต่างๆที่มีใน html กันแล้วนะครับ อาจจะมีตกหล่นอยู่บ้างโดยสามารถไปศึกษาเพิ่มเติมได้ที่ www.w3schools.com หากบทความดังกล่าวมีเนื้อหาผิดพลาดประการใด ขออภัยไว้ ณ ที่นี้ด้วยครับผม
ความคิดเห็น
แสดงความคิดเห็น