ภาษา SQL

SQL คืออะไร

SQL ย่อมาจาก structured query language คือภาษาที่ใช้ในการเขียนโปรแกรม เพื่อจัดการกับฐานข้อมูลโดยเฉพาะ เป็นภาษามาตราฐานบนระบบฐานข้อมูลเชิงสัมพันธ์และเป็นระบบเปิด (open system) หมายถึงเราสามารถใช้คำสั่ง sql กับฐานข้อมูลชนิดใดก็ได้ และ คำสั่งงานเดียวกันเมื่อสั่งงานผ่าน  ระบบฐานข้อมูลที่แตกต่างกันจะได้ ผลลัพธ์เหมือนกัน ทำให้เราสามารถเลือกใช้ฐานข้อมูล ชนิดใดก็ได้โดยไม่ติดยึดกับฐานข้อมูลใดฐานข้อมูลหนึ่ง นอกจากนี้แล้ว SQL ยังเป็นชื่อโปรแกรมฐานข้อมูล ซึ่งโปรแกรม SQL เป็นโปรแกรมฐานข้อมูลที่มีโครงสร้างของภาษาที่เข้าใจง่าย ไม่ซับซ้อน มีประสิทธิภาพการทำงานสูง สามารถทำงานที่ซับซ้อนได้โดยใช้คำสั่งเพียงไม่กี่คำสั่ง โปรแกรม SQL จึงเหมาะที่จะใช้กับระบบฐานข้อมูลเชิงสัมพันธ์ และเป็นภาษาหนึ่ง ซึ่งแบ่งการทำงานได้เป็น 4 ประเภท ดังนี้
1. Select query ใช้สำหรับดึงข้อมูลที่ต้องการ
2. Update query ใช้สำหรับแก้ไขข้อมูล
3. Insert query ใช้สำหรับการเพิ่มข้อมูล
4. Delete query ใช้สำหรับลบข้อมูลออกไป

ปัจจุบันมีซอฟต์แวร์ระบบจัดการฐานข้อมูล (DBMS) ที่สนับสนุนการใช้คำสั่ง SQL เช่น  Oracle, DB2, MS-SQL, MS-Access นอกจากนี้ภาษา SQL ถูกนำมาใช้เขียนร่วมกับโปรแกรมภาษาต่างๆ เช่น ภาษา c/C++, VisualBasic และ Java

ประโยชน์ของภาษา SQL
1. สร้างฐานข้อมูลและ ตาราง
2. สนับสนุนการจัดการฐานข้อมูล ซึ่งประกอบด้วย การเพิ่ม การปรับปรุง และการลบข้อมูล
3. สนับสนุนการเรียกใช้หรือ ค้นหาข้อมูล

ประเภทของคำสั่งภาษา SQL
1. ภาษานิยามข้อมูล(Data Definition Language : DDL) เป็นคำสั่งที่ใช้ในการสร้างฐานข้อมูล กำหนดโครงสร้างข้อมูลว่ามี  Attribute ใด
ชนิดของข้อมูล รวมทั้งการเปลี่ยนแปลงตาราง และการสร้างดัชนี คำสั่ง : CREATE,DROP,ALTER
2. ภาษาจัดการข้อมูล (Data Manipulation Language :DML) เป็นคำสั่งที่ใช้ในการเรียกใช้ เพิ่ม ลบ และเปลี่ยนแปลงข้อมูลในตาราง    คำสั่ง : SELECT,INSERT,UPDATE,DELETE
3. ภาษาควบคุมข้อมูล (Data Control Language : DCL) เป็นคำสั่งที่ใช้ในการกำหนดสิทธิการอนุญาติ หรือ ยกเลิก การเข้าถึงฐานข้อมูล เพื่อป้องกันความปลอดภัยของฐานข้อมูล คำสั่ง : GRANT,REVOKE

ภาษา PHP

ภาษา PHP

ในบทเรียนนี้ คุณจะได้เรียนภาษา PHP ในพื้นฐาน เช่น โครงสร้างของภาษา ตัวแปร ตัวดำเนินการ คำสั่งควบคุม อาเรย์ ฟังก์ชัน และการเขียนโปรแกรมภาษา PHP แบบออบเจ็ค คุณจะเข้าใจเกี่ยวกับการสร้างคลาสและออบเจ็ค สำหรับการสอนในบทเรียนนี้จะเป็นแบบ Console และไม่ได้ครอบคลุมถึงการพัฒนาเว็บไซต์ ต่อไปมาทำความรู้จักกับภาษา PHP ก่อนที่คุณจะเริ่มต้นการเขียนโปรแกรม

PHP คือภาษาสำหรับทำงานด้านฝั่งของเซิร์ฟเวอร์ (server-side scripting) ถูกออกแบบมาสำหรับการพัฒนาเว็บไซต์ แต่มันก็ยังสามารถใช้เขียนโปรแกรมเพื่อวัตถุประสงค์ทั่วไปได้ PHP ถูกสร้างโดย Rasmus Lerdorf ในปี 1994 โดยที่ PHP ในปัจจุบันได้ถูกพัฒนาโดยทีมพัฒนาของภาษา PHP ซึ่งคำว่า PHP นั้นย่อมาจาก Personal Home Page ซึ่งในปัจจุบันนั้นหมายถึง PHP: Hypertext Preprocessor

