เว็บไซต์ Website
ที่มาของคำว่า Website
Web (ใยแมงมุม) และ Site(โครงข่าย) หรือเรียกว่า "โครงข่ายในแมงมุม" ซึ่งหมายถึง กลุ่มของเว็บเพจที่เกี่ยวข้องและสัมพันธ์กัน ประกอบไปด้วย เว็บเอกสาร(Web Documents) และสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ เป็นต้น ซึ่งอาจเรียกเอกสารต่าง ๆ เหล่านี้ว่า เว็บเพจ (Web Page) และเรียกเว็บหน้าแรกของแต่ละเว็บไซต์ว่า โฮมเพจ (Home Page) หรืออาจกล่าวได้ว่า เว็บไซต์ก็คือเว็บเพจอย่างน้อยสองหน้าที่มีลิงก์ (Links) เชื่อมต่อถึงกัน

หลักในการออกแบบเว็บไซต์ (Web Design)

      Web Server
Web server คือโปรแกรมที่อยู่และทำงานบนเครื่องฝั่ง Server (Host) ทำหน้าที่ในการรับคำสั่งจากการร้องขอของฝั่ง Client (โดยผ่านทาง Browser) และประมวลผลการทำงานจากการร้องขอดังกล่าว แล้วส่งข้อมูลกลับไปยังเครื่องของ Client ที่ร้องขอ 
สรุปง่ายๆ ก็คือ Web server คือโปรแกรมที่คอยให้บริการแก่ Client ที่ร้องขอข้อมูลเข้ามาโดยผ่าน Browser 
เว็บที่เขียนด้วย ASP นั้นจะทำงานได้ก็จะต้องมี Web server เป็นตัว Run อีกทีหนึ่ง ดังนั้นถ้าเราต้องการให้เครื่องของเราสามารถ Run ASP ได้เราจะต้องจำลองเครื่องคอมพิวเตอร์ของเราให้เป็น Server โดยใช้โปรแกรม Web Server ดังที่กล่าวข้างต้น 
ถ้าเครื่องคอมพิวเตอร์ของคุณใช้ Window 95,98 หรือ Win Me Web server ที่คุณต้องใช้คือ Personal Web Server (PWS) แต่ถ้าเครื่องคอมพิวเตอร์ของคุณใช้ Window NT,Window 2000 หรือ XP Web Server ที่ใช้คือ Internet Information Server (IIS)
ในปัจจุบันเทคโนโลยี่เกี่ยวกับ Server ได้พัฒนามาไกลกว่ายุคก่อน ๆ มาก และการที่เราจะ Web Server ของตัวเอง ก็อาจจะไม่ตอ้งทำเป็นที่จะซื้อเครื่องและนำไปวางไว้ที่ Data Center อีก เพราะได้มีเทรโนโลนี่ใหม่ ๆ เกี่ยวกับ VM , VPS ,และ Cloud Server และอื่น ๆ ที่สามารให้เรามี Web Server เป็นของตัวเองในราคที่ต่ำมาก และ ไม่ต้องลงทุนในการซื้อเครื่อง Server เลย

เครื่อง Server แบบ Rack
            
เครื่อง Server แบบ Towe

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

ตัวอย่าง Home page ของ google


