Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
1 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
บทท 1 บทนา
â»Ãá¡ÃÁÀÒÉÒ HTML
HTML
ตนกาเนดของภาษา HTML เกดจาก เมอป 1989 นกฟสกสชอ Tim Berners-Lee แหงสถาบนวจย
CERN เสนองานวจยเรอง prototyped ENQUIRE และ Hypertext system ใชสาหรบนกวจยของสถาบนเพอแบง
ขอมลกน และถกพฒนามาเรอยๆ จนถงปจจบน
HTML เปนตวยอมาจาก Hypertext Markup Language เปนภาษาหลกทใชในการแสดงผลบนเวบ
บราวเซอรในอนเตอร โดยสามารถนาเสนอขอมลตวอกษร รวมทงเชอมตอเพอ แสดงภาพ, เสยง และไฟลใน
รปแบบอนๆ
ปจจบน HTML ไดพฒนามาถงเวอรชน HTML5
ภาษา HTML จะแบงออกเปน 2 สวน คอ
1. สวนของคาสง (tag) เปนสวนทกาหนดรปแบบของขอความทแสดง ซงเราเรยกวา Tag โดยจะอยใน
เครองหมาย < ... >
2. สวนของบทความทวๆ ไป เปนสวนของขอความทเราตองการแสดงผล
ตวอยางท 1 รปแบบของ HTML5
<!doctype html> <html> <head>
<title> หวขอเรอง ของหนาน </title> </head> <body>
เนอหาทจะแสดงใน web browser </body> </html>
2 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
โครงสรางคาสงของ HTML
1. คาสง หรอ Tag
Tag เปนลกษณะเฉพาะของภาษา HTML ใชในการระบรปแบบคาสง หรอการลงรหสคาสง HTML
ภายในเครองหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยท Tag HTML แบงได 2 ลกษณะ
คอ
1.1 Tag เดยว เปน Tag ทไมตองมการปดรหส เชน <HR>, <BR> เปนตน
1.2 Tag เปด/ปด รปแบบของ tag นจะเปนแบบ <tag> .... </tag> โดยท
<tag> เราเรยกวา tag เปด
</tag> เราเรยกวา tag ปด
2. Attributes
Attributes เปนตวบอกรายละเอยดของ tag นนเชน <span align = 'left'> ... </span> เปนการบอกวาให
อกษรทอยใน tag นชดซาย
ขอควรร span คอ อลเมนต (element) ตวหนงในภาษา HTML
align คอ แอตทรบวต ตวหนงในภาษา HTML
left คอ แวล (value) หรอ คาของ แอตทรบวต
3. not case sensitive
หมายถง คณจะพมพ <BR> หรอ <br> กได ผลลพธออกมาไมตางกน
3 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
CSS เกยวกบ CSS
CSS (Cascading Style Sheets) เปนคาสงทใชในการจดรปแบบเอกสารเวบเพจในลกษณะตางๆ เชน ส,
พนหลง, เสนขอบ, ขนาด, โครงราง หรอตวอกษร เปนตน โดย CSS ถกสรางขนมาครงแรกเมอป 1977 และม
พฒนาการเรอยมาตงแตเวอรชน 1, 2 และปจจบนคอเวอรชน 3 หรอทเรยกกนวา CSS3 นนเอง แมวาใน HTML
นนจะมทงแทกและแอตทรบวตบางสวนทสามารถใชจดรปแบบเอกสารอยแลว แตยงไมครอบคลมการใชงาน
ครบทกกรณ นอกจากนกยงขาดความยดหยนและไมสามารถจดรปแบบในลกษณะทซบซอนได ดงนนใน
ปจจบนทงทางองคการ W3C และกลมผสรางเวบเบราเซอรทกรายการจงพยายามเนนใหเราใช CSS จดรปแบบ
เวบเพจมากกวาทจะใชแอตทรบวตของ HTML ดงจะเหนไดจากใน HTML5 ไดมการยกเลกแอตทรบวตท
เกยวกบการจดรปแบบไปเกอบทงหมด เพอใหเกดการแยกสวนกนอยางชดเจนระหวาง HTML และ CSS ตาม
หลกการดงนคอ
HTML ใชสาหรบจดโครงรางของเวบเพจเปนหลก
CSS ใชสาหรบการจดรปแบบของเวบเพจเปนหลก
การกาหนดสไตลแบบ Inline
คอการกาหนดรปแบบเอาไวทแทกเปดของอลเมนตทเราตองการจดรปแบบโดยระบใหเปนคาของแอ
ตทรบวต Style ดงตวอยาง
ตวอยางท 2 style-inline.html
<!doctype html> <html> <head>
<meta charset="utf-8"> <title>Style - Inline</title>
</head> <body style="font-size: 18px"> <p style="color: red;">HTML ใชสาหรบการจดโครงรางของเวบเพจ</p> <span style="background-color: lightskyblue; font-weight: bold;"> CSS ใชสาหรบการจดรปแบบของเวบเพจ </span> </body> </html>
การกาหนดสไตลแบบ Embedded
สไตลแบบ Embedded คอการกาหนดสไตลเอาไวทสวนหว (head) ของเอกสารดวยอลเมนต style
เพอใหมนมผลกบหลายๆ อลเมนตโดยไมตองกาหนดสไตลซ าซอนกนอก ดงตวอยาง
4 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 3 style-embedded.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Style - Embedded</title> <style> body { font-size: 18px; } p { color: red; } span { background-color: lightskyblue; font-weight: bold; } </style> </head> <body> <span>ใน HTML5 กาหนดใหแยกสวนระหวาง HTML และ CSS ดงนคอ</span> <p>HTML ใชสาหรบการจดโครงรางของเวบเพจ</p> <span>CSS ใชสาหรบการจดรปแบบของเวบเพจ</span> </body> </html>
การกาหนดสไตลแบบ External
สไตลแบบ External คอการแยกสวนสไตลออกไปไวทไฟลภายนอกตางหาก แลวเมอตองการใชงานท
เพจใดจงจะทาการเชอมโยงกบไฟลนน ในสวนของแทก <head> ของ HTML เชน
<head>
<title> Home </title>
<link rel= “stylesheet” href= “style.css”>
</head>
จากคาสง HTML ขางตน ไฟลของ CSS ภายนอกชอ style.css การเรยกใชในลกษณะดงกลาวเราจะตอง
นาไฟล style.css ไวในโฟลเดอรเดยวกนกบ HTML
5 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
บทท 2 ซเลกเตอรของ CSS
ซเลกเตอรของ CSS มหลายรปแบบดงน
1. Type Selector
Type Selector เปนการนาชนดของอลเมนตมากาหนดเปนซเลกเตอร ทาใหสไตลทเรากาหนดมผลกบ
อลเมนตชนดนนทกตวทอยในเพจ ดงตวอยาง
ตวอยางท 2.1 type-selector.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Type Selector</title> <style> p { color: blue; } div { color: red; background-color: lightskyblue; } span { font-size: 18px; font-weight: bold; } </style> </head> <body> <p>ภาพความทรงจา</p> <div>คอยยารกซง</div> <br> <span>ไวตรงดวงใจ</span> <br><br> <div>เมอวนเวยนไป</div> <p>แลวเธอทาไมกลบลม</p> </body> </html>
6 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
2. ID Selector
แอตทรบวต id ใชสาหรบกาหนดเปนชออางองสาหรบอลเมนตตวนน เชน <div id= “title”> หรอ <p
id= “warning”> เปนตน เราสามารถนาแอตทรบวต id ไปกาหนดใหกบอลเมนตไดเกอบทกชนด ทงนภายใน
เวบเพจเดยวกนตองไมกาหนดคา id ซ ากน หรอแตละอลเมนตจะมคา id เปนของตนเองนนเอง และจากการทคา
id เปนตวอางองของแตละอลเมนต เราจงสามารถนามากาหนดเปนซเลกเตอรอกแบบหนง เราตองเขยน
เครองหมาย # กากบทหนาชอ id เสมอ เพอแยกความแตกตางจากซเลกเตอรชนดอนๆ ดงตวอยาง
ตวอยางท 2.1 id-selector.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ID Selector</title> <style> #dv1 { color: red; background-color: lightgrey; } #dv2 { color: blue; } </style> </head> <body> <div>ทาความด</div> <div id="dv1">ละเวนความชว</div> <div id="dv2">ทาจตใจใหบรสทธ</div> </body> </html>
7 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
3. Class Selector
ขอกาหนดสาคญของ Class Selector คอจะตองมเครองหมายจด ( . ) ไวหนาชอคลาส และหามม
ชองวางระหวางจดและชอคลาส ดงตวอยาง
ตวอยางท 2.3 class-selector.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Class Selector</title> <style> .blue-text { color: blue; } .red-text { color: red; } .highlight { background-color: lightskyblue; } </style> </head> <body> <p class="blue-text">บทกลอนซงๆ</p> <div>วาดฝนดวยเสนสขาว</div> <div class="highlight">เปนทางยาวบนทองฟา</div> <div class="red-text">ใหความรสกเปนปากกา</div> <div class="highlight">อยากบอกเธอวา...คดถงจงเลย</div> </body> </html>
8 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
4. Union Selector
เปนการนาเอาซเลกเตอรหลายๆ รปแบบมาใชสไตลรวมกน ซเลกเตอรทนามาใชอาจเปนชนดเดยวกน
หรอตางชนดกนกได โดยคนแตละซเลกเตอรดวยเครองหมายคอมมา ( , ) ดงตวอยาง
ตวอยางท 2.4 union-selector.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Union Selector</title> <style> div, p, span { font-size: 18px; } .blue-bold, #first-line { color: blue; font-weight: bold; } </style> </head> <body> <p id="first-line">เมอมงมมตรมงมาหมายมอง</p> <div>เมอหมนหมองมตรมองเหมอนหมหมา</div> <span>เมอไมมหมดมตรมงมองมา</span> <div class="blue-bold">เมอมอดมวยแมหมหมาไมมามอง</div> </body> </html>
9 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
บทท 3 การจดรปแบบอลเมนตชนดขอความ
1.การกาหนดขนาดหวขอดวยแทก HTML
ใน HTML มแทกทใชในการกาหนดขอความสวนทเปนหวขอใหเลอกใชไดถง 6 ระดบ ดงตวอยาง
ตวอยางท 3.1 h1-h6.html
<!doctype html> <html> <head>
<meta charset="utf-8"> <title>Heading h1-h6</title>
</head> <body> <h1>หวขอระดบ h1</h1> <h2>หวขอระดบ h2</h2> <h3>หวขอระดบ h3</h3> <h4>หวขอระดบ h4</h4> <h5>หวขอระดบ h5</h5> <h6>หวขอระดบ h6</h6> </body> </html>
10 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
2.การจดรปแบบขอความดวย CSS
การจดรปแบบขอความเชน ทาตวหนา ตวเอยง ขดเสนใต สขอความ เปนตน สามารถใช CSS ไดดง
ตวอยางตอไปน
ตวอยางท 3.2 text-decoration2.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>color, text-decoration</title> <style> p, span { font-size: 20px; } #p1 {
text-decoration: overline; font-style: italic;
} #p2 {
text-decoration: underline; font-weight: bold;
} #p3 {
text-decoration: line-through; font-family: AngsanaUPC;
} </style> </head> <body> <p id="p1"> ตกแตงขอความดวย: <span style="color: brown;">overline</span> </p> <p id="p2"> ตกแตงขอความดวย: <span style="color: rgb(0, 128, 255)">underline</span> </p> <p id="p3"> ตกแตงขอความดวย: <span style="color: #f30;">line-through</span> </p> </body> </html>
11 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
3. การจดแนวขอความ
มหลายรปแบบ เชน ชดซาย ชดขวา กงกลาง ตวหอย ตวยก เปนตน ดงตวอยาง
ตวอยางท 3.3 vertical-align2.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>vertical-align</title> <style> #p1 { text-align:center;} #p2 { text-align:right};} .sub { vertical-align: sub; } .super { vertical-align: super;} .sub, .super { font-size: small; } </style> </head> <body> <p>1<span class="super">st</span> July 2013</p> <p id="p1" >2<span class="super">3</span> + 3<span class="super">2</span> =
17</p> <p id="p2">O<span class="sub">2</span> => Oxygen</p> <p> <span class="super">1<span>/<span class="sub">10</span> + <span class="super">90</span>/<span class="sub">100</span> = ? </p> </body> </html>
12 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
4. การจดยอหนา
การจดยอหนาจะใชพรอปเพอรต text-indent เพอกาหนดระยะของการยอหนา ดงตวอยาง
ตวอยางท 3.4 text-indent2.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>text-indent</title> <style> p { background-color: #cdf; } #p1 { text-indent: 20px; } #p2 { text-indent: 50px; } </style> </head> <body> <p> ระยะเยองของยอหนาในทนหมายถง การเวนระยะจากแนวขอบดานซายของอลเมนตเขาไป ซงจะมผลเฉพาะกบบรรทดแรกของยอหนาเทานน สวนบรรทดถดไปกจะเรมทแนวขอบ
ของอลเมนตตามปกต </p> <p id="p1"> ระยะเยองของยอหนาในทนหมายถง การเวนระยะจากแนวขอบดานซายของอลเมนตเขาไป
ซงจะมผลเฉพาะกบบรรทดแรกของยอหนาเทานน สวนบรรทดถดไปกจะเรมทแนวขอบ ของอลเมนตตามปกต
</p> <p id="p2"> ระยะเยองของยอหนาในทนหมายถง การเวนระยะจากแนวขอบดานซายของอลเมนตเขาไป ซงจะมผลเฉพาะกบบรรทดแรกของยอหนาเทานน สวนบรรทดถดไปกจะเรมทแนวขอบ
ของอลเมนตตามปกต </p> </body> </html>
13 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
5. การสรางลาดบรายการ
ลาดบรายการหรอลสต (List) กคอการแบงขอมลออกเปนขอยอยๆ สาหรบการสรางลสตดวย CSS ม
หลายรปแบบดงตวอยางตอไปน
ตวอยางท 3.5 unordered-list2.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Unordered List</title> </head> <body style="font-size:20px"> <h5>สญลกษณของ Unordered List ม 3 แบบคอ</h5> <ul style="list-style-type: disc;"> <li>disc</li> <li style="list-style-type: circle;">circle</li> <li style="list-style-type: square;">square</li> </ul> <h5>การสราง List ซอนกน</h5> <ul> <li>Fruit</li> <ul> <li>Apple</li> <li>Orange</li> </ul> <li>Flower</li> <ul> <li>Rose</li> <li>Orchid</li> </ul> </ul> </body> </html>
14 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 3.6 ordered-list-image.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Unordered List Image</title> <style> h3 { color:blue; } ul { list-style-image: url(heart.gif); } </style> </head> <body> <h3>วธการทาใหผหญงหลงรก</h3> <ul> <li>พดจาไพเราะ ออนหวาน มอารมณขน</li> <li>แตงตวใหดด ภมฐาน ถงจะไมหลอกตาม</li> <li>รจกเอาใจ ซอของขวญใหสมาเสมอ</li> <li>มความเปนผนา อบอน พงพาได</li> </ul> </body> </html>
15 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 3.7 unordered-list.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ordered List</title> </head> <body> <h4>Ordered List แบบ decimal:</h4> <ol style="list-style-type: decimal;"> <li>One</li> <li>Two</li> <li>Three</li> </ol> <hr> <h4>Ordered List แบบ decimal เรมตนท 2553:</h4> <ol style="list-style-type: decimal;" start="2553"> <li>กอตงบรษท</li> <li>จดทะเบยนในตลาดหลกทรพย</li> <li>เลกกจการ</li> </ol> <hr> <h4>Ordered List แบบ decimal-leading-zero:</h4> <ol style="list-style-type: decimal-leading-zero;"> <li>One</li> <li>Two</li> <li>Three</li> </ol> <hr> <h4>Ordered List แบบ lower-alpha:</h4> <ol style="list-style-type: lower-alpha;"> <li>ant</li> <li>dog</li> <li>cat</li> </ol> <hr> <h4>Ordered List แบบ upper-alpha เรมตนท 4:</h4> <ol style="list-style-type: upper-alpha;" start="4"> <li>Lion</li> <li>Horse</li> <li>Fox</li> </ol> </body> </html>
16 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
6. การสราง Definition List
เปนลสตทมลกษณะเปนการอธบายความหมายของคา โดยใชแทก <dl> คอขอบเขตของลสต <dt> คอ
หวขอ และ <dd> คอขอความรายละเอยด ดงตวอยางตอไปน
ตวอยางท 3.8 definition-list.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Definition List</title> </head> <body> <h4>เทคโนโลยทเกยวของกบเวบไซต</h4> <dl> <dt>HTML</dt> <dd> ยอมาจาก HyperText Markup Language เปนภาษาทใชในการกาหนด โครงรางของเอกสารทจะแสดงผลดวยเวบเบราเซอร </dd><br> <dt>CSS</dt> <dd> ยอมาจาก Cascading Style Sheets เปนภาษาทใชในกาหนดรปแบบหรอ ตกแตงการเอกสารเวบเพจ โดยตองใชรวมกบภาษา HTML </dd><br> <dt>JavaScript</dt> <dd> เปนภาษาทใชในการเขยนสครปต เพอควบคมการทางานของ เวบเพจใหมการตอบสนองแบบไดนามก โดยใชรวมกบ HTML และ CSS </dd> </dl> </body> </html>
17 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
บทท 4 รปภาพและมลตมเดย
1. การจดแนวขอความใหลอยอยขางภาพ
ใน CSS จะใชพรอปเพอรต float กาหนดตาแหนงของภาพดงตวอยางตอไปน
ตวอยางท 4.1 float.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>float</title> <style> img { width: 100px; margin-right: 15px; margin-left:15px; } </style> </head> <body> <img src="penguins.jpg" style="float: left"> <span> เพนกวน(Penguin) เปนนกชนดหนงทบนไมได มขนเปนสขาว-ดา สามารถวายนาไดอยางคลองแคลวชอบอาศยอยตามสภาพภมอากาศทหนาวเยน เชน แถบขวโลก ดารงชวตโดยการกนสตวนาขนาดเลกเปนอาหาร เชน ตวเคย, ปลา, ปลาหมก เปนตน </span> <hr> <img src="penguins.jpg" style="float: right"> <span> เพนกวน(Penguin) เปนนกชนดหนงทบนไมได มขนเปนสขาว-ดา สามารถวายนาไดอยางคลองแคลว ชอบอาศยอยตามสภาพภมอากาศทหนาวเยน เชน แถบขวโลก ดารงชวตโดยการกนสตวนาขนาดเลกเปนอาหาร เชน ตวเคย, ปลา, ปลาหมก เปนตน </span> </body> </html>
18 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
2. การใชภาพเปนพนหลง
การใชภาพเปนพนหลงจะตองกาหนดผานพรอปเพอรต background-image ดงตวอยาง
ตวอยางท 4.2 background-image.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>background-image</title> <style> body { background-image: url(bg/blue-stone.jpg); } div { background-image: url(bg/pinelumb.jpg); text-align: center; font-size: 40px; } </style> </head> <body> <div>HTML5 & CSS3 Tutorial</div> </body> </html>
19 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
3. การกาหนดตาแหนงพนหลง
ตามปกตแลวภาพพนหลงจะถกจดวางเรมจากมมบน-ซายของพนทอลเมนต แตเราสามารถกาหนดได
วาจะเรมจดวางพนหลงทตาแหนงใด ดงตวอยาง
ตวอยางท 4.2 background-position.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>background-position</title> <style> button { font: 20px tahoma; padding: 5px; padding-left: 30px; background-repeat: no-repeat; /* ใหภาพอยก งกลางทางดานซาย */ background-position: left center; } #ok { background-image: url(bg/check.gif); } #cancel { background-image: url(bg/cancel.gif); } #add{ background-image: url(bg/plus.gif); } #delete { background-image: url(bg/minus.gif); } </style> </head> <body> <button id="ok">ตกลง</button> <button id="cancel">ยกเลก</button> <button id="add">เพม</button> <button id="delete">ลบ</button> </body> </html>
20 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 4.3 background-position2.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>background-position</title> <style> a.menu:hover { background-color: #fcc; } a.menu { display: block; width: 150px; font-size: 18px; padding: 5px; margin: 2px; background-color: #cdf; } a.has-submenu { background-image: url(bg/arrow-right.gif); background-repeat: no-repeat; background-position: right center; } </style> </head> <body> <a class="menu" href="#">หนาแรก</a> <a class="menu has-submenu" href="#">รายการสนคา</a> <a class="menu has-submenu" href="#">ขอมลบรษท</a> <a class="menu has-submenu" href="#">สาระนาร</a> <a class="menu" href="#">ตดตอเรา</a> </body> </html>
21 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
4. การตรงภาพพนหลง
ตามปกตแลวภาพพนหลงจะถกเลอนตามสกรอลลบารของเวบเบราเซอร แตเราสามารถตรงภาพพน
หลงใหอยกบทได ดงตวอยาง
ตวอยางท 4.2 background-position.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>background-attachment</title> <style> body { background-image: url(bg/html5.gif); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } </style> </head> <body> <h4> HTML5 ไดรบการพฒนาขนโดยกลม WHATWG <br><br><br> ซงไดรบการสนบสนนจากองคกร W3C <br><br><br> เพอสรางมาตรฐานใหมใหกบภาษา HTML <br><br><br><br><br><br><br><br> </h4> </body> </html>
22 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
4. การเลนไฟลวดโอ
ใน HTML5 มแทกใหมคอ <video> สาหรบใชเลนไฟลประเภทวดโอโดยตรง แตจะรองรบไฟลได
เพยงไมกประเภท ทรองรบ เชน MP4, WebM, Ogg เปนตน ดงตวอยาง
ตวอยางท 4.3 video.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Video</title> </head> <body> <h3>เลนไฟล video/ogg</h3> <video src="multimedia/sample_ogg_video.ogg" width="320" height="240" preload="auto" poster="multimedia/poster.png" controls> </video> </body> </html>
23 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
4. การเลนไฟลเสยง
ใน HTML5 ไดเพมแทก <audio> สาหรบใชเลนไฟลประเภทเสยงโดยตรง แตจะรองรบไฟลไดเพยง
ไมกประเภท ทรองรบ เชน MP3, Wave, Ogg เปนตน ดงตวอยาง
ตวอยางท 4.4 audio.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Audio</title> </head> <body> <h3>เลนไฟล audio</h3> <audio src="multimedia/kalimba.mp3" preload="auto" controls loop> </audio> </body> </html>
24 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
บทท 5 การจดรปแบบการแสดงผลอลเมนต
1. การกาหนดลกษณะของเสนขอบ (Border)
เสนขอบ (Border) คอเสนทง 4 ดานทลอมรอบอลเมนตนนเอง โดยลกษณะทสาคญเกยวกบเสนขอบท
เราควรรจกในเบองตนมดงน
• เราจะแทนเสนขอบแตละดานดวยคาวา top (ดานบน), right (ดานขวา), bottom (ดานลาง) และ
left (ดานซาย)
• ลกษณะทเราจะกาหนดใหแกเสนขอบ 3 อยางคอ style (รปแบบเสน), width (ความหนา) และ
color (ส)
• ในการกาหนดลกษณะของเสนขอบ สามารถเลอกกาหนดเฉพาะดานทตองการได โดยไม
จาเปนตองกาหนดใหครบหรอมลกษณะเหมอนกนทกดาน
ตวอยางท 5.1 border-style.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Border Style</title> <style> #p1 { border-top-style: solid; border-bottom-style: dotted; } #p2 { border-top-style: dashed; border-right-style: solid; border-bottom-style: solid; border-left-style: dashed; } #p3 { border-style: double; } #p4 { border-style: groove; } </style> </head> <body> <p id="p1">การแสดงเสนขอบจะชวยใหอลเมนตโดดเดนและสวยงามขน</p> <p id="p2">การแสดงเสนขอบจะชวยใหอลเมนตโดดเดนและสวยงามขน</p> <p id="p3">การแสดงเสนขอบจะชวยใหอลเมนตโดดเดนและสวยงามขน</p> <p id="p4">การแสดงเสนขอบจะชวยใหอลเมนตโดดเดนและสวยงามขน</p> </body> </html>
25 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 5.2 border-width.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Border Width</title> <style> p { border-style: solid; } #p1 { border-top-width: 1px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 1px; } #p2 { border-width: 5px; } #p3 { border-width: 8px; } #p4 { border-width: thin; } #p5 { border-width: medium; } #p6 { border-width: thick; } </style> </head> <body> <p id="p1">เสนขอบขนาด 1px 3px 3px 1px</p> <p id="p2">เสนขอบขนาด 5px</p> <p id="p3">เสนขอบขนาด 8px</p> <p id="p4">เสนขอบขนาด thin</p> <p id="p5">เสนขอบขนาด medium</p> <p id="p6">เสนขอบขนาด thick</p> </body> </html>
26 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 5.3 border-color.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Border Color</title> <style> p { border-width: 3px; } #p1 { border-style: double; border-color: red; } #p2 { border-top-color: #666; border-right-color: #ccc; border-bottom-color: #ccc; border-left-color: #666; } #p3 { border-color: #ccc #666 #666 #ccc; } #p4 { border-color: #0cf; } #p2, #p3, #p4 { border-style: solid; } </style> </head> <body> <p id="p1">การแสดงเสนขอบจะชวยใหอลเมนตโดดเดนและสวยงามขน</p> <p id="p2">การแสดงเสนขอบจะชวยใหอลเมนตโดดเดนและสวยงามขน</p> <p id="p3">การแสดงเสนขอบจะชวยใหอลเมนตโดดเดนและสวยงามขน</p> <p id="p4">การแสดงเสนขอบจะชวยใหอลเมนตโดดเดนและสวยงามขน</p> </body> </html>
27 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
2. การกาหนดเสนรอบนอกเสนขอบ (Outline)
นอกจากเสนขอบแลว เรายงสามารถกาหนดเสนทอยลอมรอบอลเมนตอกแบบหนง เรยกวา เสนรอบ
นอก (Outline) ดงตวอยาง
ตวอยางท 5.4 outline.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Outline</title> <style> p { border: double 4px brown; } .p-outline { outline: dotted 4px blue; } .bt-outline { outline: solid 2px red; outline-offset: 1px; } </style> </head> <body> <p> เสนรอบนอก(Outline) คอเสนทอยถดจากเสนขอบออกไป<br> มกใชเพอเนนใหอลเมนตอนใดอนหนงเดนชดขน </p> <p class="p-outline"> เสนรอบนอก(Outline) คอเสนทอยถดจากเสนขอบออกไป<br> มกใชเพอเนนใหอลเมนตอนใดอนหนงเดนชดขน </p> <button>« ยอนกลบ</button> <button class="bt-outline">ถดไป »</button> </body> </html>
28 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
3. การกาหนดเสนขอบแบบมมโคง (Border-Radius)
การกาหนดเสนขอบแบบมมโคง (Rounded Corners) เปนคณลกษณะทเพมเขามาใหมใน CSS3 โดย
การกาหนดคารศมในแนวแกน X และ Y ดงตวอยาง
ตวอยางท 5.5 border-radius.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Rounded Corners</title> <style> #container { border: solid 2px crimson; width: 450px; border-radius: 15px; background: lightgray; text-align: center; } #top { font: 24px tahoma; color: cyan; border-top-left-radius: 12px; border-top-right-radius: 12px; } #bottom { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } #top, #bottom { width: auto; background: royalblue; padding: 5px; } img { height: 100px; margin: 10px 5px; border-radius: 10px; } button { border-radius: 10px; background: tomato; padding: 5px; width: 80px; } </style> </head>
29 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
<body> <div id="container"> <div id="top">Rounded Corners</div> <img src="penguins.jpg"> <img src="tulips.jpg"> <img src="koala.jpg"> <div id="bottom"> <button>OK</button> <button>Cancel</button> </div> </div> </body> </html>
30 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
4. การกาหนดเงาใหอลเมนต (Box Shadow)
การทาใหอลเมนตมเงา (Shadow) ถอเปนลกษณะทนาสนใจอกอยางหนงทเพมเขามาใน CSS3 ดง
ตวอยาง
ตวอยางท 5.6 box-shadow.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Box Shadow</title> <style> p { border: solid 2px orangered; width: 450px; font-size: 24px; } #p1 { box-shadow: 5px 5px; } #p2 { box-shadow: -5px -5px 3px darkgray; } #p3 { box-shadow: 10px -10px skyblue; } #p4 { border-radius: 10px; box-shadow: 8px 8px 5px darkgray; } </style> </head> <body> <p id="p1">กาหนด +hoffset และ +voffset</p> <p id="p2">กาหนด -hoffset, -voffset, blur และ color</p> <p id="p3">กาหนด +hoffset, -voffset และ color</p> <p id="p4">กาหนด +hoffset, +voffset, blur และ color</p> </body> </html>
31 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
5. การกาหนดขนาดของอลเมนต
โดยปกตแลว อลเมนตบางชนดทใชบรรจเนอหาอนๆ เชน <div>, <p> จะมความสงตามขนาดของ
เนอหา สวนความกวางจะเทากบความกวางของอลเมนตทใชบรรจอย (Container) ถาม <body> เปนคอนเทน
เนอรโดยตรงกจะกวางเทากบขนาดของเบราเซอร และเมอเรายอหรอขยายขนาดของเบราเซอร จะทาใหขนาด
ของอลเมนตเปลยนตามไปดวย ดงตวอยาง
ตวอยางท 5.7 resize.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Size</title> <style> div { border: solid 3px crimson; } </style> </head> <body> <div> อลเมนตทไมไดระบขนาดเปนคาคงท เมอเปลยนขนาดของเบราเซอร ขนาดของอลเมนตจะเปลยนตาม </div> </body> </html>
การทอลเมนตมขนาดไมแนนอนเชนน ในบางกรณกจะเกดปญหาตอการจดวางโครงรางของเวบเพจได
ดงนนเราจงควรกาหนดขนาดทแนนอนใหกบอลเมนตบางตว หรอไมกใหสามารถเปลยนขนาดไดภายใน
ขอบเขตทกาหนด โดยใน CSS นนมพรอปเพอรตทเกยวของกบขนาดของอลเมนต ดงน
การกาหนดขนาดเปนตวเลข เชน width: 100px; จะทาใหอลเมนตมขนาดเทาเดมตลอด
การกาหนดขนาดเปนเปอรเซน เชน width: 80%; จะเทยบกบขนาดของอลเมนตทเปนคอนเทนเนอร ซง
จะทาใหอลเมนตเปลยนขนาดตามคอนเทนเนอรเพอรกษาสดสวนของขนาดใหเปนคาตาม % ทกาหนด
กรณทเราตองการใหอลเมนตมขนาดพอดและยดหยนตามขนาดคอนเทนเนอร แนะนาใหกาหนดคา
เปน auto มากกวาทจะกาหนดเปน 100% เพราะจะทาใหคา padding, margin, border ถกนามารวมเพม
เขาไปอกซงอาจสงผลใหอลเมนตมขนาดใหญกวาคอนเทนเนอร
32 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 5.8 sizing-element.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Size of Element</title> <style> #container { border: dotted 4px darkgray; width: 80%; min-width: 250px; max-width: 500px; } #p1 { border: double 4px; background-color: coral; width: 100px; height: 50px; } #p2 { border: double 4px; background-color: skyblue; width: 50%; height: 50px; } </style> </head> <body> <div id="container"> width: 80% <p id="p1">width: 100px</p> <p id="p2">width: 50%</p> </div> </body> </html>
33 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
การเปรยบเทยบการกาหนดขนาดอลเมนตเปน 100% กบ auto
ตวอยางท 5.9 sizing-100percent-auto.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>100% - auto</title> <style> #container { border: dotted 4px darkgray; width: 200px; } #p1 { background-color: coral; width: auto; } #p2 { background-color: skyblue; width: 100%; } #p1, #p2 { border: double 10px; padding: 10px; margin: 20px; } </style> </head> <body> <div id="container"> <p id="p1">width: auto</p> <p id="p2">width: 100%</p> </div> </body> </html>
จะเหนวาการกาหนดแบบ auto จะมความสมดลกบคอนเทนเนอร แตการกาหนดแบบ 100% จะมขนาด
เกนออกมาจากคอนเทนเนอร ทงนเพราะมการรวมคาของ padding, margin และ border เขาไปดวยนนเอง
34 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
6. การแสดงเนอหาทเกนขอบเขตของอลเมนต (Overflow)
ในกรณทเรากาหนดขนาดของอลเมนตดวยพรอปเพอรต width/height หรอ min-width/min-height อาจ
เกดปญหาอยางหนงตามมานนกคอ ถาปรมาณเนอหาทอยภายในอลเมนตนนเกนขอบเขตทกาหนดไว จะทาให
เนอหานนลนออกมานอกอลเมนต ใน CSS มพรอปเพอรต overflow/overflow-x/overflow-y ดงตวอยาง
ตวอยางท 5.10 overflow.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>overflow</title> <style> p { border: double 4px red; width: 200px; height: 60px; } #p1 { overflow: visible; } #p2 { overflow: hidden; } #p3 { overflow: scroll; } #p4, #p5 { overflow: auto; } #p5 { width: 250px; height: 100px; } span { color: blue; } </style> </head> <body> <p id="p1"> <span>overflow: visible</span><br> ในกรณทเรากาหนดขนาดของอลเมนตดวยพรอปเพอรต width/height หรอ min-width/min-height อาจจะทาใหเนอหาลนออกมานอกอลเมนตได </p> <br><br> <p id="p2"> <span>overflow: hidden</span><br> ในกรณทเรากาหนดขนาดของอลเมนตดวยพรอปเพอรต width/height หรอ min-width/min-height อาจจะทาใหเนอหาลนออกมานอกอลเมนตได </p>
35 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
<p id="p3"> <span>overflow: scroll</span><br> ในกรณทเรากาหนดขนาดของอลเมนตดวยพรอปเพอรต width/height หรอ min-width/min-height อาจจะทาใหเนอหาลนออกมานอกอลเมนตได </p> <p id="p4"> <span>overflow: auto</span><br> ในกรณทเรากาหนดขนาดของอลเมนตดวยพรอปเพอรต width/height หรอ min-width/min-height อาจจะทาใหเนอหาลนออกมานอกอลเมนตได </p> <p id="p5"> <span>overflow: auto</span><br> ในกรณทเรากาหนดขนาดของอลเมนตดวยพรอปเพอรต width/height หรอ min-width/min-height อาจจะทาใหเนอหาลนออกมานอกอลเมนตได </p> </body> </html>
36 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
7. การกาหนดระยะระหวางเนอหากบขอบของอลเมนต (Padding)
ใน CSS มกลมพรอปเพอรต padding ทใชกาหนดระยะทงสดาน คอ top, right, bottom และ left ดง
ตวอยาง
ตวอยางท 5.11 padding.html
<html> <head> <meta charset="utf-8"> <title>padding</title> <style> p { border: solid 2px red; width: 250px; } #p1 { padding-top: 10px; padding-left: 20px } #p2 { padding: 10px; } /*ทงสดาน 10px */ #p3 { padding: 15px 10px; } /*top, bottom 15px และ right, left 10px */ #p4 { padding: 5px 10px 15px 30px; } /*top 5px, right 10px, bottom 15px, left 30px */ span { color: blue; } </style> </head> <body> <p id="p1"> <span>padding-top: 20px; padding-left: 20px;</span><br> พรอปเพอรตในกลม padding นนจะใชในการกาหนดระยะหางระหวางแนวขอบของอลเมนตกบเนอหา </p> <p id="p2"> <span>padding: 10px;</span><br> พรอปเพอรตในกลม padding นนจะใชในการกาหนดระยะหางระหวางแนวขอบของอลเมนตกบเนอหา </p> <p id="p3"> <span>padding: 15px 10px;</span><br> พรอปเพอรตในกลม padding นนจะใชในการกาหนดระยะหางระหวางแนวขอบของอลเมนตกบเนอหา </p> <p id="p4"> <span>padding: 5px 10px 15px 30px;</span><br> พรอปเพอรตในกลม padding นนจะใชในการกาหนดระยะหางระหวางแนวขอบของอลเมนตกบเนอหา </p> </body> </html>
37 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
8. การกาหนดระยะระหวางอลเมนต (Margin)
ใน CSS มกลมพรอปเพอรต padding ทใชกาหนดระยะทงสดาน คอ top, right, bottom และ left ดง
ตวอยาง
ตวอยางท 5.12 margin.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>magin</title> <style> body { margin-top: 10px; margin-left: 10px; } img { height: 50px; border: solid 3px royalblue; margin: 5px; } span,div { font: bold 20px Tahoma; border: solid 3px crimson; padding: 10px; } span { margin: 20px; } div { width: 150px; margin: auto; /* จดกงกลาง */ } </style> </head> <body> <img src="penguins.jpg"> <img src="tulips.jpg"> <img src="koala.jpg"> <br><br> <span>1</span> <span>2</span><br><br> <div>3</div> </body> </html>
38 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
9. การควบคมการมองเหนอลเมนต (Visibility และ Display)
โดยปกตแลวอลเมนตตางๆ ทถกกาหนดไวในเวบเพจกจะปรากฏใหเหนตามปกต แตในบางกรณทเรา
ตองการซอน/แสดงอลเมนต เชน กรณการสรางเมนหลก/เมนยอย อลเมนตทเปนตวบรรจรายการเมนยอย ตอง
สามารถซอนและแสดงไดตามตองการ
ตวอยางท 5.13 visibility.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Visibility</title> <style> img { height: 60px; margin: 5px; } img.visible { visibility: visible; } img.hidden { visibility: hidden; } img.collapse { display: none; } </style> </head> <body> <img src="penguins.jpg"> <img src="tulips.jpg" class="visible"> <img src="koala.jpg"> <br> <img src="penguins.jpg"> <img src="tulips.jpg" class="hidden"> <img src="koala.jpg"> <br> <img src="penguins.jpg"> <img src="tulips.jpg" class="collapse"> <img src="koala.jpg"> </body> </html>
39 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 5.14 display-inline-block.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>display</title> <style> span { background: skyblue; font: bold 18px tahoma; color: crimson; margin: 5px; display: block; } div, p { border: double 3px tomato; width: 150px; } div { display: inline-block; } p { display: inline; } </style> </head> <body> <span>เพนกวน(Penguin)</span> เปนนกชนดหนงทบนไมได <p>มขนเปนสขาว-ดา</p> สามารถวายนาไดอยางคลองแคลว ชอบอาศยอยตามสภาพภมอากาศทหนาวเยน เชน แถบขวโลก <div>ดารงชวตโดยการกนสตวนาขนาดเลกเปนอาหาร</div> เชน ตวเคย, ปลา, ปลาหมก เปนตน </body> </html>
40 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
10. การกาหนดใหอลเมนตลอยอยขางๆ กนได (Floating)
เปนการทาใหอลเมนตทมลกษณะเปนคอนเทนเนอร เชน <div> สามารถลอยอยขางๆ กนได เพอใชใน
การทาโครงรางของเวบเพจ โดยใชพรอปเพอรต float และ clear สาหรบยกเลก
ตวอยางท 5.15 floating-element.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>floating element</title> <style> div { width: 200px; border: double 4px red; padding: 3px; margin: 10px; float: left; /* right */ } img { height: 50px; margin: 5px; float: left; } </style> </head> <body> <div id="penguins"> <img src="penguins.jpg"><span>เพนกวน(Penguin) เปนนกชนดหนงทบนไมได มขนเปนสขาว-ดา สามารถวายนาไดอยางคลองแคลว</span> </div> <div id="tulips"> <img src="tulips.jpg"><span>ทวลป(Tulip) เปนดอกไมชนดหนงทมสสนสวยงาม ถอเปนเอกลกษณอยางหนงของประเทศเนเธอรแลนด</span> </div> ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ </body> </html>
41 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
ตวอยางท 5.16 float-layout.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>floating layout</title> <style> body { width: 650px; margin: auto; } #atop { width: 620px; border: dotted 2px darkgray; padding: 3px; margin: 5px; } #aside { width: 150px; border: dotted 2px darkgray; float: left; padding: 3px; margin: 5px; } #content { min-width: 450px; max-width: 600px; border: dotted 2px darkgray; margin: 5px; float: left; padding: 3px; } a.submenu { display: block; background: powderblue; margin: 5px; padding: 3px; } </style> </head> <body> <div id="atop"> <br><br><br><br> </div> <div id="aside"> <a href="#" class="submenu">หนาแรก</a> <a href="#" class="submenu">รายการสนคา</a> <a href="#" class="submenu">ขอมลบรษท</a> <a href="#" class="submenu">เวบบอรด</a> <a href="#" class="submenu">ตดตอเรา</a> </div> <div id="content"> <br><br><br><br><br><br><br><br> </div> </body> </html>
42 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
11. การกาหนดตาแหนงอลเมนตบนเวบเพจ
เปนการจดวางอลเมนตตามตาแหนงทกาหนด ดวยพรอปเพอรต top, left, bottom, right และกาหนด
รปแบบการจดวางดวยพรอปเพอรต position ซงม 4 รปแบบคอ
static เปนการจดวางตามตาแหนงใน HTML
absolute จดวางโดยเทยบกบตาแหนงอลเมนตทเปนคอนเทนเนอร
relative จดวางโดยเทยบกบตาแหนงเดมทมนควรอย
fixed จดวางโดยเทยบกบเบราเซอรเปนหลก โดยไมสนใจคอนเทนเนอร ทาใหอลเมนตถกตรงอย
กบท โดยไมเลอนตามสกรอลบาร
ตวอยางท 5.17 top-left-bottom-right.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>top-left-bottom-right</title> <style> div { font: bold 16px tahoma; background: skyblue; text-align: center; border: solid 2px red; width: 100px; height: 50px; position: absolute; /*****/ } #dv1 { top: 10px; left: 20px; } #dv2 { top: 3px; right: 10px; } #dv3 { bottom: 1px; right: 1px; } #dv4 { bottom: 10px; left: 10px; } </style> </head> <body> <div id="dv1">div #1</div> <div id="dv2">div #2</div> <div id="dv3">div #3</div> <div id="dv4">div #4</div> </body> </html>
43 เอกสารประกอบการเรยนวชา การสรางเวบเพจ HTML รหส ง20249
12. การจดลาดบอลเมนตทวางซอนกนดวย z-index
ในกรณทอลเมนตมการวางซอนทบกน ปกตแลวอลเมนตทถกวางลงไปกอนจะอยดานลาง แตใน CSS
นนมพรอปเพอรตทชวยใหเราสามารถกาหนดลาดบการจดเรยงอลเมนตในแนวตงหรอแนวแกน Z โดยไม
ขนกบลาดบทเขยนไวในโคด HTML ดงตวอยาง
ตวอยางท 5.18 z-index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style> img { position: fixed; border: solid 2px red; height: 120px; } #penguin { z-index: 1; top: 10px; left: 10px; } #tulip { z-index: 10; top: 40px; left: 40px; } #koala { z-index: 5; top: 70px; left: 70px; } </style> </head> <body> <img id="penguin" src="penguins.jpg"> <img id="tulip" src="tulips.jpg"> <img id="koala" src="koala.jpg"> ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ ขอความ </body> </html>