โค้ดของภาษา PHP นั้นสามารถฝังกับโค้ดของ HTML ได้ ซึ่งมันสามารถนำไปร่วมใช้ร่วมกับระบบเว็บเท็มแพลตที่หลากหลาย ระบบจัดการเนื้อหา (CMS) หรือเว็บเฟรมเวิร์ค การทำงานของภาษา PHP นั้นเป็นแบบ Interpreter ที่ถูกพัฒนาเป็นแบบโมดูลในเว็บเซิร์ฟเวอร์ หรือ Common Gateway Interface (CGI) โดยเซิร์ฟเวอร์จะทำการรวมโค้ดที่ผ่านการแปลผล และประมวลผลเป็นหน้าเว็บเพจ และยังสามารถทำงานได้บน Command-line interface (CLI) และนอกจากนี้ภาษา PHP ยังถูกนำไปพัฒนาแอพพลิเคชันทางด้านกราฟฟิก

Interpreter มาตรฐานของภาษา PHP นั้นได้รับการสนับสนุน Send Engine ซึ่งเป็นซอร์ฟแวร์ฟรีที่ให้ใช้ภายใต้ PHP License ภาษา PHP ได้ถูกนำไปใช้อย่างกว้างขวางกับเว็บเซิร์ฟเวอร์ในทุกๆ ระบบปฏิบัติการและแพลตฟอร์ม และมันฟรี

Rasmus Lerdorf ผู้สร้างภาษา PHP

การพัฒนาของภาษา PHP นั้นเริ่มต้นขึ้นในปี 1995 เมื่อ Rasmus Lerdorf ได้เขียนโปรแกรม Common Gateway Interface (CGI) ในภาษา C หลายโปรแกรม ซึ่งเขาใช้มันสำหรับดูแลหน้าเว็บเพจของเขา เขาตั้งใจให้มันทำงานกับเว็บฟอร์ม และติดต่อกับฐานข้อมูล และเรียกการพัฒนานี้ว่า “Personal Home Page/Forms Interpreter” หรือ PHP/FI ซึ่ง PHP/FI สามารถช่วยสร้างหน้าไดนามิกส์เว็บแอพพลิเคชันอย่างง่าย เพื่อเพิ่มความสามารถในการรายงานปัญหาเพื่อปรับปรุ่งโค้ด Lerdorf ได้ประเภทเผยแพร่ PHP ครั้งแรกเป็น “Personal Home Page Tools (PHP Tools) version 1.0” ใน June 8, 1995 โดยการเผยแพร่ในครั้งนี้มีฟังก์ชันการทำงานพื้นฐานที่มีในภาษา PHP จนถึงปี 2013 ที่ประกอบไปด้วย Perl-like variables การควบคุมฟอร์ม และความสามารถในการผังใน HTML

Rasmus Lerdorf นั้นไม่ได้ตั้งใจให้ PHP มาเป็นภาษาเขียนโปรแกรมใหม่ แต่มันเติบโตและเผยแพร่อย่างรวดเร็ว เขาได้กล่าวว่า “ฉันไม่รู้จะหยุดมันยังไง มันสิ่งที่เกิดขึ้นโดยไม่ได้ตั้งใจที่จะเขียนภาษาใหม่ ฉันไม่รู้วิธีเขียนภาษาหนุ่งขึ้นมาใหม่จริงๆ ในตอนนี้ฉันเพียงแค่ทำมันต่อไปให้ดีที่สุด” กลุ่มนักพัฒนาเริ่มต้นในการพัฒนาฟอร์ม หลังจากทดสอบจากนั้น 1 เดือน เวอร์ชันเบต้า PHP/FI 2 ได้เผยแพร่ใน November 1997 ซึ่งในปัจจุบันภาษา PHP นั้นเป็นเวอร์ชัน 7.0 ซึ่งถูกเผยแพร่ใน December 2, 2016

หลังจากที่คุณได้เรียนจบบทเรียนนี้แล้ว คุณจะเข้าใจภาษา PHP ในพื้นฐานซึ่งมันเพียงพอในการนำไปต่อยอดเพื่อที่จะพัฒนาเว็บแอบพลิเคชันต่อไป ในการพัฒนาเว็บนั้นคุณจะต้องมีพื้นฐานทางด้านภาษา HTML CSS JavaScript หรือ Database

ภาษา Java Script

Java script 

     JavaScript เป็นภาษาสคริปต์อีกชนิดหนึ่งที่นิยมนำมาเขียน เพื่อเสริมคุณค่าให้งานการสร้างเว็บเพจให้มีคุณค่า และมีคุณภาพ ไม่ว่าจะเว็บเพจเพื่อการทำ E-Commerce, Web database หรือ E-Learning ซึ่งงานเหล่านี้ถ้าใช้เพียงภาษาสคริปต์ PHP, ASP, JSP หรืออื่น ๆ จะเห็นว่าทำงานยังไม่สมบูรณ์ได้ดังใจ ผู้เขียนโปรแกรมมือใหม่ทั้งหลาย เมื่อเห็นการเขียนโปรแกรมของผู้อื่นตามเว็บต่าง ๆ รู้สึกว่างานของเขาที่ออกมาดีนั้น เขาเขียนกันอย่างไร เว็บนี้มีคำตอบให้ท่าน

 

