ตั้งชื่อโดเมนเนมอย่างไรให้เหมาะกับธุรกิจของตัวเองมากที่สุด

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

• ควรจะมีคำที่แสดงถึงสินค้าหรือบริการอย่างชัดเจน อ่านแล้วรู้ได้ทันทีว่าเป็นเว็บไซต์เกี่ยวกับอะไร ในขณะเดียวกันก็ต้องมีเอกลักษณ์เป็นของตัวเองด้วย เพราะชื่ออาจจะซ้ำและคล้ายกับธุรกิจอื่นได้ ตัวอย่างเช่น บริการการท่องเที่ยวส่วนใหญ่ จะมีคำว่า tour กับ travel ในชื่อโดเมน แต่สิ่งที่จะสร้างความแตกต่างก็คือชื่อ แบรนด์ธุรกิจนั่นเอง
• ควรเป็นชื่อที่จดจำง่าย สะกดง่าย ไม่ยาวจนเกินไป เวลาจะค้นหาในระบบเสิร์ชเอนจิ้น ก็พิมพ์ค้นหาข้อมูลได้ง่าย ไม่สับสน  โดยเฉพาะชื่อภาษาไทยที่ต้องสะกดเป็นภาษาอังกฤษ ถ้าจำง่าย สะกดง่ายก็จะเป็นผลดีกับลูกค้ามากกว่า ยกตัวอย่างเช่น เว็บไซต์ ManbetX ที่เป็นชื่อสั้นๆ แต่ได้ใจความ ทำให้เป็นที่จดจำต่อกลุ่มเป้าหมายได้ดีอีกด้วย
• เป็นชื่อที่มีความหมายและมีความน่าเชื่อถือ เพื่อภาพลักษณ์ของแบรนด์ อย่าพยายามสร้างความแปลก แตกต่างมากเกินไป เพราะอาจจะกลายเป็นความไม่น่าเชื่อถือได้  ที่สำคัญคือต้องไม่เลียนแบบชื่อธุรกิจดังๆ ด้วย
• การเลือกนามสกุลของโดเมน ก็ต้องเลือกให้เหมาะสมกับแบรนด์และธรกิจด้วย  ซึ่งนามสกุลในที่นี้ก็ได้แก่  .com , .net , .co.th ,.org  ยกตัวอย่างเช่น ถ้าเป็นธุรกิจออนไลน์ทั่วไป ก็ใช้ .com  ซึ่งมีความหมายครอบคลุมและเหมาะสมกับธุรกิจทุกประเภท เป็นต้น

สรุปการทำเว็บไซต์

    หลังจากที่เราได้ลองทำเว็บจากบทความข้างต้นไปแล้ว ซึ่งก็คงพอทำให้นึกภาพรวมของเว็บไซต์ได้ ในบทความนี้จะเป็นการสรุปการทำเว็บไว้อีกครั้ง

    1. ภาษา HTML 
    เว็บเพจนั้นสร้างมาจากภาษา HTML ซึ่งจะใช้ในการจัดรูปแบบของเว็บเพจว่าต้องการให้ ตัวอักษรมีขนาเท่าไหร่ จัดวางอยู่นะตำแหน่งไหน ให้รูปภาพอยู่ที่ตำแหน่งใด ซึ่งจำเป็นมากในการสร้างเว็บ ดังนั้นเราจึงควรรู้พื้นฐานของ HTML บ้าง ถึงแม้ว่าจะมีโปรแกรมอย่าง Dreamwerver ที่เข้ามาอำนวยความสำดวกในการเขียน HTML ให้เราแต่ตัวของ Dreamweaver เองก็ยังมีข้อจำกัดอยู่ ดังนั้นถ้าเรารู้ภาษา HTML ก็จะทำให้ข้อจำกัดนั้นหายไป 

    2. รูปภาพ 
    ภาพเพียงภาพเดียว อาจแทนคำพูด หลายล้านคำ ด้วยเหตุนี้การทำเว็บจึงไม่ขาดรูปภาพได้ เพราะนอกจากจะบรรยายเรื่องราวได้ดีแล้ว ยังทำให้เว็บของเราดูสวยงามขึ้นอีกด้วย 
