Mitjy's Story
Do Did and Done
อยากสร้างเว็บเป็น ต้องเริ่มต้นยังไง
Oct 03, 2015 - 11:10 AM

วันนี้มีโอกาสได้อธิบายวิธีการปรับแต่ง CMS (โปรแกรมทำเว็บสำเร็จรูป) ตัวหนึ่ง ให้คนที่ไม่เคยรู้เรื่องการพัฒนาเว็บฟัง ซึ่ง CMS ตัวนี้ด้านในค่อนข้างจะซับซ้อน และใช้ HTML ในการสร้างหน้าแต่ละหน้า ผลปรากฎว่า เค้าสามารถจะเริ่มต้นทำอะไรง่าย ๆ เช่นสร้างตาราง และปรับแต่งสีสันตัวอักษรต่าง ๆ ได้ 

ผมคิดว่าการที่คนจะทำเว็บได้นั้น มันเริ่มต้นแค่คำว่ารู้ หรือไม่รู้เท่านั้น

 

การทำเว็บทำได้แบบไหนบ้าง

การทำเว็บสามารถทำได้หลายรูปแบบ บางคนถนัดที่จะสร้างมันจากโปรแกรมเว็บสำเร็จรูป จำพวก Wordpress, Betrix, Joomla, Drupal ซึ่งวิธีการนี้ทำได้เร็ว ไม่จำเป็นต้องมีความชำนาญมากก็สามารถทำเว็บขึ้นมาได้ (หมายถึงในขั้นพื้นฐาน) แต่ที่ผมจะพูดถึงวันนี้จะเป็นการทำเว็บที่ไม่ได้ใช้โปรแกรมสำเร็จรูป แต่จะเป็นการขึ้นโครงสร้างเองทั้งหมด

 

จะทำเว็บต้องรู้อะไรบ้าง ?

การเขียนเว็บคือการเขียนโปรแกรมรูปแบบหนึ่ง เทคโนโลยีที่ใช้ ได้แก่

  1. HTML (Hypertext Markup Language) เป็นพื้นฐานในการทำเว็บ เว็บเกือบ 100% ใช้ภาษานี้ในการพัฒนา ซึ่งปัจจุบันพัฒนาเป็น HTML5 แล้ว
    <html>
      <head>
        <title>Hello</title>
      </head>
    
      <body>
        <div class="content">Hello I am Smith</div>
      </body>
    </html>

    ซึ่งจะได้ผลลัพธ์ประมาณนี้ เป็น หน้าเว็บเฉย ๆ ดูธรรมดา ๆ

     

  2. CSS (Cascade Style Sheet) ใช้สำหรับสร้างความสวยงามทำให้ HTML ดูดีขึ้นมา
    body {
      font-family: 'Tahoma';
    }
    
    .content {
      background-color: #c5c5c5;
      color: #ffffff;
    }

    พอเพิ่ม CSS ลงไปจะได้หน้าตาแบบนี้

  3. Java Script เป็นเหมือนตัวผสานทำให้ HTML มีลูกเล่นมากขึ้น สามารถควบคุม CSS ได้ด้วย
    function calculate() {
       return 5 + 5;
    }

     

เท่านี้จริง ๆ หรือ แล้วพวก PHP, Python, Ruby อะไรพวกนี้ล่ะ? ไม่ต้องตกใจครับ ภาษาพวกนี้เป็นภาษาที่ทำให้การแสดงผล สามข้อข้างบนดูฉลาดขึ้น บางคนอาจจะงงว่า ฉลาดยังไง ลองดูนี่ครับ

 

อันนี้เป็นภาษา HTML ธรรมดา เป็นการสร้างลิสรายการ ซึ่งมี 6 บรรทัด

<ul>
  <li>Smith Krengkrud</li>
  <li>Smith Krengkrud</li>
  <li>Smith Krengkrud</li>
  <li>Smith Krengkrud</li>
  <li>Smith Krengkrud</li>
  <li>Smith Krengkrud</li>
</ul>

 

ทีนี้ ถ้าเราใช้ภาษาพวก PHP, Python, Ruby เราสามารถเขียนแบบนี้ได้ (ตัวอย่างเป็น PHP)

echo '<ul>';
for($i=0;$i<6;$i++) {
  echo '<li>Smith Krengkrud</li>';
}
echo '</ul>';

จะได้ผลเช่นเดียวกันนั่นเอง ดังนั้นไม่ต้องตกใจ ว่าจะทำเว็บต้องรู้นู่น นี่นั่นเยอะแยะ จริง ๆ แล้ว เริ่มต้นได้จาก 3 อย่าง แรกได้เลยครับ (เอาแค่ ข้อ 1 กับ ข้อ 2 ก็ยังได้เลย)

 

แล้วเวลาจะทำเว็บใช้โปรแกรมอะไร เช่นจะพิมพ์งาน ก็พิมพ์ใน Microsoft Word ?

ในการเขียนเว็บนั้น เราจะอาศัยการเขียนภาษา HTML เป็นหลัก ดังนั้นเราสามารถเขียนได้ในโปรแกรม Text Editor ทั่ว ๆ ไปได้ เช่น NotePad (ที่แถมมากับ Window) เมื่อเขียนเสร็จแล้ว เซฟเป็นไฟล์ .html เช่นไฟล์ home.html เป็นต้น

** แนะนำ Text Editor ที่ดูดีโอเค ได้แก่ Sublime Text ครับ คลิกเข้าไปโหลดได้เลย เวอร์ชั่น 2 ฟรีนะครับ

 

ตัวอย่างไฟล์ที่เปิดด้วย Text Editor

ถ้าเปิดใน Google Chrome ล่ะ

เห็นไหมครับ ว่ามันต่างกันยังไง 

ลองเอาไปทำเล่น ๆ กันดูนะครับ สำหรับใครอยากหา Reference เพิ่มเติมก็สามารถหาได้จากที่นี่ครับ

 

Smith Krengkrud
Hi, I am a developer.