บทที่ 1 บทนํา â»Ãá¡ÃÁÀÒÉÒ html...

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>


โครงสรางคาสงของ 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> กได ผลลพธออกมาไมตางกน


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


<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

เพอใหมนมผลกบหลายๆ อลเมนตโดยไมตองกาหนดสไตลซ าซอนกนอก ดงตวอยาง


ตวอยางท 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


บทท 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>


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>


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>


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>


บทท 3 การจดรปแบบอลเมนตชนดขอความ

1.การกาหนดขนาดหวขอดวยแทก HTML

ใน HTML มแทกทใชในการกาหนดขอความสวนทเปนหวขอใหเลอกใชไดถง 6 ระดบ ดงตวอยาง

ตวอยางท 3.1 h1-h6.html


<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>


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>


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>


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>


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>


ตวอยางท 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>


ตวอยางท 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>


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>


บทท 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>


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>


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>


ตวอยางท 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>


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>


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>


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>


บทท 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>


ตวอยางท 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>


ตวอยางท 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>


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>


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>


<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>


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>


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 ถกนามารวมเพม

เขาไปอกซงอาจสงผลใหอลเมนตมขนาดใหญกวาคอนเทนเนอร


ตวอยางท 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>


การเปรยบเทยบการกาหนดขนาดอลเมนตเปน 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 เขาไปดวยนนเอง


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>


<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>


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>


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>


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>


ตวอยางท 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>


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>


ตวอยางท 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>


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>


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>

บทที่ 1 บทนํา â»Ãá¡ÃÁÀÒÉÒ html...

Documents