Download
1 / 16
170 likes | 322 Views
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
E N D
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> </tr> </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 • 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
