html · 2017. 6. 15. ·...
TRANSCRIPT
-
HTML HYPER TEXT MARKUP LANGUAGE
-
โครงสรา้งเอกสารภาษา HTML
-
โครงสร้างเอกสารภาษา HTML
•โครงสรา้งเอกสารภาษา HTML จะประกอบดว้ยโครงสรา้งหลกั 3 สว่น คอื
1. ...
ก าหนดจุดเริม่ตน้และจุดสิน้สดุเวบ็เพจภาษา HTML
-
โครงสร้างเอกสารภาษา HTML(ต่อ) 2. … สว่นหวัของเวบ็เพจ ประกอบดว้ย Tag ดงัน้ี
2.1) ก าหนดขอ้มลูเกีย่วกบัเวบ็เพจ เชน่ ค าคน้ (KEYWORD) ค าอธบิายเวบ็เพจ (Description) ชื่อผูจ้ดัท าเวบ็ไซต ์(Author) ก าหนดอกัขระภาษาของเวบ็เพจและก าหนดเวลารเีฟรชหน้าเวบ็เพจ (Refresh page) เป็นตน้ Tag META เป็น Tag เดีย่ว ไมม่ ีTag ปิด
2.2) … ก าหนดชื่อของเวบ็เพจ 2.3) … ก าหนดรปูแบบ CSS การแสดงผลของเวบ็เพจ 2.4) … เชื่อมโยงไฟล ์CSS จากภายนอก 2.5) … ควบคุมเวบ็เพจดว้ยภาษา JavaScript
3)…. แสดงขอ้มลูต่างๆ บนเวบ็เพจอยูภ่ายใน Tag HTML
-
โครงสร้างภาษา HTML การสร้างเวบ็เพจด้วย HTML ……………..TAG NAME และข้อมลูต่างๆ ท่ีแสดงผลบนบราวเซอร์…………….
-
การแสดงผลบนบราวเซอรโ์ครงสร้างภาษา HTML
-
กฎการใช้ภาษา HTML 1)ค าสัง่ Tag HTML ตอ้งอยูภ่ายใตเ้ครือ่งหมาย < > เท่านัน้ 2)Tag HTML สามารถใชต้วัอกัษรตวัพมิพเ์ลก็หรอืตวัพมิพใ์หญ่กไ็ด ้เชน่ , , เป็นตน้ 3)รปูแบบ Tag HTML จะแบ่งออกเป็น 2 สว่น คอื • สว่นเริม่ตน้ Tag เรยีกว่า Tag เปิด • สว่นปิด Tag เรยีกวา่ Tag ปิด โดยจะมเีครือ่งหมาย Slash (/) 4)บาง Tag อาจไมม่ ีTag ปิด เรยีกวา่ Tag เดีย่ว เชน่
ใชส้ าหรบัก าหนดใหม้กีารขึน้บรรทดัใหม ่ ใชส้ าหรบัสรา้งเสน้คัน่แนวนอนเพือ่ความสวยงามและช่วยจดัระเบยีบของเนื้อหา เป็นตน้ -
ขัน้ตอนการพฒันาเวบ็ไซตด้์วยภาษา HTML • 1) สรา้งไฟลเ์วบ็เพจของเวบ็ไซตด์ว้ยภาษา HTML ซึง่สามารถสรา้งไฟล์ไดห้ลายวธิ ีเชน่ • - สรา้งจากโปรแกรม Text Editor ต่างๆ เชน่ Notepad, Notepad++,
Editplus แลว้ บนัทกึไฟลเ์อกสารเป็นประเภท .HTM หรอื .HTML • - สรา้งจากโปรแกรมส าเรจ็รปูทีม่ไีวส้ าหรบัสรา้งเวบ็เพจ การสรา้งเวบ็เพจดว้ยวธินีี้ผูใ้ชไ้มจ่ าเป็นตอ้งมคีวามรูภ้าษา HTML กส็ามารถสรา้งเอกสาร HTML ได ้ เนื่องจากมกีารตดิต่อกบัผูใ้ชใ้นลกัษณะทีเ่ป็นกราฟิค สามารถแสดงผลลพัธใ์หเ้หน็ทนัทโีดยไมต่อ้งสัง่ใหแ้สดงผลทีบ่ราวเซอร ์เรยีกโปรแกรมประเภทนี้วา่ what you see is what your get ค ายอ่คอื WYSIWYG ตวัอยา่งโปรแกรม เชน่ Adobe Dreamweaver, FrontPage, Go Live เป็นตน้
-
ขัน้ตอนการพฒันาเวบ็ไซตด้์วยภาษา HTML
2)บนัทกึไฟลเ์วบ็เพจทีส่รา้งเป็นนามสกุล .HTML หรอื .HTM ไวท้ีเ่ครือ่งคอมพวิเตอร ์โดยสรา้ง Folder เพือ่จดัเกบ็ เนื่องจากการพฒันาเวบ็ไซตจ์ะมจี านวนเวบ็เพจหลายๆ หน้า ดงันัน้เพือ่สามารถเรยีกใชไ้ฟลไ์ดส้ะดวก จงึควรสรา้ง Folder ทีส่ือ่ความหมายถงึเวบ็ไซตท์ีก่ าลงัจะพฒันา
3) ทดสอบการแสดงผลเวบ็เพจบนบราวเซอร ์ดว้ยการเปิดโปรแกรมบราวเซอรจ์ากนัน้เลอืกเมนู File เลอืก open คลกิเลอืกไฟลท์ีต่อ้งการใน Folder ของเวบ็ไซต ์
-
การแทรกค าอธิบาย
•การพฒันาเวบ็ไซตด์ว้ยภาษา HTML ในบางกรณีจ าเป็นตอ้งแทรกค าอธบิาย เพือ่อธบิายค าสัง่ เพือ่ครัง้ต่อไปจะไดเ้ขา้ใจไดง้า่ยขึน้ ค าอธบิายในเอกสาร HTML จะไมถ่กูมาแสดงบนเวบ็เพจ โดยใชส้ญัลกัษณ์ เพือ่ก าหนดจุดสิน้สดุค าอธบิาย
-
ตวัอย่างการแทรกค าอธิบาย
•
•
-
การก าหนดสีในภาษา HTML 1)ระบุชื่อสใีนภาษาองักฤษ เชน่ RED, GREEN, BLUE, BLACK, WHITE เป็นตน้ 2)ใชฟั้งกช์ัน่ rgb( ) ซึง่เป็นฟังกช์ัน่การผสมสขีองสหีลกั 3 ส ีไดแ้ก่ สแีดง, สเีขยีว และสนี ้าเงนิ โดยมรีปูแบบการใชง้าน คอื rgb(red,green,blue) โดยคา่ของ ส ีred คอืสแีดง มคีา่ระหวา่ง 00-255 หรอื 0%-100% ส ีgreen คอืสเีขยีว มคีา่ระหวา่ง 00-255 หรอื 0%-100% ส ีblue คอืสนี ้าเงนิ มคีา่ระหวา่ง 00-255 หรอื 0%-100% • ตวัอยา่งการใชง้านเชน่ rgb(255,0,0) คอืสแีดง, rgb(0%,0%,100%) คอืสนี ้าเงนิ 3) ระบุในรปูแบบเลขฐานสบิหก ประกอบดว้ยตวัเลข 3 ชุดชุดละ 2 ตวั คอืชุดที ่1 แทนคา่สแีดง ชุดที ่2 แทนคา่สเีขยีวและชุดที ่3 แทนคา่สนี ้าเงนิ โดยน าหน้าดว้ยเครือ่งหมาย #
-
การก าหนดสีให้กบัเวบ็เพจ
สี เลขฐานสิบหก สี เลขฐานสิบหก
ขาว 000000 ม่วง EE82EE
ด า FFFFF น ้าเงิน 0000FF
เขียว 00FF00 ชมพ ู FFC0CB
เหลือง FFFF00
-
การแทรกอกัขระพิเศษในภาษา HTML
< < ± > > · · " " £ £ € € & & ¥ ¥ © © « « ® ® » » ¢ ¢ é é
÷
-
การอ้างอิงท่ีอยู่ไฟล ์1)การอา้งองิ แบบ Absolute Path เป็นการอา้งองิทีอ่ยู ่File โดยตรง เริม่จาก Folder Root ใชเ้ครือ่งหมาย Slash (/) แลว้ระบุต าแหน่ง Folder ทีต่อ้งการเขา้ไปจนถงึไฟล ์เชน่ไฟล ์Page1.HTML อยูใ่น Folder C:\website\content การอา้งองิสามารถกระท าไดค้อื website/content/Page1.HTML 2)การอา้งองิแบบ Relative Path เป็นการอา้งองิในลกัษณะทีส่มัพนัธก์บั Path อื่นๆ โดยใชส้ญัลกัษณ์ในการเปรยีบเทยีบต าแหน่ง 2 แบบ คอื แบบที ่1 จุดหนึ่งจุด . ใชแ้ทนต าแหน่ง Folder ปัจจุบนั แบบที ่2 จุดสองจุด .. ใชแ้ทนต าแหน่ง Folder ก่อนหน้า
• เชน่ Folder content เกบ็ทีC่:\website\content การอา้งถงึจะระบุ .. เพือ่เป็นการอา้งองิ Folder website หากตอ้งการระบุไฟลร์ปูภาพ Pic1.png ทีอ่ยูใ่น Folder C:\website\img เพือ่น าไฟลม์าใชใ้นไฟลท์ีเ่กบ็อยูใ่น Folder C:\website\content สามารถอา้งองิแบบ Relative Path คอื ../img/Pic1.png
-
การใชง้าน TAG HEAD
-
การใช้งาน Tag HEAD
• Tag HEAD เป็นสว่นหวัเวบ็เพจ ก าหนดรายละเอยีดใหก้บัเวบ็เพจ ประกอบดว้ย Tag ดงัน้ี
• Tag META
• Tag TITLE
• Tag STYLE
• Tag LINK
• Tag SCRIPT
-
Tag META
• ก าหนดขอ้มลูเกีย่วกบัเวบ็เพจ โดยมรีปูแบบการใชง้านดงัน้ี
-
ก าหนดลกัษณะให้กบั Tag META
Attribute NAME KEYWORD
DESCRIPTION AUTHOR
CONTENT HTTP-EQUIV Refresh , content-type
-
การใช้งานTag META • ก าหนดค าคน้ของ เวบ็เพจเป็นค าวา่ HTML และเวบ็เพจ เพือ่ใหเ้วบ็ไซตเ์ครือ่งมอืสบืคน้ขอ้มลู (Search Engine) น าไปจดัเกบ็ในฐานขอ้มลู หากค าคน้มากกวา่หนึ่งค า จะคัน่ดว้ยเครือ่งหมาย ,
• ก าหนดค าอธบิายเวบ็เพจเป็นค าวา่ “มหาวทิยาลยัราชภฏัเชยีงราย”
• ก าหนดชื่อผูจ้ดัท าเวบ็เพจเป็นค าวา่ “มหาวทิยาลยัราชภฏัเชยีงราย”
• ก าหนดใหม้กีารรเีฟรชเวบ็เพจทุกๆ 5 วนิาท ี
• ก าหนดอกัขระภาษาของเวบ็เพจเป็นภาษาไทย รหสั UTF-8
-
Tag TITLE
• ก าหนดชื่อเรือ่งของเวบ็เพจ โดยมรีปูแบบการใชง้านดงัน้ี
ชื่อเรือ่งเวบ็เพจ
• เชน่ ตอ้งการก าหนดชื่อเรือ่งของเวบ็เพจเป็นค าวา่ “ส านกัวชิาคอมพวิเตอรแ์ละเทคโนโลยสีารสนเทศ” สามารถเขยีนค าสัง่ไดด้งัน้ี
ส านกัวชิาคอมพวิเตอรแ์ละเทคโนโลยสีารสนเทศ
-
Tag STYLE
• ก าหนดรปูแบบ CSS ในการแสดงผลของเวบ็เพจ โดยมรีปูแบบการใช้งานดงัน้ี
CSS ควบคุมการแสดงผล
• เชน่ ตอ้งการก าหนดรปูแบบ CSS ใหก้บัเอกสาร โดยก าหนดใหส้ีตวัอกัษรในเวบ็เพจเป็นสนี ้าเงนิ สามารถเขยีนค าสัง่ไดด้งัน้ี
BODY{COLOR:BLUE;}
-
Tag LINK
• ส าหรบัเชื่อมโยงไฟล ์CSS จากภายนอกโดยมรีปูแบบการใชง้านดงัน้ี
•
• เชน่ ตอ้งการอา้งองิไฟล ์TOP.CSS ทีอ่ยูใ่น Folder CSS สามารถเขยีนค าสัง่ไดด้งัน้ี
•
-
Tag SCRIPT • ส าหรบัการควบคุมเวบ็เพจดว้ยภาษา JavaScript โดยมรีปูแบบการใชง้านดงันี้ • ค าสัง่ JavaScript ควบคุมเวบ็เพจ •ตวัอยา่งเชน่ เมือ่เปิดเวบ็เพจใหแ้สดงขอ้ความ “ยนิดตีอ้นรบั” สามารถเขยีนค าสัง่ไดด้งันี้ • alert("ยนิดตีอ้นรบั"); •ถา้เป็นการอา้งองิไฟล ์JavaScript ทีจ่ดัเกบ็ขา้งนอกเวบ็เพจ เชน่ไฟล ์ชือ่ MIN.JS ทีจ่ดัเกบ็ไวใ้น Folder JS สามารถเขยีนค าสัง่ได้ดงันี้ •
-
การใชง้าน TAG BODY
-
การใช้งาน Tag BODY
...เน้ือหาทีอ่ยูใ่นเวบ็เพจ …
-
การก าหนดลกัษณะ ให้กบั Tag Body Attribute
BGCOLOR BACKGROUND /URL LEFTMARGIN
% TOPMARGIN
% TEXT LINK VLINK ALINK
-
ตวัอย่างการก าหนดลกัษณะ - … ก าหนดสพีืน้หลงัเป็นสเีหลอืง -… ก าหนดสพีืน้หลงัเป็นสแีดง -… ก าหนดสพีืน้หลงัเป็นสฟ้ีา -… ก าหนดรปูภาพไฟลช์ือ่ PIC1.JPG เป็นพืน้หลงัเวบ็เพจ -… ก าหนดระยะหา่งเนื้อหาจากขอบบราวเซอรด์า้นซา้ย 100PX และจากขอบบราวเซอรด์า้นบน 100PX -…ก าหนดสขีอ้ความในเวบ็เพจเป็นสดี า -… ก าหนดสขีอ้ความเวบ็เพจเป็นสดี า ก าหนดสขีอ้ความส าหรบัการเชือ่มโยงเป็นสชีมพ ูก าหนดขอ้ความส าหรบัการเชือ่มโยงหลงัจากคลกิเชือ่มโยงเป็นสเีทา และก าหนดสขีอ้ความส าหรบัการเชือ่มโยงขณะคลกิเป็นสแีดง รายละเอยีดการสรา้งการเชือ่มโยงจะกล่าวในหวัขอ้การเชือ่มโยง
-
ตวัอย่างการก าหนดลกัษณะ มหาวทิยาลยัราชภฏัเชยีงราย
วสิยัทศัน์ของมหาวทิยาลยัราชภฏัเชยีงราย
เป็นสถาบนัอุดมศกึษาชัน้น าเพือ่การพฒันาทอ้งถิน่และอนุภมูภิาคลุ่มน ้าโขง
เวบ็ไซตม์หาวทิยาลยัราชภฏัเชยีงราย
-
การจดัการขอ้ความ
-
การจดัการข้อความ
•การก าหนดตวัอกัษรหวัเรื่องขนาดใหญ่
•การก าหนดรปูแบบอกัษร
•การก าหนดลกัษณะตวัอกัษร
•การใช้เส้นคัน่ระหว่างบรรทดั
•การก าหนดรปูแบบข้อความแบบล าดบัรายการ
-
การก าหนดตวัอกัษรหวัเรื่องขนาดใหญ่
… Heading Text …
-
ตวัอย่างการก าหนดตวัอกัษรหวัเรือ่งขนาดใหญ่และการจดัวาง
การสรา้งเวบ็เพจดว้ย HTML
COMPUTER COMPUTER COMPUTER COMPUTER COMPUTER COMPUTER
-
การก าหนดรปูแบบอกัษร
ขอ้ความ
-
การก าหนดลกัษณะในการแสดงผลให้กบั Tag Font Attribute
FACE tahoma, AngsanaUPC SIZE 1-7 1
7 3
COLOR
-
การก าหนดลกัษณะตวัอกัษร -… ก าหนดตวัอกัษรตวัเอยีง -… ก าหนดตวัอกัษรตวัหนา -…ก าหนดตวัอกัษรขดีเสน้ใต ้ -… ก าหนดตวัอกัษรตวัยก -… ก าหนดตวัอกัษรตวัหอ้ย -… หรอื … ก าหนดตวัอกัษรขดีเสน้ทบั - ก าหนดต าแหน่งการแสดงผลขอ้ความตามทีก่ าหนด -... จดักลุม่ขอ้ความ ใหม้รีะยะหา่งจากขอบดา้นซา้ยและดา้นขวา เพือ่ใหข้อ้ความมีความน่าสนใจ -
…
ยอ่หน้าใหมโ่ดยเวน้ 1 บรรทดั ก าหนดต าแหน่งการจดัวางขอ้ความดว้ยลกัษณะ Align มคีา่เท่ากบั LEFT, RIGHT, CENTER หรอื JUSTIFY -… จดัต าแหน่งการจดัวางขอ้ความดว้ยการก าหนดลกัษณะ Align เป็น LEFT, RIGHT หรอื CENTER -
ขึน้บรรทดัใหม ่ -... จดัวางองคป์ระกอบต่างๆ ไวก้ึง่กลางหน้าบราวเซอร ์เช่น ขอ้ความ รปูภาพ ตาราง ฯลฯ -
การใช้เส้นคัน่ระหว่างบรรทดั
• การใชเ้สน้คัน่ระหวา่งบรรทดัเพือ่แบ่งเขตขอ้ความในภาษา HTML สามารถกระท าไดโ้ดยใช ้Tag หรอืเรยีกวา่เสน้ขดีคัน่แนวนอน (Horizontal Rule) มรีปูแบบการใชง้านดงัน้ี
•
-
การก าหนดลกัษณะในการแสดงผลให้กบั Tag HR
Attribute ALIGN
CENTER, LEFT RIGHT NOSHADE SIZE % WIDTH % COLOR
-
ตวัอย่างการก าหนดลกัษณะในการแสดงผลให้กบั Tag HR
-
การก าหนดรปูแบบข้อความแบบล าดบัรายการ
• Ordered List
เป็นการแสดงรายการแบบเรยีงล าดบั
• Unordered List
เป็นการแสดงรายการแบบทีไ่มไ่ดเ้รยีงล าดบั
• Definition List
รายการแบบมคี านิยาม เป็นการแสดงรายการแบบทีม่หีวัขอ้ใหญ่
-
Ordered List รายการทีแ่สดงในลสิต ์ โดยที ่ชนิดของการเรยีงล าดบั ประกอบดว้ย - "1" เป็นล าดบัแบบตวัเลข 1,2,3,…หากไมร่ะบุจะถกูก าหนดใชร้ปูแบบนี้ - "A" เป็นล าดบัแบบ A,B,C,…(ตวัพมิพใ์หญ่) - "a" เป็นล าดบัแบบ a,b,c,... (ตวัพมิพเ์ลก็) - "I" เป็นล าดบัแบบ I,II,III,IV,… (เลขโรมนัแบบตวัพมิพใ์หญ่) - "i"เป็นล าดบัแบบ i,ii,iii,iv,… (เลขโรมนัแบบตวัพมิพเ์ลก็)
-
ตวัอย่างการใช้งาน Tag OL การสรา้งเวบ็เพจดว้ย HTML
เคลด็ลบัที ่1 วธิที าใหห้น้าใส ลา้งหน้าใหส้ะอาด แลว้เชด็ใหแ้หง้ จากนัน้กใ็ช ้"โยเกริต์"พอกทีห่น้าบางๆ
เคลด็ลบัที ่2 สตูรหน้าใสไรส้วิ
น ้าผึง้ 1 ชอนโต๊ะ ใขไ่ก่ (เฉพาะใขข่าว 1 ชอ้นโต๊ะ)
-
Unordered List
รายการทีแ่สดงในลสิต ์ โดยที ่ชนิดสญัลกัษณ์แสดงหวัขอ้ยอ่ยประกอบดว้ย -"DISC" รปูวงกลมทบึ หากไมร่ะบุจะถูกก าหนดใหใ้ชร้ปูแบบนี้โดยอตัโนมตั ิ-"SQUARE" รปูสีเ่หลีย่มทบึ -"CIRCLE" รปูวงกลมโปรง่ใส
-
ตวัอย่างการใช้งาน Tag UL การสรา้งเวบ็เพจดว้ย HTML เคลด็ลบัที ่1 สตูรหน้าใสไรส้วิ
ลา้งหน้าใหส้ะอาด แลว้เชด็ใหแ้หง้ น าผา้ทีช่บุน ้าอุ่นโป๊ะทีบ่รเิวณใบหน้า
เคลด็ลบัที ่2 สตูรหน้าใสไรส้วิ
น ้าผึง้ 1 ชอนโต๊ะ ใขไ่ก่ (เฉพาะใขข่าว 1 ชอ้นโต๊ะ)
-
Definition List
หวัเรือ่งของแต่ละรายการยอ่ย
รายละเอยีดในรายการยอ่ย
-
ตวัอย่างการใช้งาน Tag DL การสรา้งเวบ็เพจดว้ย HTML ขอ้ผดิพลาดในการด าเนินธุรกจิ ของ SMEs ชอบท าตามคนอื่น เริม่ตน้ตัง้แต่เรือ่งการคน้หาศกัยภาพ SMEs สว่นใหญ่มกัไมค่น้หาศกัยภาพที่แทจ้รงิแลว้ ดงันัน้สนิคา้และ/หรอื บรกิารของ SMEs ไทย จงึไมส่ามารถสรา้งความแตกต่างได ขาดการวเิคราะหค์วามเป็นไปได ไมว่เิคราะหถ์งึความเป็นไปได ้ท าใหธุ้รกจิเกดิความเสีย่ง
-
แสดงผลตวัอย่างการใช้งาน Tag DL
-
การแทรกรปูภาพ
-
การแทรกรปูภาพ
Attribute SRC /URL URL ALT BORDER
0 ALIGN
TOP, BOTTOM, MIDDLE, LEFT RIGHT WIDTH % HEIGHT %
-
ตวัอย่างการใช้งาน Tag IMG การสรา้งเวบ็เพจดว้ย HTML
โลโก
วดัรอ่งขุน่
วดัรอ่งขุน่
ดอยตุง
ดอยตุง
-
การเช่ือมโยง
-
การเช่ือมโยง
ขอ้ความหรอืรปูภาพหรอืปุ่ มทีใ่ชเ้ชือ่มโยง
-
การก าหนดลกัษณะให้กบั Tag A
Attribute HREF HREF Hypertext Reference
TARGET _BLANK _PARENT _SELF _TOP
-
ประเภทของการเช่ือมโยงสามารถแบง่เป็น 4 รปูแบบ
•การเชือ่มโยงภายในเวบ็ไซตเ์ดยีวกนั
•การเชือ่มโยงภายนอกเวบ็ไซต ์
•การเชือ่มโยงไปยงัอเีมล ์
•การเชือ่มโยงเพือ่ดาวน์โหลดไฟล ์
-
การเช่ือมโยงภายในเวบ็ไซตเ์ดียวกนั
1.1) การเชื่อมโยงต่างแฟ้มเอกสาร เป็นการเชื่อมโยงไปยงัไฟลอ์ื่นๆ ทีอ่ยูใ่นเวบ็ไซตเ์ดยีวกนั โดยมรีปูแบบการใชง้านดงัน้ี
ขอ้ความหรอืรปูภาพหรอืปุ่ มทีใ่ชเ้ชื่อมโยง
ตวัอยา่ง เชน่
CRRU
-
การเช่ือมโยงภายในเวบ็ไซตเ์ดียวกนั (ต่อ) 1.2)การเชือ่มโยงภายในแฟ้มเอกสาร เป็นการเชือ่มโยงไปยงัสว่นอื่นๆ ของเอกสาร สว่นใหญ่จะใชก้รณทีีไ่ฟลเ์อกสาร HTML มคีวามยาวมาก โดยมีรปูแบบการใชง้านดงันี้ ขอ้ความเชือ่มโยง ตวัอยา่ง เชน่ ขอ้ความ
-
การเช่ือมโยงภายนอกเวบ็ไซต ์
ขอ้ความหรอืรปูภาพ
-
ตวัอย่างการเช่ือมโยงภายนอกเวบ็ไซต ์ การสรา้งเวบ็เพจดว้ย HTML
มหาวทิยาลยัราชภฏัเชยีงราย -
การเช่ือมโยงไปยงัอีเมล ์
ขอ้ความหรอืรปูภาพ
-
การเช่ือมโยงเพ่ือดาวน์โหลดไฟล ์
ขอ้ความหรอืรปูภาพ
-
การสร้างตาราง
-
การสร้างตาราง
..................
..................
-
การก าหนดลกัษณะให้กบั Tag Table Attribute
ALIGN LEFT, CENTER RIGHT
BGCOLOR BORDER
0 BORDERCOLOR CELLPADDING
% CELLSPACING % WIDTH
% HEIGHT
%
-
การก าหนดลกัษณะให้กบั Tag TR Attribute
ALIGN LEFT, CENTER, RIGHT JUSTIFY
BGCOLOR VALIGN TOP,
MIDDLE BOTTOM HEIGHT
-
การก าหนดลกัษณะให้กบั Tag TD ใน Tag TR
Attribute ALIGN
LEFT, CENTER, RIGHT JUSTIFY BGCOLOR VALIGN TOP, MIDDLE
BOTTOM COLSPAN ROWSPAN HEIGHT %
WIDTH
%
-
ตวัอย่างการใช้งาน Tag TABLE
มหาวทิยาลยัราชภฏัเชยีงราย
สปีระจ ามหาวทิยาลยั
สเีทา-เเสด
-
การแสดงผลการใช้งาน Tag Table
-
ตวัอย่างค าสัง่ในการผสานเซลลต์าราง
AAAAAA
BBBB
CCCCDDDD
EEEEFFFF
GGGG
-
การแสดงผลการผสานเซลล ์
-
การแบง่พืน้ท่ีจอบราวเซอร ์
-
การแบง่พืน้ท่ีจอบราวเซอร ์
•การสร้างเฟรม
•การสร้างไอเฟรม
-
การสร้างเฟรม
โดยที ่Tag FRAMESET จะท าหน้าทีแ่ทน Tag BODY
-
การก าหนดลกัษณะให้กบั Tag FRAMESET
Attribute า ี ก าหน ห า ิบา ROWS
นวนอน นวนอน ของ อ าวเ อ % * เช่น 10%,20%,*
COLS
ของ อ าวเ อ % *เช่น 100,200,* ( * หมาย งพื้น ี หน า อ ี เหลือ ้งหมด )
BORDER 0,1,2… 0
FRAMEBORDER าน า ดงเ นขอ
าหนด าน า ดงเ นขอ เ ม ่าเ น Yes ห ือ 1 ือ ดงเ นขอ , No ห ือ 0 ือ ม่ ดงเ นขอ
FRAMESPACING %
-
การก าหนดลกัษณะให้กบั Tag FRAME
Attribute SRC /URL URL FRAMEBORDER
Yes 1 , No 0
NAME NORESIZE SCROLLING
Scrollbar Scrollbar Yes Scrollbar, No Scrollbar, Auto Scrollbar
-
ตวัอย่างการแบง่พืน้ท่ีของจอภาพตามแนวนอน
-
การแสดงผลการแบง่พืน้ท่ีของจอภาพตามแนวนอน
-
การแบง่พืน้ท่ีของจอภาพตามแนวตัง้
-
การแสดงผลการแบง่พืน้ท่ีของจอภาพตามแนวตัง้
-
ตวัอย่างการแบง่พืน้ท่ีของจอภาพแบบผสม
-
การแสดงผลการแบง่พืน้ท่ีหน้าจอแบบผสม
-
การเช่ือมโยงระหว่างเฟรม
• การเชื่อมโยงระหวา่งเฟรม จะชว่ยท าใหผู้ใ้ชรู้ส้กึเหมอืนยงัอยูห่น้าเวบ็เพจเดมิ
• แบ่งเฟรม ระบุ NAME="ชื่อของเฟรม" ใน Tag เพื่อก าหนดชื่อเฟรมใหเ้ฟรมอื่นอา้งองิในการแสดงผล
• การเชื่อมโยง ให้ก าหนดการเชื่อมโยงโดย ระบุ Attribute TARGET ของการเชื่อมโยงไปยงัเฟรมทีต่อ้งการใหแ้สดงผล คอื TARGET="ชื่อของเฟรมทีต่อ้งการแสดงผล"
• หากบราวเซอรไ์มพ่บเฟรมทีก่ล่าวถงึจะเชื่อมโยงไปยงัวนิโดวห์รอืแทบ็ใหม่
-
ตวัอย่างการสร้างเฟรม
สรา้งไฟล ์HTML 3 ไฟล ์
• FRAME1.HTML เป็นไฟลค์วบคุมการแบง่พืน้ทีจ่อบราวเซอร ์
• FILE1.HTML เป็นไฟลแ์สดงในแถวที ่1
• FILE2.HTML เป็นไฟลท์ีแ่สดงในแถวที ่3
-
FRAME1.HTML
ประเภทคอมพวิเตอร
-
FILE1.HTML ประเภทของคอมพวิเตอร
ประเภทของคอมพวิเตอร
คอมพวิเตอรต์ามขนาดและประสทิธภิาพของการประมวลผลของเครือ่ง ไดเ้ป็น 4 ประเภท
ซเูปอรค์อมพวิเตอร
เมนเฟรมคอมพวิเตอร์
มนิิคอมพวิเตอร
ไมโครคอมพวิเตอร
-
FILE2.HTML ประเภทของคอมพวิเตอร
ซเูปอรค์อมพวิเตอร ์ (Supercomputer)
เป็นคอมพวิเตอรท์ีม่ขีนาดใหญ่ มปีระสทิธภิาพในการประมวลผลและมคีวามเรว็สงู ตลอดจนราคาแพงมาก ปกตซิเูปอรค์อมพวิเตอรจ์ะถกูพฒันาขึน้โดยเฉพาะ และมกัจะถกูน าไปใชใ้นงานวจิยัและพฒันาทางวทิยาศาสตรแ์ละเทคโนโลยทีีส่ าคญั ตลอดจนการประมวลผลและการควบคุมงานทีม่คีวามซบัซอ้น ตอ้งการความถกูตอ้งและความละเอยีดอ่อนสงู
-
ตวัอย่างการสร้างเฟรม
-
ใบงาน
-
ใบงาน
-
การสร้างไอเฟรม
-
การก าหนดลกัษณะให้กบั Tag IFRAME
Attribute SRC /URL URL ALIGN
LEFT, RIGHT, TOP, MIDDLE BOTTOM WIDTH % HEIGHT % FRAMEBORDER
Yes 1 , No 0
-
การสร้างไอเฟรม ประเภทของคอมพวิเตอร
ประเภทของคอมพวิเตอร
คอมพวิเตอรต์ามขนาดและประสทิธภิาพของการประมวลผลของเครื่อง ไดเ้ป็น 4 ประเภท
ซูเปอรค์อมพวิเตอร
เมนเฟรมคอมพวิเตอร
มนิิคอมพวิเตอร
ไมโครคอมพวิเตอร
รายละเอยีดประเภทคอมพวิเตอร
-
การสร้างไอเฟรม