Web Technology
Download
Report
Transcript Web Technology
Web Technology
เกียรติพงษ์ ยอดเยีย
่ มแกร
Web Server
เป็ น Client /Server Model
Sever Module ได ้แก่ PWS , IIS , Apache , Httpd
เป็ นต ้น
่ IE , Firefox
Client Module คือ Web browser เชน
ื่ สารแบบ Request and
มีรป
ู แบบการติดต่อสอ
Response
Client Module
(Browser)
Server module
Running IIS
http request
HTML Homepage
html
Internet Explorer
TCP/IP และ HTTP
http เป็ นโปรโตคอลทีส
่ นับสนุนการทางานด ้านการ
ื่ สารเกีย
ติดต่อสอ
่ วกับเวิรล
์ ไวด์เว็บ ซงึ่ โดยแท ้จริงต ้อง
ทางานควบคูก
่ บ
ั โปรโตคอลอืน
่ ๆ ด ้วย
DNS Server
Internet
Gate way
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:[email protected]
mms://ctv.chandra.ac.th:5159/techno
Web 2.0
เทคโนโลยีเว็บในปั จจุบน
ั
้ การทุกคนเป็ นผู ้สร ้าง Content เอง
ผู ้ใชบริ
ผู ้ให ้บริการจัดเตรียมพืน
้ ที่ ทรัพยากรทีจ
่ าเป็ น
และโครงร่างของเว็บไซต์
ื่ มโยงถึงกันได ้ง่าย
มักเป็ นสงั คมแบบเปิ ด เชอ
สามารถประมวลผลได ้ด ้วยตนเอง หรือ ใช ้
ความสามารถด ้าน Client เป็ นหลักแทนทีจ
่ ะต ้อง
สง่ ไปประมวลผลที่ Server เพียงทีเ่ ดียว
HTML
Hyper Text Markup Language : HTML
เป็ นรูปแบบของภาษาในการเผยแพร่ข ้อมูล
ข่าวสารผ่านอินเตอร์เน็ ต โดยเริม
่ แรกมีลก
ั ษณะ
เป็ นข ้อความหรือกลุม
่ ข ้องข ้อความทีม
่ ก
ี าร
ื่ มโยงไปยังเอกสารหรือเว็บไซต์อน
เชอ
ื่
่ JAVA ,
HTML สามารถใชร่้ วมกับภาษาอืน
่ เชน
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> กาหนดแสดงผลเป็ น
ตาราง
ิ้ สุด แถว(row)
<tr> … </tr> กาหนด/สน
ิ้ สุด สดมภ์(Column)
<td> … </td> กาหนด/สน
<Colspan> / <Rowspan> การรวมสดมภ์หรือรวม
แถวเข ้าด ้วยกัน
<img … > ให ้แสดงรูปภาพ
ื่ ไฟล์ภาพ“ Border=“ขนาดกรอบภาพ”
<img src="ชอ
Alt=“คาอธิบายภาพ” … >
<a href=“ … “> … </a> สาหรับสร ้างการ
ื่ มโยง
เชอ
่
Tag ทีควรทราบ
<ol> … </ol> กาหนดหัวข ้อแบบลาดับอัตโนมัต ิ
<ul> … </ul> กาหนดหัวข ้อแบบไม่มล
ี าดับใช ้
เครือ
่ งหมาย Bullet แทน
<ol>
<li> ข ้อความหัวข ้อ 1 </li>
<li> ข ้อความหัวข ้อ 2 </li>
</ol>
ซอฟต ์แวร ์สาหร ับจัดทา Web page
Text Editor อย่างง่ายสาหรับผู ้มีความชานาญใน
่ Notepad , Edit plus , Qedit
ภาษา HTML เชน
เป็ นต ้น
้
่ 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