ถึงแม้ว่าภาพจะบรรยายคำพูดได้ดี แต่ด้วยขนาดของมันก็ใหญ่กว่าตัวอักษรมากเช่นเดียวกัน ซึ่งถ้าเราใส่รูปในเว็บของเรามากก็จะทำให้เว็บของเราเปิดได้ช้าลง การเปิดเว็บไซต์ได้ช้าหรือเร็วเป็นเรื่องที่สำคัญมาก ดังนั้นเราจึงควรเลือกรูปภาพที่สามารถสื่อความหมายได้ดี ตกแต่งให้รูปสวยงาม และมีขนาดเล็กลงโดยไม่ทำให้คุณภาพของรูปเสียไป ซึ่งปัจจุบันมีโปรแกรมมากมายที่เข้ามาจัดการรูปภาพเช่น Photoshop , Gimp ดังนั้นเราจึงควรศึกษาข้อมูลเกี่ยวกับโปรแกรมพวกนี้เอาไว้ด้วยเพื่อเว็บของเราจะได้มีประสิทธิภาพ และความสวยงาม

    3. การใช้โปรแกรมสร้างเว็บเพจ 
    โปรแกรมที่ใช้ในการสร้างเว็บเพจอย่าง Dreamwerver เป็นโปรแกรมที่ใช้งานได้ง่าย และทำให้เราสร้างเว็บเพจได้เร็วขึ้น นอกจากนั้นยังมีตัวช่วยและเครื่องมือต่างคอยอำนวยความสำดวกเรา เช่น FTP ซึ่งเป็นการดีที่เราจะเรียนรู้โปรแกรมพวกนี้เอาไว้ สำหรับผู้เริ่มต้น เราอาจศึกษาจากตัวของ Dreamwerver เองก็จะทำให้เราเรียนรู้ได้เร็วขึ้น และรู้วิธีการเขียน HTML ที่ดี เพราะ Dreamwerver นั้นจะแสดง HTML ที่โปรแกรมสร้างขึ้นมา ซึ่งเป็นการเขียนที่เรียบร้อยละดูง่าย

    4. web server 
    web server ก็คือเครื่องคอมพิวเตอร์เครื่องหนึ่งซึ่งเชื่อมต่ออยู่กับอินเทอร์เน็ต เพื่อให้ทุกคนเข้าถึงได้ มีความสำคัญคือเอาไว้เก็บไฟล์(เว็บเพจ) ของเรา เพื่อให้คนอื่นเปิดเข้ามาดูนั่นเอง ถ้าเราต้องการจะทำให้เครื่องของเราเป็น web server ก็แต่ แต่ก็ได้กล่าวไปแล้วว่าเป็นเรื่องที่สิ้นเปลืองและ web server ที่ได้ก็จะไม่มีประสิทธิภาพ ซึ่งปัจจุบันนั้นมี web server (hosting) ให้เช่าพื้นที่ในการเก็บเว็บเพจ มากมายหลายที่แต่ละที่ก็จะมีประสิทธิภาพ และราคาต่างกันไป ซึ่งราคาในปัจจุบันก็ถือว่าไม่แพงมาก สำหรับผู้เริ่มต้นอาจใช้บริการฟรีไปก่อนก็ได้ พอเว็บเริ่มเป็นที่นิยมก็ค่อยมาใช้แบบที่ต้องเสียค่าบริการ

    5. Domain name
    Domain name คือชื่อของเว็บของคุณ เช่น www.hellomyweb.com ตัวของ Domain name นั้นเหมือนกับทะเบียนบ้านที่จะจดซ้ำกันไม่ได้ดังนั้นเราจึงต้องมีผู้รับผิดชอบ ถ้าเราต้องการจะมี Domain name เป็นของตัวเองก็จะต้องติดต่อกับผู้รับผิดชอบและเสียค่าบริการรายปี

แสดงเว็บเพจที่คุณทำให้โลกได้เห็น เอาเว็บขึ้นเน็ต

แสดงเว็บเพจที่คุณทำให้โลกได้เห็น

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

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

    ในบทนี้จะเกี่ยวกับการใช้บริการ web server ฟรี ซึ่งในบทความนี้จะใช้บริการ free web server ของ http://www.freewebhostingarea.com/

