ทำเว็บไซต์จากแม่แบบฟรี 5 (โค๊ด html การใส่ข้อความ)

ในการทำเว็บไซต์จากแม่แบบฟรีนั้น จำเป็นที่จะต้องรู้จักโค๊ด html อยู่บ้างเหมือนกัน เพราะในการจัดการบางอย่าง นอกเหนือจากการเปลี่ยนข้อความ และรูปภาพแล้ว ก็ยังมีการแทรกเฟรม หรือการเชื่อมโยง ที่นับว่าสำคัญอยู่
           มีคนเคยเปรียบการทำงานของการเขียนโค๊ดในการทำเว็บไซต์นี้ไว้ว่า เหมือนกับเราเลี้ยงสุนัขไว้ตัวนึง เมื่อเราให้อาหารมัน แล้วสั่งให้มันทำอะไรบางอย่างออกมาให้เราดู
           ทั้งข้อความ รูปภาพ และอื่น ๆ ที่ประกอบกันขึ้นมาเป็นหน้าเว็บเพจนั้น ล้วนเกิดจากการทำงานอยู่เบื้องหลังของโค๊ดในภาษาต่าง ๆ กัน แล้วแสดงผลออกมาทางเว็บบราวน์เซอร์
          ผมขอยกตัวอย่าง ถ้าใครเคยใช้โปรแกรม Office เช่น โปรแกรม word และ excel มาก่อน คงเคยใช้คำสั่ง B กันนะครับ คำสั่งนี้ในโปรแกรม Office จะทำให้ตัวอักษรหนาขึ้นใช่มั๊ยครับ แต่ถ้าเราต้องเขียนด้วยโค๊ดภาษา html ก็จะออกมาในรูปแบบด้านล่างนี้ครับ
          <b> ข้อความนี้ใหญ่ขึ้นภายใต้คำสั่ง Tag เปิด และปิดนี้ครับ</b>
           ทั้งข้อความ รูปภาพ และอื่น ๆ ที่ประกอบกันขึ้นมาเป็นหน้าเว็บเพจนั้น ส่วนใหญ่จะอยู่ภายใต้แท็กเปิด และแท๊กปิด ที่เลือกว่าภาษา html ซึ่งรูปแบบการเขียนโค๊ดจะเป็นภาษาอังกฤษ ซึงถ้าเพื่อน ๆ คนไหนหัดท่องจำภาษาอังกฤษบ่อย ๆ น่าจะได้เปรียบ เพราะน่าจะจดจำโค๊ดเหล่านี้ได้ดี และไวหน่อย ส่วนผมเองนั้นความจำไม่ค่อยดี จะทำเว็บไซต์แต่ละที บางทีนึกไม่ออก ต้องดูโค๊ดที่เคยบันทึกไว้ทีนึง นับว่าเสียเวลาจริง ๆ
           เดี๋ยวผมจะขอทิ้งทวนในหัวข้อการทำเว็บไซต์จากแม่แบบฟรี โดยการแนะนำโค๊ดที่จำเป็นต้องใช้ไว้ให้เพื่อน ๆ ก็แล้วกันนะครับ
1.<p>ข้อความ หรือเนื้อเรื่อง</p>
ภายในคำสั่งแท็กเปิด และปิดนี้จะเป็นการขึ้นย่อหน้าใหม่ ที่เราจะใช้เขียนข้อความทั่วไป ถ้าจะให้เปรียบเทียบ ก็คงเปรียบได้กับการใช้งานโปรแกรม Office จำพวก Word หรือ Excel ที่กดปุ่มขึ้นบรรทัดใหม่โดยการกดปุ่ม Enter
2.<br/>
 เป็นการขึ้นบรรทัดใหม่เหมือนกัน มีแต่แท็กเปิด ไม่มีแท็กปิด
ตัวอย่าง
.      
<p>เป็นการง่ายยิ้มได้ไม่ต้องฝืน<br/> เมื่อชีพชื่นเหมือนบรรเลงเพลงสวรรค์<br/>แต่คนที่ควรชมนิยมกัน<br/> ต้องใจมั่นยิ้มได้เมื่อภัยมา</p>

