ภาษาและเครื่องมือในการสร้างเว็บไซต์
ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่
1. HTML (ย่อมาจาก Hyper Text Markup Language)
เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ     ภาษา HTML นั้นเป็นภาษาประเภท Markup ไม่จัดเป็นภาษาประเภท Programming  สามารถที่จะเรียนรู้ได้ง่าย
2. CSS (ย่อมาจาก Cascading Style Sheets)
เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ ถูกกำหนดขึ้นเพื่อใช้เสริมภาษา HTML ให้สามารถจัดรูปแบบการแสดงผลให้กับเอกสาร HTML ได้สมบูรณ์แบบมากขึ้น
3. XHTML (ย่อมาจาก Extensible HyperText Markup Language)
เป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป
ก่อนจะลงมือเขียนเว็บเพจ ขอให้มีความรู้ความเข้าใจในภาษาพื้นฐานเหล่านี้ก่อน โดยศึกษาได้จากบทเรียน
ภาษา XHTML
           XHTML (ย่อมาจาก Extensible HyperText Markup Language) XHTML เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML (Extensible Markup Language) และ HTML มารวมกันกลายเป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป
จากข้อเสียของ HTML ที่เมื่อแสดงผลผ่านบราวเซอร์ของค่ายต่างๆ เช่น Internet Explorer, Firefox, Netscape, Opera และอื่นๆ  ได้ผลที่แตกต่างกัน เว็บเพจที่ออกแบบมาอย่างดีของเรา อาจดูสวยงามถูกต้องใน IE แต่กลับผิดเพี้ยนไปเมื่อดูด้วย Firefox
องค์กร W3C จึงได้นำ HTML 4.0 มาปรับปรุงใหม่ โดยยึดหลักการของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การใช้งานมีความเข้มงวด และเป็นมาตรฐานยิ่งขึ้น ซึ่งจะเป็นแนวทางให้บราวเซอร์ค่ายต่างๆ พัฒนาโปรแกรมเว็บบราวเซอร์โดยใช้มาตรฐานเดียวกัน รวมไปถึงเว็บบราวเซอร์ที่ติดตั้งบน Platforms ต่างๆ เช่น PDA โทรศัพท์มือถือ ด้วย
ดังนั้น ต่อไปไม่ว่าจะแสดงเว็บเพจของเราในบราวเซอร์ค่ายใด ก็สามารถแสดงผลได้เหมือนกัน อย่างถูกต้อง และการใช้งานอินเตอร์เน็ตจะไม่จำกัดอยู่แค่บนเครื่องคอมพิวเตอร์ แต่สามารถขยายการใช้งานออกไปได้กว้างขึ้น ไม่ว่าจะเป็น โทรศัพท์มือถือ หรืออุปกรณ์ต่างๆ
ข้อดีของภาษา XHTML
การเริ่มต้นใช้งานไม่ยุ่งยาก เนื่องจากคำสั่งใน XHTML พัฒนามาจากภาษา HTML4 ซึ่งนักเขียนเว็บคุ้นเคยกันดีอยู่แล้ว เพียงแต่เขียนรูปแบบเหมือน XML นอกจากนี้เว็บเพจที่สร้างขึ้นสามารถใช้กับบราวเซอร์ที่มีทันที
การใช้คำสั่งและโมดูลร่วมกันได้ ในภาษา XHML จะให้เราสามารถพัฒนา Element Attribute และโมดูลการทำงานของเราเอง และสามารถส่งต่อให้ผู้อื่นสามารถนำไปใช้ ทำให้นักสร้างเว็บคนอื่นสามารถนำคำสั่งหรือโมดูลเราไปใช้ได้ทันที โดยไม่ต้องเสียเวลาคิดใหม่
 การพัฒนาบราวเซอร์ทำได้ง่ายและสะดวก เนื่องจากการเขียนเว็บด้วย XHTML จะมีรูปแบบแน่นอนตายตัว ดังนั้นการออกแบบและพัฒนาบราวเซอร์จะไม่ต้องเขียนโปรแกรมรองรับรูปแบบเพี้ยน มากนัก
การทำงานเข้ากับทุกระบบ เพราะ XHTML เป็นภาษาที่ไม่ซับซ้อนและมีความแน่นอน จึงไม่จำเป็นต้องใช้บราวเซอร์และโปรเซสเซอร์ในการประมวลผลที่สูงมากนัก ซึ่งส่งผลทำให้อุปกรณ์ต่างๆ พัฒนาระบบให้สามารถเปิดใช้เว็บได้มากยิ่งขึ้น

