44
บบบบบ 1 บบบ บบบบบบบบบบบ HTML เเเเเเเเเเเเเเเเเเเเเเเเเ 321370 [เเเเ 1] บบบบบบบบบบบบบบ HTML บบบบบบบบบ เเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเ dekdee เ เ เ เ เ เเ เ เ เเเ เ เ เเ PICO เ เ เ เ เ เ เเ เ เ เเเ เ เเเเเเเเเเเเเเเเเเเเ เ เ เเ เ เ เเเ เ เ เเ เ เ เเเ เเเเเเเเเเเเเเเ HTML เเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเ editor PICO เเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเ เเเเเ เเเเเเเเเเ Notepad เเ เเเเเเเเเเเเเเ Windows เ เ เเ เเเ เเ เ เ เ เ เเเเเเเเเเ Linux เเเเ เเเเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเเเเเเเ เเเเเเเเเเเเเเ เเเ เเเเเเเเเเเเเเเเเเ เเเ เ เ เ เเ เเเ เ เเเ เ เเเ เ เ เ เเเเเเเเเเเเเเเเเเ เเเเเเ HTML เเเ เเเเเเเเเเเเเเเเเเ เ เ เ เ เ เ เ Notepsd ++ เเเเเเเเ editor เเเเ เ เ เเ เ เ เ เเเ เ เ เเ เ เ เเเ เเเเเเเเเเเเเเเเเเเเเ เเเเ html เเเ PHP เ เ เเ เ เเ เ เ เ เ เ เ

สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

Page 1: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

บทท 1 การสราง

เอกสาร HTML

เอกสารประกอบการสอนรายวชา 321370 [หนา 1]

การสรางเอกสาร HTML เบองตน

การดำาเนนการกบเคร องแมขาย dekdee

การใชเครองมอ PICO

ในบทเรยนนจะเร มตนเกยวก บการ ใช เคร องม อ เพ อสร างเอกสารเวบ HTML โดยจะเร มตนจากการใชงานโปรแกรม editor PICO ซ ง เป นเคร องมอ ในการพมพเอกสาร คลายกบโปรแกรม Notepad ใ น ร ะ บ บ ป ฏ บ ต ก า ร Windows

ไ ด ร จ ก ร ะ บ บ ป ฏ บ ต ก า ร Linux ซ งในวชาน จะใชงานเพ อเปนเคร องแมขายในการเรยนการสอน และทำาการเขยนโปรแกรม โดยจะมพ นทเพอใหสามารถทจะเ ผ ย แ พ ร เ อ ก ส า ร HTML ไ ด

ไดเรยนการตดตงโปรแกรม Notepsd ++ ซ ง เป น editor หรอเปนเคร องมอเพอชวยในการเขยนโปรแกรมภาษา html และ PHP

ไดใชโปรแกรม WinSCP ซงเป นโปรแกรมท ถ ายโอนขอม ลระหวางเคร องแมขาย dekdee เปนระบบปฏบตการ Linux และเคร องลกขายซงเปนระบบปฏบต

Page 2: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

1.1 ก า ร ใ ช โ ป ร แ ก ร ม Putty

การใชงานเร มจากการใชโปรแกรม Putty ซงเปนโปรแกรมในการต ด ต อ ไ ป ย ง เ ค ร อ ง

แมขายเคร องเซรฟเวอร dekdee.buu.ac.th สงจำาเปนในการต ด ต อ ไ ป ย ง

เ ค ร อ ง เ ซ ร ฟ เ ว อ ร ก ค อ Username Password

รปท 1-1 ก า ร เ ข า ใ ช โ ป ร แ ก ร ม Putty

เอกสารประกอบการสอนรายวชา 321370 [หนา 2]

Page 3: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

