เว็บไซต์ (อังกฤษ: website, web site หรือ site) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์จำเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล ในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่าง ๆ ผู้ทำเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สำหรับธุรกิจหรือองค์กรต่าง ๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของเว็บเบราว์เซอร์
                   เว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์ธุรกิจ การเรียกดู เว็บไซต์นิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของเว็บเบราว์เซอร์ เว็บไซต์แห่งแรกของโลกถูกสร้างขึ้นในการจะสร้างเว็บไซต์ขึ้นมาแต่ละเว็บ จำเป็นต้องมีเครื่องมือเขียนโค้ดเว็บไซต์ ซึ่งโปรแกรมเขียนโค้ด ก็มีให้เลือกใช้งานอยู่หลายโปรแกรม ตามความสะดวกและความชอบของนักพัฒนา ดังนี้
                   Adobe Dreamweaver คือ โปรแกรมสร้างเว็บเพจแบบเสมือนจริง ของค่าย Adobe ซึ่งช่วยให้ผู้ที่ต้องการสร้างเว็บเพจไม่ต้องเขียนภาษา HTML หรือโค้ดโปรแกรมเอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG" โปรแกรม Dreamweaver มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอื่น ๆ ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ โดยไม่ต้องใช้ภาษาสคริปต์ที่ยุ่งยากซับซ้อนเหมือนก่อน Dreamweaver มีทั้งในระบบปฏิบัติการ แมคอินทอช และไมโครซอฟท์วินโดวส์ Dreamweaver ยังสามารถทำงานบนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINE ได้
                   Notepad คือ โปรแกรมที่ใช้สร้างเอกสารประเภทตัวอักษรอย่างง่าย  มีความรวดเร็วในการเรียกใช้งาน แต่แม้ว่าจะไม่ได้ปรับปรุงให้มีคุณสมบัติโดดเด่นเหมือนกับอีกหลายๆโปรแกรม แต่ก็ยังเป็นโปรแกรมพื้นฐานที่เหล่าโปรแกรมเมอร์ หรือ นักพัฒนาเว็บไซต์แบบ html นิยมใช้ในการฝึกเขียนโค้ดในปัจจุบัน
                   Notepad+++ คือ โปรแกรม text editor ที่ดีที่สุด ด้วยความสามารถที่เทียบเท่าและดีกว่าโปรแกรม Edit plus ที่เคยใช้มาในอดีต ไม่ว่าจะเป็นการแก้ไข source code ซึ่งรองรับ syntax ในรูปแบบโปรแกรมได้หลากหลาย หรือแม้แต่กระทั่งจะนำมาใช้แทนโปรแกรม Notepad แบบธรรมดาในโปรแกรม windows ก็สามารถทำได้เลย มี syntax highlight ซึ่งช่วยให้การเขียนโค้ดโปรแกรมได้สะดวก รองรับภาษาคอมพิวเตอร์ได้หลายภาษา เช่น C C++ Java  C# XML HTML PHP CSS makefile ASCII art (.nfo) doxygen ini file batch file Javascript ASP VB/VBS SQL Objective-C RC resource file Pascal Perl Python Lua TeX TCL Assembler Ruby Lisp Scheme Properties Diff Smalltalk Postscript VHDL Ada Caml AutoIt KiXtart Matlab Verilog Haskell InnoSetup CMake
                   Sublime Text เป็นโปรแกรมแก้ไขข้อความ และ เขียนโค้ด สำหรับโปรแกรมเมอร์ และ นักพัฒนา ที่มีขนาดเล็ก เพียงแค่ 7MB เท่านั้น แต่ยังคงประสิทธิภาพและฟังก์ชั่นไว้มากมาย ใช้งานง่ายและทำงานได้อย่างรวดเร็วด้วย โปรแกรม Sublime Text นี้ รองรับการใช้งานหลากหลายภาษา ไม่ว่าจะเป็น ภาษาหลักๆ อย่าง C,C++, C# เขียนเว็บไซต์ HTML,PHP โค้ด CSS เขียนภาษา JAVA, Python หรืออื่นๆ อีกมากมาย ด้วยหน้าตาที่ใช้งานเขียน ส่วนโค้ดแบ่งแต่ละส่วนอย่างชัดเจน สามารถแก้ไขข้อความหลายๆ บรรทัดพร้อมกันได้ ค้นหา Text แต่ละส่วนได้ อีกทั้งยังมีแถบ แสดงโค้ดทั้งหมด ให้เลื่อนดูด้านข้างได้อีกด้วย โปรแกรมเขียนโค้ด Sublime Text เป็นโปรแกรมเขียน แก้ไขโค้ด ที่มีประสิทธิภาพสูงไม่แพ้ตัวอื่นๆ ด้วยประสิทธิภาพจาก Python API ที่ช่วยให้สามารถติดตั้งปลั๊กอินเสริมต่างๆ และ Package ให้โปรแกรมมีประสิทธิภาพในการทำงานมากยิ่งขึ้น ช่วยให้งานเขียนโค้ด ทำได้อย่างรวดเร็วและประหยัดเวลา สามารถสลับการทำงานบน Project ที่ทำอยู่ได้อย่างรวดเร็ว โปรแกรมนี้ก็รองรับการใช้งานบนระบบปฏิบัติการ Windows Linux และ macOS ได้เป็นอย่างดีด้วยเช่นกัน
                   วิชวลสตูดิโอโค้ด (อังกฤษ : Visual Studio Code) เป็นโปรแกรมแก้ไขซอร์สโค้ดที่พัฒนาโดยไมโครซอฟท์สำหรับ Windows , Linux และ macOS มีการสนับสนุนสำหรับการดีบัก การควบคุม Git ในตัวและ GitHub การเน้นไวยากรณ์ การเติมโค้ดอัจฉริยะ ตัวอย่าง และ code refactoring สามารถปรับแต่งได้หลายอย่าง ให้ผู้ใช้สามารถเปลี่ยนธีม แป้นพิมพ์ลัด การตั้งค่า และติดตั้งส่วนขยายที่เพิ่มฟังก์ชันการทำงานเพิ่มเติม ซอร์สโค้ดนั้นฟรีและโอเพนซอร์สและเผยแพร่ภายใต้สิทธิ์การใช้งาน MIT ไบนารีที่คอมไพล์แล้วเป็นฟรีแวร์และฟรีสำหรับการใช้ส่วนตัวหรือเพื่อการค้า
                   CMS (Content Management System) คือ ระบบจัดการเนื้อหาเว็บไซต์ หรือที่เรียกกันว่า “ระบบหลังบ้าน” ระบบจัดการเนื้อหา (CMS) ได้รับการออกแบบมาเพื่อช่วยผู้ใช้งาน หรือ เว็บมาสเตอร์ จัดการทรัพยากรประเภทเนื้อหาและข้อมูลต่าง ๆ ไม่ว่าจะเป็นการเพิ่ม ,ลบ ,แก้ไข เนื้อหา เช่น บทความ ,ไฟล์รูปภาพ, วิดีโอ เพื่อให้ประกอบกันเป็นเว็บไซต์ที่สมบูรณ์และมีข้อมูลครบถ้วนก่อนที่หน้าเว็บไซต์นั้นๆ จะถูกนำไปเผยแพร่บนโลกอินเตอร์เน็ต
                   เว็บไซต์  (Website) คือ สื่อนำเสนอข้อมูลบนเครื่องคอมพิวเตอร์ หรือคือการรวบรวม หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ซึ่งต้องเปิดด้วยโปรแกรมเฉพาะทางที่เรียกว่า Web Browser โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ และเว็บไซต์นั้นถูกสร้างขึ้นด้วยภาษาทางคอมพิวเตอร์ที่เรียกว่า HTML (Hyper Text Markup Language) และได้มีการพัฒนาและนำภาษาอื่นๆเข้ามาร่วมด้วย เพื่อให้มีความสามารถมากขึ้น เช่น PHP , SQL , Java เป็นต้น
                   เว็บไซต์ นั้นมีคำศัพท์เฉพาะทางหลายคำ เช่น เว็บเพจ (web page) และ โฮมเพจ (home page) เป็นต้น ปัจจุบันการออกแบบ เว็บไซต์ไม่ใช่เรื่องยากอีกต่อไป เนื่องจากมีเครื่องมือในการ ออกแบบ เว็บไซต์ ให้เลือกมากมาย
                   เว็บไซต์ถูกสร้างขึ้นด้วยวัตถุประสงค์ที่แตกต่างกัน เช่นเพื่อแสดงข้อมูล ข่าวสาร ของบริษัท ห้างร้าน หรือองค์กรต่าง ๆ หรืออาจจะออกแบบเว็บไซต์เพื่อขายสินค้าออนไลน์ เว็บไซต์ประเภทนี้จะมีความซับซ้อนในการ ออกแบบเว็บไซต์ มากกว่าเว็บไซต์ ประเภทแสดงข้อมูล ข่าวสาร เนื่องจากจะต้อง มีระบบต่าง ๆ เข้ามาเกี่ยวข้อง เช่น ระบบตะกร้าสินค้า ระบบชำระเงิน เป็นต้น โดยเว็บไซต์ส่วนใหญ่นั้นก็มีทั้งเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี และเว็บไซต์ที่ต้องสมัครสมาชิกและเสียค่าบริการจึงจะเข้าใช้งานเว็บได้ ซึ่งข้อมูลในเว็บก็จะมีหลากหลายแบบ ข้ึนอยู่กับความต้องการนำเสนอของเจ้าของเว็บไซต์ การเรียกดูเว็บไซตจ์ะเรียกดูผ่านทางซอฟต์แวร์ ในลักษณะของเบราวเ์ซอร์