CSS คือภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML คำว่า CSS ย่อมาจาก Cascading Style Sheets (อาจเรียกว่า สไตล์ชีท หรือซีเอสเอส ก็ได้) เป็นภาษาที่มีรูปแบบการเขียน (Syntax) ที่เฉพาะ ซึ่งกำหนดมาตรฐานโดยองค์กร W3C (World Wide Web Consortium) 
เมื่อเราทราบแล้วว่าการเขียน CSS สามารถทำให้เว็บเพจของเราดูสวยงามขึ้น ขั้นตอนต่อไปคือวิธีการเขียน CSS ใน HTML , รูปแบบคำสั่ง CSS , และการนำไปประยุกต์ใช้ในส่วนต่างๆบนหน้าเว็บเพจ  
การเขียน CSS ใน HTML (Insert a Style Sheet) 
เราสามารถเขียนคำสั่ง CSS กับเอกสาร HTML ได้ 3 รูปแบบ ได้แก่ เขียน CSS ภายในแท็ก(Inline Styles) , เขียน CSS ภายในเอกสาร HTML (Internal Style Sheet) , และเขียน CSS ภายนอกเอกสาร HTML (External Style Sheet) โดยมีรายละเอียดดังนี้ 
1. เขียน CSS ภายในแท็ก (TAG) HTML (หรืออินไลน์:inline styles) เป็นการแทรกคำสั่ง CSS ลงในส่วนของแท็กนั้นๆ โดยทำหน้าที่เป็นเสมือนแอททริบิวท์(Attribute) ของแท็กนั้นๆ มีรูปแบบคือ style = " คำสั่ง CSS "  
ตัวอย่าง
                    <p> This is normal text. </p>
                    <p style="text-decoration:underline;font-color:red;"> 
                           This is inline styles. 
                    </p>

ผลลัพธ์
                     
                           This is inline styles. 
                    </p>

ผลลัพธ์
                     This is normal text.
                     
                     This is inline styles.

Web Application (เว็บแอพพลิเคชั่น) คืออะไร Web Application (เว็บแอพพลิเคชั่น) คือ Application (แอพพลิเคชั่น) ที่ถูกเขียนขึ้นมาเพื่อเป็น Browser (เบราเซอร์) สำหรับการใช้งาน Webpage (เว็บเพจ) ต่างๆ ซึ่งถูกปรับแต่งให้แสดงผลแต่ส่วนที่จำเป็น เพื่อเป็นการลดทรัพยากรในการประมวลผล ของตัวเครื่องสมาร์ทโฟน หรือ แท็บเล็ต ทำให้โหลดหน้าเว็บไซต์ได้เร็วขึ้น อีกทั้งผู้ใช้งานยังสามารถใช้งานผ่าน Internet (อินเทอร์เน็ต)และ Intranet (อินทราเน็ต) ในความเร็วตํ่าได้
โปรแกรม Flash 
โปรแกรม Flash เป็นซอฟต์แวร์ที่ช่วยในการสร้างสื่อมัลติมีเดีย, ภาพเคลื่อนไหว (Animation), ภาพกราฟิกที่มีความคมชัด เนื่องจากเป็นกราฟิกแบบเว็คเตอร์(Vector), สามารถเล่นเสียงและวีดิโอ แบบสเตริโอได้, สามารถสร้างงานให้โต้ตอบกับ
ผู้ใช้(Interactive Multimedia) มีฟังก์ชั่นสำหรับการเขียนโปรแกรม (Action Script) และยังทำงานในลักษณะ CGI โดยเชื่อมต่อกับการเขียนโปรแกรมภาษาอื่นๆ ได้มากมาย เช่น ภาษา PHP, JSP, ASP, ASP.NET, C/C++, C#, C#.NET, VB, VB.NET, JAVA และอื่นๆ โดยเฉพาะข้อดีของโปรแกรม Flash คือ ความสามารถในการบีบอัดไฟล์ให้มีขนาดเล็ก มีผลทำให้แสดงผลได้อย่างรวดเร็ว นอกจากนั้นยังแปลงไฟล์ไปอยู่ในฟอร์แมตอื่น ได้หลากหลาย เช่น avi, mov, gif, wav, emf,eps, ai, dxf, bmp, jpg, gif, png เป็นต้น
โปรแกรม Flash เริ่มมีชื่อเสียงประมาณปี พ.ศ. 2539 จนถึง ปัจจุบันได้ถูกนำมาใช้งานอย่างแพร่หลาย โดยเฉพาะเทคโนโลยีเว็บ ทำให้การนำเสนอทำได้อย่างน่าสนใจ นอกจากนั้น โปรแกรม Flash ยังสามารถสร้างแอพพลิเคชั่น (Application) เพื่อใช้ทำงานต่างๆ รองรับการใช้งานกับอุปกรณ์ที่ เชื่อมต่อกับระบบเครือข่ายอินเตอร์เน็ต และทำงานได้กับหลายๆ แฟลตฟอร์ม (Platform)
WYSIWYG คืออะไร