ในหน้าโฮมเพจของเว็บไซต์ มักประกอบด้วยส่วนต่าง ๆ ดังนี้ 
1.โลโก้ (logo) คือสิ่งสำคัญที่จะช่วยให้ผู้เข้าชมสามารถจดจำเว็บไซต์ของเราได้ นอกจากนี้แล้วโลโก้ยังช่วยให้เว็บไซต์ของเราดูมีเอกลักษณ์อีกด้วย
2. เมนูหลัก (link menu) เป็นจุดที่เชื่อมโยงข้อมูลที่สำคัญ ซึ่งรวบรวมไว้ในรูปแบบของปุ่มเมนู หรือข้อความที่ผู้เยี่ยมชมเว็บไซต์สามารถรับรู้เรื่องราวที่น่าสนใจของเว็บไซต์ได้ ควรมีข่าวใหม่ๆ เนื้อหาใหม่ๆมาตลอด
3. โฆษณา (Banner) เป็นส่วนที่สำคัญอีกเช่นเดียวกัน  เพราะเว็บไซต์ที่มีโฆษณาจะช่วยส่งเสริมภาพลักษณ์ ความน่าเชื่อถือ และช่วยกระตุ้นความสนใจเพราะมักใช้ภาพเคลื่อนไหว (Gif Animation)  ประกอบซึ่งจะทำให้เว็บไซต์ของเราดูตื่นตาตื่นใจมากขึ้น จากการวิจัยพบว่าภาพเคลื่อนไหวยังช่วยให้เว็บไซต์ของเราดูน่าสนใจมากยิ่งขึ้นถึง 30%  แต่ไม่ควรมีโฆษณามากเกินไปและควรจัดวางตำแหน่งให้เหมาะสมอีกด้วย 
4. ภาพประกอบและเนื้อหา (content)  เป็นส่วนที่ให้สาระความรู้กับผู้เข้าชม ซึ่งเนื้อหาที่ให้จะต้องมีขนาดพอเหมาะไม่สั้นหรือยาวจนเกินไป  ควรมีการปรับเนื้อหาให้ใหม่ทันกับปัจจุบันอยู่ตลอดเวลา จัดวางเนื้อหาให้เหมาะสมกับผู้ที่เข้ามาชมเนื้อหา และการมีภาพที่เกี่ยวข้องประกอบอยู่ยิ่งจะทำให้เว็บไซต์เป็นที่น่าสนใจมากยิ่งขึ้น 
5. การใช้สีให้เหมาะสมกับหน้าโฮมเพจ (color)เพราะสีแต่ละสีจะให้ความรู้สึกที่มีผลด้านอารมณ์กับผู้เข้าชมในลักษณะที่แตกต่างกันไป


การสร้างโฮมเพจ สามารถทำได้หลายวิธีเช่น
1. ใช้ Web Hosting ซึ่งเป็นเว็บไซต์ที่ทำหน้าที่ให้บริการจัดเก็บข้อมูล โดยบางเว็บไซต์ให้บริการในการสร้างโฮมเพจสำเร็จรูปกับผู้ต้องการในการมีโฮมเพจ ซึ่งจะมีรูปแบบของโฮมเพจให้เลือกได้ตามที่ต้องการ หรือต้องการให้ออกแบบตามความประสงค์ของผู้ใช้บริการก็ได้ 
2. ใช้โปรแกรมสร้างเว็บเพจ เป็นการสร้างโฮมเพจโดยการใช้โปรแกรมสำเร็จรูปในการสร้าง ทำให้สามารถสร้างตาราง จัดวางตำแหน่งข้อความหรือรูปภาพได้สะดวก ตลอดจนการปรับแต่งแก้ไขจะทำได้ง่าย ซึ่งโปรแกรมที่นิยมใช้ในปัจจุบันได้แก่โปรแกรม Dreamweaver, FrontPage, Go Live หรือ Home Site เป็นต้น 
3.โปรแกรมภาษา HTML และ JavaScript การสร้างโฮมเพจโดยใช้โปรแกรมภาษา HTML และ JavaScript นั้น ผู้สร้างโฮมเพจจะต้องมีความสามารถและความชำนาญในการเขียนโปรแกรมได้เป็นอย่างดี เนื่องจากการสร้างโฮมเพจด้วยวิธีนี้ เป็นการพิมพ์คำสั่งและข้อมูลที่ต้องการแสดงบนโฮมเพจพร้อมกัน 

เว็บเพจ webpage
     เว็บเพจ (Web Page) หมายถึง  หน้าเอกสารของบริการ  WWW  ซึ่งตามปกติจะถูกเก็บอยู่ในรูปแบบไฟล์ HTML (Hyper Text Markup Language)  โดยไฟล์  HTML  1  ไฟล์ก็คือเว็บเพจ  1  หน้านั่นเอง  ภายในเว็บเพจอาจประกอบไปด้วยข้อความ  ภาพ  เสียง วิดีโอ  และภาพเคลื่อนไหวแบบมัลติมีเดีย  นอกจากนี้เว็บเพจแต่ละหน้าจะมีการเชื่อมโยงหรือ “ลิงค์” (Link)  กัน เพื่อให้ผู้ชมเรียกดูเอกสารหน้าอื่นๆ ที่เกี่ยวข้องได้สะดวกอีกด้วย
