วันเสาร์ที่ 31 ตุลาคม พ.ศ. 2558

การทำwebsite

การทำwebsite


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

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

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

Domain Name

          โดเมนเนม (Domain Name)


          


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

          โดเมนเนม หรือ ชื่อโดเมน เป็นชื่อที่ตั้งขึ้นเพื่อให้ง่ายต่อการจดจำ เนื่องจากไอพีแอดเดรสนั้นจดจำได้ยากกว่า และเมื่อการเปลี่ยนแปลงไอพีแอดเดรสผู้ใช้ไม่จำเป็นต้องรับรู้หรือจดจำไอพีแอดเดรสใหม่ ยังคงใช้โดเมนเนมเดิมได้ต่อไป
               
ข้อสำคัญในการจดโดเมน
1. ต้องมีความยาวไม่น้อยกว่า 3 ตัวอักษร และมีตัวอักษร "a" ถึง "z" หรือ "A" ถึง "Z" หรือมี "0" ถึง "9" และ "-" ได้ไม่เกิน 63 ตัวอักษร
2. ต้องไม่มีสัญลักษณ์พิเศษเช่น @!#$%^&*()_+= ต่างๆ
3. สามารถมี - ( Dash ) ขั้นได้ แต่ห้ามอยู่หน้าเช่น -yourdomain ไม่สามารถจดได้ ที่จดได้คือ yourdomain-a.com แต่ไม่สามารถจดแบบ yourdomain-.com ได้
ไอพีแอดเดรส (IP Address) 1 ไอพี สามารถใช้โดเมนเนมได้มากกว่า 1 โดเมนเนม และหลายๆ โดเมนเนมอาจจะใช้ไอพีแอดเดรสเดียวกันได้ตัวอย่างต่อไปนี้ แสดงถึงความแตกต่างระหว่าง ยูอาร์แอล (URL) โดเมนเนม และ ซับโดเมน
• URL (ยูอาร์แอล) : http://www.domain.com
• Sub Domain (ซับโดเมน) : subdomain.domain.com
• Sub Domain (ซับโดเมน) : subdomain.domain.com
โดยทั่วไป ไอพีแอดเดรสกับชื่อเซิร์ฟเวอร์มักจะแปลงกลับไปมาได้ 1 ไอพีแอดเดรสมักหมายถึง 1 ชื่อเซิร์ฟเวอร์ แต่ปัจจุบัน ความสนใจในเรื่องเว็บทำให้จำนวนเว็บไซต์มีมากกว่าเซิร์ฟเวอร์ โพรโทคอล HTTP จึงระบุว่าไคลเอนต์จะเป็นผู้บอกเซิร์ฟเวอร์ว่าชื่อใดที่ต้องการใช้ วิธีนี้ 1 เซิร์ฟเวอร์ที่ใช้ 1 ไอพีแอดเดรสจะใช้โดเมนเนมได้หลายชื่อ ยกตัวอย่าง เซิร์ฟเวอร์ที่มีไอพี 123.45.67.89 อาจจะใช้งานโดเมนเนมเหล่านี้ได้:
• domain1.com
• domain2.com
• domain3.us
               
ประโยชน์ที่สำคัญ
+ประโยชน์ที่สำคัญของ DNS คือช่วยแปลงหมายเลขไอพีซึ่งเป็นชุดตัวเลขที่จดจำได้ยาก (เช่น 123.45.67.89) มาเป็นชื่อที่สามารถจดจำได้ง่ายแทน(เช่น domain-name.org)

องค์กรที่กำหนดและควบคุมโดเมน ได้แก่ ICANN
ICANN ย่อมาจาก Internet Corporation for Assigned Named and Numbers รายละเอียดดูได้จาก http://www.icann.org
+โดเมนเนม มีหลายสกุล แต่ที่นิยมมากที่สุดนั้นก็คือ .com เพราะเป็น เป็นสกุลในยุคแรกๆ ที่เริ่มใช้กัน และง่ายต่อการจดจำ

               
ประเภทของ Domain Name แบ่งได้เป็น 2 ประเภท
1. โดเมน 2 ระดับ ชื่อโดเมน . ประเภทของโดเมน
2. โดเมน 3 ระดับ ชื่อโดเมน . ประเภทของโดเมน . ประเทศ
Ø 1.โดเมนเนม 2 ระดับ
จะประกอบด้วย www . ชื่อโดเมน . ประเภทของโดเมน เช่น www.dotregis.com
ประเภทของโดเมน คือ คำย่อขององค์กร โดยประเภทขององค์กรที่พบบ่อย มีดังต่อไปนี้ .com คือ บริษัท หรือ องค์กรพาณิชย์ ธุรกิจการค้า
.org คือ องค์กรเอกชนที่ไม่แสวงผลกำไร เช่น สมาคม หรือมูลนิธิ
.net คือ องค์กรใด หรือบริษัทใด ที่ทำงานเกี่ยวกับ เกตเวย์ (Gateway) หรือ จุดเชื่อมต่อเครือข่าย (Network)
.edu คือ สถาบันการศึกษา
.gov คือ องค์กรของรัฐบาล
.mil คือ องค์กรทางทหาร
.info คือ เว็บไซต์ที่นำเสนอข้อมูลเป็นหลัก
.biz คือ เว็บไซต์องค์กรที่เกี่ยวกับธุรกิจการค้า
.name คือ เว็บไซต์ครอบครัว บุคคล
.mobi คือ เว็บไซต์โทรศัพท์มือถือ
.tel คือ เว็บไซต์การสื่อสาร
.travel คือ เว็บไซต์การท่องเที่ยว โรงแรม ทัวร์
* ทั้งนี้ เป็นเพียงหมวดหมู่ในการสื่อสารให้กับผู้เยี่ยมชมเว็บไซต์ให้ตรงกลุ่มเป้าหมายเท่านั้น