เราจะมาดูรายละเอียดการสมัครเข้าใช้ web server ฟรีของที่นี้กัน

        1. ให้พื้นที่ในการจัดเก็บไฟล์ของคุณถึง 200 MB แต่ไฟล์ที่คุณจะนำไปเก็บไว้ที่ server ตัวนี้นั้น จะต้องมีขนาดเล็กว่า 10 MB (การดูขนาดไฟล์ของคุณทำได้โดยคลิกขวาที่ไฟล์นั้น เลือก Properties ดูที่ size จะบอกขนาดของไฟล์เอาไว้) 

        2. ให้คุณสามารถส่งไฟล์ไปที่ web server ด้วยระบบ FTP ได้

        3. และอื่นๆอีกมากมายซึ่งถ้าเขียนใส่ในบทความนี้อาจทำให้บทความนี้ยาวเกินไป

เริ่มต้นของใช้บริการฟรี

1. หลังจากที่คุณเปิด http://www.freewebhostingarea.com/ แล้วเลื่อนลงมาดูด้านล่างของเว็บจะเห็นช่องให้เราใช่ชื่อเว็บของเราซึ่งมีด้วยกัน 3 ช่องด้วยกัน คือ

             1. www.ชื่อเว็บของคุณ.6te.net

             2. www.ชื่อเว็บของคุณ.ueuo.com

             3. www.ชื่อเว็บของคุณ.orgfree.com

ซึ่งในบทความนี้เราจะใช้ http://hellomyweb.6te.netตามรูปด้านล่าง



2. กรอกรายละเอียด



บางครั้งคุณอาจเจอปัญหาแบบด้านล่าง เกิดจากว่าเครื่องของคุณเคยสมัครของใช้บริการกับเว็บไซต์นี้ไว้แล้ว ซึ่งผู้ให้บริการให้ใช้ฟรีแค่เครื่องละ 1 account เท่านั้น ถ้าคุณต้องการจะใช้บริการก็แนะนำให้คุณเลือกชื่อเว็บใหม่ อาจเป็น www.hellmyweb.ueuo.com หรือ hellomyweb.orgfree.com แทน 



3. เมื่อสมัครเสร็จแล้วจะมีหน้าจอดังภาพ ซึ่งคุณต้องคลิกที่ลิงค์ด้านล่างเพื่อยืนยันการสมัครเข้าใช้งาน



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



5. เมื่อสมัครขอใช้บริการเรียบร้อยแล้ว เราก็จะเริ่มนำไฟล์ไปเก็บไว้ที่ web server กัน ซึ่งการนำไฟล์ไปเก็บไว้ใน web server ก็ให้เราเปิด My Computer ขึ้นมาแล้วพิมพ์ ftp://ชื่อเว็บของคุณ ซึ่งในบทความนี้ก็เป็น ftp://hellomyweb.6te.net จะมีหน้าจอถาม username และ password ขึ้นมาให้คุณใส่ username และ password ที่ได้จากภาพด้านบน เมื่อกรอกเสร็จก็เป็นดังรูปด้านล่าง



6. ให้คุณลบไฟล์ที่มีอยู่ ทั้งหมดแล้วนำไฟล์ของคุณไปใส่แทน โดยลากไฟล์จากในเครื่องลงใน My computer ได้เลย 

โดยที่ เมื่อคุณเปิดเว็บของคุณ เช่น www.hellomyweb.6te.net ตัว web server จะหาไฟล์ที่ชื่อ index.html มาแสดงเป็นหน้าแรก (home page) ของคุณถ้าคุณไม่มี file ที่ชื่อ index.html ก็ไม่สามารถเปิดเว็บไซต์ของคุณได้ และ web browser จะแสดง error ออกมา 



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

**หากไม่เข้าใจวิธีอัพไฟล์ขึ้น web sever สามารถอ่านต่อได้ในบทความนี้ครับ การใช้งาน FTP ผ่าน My computer ของ window

การเชื่อมโยงเว็บเพจด้วย link

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

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

    ให้เราสร้างไฟล์มา 3 ไฟล์มีชื่อและ source code ดังนี้

1.index.html เป็นไฟล์ที่เทียบได้กับสารบัญของเว็บไซต์ของเรา ซึ่ง source code มีดังนี้

<html>     <head>         <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>     </head>     <body>              เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้              <br>              <a href = "page1.html">หน้า 1</a>              <a href = "page2.html">หน้า 2</a>              <br>              <h1>คุณอยู่ที่ หน้าสารบัญ</h1>     </body> </html>

2.page1.html เป็นไฟล์ที่เทียบได้กับ หน้าที่ 1 ของหนังสือ

<html>     <head>         <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>     </head>     <body>              เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้              <br>              <a href = "index.html">หน้าสารบัญ</a>              <a href = "page2.html">หน้า 2</a>              <br>              <h1>คุณอยู่ที่ หน้า 1</h1>     </body> </html>