จาก Error: Reference source not found เมอเปดโปรแกรม putty แลว ใหใส Hostname คอ dekdee.buu.ac.th จากนนคลกทปม Open เพอทำาการตดตอไปเครองเซรฟเวอร จากนนใหใส username และ Password ทไดรบ หนาจอของโปรแกรม Putty จะแสดงคำาวา Login: ใ น ส ว น น ใ ห ใ ส ช อ username แ ล ว ก ด Enter

โปรแกรมจะแสดงขอความ Password: ใหใสรหสผาน โดยใหใสรหสผานลงไป ซงในสวนนบนหนาจอจะไมปรากฏ สญลกษณ รปดอกจน หรอตวอกษรใดๆเลย ด งน นจงต องใชความระมดระวงในการใสขอมล

ถาใสขอมลถกตองโปรแกรมจะขนขอความ BLS $ ดง Error:Reference source not found แตถาใสรหสผานไมถกตองจะตองใ ส ใ ห ม อ ก ค ร ง ด ง Error: Reference source not found

รปท 1-2 การลอกอนเพอเขาใชเครอง dekdee.buu.ac.th

เอกสารประกอบการสอนรายวชา 321370 [หนา 3]

Page 4: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

รปท 1-3 ก ร ณ ท ใ ส ร ห ส ผ า น ไ ม ถ ก ต อ ง

1.2 ก า ร ใ ช ค ำา ส ง บ น Linux

1. ใ ห ด ำา เ น น ก า ร พ ม พ ค ำา ส ง ต า ม ข น ต อ น ต อ ไ ป น Prompt$ mkdir public_html [ก ด enter]Prompt$ ls [ก ด enter]

ผ ล ล พ ธ ท ได………………………………………………………………………… … … … … … … …

Prompt$ ls -la [ก ด enter]

ผ ล ล พ ธ ท ได………………………………………………………………………… … … … … … … …

Prompt$ cd public_html [ก ด enter]Prompt$ mkdir work01 [ก ด enter]Prompt$ ls [ก ด enter]

ผ ล ล พ ธ ท ได………………………………………………………………………… … … … … … … …

เอกสารประกอบการสอนรายวชา 321370 [หนา 4]

Page 5: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

ค ำา ส ง mkdir ใ ช เ พ อ ……………………………………………………………………

………………...ค ำา ส ง cd ใ ช เ พ อ

……………………………………………………………………………………...

2. ใ ห ด ำา เ น น ก า ร พ ม พ ค ำา ส ง ต า ม ข น ต อ น ต อ ไ ป น Prompt$ cd [ก ด enter] Prompt$ ls [ก ด enter]Prompt$ cd public_html [ก ด enter]Prompt$ mkdir day [ก ด enter]Prompt$ ls [ก ด enter]Prompt$ cd day [ก ด enter]Prompt$ mkdir monday [ก ด enter]Prompt$ mkdir sunday [ก ด enter]Prompt$ ls [ก ด enter]

ผลลพธทได……………………………………………………………………………………………

3. ใ ห น ส ต เ ป ด เ ว บ บ ร า ว เ ซ อ ร FireFox ห ร อ Internet Explorer แ ล ว พ ม พ URL ด ง ต อ ไ ป น

http://dekdee.buu.ac.th/~s [ร ห ส น ส ต ]

ผลลพธทได……………………………………………………………………………………………

เอกสารประกอบการสอนรายวชา 321370 [หนา 5]

Page 6: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

4. ใหเขยนโครงสรางของระบบแฟมขอมล หลงจากทไดสรางไดเ ร ค ท อ ร ต า ม ข อ 1, 2

1.3 ก า ร ใ ช โ ป ร แ ก ร ม Pico

โปรแกรม Pico เปน Editor หรอเรยกวา โปรแกรมบรรณาธกร ซงเปนเครองมองายๆทใชเขยนโปรแกรม วธการใชงานคอ เมอเปดโปรแกรม putty แ ล ะ ล อ ก อ น เ ร ย บ ร อ ย แ ล ว ใ ห พ ม พ ค ำา ส ง