WYSIWYG ย่อมาจาก What You See Is What You Get (วอท ยู ซี อิส วอท ยู เก็ท) แปลว่า คุณเห็นอย่างไรคุณก็ได้รับอย่างนั้น คือ ลักษณะของเอกสารและภาพกราฟฟิกที่คุณเห็นในจอคอมพิวเตอร์ เมื่อพิมพ์ออกมาแล้วลักษณะของเอกสารหรือภาพกราฟฟิกที่คุณได้ก็จะเหมือนกับภาพที่ปรากฏในจอคอมพิวเตอร์ ถือเป็นสมรรถนะอย่างหนึ่งของโปรแกรมประเภทประมวลผลคำ หรือโปรแกรมการจัดพิมพ์ ซึ่งสามารถแสดงตัวอย่างเอกสารก่อนการพิมพ์ และสามารถทำให้เอกสารที่พิมพ์ออกมามีลักษณะเหมือนในจอคอมพิวเตอร์ นั้นคือ ถ้ามองเห็นบนจอภาพอย่างไร สั่งพิมพ์ออกมา ก็จะได้ผลอย่างที่เห็นนั้น
 ตัวอย่างเช่น ในการสร้างและออกแบบ web site หรือ web page มักจะใช้โปรแกรมประเภท Web Design ซึ่งมีคุณสมบัติในการใช้งานในแบบ WYSIWYG เพื่อให้การทำ web site หรือ web page นั้น ทำมาอย่างไร ก็แสดงผลอย่่างนั้น ไม่ผิดเพัี้ยนไป อีกทั้งยังง่ายต่อการใช้ เพราะผู้ใช้ไม่จำเป็นต้องมานั่งเขียนโค๊ด HTML เอง แบบว่าไม่มีความรู้เรียกการเขียนโปรแกรมก็ใช้ได้ เช่น โปรแกรม Dreamweaver , WYSIWYG Web Builder, FrontPage และ XSitePro เป็นต้น

      อีกตัวอย่างที่จะใช้หลักของ WYSIWYG ก็คือ CMS Joomla ซึ่งมีฟีเจอร์ TinyMCE (ไทนี่เอ็มซีอี) ที่ช่วยในการสร้างหรือเขียนบทความ โดยที่แสดงผลยังไงก็จะได้รับอย่างนั้นดังตัวอย่างดังนี้

1.แถบเครื่องมือ Editor TinyMCE 
  
2.เลือกใช้ Insert template ก็จะเห็นหน้าตาของรูปแบบที่เราต้องการ


3.หน้าแสดงผลก็จะเห็นว่า WYSIWYG ไม่ผิดเพี้ยนไปจากเดิมเลย

ความรู้เบื้องตันเกี่ยวกับ ภาษาHTML
        
        2.1 ภาษา HTML
            HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (TAG) ควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถุ     อื่น ๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วย HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ www เติบโตขยายตัวอย่างกว้างขวาง 

        2.2 การใช้โปแกรม Notepad
   ในการสร้าง Homepage สามารถทำได้โดย
       1. การใช้โปรแกรมสำเร็จรูป และ   
       2. การใช้โปรแกรม Notepad 
       ซึ่งในบทเรียนนี้จะสอนการเขียนโฮมเพจด้วยภาษา HTML โดยใช้โปรแกรมNotepad ในระบบปฏิบัติการ windows ซึ่งต้องเขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad
       Notepad นี้จัดเป็นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรือเขียนภาษา HTML ได้  และ Notepad นี้เป็นโปรแกรมที่นิยมใช้ในการเขียนโฮมเพจ สามารถใช้งานได้ง่าย และเป็นโปรแกรมที่ทำงานบนระบบ Windows
        การเรียกใช้งานโปรแกรม Notepad สามารถทำได้ดังนี้