Java Script ทำงานอย่างไร

    ถ้าพิจารณาการเขียนโปรแกรมบนเว็บทั้งหลายจะเห็นว่ามีการแปลภาษาอยู่  ลักษณะได้แก่ การแปลจาก Server Side ได้แก่ PHP, ASP, JSP กับการแปลจากเครื่อง Client หรือ Client-Side อันได้แก่ HTML, Java Script   

การเขียนโปรแกรม

    การเขียนคำสั่งของ Java script  ต้องเขียนร่วมกับภาษา HTML โดยแทรกอยู่ภายในระหว่างคำสั่ง  <Head>  กับ </Head>  หรือจะเขียนหลังจาก <Body> ก็ได้  การเขียนคำสั่งตัวอักขระพิมพ์เล็กและตัวอักขระพิมพ์ใหญ่ถือว่ามีความแตกต่างกัน (Case sensitive)

<HTML>

<HEAD>

<TITLE> Your Title   </TITLE>

   ——

   ——

</HEAD>

</HTML>

 

คำสั่งการเขียนสคริปต์ของ Java Script  เริ่มต้นด้วย

<script language=”JavaScript”>

   ——–

   ——–

และลงท้ายด้วย

</script>

มาดูตัวอย่างแรกของการเขียน Java Script

<html>

<head>

<title>This is a JavaScript example</title>

<script language=”JavaScript”>

<!–

document.write(“Hello World!”);

//–>

</script>

</head>

<body> สวัสดี ! </body>

</html>

 

ภาพที่ 1 ผลการทำงานของโปรแกรม

Tips

เมื่อพิจารณาจาก คำสั่ง

<!–

document.write(“Hello World!”);

//–>

    เครื่องหมาย  <!–  และ //–>  ถ้าในคำสั่งของ Tag HTML เป็น Comment แต่ใน Java Script เพื่อรองรับ browser รุ่นเก่าที่ไม่รองรับ Java Script ซึ่งถ้าเราเขียนคำสั่งโดยไม่มีเครื่องหมาย  <!–   ก็ได้  แต่จะมี Dialog Box ที่จะเตือนขึ้นมาถ้าหาก Browser รุ่นที่ไม่รองรับคำสั่งนั้น ๆ นักเขียนมืออาชีพจะนิยมใช้และผมขอแนะนำให้ใช้ครับ

คำสั่งเขียนข้อความบนจอภาพ

    ในการเขียนข้อความให้แสดงที่จอภาพ  มีการเขียนได้สองคำสั่ง คือ  write(“ข้อความ) และคำสั่ง writeln(“ข้อความ”)  ดูตัวอย่างจากคำสั่งต่อไปนี้ 

<HTML>

<HEAD>

<TITLE> Welcome </TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE=”JAVASCRIPT”>

<!–

document.write(“ยินดีต้อนรับสู่  Java Script Tutorial!”);

// –>

</SCRIPT>

</BODY>

</HTML>

    ความแตกต่างระหว่าง write() และ writeln() นั้นคือ  write เป็นการเขียนที่จอภาพ  ส่วน writeln เป็นการเขียนที่จอภาพและขึ้นบรรทัดใหม่

Document object

    Document เป็นหนึ่งใน object พื้นฐานที่ใช้กันมากของ Java Script  จากคำสั่ง

document.write(“ยินดีต้อนรับสู่  Java Script Tutorial!”);

document เป็น Object ส่วน write เป็น Method  ของ Object document เราต้องจะใช้เครื่องหมาย คั่นระหว่าง Object กับ Method    นอกจากนี้ยังมี Method อื่น ๆ อีกมาก ได้แก่

·       Method lastModified  ดูตัวอย่างต่อไปนี้ 

<script language=”JavaScript”>

document.write(“สวัสดี  ยินดีต้อนรับ Java Script Tutorial ปรับปรุงครั้งล่าสุดเมื่อ :” + document.lastModified);

</script>

    การใช้ Method lastModified เพื่อแสดงให้ผู้ชมเว็บทราบว่า เว็บของเรานั้นปรับปรุงครั้งล่าสุดเมื่อใด เราจะต้องใช้เครื่องหมาย ในการเชื่อม object ทั้งสอง

ภาพที่ 2  ผลการทำงานของโปรแกรม

ภาษา XML

XML คืออะไร ? : เริ่มกันที่ว่า XML ย่อมาจาก Extensible Markup Language เป็นภาษาหนึ่งที่ใช้ในการแสดงผลข้อมูล ถ้าเปรียบเทียบกับภาษา HTML จะแตกต่างกันที่ HTML ถูกออกแบบมาเพื่อการแสดงผลอย่างเดียวเท่านั้น เช่นให้แสดงผลตัวเล็ก ตัวหนา ตัวเอียง เหมือนที่คุณเคยเห็นในเวบเพจทั้วไป แต่ภาษา XML นั้นถูกออกแบบมาเพื่อเก็บข้อมูล โดยทั้งข้อมูลและโครงสร้างของข้อมูลนั้นๆไว้ด้วยกัน ส่วนการแสดงผลก็จะใช้ภาษาเฉพาะซึ่งก็คือ XSL (Extensible Stylesheet Language)

โครงสร้างของภาษา XML เป็นอย่างไร ?