ขึ้นอยู่กับวัตถุประสงค์ของผู้ทำเว็บไซต์นั้นๆ เช่น แสดงข้อมูลข่าวสารต่างๆ , ข้อมูลบริษัท , ขายสินค้า
                   เว็บเบราว์เซอร์ (Web browser) คือโปรแกรมคอมพิวเตอร์ที่ใช้ในการท่องเว็บ และมีการจัดเก็บข้อมูลสารสนเทศต่างๆ ด้วยภาษาเฉพาะ เช่น ภาษา HTML ซึ่งก็เปรียบเสมือนกับเป็นเครื่องมือที่ใช้ในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ นอกจากนี้ยังสามารถดูเอกสารในเว็บเซิร์ฟเวอร์ได้ ไม่ว่าเว็บเหล่านั้นจะแสดงข้อมูลในลักษณะของภาพ ระบบมัลติมีเดีย รูปภาพหรือข้อความ ในปัจจุบันเว็บเบราว์เซอร์ที่รองรับระบบ HTML 5 สามารถอ่าน CSS 3 ได้อย่างสวยงาม และกำลังได้รับความนิยมมากที่สุด ก็มี 4 ประเภทดังนี้
                       (1)  Internet Explorer
                       (2)  Mozilla Firefox
                       (3)  Google Chrome
                       (4)  Safari
                   โฮมเพจ (Home Page) ก็คือหน้าแรกของเว็บไซต์เมื่อเปิดเข้าไปยังเว็บไซต์ใดเว็บไซต์หนึ่ง โดยหน้าแรกนี้จะรวมเมนูและเรื่องราวต่างๆ ไว้มากมาย ซึ่งก็มีความสำคัญเป็นอย่างมาก เพราะหากหน้าแรกมีการออกแบบได้อย่างสวยงามและจัดหน้าอย่างเป็นระเบียบก็จะทำให้ผู้ชมเกิดความสนใจและอยากเข้าชมเว็บมากขึ้น
                   เว็บเพจ (Web Page) ก็คือหน้าเอกสารต่างๆ ที่อยู่ในรูปของ HTML โดยจะนำเสนอข้อมูลหรือเรื่องราวต่างๆ เป็นหน้าๆ ไป และใช้การเชื่อมโยงเพื่อให้สามารถคลิกไปหน้าเว็บเพจแต่ละหน้าได้ง่ายขึ้น
                   เว็บ Static คือเว็บที่แสดงผล เพื่อให้ความรู้หรือข้อมูลแก่ผู้เข้าชมเว็บเพียงอย่างเดียว ไม่สามารถโต้ตอบหรือรับส่งข้อมูลกับผู้ที่เข้าชมเว็บได้ ซึ่งส่วนใหญ่แล้วเว็บไซต์ประเภทนี้ ก็จะเป็นเว็บ Gallery รูปภาพ เว็บของบริษัทหรือองค์กรต่างๆ และเว็บให้ความรู้ทั่วไป
                   เว็บ Dynamic เป็นเว็บไซต์ที่สามารถตอบโต้ และรับส่งข้อมูลระหว่างผู้เข้าชมกับเว็บไซต์ได้ ซึ่งเว็บเหล่านี้ส่วนใหญ่ก็จะมีระบบเว็บบอร์ด รวมไปถึง Social Media ประเภทต่างๆ มีการสมัครสมาชิก หรือเป็นเว็บขายสินค้าออนไลน์ที่มีระบบแชทกับผู้ขาย เป็นต้น
                   Web Service เป็นบริการด้านข้อมูล ที่สามารถดึงข้อมูลของอีกเว็บหนึ่งไปแสดงผลในอีกเว็บหนึ่งได้
                   Hosting เป็นพื้นที่ของคอมพิวเตอร์แม่ข่าย ที่ทางผู้ให้บริการได้ทำการจัดสรรมาให้เช่า โดยส่วนใหญ่จะมีการให้เช่าเป็นแบบรายเดือน รายปีหรือตามแต่ผู้ให้บริการกำหนด
                   อินเตอร์เน็ต (Internet) เป็นตัวกลางในการเชื่อมต่อให้ผู้คนสามารถท่องเว็บไซต์ต่างๆ ได้อย่างง่ายดาย และช่วยให้กลุ่มองค์กร ธุรกิจหรือบริษัทสามารถนำเสนอข้อมูลของตนลงบนอินเทอร์เน็ต ผ่านทางเว็บไซต์ เป็นการให้ความรู้และแลกเปลี่ยนข้อมูลข่าวสารต่อกันได้อย่างมีประสิทธิภาพ
                   ปัจจุบันการออกแบบเว็บไซต์ที่ดีนั้นจะต้องแสดงผลได้ดีบนหลากหลายอุปกรณ์ไม่ว่าจะเป็นเครื่องคอมพิวเตอร์ , สมาร์ทโฟนหรือแท็บเล็ต ทั้งนี้เพราะเว็บไซต์ไม่ได้จำกัดอยู่บนเครื่องคอมพิวเตอร์เพียงอย่างเดียวแต่ เว็บไซต์สามารถเปิดได้บนอุปกรณ์ที่หลากหลาย มากขึ้น

                   ภาพรวมของเว็บไซต์ สิ่งที่จำเป็นอย่างยิ่ง คือ การกำหนดวัตถุประสงค์ของการจัดทำให้ชัดเจนซึ่งแนวทางในการออกแบบและพัฒาเว็บไซต์ให้เกิดประโยชน์สูงสุดได้นั้น จำเป็นที่จะต้องเข้าใจถึงลักษณะของเว็บไซต์และจำแนกแยกแยะได้ว่าเว็บไซต์เหล่านั้นมีความแตกต่างหรือเหมือนกันประการใด รวมถึงหน้าที่หลักเฉพาะตัวอย่างไรบ้าง โดยเว็บไซต์สามารถแบ่งออกเป็นกลุ่มใหญ่ ๆ ได้ 8 ประเภท ตามลักษณะของเนื้อหาและรูปแบบของเว็บไซต์ กลุ่มเว็บไซต์ ทั้ง 8 ประเภท ได้แก่
                   (1)  เว็บท่า (Portal Site) : อาจเรียกอีกชื่อหนึ่งว่า เว็บวาไรตี้ ซึ่งหมายถึงเว็บที่ให้บริการต่างๆ ไว้มากมาย มักประกอบไปด้วยบริการ เสิร์ชเอ็นจิ้น ที่รวมลิงค์ของเว็บไซต์ที่น่าสนใจไว้มากมายให้เราได้ค้นหา รวมถึงบริการที่เกี่ยวกับเรื่องราวที่มีสาระและบันเทิงหลากหลายประเภท ดูหนังฟังเพลง ดูดวง ท่องเที่ยว ไอที เกม สุขภาพ ฯลฯ
                   (2)  เว็บข่าว (News Site) : เป็นเว็บที่สร้างขึ้นโดยองค์กรข่าวหรือสถาบันสื่อสาร มวลชนต่างๆ ที่มีสื่อมวลชนประเภทต่างๆ ของตนอยู่เป็นหลัก เช่น สถานีโทรทัศน์ สถานีวิทยุ หนังสือพิมพ์ นิตยสาร วรสาร หรือแม้กระทั่ง กระทรวง ทบวง กรมต่างๆ ซึ่งผู้ใช้สามารถค้นหาข้อมูลและติดตามข่าวได้ทุกเวลา
                   (3)  เว็บข้อมูล (Information Site) : เป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้น ข้อมูลข่าวสาร หรือข้อเท็จจริงต่างๆ ที่น่าสนใจ องค์กรต่างๆ มักสร้างเว็บข้อมูลของตนขึ้นมาเพื่อเป็นช่องทางให้ประชาชนหรือกลุ่มบุคคลที่ สนใจ เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตน
                   (4)  เว็บธุรกิจหรือการตลาด (Business/Marketing Site) : สร้างขึ้นโดย องค์กรธุรกิจต่าง ๆ มีจุดประสงค์ในการประชาสัมพันธ์องค์กรและเพิ่มผลกำไรทางการค้าด้วย โดยเนื้อหาส่วนใหญ่หรือเกือบทั้งหมดมักจะเป็นการนำเสนอเกี่ยวกับรายละเอียด และความน่าสนใจของสินค้าและบริการ
                   (5)  เว็บการศึกษา (Educational Site) : ส่วนใหญ่สร้างขึ้นโดยสถาบันการศึกษาต่างๆ หรือองค์กรทั้งของภาครัฐและเอกชนที่มีนโยบายในการเผยแพร่ความรู้ และให้โอกาสในการค้นคว้าหาข้อมูลเพื่อการศึกษาแก่นักเรียน นิสิต นักศึกษา รวมถึงประชาชนทั่วไป เว็บการศึกษาให้ข้อมูลเกี่ยวกับการเรียนรู้ที่เป็นทางการและไม่เป็นทางการ บริการการเรียนรู้แบบออนไลน์ หรือที่เรียกว่า อีเลิร์นนิ่ง (E-Learning) ต่าง ๆ
                   (6)  เว็บบันเทิง (Entertainment Site) : เป็นเว็บนำเสนอและให้บริการต่างๆ เพื่อเสริมสร้างความบันเทิง จะเป็นเรื่องราวเกี่ยวกัน ดนตรี ภาพยนตร์ ดารา กีฬา เกม ความรัก บทกลอน การ์ตูน เรื่องขำขัน รวมถึงบริการดาวน์โหลดโลโก้และริงโทนสำหรับโทรศัพท์เคลือนที่ด้วย
                   (7)  เว็บองค์กรที่ไม่แสวงหาผลกำไร (Non-profit Organization Site) : ส่วนใหญ่สร้างขึ้นโดยบุคคลหรือองค์การต่าง ๆ ที่มีนโยบายในการสร้างและช่วยเหลือสังคมโดยที่ไม่หวังผลกำไรหรือค่าตอบแทน ซึ่งกลุ่มบุคคลหรือองค์การเหล่านี้ได้แก่ สมาคม ชมรม มูลนิธี และโครงการต่างๆ โดยอาจจะมีจุดประสงค์เฉพาะที่แตกต่างกันเช่น เพื่อทำความดี สร้างสรรค์สังคม พิทักษ์สิ่งแวดล้อม ปกป้องสิทธิมนุษยชน รณรงค์ไม่สูบบุหรี่ เป็นต้น
                   (8)  เว็บส่วนตัว (Personal Site) : บางครั้งอาจเป็นเว็บของคนๆ เดียว เพื่อนฝูง หรือครอบครัวก็ได้ โดยอาจจะจัดทำขึ้นด้วยเหตุผลที่แตกต่างกัน เช่น แนะนำตนเอง แนะนำกลุ่มเพื่อน โชว์รูปภาพ แสดงความคิดเห็น เขียนไดอารี่ประจำวัน นำเสนอผลงาน ถ่ายทอดประสบการณ์เกี่ยวกับสิ่งที่เชี่ยวชาญหรือสนใจ

                   HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์ (Hypertext Document) ซึ่งพัฒนาขึ้นมาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee เป็นภาษามาตรฐานที่ใช้พัฒนาเอกสารในรูปแบบของเว็บเพจเผยแพร่บนระบบเครือข่ายอินเทอร์เน็ต มีโครงสร้างการเขียนที่อาศัยตัวกำกับ เรียกว่า แท็ก (Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรือวัตถุอื่นๆ เรียกใช้เอกสารเหล่านี้โดยการใช้โปรแกรมเว็บบราวเซอร์ (Web Browser) เช่น Mozilla Firefox, Opera , Nescape navigator, Internet Explorer ฯลฯ เป็นต้น
                   ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบันขณะที่ HTML รุ่น 5 ยังคงยังอยู่ในระหว่างการพิจารณาในการใช้งาน
โครงสร้างพื้นฐานของ HTML 
                   โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่ง ดังภาพที่ 2.1
                                       
                                                                               ภาพที่ 2.1  โครงสร้างพื้นฐานของ HTML 
การจัดโครงสร้างแฟ้มเอกสาร
                   ในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้างพื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั้งนี้เป็นเพราะว่าตัวโปรแกรมเว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้น
                   ยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้น
การแสดงผลที่เว็บเบราเซอร์
                   หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมายน้อยกว่า < ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้นๆ เช่น คำสั่งจะมีเป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันที
คำสั่งเริ่มต้นสำหรับ HTML
                   คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า < ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า > เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม / (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้นและในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษรเล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร

                   1) CSS มีประโยชน์อย่างไร ภาษา CSS (Cascading Style Sheets) มีประโยชน์หลายอย่างเลยทีเดียวซึ่งทำให้การพัฒนาเว็บเพจด้วยภาษา HTML เป็นเรื่องที่ง่ายมากขึ้น
                        1.1) ภาษา CSS จะช่วยในการจัดรูปแบบแสดงผลให้กับภาษา HTML ซึ่งจะช่วยลดการใช้ภาษา HTML ให้น้อยลง โดยเหลือเพียงแต่ส่วนที่เป็นเอกสารที่เป็นภาษา HTML เท่านั้นทำให้มีการแก้ไขและทำความเข้าใจได้ง่ายขึ้น
                        1.2) ทำให้ขนาดไฟล์ HTML น้อยลงเนื่องจาก ภาษา CSS จะช่วยลงการใช้ภาษา HTML ลงทำให้ขนาดไฟล์นั้นก็เล็กลงไปด้วยเช่นกัน
                        1.3) ภาษา CSS เป็นภาษา Style Sheets โดย Style Sheets ชุดเดียวสามารถใช้กำหนดรูปแบบการแสดงผลให้เอกสาร HTML ทั้งหน้า หรือทุกหน้ามีผลเหมือนกันได้ จึงทำให้เวลาที่มีการแก้ไขก็จะแก้ไขได้ง่ายขึ้นเพียงแก้ไข Style Sheets ที่ใช้งานเพียงชุดเดียวเท่านั้น
                        1.4) ทำให้เว็บไซต์มีมาตราฐานเพราะการใช้งาน CSS นั้นจะทำให้การแสดงผลในสื่อต่าง ๆ ถูกปรับเปลี่ยนไปได้อย่างเหมาะสม เช่น การแสดงผลบนหน้าจอ และการแสดงผลในมือถือ
                        1.5) CSS สามารถที่จะใช้งานได้หลากหลาย เว็บบราวเซอร์ ทำให้การใช้งานนั้นสะดวกมากยิ่งขึ้น
                        1.6) CSS สามารถกำหนดแยกไว้ต่างหากจากไฟล์เอกสาร HTML และสามารถนำมาใช้ร่วม กับเอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมด
                   2) พร็อปเพอร์ตี้ของ CSS (Property)
                       อิลิเมนต์ของ HTML นั้นจะประกอบไปด้วยคุณลักษณะต่างๆ เช่น ความกว้าง,ความสูง,สีข้อความ,สีพื้นหลัง,รูปแบบฟอนต์ เป็นต้น ลักษณะดังกล่าวนี้ เรียกว่า พร็อปเพอร์ตี้ (Property) ทั้งนี้หลักการของ CSS คือ การกำหนดค่าของพร็อปเพอร์ตี้แต่ละอย่างของอิลิเมนต์นั่นเอง เช่น พื้นหลังเป็นสีน้ำตาล กำหนดให้ข้อความเป็นสีฟ้า, ให้ฟอนต์เป็นชนิด Tahoma เป็นต้น สำหรับหลักการเบื้องต้นเกี่ยวกับพร็อปเพอร์ตี้ที่ควรทราบมีดังนี้
                        2.1) การกำหนดค่าของพร็อปเพอร์ตี้
                               รูปแบบการกำหนดค่าของพร็อปเพอร์ตี้จะประกอบด้วย 2 ส่วน คือ ชื่อพร็อปเพอร์ตี้ และค่าของพร็อปเพอร์ตี้ โดยคั่นระหว่างชื่อ และค่าด้วยเครื่องหมายโคลอน (Entity-name : Value) ตัวอย่างโค้ดดังแสดงในภาพที่ 2.2 

                                        

                                                                        ภาพที่ 2.2 แสดงการกำหนดค่าพร็อปเพอร์ตี้
                   กรณีที่มากกว่า 1 พร็อปเพอร์ตี้ ให้คั่นแต่ละพร็อปเพอร์ตี้ด้วยเครื่องหมาย เซมิโคลอน SemiColon (;) ในรูปแบบดังภาพที่ 2.3

                                           

                                                                 ภาพที่ 2.3 การกำหนดค่าพร็อปเพอร์ตี้ที่มากกว่าหนึ่ง
                   หรือถ้าไม่ต้องการเขียนรวมไว้ในบรรทัดเดียวกันสามารถเขียนแยกบรรทัดได้โดยมีเครื่องหมาย ; คั้นระหว่างพร็อปเพอร์ตี้