3.page2.html เป็นไฟล์ที่เทียบได้กับ หน้าที่ 2 ของหนังสือ

<html>     <head>         <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>     </head>     <body>              เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้              <br>              <a href = "index.html">หน้าสารบัญ</a>              <a href = "page1.html">หน้า 1</a>              <br>              <h1>คุณอยู่ที่ หน้า 2</h1>     </body> </html>

ให้เราลอง เปิดไฟล์ดูจะเห็นดังรูปด้านล่าง 



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

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

เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ

    <a href = "index.html">หน้าสารบัญ</a>    เป็นส่วนที่ใช้แสดง link ของเราซึ่งมีรายละเอียดดังนี้

<a href="ชื่อไฟล์ที่เราต้องการเปิดเมื่อคลิกที่ลิ้งค์นี้">ชื่อลิ้งค์ของเราที่แสดงใน web browser</a>

    <h1>หน้า 1</h1>    เป็นส่วนที่เปลี่ยนขนาดของข้อความของเราที่แสดงใน web browser ซึ่งเราสามารถลองเปลี่ยนขนาดโดยเปลี่ยนตัวเลขเป็น h2 , h3 ขนาดของตัวอักษรที่แสดงก็จะเปลี่ยนแปลง

สำหรับบทความนี้ก็จบลงแค่นี้ บทความต่อไปจะเป็นเรื่องของการแสดงเว็บไซต์ของคุณ

การใส่รูปในเว็บเพจ

    ในบทความนี้จะเป็นการลองใส่รูปในเว็บเพจดู โดยให้เราหารูปอะไรก็ได้ในเครื่อง และ copy ให้ไปอยู่ใน folder เดียวกับไฟล์ index.html ที่เราได้ลองสร้างมาจากบทความแรก โดยรูปที่บทความนี้ใช้เป็นรูปในงานราชพฤกษ์ ที่จัดขึ้นที่เชียงใหม่ และมีชื่อรูปว่า 1.jpg 

 

ให้เราเปิด notepad โดยไปที่ file > open และเลือกไฟล์ index.html ที่เราทำไว้จากบทความที่ผ่านมา 

 

พิมพ์ข้อความตามด้านล่างนี้ โดยในส่วนของ <img src = "1.jpg"> ชื่อรูปที่นำมาใช้เป็น 1.jpg แต่ในส่วนของคุณก็เปลี่ยนเป็นชื่อรูปของคุณเอง 

<html>     <head>         <title>ทดลองใส่รูปในเว็บไซต์</title>     </head>     <body>              เที่ยวงาน ราชพฤกษ์              <br>              บรรยากาศภายในงาน              <br>              <img src = "1.jpg">     </body> </html>

ซึ่งจะได้ผลตามรูปด้านล่าง 



เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ 

    <img src = "1.jpg">    เป็น code ที่ใช้ในการแสดงภาพ 

    <br>    เป็น code ที่ใช้ในสั่งให้ขึ้นบรรทัดใหม่ 

    ซึ่งเราอาจทดลองเอา <br> ที่อยู่ระหว่างประโยค เที่ยวงาน ราชพฤกษ์ และประโยค บรรยากาศภายในงาน ออกและกด save ที่ notepad 

    จากนั้นเราก็ไปดูผลที่ internet explorer (Web browser) ของเรา และทำการกด F5 หรือ กด Refresh เพราะ Web browser ยังแสดงผลที่เกิดจากการเปิดไฟล์ index.html ครั้งแรกอยู่ จากรูปจะเห็นว่าผลที่แสดงต่างจากเดิม โดยจะไม่มีการเว้นบรรทัดระหว่าง เที่ยวงาน ราชพฤกษ์ และ บรรยากาศภายในงาน 



    web browser ไม่ได้แสดงผลในครั้งแรกที่เราเปลี่ยนแปลงไฟล์ index.html ก็เพราะว่า web browser เปิดไฟล์ index.html และแสดงผลค้างไว้ จะไม่มีการเรียกไฟล์ index.html มาอ่านซ้ำระหว่างที่มีการแสดงผล ดังนั้นเราต้องทำการกด Refresh หรือ F5 เพื่อให้ web browser ทำการเรียกไฟล์ index.html มาแสดงผลใหม่ 

     เราอาจลองเพิ่มรูปโดย การเพิ่มบรรทัดของ <img src = "ชือรูปของคุณ"> เข้าไปอีกก็ได้ บทความนี้ก็จบเพียงแค่นี้ บทความต่อไปจะเป็นเรื่องของการเชื่อมโยงไฟล์เข้าด้วยกัน ( การสร้าง LINK )

