ทำความเข้าใจโครงสร้าง HTML เพื่อปรับใช้ได้ด้วยตัวเอง


 
ด้วยความเข้าใจแบบง่ายๆ ของเราเอง HTML ก็คือ ภาษาหนึ่งที่เป็นเบื้องหลังทุกอย่าง ที่เราเห็นบนหน้าเว็บไซต์
หน้าตา html มีลักษณะเป็นชุดโค้ดคำสั่ง เขียนขึ้นมาเพื่อให้ Browser อ่านอีกทีเพื่อแสดงผลเป็นตัวหนังสือ
หรือรูปภาพต่างๆ บนหน้าเว็บไซต์ (Browser ก็คือ Safari, Google Chrome, Internet Explorer ต่างๆ)

หน้าตาและโครงสร้างของ html จะมีสัญลักษณ์ ประเภท เครื่องหมายน้อยกว่า(<) เครื่องหมายมากว่า(>) ขีดทับ(/) ต่างๆ

ซึ่งเราจะเรียกว่า แท็ก เปิด กับ แท็ก ปิด 

 

เช่น <b>……….</b> 

แท็ก เปิด คือ <b>  

แท็ก ปิด คือ </b> (แท็ก ปิด จะมีเครื่องหมาย / เพิ่มขึ้นมา) 

ตามตัวอย่าง การใส่ แท็ก b คือการกำหนดให้ตัวหนังสือที่อยู่ภายใน แท็ก เป็นตัวหนาขึ้นมานั่นเอง

 

โครงสร้างหลักของ HTML มีดังนี้

<html>

 <head>

   <title>ตรงนี้ใส่หัวข้อเรื่องของเว็บไซต์ เช่น Home, About, Contact…..</title>

 </head>

<body>

ตรงนี้ใส่เนื้อหาเว็บไซต์ ที่มีโค้ด html ต่างๆ เช่น <b>…..</b>

</body>

</html>

 

หมายความว่า เวลาเราใส่ tag คำสั่ง หรือเนื้อหาต่างๆ เราก็จะใส่ตรง head กับ body

ในส่วนของ head จะมี tag title มันคือส่วนที่ให้เราใส่ หัวข้อเรื่องของเว็บไซต์ จะแสดงผลที่ส่วนหัวข้อเว็บ

และชุดคำสั่งอื่นๆ ที่จะไม่แสดงผลบนหน้าเว็บไซต์โดยตรง แต่เป็นส่วนสำคัญในการกำหนดรูปแบบโครงสร้างเว็บ
เช่น กำหนด link ตัวหนังสือทั้งหมดในเว็บเป็น font หรือ สีที่ต้องการ, ความกว้าง ความสูงของ footer
และอื่นๆ อีกมากมาย

ในส่วนของ body คือ เนื้อหาที่จะแสดงผลบนหน้าเว็บไซต์

 


 
เช่น ถ้าเราใส่โค้ดแบบด้านบน

หัวข้อเว็บคือคำว่า Home อยู่ใน tag title และอยู่ใน head อีกที

เนื้อหาของเว็บคือคำว่า Sample website โดยมี แท็ก b ครอบอยู่ ทำให้คำว่า Sample website เป็นตัวหนา
และอยู่ใน แท็ก body อีกที

 


 
ผลที่ได้ดังนี้ 

คำว่า Home ก็จะไปโชว์อยู่ด้านบนในส่วนของหัวข้อเว็บไซต์

คำว่า Sample website ก็จะแสดงผลบนหน้าเว็บ 

 

แต่ถ้าเราต้องการตกแต่ง รูปแบบตัวหนังสือ สีตัวหนังสือ เราก็ใช้ แท็ก font

<font>……</font> และใช้ attribute (แอตทริบิวท์) กับ value เป็นตัวกำหนดรูปแบบเพิ่มเติม
 

 

 
จากตัวอย่างด้านบน color และ face เรียกว่า attribute ส่วน #808080 (สีเทา) และ Century Gothic
(ชื่อ font) เรียกว่า value

ซึ่งทั้งหมดจะอยู่ใน แท็ก <font……> ตามด้วยคำว่า Sample website และค่อยปิดด้วย แท็ก ปิด </font>

ส่วนแท็ก b ก็จะครอบ แท็ก font อีกที เพื่อให้คำว่า Sample website เป็นตัวหนา

 

ทั้งหมดนี้คือ โครงสร้างหลักๆของ html

 