ดังภาพที่ 2.4 
                                                                

                                               ภาพที่ 2.4 ตัวอย่างการกำหนดค่าพร็อปเพอร์ตี้ที่มากกว่าหนึ่งโดยการเขียนบรรทัด
                                      2.2) การกำหนดสไตล์ชีตแบบต่างๆ
                                             การกำหนดสไตล์ชีตแบ่งออกเป็น 3 แบบ ตามลักษณะขอบเขตการแสดงผลที่มีต่ออิลิเมนต์เอกสาร ดังนี้
                                                         2.2.1) Inline Styles 
                                                                   วิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน  HTML Tag อยู่ในคำสั่ง style=""  โดยใช้รูปแบบดังภาพที่ 2.5
                                          
                                                                         ภาพที่ 2.5 การกำหนดสไตล์ชีตแบบ Inline  
                   ตัวอย่าง การกำหนดสไตล์ชีตแบบ Inline " " ดังภาพที่ 2.6
                                            
                                                                    ภาพที่ 2.6 ตัวอย่างการกำหนดสไตล์ชีตแบบ Inline
                                                         2.2.2) Internal Style Sheet
                                                                  วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำสั่ง Style Sheet ไว้ระหว่าง ... สำหรับ Web Browser รุ่นเก่าที่ไม่สนับสนุนคำสั่ง Style Sheet หรือ Disable Style Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วย เพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คำสั่งภาษา HTML การกำหนดสไตล์ชีตแบบ Internal สามารถเขียนกำหนดรูปแบบได้ดังภาพที่ 2.7
                                             
                                                                       ภาพที่ 2.7 การกำหนดสไตล์ชีตแบบ Internal
                   ตัวอย่าง การกำหนดสไตล์ชีตแบบ Internal ดังภาพที่ 2.8       
                                            
                                                                 ภาพที่ 2.8 ตัวอย่างการกำหนดสไตล์ชีตแบบ Internal
                                                         2.2.3) External Style Sheet
                                                                   วิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำเอาคำสั่ง Style Sheet ที่อยู่ใน มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำการผนวกไฟล์ของ Style Sheet นี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheet ชุดนี้ ไว้ในส่วน... โดยใช้คำสั่งดังภาพที่ 2.9
                                             
                                                                        ภาพที่ 2.9 การกำหนดสไตล์ชีตแบบ External
                   ตัวอย่าง การกำหนดสไตล์ชีตแบบ External ดังภาพที่ 2.10  และ ภาพที่ 2.11                  
                                             
                                                                 ภาพที่ 2.10 ตัวอย่างการกำหนดสไตล์ชีตแยกในไฟล์ .css 
                                             
                                                                     ภาพที่ 2.11 ตัวอย่างการเรียกใช้สไตล์ชีตจากภายนอก

                   Bootstrap คือชุดคำสั่งที่ประกอบด้วยภาษา CSS, HTML และ Javascript เป็นชุดคำสั่งที่ถูกพัฒนาขึ้นมาเพื่อกำหนดกรอบ หรือ รูปแบบการพัฒนาเว็บไซต์ในส่วนของการปฏิสัมพันธ์กับผู้ใช้งานเว็บไซต์ ( User Interface ) เราจึงสามารถเรียก Bootstrap ว่าเป็น Front-end framework คือใช้สำหรับ พัฒนาเว็บไซต์ส่วนการแสดงผล ซึ่งแตกต่างจากภาษาประเภท Server Side Script อย่าง PHP, Python หรือภาษาอื่น ๆ
                   Bootstrap คือ Frontend Framework ยี่ห้อหนึ่งที่ช่วยให้เราสามารถสร้างหน้าเว็บให้ตรงตามแบบที่เราต้องการได้ง่ายขึ้น เพราะ Bootstrap มีทั้งระบบ grid ที่ช่วยเรื่องการวาง layout ที่รองรับในแบบ responsive และมี component สำเร็จรูปให้ใช้ ถ้าเราอยากได้ของที่ต้องใช้บ่อยๆ แต่ไม่อยากคราฟเองเช่น table card หรือปุ่มสวยๆ bootstrap ก็สามารถช่วยให้เราสร้างขึ้นมาได้ง่ายๆ ตามแบบที่ bootstrap ได้วางไว้อีกด้วย
                   Bootstrap ถูกพัฒนาขึ้นโดย Mark Otto และ Jacob Thornton ทีมพัฒนาของ Twitter Inc. ก่อนหน้านี้ใช้ชื่อว่า Twitter Blueprint และเปิดให้นักพัฒนาสามารถนำไปใช้งานพัฒนาเว็บไซต์ได้แบบฟรี ( Open Source ) ในชื่อว่า Bootstrap Framework
