Mitjy's Story
Do Did and Done
Web Beginner ตอนที่ 1 - HTML ภาษาสร้างโลก
Oct 16, 2015 - 11:10 AM

สำหรับใครที่ทำเว็บไซต์ คงไม่มีใครที่ไม่รู้จักภาษา HTML หรือชื่อเต็ม ๆ ของมันคือ HyperText Markup Language ดูเท่ห์ไม่เบา

วันนี้ผมจะพูดถึงพื้นฐานของภาษา HTML ล้วน ๆ จะไม่พูดรวมกับภาษาอื่น ๆ เลย (ซึ่งมันจะเป็นพื้นฐานสุด ๆ หากใครที่พอเป็นอยู่แล้ว อาจจะรู้สึกเบื่อ ๆ นะครับ) ปัจจุบันภาษา HTML เป็นเวอร์ชั่น 5 ซึ่งก็แตกต่างจากเวอร์ชั่นก่อน ๆ พอสมควร

ภาษา HTML เป็นภาษาที่ใช้เป็นโครงสร้างพื้นฐานของเว็บไซต์ ซึ่งถ้าเทียบกับการสร้างบ้าน HTML ก็เหมือนกับเป็นเหล็กและปูนที่เทลงไปตอนสร้างบ้าน โดยลักษณะของ HTML จะเป็นแบบนี้ครับ สามารถคลิกขวาทีหน้าเว็บ แล้วกด View Source ดูได้นะครับ 

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>

   <h1>Header</h1>
   <p>
      Text Line 1<br/>
      Text Line 2<br/>
   </p>

   </body>
</html>

ซึ่งถ้ามองผ่านเว็บแล้ว จะได้ผลลัพธ์ แบบนี้ครับ

จะเห็นว่าในโครงสร้างเหล่านี้ประกอบด้วย < และ > เต็มไปหมด สิ่งเหล่านี้เป็นพื้นฐานครับ เรียกมันว่า Tag หรือ HTML Tag ซึ่งจะแบ่งออกเป็นสองแบบใหญ่ ๆ ได้แก่

  1. Tag แบบมีขอบเขต ลักษณะของ Tag ประเภทนี้จะเป็น Tag ทีมีส่วนที่เปิด <html> และส่วนที่ปิด </html>
  2. Tag แบบไม่มีขอบเขต เป็น Tag ที่ใช้ไปเฉย ๆ ได้แก่ <br/> เป็นต้น

ใน HTML สมัยนี้ค่อนข้างฟรี เพราะเราสามารถกำหนด Tag ขึ้นมาเอง เช่น <smith> </smith> แบบนี้ก็ใช้งานได้ แต่มันจะติดที่ว่า Browser หรือโปรแกรมที่ใช้ไว้ดูเว็บ จะอ่านไม่เข้าใจเท่านั้นเอง

โครงสร้าง HTML แบ่งออกเป็น 2 ส่วน

  1. Header
  2. Body

ถ้าใครที่เขียน HTML จะต้องเริ่มที่โครงสร้างนี้

<!DOCTYPE html>
<html>
   <head>
   </head>

   <body>
   </body>
</html>

ในส่วนของ Tag Head คือส่วนที่เราจะใช้ไว้เขียน ข้อมูลของเว็บไซต์นี้เช่น ชื่อเว็บไซต์ ไอคอนของเว็บไซต์ การกำหนดวิธีการแสดงผล

 

แต่ส่วนที่ผมคิดว่ายากสำหรับคนที่เริ่มต้นใหม่ น่าจะเป็นส่วนของ Body ครับ

ก่อนจะอธิบายเพิ่มเติมเรื่อง Body ขอเล่าถึงประวัติศาสตร์ความเป็นมาของการทำโครงสร้างของเว็บไซต์ในอดีตก่อนนะครับ

ยุคสมัยการใช้ Table

