lecture 6 อินเตอร เน็ต...

Lecture 6อนเตอรเนต (Internet)

อนเทอรเนต (Internet) คออะไร (1)

• เครอขายคอมพวเตอรขนาดยกษทเชอมตอกนทวโลก (Network of Network)of Network)

• การสอสารผานอนเตอรเนต มมาตรฐานการรบ-สงขอมล(Protocol ) เรยกวา TCP/IP(Protocol ) เรยกวา TCP/IP– ตวอกษร, ภาพ, เสยง, …– คนหาขอมลไดอยางรวดเรว

2

อนเทอรเนต (Internet) คออะไร (2)

• เชอมตอคอมพวเตอรคนละชนด คนละแบบ

• ทกเครองถกมองเหมอนกน• ทกเครองถกมองเหมอนกนSuper Computer PC Personal Data Super Computer, PC, Personal Data Assistant (PDA)

3

อนเทอรเนตแบงออกไดเปน 2 สวน

• สวนของเครอขายทเชอมคอมพวเตอรเขาดวยกน

• สวนของขอมลทคอมพวเตอรแตละเครอง ไ เกบเอาไว

4

พฤตกรรมการใช Internet

• เครอขายสงคม (Social Network)Facebook – Facebook

– blog

• Chat: MSN, Yahoo! Messengerไ • เกมออนไลน

• คนหาขอมล: บนเทง สนคา วชาการ• คนหาขอมล: บนเทง, สนคา, วชาการ• ดาวนโหลดขอมล (download) 5

HistoryHistory

โ ป • กระทรวงกลาโหมสหรฐ พฒนาระบบเครอขาย ARPANET ประกอบดวยเครอง 4 เครอง • เรมไมมกาลงทจะสนบสนน องคกร NSF เขามาดแลแทน+ตดตง

Supercomputer 5 เครอง ใครกไดสามารถใชงานเพอการศกษาและวจย ไ • NSF พบวา ARPANET ไมสามารถรองรบปรมาณขอมลจานวนมาก

สราง NSFNET ขน โดยเปน network ทมประสทธภาพมากขน เชอม NSFnet เขากบ ARPANET

• ระบบเครอขายอนตอเขาดวยกน และเรยกวา Internetworkingใ ในทสดกเรยกวา Internet

6

Internet in Thailand

• 2530 PSU, AIT --e-mail--> ม.เมลเบรน (2 times/day/university)(2 times/day/university)

• 2535 เชอมตอแบบ online โดย CU (6 สถาบน)• เอกชนใหบรการ internet เชงพาณชย (ISP-Internet Service

Provider) :Loxley Information Service (loxinfo), บรษท KSC yComNet

7

การใหบรการบนอนเตอรเนต

แบงไดเปน 2 กลมใหญ ๆ ดงน1. บรการดานการสอสาร (Communication

S i )Service)2. บรการคนหาขอมล2. บรการคนหาขอมล

8

บรการดานการสอสาร

• ไปรษณยอเลกทรอนกส (E-mail)–ผใชบรการสามารถตดตอรบสง E-mail กบผใชอน ๆผใชบรการสามารถตดตอรบสง E-mail กบผใชอน ๆในเครอขายไดอยางรวดเรวและไมตองเสยคาใชจายเพมเตมเพมเตม

–E-mail Address เชน [email protected]–นอกจากจะสงขอความแลว เราสามารถสงไฟล (Attached-

File) ตดไปกบตว E-mail ไดดวย

9


• สนทนาแบบออนไลน–การพดคยตอบโตกนในเครอขายไดในเวลา–การพดคยตอบโตกนในเครอขายไดในเวลาเดยวกน

–โดยการพมพขอความผานทาง Keyboard,…–เรยกวา Chat เรยกวา Chat

10


• บรการเครอขายสงคม (social network service)service)–รปแบบของเวบไซต ในการสรางเครอขายสงคม สาหรบผใชงานในอนเทอรเนตสาหรบผใชงานในอนเทอรเนต

–บรการเครอขายสงคมมกจะประกอบไปดวย การแชต โ ปโ ป สงขอความ สงอเมล วดโอ เพลง อปโหลดรป บลอก

– เชน www.facebook.com

11


• กระดานขาว (Bulletin Board System: BBS)/กระดานสนทนา (Web Board)สนทนา (Web Board)–เปนกลมขาวหรอ newsgroup –แบงแยกออกเปนกลมตามความสนใจ เชน กลมผสนใจศลปะ, เพลง, กฬา, วฒนธรรม เปนตน , , ,

–www.pantip.com