รูปภาพที่ 5.1 โปรแกรม eslipse

           ดูจากรูปที่ 5.1 นะครับ มันค่อนข้างจะเล็กไปหน่อย แต่คงไม่เป็นอะไรมั๊ง
ผมพิมพ์บทความที่ตัดมาจากบทกลอนท่อนนึง ของนวนิยาย มรสุมแห่งชีวิต ของหม่อมหลวงวิจิตร วาทะการ เพื่อแทรกไปยังตำแหน่งที่ผมต้องการ
          ในที่นี้ผมพิมพ์ลงไปในTag <p> </p> และทำการขึ้นบรรทัดใหม่ด้วย Tag <br/> ลองเปิด Browser ดู จะได้ดังรูปที่ 5.2

รูปภาพที่ 5.2 โปรแกรม eslipse

          เพื่อน ๆ ก็ลองทำกันดูนะครับ
          หาตำแหน่งที่เราต้องการใส่ข้อความ ถ้าตรงไหนเป็นข้อความ ตัวโปรแกรม eslipse จะแสดงออกมาเป็นสีดำ เพียงจำภาษาอังกฤษที่เป็นข้อความในหน้าเว็บเพจที่เราเปิดดูจาก Browser แล้วแทนที่ด้วยภาษาของเราลงไปตามตำแหน่งที่เราต้องการ
          เสร็จแล้ว กดปุ่ม Ctrl พร้อมกับ ปุ่ม S ในแป้นคีย์บอร์ด เพื่อทำการ Save ข้อมูล
          แล้วเปิด Browser ดูหน้าเว็บเพจ ถ้าเราเปิดไว้แล้วก็ใช้ปุ่ม รีเฟรซดูก็ได้ครับ จะได้ไม่ต้องเปิดปิดหน้า Browser บ่อย ๆ

รูปภาพที่ 5.3 โปรแกรม eslipse

          รูปที่ 5.3 เป็นการแสดงตำแหน่งปุ่ม refresh ที่หน้าการแสดงผลเว็บเพจด้วย Browser
          ปุ่มนี้ใช้สำหรับเวลาเราแก้ไขโค๊ดและ Save เสร็จเรียบร้อยแล้ว เวลาเราเรียกดูหน้าเว็บเพจเราไม่ต้องคอยเปิดปิดอยู่ตลอดเวลา เพียงเรากดปุ่ม refresh ทุกอย่างที่เราเขียนใหม่ หรือแก้ไขก็จะแสดงการเปลี่ยแปลงทันที
          ต้องขอโทษเพื่อน ๆ ด้วยครับผมข้ามขั้นตอนไปอย่างนึง
          แม่แบบที่ดาวน์โหลดมาใช้งานนั้น เริ่มแรกเลยข้อความต่าง ๆ จะเป็นภาษาอังกฤษ ในการที่เราจะนำมาใช้เป็นภาษาไทยได้เราต้องเปลี่ยนโค๊ดตรงนี้เสียก่อน ดูตามรูปที่ 5.4 ครับ




รูปภาพที่ 5.4 โปรแกรม eslipse

           รูปที่ 5.4 ให้สังเกตตรงคำว่า charset=
       ตรงคำ charset นี้จะเป็นตัวกำหนดในการใช้ภาษาครับ ถ้าเพื่อน ๆ สนใจในด้านนี้ก็ลองหาศึกษาเพิ่มเติมดูนะครับ
          ไม่ว่าแม่แบบที่เราจะนำมาใช้ จะถูกกำหนดมาในรูปแบบไหนก็ตาม ให้เราเปลี่ยนโค๊ดตรงนี้เป็น charset=windows-874 ดูตัวอย่างเปรียบเทียบระหว่างรูปที่ 5.4 กับรูปที่ 5.5 ครับ

รูปภาพที่ 5.5 โปรแกรม eslipse

          หลังจากเปลี่ยนโค๊ดภาษาแล้วก็ทำการ Save โดยการกดปุ่ม Ctrl กับ ปุ่ม S ในแป้น คีย์บอร์ดพร้อมกัน