Table เป็นการทำโครงสร้างหนึ่งของ HTML นั่นคือการแสดงผลตาราง ซึ่งในสมัยก่อนการทำเว็บจะใช้ HTML เฉย ๆ ซึ่งไม่ได้ยืดหยุ่นมากนัก การทำเว็บไซต์ก็เลยใช้ตารางในการกำหนดโครงสร้างของเว็บไซต์

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <table width="100%" border="1">
         <tr height="100">
            <td width="30%">LOGO</td>
            <td></td>
         </tr>
         <tr>
            <td>Left Menu</td>
            <td>
               <p>With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it.</p>
            </td>
         </tr>
      </table>
   </body>
</html>

ผลลัพธ์

ยุคสมัยปัจจุบัน Table Less

ปัจจุบันวิธีการขึ้นโครงสร้างของ HTML นั้นจะนิยมใช้ HTML + CSS ในการกำหนดโครงสร้างแทน ซึ่ง Tag ที่ใช้งานก็คือ <div> กับ <span> ครับ ซึ่งวิธีนี้จะเป็นวิธีที่ยากกว่าเพราะจะต้องเรียนรู้การใช้งาน CSS แต่วิธีนี้มีประสิทธิภาพสูงกว่าเพราะสามารถกำหนดรูปแบบได้อย่างอิสระต่างจากการใช้ Table

วิธีการขึ้นโครงสร้างแบบ DIV

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
      .logo {
         width:30%; 
         height: 100px; 
         background:#aaaaaa;
      }
      .left-menu {
         float:left; 
         width:30%; 
         background:#c5c5c5;
      }
      .content {
         float:left; 
         width:70%; 
         background:#dddddd;
      }
      </style>
   </head>
   <body>
      <div>
         <div class="logo">LOGO</div>
         <div>
            <div class="left-menu">Left Menu</div>
            <div class="content">
               <p>With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it.</p>
            </div>
            <div style="clear:both;"></div>
         </div>
      </div>
   </body>
</html>

ผลลัพธ์

 

ถ้าดูใน Source Code อาจจะเห็นว่ามันยาวกว่า แต่ว่าถ้าเราใช้งานรวมกับเทคโนโลยีต่าง ๆ แล้ว div สามารถย้ายไปไหนก็ได้โดยได้การเปลี่ยน CSS ไม่เหมือน Table ที่จะต้องมาแก้ในส่วนของโครงสร้าง เช่น

.left-menu {
	width:30%; 
	background:#c5c5c5;
}
.content {
	width:70%; 
	background:#dddddd;
}

ก็จะได้ผลลัพธ์ แบบนี้

 

DIV VS SPAN

ในการวางโครงสร้างนั้น ส่วนโครงสร้างที่นิยมใช้จะมีอยู่ 2 Tag ได้แก่ <div> และ <span>

ความแตกต่างของ Tag 2 ตัวนี้ ผมเทียบให้ดูเป็นรูปนะครับ จะค่อนข้างชัดเจนมาก

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
      div {background: #ff0000;}
      span {background: #00ff00;}
      </style>
   </head>
   <body>
      <div>DIV Area</div>
      <span>SPAN Area</span>
      <span>SPAN Area</span>
      <div>DIV Area</div>
      <div>DIV Area</div>
      <span>SPAN Area</span>
   </body>
</html>

ผลลัพธ์

อธิบายสั้น ๆ ก็คือ

DIV จะผูกติดกับ Layout ด้านนอก

SPAN จะผูกติดกับ Content ภายใน

 

สำหรับตอนที่ 1 ผมฝากพื้นฐานไว้ประมาณนี้นะครับ ใครมีคำแนะนำหรือว่าติชมอะไร คอมเม้นไว้ได้เลยนะครับ สำหรับตอนหน้าจะเป็นเรื่องของ CSS บ้างครับ laugh

 

 

 

 

Smith Krengkrud
Hi, I am a developer.