ภาษา XML มีโครงสร้างที่ประกอบด้วยแท็ก(Tag)เปิด และแท็กปิด เช่นเดียวกับภาษา HTML แต่ภาษา XML คุณสามารถสร้างแท็กรวมทั้งกำหนดโครงสร้างของข้อมูลได้เอง ซึ่งความสามารถตรงนี้ตัวภาษา HTML ทำไม่ได้เพราะภาษา HTML ถูกกำหนดแท็กตายตัวโดย W3C

โลกของเทคโนโลยีมีแพลตฟอร์มมากมาย หลากหลายภาษา แต่ละภาษาก็จะคุยกันด้วยสำนวนของมันเอง ในงานที่ต้องใช้แพลตฟอร์มหลากหลาย จะมีปัญหาก็คือมันจะทำงานร่วมกันอย่างไร? จะส่งข้อมูลอย่างไร ? เช่นถ้าจะเขียน ASP.net ให้คุยกับ JSP(Java) หรือภาษาอื่น ๆ ต้องทำอย่างไร ? XML จึงเกิดขึ้นมาเพื่อแก้ปัญหานี้ มันจะทำหน้าที่เป็นตัวกลางเก็บข้อมูล โดยที่ ASP.net , JSP(Java) หรือภาษาอื่นๆ ต้องสามารถเข้าใจภาษา XML เป็นมาตรฐานอยู่แล้ว
ขอยกตัวอย่างให้เห็นชัด ๆ ASP.net ต้องการแลกเปลี่ยนข้อมูลกับ JSP เราก็เขียน ASP.net ให้สร้างไฟล์ XML พร้อมทั้งใส่โครงสร้างและข้อมูลตามที่เราต้องการ จากนั้นเราก็เขียน JSP ให้มาอ่านไฟล์ XML นั้นๆแค่นี้ ASP.net ก็แลกเปลี่ยนข้อมูลกับ JSP ได้แล้ว

ภาษา XHTML

XHTML ย่อมาจากคำว่า Extensible Hyper Text Markup Language คือภาษาโปรแกรมคอมพิวเตอร์ประเภท Markup Language ที่รวมเอาภาษา HTML และภาษา XML เข้าไว้ด้วยกัน และได้กลายเป็นมาตรฐานใหม่ของ HTML ประโยชน์ของมันคือการสร้างเว็บไซต์เพื่อการส่งข้อมูลทั่วๆ ไป และเพิ่มขีดความสามารถในการสร้างแท็ก (Tag) ใหม่ๆ ได้อีกด้วย โดยที่เรากำหนดได้ด้วยว่าจะให้แท็กเหล่านั้นแสดงผลอย่างไร ทั้งยังรองรับภาษาอื่นๆ ที่ใช้ XML เป็นฐาน เช่น SVG, MathML, chemML, SMIL และในภาษา XHTML คำสั่งต่างๆ นั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างทางภาษามากกว่า และมีการตัด Tag และ Attribute ที่ล้าสมัยออกไป

เนื่องมาจากข้อเสียของ HTML ที่เมื่อแสดงผลผ่านบราวเซอร์ที่ต่างกัน เช่น Internet Explorer, Firefox, Netscape, Opera, Chrome และอื่นๆ ก็จะได้ผลที่แตกต่างกัน ที่เราเสียแรงออกแบบเว็บไซต์มาอย่างดี อาจดูสวยงามถูกต้องใน Firefox แต่อาจจะมีอาการผิดเพี้ยนไปเมื่อเปิดดูด้วย Chrome ดังนั้น จึงได้มีการนำภาษา XHTML มาใช้เพื่อแก้ปัญหาดังกล่าว โดย XHTML เป็นผลจากการนำภาษา HTML 4.0 มาปรับปรุงใหม่ให้สามารถใช้กับแอพพลิเคชันต่างๆ ให้ได้มากขึ้น เป็นการเปลี่ยนกรอบของ HTML ให้เป็น XML สมาคมเวิล์ดไวด์เว็บ (World Wide Web Consortium หรือ W3C) จึงประกาศรับรองคุณสมบัติ XHTML เพื่อช่วยให้การใช้งานเว็บไซต์ ไม่ได้จำกัดอยู่แค่เพียงบนเครื่องคอมพิวเตอร์อีกต่อไป แต่สามารถขยายการใช้งานออกไปได้กว้างขึ้น โดยเฉพาะบนอุปกรณ์ไร้สายได้ด้วย ดังนั้น ต่อไปไม่ว่าจะแสดงเว็บเพจของเราในบราวเซอร์ค่ายใด ก็สามารถแสดงผลได้เหมือนกันอย่างถูกต้อง

browsers

สรุปก็คือภาษา XHTML เป็นภาษาที่ถูกกำหนดโดย W3C ให้เป็นภาษามาตรฐานใหม่ที่จะใช้ในการสร้างเว็บไซต์ต่อไปในอนาคต เว็บบราวเซอร์ของทุกค่ายจะสามารถรองรับการใช้งานภาษา XHTML ได้ และในอนาคตปัญหาการแสดงผลที่ไม่เหมือนกันในเว็บบราวเซอร์ที่ต่างกันก็จะหมดไป ดังนั้นจึงเป็นเรื่องดี และสำคัญสำหรับนักพัฒนา และออกแบบเว็บไซต์ ที่จะเริ่มเรียนรู้ และสร้างเว็บไซต์ให้ได้มาตรฐาน