คลิกที่ Start --> เลือก Programs --> เลือก Accessories --> เลือก Notepad 

ได้โปรแกรม Notepad สำหรับเขียนโฮมเพจ ดังนี้

ทดสอบการใช้โปรแกรม Notepad โดยพิมพ์คำสั่งพื้นฐานของภาษา HTML  ดังนี้

        2.3  การบันทึกแฟ้มและการเปิดแฟ้ม HTML
            เมื่อเราออกแบบเว็บเพจได้ตามต้องการแล้ว การที่จะบันทึกงาน ให้เลือกคำสั่ง File>Save As เพื่อบันทึกไฟล์ในชื่อใหม่ ดังภาพ

ต่อไป ให้ทำตามขั้นตอน ดังภาพ
เลือกโฟล์เดอร์ที่เก็บไฟล์งาน   ให้ตั้งชื่อไฟล์ โดยใส่นามสกุลเป็น .html     คลิกปุ่ม Save เพื่อสั่งบันทึกไฟล์
         นอกจากนี้ ยังมีรูปแบบในการบันทึกเว็บเพจที่ควรรู้อีก 3 วิธี คือ 
วิธีที่ 1 เลือกคำสั่ง File>Save เพื่อบันทึกไฟล์ในชื่อเดิม
วิธีที่ 2 เลือกคำสั่ง File>Save All บันทึกไฟล์ทั้งหมดที่มีการเปลี่ยนแปลงแก้ไข
วิธีที่ 3 เลือกคำสั่ง File>Save to Remote Server ทำการบันทึกเว็บเพจและอัพโหลดไปยังเซิร์ฟเวอร์
การเปิดแฟ้ม HTML

      เป็นการนำแฟ้มมาทำการแก้ไข เปลี่ยนแปลง หรือเพิ่มข้อมูลลงไป ซึ่งการเปิดแฟ้มของโปรแกรม Notepad จะเหมือนกับโปรแกรมอื่น ๆ เช่น  Microsoft Word, Microsoft Excel ฯลฯ แต่จะต้องบอกประเภทของแฟ้มก่อน ซึ่งมีขั้นตอน ดังนี้
 1) คลิกที่เมนู File 
 2) เลื่อนเมาส์มาที่ Open 
 3) ในช่อง Save in ให้ทำการเลือกไดรฟ์และโฟล์เดอร์ที่จะเปิดแฟ้ม
 4) ในช่อง File of type ให้เลือกประเภท All Files 
 5) คลิกไฟล์ที่ต้องการเปิด
 6) คลิกที่ปุ่ม Open

       2.4  โครงสร้างของภาษา HTML html จะมีองค์ประกอบหลักๆ อยู่ 2 ส่วน คือ
•       ข้อความที่ต้องการให้แสดงบนจอภาพ
•       ข้อความที่เป็นคำสั่ง
โดยคำสั่งในเอกสาร html นี้จะเรียกว่า แท็ก (Tag) โดยแท็กจะต้องขึ้นต้นด้วย < ตามด้วย ชื่อแท็ก ปิดท้ายด้วย > ดังนี้<Tag name>ซึ่งจะเรียกว่า แท็กเปิดแล้วจะต้องปิดท้ายข้อความด้วยแท็กปิด ซึ่งจะมีลักษณะดังนี้ </Tag name>เรามาดูรูปแบบเต็ม ๆ กัน
<Tag name> ข้อความที่ต้องการให้แสดง</Tag name>
ชื่อแท็กต่างๆ สามารถพิมพ์ตัวใหญ่หรือตัวเล็กก็ได้ความหมายเหมือนกัน

โครงสร้างของภาษา html จะประกอบด้วย 2 ส่วนด้วยกัน คือส่วนที่เป็นส่วนหัว (head) และส่วนเนื้อหา (body) โดยมีรูปแบบภาษาดังนี้
<html>
       <head>
           <title>ข้อความที่ต้องการให้แสดงบนไตเติ้ลบาร์ </title>
       </head>
       <body>
              คำสั่งและข้อความให้แสดงบน browser
      </body>
</html>

เป็นบล็อกแรกที่จะต้องมีในเอกสาร และจะครอบคลุมบล็อกต่างๆ คือ เอกสาร html ทุกเอกสารจะต้องขึ้นต้นด้วย <html> และ ปิดท้ายด้วย </html> แต่ละ file และบล็อกอื่นๆ จะถูกเขียนอยู่ในบล็อกนี้ โดยจะมีบล็อกหลักๆ อยู่ 2 บล็อกก็คือ บล็อก head และ body

