Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
Web Technology
เกี�ยรติ�พงษ์� ยอดเย��ยมแกีร
Web Server
เป็�น Client /Server Model Sever Module ได�แกี� PWS , IIS , Apache , Httpd เป็�นติ�น Client Module คื�อ Web browser เช่�น IE , Firefox
ม�ร�ป็แบบกีารติ�ดติ�อสื่��อสื่ารแบบ Request and Response
Server moduleRunning IIS
HTML Homepage
Client Module(Browser)
Internet Explorerhttp request
html
TCP/IP และ HTTP http เป็�นโป็รโติคือลที่��สื่น"บสื่น#นกีารที่$างานด�านกีารติ�ดติ�อสื่��อสื่ารเกี��ยว
กี"บเว�ร�ลไวด�เว&บ ซึ่(�งโดยแที่�จร�งติ�องที่$างานคืวบคื��กี"บโป็รโติคือลอ��นๆ ด�วย
Web Server
Switch
Database Server
Client
InternetGate way
DNS 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:[email protected]://ctv.chandra.ac.th:5159/techno
Web 2.0
เที่คืโนโลย�เว&บในป็3จจ#บ"น ผู้��ใช่�บร�กีารที่#กีคืนเป็�นผู้��สื่ร�าง Content เอง ผู้��ให�บร�กีารจ"ดเติร�ยมพ�5นที่�� ที่ร"พยากีรที่��จ$าเป็�น และ
โคืรงร�างข้องเว&บไซึ่ติ� ม"กีเป็�นสื่"งคืมแบบเป็6ด เช่��อมโยงถ(งกี"นได�ง�าย สื่ามารถป็ระมวลผู้ลได�ด�วยตินเอง หร�อ ใช่�คืวาม
สื่ามารถด�าน Client เป็�นหล"กีแที่นที่��จะติ�องสื่�งไป็ป็ระมวลผู้ลที่�� Server เพ�ยงที่��เด�ยว
HTML
Hyper Text Markup Language : HTML เป็�นร�ป็แบบข้องภาษ์าในกีารเผู้ยแพร�ข้�อม�ลข้�าวสื่ารผู้�าน
อ�นเติอร�เน&ติ โดยเร��มแรกีม�ล"กีษ์ณะเป็�นข้�อคืวามหร�อกีล#�มข้�องข้�อคืวามที่��ม�กีารเช่��อมโยงไป็ย"งเอกีสื่ารหร�อเว&บไซึ่ติ�อ��น
HTML สื่ามารถใช่�ร�วมกี"บภาษ์าอ��น เช่�น JAVA , PHP , ASP ได�ที่"นที่�เพ�ยงติ�ดติ"5ง Compiler เพ��มเติ�มลงไป็ที่�� Server หร�อ Client เที่�าน"5น
ต่�วอย่ างของ HTML<html><head><title>ป็ระเภที่ข้องกีราฟิ6กีสื่�</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
Header<head> … </head>
Body
<body> … </body>
<HTML>
</HTML>
Html File(s)
TAG
Tag คื�อคื$าสื่"�งสื่$าหร"บกี$าหนดร�ป็แบบในกีารแสื่ดงผู้ลข้อง HTML บน Browser ป็ลายที่างให�ออกีมาในร�ป็แบบที่��เราติ�องกีาร Tag ติ�องอย��ในเคืร��องหมาย < และ >
ร�ป็แบบ < …ข�อกำ�าหน้ด... > ม"กีเป็�น Tag แบบคื��คื�อ เป็6ด และ ป็6ด
<html> คื�อ Tag เป็6ดหร�อเร��มติ�นข้�อกี$าหนด </html> คื�อ Tag ป็6ดหร�อสื่�5นสื่#ดข้�อกี$าหนด
Tag บางช่น�ดสื่ามารถใช่�ได�โดยไม�ติ�องป็6ดเช่�น <br> , <hr> เป็�นติ�น
Tag ที่�ควรที่ราบ <html> ... </html> สื่$าหร"บเร��มหร�อจบ html file. <body> … </body> กี$าหนดสื่�วนเน�5อหา <head> … </head> กี$าหนดสื่�วนห"วข้อง html ซึ่(�งจะไม�
ถ�กีแสื่ดงผู้ลออกีมาบนหน�าติ�าง Browser <title> … </title> กี$าหนดช่��อเร��อง ข้�อคืวามใน Tag น�5จะ
ไป็ป็รากีฏบน Title Bar ข้อง Browser <br> เพ��อข้(5นบรรที่"ดใหม� <hr> เพ��อข้�ดเสื่�นข้"5นหน�า <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> กี$าหนด/สื่�5นสื่#ด แถว(row) <td> … </td> กี$าหนด/สื่�5นสื่#ด สื่ดมภ�(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 : ติ"วแป็ลภาษ์าสื่$าหร"บกีารที่$างานที่"5งฝั่3� ง Server
และ Client Site Database
mySQL free DBMS ที่��ได�ร"บคืวามน�ยมมากีที่��สื่#ด Access , SQL Server ข้อง Microsoft