Prompt$ cd [ก ด enter]Prompt$ cd public_html [ก ด enter]Prompt$ cd work01 [ก ด enter]Prompt$ pico profile.html [ก ด enter]

เอกสารประกอบการสอนรายวชา 321370 [หนา 6]

/ (root directory) Home directory

Page 7: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

รปท 1-4 แ ส ด ง ก า ร ใ ช โ ป ร แ ก ร ม Pico

เมอสามารถเขาโปรแกรม pico ได กสามารถทจะพมพขอมลไดตามป ก ต ด า น ล า ง จ ะ ม เ ค ร อ ง ม อ ป ร ะ ก อ บ ไ ป ด ว ย

^X (กดปม ctrl + X พรอมกน)หมายถง ออกจากโปรแกรม^O (กดปม ctrl + O พรอมกน) หมายถง บ น ท ก^G (กดปม ctrl + G พรอมกน) หมายถง ช ว ย เ ห ล อ^J (กดปม ctrl + J พรอมกน) หมายถง จดรปแบบเอกสารให

ห น า ห ล ง เ ท า ก น^R (กดปม ctrl + R พรอมกน)หมายถง เ ป ด อ า น ไ ฟ ล ^W (กดปม ctrl + W พรอมกน) หมายถง ด ว า ไฟล อย ท

ต ำา แ ห น ง ใ ด^Y (กดปม ctrl + Y พรอมกน) หมายถง ขามไปหนากอนหนา

ป จ จ บ น^V (กดปม ctrl + V พรอมกน)หมายถง ไ ป ย ง ห น า ถ ด ไ ป

เอกสารประกอบการสอนรายวชา 321370 [หนา 7]

Page 8: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

^U (กดปม ctrl + U พรอมกน)หมายถง ย ก เ ล ก ก า ร ต ด ค ำา^K (กดปม ctrl + K พรอมกน)หมายถง ก า ร ต ด ค ำา

ใหด ำาเนนการพมพขอความโปรแกรม ซ งเปนแทก (Tag) ภาษา HTML ด ง ร ป ท 1-4 โ ด ย ต ง ช อ ไ ฟ ล ว า profile.html

1.3.1 แ บ บ ฝ ก ห ด Pico ค ร ง ท 1ให น ส ต ใช โปรแกรม Pico แล วสร าง ไฟล ให อย ภ าย ใต

~/public_html/work01 ต ง ช อ ว า color.html

เอกสารประกอบการสอนรายวชา 321370 [หนา 8]

Page 9: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

ร ป ท 1-5 ซ อ ร ส โ ค ด ภ า ษ า HTML

ใหน สตเปดเวบบราวเซอร FireFox หรอ Internet Explorer แลวพ ม พ URL ค อ

http://dekdee.buu.ac.th/~s[ ตามดวยรหสประจ ำาตวน สต ] เ พ อ เ ป ด ด เ ว บ เ พ จ ท ไ ด ส ร า ง ข น

เอกสารประกอบการสอนรายวชา 321370 [หนา 9]

<html><head><title> color of html </title></head><body> <h1> Color Code for HTML </h1> <table width="400" border="1"> <tr> <td width="200"> 1 </td> <td width="200"> 2 </td> <td width="200"> 3 </td> <td width="200"> 4 </td> </tr> <tr> <td>#ff0000</td> <td bgcolor="#ff0000">&nbsp;</td> <td> red</td> <td bgcolor="red">&nbsp;</td> </tr> </table>

<!-- end table --> <br /> <hr /> <hr color="#ffcc00" /> <hr color="green" /> <hr color="blue" />

</body></html>

Page 10: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

1. ปจจบนใน current directory ของนสตมไฟลชอ……………………………………………………

2. ใ ห น ส ต พ ม พ ค ำา ส งPrompt$ cd [ก ด enter]Prompt$ pwd [ก ด enter]

ไดผลลพธคอ…………………………………………………………………………………………