การทำเว็บแบบง่ายๆ

    บทความนี้เราจะมาลองทำเว็บไซต์กัน โดยการทำเว็บไซต์ในบทความนี้จะเป็นแบบพื้นฐานเพื่อให้คุณได้เข้าใจถึงการทำงานของเว็บไซต์ ซึ่งเราจะใช้โปรแกรม 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 



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

 

ข้อคิดในการออกแบบเว็บไซต์ เพื่อการใช้งานที่ง่ายสำหรับผู้ใช้

ผู้ใช้เว็บไซต์ หรือผู้เข้าชมเป็นส่วนประกอบสำคัญที่สุดของเว็บไซต์ ถึงแม้ว่าเว็บไซต์จะดีเพียงใดถ้าไม่มีผู้ใช้งานก็ไม่มีประโยชน์ ในบทความนี้จะพูดถึงวิธีในการออกแบบโดยคำนึงถึงผู้ใช้งาน ให้สามารถใช้งานได้ง่ายที่สุด

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

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

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

- เว็บไซต์ควรดูเป็นมิตร เช่นไม่ควรใส่เนื้อหาที่เป็นตัวหนังสือทั้งหมด อาจมีการแทรกรูปภาพ หรือพื้นที่ว่างๆไว้ในเว็บไซต์บ้าง เพื่อเป็นจุดพักสายตาของผู้ใช้

หลักที่พูดไปทั้ง 3 ข้อนั้นสามารถปฏิบัติเป็นขั้นตอนง่ายๆ ดังนี้

1. เว็บไซต์ของเราต้องสามารถโหลดหน้าเว็บได้อย่างรวดเร็ว และง่ายต่อการอ่านผ่านๆ แต่ละหัวข้อต้องแบ่งให้ชัดเจน เพื่อให้ผู้ใช้สามารถแบ่งเนื้อหาส่วนต่าๆออกกันได้

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

3. การออกแบบงานกราฟิกควรจะสอดคล้องกับเนื้อหาที่นำเสนอ หลายครั้งที่ภาพประกอบในเนื้อหาเบี่ยงเบนความสนใจจากเนื้อหา และทำให้ผู้อ่านเข้าใจเพราะภาพไม่ตรงกับเนื้อหา ผู้ใช้งานอาจข้ามผ่านเนื้อหาส่วนนั้นไป เพราะเห็นว่าภาพที่แสดงอยู่ไม่เกี่ยวข้องกับความต้องการ

4. ชนิดของตัวหนังสือ font และสี ทั้งสีของพื้นหลัง และสีของตัวหนังสือเอง จะต้องทำให้ง่ายต่อการอ่านมากที่สุด วิธีการพิจารณาคือให้พื้นหลังเป็นสีสว่าง ส่วนสีตัวอักษรจะต้องเป็นสีทึบ หรือสีเข้ม

5. ตัวหนังสือหรือภาพที่มีการขยับ ปิดๆดับ Blink ไม่ควรนำมาใช้งานเพราะจะทำให้ผู้ใช้เกิดความรำคาญ และทำให้ผู้ใช้งานสนใจภาพที่ขยับมากว่าตัวเนื้อหา

6. ลิงก์ที่ใช้งานไม่ได้ หรือลิงก์ที่อยู่ระหว่างการปรับปรุง ไม่ควรนำมาแสดงผล

7. สร้างความแตกต่างกันในแต่ละส่วนของเว็บไซต์ เช่นส่วนของเนื้อหาและเมนู ควรมีความแตกต่างกันอย่างเห็นได้ชัด

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

9. อย่าให้ความสนใจกับกราฟิกในเว็บไซต์มากเกินไป ควรให้ความสำคัญกับการจัดว่างตำแหน่งของส่วนต่างๆในเว็บไซต์มากกว่า

10. อย่าให้ title <title> ของแต่ละหน้ามีความเหมือนกัน รวมทั้งหัวข้อหลัก <h1> ของแต่ละหน้าอย่าให้ซ้ำกัน เพราะส่วนนี้จะเป็นส่วนที่สะดุดตากับผู้ใช้งานมากที่สุด ถ้าหากเปิดหน้าใหม่มาแล้วมีหัวข้อแสดงเหมือนกัน ผู้ใช้งานอาจเข้าใจว่าเป็นหน้าเดิม หรือมีเนื้อหาซ้ำกัน ทำให้ไม่สนใจอ่านต่อไปได้