ภาษา CSS

CSS คืออะไร?

CSS ย่อมาจาก Cascading Style Sheets   เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML    ใช้สำหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น

ประโยชน์ของ CSS

1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว

2. เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว

3. สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร

4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser

5. สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน

6. ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทำให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี

ตัวอย่างกรณีที่จัดรูปแบบการแสดงผลด้วยภาษา HTML

<html>
<body>

<h1><font color=”red” face=”Arial”>วิธีดูแลรักษาสุขภาพ</font></h1>
<p><font color=”black” face=”Arial”><b>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</b></font></p>

<h1><font color=”red” face=”Arial”>วิธีกินผลไม้ที่ถูกต้อง</font></h1>
<p><font color=”black” face=”Arial”><b>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร
ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</b></font></p>

</body>
</html>

ตัวอย่างเมื่อเปลี่ยนมาใช้คำสั่ง style sheet จัดรูปแบบการแสดงผลแทนการใช้ code ภาษา HTML ทำให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น ^^

<html>
<head>
<style type=”text/css”>
h1{color:red; font-family:Arial; }
p{color:black; font-family:Arial; font-weight:bold }
</style>
</head>
<body>

<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>

<h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร
ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>

</body>
</html>

ภาษา HTML

ความรู้เบื้องต้นภาษา HTML

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

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

1. Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>(Tag กำหนดเส้นคั่น), <br> (Tag กำหนดขึ้นบันทัดใหม่) เป็นต้น

2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้น ๆ เช่น <B>……</B>(Tag กำหนดตัวหนา), <a href=URL>…จุด link..</a> (Tag กำหนดการเชื่อมโยงข้อมูล)   เป็นต้น

3. Tag เปิด/ปิด บาง tag ละ tag ปิดได้ เช่น <tr> (Tag กำหนดแถวตาราง), <th> (Tag กำหนดคอลัมภ์ตาราง)

4. คำสั่งใน Tag เขียนด้วยอักษรตัวใหญ่หรือเล็กก็ได้ เช่น <Body> หรือ <BODY> หรือ <body>

ภาษาโปรแกรมสร้างเว็บไซต์

ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่

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 ที่ล้าสมัยออกไป

ก่อนจะลงมือเขียนเว็บเพจ ขอให้มีความรู้ความเข้าใจในภาษาพื้นฐานเหล่านี้ก่อน โดยศึกษาได้จากบทเรียนออนไลน์ของ enjoyday.net
– เรียนรู้ HTML
– เรียนรู้ CSS
– เรียนรู้ XHTML

ถึงแม้ว่าเราจะใช้ Software เว็บไซต์สำเร็จรูป (Web CMS) ในการสร้างเว็บไซต์หรือบล็อก เช่น WordPress,  Joomla ก็ตาม    HTML และ CSS นี้จะเป็นพื้นฐานให้เราแก้ไข code และปรับแต่งหน้าตาเว็บไซต์ให้ถูกใจเราได้ค่ะ

นอกจากภาษาพื้นฐาน HTML/XHTML และ CSS  ในข้างต้นที่ไม่ใช่ภาษาสำหรับเขียนโปรแกรมแล้ว  เราอาจจะเคยได้ยินภาษา JavaScript, ASP, ASP.NET, PHP,JSP และอื่นๆ   ภาษาเหล่านี้เป็นภาษา Script ที่นิยมใช้ในการสร้างเว็บเพจค่ะ

ภาษา Script ที่ใช้ในการสร้างเว็บเพจ แบ่งได้เป็น

1) Server-Side Script เช่น PHP, ASP, JSP, CGI    เป็นภาษา script ที่ประมวลผลที่ฝั่ง Server แล้วส่งผลลัพธ์ไปแสดงผลที่ฝั่ง Client ผ่านโปรแกรมเว็บบราวเซอร์ เช่น IE, Firefox

2) Client-Side Script เช่น JavaScript, VBScript, JScript   เป็นภาษา script ที่ประมวลผลบนเครื่องคอมพิวเตอร์ของผู้เยี่ยมชมเว็บไซต์ โดยใช้โปรแกรมเว็บเบราเซอร์  ซึ่งจะช่วยแบ่งเบาการทำงานให้กับเครื่อง Web Server ได้

ในกรณีที่ต้องการให้แอพพลิเคชันทำงานร่วมกันกับแอพพลิเคชันอื่น เช่น ฐานข้อมูล  เราจะต้องใช้ Server-Side Script  เขียนคำสั่งติดต่อกับฐานข้อมูล  โดยผู้ชมเว็บจะไม่สามารถดูคำสั่ง ( Source Code) ของ Server-Side Script เหล่านั้นได้

ต่างจากการเขียนคำสั่งแบบ Client-Side Script  ที่ผู้ชมเว็บสามารถดูคำสั่งที่เขียนด้วย Client-Side Script รวมถึง HTML, CSS  ของหน้าเว็บเพจนั้นได้  ด้วยการคลิกเมาส์ขวาบนหน้าเว็บเพจนั้นๆ และเลือกคำสั่ง View Source หรือ View Page Source ในโปรแกรมเว็บเบราเซอร์

