พื้นฐานการทำเว็บไซต์

ลองทำเว็บไซต์แบบง่ายๆ

ลองสร้างเว็บด้วยเครื่องมือง่ายๆที่มีอยู่ในเครื่องคอมพิวเตอร์ทุกเครื่องอย่าง notepad เพื่อให้เข้าใจว่าเว็บไซต์นั้นทำงานอย่างไร

บทความนี้เราจะมาลองทำเว็บไซต์กัน โดยการทำเว็บไซต์ในบทความนี้จะเป็นแบบพื้นฐานเพื่อให้คุณได้เข้าใจถึงการทำงานของเว็บไซต์ ซึ่งเราจะใช้โปรแกรม notepad ซึ่งจะมีอยู่ในทุกเครื่องที่ใช้ระบบ window

โปรแกรม notepad เป็นโปรแกรมที่อยู่ในประเภท Text editor ใช้ในการแก้ไขข้อความ มีความสำคัญมากในการทำเว็บไซต์ เพราะจริงๆแล้วเว็บไซต์ที่เราเห็นว่ามีหน้าตาสวยงาม มีรูปภาพ หรือมีการเคลื่อนไหวต่างๆ ซึ่งจริงๆแล้วตัวเว็บไซต์นั้นก็ประกอบด้วย ตัวหนังสือมากมายรวมกันอยู่เป็นไฟล์(เราจะเรียกว่าเว็บเพจ) แต่มีการถูกแปลงที่เครื่องของคุณให้เป็นรูป หรือหน้าตาตามที่เราเห็น

สำหรับขั้นตอนการสร้างนั้นก็ง่ายๆดังนี้

1. ให้คุณเปิดโปรแกรม Notepad ขึ้นมา โดยไปที่ All programs > Accessories > Notepad

ซึ่งโปรแกรม notepad จะมีหน้าตาแบบนี้

2. ให้คุณพิมพ์ข้อความต่อไปนี้ ใน notepad

<html>
    <head>
        <title>ทดลองทำเว็บไซต์แบบง่ายๆ</title>
    </head>
    <body>
             Hellomyweb นี่คือเว็บไซต์แรกของฉัน
    </body>
</html>

ข้อความที่คุณพิมพ์ไปนั้นเราเรียกว่า SOURCE CODE เป็นภาษาคอมพิวเตอร์ เรียกว่าภาษา HTML ซึ่งใช้ในการจัดหน้าของเว็บเพจ คุณสามารถศึกษารายละเอียดของภาษา html ได้ที่หัวข้อของ html

เมื่อพิมพ์เสร็จแล้วให้เราเลือก save as จะมีหน้าต่างออกมา ให้เราใส่ชื่อไฟล์เป็น index.html และเลือกชนิดไฟล์ (save as type) เป็นแบบ All files จากนั้นก็ save ไฟล์


เราจะได้ไฟล์มาดังรูปข้างล่าง ให้เราคลิกเพื่อเปิดไฟล์ index.html เราก็จะเห็นเว็บไซต์แรกของเรา ซึ่งจะถูกเปิดโดยโปรแกรม internet explorer (ต่อไปนี้เราจะเรียกว่า Web Browser)


จากรูปจะบรรยายการทำงานของ html ที่เขียนเอาไว้ ซึ่งจะเห็นว่าตัวหนังสือที่อยู่ใน <title>....</title> จะแสดงที่ส่วนหัวของโปรแกรม internet explorer และในส่วนของ <body>....</body> จะแสดงในส่วนแสดงผลของโปรแกรม

เราก็ได้เห็นเว็บไซต์ที่เราทำเองไปแล้ว ซึ่งในบางเครื่องที่ลองทำเว็บอาจมีปัญหาได้ เราจะมาลองดูว่าจะแก้ปัญหาอย่างไร

1. เปิดไฟล์ไม่ได้ ให้เราลองเปิดโดยวิธีนี้แทน

เปิดโปรแกรม internet explorer ไปที่ file > open > browse เลือกไฟล์ที่ เรา save และกดที่ open


2. เปิดแล้วเป็นภาษาต่างดาว อ่านไม่ออก จากรูปให้เราไปที่ file > view > encoding > thai


หลังจากที่เราลองเขียน source code ไปแล้ว เราจะลองไปดูเว็บไซต์อื่นกันบ้างว่าเค้าเขียน source code กันอย่างไร ซึ่งการดู source code ของเว็บไซต์อื่นก็ทำได้โดย คลิกขวาที่เว็บที่เรากำลังดูอยู่ เลือก view source


เราอาจจะเห็นว่าทำไมเว็บอื่น source code เยอะมาก ซึ่งเราก็ไม่ต้องตกใจครับจริงๆแล้ว source code พวกนี้เราไม่ได้ใช้ notepad เขียน เพราะจะลำบากในการเขียนมากแต่ที่ในบทความนี้ให้ใช้ notepad เพราะเป็นโปรแกรมที่มีอยู่ในทุกเครื่อง จริงแล้วเราจะใช้โปรแกรมช่วยเขียน เช่น Dreamweaver , Atom เป็นต้น ซึ่งในบทความต่อไปจะเป็นการลองใส่รูปในเว็บไซต์เพื่อเพิ่มสีสันในเว็บของเรา


เลื่อนขึ้นด้านบน