การติดตั้ง bootstrap การติดตั้ง bootstrap สามารถติดตั้งผ่าน cdn โดยการประกาศใน head ได้เลย ดังภาพที่ 2.12
                   
                                                              ภาพที่ 2.12 การติดตั้ง bootstrap สามารถติดตั้งผ่าน cdn

                     jQuery คือ JavaScript Library ยอดนิยมตัวหนึ่งที่โปรแกรมเมอร์นำมาใช้พัฒนาเว็บไซต์ สามารถรองรับการทำงานทุกเบราเซอร์ โดยไลบารี่นี้มีวัตถุประสงค์ที่จะเอามาแก้ปัญหาการใช้งาน JavaScript ที่มีความยุ่งยากในการใช้งานให้สามารถใช้งานได้ง่ายขึ้น เช่น การรวบคำสั่งหลายๆ บรรทัดของ JavaScript ที่ซับซ้อนมาเป็นการใช้งานผ่าน jQuery เพียงแค่ 1 บรรทัด หรือ การเรียกใช้งานคำสั่งประเภท Ajax, DOM ให้ใช้งานได้ง่ายขึ้นเป็นต้น บริษัทใหญ่ๆ หลายบริษัททั่วโลกนำ JQuery ไปใช้งานในเว็บของเขา เช่น Google, Microsoft, IBM ทำให้ JQuery ถูกใช้งานได้อย่างกว้างขวาง ดังภาพที่ 2.14
                                                       
                                                                                          ภาพที่ 2.14  jQuery
                     เราสามารถนำ jQuery มาใช้งานในรูปแบบสร้างเอฟเฟต์ให้กับเว็บไซต์ของเราได้ ไม่ว่าจะเป็นการซ่อนและแสดงผล การเฟดหรือค่อยๆ แสดงผลจากภาพจางมาเป็นชัดขึ้น การเลื่อนเข้ามาแบบสไลเดอร์ การทำอะนิเมชั่นต่างๆ เช่น เคลื่อนมาจากมุมบนขวา หรือบิดวัตถุ หรือการปรับขนาดของวัตถุที่สนใจ นอกจากนี้แล้ว jQuery ยังสามารถนำไปใช้กับการเพิ่ม ลบ ฟอร์ม หรือตรวจสอบข้อมูลใน HTML ได้ และสามารถจัดการในส่วนของ Classes ต่างๆ อีกด้วย
                     ในบางครั้ง เราสามารถใช้ jQuery ร่วมกับความสามารถเสริมอื่นๆ ที่ผู้พัฒนาได้นำ jQuery ไปรวมอยู่ด้วย เช่น หากเราต้องการใช้สไลเดอร์สวยๆ เราก็อาจจะเรียกใช้งาน Owl Carousel มาใช้ประกอบคู่กัน หรือถ้าอยากได้แบบเลย์เอาท์แบบ Grid Layout ก็สามารถใช้ Masonry Desandro ได้

                     Node.js ถูกพัฒนาและทำงานด้วยใช้ Chrome V8 engine สำหรับคอมไพล์ภาษา JavaScript ให้เป็นภาษาเครื่องด้วยการคอมไพล์แบบ Just-in-time (JIT) เพื่อเพิ่มประสิทธิภาพการทำงานของภาษา JavaScript จากที่แต่เดิมมันเป็นภาษาที่มีการทำงานแบบ Interpreted
                     Node.js เป็นโปรแกรมที่สามารถใช้ได้ทั้งบน Windows, Linux และ Mac OS X นั่นหมายความว่าคุณสามารถเขียนโปรแกรมในภาษา JavaScript และนำไปรันได้ทุกระบบปฏิบัติการที่สนับสนุนโดย Node.js นี่เป็นแนวคิดของการเขียนครั้งเดียวแต่ทำงานได้ทุกที่ (Write once, run anywhere)

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