ประโยชน์ของเว็บเพจ
เว็บเพจสามารถเผยแพร่ข้อมูลได้ด้วยข้อความ ภาพ เสียง และวีดีโอ ดังนั้นเราจีงพบเห็นการนำเว็บเพจไปสร้างและพัฒนา เพื่อนำเสนอข้อมูล และข่าวสารในรูปแบบต่างๆ ได้อย่างมากมาย เช่น

Web browser

Browser คืออะไร
Browser คือโปรแกรมที่เป็นโปรแกรมสำเร็จรูปที่ผู้ใช้สามารถใช้งานสื่อสารผ่านหน้าเว็บเพจที่สร้างขึ้นจากภาษาคอมพิวเตอร์อย่าง HTML โดยข้อมูลของเว็บเพจแต่ละเว็บเพจจะถูกเก็บไว้ใน Server เมื่อผู้ใช้งานเข้าเว็บบราวเซอร์พร้อมทั้งใส่ที่อยู่ URL ลงไปในบราวเซอร์ โปรแกรม Browser ก็จะค้นหาที่อยู่เว็บนั้นใน Server ที่มีการเก็บข้อมูลของเว็บเพจเหล่านั้น ซึ่งการเชื่อมต่อดังกล่าวเป็นการเชื่อมต่อกับโครงข่ายที่มีขนาดใหญ่ที่สุดในโลก โดยเราเรียกโครงข่ายนี้ว่า เวิลด์ไวด์เว็บ (World Wide Web)หรือจะเขียนย่อ ๆว่าWWW และ W3

Browser ที่ได้รับความนิยมทั้งในอดีตและปัจจุบัน

Browser มีประโยชน์อย่างไร
Browser นั้นมีความสำคัญมาในการเข้าถึงอินเตอร์เน็ตเพราะเป็นโปรแกรมที่แปลงภาษาคอมพิวเตอร์อย่างภาษาที่นิยมในการสร้างเว็บเพจ ภาษา HTML ให้เป็นตัวอักษรและรูปภาพที่สวยงามอ่านง่าย เพราะถ้ายังเป็นภาษา HTML อยู่เราจะได้เห็นโค้ดและก็ตัวอักษรมากมาย โดย Browser จะเป็นโปรแกรมที่สามารถทำให้ผู้ใช้งาน (Client) สามารถโต้ตอบกับเว็บเพจได้ ในการใช้งานเว็บ Browser นั้นเราต้องใช้ที่อยู่ของเว็บเพจเข้าไปโดยที่อยู่ของเว็บเพจนั้นจะขึ้นต้นด้วย http://www . ชื่อของเว็บเพจ.com เป็นต้น