Prompt$ cd public_html [ก ด enter]Prompt$ pwd [ก ด enter]

ไดผลลพธคอ…………………………………………………………………………………………

Prompt$ cd work01 [ก ด enter]Prompt$ ls [ก ด enter]

ไดผลลพธคอ…………………………………………………………………………………………

Prompt$ pwd [ก ด enter]

ไดผลลพธคอ…………………………………………………………………………………………

Prompt$ cp color.html table.html [ก ด enter]

เอกสารประกอบการสอนรายวชา 321370 [หนา 10]

Page 11: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

Prompt$ ls [ก ด enter]

ไดผลลพธคอ…………………………………………………………………………………………

คำาสง pwd ใชเพอ ……………………………………………………………………

………………คำาสง ls ใชเพอ

……………………………………………………………………………………ค ำา ส ง cp ใ ช เ พ อ

……………………………………………………………………………………

1.3.2 แ บ บ ฝ ก ห ด Pico ค ร ง ท 2จากแบบฝกหดในหวขอ 1.3.1 ท น สตได เขยนโปรแกรมภาษา

HTML ในเร อง ส ตอไปในไฟล table.html ใหน สนแกไขไฟลโดยใช โปรแกรม Pico โดยพมพคำาสงตอไปน pico table.html [enter]

จากบรรทดท 3 <body>เปลยนเปน <body bgcolor=”pink” color=”#ffaacc”>จ า ก น น ใ ห บ น ท ก แ ล ะ ด ค ว า ม เ ป ล ย น แ ป ล ง

ค ว า ม แ ต ก ต า ง ท เ ก ด ข น ค อ……………………………………………………………………

………………………………………………………………………………………………………………………..

เอกสารประกอบการสอนรายวชา 321370 [หนา 11]

Page 12: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

1.4 ก า ร ใ ช Editor Notepad++

โปรแกรม Notepad++ เปน Editor หรอโปรแกรมบรรณาธกรทเปนซอฟตแวรลขสทธโอเพนซอรส สามารถดาวนโหลดนำามาตดตงไดท http://notepad-plus.sourceforge.net/ เปนโปรแกรมทชวยทำาใหก า ร เ ข ย น โ ป ร แ ก ร ม ภ า ษ า ต า ง ๆ ม ค ว า ม ส ะ ด ว ก ม า ก ย ง ข น