12


• FTP(File Transfer Protocol)โ ฟ โป i –โอนยายแฟมขอมล หรอโปรแกรมตาง ๆ จาก internet มายงเครองคอมพวเตอรของเรา เรยกวา downloadโ โ –โอนยายแฟมขอมล หรอโปรแกรมตาง ๆ จากเครองคอมพวเตอรของเรา ไปยงเครองแมขายทใหบรการ เรยกวา upload

13


TelnetTelnet–ใชเครองคอมพวเตอร เครองอนทไกลออกไป เชน

>Telnet well.com

14


• Internet Telephony ไ ป ฟ ซ –วธการสอสารไมวาจะเปนดวยเสยง ระบบแฟกซ หรอระบบสงขอความผานเครอขายอนเตอรเนตแทนระบบเครอขายโทรศพทพนฐาน

( i ) ป–VoIP (Voice over Internet Protocol) เปนการโทรศพทผาน Internet

15


• การประชมทางไกล (Video Conferencing)–เปนการประชมทผเขารวมประชมอยกนคนละสถานท–เปนการประชมทผเขารวมประชมอยกนคนละสถานท–สามารถประชมรวมกนและมปฏสมพนธโตตอบกนได–มการสงขอความ ภาพ เสยง

www skype com โปรแกรมวดโอแชท ทเหนทงภาพและ–www.skype.com โปรแกรมวดโอแชท ทเหนทงภาพและเสยง

16

บรการคนหาขอมลตาง ๆ

ผใชบรการสามารถคนหาขอมลตาง ๆหองสมดขนาดมหมา แหลงความร

เรว ประหยดคาใชจายในการเตรยมขอมล

Archie G h Gopher WAIS(Wide Area Information Service)World-Wide Web (WWW)

17

World-Wide Web (WWW)

• WWW เปนการใชงานแบบหนงใน Internet • ทางานในระบบ Client-Server • ผใหขอมลเรยกวา Web Server ผขอขอมลเรยกวา Web Browser• กลไกในการจดรปแบบและแสดงเอกสารใชภาษาทเรยกวา Hypertext

Markup Language (HTML)• HTML ยงสามารถเชอมโยงไปยงเอกสารชนอน ๆ ในระบบ โดยการระบ

เปน URL (Uniform Resource Locator) • URL เปนตาแหนงของเอกสาร เราเรยกการเชอมโยงแบบนวา Hyperlink

โ ใ ใ การเชอมโยงนทาใหเกดเครอขายขนาดใหญเรยกวา WebWeb18

URL (Uniform Resource Locator)

URL เปนการระบตาแหนงของแฟมขอมลใน Internet มรปแบบการเขยนดงน

Service://node/path ป 3 ส ประกอบดวย 3 สวนหลก• Service หมายถง ชนดหรอวธการทจะใชในการนาแฟมนนมา• Node เปนชอของเครอง (domain name) ทแฟมขอมลทตองการ

อย• Path เปนสวนของชอและตาแหนงของแฟมในเครองนน

19

Service://node/path

ใ ใ

p

• Service หมายถง ชนดของบรการหรอวธการทจะใชในการนาแฟมขอมลทตองการนนมา

ป ฟ ป – http เปนแฟมประเภท html หรอ htm– ftp เปนแฟมทตองใช file transfer protocol

ป ฟ ใ – file เปนแฟมทอยในเครองเดยวกน• Node เปนชอของเครอง (Domain Name) ทแฟมนนอย เชน

โ www.google.com โดยสวนทายของชอ node จะบอกถงลกษณะขององคกรทเปนเขาของเครองนน เชน com , edu, org, gov

• P th เปนสวนของชอและตาแหนงของแฟมในเครองนน เชน• Path เปนสวนของชอและตาแหนงของแฟมในเครองนน เชนhttp://www.cs.psu.ac.th/somsri/345-201/index.html

20

Protocol โปรโตคอล

• กฎ หรอวธทถกกาหนดขนเพอการสอสารขอมล • ผสงขอมลจะตองสงขอมลในรปแบบตามวธการสอสารทตกลงไวกบผรบขอมล • โปรโตคอล (Protocol) ทใชมาก

– Transmission Control Protocol / Internet Protocol (TCP/IP) โปรโตคอล ใ ใ หลกทใชในระบบอนเตอรเนต

– HyperText Transfer Protocol (HTTP) ใชสาหรบการสงเอกสาร HyperText ทถกเขยนดวยภาษา HTML จากเครองหนงไปแสดงบนHyperText ทถกเขยนดวยภาษา HTML จากเครองหนงไปแสดงบนเวบเบราเซอรในคอมพวเตอรอกเครองหนง

