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 ประเภท

ซูเปอรค์อมพวิเตอร

เมนเฟรมคอมพวิเตอร

มนิิคอมพวิเตอร

ไมโครคอมพวิเตอร

รายละเอยีดประเภทคอมพวิเตอร

การสร้างไอเฟรม