พื้นฐานการเขียนภาษา HTML

มารู้จักกับพื้นฐานการเขียนภาษา HTML กันก่อน

อย่างแรกต้องรู้จักกับ HTML heading

tag <h>....</h> คือ tag ที่กำหนดขนาดของตัวหนังสือให้เล็กหรือใหญ่ จุดประสงค์ของ tag นี้คือเอาไว้ใส่เป็นหัวข้อนั้นเอง

ตัวอย่างการใช้ tag <h>.....</h> 

<h1>ตัวอย่าง heading h1</h1>

<h2>ตัวอย่าง heading h2</h2>

<h3>ตัวอย่าง heading h3</h3>

<h4>ตัวอย่าง heading h4</h4>

<h5>ตัวอย่าง heading h5</h5>

<h6>ตัวอย่าง heading h6</h6>

ผลที่ได้คือ

ตัวอย่าง heading h1

ตัวอย่าง heading h2

ตัวอย่าง heading h3

ตัวอย่าง heading h4

ตัวอย่าง heading h5

ตัวอย่าง heading h6

ข้อสังเกตคือ

1.จะเห็นได้ว่า tag <h1>  จะมีตัวหนังสือที่ใหญ่สุดส่วน h6 จะมีตัวหนังสือที่เล็กที่สุด

2.เมื่อเปิด tag <h>...</h> ก็จะมีการปิด tag อยู่เสมอ

ต่อมารู้จักกับ tag <p>...</p>

Tag <p>...</p> ใช้เพื่อให้ข้อความที่เราจะเขียนอยู่เป็นหมวดหมู่

tag <p>...</p>  สามารถใส่ข้อความได้และมีการเว้นบรรทัดให้เอง
ไม่ว่าข้อความจะมีการเว้นวรรคยาวแค่ไหน tag <p>...</p> ก็จะจัดให้อยู่ช่องมีการเว้นวรรคเพียงช่องเดียวเท่านั้น

ตัวอย่างข้อ tag <p>...</p>

<p>ข้อ        ความ      นี้    อยู่   ใน  tag p</p>

ผลที่ได้คือ

ข้อความนี้อยู่ใน tag p

ข้อสังเกตคือ

1.จากที่มีการเว้นวรรคหน่างกันแค่ไหน tag <p>...</p> ก็จะจัดรูปใหม่ให้ข้อความอยู่ติดกันเสมอ

2.เอาเป็นว่าขอพูดที่เดียวเลยละกัน ทุก tag จะต้องมี tag ปิด เสมอ

รู้จักกับ tag <a>...</a>

tag <a>...</a> เป็น tag ที่ไว้สำหรับลิงค์ข้อความ tag <a>...</a> จำเป็นต้องมี Attributes คือ href เพื่อใช้ลิงค์ไปยังที่ๆต้องการ
ในที่นี้เป็นการ link ไปยังเว็บ www.google.com


<a href="https://www.google.com/">กดที่นี้ เพื่อลิงค์ไปยังเว็บ google.com</a>

ผลที่ได้คือ

กดที่นี้ เพื่อลิงค์ไปยังเว็บ google.com

ข้อสังเกตคือ

1.ตัวหนังสือจะมีขีดเส้นใต้ขึ้นมา
2.เมื่อเอาเมาส์ไปชี้เมาส์จะเปลี่ยนเป็นรูปมือ
3.เมื่อคลิกแล้ว ก็จะไปยังหน้าเว็บไซต์ google ตามที่เราเขียนโค้ดไว้

ต่อมารู้จักกับการใส่รูปภาพในเว็บ

การใส่ภาพในเว็บต้องใช้ tag <img />

tag <img /> มี Attributes เพื่มเติมคือ src ,alt, width, height

src = ตำแหน่งรูปภาพนั้นๆ

alt = หากว่ารูปภาพไม่แสดงจะปรากฏข้อความแทน

width = ความกว้างของรูปภาพ 

height = ความสูงของรูปภาพ

width, height จะใช้เป็น px ตามตัวอย่างก็ได้ หรือ จะใช้เป็น % ก็ได้

หรือจะใช้ auto ก็ได้ 

ตัวอย่าง

<img src="https://scontent.fbkk5-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/10346609_812954372056076_2844667058622616239_n.jpg?oh=a2229272b4a41b624c1441987bb0eb4f&oe=564B10D2" alt="หากภาพไม่แสดงก็แสดงข้อความนี้" width="100px" height="auto"/>

ผลที่ได้คือ