– File Transfer Protocol (FTP) โปรโตคอลนจะใชสาหรบการถายโอนไฟลระหวางเครองคอมพวเตอร

21

การใชงานระบบอนเตอรเนต

• รปแบบการเชอมตอในอนเตอรเนต จะเปนในรปแบบทเรยกวา Client-ServerClient Server

• ใช โปรโตคอล TCP/IP• Client คอเครองคอมพวเตอรทเปนฝายขอรบบรการ เชนขอเรยกด web ขอ

แฟมขอมล ฯลฯ• Server คอเครองผใหบรการตามท client รองขอมา เชน web server

ใหบรการ web, mail server ใหบรการ mail22

ผใช Internet -> E-mail Address

• ประกอบดวย 2 สวน คอ ชอผใช และชอโดเมน

[email protected]

ชอผใช

ชอโดเมน

[email protected]

เครองหมายคนชอกลมของการใชอนเทอรเนต

ชอยอประเทศ

[email protected]

ชอผใชอนเทอรเนตชอเครองคอมพวเตอรทใชบรการ 23

การอางองอปกรณบนระบบเครอขายการอางองอปกรณบนระบบเครอขาย

• หมายเลขประจาเครอง (IP Address)

หรอหรอ

• ชอโดเมน (Domain Name)

24

IP Address (1)

IP Address (1)

– หมายเลขรหสประจาเครอง เครองแตละเครองทเชอมตออยในระบบเครอขาย– เครองแตละเครองทเชอมตออยในระบบเครอขายอนเตอรเนตม IP address ของตนเอง

– ตองไมซากนป ใ – InterNIC เปนหนวยงานในการดแลและจดสรร IP

Address25

IP Address (2)IP Address (2)

• ประกอบไปดวยตวเลข 4 สวนคนดวยจด (.) เชน 192.168.100.4ใช 32 บต 11000000 . 10101000 . 11001000 . 00000100 3 000000 0 0 000 00 000 00000 00

• แตละตวมคาตงแต 0 จนถง 2550 0 0 0 255 255 255 2550.0.0.0 – 255.255.255.255

• แตเพอความสะดวกในการจดจา มการใชระบบชอโดเมน (Domain Name System) เพอชวยใหการใชงานงายขน

ratree.psu.ac.thp

26

Domain Name (1)Domain Name (1)

• Domain Name System (DNS) เปนระบบการแปลงชอคอมพวเตอรคอมพวเตอร

IP Address : 192.168.100.3Domain Name : ratree.psu.ac.th

• ชอทเปนตวอกษรชวยใหผใช จาไดงาย• ชอทเปนตวอกษรชวยใหผใช จาไดงาย• การสอสารจรง จะใชหมายเลข IP

27

Domain Name (2)

• ป ป

Domain Name (2)

• เปนการจดกลมของคอมพวเตอรเปนกลมๆ เพอสะดวกและสอความหมายในการจา

ใ ไ ไ Domain สากล Domain ในไทย ความหมาย ตวอยางเวบไซต.com co.th บรษทเอกชน www.loxinfo.co.thedu ac th สถาบนการศกษา www psu ac th.edu ac.th สถาบนการศกษา www.psu.ac.th.gov go.th หนวยงานรฐบาล www.royalthaipolice.go.th.mil mi.th องคกรทางทหาร www.navy.mi.th.net net.th องคกรททาธรกจเกยวกบ

Internetwww.internic.net

ไ ไ

28

.org or.th องคกรทไมหวงผลกาไร www.nectec.or.th

E-CommerceE Commerce

• พาณชยอเลกทรอนกส (Electronic Commerce) คอ การทาธ ร ก จผ า นส อ อ เ ล กทรอน ก ส ใ นทกช อ งท า งท เ ป นธ ร กจผ านสออ เ ล กทรอนกส ในท ก ชอ งท า งท เปนอเลกทรอนกส เชน การซอขายสนคาและบรการ ใ • เพอลดคาใชจาย

• ลดบทบาทองคประกอบทางธรกจ เชน ทาเลทตง พนกงานลดบทบาทองคประกอบทางธรกจ เชน ทาเลทตง พนกงานขาย

• ลดขอจากดของระยะทางและเวลา29

ประเภทของ E-Commerceประเภทของ E Commerce

คคาทจบคแลกเปลยนขอมลทางธรกจ แบงเปน 3 กลม คอ• ป (B i )• ผประกอบการ (Business)• ผบรโภค หรอ ประชาชน (Consumer)• รฐบาล (Government)