Ø โดเมนเนม 3 ระดับ
จะประกอบด้วย www . ชื่อโดเมน . ประเภทของโดเมน . ประเทศ เช่น www.cu.ac.th, www.nectec.or.th, www.google.co.th
ประเภทขององค์กรที่พบบ่อย คือ
.co คือ บริษัท หรือ องค์กรพาณิชย์
.ac คือ สถาบันการศึกษา
.go คือ องค์กรของรัฐบาล
.net คือ องค์กรที่ให้บริการเครือข่าย
.or คือ องค์กรเอกชนที่ไม่แสวงผลกำไร

ตัวย่อของประเทศที่ตั้งขององค์กร
.th คือ ประเทศไทย .au คือ ประเทศออสเตรเลีย
.cn คือ ประเทศจีน .de คือ ประเทศเยอรมัน
.jp คือ ประเทศญี่ปุ่น
.uk คือ ประเทศอังกฤษ .us คือ ประเทศสหรัฐอเมริกา
.vn คือ ประเทศเวียดนาม

Domain Name แบ่งออกตามการจดทะเบียนได้เป็น 2 ประเภท คือ
1. การจดทะเบียนโดเมนต่างประเทศ
2. การจดทะเบียนโดเมนภายในประเทศ

ตัวอย่างโดเมนของประเทศต่าง ๆ
โดเมนสำหรับประเทศไทย การจดทะเบียนโดเมนต่างประเทศ ( gTLD - Generic)
.com
.net
.org

สิ่งสำคัญของชื่อเว็บไซต์
โดเมนเนม ถือเป็นสิ่งสำคัญอันดับแรกที่มองข้ามไม่ได้เลยสำหรับเว็บไซต์นั้นๆ โดยเฉพาะกับการโฆษณาบนอินเตอร์เน็ตถ้าได้ชื่อที่เฉพาะเจาะจง ตรงกับกลุ่มเป้าหมายที่มีความสนใจเป็นพื้นฐานเดิมอยู่แล้วนั้น จะทำให้โดเมนเนม หรือ เว็บไซต์นั้นๆจะได้รับความสนใจและเป็นที่จดจำได้ง่าย ไม่ใช่กับผู้เข้าชมหรือกลุ่มเป้าหมายที่เข้ามาชมเว็บไซต์ผ่านโดเมนเนมเท่านั้นยังรวมไปถึง Search Engine ชื่อดังต่างๆ เช่น Google, Yahoo, MSN เป็นต้น ที่จะเข้ามาแวะเวียนเข้ามาทำ index (Bot มาเก็บข้อมูล)กับเว็บเพจหน้าต่างๆ ในเว็บไซต์ของเรา
หลังจากจดโดเมนเนมเป็นที่เรียบร้อยแล้ว สิ่งสำคัญลำดับถัดมานั้นก็คือ โฮสติ้ง (Hosting) หรือ ที่เก็บข้อมูลเว็บไซต์ของเรานั้นเองซึ่งโฮสติ้งแต่ละที่จะมี DNS หรือ Name Server ที่ทางผู้ให้บริการโฮสติ้ง จะเป็นคนกำหนดและแจ้งให้เราทราบเพื่อเอาไปใส่ให้โดเมนเนมของเรา  เช่น DNS ของ DotRegis จะมีชื่อว่า NS1.DOTREGIS.COM และ NS2.DOTREGIS.COM ซึ่งคุณไม่ต้องกังวลในเรื่องนี้เพราะถ้าคุณจด Domain Name และใช้บริการโฮสติ้งกับผู้ให้บริการเดียวกันจะไม่มีปัญหาอะไรเลย หรือแม้ว่าจะเป็นผู้ให้บริการต่างกันเพียงแค่นำ DNS ที่ได้ ไประบุให้กับโดเมนเนมนั้นตามที่ได้อธิบายไปแล้วยังไม่ต้องการพื้นที่โฮสติ้ง
ในกรณีที่คุณยังไม่มีเว็บโฮสติ้ง หรือยังไม่ต้องการเช่าเว็บโฮสติ้งจากดอทรีจิส หรือผู้ให้บริการรายอื่น แต่ DotRegis.com ให้พื้นที่ Special Solution "FREE Package"
ฟรีทุกโดเมน ไม่จำกัดจำนวน ให้คุณสามารถทำเว็บไซต์ฟรีทุกโดเมน ซึ่งจะทำให้คุณสามารถใช้งาน Domain Services ต่างๆ ได้ เช่น
รองรับผู้ใช้งาน ได้กว่า 3,000 คน/เดือน
• Domain Forwarding
• Mail Forwarding
• DNS Management ไม่จำกัดจำนวนโดเมน และจดได้สูงสุด 10 ปี

เช่น DNS ของ DotRegis จะมีชื่อว่า NS11.DOTREGIS.COM และ NS12.DOTREGIS.COM ซึ่งคุณไม่ต้องกังวลในเรื่องนี้  เพราะถ้าคุณจด Domain Name และใช้บริการโฮสติ้งกับผู้ให้บริการเดียวกันจะไม่มีปัญหาอะไรเลย หรือแม้ว่าจะเป็นผู้ให้บริการต่างกัน
เพียงแค่นำ DNS ที่ได้ ไประบุให้กับโดเมนเนมนั้นตามที่ได้อธิบายไปแล้ว