วันพุธที่ 8 ตุลาคม พ.ศ. 2557

ตัวอย่างที่ 4.11

ตัวอย่างที่ 4.11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.W3.orq/1999/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.W3.orq/1999/xhtml1">
<head>
<meta http-equiv = "content-Type" content = "text/html; charset = windows-874"/>
<title>ทดสอบการแสดงผลของ Background-image</title>
</head>
<body style = "Background-image :url (file:///H:/2556-1/การเขียนโปรแกรมบนเว็บ/file_exe_zip/code_webprogramming/Chapter 4 /Blue hills.jpg)">
<p style = "margin-left:30px; margin-right:30px; margin-top:50px; margin-size:20px; font-width:bold;color:#FF33FF">
<p>"นก"เป้นสัตว์เลียงที่มีผู้นิยมเลี้ยงเป็นจำนวนมาก นื่องจากเป็นสัตว์ที่มีความสวยงาม สำหรับผู้ที่ชื่นชอบ เช่น นก Lovebird,นกหงส์หยก,นกแก้วสายพันธ์ต่างๆ เป็นต้น อย่างไรก็ตามการเลี้ยงนกบางประเภทนั้น อาจผิดกฎหมายคุ้มครองสัตว์ป่า ซึ่งผู้เลี้ยงต้องทำการศึกษารายลtเอียดด้วย
</p>
</body>
</html>

ตัวอย่างที่ 4.10

ตัวอย่างที่ 4.10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.W3.orq/1999/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.W3.orq/1999/xhtml1">
<head>
<meta http-equiv = "content-Type" content = "text/html; charset = windows-874"/>
<title>ทดสอบการแสดงผลของ Align และ Float </title>
</head>
<body>
<p>
<imgsrc="bird.jpg" style="float:right"/>
</p>
<p>"นก"เป้นสัตว์เลียงที่มีผู้นิยมเลี้ยงเป็นจำนวนมาก นื่องจากเป็นสัตว์ที่มีความสวยงาม สำหรับผู้ที่ชื่นชอบ เช่น นก Lovebird,นกหงส์หยก,นกแก้วสายพันธ์ต่างๆ เป็นต้น อย่างไรก็ตามการเลี้ยงนกบางประเภทนั้น อาจผิดกฎหมายคุ้มครองสัตว์ป่า ซึ่งผู้เลี้ยงต้องทำการสึกษารายลัเอียดด้วย
</p>
</body>
</html>

ตัวอย่างที่ 4.9

ตัวอย่างที่ 4.9

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.W3.orq/1999/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.W3.orq/1999/xhtml1">
<head>
<meta http-equiv = "content-Type" content = "text/html; charset = windows-874"/>
<title>ทดสอบ Properties font รูปแบบต่างๆ</title>
<body>
<h3>ทดสอบการแสดงของสัญลักษณ์ List </h3>
<ul>
<li style "list-style-image :url (Star.png) ">สัญลักษณ์รูปดาว</li>
<li style "list-style-image :url (Star.png) ">สัญลัษณ์วงกลมทึบสีดำ</li>
<li style "list-style-image :url (Star.png) ">สัญลักษณ์สี่เหลี่ยมทึบสีดำ</li>
<li style "list-style-image :url (Star.png) ">สัญลักษณ์วงกลมโปร่งใส</li>
</ul>
</head>
</body>
</html>

ตัวอย่างที่ 4.8

ตัวอย่างที่ 4.8

<head>
<meta http-equiv = "content-Type" content = "text/html; charset = windows-874"/>
<title>ทดสอบ Properties font รูปแบบต่างๆ</title>
<style type = "text/css">
<! - -
p.big{ font-size : 12xp;
font-style : italic;
font-family : "Times New Roman", Times,serif;
}
p.small{ font-size : 12xp;
font-weight : bold;
font-family : "courier new", Courier, monospace;
}
-->
</style>
</head>
<body>
<p class = "big">
การทดสอบ Property font ของสไตล์ชีทรูปแบบที่1
</p>
<p class = "small">
การทดสอบ Property font ของสไตล์ชีทรูปแบบที่ 2 พิจารณาการทดสอบรูปแบบนี้เปรียบ เทียบกับแบบแรก
</p>
<h2 style = "font-family: 'Times New Roman' , Times, serif;
Font-size:24px; font-weight:bold">
CSS PROPERTIES
</h2>
</body>
</html>

ตัวอย่างที่ 4.7

ตัวอย่างที่ 4.7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.W3.orq/1999/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.W3.orq/1999/xhtml1">
<head>
<meta http-equiv = "content-Type" content = "text/html; charset = windows-874"/>
<title>การสร้าง link ไฟล์ .css</title>
<! - -
@import url ("style1.css");
-->
</head>
<body>
<h1>การประกาศสไตล์ชีทแบบ"Link"</h1>
<p>การประกาศสไตล์ชีทแบบ"External"คือ สามารถทำได้ 2 วิธี คือ การสร้างจุดเชื่อมโยงด้วย "link" การสร้างจุดเชื่อมโยงด้วย link จะใช้การอ้างถึงไฟล์สไตล์ชีทที่อยู่นอกไฟล์เอกสาร XHTML
</p>
</body>
</html>

ตัวอย่างที่ 4.6

ตัวอย่างที่ 4.5

ตัวอย่างที่ 4.5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.W3.orq/1999/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.W3.orq/1999/xhtml1">
<head>
<meta http-equiv = "content-Type" content = "text/html; charset = windows-874"/>
<title>Untitled Document</title>
<style type = "text/css">
<!—
H2 {font-family: Arial; color:#9900FF;}
P{font-family: Ms Sans Serif; color:#FF8000; ize:10px}
-->
</style>
</head>
<body>
<h2>การประกาศสไตล์ชีทแบบ"Embedded"</h2>
<p>การประกาศสไตล์ชีทแบบ"Embedded"คือ การกำหนดสไตล์ชีทไว้ในแท็กstyle ในส่วนของแท็กhead
ผลลัพธ์จากการกำหนดสไตล์ชีทจะแสดงให้เห็นเม่อมีกรเขียนแท็กจากส่วน body</p>
</body>

</html>