30


• ผประกอบการกบผบรโภค (B2C – Business to Consumer)• ป ป (B2B B i • ผประกอบการกบผประกอบการ (B2B – Business to

Business)• ผบรโภคกบผบรโภค (C2C – Consumer to Consumer)• ผประกอบการกบภาครฐ (B2G Business to • ผประกอบการกบภาครฐ (B2G – Business to

Government)• ภาครฐกบประชาชน (G2C – Government to Consumer)

31


• ผประกอบการกบผบรโภค (B2C – Business to Consumer)การคาระหวางผคาโดยตรงถงลกคา เชน การขายหนงสอ–การคาระหวางผคาโดยตรงถงลกคา เชน การขายหนงสอwww.amazon.com, www.naiin.com

–การจองตวเครองบนผานอนเตอรเนต

– เวบไซตตลาดกลางอเลกทรอนกสของสนคา OTOP เวบไซตตลาดกลางอเลกทรอนกสของสนคา OTOP www.thaitambon.com

32


• ผประกอบการกบผประกอบการ (B2B – Business to Business)Business)–การซอขายระหวางผผลตดวยกน เชน รานคาปลกสงซอสนคา

จากบรษทผผลต– เชน บรษท คาลเทกซ (ประเทศไทย) จากด

(http://www.caltex.com/th)–ผลตภณฑเครอซเมนตไทย (www.cementthaionline.com)( )

33


• ผบรโภคกบผบรโภค (C2C – Consumer to Consumer)การตดตอระหวางผบรโภคกบผบรโภคมหลายรปแบบและ–การตดตอระหวางผบรโภคกบผบรโภคมหลายรปแบบและวตถประสงค เชน เพอการตดตอสอสาร ขาวสาร หรอทาการแลกเปลยนสนคากนเองแลกเปลยนสนคากนเอง

– เวบไซตซอขายของมอสอง www.ThaiSecondhand.com– www.ebay.com เวบไซตในการซอขายสนคา และประมลราคา

สนคา34


• ผประกอบการกบภาครฐ (B2G – Business to Government)การประกอบธรกจระหวางภาคเอกชนกบภาครฐ–การประกอบธรกจระหวางภาคเอกชนกบภาครฐ

– เชน การประมลออนไลน ระบบจดซอจดจางของภาครฐ (e-Government Procurement) www.gprocurement.go.th

–www.moi.go.th การประกาศจดจางของภาครฐในเวบไซตกระทรวงมหาดไทย

35


• ภาครฐกบประชาชน (G2C – Government to Consumer)เปนการบรการของภาครฐผานสออเลกทรอนกส เชน การคานวณ– เปนการบรการของภาครฐผานสออเลกทรอนกส เชน การคานวณและเสยภาษผานอนเตอรเนตของกรมสรรพากร (www.rd.go.th)

ใ ป ใ –การใหขอมลประชาชนผานอนเตอรเนต เชน การทาใบขบขของกรมการขนสงทางบก (www.dlt.go.th)

36

ประโยชนของ E-Commerceประโยชนของ E Commerce

• ผซอ• • ผขาย• ผผลต นกศกษาลองยกตวอยาง

หนอยซจ หนอยซจะ…

37


• ผซอหาขอมลเพอเปรยบเทยบสนคาและบรการ–หาขอมลเพอเปรยบเทยบสนคาและบรการ

–สามารถแลกเปลยนขอมลสนคาระหวางผบรโภคดวยกนผาน อนเตอรเนต

–มรานคาใหเลอกมากขน–ไดรบสนคาอยางรวดเรว (Electronic Delivery)ลดพอคาคนกลาง–ลดพอคาคนกลาง

38


• ผขายเพมความสมพนธกบลกคาไดทวถงขน– เพมความสมพนธกบลกคาไดทวถงขน

– เพมยอดขาย– เพมประสทธภาพในระบบภายในสานกงาน

–ลดภาระสนคาคงคลงลดภาระสนคาคงคลง– เพมสนคาบรการใหม

ป ใ – เปดตลาดใหม39


• ผผลตลดเวลาในการจดซอ /สงมอบสนคา–ลดเวลาในการจดซอ /สงมอบสนคา

– เพมประสทธภาพในระบบภายในสานกงาน– เพมยอดขาย

–ลดเวลาในการผลตลดเวลาในการผลต–ลดความผดพลาดในการสอสาร

40

Introduction to HTMLIntroduction to HTML

ความหมายของ HTML

• Hyper Text Markup Language • ภาษาทถกออกแบบเพอใชสราง Web

Pageไฟ • ไฟลนามสกล .htm, .htmlไฟ ไฟ • ไฟล 1 ไฟล = Web Page 1 หนา

โครงสรางของ ไฟล HTMLไฟลเอกสาร HTML ปร กอบดวยสวนปร กอบสองสวนคอ H d กบ B d

<html>ไฟลเอกสาร HTML ประกอบดวยสวนประกอบสองสวนคอ Head กบ Body

<head> <title> Page Title </title> กาหนดสวนหว</head>

<body>……...เนอหา </body> กาหนดเนอหา

</html>

สวนหวเรอง (Head Section)

<head>

ใชอธบายเกยวกบขอมลเฉพาะของหนาเวบนนๆ ม Tag สาคญ คอ<head><title> Title of page </title>/h d</head>

Agenda ระบบเครอขาย Internet การสบคนขอมล Social Network ภาษา HTML

Simple.htmlSimple.html

<html><head>

<title>Title of page</title></head><body><body>

This is my first homepage. </body></body>

</html>

HTML ประกอบดวย “แทก” (Tag)

Tag

อยในเครองหมาย l th b k t ( < ) และ t th b k t ( > ) อยในเครองหมาย less-than bracket ( < ) และgreater-than bracket ( > ) Tag ใน HTML แบงได 2 ลกษณะ คอ

–Tag เดยวTag ทไมตองมการปดรหส เชน <P>, <BR> เปนตน

ป ป–Tag เปด/ปดTag ทประกอบดวย Tag เปด และ Tag ปด โดย Tag ปด จะมเครองหมาย slash ( / ) นาหนาคาสงใน Tag นนๆ เชน <B> </B> slash ( / ) นาหนาคาสงใน Tag นนๆ เชน <B>…</B>, <BLINK>…</BLINK> เปนตน

การเขยน Tags <BLINK> <Blink> หรอ <blink> ไมแตกตางกน ใหผลการเขยน Tags <BLINK>, <Blink> หรอ <blink> ไมแตกตางกน ใหผลเหมอนกน (not case sensitve)


ขอควรจา

Web Browser ทกโปรแกรมเมอทาการแปลง HTML ใหแสดงเปนภาพบนจอ

• Web Browser จะไมสนใจชองวาง การเวนวรรค หรอขนบรรทดใหม (white space, tab, carriage returns)

• Tag สามารถใชตวอกษรตวพพมใหญหรอพมพเลกกได (non case-sensitive) case sensitive)

• Tags เกอบทกตว ตองปรากฏเปนคเสมอ นนคอเมอม Tag เปด กตองม Tag ปด ยกเวน Tags พเศษบางตวเทานนกตองม Tag ปด ยกเวน Tags พเศษบางตวเทานน


Attributes

• Attributes เปนสวนขยายความสามารถของ Tag ใสภายในเครองหมาย < > ในสวน Tag เปดเทานน

• แตละ Tag จะม Attribute แตกตางกนไป มจานวนไมเทากน การระบ Attribute มากกวา 1 Attribute ใหใชชองวางเปนตวคน

เชน Tag เกยวกบการจดพารากราฟ คอ <P> สามารถกาหนด attribute ALIGN เชน

<P ALIGN="Left">...</P>


สรางเวบเพจดวย NotePadส Note ad

เปดโปรแกรม NotePad => Start/All Programs

Save d:\simple.htmlp

แสดงเวบเพจดวย Internet Explorerแสดงเวบเพจดวย Internet Explorerเปดโปรแกรม Microsoft Internet Explorerระบ Address : d:\simple.html

Lab InstructionLab Instruction

ป โป1. เปดโปรแกรม Notepad2 ใ b 2. พมพเนอหาใน web page3 จดเกบลงไฟล d:\simple html3. จดเกบลงไฟล d:\simple.html4. เปดโปรแกรม Internet Explorer4. เปดโปรแกรม Internet Explorer5. เปดไฟล d:\simple.htmlp

1. เปดโปรแกรม NotePad. Note ad

เปดโปรแกรม NotePad => Start/All Programs

2. พมพเนอหาใน web page2. พมพเนอหาใน web page<html><html>

<head>

i l i l f / i l<title> Title of Page </title>

</head>

<body>

This is my first pageThis is my first page

</body>

/h l</html>

3. จดเกบลงไฟล d:\simple.html 3. d:\s p e. t

Save d:\simple htmlSave d:\simple.html

4 เปดโปรแกรม Internet Explorer4. เปดโปรแกรม Internet Explorer5 เปดไฟล d:\simple html5. เปดไฟล d:\simple.html

คาสงการจดตาแหนงของขอความ (Paragraph Break)

ใ ใ ใช Tag <P> ในการจดยอหนาของขอความ <p>Today is my first day at HTML, I’m so excited!</p>

Tag อาจจะมสวนขยายทเรยกวา Attribute• กาหนดขอความแสดงกลาง page

<p align=“center”>Hello</p>

• กาหนดขอความแสดงชดขวา page<p align=“right”>My name</p>

L ft ??Left ??

กาหนดขอความใหอยกงกลางดวย tag<p align=“center”>………</p>

save

2

1

<p align=“center”>So Happy…</p>

Refresh3

กาหนดสพนหลงของตวอกษร

ใช Attribute “BGColor” กาหนดสพนหลง ใช Attribute BGColor กาหนดสพนหลง ม 2 รปแบบ

1. ระบชอของสทตองการ อาทเชน red, green, yellow, blue …g y

2. ระบรหสเลขฐาน 16 <BODY BGColor = "สพนหลง"> .... </BODY>

<BODY BGColor = "#RRGBB"> .... </BODY>

กาหนดสของพนหลงของตวอกษร ระบชอของส

รปแบบ

<HTML>

รปแบบ :: <BODY BGCOLOR = "#RGB หรอ กาหนดชอสทตองการ">

<HTML><HEAD>

<TITLE>การกาหนดสพนหลงโดยระบส</TITLE> <TITLE>การกาหนดสพนหลงโดยระบส</TITLE> </HEAD>

<BODY BGcolor=“yellow” > <BODY BGcolor yellow > การกาหนดสพนหลงโดยระบส

</BODY></BODY></HTML>

กาหนดสของพนหลงของตวอกษร ระบแบบตวเลข

ระบแบบตวเลขโดยจะใชคาสในระบบฐาน 16 หรอเรยกวาหลกการผสมสแบบ RBG

<HTML><HEAD>

<TITLE> การกาหนดสพนหลงโดยระบตวเลข</TITLE> </HEAD><BODY BGcolor="#0000FF">

โ ใ การกาหนดสพนหลงโดยใชหลก "#RBG"</BODY>

</HTML>

กาหนดสพนหลงเปนสเหลอง

รปแบบ BODY BGCOLOR "#RGB ส "รปแบบ :: <BODY BGCOLOR = "#RGB หรอ กาหนดชอสทตองการ">

save11

2

Refresh3

กาหนดสของตวอกษร (1)ส ( )

รปแบบ BODY T t " #RGB"

<HTML>

รปแบบ :: <BODY Text = " กาหนดชอสทตองการ หรอ #RGB">

<HEAD><TITLE>การกาหนดสตวอกษร</TITLE>

</HEAD><BODY Text="blue" >

ระบชอของส

การกาหนดสตวอกษร</BODY>

</HTML>

กาหนดสของตวอกษร (2)กาหนดสของตวอกษร (2)<HTML>

<HEAD>TITLE ส /TITLE <TITLE>การกาหนดสตวอกษร</TITLE>

</HEAD>BODY TEXT "#FF0066" ระบแบบตวเลข RGB<BODY TEXT="#FF0066" > การกาหนดสตวอกษร/BODY

ระบแบบตวเลข RGB

</BODY></HTML>

<BODY BGCOLOR=“yellow” TEXT="blue" >

กาหนดสตวอกษร

รปแบบ BODY TEXT " #RGB"รปแบบ :: <BODY TEXT = " กาหนดชอสทตองการ หรอ #RGB">

save11

2

Refresh3

คาสงการกาหนดรปแบบตวอกษร (Font Type) ( yp )

ใช Tag <FONT> ตามดวย Attribute เพอกาหนด• แบบตวอกษร (Font Face)

• ขนาดของตวอกษร (Font Size)• สของตวอกษร (Font Color) • สของตวอกษร (Font Color)


แบบตวอกษร (Font Face)

ฟ การกาหนดแบบตวอกษรใช Attribute “Face”

<FONT Face = "ชอฟอนต"> ... ขอความ ... </FONT>

สามารถระบมากกวา 1 ฟอนต ใหกาหนดรปแบบดงนสามารถระบมากกวา 1 ฟอนต ใหกาหนดรปแบบดงน<FONT Face = "ชอฟอนต1",ชอฟอนต2",...> ... ขอความ ... </FONT>

ขอดของการกาหนดฟอนตไวมากกวา 1 ฟอนตคอ เมอ Web ขอดของการกาหนดฟอนตไวมากกวา 1 ฟอนตคอ เมอ Web Browser หาฟอนตท 1 ไมเจอกจะหาฟอนตท 2 ตอไปตามลาดบตามลาดบ


ตวอยางการกาหนดแบบตวอกษร

<HTML><HEAD><TITLE> Font Face </TITLE></HEAD><BODY> <FONT Face="AngsanaUPC"> Font Face AngsanaUPC </FONT> <FONT Face="Comic Sans MS">

Font Face Comic Sans MS </FONT>

</BODY></HTML></HTML>


ขนาดของตวอกษร (Font Size) การกาหนดขนาดของตวอกษรใช Att ib t "Si "

<FONT Size="คากาหนดขนาดของตวอกษร">..........</FONT>การกาหนดขนาดของตวอกษรใช Attribute "Size"

<HTML><HEAD><TITLE> Font Face </TITLE></HEAD><BODY><FONT Size="1">Font Size 1</FONT><BR>FONT Size 1 Font Size 1 /FONT BR<FONT Size="2">Font Size 2</FONT><BR><FONT Size="3">Font Size 3</FONT><BR><FONT Size="4">Font Size 4</FONT><BR><FONT Size="5">Font Size 5</FONT><BR>

ตวอยางFONT Si e 5 Font Si e 5 /FONT R<FONT Size="6">Font Size 6</FONT><BR><FONT Size="7">Font Size 7</FONT><BR></BODY></HTML> /

ม 7 ขนาด ใชตวเลข 1-7 เปนตวกาหนดคามาตรฐานคอ 3

สของตวอกษร (Font Color)( o t Co o )การกาหนดสใหกบตวอกษรใช Attribute “color“การกาหนดสใหกบตวอกษรใช Attribute colorสามารถกาหนดสของตวอกษรทาได 2 วธ คอ

โ 1. กาหนดโดยชอของสมาตรฐาน<FONT Color = "ชอสมาตรฐาน"> ... ขอความ ... </FONT>2. กาหนดโดยรหสเลขฐาน 16

โดยใชแทนรหสดวยเลขฐาน 16 ในชวง 0 1 2 3 4 5 6 7 8 9 A B C D E F

<FONT Color = "#RRGGBB"> ... ขอความ ... </FONT>

โดยใชแทนรหสดวยเลขฐาน 16 ในชวง 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,FAgenda ระบบเครอขาย Internet การสบคนขอมล Social Network ภาษา HTML

คาสงการกาหนดลกษณะตวอกษร (Style)( y )

ใ ใ ชวยในการกาหนดลกษณะตวอกษรใหมความเดนชด เพอความเหมาะสมกบงานในลกษณะตางๆ มรปแบบตางๆ ดงน

• การกาหนดตวอกษรตวหนา (Bold) ใช Tag <B> การกาหนดตวอกษรตวเอยง (It li ) ใช T <I> • การกาหนดตวอกษรตวเอยง (Italic) ใช Tag <I>

• การกาหนดขดเสนใตตวอกษร (Underline) ใช Tag <U> ใ • การกาหนดขดเสนพาดทบกลางตวอกษร (Strikethrough) ใช Tag <S>

• การกาหนดตวอกษรตวหอย (Subscript) ใช Tag <SUB> • การกาหนดตวอกษรตวยก (Superscript) ใช Tag <SUP>

ตวอยางการกาหนดลกษณะตวอกษร

<HTML><HEAD><TITLE> Font Style </TITLE></HEAD><BODY>Font style is normal

l ld /Font style is <B>Bold</B><BR>Font style is <I>Italic</I><BR>Font style is <U>Underline</U><BR>Font style is <S>Strikethrough</S><BR>

l i b i /Font style is <SUB>Subscript</SUB><BR>Font style is <SUP>Superscript</SUP><BR>

</BODY></HTML>/

ตวอยางตวอกษรตวอกษรหอย (subscript)

<HTML><HEAD>

<TITLE>SUBSCRIPT</TITLE> </HEAD><BODY text=“blue”> H<Sub>2</Sub>0 = Water </BODY>

H2O

</HTML>


ขอความลกษณะหวเรอง (Heading)

ขอความลกษณะหวเรอง (Heading)

ม 6 แบบ

/<H1>This is Heading 1</H1>

<H2>This is Heading 2</H2>


<H4>This is Heading 4</H4>1 ขนาดใหญสด



6 ขนาดเลกสด

รปแบบ :: <Hn>....Heading Text ... </Hn>

ขอความลกษณะหวเรอง (Heading) (ตอ)

<HTML><HEAD>

<TITLE>การกาหนด Heading</TITLE> /HEAD ’</HEAD>’

<BODY> ขนาดปกต

<H1> This is Heading 1 </H1><H1> This is Heading 1 </H1><H2> This is Heading 2 </H2><H3> This is Heading 3 </H3><H4> This is Heading 4 </H4>g<H5> This is Heading 5 </H5><H6> This is Heading 6 </H6>

</BODY></HTML>

เพมขอความลกษณะหวเรองขนาด 2

งานอดเรก

เพมขอความลกษณะหวเรองขนาด 2

<H2> งานอดเรก </H2>

งานอดเรก

เพมงานอดเรกของนศ.คนละ 3 รายการ

Save and Refresh

การขนบรรทดใหม

ป ไ ป ( ) เปนคาสงทไมตองมคาสงปด (Single Tag) ปรปแบบ :: <BR>...............

RedGreenBl

<BR> Red<BR> Green<BR> Blue Blue<BR> Blue

RedGreen

Red Green Blue

Blue

Save and Refresh

การแสดงรายการ (List)

รายการมลาดบ (Ordered list)รายการมลาดบ (Ordered list)<ol> <li>Coffee

<li>Milk1. Coffee

<li>Milk</ol>

2. Milk

รายการไมมลาดบ (Unordered list)<ul> <ul>

<li>Coffee<li>Milk

</ul>

• Coffee• Milk

</ul>

แสดงรายการทวทชอบ โดยใช List

รายการไมมลาดบ (U d d li t)รายการไมมลาดบ (Unordered list)

Save and Refresh

การใสรปภาพ

ไฟลรปภาพทแสดงบน Web จะเรยกวา "Image"+ ผลด ทาให Web Page ดนาสนใจและสวยมากขน - ผลเสย ทาใหการแสดงผลชาลง ดงนนการเลอกรปภาพดงนนการเลอกรปภาพ• ไมควรจะเลอกภาพทมขนาดใหญ • ใน Web Page ไมควรมภาพมากเกนไป • ใน Web Page ไมควรมภาพมากเกนไป โดยทวไปจะใชมาตรฐาน 2 ชนด คอ gif และ jpeg (jpg)

ไ ป <IMG SRC=“ชอไฟลรปภาพ”> รปแบบ

ตวอยางการใสรปภาพ

ไฟ ป ใ • เกบไฟลรปภาพใน folder เดยวกบ web Page<HTML>

<HEAD><HEAD><TITLE>Insert Image</TITLE>

</HEAD><BODY> <BODY>

<IMG SRC="picture.gif" width="200" height="180" border="1"> </BODY>

</HTML>

กรณอยใน folder ยอย image สามารถกาหนดไดโดย “image/picture.gif”

การใส Hyperlinkการใส Hyperlink

ใชรปแบบดงน<a href=“URL”>ขอความสาหรบทาlink</a><a href= URL >ขอความสาหรบทาlink</a>

เชน<a href=“http://staff.cs.psu.ac.th">

345‐101 Computer and Application

</a>

การสรางตารางการสรางตาราง

<table>...</table> เปนการบอกจดเรมตนและจดสนสดตาราง<tr> </tr> เปนการบอกจานวนแถว (row)<tr>....</tr> เปนการบอกจานวนแถว (row)<td>...</td> เปนการบอกจานวนคอลมน (colunm

• ALIGN กาหนด ตาแหนงตาราง โดย LEFT=กาหนดตารางใหอยทางซายRIGHT=กาหนดตารางใหอยทางขวา

• BACKGROUND ใสภาพกรฟก เปนพนหลงตาราง url เปน ตาแหนง ภาพ • BGCOLOR กาหนดสใหตาราง • BORDER เสนขอบ ตาราง n เปนคา ความหนาของ ขอบตาราง • BORDER เสนขอบ ตาราง n เปนคา ความหนาของ ขอบตาราง • BORDERCOLOR กาหนดส ใหขอบตาราง โดยสมพนธกบ BORDER• CELLPADDING กาหนดระยะ หางระหวาง ตวหนงสอและเสนแบงตารางCELLPADDING กาหนดระยะ หางระหวาง ตวหนงสอและเสนแบงตาราง• CELLSPACING กาหนดขนาดของเสนตาราง • WIDTH กาหนดความกวางของตาราง เปนตวเลขและเปน % • HEIGHT กาหนดความสงของตารางเปนตวเลขและเปน %• COLSPAN รวมสองคอลมนเปนหนงคอลมน

lecture 6 อินเตอร เน็ต...

Documents