11. ความถูกต้องของภาษาที่ใช้ หากเป็นเว็บไซต์ที่เป็นทางการเช่นเว็บไซต์บริษัท การใช้เขียนผิด สะกดผิดทำให้หมดความน่าเชื่อถือได้

12. เนื้อหาที่มีความเกี่ยวข้องกันควรมีการแสดงผลเป็นลิงก์อยู่ใกล้เคียงกัน เพื่อให้ผู้ใช้เข้าถึงได้ง่าย

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

จำไว้เสมอว่าการออกแบบเว็บไซต์ควรให้มีจุดสนใจในแต่ละหน้า เพื่อให้ผู้ใช้งานสามารถเข้าถึงข้อมูลในหน้านั้นๆได้ง่ายที่สุด ส่วนประกอบเว็บไซต์จะต้องชัดเจน ในส่วนของเมนู navigation ความมีความชัดเจน การทำเว็บไซต์นั้นเราควรทำให้เกิดความน่าเชื่อถือการใส่ภาพที่มากเกินไป ,pop up , ไฟล์ flash นอกจากจะทำให้เว็บของเราโหลดช้าแล้วยังส่งผลเสียต่อความน่าเชื่อถืออีกด้วย

เตรียมเครื่องมือสำหรับทำเว็บไซต์

ต้องขอบอกก่อนว่าบทความนี้ความยากอยู่ในระดับหนึ่ง หากไม่เข้าใจในข้อใดก็ไม่ต้องกังวล เพราะเครื่องมือที่กล่าวถึงในหัวข้อนี้นั้นส่วนใหญ่จะถูกใช้งานโดยมืออาชีพ เครื่องมือแต่ละตัวมีความสามารถหลากหลายและทำงานได้หลายอย่าง สำหรับมือใหม่อาจมีบางเรื่องที่ไม่เข้าใจ หากสงสัยสามารถโพสถามได้ในเว็บบอร์ด เครื่องมือที่แนะนำต่อไปนี้จะเน้นการใช้งานร่วมกับ HTML , CSS , PHP , MySQL , Javascrip เป็นหลัก

ก่อนอื่นก็จะแบ่งประเภทของเครื่องมือที่ใช้ในการทำเว็บไซต์ได้ดังนี้

1.เครื่องมือในการย้ายไฟล์จากเครื่องของเราไปยังเครื่อง server วิธีการที่ใช้คือ FTP นั่นเอง

2.เครื่องมือสำหรับแก้ไข code

3.เครื่องมือสำหรับแก้ไขภาพ แต่งภาพ

4.Web Browser โปรแกรมสำหรับเปิดเว็บไซต์เช่น IE , Firefox , Chrome

5.เครื่องมือจัดการฐานข้อมูล

6.โปรแกรมจัดการไฟล์ และการปรับปรุงแก้ไขไฟล์

7.โปรแกรมจำลองเครื่องของเราให้เหมือนกับ web server

1. เครื่องมือย้ายไฟล์ด้วยวิธี FTP

การย้ายไฟล์จากเครื่องของเราไปยังเครื่อง server เป็นเรื่องที่ต้องทำเป็นประจำอยู่แล้วสำหรับนักพัฒนาเว็บไซต์เพราะการพัฒนาเว็บไซต์นั้นจะเริ่มจาก การพัฒนาบนเครื่องคอมพิวเตอร์ของเราก่อน หลังจากนั้นจึงจะย้ายไปยังเครื่อง server เพื่อเปิดให้ผู้อื่นได้เข้าชมต่อไป ดังนั้นการย้ายไฟล์จึงมีความสำคัญมาก หากไฟล์ถูกย้ายไปไม่หมด หรือตกค้างระหว่างการย้าย จะมีผลทำให้เว็บไซต์ไม่สามารถใช้งานได้ตามที่เราได้ออกแบบไว้ ในหัวข้อนี้จะพูดถึงเครื่องมือที่ใช้ในการย้ายไฟล์ที่มีประสิทธิภาพกัน