ทีนี้เราจะมาลองใช้โค้ด ที่น่าจะได้ใช้บ่อยๆ และเห็นบ่อยๆ สามารถแก้ไข html ได้ด้วยตัวเอง เอาไปปรับแต่ง
website, blog หรือ ร้านค้าบน amazon ในส่วนของรายละเอียดสินค้าให้ตัวหนังสือดูสบายตาได้

 

แต่มาดูกันก่อนว่ามี แท็ก อะไรบ้าง

<b>……</b> ทำตัวหนา

<i>……</i> ทำตัวเอียง

<u>……</u> ขีดเส้นใต้

<strike>……</strike> สร้างเส้นขีดฆ่าตัวหนังสือ

<strong>……</strong> ทำให้ตัวหนา มันก็ดูจะคล้ายๆ แท็ก <b> 
 

<h1>……</h1> ขนาดตัวอักษร แท็ก heading h1-h6,  h1 คือใหญ่สุด

<font size=“7”>……</font> ถ้ากำหนดขนาดตัวอักษรด้วยแท็ก font, 7 คือใหญ่สุด

<font color=“grey”>……..</font> หรือ <font color=“#808080”>…..…</font>

<font face=“Century Gothic”>…..…</font>

 

การขึ้นบรรทัดใหม่

</br> 

เป็นการขึ้นบรรทัดใหม่ 1 บรรทัด ถ้าต้องการหลายบรรทัด ก็ใช้แท็ก <br />
ซ้ำๆกันตามจำนวนที่ต้องการ ตามตัวอย่างด้านล่าง
 

 

 
 
<p>……</p> 

แท็ก p คือ สำหรับการขึ้นย่อหน้าใหม่เหมือนกัน แต่จะครอบกลุ่มข้อความแต่ละย่อหน้าไปเลย แล้วโดยปกติแท็ก p
จะเป็นการขึ้นบรรทัดใหม่โดยมีการเว้นบรรทัดอยู่แล้ว

 

<p align=“left”>……</p> จัดตำแหน่งให้ข้อความชิดซ้าย

<h1 align=“center”>……</h1> จัดตำแหน่งให้ขนาดตัวอักษร h1 อยู่ตรงกลาง

<h2 align=“right”>……</h2> จัดตำแหน่งให้ขนาดตัวอักษร h2 ชิดขวา

<h3 align=“justify”>……</h3> จัดตำแหน่งให้ขนาดตัวอักษร h3 มีขอบซ้ายขวาที่เสมอกัน

(หมายความว่า เพื่อให้ข้อความที่มีหลายๆบรรทัด มีขอบซ้ายขวาที่เสมอกัน)

align ก็คือ attribute

left, center, right, justify ก็คือ value

 

การเว้นวรรค

&nbsp; คือ เว้นวรรค 1 ครั้ง

&nbsp;&nbsp; ก็คือ เว้นวรรค 2 ครั้ง

จะเว้นกี่ครั้ง ก็ใส่ &nbsp; ซ้ำๆไป

 

การใส่รูปภาพ จะเป็นนามสกุล jpg, gif หรือ png ก็ได้

<img src=………….…/>  นี่คือแท็กของการใส่รูปภาพ

<img src=“images/sample.jpg”/> นี่คือตัวอย่างการนำไฟล์รูปภาพมาวางในแท็ก

ไฟล์ภาพชื่อ sample.jpg จะอยู่ในโฟลเดอร์ชื่อ images ซึ่งโฟลเดอร์นี้ จะอยู่ในชั้นเดียวกันกับไฟล์เว็บไซต์
ก็คือไฟล์ index.html 

การสร้างเว็บไซต์ตั้งแต่เริ่มจริงๆ เราต้องสร้างไฟล์ index.html เป็นไฟล์หน้าแรก เพื่อที่ browser
จะอ่านมันเป็นหน้าแรก เช่น www.hellobellta.com กับ www.hellobellta.com/index.html
เปิดมาใน browser ใดๆ หน้าตาของเว็บก็จะเหมือนกัน

โฟลเดอร์ชื่อ images คือ โฟลเดอร์ที่เก็บรูปภาพ ถ้าใส่รูปภาพชื่อ sample.jpg ไว้ในนี้ เราก็ใช้
images/sample.jpg วางในแท็ก