ลักษณะเว็บไซต์

รูปแบบของเว็บไซต์

1. Static Website

หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html .เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้

Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่มาก .ไม่มีการเปลี่ยนแปลงข้อมูลบ่อยๆ และไม่มีการติดต่อฐานข้อมูล..

2. Dynamic Website

หมายถึง เว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลเองได้ โดยไม่ต้องเขียนแต่ละหน้าเว็บเพจเอง เช่น กระดานข่าว (WebBoard), ระบบสืบค้นข้อมูล

เว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script .เช่น PHP, ASP, ASP.Net, JSP และอื่นๆ ไฟล์เอกสารที่ได้จะมีนามสกุล .php, .asp เป็นต้น และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนำข้อมูลจากฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจ

ส่วนประกอบของหน้าเว็บเพจ

เราสามารถจำแนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้

1. ส่วนหัว (Page Header) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์ โฆษณาลิงก์สำหรับข้ามไปยังหน้าเว็บอื่น

2. ส่วนเนื้อหา (Page Body) อยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น

3. ส่วนท้าย (Page Footer) อยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สำหรับลิงก์ข้อความสั้นๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สำหรับติดต่อกับทางเว็บไซต์

 

สรุปส่วนประกอบของหน้าเว็บเพจ

การออกแบบเว็บไซต์แนวคิดในการออกแบบ

– ดูจากเว็บไซต์อื่นเพื่อเป็นตัวอย่าง การดูจากเว็บไซต์อื่นบนอินเตอร์เน็ตเพื่อศึกษาเป็นตัวอย่างนั้น นับเป็นวิธีการที่ง่ายที่สุด แต่ก็ควรนำไปประยุกต์ใช้ให้เหมาะสมกับเนื้อหาและกลุ่มเป้าหมายของเราด้วย

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

การกำหนดขนาดของเว็บเพจ

ขนาดของเว็บไซต์ที่นิยมในปัจจุบันมี 2 ขนาด คือ

1. ขนาดเว็บไซต์แบบ 800 X 600 pixels เป็นขนาดที่สามารถใช้ได้กับหน้าจอทุกขนาดในปัจจุบันเป็นขนาดของการออกแบบเว็บไซต์ที่ใช้ในอดีต เนื่องจากอดีตขนาดของจอคอมพิวเตอร์มีขนาดเล็ก

2. ขนาดเว็บไซต์แบบ 1024 X 768 pixels เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้นิยมใช้จอคอมพิวเตอร์ขนาดใหญ่ขึ้นเนื่องมาจากราคาจอคอมพิวเตอร์ที่ถูกลง

 

รูปแบบการออกแบบเว็บไซต์

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

1. การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหา เป็นการออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบตารางเป็นหลัก มีการออกแบบหน้าตารูปแบบง่าย เช่น มีเมนูสารบัญ และเนื้อหา

2. การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก เป็นการออกแบบเว็บไซต์ที่เน้นภาพกราฟิกที่สวยงาม ซึ่งอาจจะใช้โปรแกรม Photoshop สำหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใช้เวลาในการโหลดเว็บนาน

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

 

ขั้นตอนการสร้างเว็บไซต์ 

ขั้นตอนที่ 1 การวางแผนการจัดทำเว็บไซต์

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

ขั้นตอนที่ 2 การกำหนดโครงสร้างของเว็บ

          เป็นขั้นตอนในการกำหนดผังของเว็บ เพื่อให้ทราบองค์ประกอบทั้งหมดของเว็บ ตัวอย่างดังรูป

 

ข้อสังเกต

            1. หน้าแรกของเว็บ หรือโฮมเพจ จะต้องชื่อ index ส่วนนามสกุลให้ใส่ตามลักษณะของภาษาที่ใช้ในการสร้างเว็บ

            2. การตั้งชื่อเว็บเพจแต่ละหน้าเวลาให้กำหนดชื่อเป็นภาษาอังกฤษตามด้วยนามสกุลของภาษาที่เราสร้างเว็บ เช่น index.html, gallery.html, contact.html เป็นต้น

 

ขั้นตอนที่ 3 การกำหนดการเชื่อมโยงเว็บเพจ

            การกำหนดการเชื่อมเว็บเพจ เป็นการกำหนดความสัมพันธ์ของการเชื่อมโยงในแต่ละหน้าเว็บเพื่อให้สามารถกลับไปกลับมาระหว่างหน้าต่าง ๆ ได้ โดยแต่ละไฟล์จะมีความสัมพันธ์กัน ตัวอย่างดังรูป

 

ขั้นตอนที่ 4 การตั้งชื่อไฟล์และโฟลเดอร์

            1. การสร้างโฟลเดอร์

            การสร้างโฟลเดอร์ให้สร้างเป็นชื่อหน่วยงาน / เรื่องนั้นๆ ควรใช้ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9

            2. การตั้งชื่อไฟล์

            การตั้งชื่อไฟล์ให้ตั้งชื่อและนามสกุลไฟล์เป็นตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 หรือเครื่องมือขีดลบ/ขีดล่าง และตั้งชื่อไฟล์ให้ตรงกับเรื่องนั้น ๆ เช่น gallery.html คือ ภาพบรรยากาศ, contact.html คือ ติดต่อเรา เป็นต้น