รปท 1-6 เ ว บ Notepad++ [ http://notepad-plus.sourceforge.net/ ]

โปรแกรมทดาวนโหลดมามสญลกษณเปนกงกาอเมซอน เวอรชนทตดตงคอ 5.2 เมอตดตงโปรแกรมเรยบรอยแลวจะปรากฏไอคอนเปนสญลกษณรป

ก ร ะ ด า ษ แ ล ะ ป า ก ก า

เอกสารประกอบการสอนรายวชา 321370 [หนา 12]

Page 13: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

รปท 1-7 หน าจอโปรแกรม Notepad++ ในโหมดภาษา html

1.4.1 ส ร า ง เ ว บ ด ว ย Notepad++ในการใชโปรแกรม Notepad++ เปนเครองมอในการเขยนโปรแกรม

จะชวยใหการเขยนโปรแกรมงายขนเนองจากการแสดงผลจะมการแบงเปนสระหวางคำาสงของภาษา HTML และเนอหาในการสรางเวบ ซงนอกจากเอกสารประกอบการสอนรายวชา 321370

[หนา 13]

Page 14: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

ภาษา HTML แลว ภาษาอนๆ เชน C, PHP โปรแกรมกจะมการแสดงผลแ ย ก ส ต า ก ป ร ะ เ ภ ท ข อ ง โ ป ร แ ก ร ม อ ก ด ว ย

รปท 1-8 การเขยนโปรแกรมภาษา HTML ดวย Notepad++

เอกสารประกอบการสอนรายวชา 321370 [หนา 14]

Page 15: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

ในกรณทไมสามารถเช อมตอกบอนเทอรเนต เพ อท ำาการเขยนโปรแกรมดวย Pico บนเคร องแมขาย dekdee.buu.ac.th ได นสตกส า ม า ร ถ ใ ช Notepad++ เ ข ย น โ ป แ ก ร ม ท บ า น ไ ด

1.4.2 แ บ บ ฝ ก ห ด Notepad++ใหนสตใชโปรแกรม Notepad++ เขยนโปรแกรมดงรปท 1-8 โดย

บนทกชอไฟลวา color.html ซงใหนสตบนทกไฟลนไวท Desktop หรอตำาแหนงอนใดตามทตองการ เมอเขยนโปรแกรมเรยบรอยแลว ใหนสตวาดภ า พ ร ป แ บ บ ข อ ง ห น า เ ว บ color.html ใ น พ น ท ด า น ล า ง

1.5 ก า ร ใ ช โ ป ร แ ก ร ม WinSCP

โปรแกรม WinSCP เปนซอฟตแวรโอเพนซอรส สามารถดาวนโหลดไดท http://winscp.net/ เปนซอฟตแวรเพอใชในการถายโอนขอมลระหวางเครองแมขายและลกขาย กรณททำางานบนเครองสามารถทจะใช WinSCP ในการนำาเอาขอมลขนไปเกบไวทเคร องแมขาย dekdee.buu.ac.th ได

เอกสารประกอบการสอนรายวชา 321370 [หนา 15]

Page 16: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

การใชงานจะมลกษณะการทำางานคลายกบโปรแกรม putty คอจะตองร Username, Password แ ล ะ เ ค ร อ ง แ ม ข า ย ท จ ะ ต ด ต อ ไ ป

อนดบแรกใหเลอกใชโปรแกรมโดยดบเบลคลกท Icon จะไดโปรแกรมดงรปท 1-9 จากนนใหนสตคลกทไอคอน New เพอทำาการสรางการตดตอไปยงเคร องแมขายใหม

รปท 1-9 โ ป ร แ ก ร ม WinSCP

ข น ต อ ไ ป จ ะ แ ส ด ง ห น า จ อ ด ง ใ ห น ส ต ใ ส ช อ เ ค ร อ ง แ ม ข า ย dekdee.buu.ac.th และใส Username คอ s[ตามดวยรหสประจำาตวน ส ต ] แ ล ะ ร ห ส ผ า น

ถาเลอกคลกท Save จะเปนการบนทกการตดตอนเกบเอาไว เพราะน ส ต ส า ม า ร ถ ท ำา ม ห ห ล า ย ก า ร ต ด ต อ

เอกสารประกอบการสอนรายวชา 321370 [หนา 16]

Page 17: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

รปท 1-10 ก า ร เ ข า ใ ช ง า น โ ป ร แ ก ร ม WinSCP

เอกสารประกอบการสอนรายวชา 321370 [หนา 17]

Page 18: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

รปท 1-11 การอพโหลด (Upload) ขอมลไปไวทเครอง Dekdee

เอกสารประกอบการสอนรายวชา 321370 [หนา 18]

Page 19: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

บทท 2 Tag HTML

2.1 ร ป แ บ บ ข อ ง Tag เ ด ย ว

2.1.1 Tag <br />

เอกสารประกอบการสอนรายวชา 321370 [หนา 19]

คำาสง และรปแบบคำาสงภาษา HTML

รปแบบของ Tag เดยวรปแบบของ Tag ค

ในบทเรยนนจะเปนการเรยนร ค ำาส งภาษา HTML รวมถงร ปแบบในกาเขยนคำาสง ซ งประกอบด ว ย

TagAttributeValue

ต า ม ม า ต ร ฐ า น W3C HTML 4.01

Page 20: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

2.1.2 Tag <hr />

2.1.3 Tag <img />

2.2 ร ป แ บ บ ข อ ง Tag ค (พ น ฐ า น )

2.2.1 Tag <html>

2.2.2 Tag <head>

2.2.3 Tag <body>

2.2.4 Tag Comment

2.3 ก า ร แ ส ด ง ห ว ข อ <h1> <h6>

เอกสารประกอบการสอนรายวชา 321370 [หนา 20]

Page 21: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

2.4 ก า ร ใ ช Tag ท เ ก ย ว ก บ ก า ร จ ด ว า ง ต ำา แ ห น ง

2.5 การใช Tag ท เก ยวก บ Font และ Formatting

2.5.1 <p>

2.5.2 <i> <b> <u>

เอกสารประกอบการสอนรายวชา 321370 [หนา 21]

Page 22: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

บทท 3 Tag HTML

( ครงท 2)

3.1 ก า ร ส ร า ง ต า ร า ง <table>

3.1.1 <table>

3.1.2 <tr> <td> <th>

3.2 ก า ร แ ท ร ก ร ป ภ า พ

3.3 ก า ร ท ำา เ ช อ ม โ ย ง <a>

เอกสารประกอบการสอนรายวชา 321370 [หนา 22]

Page 23: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

3.3.1 ก า ร ท ำา ล ง ค เ ช อ ม โ ย ง ไ ป ย ง เ ว บ ไ ซ ต

3.3.2 ก า ร ท ำา ล ง ค เ ช อ โ ย ง ไ ป ย ง ไ ฟ ล

3.3.3 ก า ร ท ำา ล ง ค เ ช อ ม โ ย ง ภ า ย ใ น ห น า เ ด ย ว ก น

3.3.4 ก า ร ท ำา ล ง ค เ ช อ ม โ ย ง ด ว ย ร ป ภ า พ

เอกสารประกอบการสอนรายวชา 321370 [หนา 23]

Page 24: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

บทท 4 การสราง Form4.1 Type = text

4.2 Password

4.3 Type = radio

4.4 Type = checkbox

เอกสารประกอบการสอนรายวชา 321370 [หนา 24]

Page 25: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

4.5 List

เอกสารประกอบการสอนรายวชา 321370 [หนา 25]

Page 26: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

4.6 Submit

4.7 Reset

เอกสารประกอบการสอนรายวชา 321370 [หนา 26]

Page 27: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

บทท 5 Css StyleSeet

5.1 แ น ะ น ำา CSS

5.2 Syntax ข อ ง CSS

5.3 CSS ท เ ก ย ว ก บ Background

เอกสารประกอบการสอนรายวชา 321370 [หนา 27]

Page 28: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

5.4 CSS ท เ ก ย ว ก บ ร ป แ บ บ อ ก ษ ร

5.5 CSS ท เ ก ย ว ก บ ค ณ ล ก ษ ณ ะ ข อ ง ต ว อ ก ษ ร

5.6 CSS ท เ ก ย ว ก บ เ ส น ข อ บ

5.7 CSS Margin, Padding

5.8 CSS Table

5.9 CSS List

เอกสารประกอบการสอนรายวชา 321370 [หนา 28]

Page 29: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

บทท 6 การใช CSS

เอกสารประกอบการสอนรายวชา 321370 [หนา 29]

CSS เบองตนรปแบบของ CSSอะกรเมนท (Agrument)

และคา (Value)Inline Style Sheet

แบบภายใน TagInternal Style

Sheet แบบภายใน FileExternal Style

ในบทเรยนนจะเกยวของกบการกำาหนดรปแบบของการแสดงผล ซงในปจจบนเวบไซตใหมๆ กจะน ย ม ใ ช เ ท ค โ น โ ล ย น ใ น ก า รกำาหนดการแสดงผลของหนาเวบ เนองจากความงายในการควบคมน น เ อ ง

ดงนนนสตจะไดเรยนรคำาสงในการควบคมการแสดงผล การก ำาหนดส การก ำาหนดขนาดต วอกษร การก ำาหนดเสนขอบตาง

เ ร ย นร ก า ร ใ ช ง า น Style Sheet ทเก ยวกบ Form Type แ บ บ ต า ง ๆ

Page 30: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

6.1 เ ร ย น ร CSS

6.1.1 Inline Style

6.1.2 Internal Style

6.1.3 External Style

6.2 Class แ ล ะ Id

การสราง Style Sheet ทเรยนมาเบองตนเปนการรปแบบอยางงาย ในสวนนจะกลาวถงความแตกตางระหวางการกำาหนด Style Sheet แ บ บ Class แ ล ะ Id

6.2.1 ก า ร ก ำา ห น ด ค ณ ล ก ษ ณ ะ ข อ ง TagTag ในภาษา HTML นน เราสามารถกำาหนดคลกษณะ โดยใช CSS

ไดผลทเกดขนกคอ ทก Tag ทไดถกกำาหนดกจะแสดงผลแบบเดยวกน เ ช น

h1 { background-color : #ffff00;color : # ffffff;font-size : 16px;

}เปนตน ดงนนไมวาตำาแหนงใดทใช Tag <h1> รปแบบของการแสดงผลกจะเปน ตวอกษรตวหนา พนหลงสเหลอง ตวอกษรสดำา และขนาด 16px

เอกสารประกอบการสอนรายวชา 321370 [หนา 30]

Page 31: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

6.2.2 Class

Class ในความหมายของ CSS กคอ กลมของ Object ทเราจะกำาหนดใหใช Style เดยวกน ซ ง Object ทวานก คอ Tag ใน HTML นนเอง การใช Class จะทำาใหเราสามารถกำาหนดลกษณะพเศษสำาหรบ Object ทถกกำาหนดใหอยใน Class นนไดโดยไมไปรบกวน Object ทไมไดอยใน Class เชน ถาเรากำาหนด <H1 class="A"> ซงอยใน Class A ใ ห ม ส เ ข ย ว ก จ ะ ไ ม ท ำา ใ ห <H1> ธ ร ร ม ด า ม ส เ ข ย ว ไ ป ด ว ย

วธกำาหนด Style Sheet ให Class ใหใชจด "." นำาหนาชอ class ซ ง ช อ class เป นช อท ท า นสา มา รถต ง ได ต า มคว า มพอ ใจ เช น

. A { background-color : #006600;color : # ffffff;font-size : 16px;

}

เวลาเรยกใช <h1 class = “A”> ส ว ส ด ค ะ </h1><h1>ส ว ส ด ค ะ </h1>

ใหน สตสรางโฟลเดอร CSS เพ อใชเก บไฟล CSS และสรางไฟลช อ screen.css ทจะตองสรางโฟเดอรเพอแยกระหวางไฟล html และ css เพอเปนการฝกระเบยบวนยในการเขยนโปรแกรม โดยแบงแยกไฟลทมลกษณะเหมอนกนใหอยทเดยวกน หลงจากนนใชโปรแกรม Notepad++ เขยนโปรแกรมดงรปท 6-12 โดยตงชอวา screen.css และรปท 6-13 โ ด ย ต ง ช อ ว า css-class.html

เอกสารประกอบการสอนรายวชา 321370 [หนา 31]

Page 32: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

รปท 6-12 ก า ร ก ำา ห น ด Class A

รปท 6-13 ไ ฟ ล css-class.html แ ล ะ ผ ล ล พ ธ ท ไ ด

ใหนสตลองเพมโคดตอทายลงไปท css-class.html แลวสงเกตผลทเกดข น

<h1> ท ด ส อ บ ก า ร แ ส ด ง ผ ล </h1>

เอกสารประกอบการสอนรายวชา 321370 [หนา 32]

Page 33: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

<h1 style="color : yellow"> แสดงผลแบบ Inline Style </h1>

ผ ล ล พ ธ ท ได………………………………………………………………………… … … … … … … …

….……………………………………………………………………………………………….……………………………………………………………………………………………

6.3 ก า ร ใ ช Style Sheet แ บ บ Id

การใช Id จะใหผลเหมอนกบการใช Class แตเราจะใชกบ Object เพยง Object เดยวเทานน ดงนน ในเวบเพจหนาหนงๆ ไมควรม Tag ท ระบ ID เดยวกนมากกวา 1 Tag การใช ID จะมประโยชนมากเมอทานใช CSS รวมก บ JavaScript ซ งมการก ำาหนดให Object คล อนยายต ำา แ ห น ง ห ร อ ใ ช ใ น ก า ร ซ อ น /แ ส ด ง Object

วธกำาหนด Style Sheet ให ID ใหใชเคร องหมาย "#" นำาหนาชอ ID ซ งช อ ID เป นช อท ท านสามารถต ง ไ ด ต ามควา มพอใจ เช น

เอกสารประกอบการสอนรายวชา 321370 [หนา 33]

(work06)

CSS

screen.css

Page 34: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

เอกสารประกอบการสอนรายวชา 321370 [หนา 34]

images

login.html

Page 35: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

บทท 7Java Script

7.1 แ น ะ น ำา java Script

เอกสารประกอบการสอนรายวชา 321370 [หนา 35]

Page 36: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

7.2 ก า ร Comment

7.3 ก า ร ใ ช ว ต ถ document

7.4 ก า ร ต อ บ โ ต ร ะ ห ว า ง จ า ว า ส ค ร ป ท ก บ ผ ใ ช

7.5 ก า ร ส ร า ง Function

7.6 ต ว จ ด ก า ร เ ห ต ก า ร ณ (Event Handlers)

เอกสารประกอบการสอนรายวชา 321370 [หนา 36]

Page 37: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

7.7 ก า ร ใ ช ง า น ว ต ถ ว น ท (Date Object)

บทท 8 PHP

เอกสารประกอบการสอนรายวชา 321370 [หนา 37]

PHP กบ Function งายๆการใชการใชเครองมอ PICOการใชเครองมอ Notepad

++การใชโปรแกรม WinSCP

ในบทเรยนนจะเร มตนเกยวก บการ ใช เคร องม อ เพ อสร างเอกสารเวบ HTML โดยจะเร มตนจากการใชงานโปรแกรม editor PICO ซ ง เป นเคร องมอ ในการพมพเอกสาร คลายกบโปรแกรม Notepad ใ น ร ะ บ บ ป ฏ บ ต ก า ร Windows

ไ ด ร จ ก ร ะ บ บ ป ฏ บ ต ก า ร Linux ซ งในวชาน จะใชงานเพ อเปนเคร องแมขายในการเรยนการสอน และทำาการเขยนโปรแกรม โดยจะมพ นทเพอใหสามารถทจะเ ผ ย แ พ ร เ อ ก ส า ร HTML ไ ด

ไดเรยนการตดตงโปรแกรม Notepsd ++ ซ ง เป น editor หรอเปนเคร องมอเพอชวยในการเขยนโปรแกรมภาษา html และ PHP

ไดใชโปรแกรม WinSCP ซงเป นโปรแกรมท ถ ายโอนขอม ลระหวางเคร องแมขาย dekdee เปนระบบปฏบตการ Linux และเคร องลกขายซงเปนระบบปฏบต

Page 38: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

เอกสารประกอบการสอนรายวชา 321370 [หนา 38]

Page 39: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

เอกสารประกอบการสอนรายวชา 321370 [หนา 39]

Page 40: สารบัญ - Burapha Universityathitha/IT-Project/... · Web viewการใช โปรแกรม Putty การใช งานเร มจากการใช โปรแกรม

บรรณานกรมNotepad++

เอกสารประกอบการสอนรายวชา 321370 [หนา 40]