Google Chrome คือ Browser ที่ได้รับความนิยมสูงสุดในปัจจุบัน
Browser ที่ได้รับความนิยมมีอะไรบ้าง
Browser ในปัจจุบันมีอยู่ไม่กี่รายที่ได้รับความนิยมใช้กันอยู่ในปัจจุบัน
1. Internet Explorer (IE) เป็นเว็บบราวเซอร์ที่ได้รับความนิยมมากที่สุดในตอนนี้ โดยเป็นเว็บบราวเซอร์ที่คนทั่วโลกใช้งานกัน โดยเว็บไซต์ส่วนมากก็จะรองรับการใช้งานของบราวเซอร์นี้
2. Google Chrome (Chorme) เป็นเว็บบราวเซอร์ที่มีความนิยมมาเป็นอันดับสอง รองจาก IE โดยเว็บบราวเซอร์นี้เป็นเว็บบราวเซอร์ที่ถูกพัฒนามาจาก Google ซึ่งเป็น Search engine รายใหญ่ของโลก ข้อดีของ Browser นี้คือเรื่องของความเร็วในการเข้าถึงเว็บไซต์พื้นที่หน้าจอในการใช้งานใหญ่เหมาะกับการใช้งาน
3. FireFox เป็นบราวเซอร์ที่มีคนใช้งานเป็นอันดับสาม ข้อดีของบราวเซอร์ FireFox คือสามารถเพิ่มโปรแกรมเสริมลงไปได้ด้วย มีลูกเล่นให้กับผู้ใช้งานเยอะกว่าบราวเซอร์อื่น จุดสำคัญที่เป็นจุดเด่นของบราวเซอร์ FireFox คือเรื่องความปลอดภัยนั้นเอง
4. Opera เป็นบราวเซอร์ที่ได้รับความนิยมมาเป็นอันดับสี่ ข้อดีของบราวเซอร์นี้คือความเร็วที่มีความเร็วในการโหลดเว็บไซต์ได้เร็วกว่า 3 บราวเซอร์แรกแต่ข้อเสียก็คือเวลาเปิดบราวเซอร์ Opera บ้างครั้งจะช้ามากและไม่มีลูกเล่นใหม่ๆพร้อมทั้งเว็บไซต์บ้างเว็บไซต์ไม่สนับสนุนการใช้งานเว็บบราวเซอร์ Operaนี้ด้วย
นอกจาก Browser 4 รายที่ยกตัวอย่างมาก็ยังมีเว็บบราวเซอร์อีกมากที่เป็นตัวเลือกให้กับผู้ใช้งานอินเตอร์เน็ต หนึ่งในนั้นก็คงเป็นเว็บบราวเซอร์ในตระกูลของ Apple ที่สาวก Apple ต้องรู้จักดี Safari เป็นเว็บบราวเซอร์ที่ใช้อยู่ในกลุ่มของผู้ใช้ผลิตภัณฑ์ของทาง Apple เท่านั้น

HTML

HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเอง

ความเป็นมาของ HTML เริ่มขึ้นเมื่อปี 1980 เมื่อ Tim Berners Lee เสนอต้นแบบสำหรับนักวิจัยใน CERN เพื่อแลกเปลี่ยนเอกสาร ข้อมูลด้านการวิจัย โดยใช้ชื่อว่า Enquire ในปี 1990 เค้าได้เขียนโปรแกรมเบราเซอร์ และทดลองรันบนเซิฟเวอร์ที่เค้าพัฒนาขึ้น HTML ได้รับการรู้จักจาก HTML Tag ซึ่งมีอยู่ 18 Tag ในปี 1991 
HTML ถูกพัฒนาจาก SGML และ Tim ก็คิดเสมือนว่า HTML เป็นโปรแกรมย่อยของ SGML อยู่ในตอนนั้น ต่อมาในปี 1996 เพื่อกำหนดมาตรฐานให้ตรงกัน W3C World Wide Web Consortium จึงเป็นผู้กำหนดสเปกทั้งหมดของ HTML และปี 1999 HTML 4.01 ก็ถือกำเนิดขึ้น โดยมี HTML 5 ซึ่งเป็น Web Hypertext Application ถูกพัฒนาต่อมาในปี 2004 นอกจากนี้ยังมีการพัฒนาไปเป็น XHTML ซึ่ง คือ Extended HTML ซึ่งมีความสามารถและมาตรฐานที่รัดกุมกว่าอีกด้วย 
โดยอยู่ภายใต้การควบคุมของ W3C (World Wide Web Consortium)

โครงสร้างคำสั่งของ HTML

การใช้งาน HTML

    ในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้ 

1. คำสั่ง หรือ Tag

            Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ 

     Tag เดี่ยว     เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น

     Tag เปิด/ปิด     รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่ 

            <tag> เราเรียกว่า tag เปิด

            </tag> เราเรียกว่า tag ปิด

2. Attributes

            Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย

3. not case sensitive 

            หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน



โครงสร้างของหลักของ HTML 

โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ 

        1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง

        2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web brower โดยตรง