เป็นส่วนหัวเรื่องของเอกสาร ภายในจำเป็นจะมี บล็อก <title>... </title> ซึ่งจะเป็นแท็กผู้เขียน html นั้นใช้ตั้งเป็นไตเติ้ลสำหรับบอกโดยรวมว่าเอกสารนั้นต้องการเสนออะไร แล้วเวลาที่จะ bookmark ชื่อที่จะ save คือชื่อที่อยู่ใน บล็อก title นี้ ชื่อไตเติ้ลนี้จะต้องมีความยาวไม่เกิน64 ตัวอักษร

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

หลังจากที่ทำการเขียนโปรแกรมไปสักระยะหนึ่ง เราหรือเพื่อนอาจจะนำโปรแกรมที่เขียนขึ้นมานั้นไปพัฒนาต่อ ซึ่งอาจจะลืมเนื้อหาสาระสำคัญแล้วทำให้ดำเนินการเขียนต่อไม่ได้ จึงต้องมีการเขียน comment เพื่อช่วยเตือนความทรงจำได้
สำหรับคำสั่ง comment จะใช้ <! เป็นแท็กเปิด และใช้ > เป็นแท็กปิดข้อความที่อยู่ระหว่าง<!...> จะไม่ถูกแสดงบน เว็บบราวเซอร์
 ชนิดตัวอักษรที่มักจะใช้กันก็คือ
•       AngsanaUPC,CordiaUPC หรือ ชนิดตัวอักษร ที่ลงท้ายด้วยUPCตัวอื่น ขนาด 14 หรือ 18 pixel (size=4 หรือ 5)
•       DB ThaiText ขนาด 14 หรือ 18 pixel (size=4 หรือ 5)
•       MS Sans Serif ขนาด 10 หรือ 12 pixel (size=2 หรือ 3)
รูปแบบที่แนะนำ
•       <FONT FACE= "MS Sans Serif" SIZE=-1>...</FONT>
•       <FONT FACE= "CordiaUPC,MS Sans Serif" SIZE=-1>...</FONT>
•       <FONT FACE= "Thonburi,MS Sans Serif" SIZE=-1>...</FONT>

รูปแบบตัวอักษรแบบ Physical Style
•       <B>...</B> สั่งให้แสดงตัวอักษรแบบหนา
•       <I>...</I> สั่งให้แสดงตัวอักษรเอน
•       <U>...</U> ช่วยเน้นข้อความด้วยการขีดเส้นใต้
•       <TT>...</TT>สั่งให้แสดงตัวอักษรแบบตัวพิมพ์ดีด(มีความกว้างของแต่ละตัวอักษรเท่ากันหมด)
•       <SUP>...</SUP>สั่งให้แสดงตัวอักษรยก(superscript)
•       <SUB>...</SUB>สั่งให้แสดงตัวอักษรแบบห้อย(subscript)

รูปแบบตัวอักษรแบบ Logical Style ที่ใช้กันบ่อยๆ เช่น
n    <ADDRESS>...</ADDRESS> กำหนดให้เป็นตัวอักษรเอน มักใช้กับที่อยู่
n    <CITE>...</CITE>สั่งให้แสดงตัวอักษรเอน ในการอ้างอิง
n    <VAR>...</VAR>สั่งให้แสดงตัวอักษรเอน ระบุตัวแปร
n    <CODE>...</CODE>สั่งให้แสดงตัวอักษรแบบ monospace ในการเขียนรหัสโปรแกรม
n    <SAMPLE>...</SAMPLE>สั่งให้แสดงตัวอักษรแบบ monospace ในการเขียนตัวอย่าง
n    <STRONG>...</STRONG>สั่งให้แสดงตัวอักษรตัวเข้มมีค่าเหมือนกับ <B>...</B>
n    <BLINK>...</BLINK>สั่งให้แสดงตัวอักษรกระพริบ (ใช้ได้เฉพาะกับ Netscape Navigator)
n    <MARQUEE>...</MARQUEE>สั่งให้แสดงตัวอักษรวิ่ง (ใช้ได้เฉพาะกับ Internet Explorer)
รูปแบบตัวอักษรแบบ พิเศษ 
ใช้เมื่อเราต้องการ ให้แสดงสัญลักษณ์ที่เราต้องการซึ่งไม่สามารถใช้แป้นพิมพ์โดยตรงได้ ออกมาบนหน้าจอ