- FileZilla สามารถอ่านรายละเอียดการใช้งานและวิธีการดาวน์โหลดจาก หัวบทความนี้้ มีหัวข้อที่สำคัญที่ควรรู้ในการใช้งานโปรแกรม FTP ทั้งหลายคือ โปรแกรมส่วนใหญ่จะมีวิธีให้เลือกในการส่งข้อมูลอยู่ด้วยกัน 2 วิธีคือ

1.ASCII ใช้สำหรับส่งข้อความที่เป็นตัวอักษร

2.Binary ใช้สำหรับส่งข้อความไม่ใช่ัตัวอักษร เช่นไฟล์ภาพ

ถ้าเลือกใช้ผิดวิธีจะส่งผลต่อไฟล์ที่เราส่งไปได้ แต่สำหรับโปรแกรม FileZilla จะทำการเลือกให้เราโดยอัตโนมัติโดยที่เราไม่ต้องเข้าไปยุ่งในส่วนนี้

2. เครื่องมือสำหรับแก้ไข Code (Code Editing)

พูดได้ว่าเป็นเครื่องมือที่สำคัญมากในการทำเว็บไซต์ เพราะเว็บไซต์นั้นประกอบด้วย code ต่างๆมากมาย ไม่ว่าจะเป็น HTML , PHP , Javascript CSS ถ้าจะพูดเปรียบเปรยก็พูดได้ว่า การทำเว็บไซต์นั้นก็เป็นการเขียน code อย่างหนึ่งนั่นเอง ดังนั้นเราจึงควรเครื่องมือดีๆมาอำนวยความสำดวกให้เราเพื่อประหยัดเวลาในการทำงาน สำหรับเครื่องมือที่เราแนะนำมีดังนี้

- Eclipse เป็นเครื่องมือฟรีที่มีผู้ใช้งานและผู้ร่วมพัฒนามาก มีความสามารถมากมาย ฟังก์ชันหลากหลาย เหมาะสำหรับมืออาชีพที่ต้องการเครื่องมือที่มีสามารถหลากหลาย สามารถเพิ่มความสามารถให้กับโปรแกรมได้โดยโหลด plugin เข้ามาเพิ่มเติม สามารถดูรายละเอียดและดาวน์โหลดโปรแกรมได้ที่เว็บไซต์ http://eclipse.org/ จากความสามารถที่หลากหลายทำให้มีข้อเสียคือใช้ทรัพยากรณ์เครื่องมาก

- Aptana Studio เครื่องมือตัวนี้ก็เป็นตัวฟรีอีกเช่นเดียวกัน โดยมีให้เลือกทั้งแบบที่เป็น plugin ของ Eclipse และแบบที่เป็นโปรแกรมแยกออกมา ข้อดีของโปรแกรมนี้คือ ไม่หนักเครื่องมาก มีรูปแบบสวยงาม ไม่ซับซ้อน รองรับภาษาไทยได้ดี สามารถดูรายละเอียดและดาวน์โหลดโปรแกรมได้ที่ http://www.aptana.com/ สำหรับผู้ใช้งาน php แนะนำให้โหลดเวอร์ชัน 3 เป็นต้นไปมาใช้งาน

- Komodo Edit ตัวนี้เป็นตัวที่นักพัฒนาของเรา คุณ saxford ใช้อยู่และติดใจมากครับ สำหรับผมไม่เคยมีประสบการณ์กับโปรแกรมนี้มากนัก หากต้องการทราบรายละเอียดต้องติดต่อกับคุณ saxford ผ่านทางเว็บบอร์ดนะครับ อ่านรายละเอียดและดาวน์โหลดโปรแกรมจากทีนี่ครับ http://www.openkomodo.com/ โปรแกรมนี้มีทั้งแบบฟรีและไม่ฟรีนะครับ

- Dreamweaver เครื่องมือตัวนี้ถ้ากล่าวถึงส่วนใหญ่น่าจะรู้จักกันทุกคนทีเดียว เป็นเครื่องมือชื่อดังใช้สำหรับพัฒนาเว็บไซต์ ด้วยความสามารถที่หลากหลาย สามารถทำให้ผู้ใช้ที่ไม่รู้วิธีการเขียน HTML ก็สามารถทำเว็บไซต์ขึ้นมาเองได้ แน่นอนว่าไม่ฟรีและมีราคาสูงมากด้วย ดูรายละเอียด และโหลดโปรแกรมทดลองใช้งานได้ที่http://www.adobe.com/products/dreamweaver/

3. เครื่องมือสำหรับแก้ไขภาพ แต่งภาพ

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