ถ้าไฟล์ภาพที่เราต้องการใช้ อยู่ในโฟลเดอร์อื่น หรือที่อื่น ที่ไม่ใช่ชั้นเดียวกับ ไฟล์ index.html เราก็ใส่ชื่อโฟลเดอร์นั้น
ตามไปเรื่อยๆ จนกว่าจะเจอไฟล์ที่ต้องการเรียกใช้ แต่ส่วนใหญ่ คนทำเว็บจะนำไฟล์มาวางไว้ในชั้นเดียวกันอยู่แล้ว
เพื่อที่จะได้เป็นระเบียบ ไม่สับสน

แต่ถ้าใน โฟลเดอร์ images มีโฟลเดอร์ชื่อ photo อยู่ข้างในอีกที แล้วไฟล์ภาพชื่อ sample.jpg อยู่ใน
โฟลเดอร์ photo เราก็ใช้ images/photo/sample.jpg วางในแท็ก

และถ้าเป็นการเขียนลิงค์ไปยังไฟล์นอกเว็บไซต์ เราก็เขียนเต็มๆ เช่น
http://www.hellobellta.com/images/sample.jpg
 

แต่ไม่ควรเขียนลิงค์เต็มสำหรับการลิงค์ไปยังไฟล์ที่อยู่ในเว็บไซต์เดียวกัน เพราะจะทำให้แก้ไขยาก เช่น
ถ้ามีการเปลี่ยนโดเมน เราก็จะต้องมาเปลี่ยนโดเมนที่เราเขียนไปแล้วทั้งหมดทุกหน้า ก็คือให้ใช้แค่
images/sample.jpg 

 

ขนาดรูปภาพ

<img src=“images/sample.jpg”  width=“200” height=“100” />

จริงๆเราจะกำหนดความกว้าง หรือความสูง อย่างใดอย่างหนึ่งก็ได้ แล้วขนาดอีกด้านจะปรับตามขนาดของรูปอัตโนมัติ

 

การจัดตำแหน่งรูปภาพ

<img src=“images/sample.jpg”  align=“left”/>

Left= จัดภาพไว้ด้านซ้ายของตัวหนังสือ

Right= จัดภาพไว้ด้านขวาของตัวหนังสือ

Top = ตัวหนังสืออยู่บรรทัดบนของภาพ

Middle= ตัวหนังสืออยู่บรรทัดกลางของภาพ

Bottom = ตัวหนังสืออยู่บรรทัดล่างของภาพ

 

Link

<a href=…………….>………….</a>  นี่คือแท็กการใส่ link

เช่น <a href=“contact.html”>ติดต่อเรา</a> 

หมายความว่า เราจะเห็นคำว่า ติดต่อเรา พอเราคลิกที่คำว่า ติดต่อเรา หน้า contact.html ก็จะเปิดขึ้นมา

 

ถ้าจะเปลี่ยนสี link

<a href=“contact.html”><font color=“grey”>ติดต่อเรา</font></a>

ให้ใส่แท็ก font กับ attribute color ครอบคำว่า ติดต่อเรา, คำว่า ติดต่อเรา ก็จะกลายเป็น link สีเทา

 

Link รูปภาพ

<a href=“about.html”><img src=”images/sample.jpg” /></a>

เราก็เอา ไฟล์รูปภาพพร้อมแท็กมาวางในตำแหน่งแทนคำว่า ติดต่อเรา พอเราคลิกที่รูปภาพ หน้าเว็บ about.html
ก็จะเปิดขึ้นมา

 

Link แล้วเปิดหน้าต่างใหม่ ใช้ attribute target

<a href=“about.html” target=“_blank”>เกี่ยวกับเรา</a>

<a href=“about.html” target=“_blank”><img src=“images/sample.jpg” /></a>

 

Value ก็คือ

_blank หมายถึงเปิดหน้าต่างใหม่

_parent หมายถึงเปิดในหน้าต่างเดิม

แต่ส่วนใหญ่จะใช้ _blank เพราะคนส่วนใหญ่ต้องการให้เปิดหน้าต่างใหม่ โดยคงหน้าเดิมไว้ แต่บางครั้ง
ก็ต้องการให้เปิดทับหน้าเดิมไปเลยเหมือนกัน ก็ควรเลือกใช้งานให้เหมาะสม 

 

Link ดาวน์โหลดเอกสาร

<a href=“download/etsy.pdf”>ดาวน์โหลดไฟล์ PDF</a>