ขั้นตอนที่ 5 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์

 

ส่วนประกอบของเว็บไซต์ที่ดี

            โครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 3 ส่วนหลัก ๆ ดังนี้

1. ส่วนหัวของหน้า (Page Header)

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

            – โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ

            – ชื่อเว็บไซต์ (Name)

            – เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์

2. ส่วนของเนื้อหา (Page Body)

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

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

3. ส่วนท้ายของหน้า (Page Footer)

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

 

ขั้นตอนที่ 6 การสร้างเว็บเพจ

            เมื่อจัดวางองค์ประกอบของเว็บแต่ละหน้าแล้ว ต่อไปคือขั้นตอนการเขียนเว็บด้วยโปรแกรมภาษา HTML เพื่อกำหนดให้แต่ละหน้าเว็บเพจนำเสนอข้อความ รูปภาพ วีดีโอ และเสียง ให้อยู่ในรูปแบบการที่ต้องการ

ขั้นตอนที่ 7 การลงทะเบียนขอพื้นที่เว็บไซต์

            เมื่อทำการออกแบบและสร้างเว็บไซต์เสร็จแล้ว ขั้นตอนต่อไป คือ การเผยแพร่เว็บไซต์สู่โลกของอินเทอร์เน็ตให้คนอื่นเข้ามาเยี่ยมชม วิธีการ คือ การนำเว็บไซต์ไปฝากกับผู้ให้บริการพื้นที่เว็บไซต์ทั้งแบบเสียค่าใช้จ่ายหรือบริการ และแบบพื้นที่เว็บไซต์ฟรี 

ขั้นตอนที่ 8 การอัพโหลดเว็บไซต์

            เมื่อเราทำการสมัครบริการพื้นที่ฝากเว็บแล้ว ขั้นตอนต่อไป คือการอัพโหลดไฟล์เว็บไซต์ของเราไปยังเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บซึ่งอาจจะทำการอัพโหลดผ่านเว็บบราวเซอร์เว็บที่ให้บริการ หรือการอัพโหลดด้วยโปรแกรม เช่น CuteFTP, Filezilla, WS_FTP เป็นต้น เพื่อให้ผู้คนได้เข้าเยี่ยมชมโดยสามารถดูในเว็บไซต์ของเราผ่านเครือข่ายอินเทอร์เน็ต

ขั้นตอนที่ 9 การเรียกดูเว็บไซต์

            เมื่อเราทำการอัพโหลดไฟล์เว็บไซต์ของเราขึ้นบนเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บแล้ว เราสามารถเปิดดูเว็บไซต์ของเราผ่านโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer, Mozilla Firefox, Google Chrome เป็นต้น โดยการพิมพ์ที่อยู่เว็บไซต์ตรง Address Bar

การสร้างเว็บไซต์

ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์

            

            อินเตอร์เน็ต (Internet)  เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกซึ่งรวมเอาเครือข่ายย่อยเป็นจำนวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกันเป็นเครือข่ายเดียวกันได้ในแพลตฟอร์มของ เวิลด์ ไวด์ เว็บ (World Wide Web)

            เวิล์ด ไวด์ เว็บ (World Wide Web – www)  หรือเรียกย่อ ๆ ว่า เว็บ(web)  เป็นอินเตอร์เน็ตชนิดหนึ่ง ที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ(Text  ภาพ (Graphic)  เสีย (Sound) และภาพเคลื่อนไหว (Movie) เป็นต้น ผู้ใช้ทั่วไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูลครบถ้วนปัจจุบัน ถ้าพูดถึงอินเตอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของอินเตอร์เน็ตเท่านั้น

            http (HyperText Transfer Protocol: HTTP)  เป็นโปรโตคอลสำหรับเปิดดูข้อมูลจาก www เรียกใช้งานได้โดยระบุ http:// และตามด้วย URL ในช่องกรอก  Address ด้านบนของโปรแกรมเว็บบราวเซอร์

            URL (Uniform Resource Locator) คือ ข้อความที่บอกตำแหน่งของข้อมูลใน Internet ไม่ว่าจะเป็น Web page, File ประเภทต่างๆ เช่น รูปภาพ เสียง

            URL ประกอบด้วย โปรโตคอล + domain name + (directory ที่เก็บไฟล์) 

             ชื่อไฟล์ เช่น http://www.enjoyday.net/webtutorial/css/index.html 

                                http://www.enjoyday.net/images/logo.jpg

            โดเมนเนม (Domain Name) หรือที่เข้าใจกันทั่วไป  คือ  ชื่อเรียกเว็บไซต์นั่นเอง  การจดทะเบียนโดเมนเนมจึงเป็นการลงทะเบียนชื่อให้กับเว็บไซต์ของเราในโลกอินเตอร์เน็ต  โดเมนเนมที่ขอจดทะเบียนจะต้องไม่ซ้ำกับคนอื่น  และควรตั้งให้เกี่ยวข้องกับเนื้อหาภายในเว็บไซต์  หรือเกี่ยวข้องกับสินค้าและ บริการ ตลอดจนใช้คำง่าย ๆ  ให้จำได้  เช่น  sanook.com  และ yahoo.com เป็นต้น

ความหมายของซับโดเมน

           เว็บไซต์ (Website)  และเว็บเพจ (Webpage) 

            เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage) หมายถึง เอกสารหนึ่งหน้า การใช้เว็บก็คือการเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้านั่นเอง  เว็บเพจอาจสร้างขึ้นด้วยภาษาคอมพิวเตอร์  เช่น HTML, ASP, PHP, JAVA ฯลฯ   

            เมื่อนำเว็บเพจหลาย ๆ หน้ามารวมกัน และระบุอยู่ในอินเตอร์เน็ต หรือยูอาร์แอล (Uniform Resource Locator – URL) ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่า  เว็บไซต์ (Web Site)

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