- Gimp เป็นโปรแกรมฟรีที่มีประสิทธิภาพมาก มีผู้พัฒนาคอยแต่งเติมความสามารถให้กับโปรแกรมโดยตลอด สามารถใช้งานในการแต่งภาพได้ไม่ดี ต้องบอกว่าตอนนี้โปรแกรมนี้เป็นโปรแกรมฟรีที่มาแรงมาก แต่ทาง hellomyweb ยังไม่มีบทความเกี่ยวกับโปรแกรมตัวนี้มากนัก ในโอกาสต่อไปเราจะพยายามนำเสนอบทความเกี่ยวกับโปรแกรมนี้ให้มากขึ้น

- Photoshop โปรแกรมชื่อดังของ Adobe โปรแกรมนี้เป็นที่นิยมมีหนังสือสอนใช้งานมากมายในท้องตลาด แทบจะเรียกได้ว่าเป็นโปรแกรมแต่งภาพอันดับหนึ่งตอนนี้ก็ได้ อ่านรายละเอียดเพิ่มเติม และดาวน์โหลดโปรแกรมตัวทดลองได้ที่http://www.adobe.com/products/photoshop/family/

4. Web Browser

ปัจจุบันมีหลากหลายให้เลือกใช้มากมาย ทำให้เป็นปัญหากับผู้พัฒนาเป็นอย่างมาก เพราะต้องพัฒนาเว็บไซต์ของตัวเองให้เหมาะสม และเปิดได้กับ Web browser ที่มีอยู่ในท้องตลาด แน่นอนว่าตอนนี้ IE6 มีผู้ใช้งานอยู่มาก แต่ผู้ใช้ที่ลง IE7 , IE8 ไปแล้วก็ไม่สามารถกลับไปใช้งาน IE6 ได้ เป็นปัญหากับผู้พัฒนาเว็บไซต์มาก

ดังนั้น Hellomyweb แนะนำให้เข้าไปที่เว็บไซต์ http://spoon.net/browsers/ จะมี Web browser ให้เราใช้แทบทุกรุ่น แต่จำเป็นต้องลง plugin ของ spoon ก่อน จากนั้นเมื่อคลิกที่รายชื่อของ spoon จะโหลด browser ที่เราเลือกขึ้นมาให้ใช้ และไม่จำเป็นต้องลง browser ตัวนั้นจริงๆในเครื่องของเรา Hellomyweb ขอแนะนำให้ลองใช้ดู

5. เครื่องมือจัดการฐานข้อมูล

สำหรับผู้ที่เขียนโปรแกรมบนเว็บไซต์ ที่จำเป็นจะต้องมีฐานข้อมูลด้วยนั้น จำเป็นต้องใช้เครื่องมือสำหรับจัดการฐานข้อมูลอย่างแน่นอน สำหรับโปรแกรมที่ไดัรับความนิยมมากนั่นคือ phpMyAdmin นั่นเอง ด้วยความที่เป็นโปรแกรมฟรี ทำงานคู่กับภาษา PHP , MySQL ได้เป็นอย่างดีจึงเป็นที่นิยมมากนั่นเอง สำหรับ phpMyAdmin จะมาคู่กับ XAMPP อยู่แล้วจึงไม่ขอแสดงลิงก์ไว้ในที่นี้

6. โปรแกรมจัดการไฟล์

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

7. โปรแกรมจำลองเครื่องของเราให้เหมือนกับ Web Server

สำหรับการพัฒนาเว็บไซต์ เราจำเป็นต้องพัฒนาบนเครื่องของเราก่อนที่จะส่งไฟล์ไปยังเว็บไซต์ เพื่อความรวดเร็วในการทำงานและ ความสะดวกของเราเอง ดังนั้นเราจำเป็นต้องจำลองเครื่องของเราให้เหมือนกับ Web server โดยการจำลองนั้นก็จะทำให้เครื่องของเราสามารถใช้งานภาษา PHP และฐานข้อมูล MySQL เพื่อการเขียนโปรแกรมบนเว็บไซต์ได้ นอกจากนั้นยังมีโปรแกรม phpMyAdmin เพื่อจัดการฐานข้อมูลอีกด้วย สำหรับโปรแกรมที่แนะนำคือ

- XAMPP มีวิธีการลงและ วิธีการใช้งานทั้งหมดอยู่ในบทความนี้http://www.hellomyweb.com/index.php/main/content/136

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