มาทำความรู้จักกับ 💬😁
HTML ซึ่งย่อมาจากคำว่า "Hyper Text Markup Language"
เป็นภาษาหลักที่ใช้สร้างเว็บเพจ
เราลองมาเริ่มต้นเขียนเว็บแบบง่ายๆกันเลยดีกว่า !! 😜😜😜
1. เปิด Notepad ขึ้นมา แล้วพิมพ์ Tag ตามรูปด้านล่าง
จากภาพเป็น Tag พื้นฐานของ HTML
HTML มีโครงสร้างคือการเขียน Tag
เพื่อควบคุมการแสดงผล ข้อความ รูปภาพ หรือวัตถุอื่นๆ
Tag : <html>...</html> เป็นส่วนประกาศหัวและท้ายของเอกสารที่ทำให้รู้ว่าเป็นข้อมูลของเอกสารนั้นๆ
Tag : <head>...</head> เป็นส่วนหัวของเอกสาร ภายในจะมี Tag <title>
Tag : <title>...</title> ใช้สำหรับกำหนดชื่อเอกสาร
Tag : <body>...</body> เป็นส่วนที่ใส่รายละเอียดที่ต้องการให้แสดงบนหน้าเว็บไซต์ของเราทั้งหมด
😜😜😜😜😜😜
2. เมื่อพิมพ์ข้อมูลลงไปใน Tag
แล้วบันทึกไฟล์ และเปลี่ยนสกุลไฟล์ให้เป็น .html
จากภาพ คือตัวอย่างการใส่เนื้อหาลงใน Tag
😜😜😜😜😜😜
3. เปิดไฟล์ที่บันทึกไว้ด้วยเบราว์เซอร์
เช่น IE (Internet Explorer), Google Chrome, Mozilla Firefox, Safari หรืออื่นๆ
จากภาพ คือผลลัพธ์ที่ได้จากการเขียนด้วย HTML
จากหมายเลข 1 คือ ผลลัพธ์ของ Tag : <title>...</title>
จากหมายเลข 2 คือ ผลลัพธ์ของ Tag : <body>...</body>
---------------------------------------------------------------------------------------------------------
😜😜😜😜😜😜
ส่วนประกอบที่สำคัญของ HTML
ได้แก่ Tag และ Attribute
Tag คือ คำสั่งที่ใช้ในภาษา HTML และจะอยู่ในเครื่องหมาย < >
ใช้สำหรับกำหนดค่าต่างๆให้กับข้อมูลในเอกสาร
ส่วนมากใน HTML จะมี Tag เปิด และปิด
เช่น
<h1>...</h1> ใช้เน้นหัวข้อ
<b>...</b> ใช้กำหนดให้ตัวอักษรหนา
<table>...<table> เป็นคำสั่งสร้างตาราง
แต่บาง Tag ก็มีแต่ Tag เปิด ไม่มี Tag ปิด
เช่น
<br> เป็นคำสั่งขึ้นบรรทัดใหม่
<hr> ใช้สร้างเส้นขั้น
Attribute คือ เป็นส่วนขยายใน Tag ใช้สำหรับจัดรูปแบบเพิ่มเติม
และค่าของ Attribute จะอยู่ในรูป " "
เช่น
<table border = "1" bordercolor = "red" width = "500" height = "500">
<tr>
<td valign = "top">...</td>
<td align = "right">...</td>
</tr>
</table>
******************
จากตัวอย่างด้านบน ตัวอักษรสีแดง คือ Attribute
<table>...</table> เป็น Tag สำหรับการสร้างตาราง
<tr>...</tr> เป็น Tag สำหรับการสร้างแถวภายในตาราง
และ Tag นี้ต้องอยู่ภายใน Tag <table>...</table>
<td>...</td> เป็น Tag สำหรับการสร้างคอลัมภ์ภายในแถวของตาราง
และ Tag นี้ต้องอยู่ภายใน Tag <tr>...</tr>
---------------------------------------------------------------------------------------------------------
😇😇😇😇😇😇😇😇😇😇😇😇😇😇
มาถึงตรงนี้แล้วจะเห็นว่าการเขียน HTML นั้นง่ายมากเลยใช่ไหมทุกคน
จริงๆ แล้วการสร้างไฟล์ HTML นั้นสามารถใช้เครื่องมือได้หลากหลายมาก
แต่ในบทต่อๆ ไป เราจะใช้เครื่องมือที่ชื่อ "Edit Plus"
เริ่มต้นโดยการเลือก File --> New --> HTML Page
เราจะมาทำความรู้จักกับคำสั่ง หรือ Tag ของ HTML ให้มากขึ้นกัน
จากภาพ คือตัวอย่างจากการเขียน HTML เบื้องต้น
จากภาพ คือผลลัพธ์ที่ได้จากการเขียนด้วย HTML
<h1>Topic</h1>
: Tag หัวข้อ
Content 1
: ข้อความปกติ
<b>Content 2</b>
: Tag ตัวหนา
<br>
: Tag สำหรับเว้นบรรทัด (Tag นี้จะไม่มี Tag ปิด)
<hr>
: Tag เส้นขั้น (Tag นี้จะไม่มี Tag ปิด)
Content 3
: ข้อความปกติ
<table border = "1" bordercolor = "red" width = "500" height = "500">
: Tag สร้างตาราง
มี Attribute ขยาย คือ
border หมายถึง ขนาดของขอบตาราง หน่วยเป็น pixel
ถ้าใส่ 0 จะไม่แสดงขอบตาราง ,
bordercolor หมายถึง สีของขอบตาราง ,
width หมายถึง กำหนดความกว้างของตาราง มีหน่วยเป็น % และ pixel
หากใส่เป็น % ความกว้างจะขยายตามหน้าต่างของเบราว์เซอร์ที่เปิด ,
height หมายถึง กำหนดความสูงของตาราง หน่วยเป็น pixel เท่านั้น
<tr>
: Tag สร้างแถวภายในตาราง
<td valign = "top"> AAA </td>
: Tag สร้างคอลัมภ์ภายในแถวของตาราง
มี Attribute ขยาย คือ
valign หมายถึง การกำหนดการจัดวางข้อความอยู่ในตารางตามแนวตั้ง
โดยส่วนขยายของ valign มีดังนี้ Top, middle, bottom
<td align = "right"> BBB </td>
: Tag สร้างคอลัมภ์ภายในแถวของตาราง
มี Attribute ขยาย คือ
align หมายถึง การกำหนดการจัดวางข้อความอยู่ในตารางตามแนวนอน
โดยส่วนขยายของ align มีดังนี้ Left, Center, Right
---------------------------------------------------------------------------------------------------------
😇😇😇😇😇😇😇😇😇😇😇😇😇😇
จากภาพ คือ การเปรียบเทียบขนาดของตัวอักษรจาก Tag h(1-6)
จากภาพ คือ ผลลัพธ์จากการเปรียบเทียบขนาดของตัวอักษรจาก Tag h(1-6)
จากภาพ คือ Tag b คือ ตัวหนา, u คือ ขีดเส้นใต้, i คือตัวเอียง
จากภาพ คือ ผลลัพธ์จาก Tag b , u , i
จากภาพ คือ การแทรกภาพ
โดย Tag แรก คือ แทรกภาพจากเครื่อง
และภาที่ 2 คือ แทรกภาพจากอินเตอร์เน็ต
จากภาพ คือ ผลลัพธ์จากการแทรกภาพ
โดย Tag แรก คือ แทรกภาพจากเครื่อง
และภาที่ 2 คือ แทรกภาพจากอินเตอร์เน็ต
