เกียรติพงษ์ ยอดเยี่ยมแกร Web Technology เกียรติพงษ์ ยอดเยี่ยมแกร
Web Server เป็น Client /Server Model Sever Module ได้แก่ PWS , IIS , Apache , Httpd เป็นต้น Client Module คือ Web browser เช่น IE , Firefox มีรูปแบบการติดต่อสื่อสารแบบ Request and Response Client Module (Browser) Server module Running IIS http request Internet Explorer html HTML Homepage
TCP/IP และ HTTP http เป็นโปรโตคอลที่สนับสนุนการทำงานด้านการติดต่อสื่อสารเกี่ยวกับเวิร์ลไวด์เว็บ ซึ่งโดยแท้จริงต้องทำงานควบคู่กับโปรโตคอลอื่นๆ ด้วย DNS Server Gate way Internet Client Switch Web Server Database Server
หน้าที่แต่ละ Server DNS : Domain Name System สำหรับแปลง URL เป็น ip Address Database Server สำหรับทำการจัดการด้านฐานข้อมูลด้าน Web Application Gateway ส่วนมากมี Router ทำหน้าที่เป็นช่องทางออกสู่เครือข่ายภายนอกซึ่งก็คือ Internet Web Server สำหรับให้บริการเว็บในองค์กรและภายนอก
URL URL : Uniform Resource Locator http://www.chandra.ac.th Top Level Domain ซึ่งก็คือประเทศไทย บอกประเภทองค์กรว่าเป็นสถานศึกษา บอกชื่อ Domain ของหน่วยงาน บอกชื่อเครื่องใน domain ชนิดโปรโตคอลที่ติดต่อสื่อสาร http://webmail.issp.net , mailto:kiadtipo@chandra.ac.th mms://ctv.chandra.ac.th:5159/techno
Web 2.0 เทคโนโลยีเว็บในปัจจุบัน ผู้ใช้บริการทุกคนเป็นผู้สร้าง Content เอง ผู้ให้บริการจัดเตรียมพื้นที่ ทรัพยากรที่จำเป็น และโครงร่างของเว็บไซต์ มักเป็นสังคมแบบเปิด เชื่อมโยงถึงกันได้ง่าย สามารถประมวลผลได้ด้วยตนเอง หรือ ใช้ความสามารถด้าน Client เป็นหลักแทนที่จะต้องส่งไปประมวลผลที่ Server เพียงที่เดียว
HTML Hyper Text Markup Language : HTML เป็นรูปแบบของภาษาในการเผยแพร่ข้อมูลข่าวสารผ่านอินเตอร์เน็ต โดยเริ่มแรกมีลักษณะเป็นข้อความหรือกลุ่มข้องข้อความที่มีการเชื่อมโยงไปยังเอกสารหรือเว็บไซต์อื่น HTML สามารถใช้ร่วมกับภาษาอื่น เช่น JAVA , PHP , ASP ได้ทันทีเพียงติดตั้ง Compiler เพิ่มเติมลงไปที่ Server หรือ Client เท่านั้น
ตัวอย่างของ HTML <html> <head> <title>ประเภทของกราฟิกส์</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-874"> </head> <body bgcolor="#FFFFFF"> <table width="750" border="1" cellspacing="0" cellpadding="1" align="center" bordercolor="#666666" height="405"> <tr align="center"> <td bordercolor="#FFFFFF" background="bg1.jpg"> <h2><br> <font face="MS Sans Serif, Microsoft Sans Serif" color="#333333">Computer Graphics : 4122603</font> </h2> </td> </tr> <tr> <td height="345" bgcolor="#FFFFFF" bordercolor="#FFFFFF" > <font face="MS Sans Serif, Microsoft Sans Serif"><br> </font> <table width="700" border="0" cellspacing="1" cellpadding="1" align="center"> <tr > <td colspan="2" background="pattern002.gif"><font face="MS Sans Serif, Microsoft Sans Serif" size="3"><img src="f_pinned.gif" width="16" height="18"> <font color="#FFFFFF">โหมดในการแสดงผลของคอมพิวเตอร์ PC</font> </font></td> </table> <p > </p> </body> </html>
โครงสร้างภาษา HTML <HTML> Html File(s) Header <head> … </head> Body <body> … </body> </HTML>
TAG Tag คือคำสั่งสำหรับกำหนดรูปแบบในการแสดงผลของ HTML บน Browser ปลายทางให้ออกมาในรูปแบบที่เราต้องการ Tag ต้องอยู่ในเครื่องหมาย < และ > รูปแบบ < …ข้อกำหนด... > มักเป็น Tag แบบคู่คือ เปิด และ ปิด <html> คือ Tag เปิดหรือเริ่มต้นข้อกำหนด </html> คือ Tag ปิดหรือสิ้นสุดข้อกำหนด Tag บางชนิดสามารถใช้ได้โดยไม่ต้องปิดเช่น <br> , <hr> เป็นต้น
Tag ที่ควรทราบ <html> ... </html> สำหรับเริ่มหรือจบ html file. <body> … </body> กำหนดส่วนเนื้อหา <head> … </head> กำหนดส่วนหัวของ html ซึ่งจะไม่ถูกแสดงผลออกมาบนหน้าต่าง Browser <title> … </title> กำหนดชื่อเรื่อง ข้อความใน Tag นี้จะไปปรากฏบน Title Bar ของ Browser <br> เพื่อขึ้นบรรทัดใหม่ <hr> เพื่อขีดเส้นขั้นหน้า <p> … </p> กำหนดพารากร๊าฟใหม่หรือเว้นระยะระหว่างย่อหน้า <center> … </center> กำหนดให้อยู่กึ่งกลางบรรทัด
Tag ที่ควรทราบ <font … > … </font> กำหนดชื่อฟอนต์ ขนาด ของอักษรที่ต้องการ <font face="................" color="............" size="................."> … </font> <h1> … </h1> กำหนดหัวข้อระดับที่ 1 <h2> … </h2> กำหนดหัวข้อระดับที่ 2 <h3> … </h3> กำหนดหัวข้อระดับที่ 3 <h4> … </h4> กำหนดหัวข้อระดับที่ 4 <b> … </b> กำหนดแสดงผลตัวหนา <i> … </i> กำหนดแสดงผลตัวเอียง <u> … </u> กำหนดแสดงผลตัวขีดเส้นใต้
Tag ที่ควรทราบ <table> … </table> กำหนดแสดงผลเป็นตาราง <tr> … </tr> กำหนด/สิ้นสุด แถว(row) <td> … </td> กำหนด/สิ้นสุด สดมภ์(Column) <Colspan> / <Rowspan> การรวมสดมภ์หรือรวมแถวเข้าด้วยกัน <img … > ให้แสดงรูปภาพ <img src="ชื่อไฟล์ภาพ“ Border=“ขนาดกรอบภาพ” Alt=“คำอธิบายภาพ” … > <a href=“ … “> … </a> สำหรับสร้างการเชื่อมโยง <a href="http://www.hotmail.com/"> www.hotmail.com </a>
Tag ที่ควรทราบ <ol> … </ol> กำหนดหัวข้อแบบลำดับอัตโนมัติ <ul> … </ul> กำหนดหัวข้อแบบไม่มีลำดับใช้เครื่องหมาย Bullet แทน <ol> <li> ข้อความหัวข้อ 1 </li> <li> ข้อความหัวข้อ 2 </li> </ol>
ซอฟต์แวร์สำหรับจัดทำ Web page Text Editor อย่างง่ายสำหรับผู้มีความชำนาญในภาษา HTML เช่น Notepad , Edit plus , Qedit เป็นต้น ใช้ซอฟต์แวร์สำเร็จรูปเช่น Microsoft Front Page, Dreamweaver ใช้เว็บสำเร็จรูป เช่น Joomla , Mambo เป็นต้น
ซอฟต์แวร์เสริม ตัวแปลภาษา CGI Database CGI : Common Gateway Interface เป็นโปรแกรมบน Server คอยดักจับและทำงานเกี่ยวกับ Form และภาษาอื่นๆ Php : ภาษา PHP เป็น Freeware สามารถใช้ร่วมกับ windows หรือ Linux platform ได้ ASP : Active Server Page > IIS หรือ PWS Java : ตัวแปลภาษาสำหรับการทำงานทั้งฝั่ง Server และ Client Site Database mySQL free DBMS ที่ได้รับความนิยมมากที่สุด Access , SQL Server ของ Microsoft