ค้นหาบล็อกนี้

วันพฤหัสบดีที่ 11 สิงหาคม พ.ศ. 2554

การทำเว็บแบบง่ายๆด้วยโปรแกรม 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 


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


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




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


ในบทความนี้จะเป็นการลองใส่รูปในเว็บเพจดู โดยให้เราหารูปอะไรก็ได้ในเครื่อง และ 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 )



การเชื่อมโยงเว็บเพจด้วย 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 ขนาดของตัวอักษรที่แสดงก็จะเปลี่ยนแปลง

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


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

   
 การที่เราจะทำให้คนทั่วไปได้เห็นเว็บของเรานั้น เราจำเป็นต้องนำเว็บเพจที่เราสร้างขี้นมาไปเก็บไว้ที่ 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



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

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


    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 เป็นของตัวเองก็จะต้องติดต่อกับผู้รับผิดชอบและเสียค่าบริการรายปี

ขอขอบคุณข้อมูลจาก : www.hellomyweb.com ค่ะ :D

ไม่มีความคิดเห็น:

แสดงความคิดเห็น