เราก็จะเห็นคำว่า ดาวน์โหลดไฟล์ PDF ขึ้นมาบนหน้าเว็บ พอเราคลิกที่คำนั้น

ไฟล์ download/etsy.pdf ก็จะปรากฎขึ้นมา

 

ทีนี้ลองเขียนโค้ดประกอบร่างขึ้นมาเป็นตัวอย่างซักอันนึง สำหรับบทความนี้

<html>

<head>
<title>Home</title>
</head>

<body>

<b>Sample website</b>
<br>

<i>Sample website</i>
<br>

<u>Sample website</u>
<br>

<strike>Sample website</strike>

<h1 align=“center”><b><i><u><strike><font color=“#808080” face=“Century Gothic”>Sample website</font>
</strike></u></i></b></h1>

<img src= “http://blog.belltastudio.com/wp-content/uploads/2018/04/giftbag/GiftBaG2018.jpg” width=“500” />

<p><a href=“http://blog.belltastudio.com” target=“_blank”><font color=“orange”>Our story</font></a></p>

</body>

</html>

 
เปรียบเทียบ html กับ การแสดงผลหน้าเว็บไซต์ ที่ภาพด้านล่าง
 

 
 
วิธีที่ดีที่สุดที่จะทำให้เข้าใจก็คือ ทดลอง

โค้ดไหนที่เราไม่รู้จัก เพิ่งเคยเห็น ก็เอาไปเสิร์ชใน google ได้ มีคนเขียนไว้เยอะมาก 

ไม่รู้จะวางโค้ดตรงไหน ก็ลองสังเกตโครงสร้างของ html ดู แล้วจะเข้าใจว่า มันมีโครงสร้างแบบเดียวกัน

 

ในส่วนของ เว็บขายของ Amazon.com  

ใช้แท็ก <br> เพื่อขึ้นบรรทัดได้ ก็ทำให้รายละเอียดสินค้าของเราอ่านง่ายสบายตาขึ้นมามากๆแล้ว 

ไม่ต้องใส่แท็ก html, head หรือ body ใดๆ เพราะ Amazon ให้เราแก้ไขแท็กภายใน body ได้เล็กน้อยเท่านั้น เช่น 

SIZE<br> 

Base : 25.5 x 19 cm / 10 x 7.5 inches<br> 

Height : 30.5 cm / 12 inches (unrolled)<br> 

Handles strap : 11 inches<br> <br> <br> 

จากตัวอย่าง ทำให้รายละเอียดขนาดของสินค้าของเราขึ้นบรรทัดใหม่ ไม่ติดกันจนอ่านไม่รู้เรื่อง

เพราะถ้าไม่ใส่แท็ก <br> ตัวหนังสือจะติดๆกันแบบนี้

SIZE Base : 25.5 x 19 cm / 10 x 7.5 inches Height : 30.5 cm / 12 inches (unrolled) Handles strap : 11 inches

 

ในส่วนของ Blog ที่เราเขียนใน wordpress.org ทั้งหลาย

เราก็จะใช้โค้ดต่างๆ ข้างบน ที่เขียนมาแล้ว ปรับแก้ให้สวยงาม แต่ที่เราชอบมาก ก็คือ การนำรูปภาพมาวางใน blog
โดยที่ไม่ต้อง upload รูปภาพเข้ามาโดยผ่าน library ของ wordpress แต่เอารูปไปไว้ที่ hosting เลย
แล้วเขียนโค้ด link รูปภาพมาแสดงบนหน้าเว็บแทน เช่นเดียวกันไม่ต้องใส่แท็ก html, head หรือ body ใดๆ
เพราะ theme wordpress ต่างๆที่เราใช้ มันคือโครงสร้าง html สำเร็จรูปที่มาในรูปแบบของภาษา php
เราแค่ปรับแต่งแก้ไข ในส่วนของเนื้อหาเฉยๆ เช่น

<img src=“http://blog.belltastudio.com/wp-content/uploads/2018/04/giftbag/GiftBaG2018.jpg”  width=“900” />

ชื่อไฟล์ภาพคือ http://blog.belltastudio.com/wp-content/uploads/2018/04/giftbag/GiftBaG2018.jpg ขนาดกว้าง 900 pixel
 
*เราเข้าใจว่า ภาษา php ก็เกิดจากโค้ด html นั่นแหละ แต่ไม่รู้ใช่รึป่าวนะ ^^
 
 
 

(Visited 35 times, 1 visits today)

Share your thoughts