Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
บทท 1 การสราง
เอกสาร HTML
เอกสารประกอบการสอนรายวชา 321370 [หนา 1]
การสรางเอกสาร HTML เบองตน
การดำาเนนการกบเคร องแมขาย dekdee
การใชเครองมอ PICO
ในบทเรยนนจะเร มตนเกยวก บการ ใช เคร องม อ เพ อสร างเอกสารเวบ HTML โดยจะเร มตนจากการใชงานโปรแกรม editor PICO ซ ง เป นเคร องมอ ในการพมพเอกสาร คลายกบโปรแกรม Notepad ใ น ร ะ บ บ ป ฏ บ ต ก า ร Windows
ไ ด ร จ ก ร ะ บ บ ป ฏ บ ต ก า ร Linux ซ งในวชาน จะใชงานเพ อเปนเคร องแมขายในการเรยนการสอน และทำาการเขยนโปรแกรม โดยจะมพ นทเพอใหสามารถทจะเ ผ ย แ พ ร เ อ ก ส า ร HTML ไ ด
ไดเรยนการตดตงโปรแกรม Notepsd ++ ซ ง เป น editor หรอเปนเคร องมอเพอชวยในการเขยนโปรแกรมภาษา html และ PHP
ไดใชโปรแกรม WinSCP ซงเป นโปรแกรมท ถ ายโอนขอม ลระหวางเคร องแมขาย dekdee เปนระบบปฏบตการ Linux และเคร องลกขายซงเปนระบบปฏบต
1.1 ก า ร ใ ช โ ป ร แ ก ร ม Putty
การใชงานเร มจากการใชโปรแกรม Putty ซงเปนโปรแกรมในการต ด ต อ ไ ป ย ง เ ค ร อ ง
แมขายเคร องเซรฟเวอร dekdee.buu.ac.th สงจำาเปนในการต ด ต อ ไ ป ย ง
เ ค ร อ ง เ ซ ร ฟ เ ว อ ร ก ค อ Username Password
รปท 1-1 ก า ร เ ข า ใ ช โ ป ร แ ก ร ม Putty
เอกสารประกอบการสอนรายวชา 321370 [หนา 2]
จาก 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]
รปท 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]
ค ำา ส ง 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]
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
รปท 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]
^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]
ร ป ท 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"> </td> <td> red</td> <td bgcolor="red"> </td> </tr> </table>
<!-- end table --> <br /> <hr /> <hr color="#ffcc00" /> <hr color="green" /> <hr color="blue" />
</body></html>
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]
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]
1.4 ก า ร ใ ช Editor Notepad++
โปรแกรม Notepad++ เปน Editor หรอโปรแกรมบรรณาธกรทเปนซอฟตแวรลขสทธโอเพนซอรส สามารถดาวนโหลดนำามาตดตงไดท http://notepad-plus.sourceforge.net/ เปนโปรแกรมทชวยทำาใหก า ร เ ข ย น โ ป ร แ ก ร ม ภ า ษ า ต า ง ๆ ม ค ว า ม ส ะ ด ว ก ม า ก ย ง ข น
รปท 1-6 เ ว บ Notepad++ [ http://notepad-plus.sourceforge.net/ ]
โปรแกรมทดาวนโหลดมามสญลกษณเปนกงกาอเมซอน เวอรชนทตดตงคอ 5.2 เมอตดตงโปรแกรมเรยบรอยแลวจะปรากฏไอคอนเปนสญลกษณรป
ก ร ะ ด า ษ แ ล ะ ป า ก ก า
เอกสารประกอบการสอนรายวชา 321370 [หนา 12]
รปท 1-7 หน าจอโปรแกรม Notepad++ ในโหมดภาษา html
1.4.1 ส ร า ง เ ว บ ด ว ย Notepad++ในการใชโปรแกรม Notepad++ เปนเครองมอในการเขยนโปรแกรม
จะชวยใหการเขยนโปรแกรมงายขนเนองจากการแสดงผลจะมการแบงเปนสระหวางคำาสงของภาษา HTML และเนอหาในการสรางเวบ ซงนอกจากเอกสารประกอบการสอนรายวชา 321370
[หนา 13]
ภาษา HTML แลว ภาษาอนๆ เชน C, PHP โปรแกรมกจะมการแสดงผลแ ย ก ส ต า ก ป ร ะ เ ภ ท ข อ ง โ ป ร แ ก ร ม อ ก ด ว ย
รปท 1-8 การเขยนโปรแกรมภาษา HTML ดวย Notepad++
เอกสารประกอบการสอนรายวชา 321370 [หนา 14]
ในกรณทไมสามารถเช อมตอกบอนเทอรเนต เพ อท ำาการเขยนโปรแกรมดวย 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]
การใชงานจะมลกษณะการทำางานคลายกบโปรแกรม putty คอจะตองร Username, Password แ ล ะ เ ค ร อ ง แ ม ข า ย ท จ ะ ต ด ต อ ไ ป
อนดบแรกใหเลอกใชโปรแกรมโดยดบเบลคลกท Icon จะไดโปรแกรมดงรปท 1-9 จากนนใหนสตคลกทไอคอน New เพอทำาการสรางการตดตอไปยงเคร องแมขายใหม
รปท 1-9 โ ป ร แ ก ร ม WinSCP
ข น ต อ ไ ป จ ะ แ ส ด ง ห น า จ อ ด ง ใ ห น ส ต ใ ส ช อ เ ค ร อ ง แ ม ข า ย dekdee.buu.ac.th และใส Username คอ s[ตามดวยรหสประจำาตวน ส ต ] แ ล ะ ร ห ส ผ า น
ถาเลอกคลกท Save จะเปนการบนทกการตดตอนเกบเอาไว เพราะน ส ต ส า ม า ร ถ ท ำา ม ห ห ล า ย ก า ร ต ด ต อ
เอกสารประกอบการสอนรายวชา 321370 [หนา 16]
รปท 1-10 ก า ร เ ข า ใ ช ง า น โ ป ร แ ก ร ม WinSCP
เอกสารประกอบการสอนรายวชา 321370 [หนา 17]
รปท 1-11 การอพโหลด (Upload) ขอมลไปไวทเครอง Dekdee
เอกสารประกอบการสอนรายวชา 321370 [หนา 18]
บทท 2 Tag HTML
2.1 ร ป แ บ บ ข อ ง Tag เ ด ย ว
2.1.1 Tag <br />
เอกสารประกอบการสอนรายวชา 321370 [หนา 19]
คำาสง และรปแบบคำาสงภาษา HTML
รปแบบของ Tag เดยวรปแบบของ Tag ค
ในบทเรยนนจะเปนการเรยนร ค ำาส งภาษา HTML รวมถงร ปแบบในกาเขยนคำาสง ซ งประกอบด ว ย
TagAttributeValue
ต า ม ม า ต ร ฐ า น W3C HTML 4.01
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]
2.4 ก า ร ใ ช Tag ท เ ก ย ว ก บ ก า ร จ ด ว า ง ต ำา แ ห น ง
2.5 การใช Tag ท เก ยวก บ Font และ Formatting
2.5.1 <p>
2.5.2 <i> <b> <u>
เอกสารประกอบการสอนรายวชา 321370 [หนา 21]
บทท 3 Tag HTML
( ครงท 2)
3.1 ก า ร ส ร า ง ต า ร า ง <table>
3.1.1 <table>
3.1.2 <tr> <td> <th>
3.2 ก า ร แ ท ร ก ร ป ภ า พ
3.3 ก า ร ท ำา เ ช อ ม โ ย ง <a>
เอกสารประกอบการสอนรายวชา 321370 [หนา 22]
3.3.1 ก า ร ท ำา ล ง ค เ ช อ ม โ ย ง ไ ป ย ง เ ว บ ไ ซ ต
3.3.2 ก า ร ท ำา ล ง ค เ ช อ โ ย ง ไ ป ย ง ไ ฟ ล
3.3.3 ก า ร ท ำา ล ง ค เ ช อ ม โ ย ง ภ า ย ใ น ห น า เ ด ย ว ก น
3.3.4 ก า ร ท ำา ล ง ค เ ช อ ม โ ย ง ด ว ย ร ป ภ า พ
เอกสารประกอบการสอนรายวชา 321370 [หนา 23]
บทท 4 การสราง Form4.1 Type = text
4.2 Password
4.3 Type = radio
4.4 Type = checkbox
เอกสารประกอบการสอนรายวชา 321370 [หนา 24]
4.5 List
เอกสารประกอบการสอนรายวชา 321370 [หนา 25]
4.6 Submit
4.7 Reset
เอกสารประกอบการสอนรายวชา 321370 [หนา 26]
บทท 5 Css StyleSeet
5.1 แ น ะ น ำา CSS
5.2 Syntax ข อ ง CSS
5.3 CSS ท เ ก ย ว ก บ Background
เอกสารประกอบการสอนรายวชา 321370 [หนา 27]
5.4 CSS ท เ ก ย ว ก บ ร ป แ บ บ อ ก ษ ร
5.5 CSS ท เ ก ย ว ก บ ค ณ ล ก ษ ณ ะ ข อ ง ต ว อ ก ษ ร
5.6 CSS ท เ ก ย ว ก บ เ ส น ข อ บ
5.7 CSS Margin, Padding
5.8 CSS Table
5.9 CSS List
เอกสารประกอบการสอนรายวชา 321370 [หนา 28]
บทท 6 การใช CSS
เอกสารประกอบการสอนรายวชา 321370 [หนา 29]
CSS เบองตนรปแบบของ CSSอะกรเมนท (Agrument)
และคา (Value)Inline Style Sheet
แบบภายใน TagInternal Style
Sheet แบบภายใน FileExternal Style
ในบทเรยนนจะเกยวของกบการกำาหนดรปแบบของการแสดงผล ซงในปจจบนเวบไซตใหมๆ กจะน ย ม ใ ช เ ท ค โ น โ ล ย น ใ น ก า รกำาหนดการแสดงผลของหนาเวบ เนองจากความงายในการควบคมน น เ อ ง
ดงนนนสตจะไดเรยนรคำาสงในการควบคมการแสดงผล การก ำาหนดส การก ำาหนดขนาดต วอกษร การก ำาหนดเสนขอบตาง
เ ร ย นร ก า ร ใ ช ง า น Style Sheet ทเก ยวกบ Form Type แ บ บ ต า ง ๆ
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]
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]
รปท 6-12 ก า ร ก ำา ห น ด Class A
รปท 6-13 ไ ฟ ล css-class.html แ ล ะ ผ ล ล พ ธ ท ไ ด
ใหนสตลองเพมโคดตอทายลงไปท css-class.html แลวสงเกตผลทเกดข น
<h1> ท ด ส อ บ ก า ร แ ส ด ง ผ ล </h1>
เอกสารประกอบการสอนรายวชา 321370 [หนา 32]
<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
เอกสารประกอบการสอนรายวชา 321370 [หนา 34]
images
login.html
บทท 7Java Script
7.1 แ น ะ น ำา java Script
เอกสารประกอบการสอนรายวชา 321370 [หนา 35]
7.2 ก า ร Comment
7.3 ก า ร ใ ช ว ต ถ document
7.4 ก า ร ต อ บ โ ต ร ะ ห ว า ง จ า ว า ส ค ร ป ท ก บ ผ ใ ช
7.5 ก า ร ส ร า ง Function
7.6 ต ว จ ด ก า ร เ ห ต ก า ร ณ (Event Handlers)
เอกสารประกอบการสอนรายวชา 321370 [หนา 36]
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 และเคร องลกขายซงเปนระบบปฏบต
เอกสารประกอบการสอนรายวชา 321370 [หนา 38]
เอกสารประกอบการสอนรายวชา 321370 [หนา 39]
บรรณานกรมNotepad++
เอกสารประกอบการสอนรายวชา 321370 [หนา 40]