สรุปเว็บเพจ เว็บไซต์ และโฮมเพจ

 
 

            เว็บเบราเซอร์ (Web Browser) คือโปรแกรมที่ใช้สำหรับเปิดเว็บเพจหรือ รับส่งข้อมูลตามที่เครื่องลูกข่ายร้องขอเมื่อเราเปิดเข้าสู่อินเตอร์เน็ต  เว็บเบราเซอร์ที่ได้รับความนิยมปัจจุบันมีหลายโปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google Chrome

            เว็บเซิฟเวอร์ (Web server) คือ เครื่องคอมพิวเตอร์ที่ทำหน้าที่ให้บริการข้อมูลใน www ซึ่งเก็บ Web page และโปรแกรมจัดการบริการ เมื่อผู้ใช้ต้องการดู Web page ที่อยู่ในเครื่อง Server ก็จะใช้ Web browser เรียกขอข้อมูลโดยระบุที่อยู่ของข้อมูลในลักษณะที่เรียกว่า URL
 
            อัพโหลด (Upload) คือ การส่งข้อมูลจากเครื่องของเราไปยัง Web Server เมื่อเราสร้าง Web page แต่ละหน้าแล้ว ต้องส่งข้อมูลไปเก็บไว้ที่ Web Server ที่เป็นเครื่องคอมพิวเตอร์ที่ให้บริการข้อมูล www โดยอาศัยโปรแกรม FTP.
            Search engine เป็นเครื่องมือหรือโปรแกรมในการค้นหาเว็บต่างๆ โดยมีการเก็บ รายชื่อเว็บไซต์ และข้อมูลที่เกี่ยวข้องต่างๆ ของเว็บไซต์ และนำมาจัดเก็บไว้ใน server เพื่อให้สามารถค้นหาและแสดงผลได้สะดวกรวดเร็ว เช่น google.com, yahoo.com, bing.com, altavista.com, sanook.com เป็นต้น
 
 
ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ

ภาษา  HTML 

            ภาษา  HTML  ย่อมาจากคำว่า  Hypertext Markup Language  เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ โดยจะได้รับการแปลหรือการแสดงผลโดยเว็บ เบราเซอร์ซึ่งสามารถแสดงได้ทั้งข้อความ  ภาพ  และเสียง

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

ในไฟล์เอกสาร  HTML ประกอบด้วย สองส่วนใหญ่ๆ คือ ส่วนหัว HEAD และ ส่วนตัว BODY 

            1) Tag <HTML> และ </HTML> จะอยู่บรรทัดแรก และ บรรทัดสุดท้าย ในไฟล์  HTML เสมอ เป็น Tag ที่บอกให้รู้ว่า ข้อความ หรือ Tag ที่อยู่ระหว่าง 2 Tag นี้ เป็นแบบ HTML

            2) Tag <HEAD> และ </HEAD> ส่วนนี้จะไว้ใส่ รายละเอียดต่าง ๆ เช่น  Tag<TITLE>TodayLoad.com</TITLE> ไว้ใส่ข้อความที่ต้องการให้ปรากฎอยู่บน ไตเติ้ลบาร์ เป็นต้น 

            3) <BODY ……. > ข้อความที่ปรากฎอยู่ตรงช่วงจุดไข่ปลา  

            4) Tag <BODY> และ </BODY> ข้อความ หรือ Tag ที่อยู่ระหว่าง 2 Tag นี้ เป็นส่วนของเนื้อหา

หลักการออกแบบเว็บไซต์ 

            

            หลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนาเว็บไซต์

            – การวางแผน 

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

            – การกำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ 

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

            – การกำหนดกลุ่มเป้าหมาย 

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

            – การเตรียมข้อมูล 

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

            – การเตรียมสิ่งต่าง ๆ ที่จำเป็น 

ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำหรับสร้าง เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็นต้น 

          – การจัดโครงสร้างข้อมูล 

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

                • โครงสร้างและสารบัญของเว็บไซต์ 

                • การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำทาง (Navigation)

                • องค์ประกอบที่ต้องนำมาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ 

                • การกำหนดรูปแบบและลักษณะของเว็บเพจ 

                • การกำหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำมาใช้ในเว็บไซต์ 

                • การบริการเสริมต่าง ๆ 

                • การออกแบบเว็บไซต์ 

            นับเป็นขั้นตอนในการออกแบบรูปร่าง  โครงสร้างและลักษณะทางด้านกราฟิกของหน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือ  Photoshop หรือ Fireworks ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ชื่อเว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว  แบนเนอร์โฆษณา เป็นต้น

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

Follow by Email
Facebook
GOOGLE
TWITTER
YOUTUBE