Lab9 Ans

User Interface Design and Development ปฏิบตั ิการที่ 9 CSS EP1
ปฏิบัติการที่ 9 CSS EP1

วัตถุประสงค์
• เพื่อให้นิสิตเข้าใจภาษา CSS
• เพื่อให้นิสิตสามารถพัฒนาเว็บไซต์ด้วย CSS
แบบฝึกปฎิบัติการ
1. จงแสดงผลลัพธ์จากโค้ด HTML ต่อไปนี้โดยให้นสิ ิตก็อปหน้าจอผลลัพธ์ลงในช่องแสดงผลลัพธ์ พร้อมตอบคาถาม
โค้ดโปรแกรม
ผลลัพธ์
1.1 จากโค้ดโปรแกรมเป็นการเรียกใช้ CSS ประเภทใด …………………Inline……………….

2. จงแสดงผลลัพธ์จากโค้ด HTML ต่อไปนี้โดยให้นสิ ิตก็อปหน้าจอผลลัพธ์ลงในช่องแสดงผลลัพธ์ พร้อมตอบคาถาม

1.2 จากโค้ดโปรแกรมเป็นการเรียกใช้ CSS ประเภทใด ……………Internal………………………………….

1.3 จาก CSS ที่ปรากฏในโค้ดเลือกใช้ Selector แบบใด......................Tag...................................................
1.4 จาก CSS ทีป่ รากฏในโค้ดมี Selector อะไรบ้าง................body h1 และ p.................................
3. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML โดยต้องเรียกใช้ style จากไฟล์ style.css

จงทาให้โค้ดโปรแกรมสมบูรณ์
……<!DOCTYPE html> …………….
<html>
<head>
<link href="…… style.css ……" rel="…tylesheet….. ">
</head>
…</body>…...
<h1>หลักสูตรวิทยาศาสตรบัณฑิต (สาขาวิชาวิทยาการคอมพิวเตอร์) หลักสูตรเก่า พ.ศ. 2559 (COVID-19)………..
<p>88620359 ฐานข้อมูลไม่สัมพันธ์ 3 (2-2-5)</p>
<p>88620459 วิทยาศาสตร์ข้อมูลเบื้องต้นและการวิเคราะห์ข้อมูล 3 (3-0-6)</p>
<p>88621159 โครงสร้างข้อมูลและอัลกอริทึม 3 (2-3-4)</p>
<p>88622259 ระบบปฏิบัติการ 3 (3-0-6) </p>
</body>
………<html>……..
4. ให้นิสิตเรียกใช้อิลิเมนต์ต่างๆ ใน bootstrap อย่างน้อย 1 รายการ โดยมีขั้นตอนดังนี้

1. ดาวโหลดไฟล์ bootstrap.min.css และเก็บไว้ในโฟลเด้อโปรเจ็ค จากลิ้งค์
https://getbootstrap.com/docs/5.0/getting-started/download/
2. กดที่ลิ้งค์ดังรูป
3. ทาการดาวโหลด bootstrap-5.0.2-dist.zip โดยภายในจะประกอบด้วยโฟลเด้อ css และ js

4. นาโฟลเด้อ css ไปไว้ที่โปรเจ็ค
5. เรียกใช้แบบ external css ดังตัวอย่างโค้ด <link href="../โฟลเด้อโปรเจ็ค/css/bootstrap.min.css" rel=
"stylesheet">
<!DOCTYPE html>
<html>
<head>
<link href="../code/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
<div class="mx-auto" style="width: 1200px;">
<div class="input-group mb-3">

<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</div>

<input type="text" class="form-control" placeholder="Recipient's username" aria-
label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>

<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>

<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
</div>
</form>
</body>
</html>
5. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML และวางลงในตารางช่องโค้ด นิสิตสามารถประยุกต์และเลือกใช้

CSS ในรูป Internal
หน้าจอ Login
โค้ด File name: login.html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 2px solid black;
height: 70px;
}
table.center {
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 40px;
color:rgb(65, 141, 14);
}
#search {
width: 10em; height: 2em;
}
.button {
height: 30px;
width: 100px;
background-color: #4CAF50;
border: none;
color: white;
}
</style>
</head>
<body>
<form name="login01" action="#" >
<table class="center">
<tr>
<th style="width:500px" colspan="2"><h1>LOGIN FORM</h1></th>
</tr>
<tr>
<td style="width:120px">Email:</td>
<td style="width:200px">
<input type="text" class="form-control" id="email" placeholder="Email" name="email" size="40"
style="height:30px;">
</td>
</tr>
<br>
<tr>
<td>Password:</td>
<td > <br>
<input type="password" class="form-control" id="pwd" placeholder="Password" name="pass"
size="40"
style="height:30px;">
</td>
</tr>
<tr>
<td></td>
<td><br><br><button type="submit" class="button">Submit</button><br>
</td>
</tr>
</table>
</form>
</html>
6. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML และวางลงในตารางช่องโค้ด นิสิตสามารถประยุกต์และเลือกใช้

CSS ในรูปแบบ Internal
หน้าจอ Member_information
โค้ด File name: member_information.html
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
border: 2px solid black;
height: 50px;
width:800px;
margin:100px auto;
}
table.center {
margin-left: auto;
margin-right: auto;
}
.button {
height: 40px;
width: 150px;
background-color: #ade4a2;
border: none;
color: rgb(15, 15, 15);
}
#t01 th {
background-color: rgb(82, 231, 36);
color: rgb(10, 10, 10);
.border {
border: 1px solid #080808;
}
.noborders td {
border:0;
}
</style>
</head>
<body>
<form name="logout01" action="/logout" method = "POST" >
<table class="center" id="t01">
<tbody class="border">
<tr>
<th style="width:500px;" colspan="2">หน้าจอสมาชิก</th>
</tr>
<tr class="noborders">
<td>ชื่อ-สกุล :</td>
<td>Login วัน-เวลาล่าสุด :</td>
</tr>
<td>รหัสสมาชิก :</td>
<td>Logout วัน-เวลาล่าสุด :</td>
</tr>
<td>ตาแหน่ง :</td>
<td>จานวนครั้งที่เข้าสู่ระบบ (ครั้ง) :</td>
</tr>
<td>เงินเดือน (บาท):</td>
<td></td>
</tr>
<td>ยอดขายทั้งหมด (บาท):</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Lab9 Ans

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab9 Ans

Uploaded by

Copyright:

Available Formats

User Interface Design and Development ปฏิบตั ิการที่ 9 CSS EP1

ปฏิบัติการที่ 9 CSS EP1

1.1 จากโค้ดโปรแกรมเป็นการเรียกใช้ CSS ประเภทใด …………………Inline……………….

2. จงแสดงผลลัพธ์จากโค้ด HTML ต่อไปนี้โดยให้นสิ ิตก็อปหน้าจอผลลัพธ์ลงในช่องแสดงผลลัพธ์ พร้อมตอบคาถาม

1.2 จากโค้ดโปรแกรมเป็นการเรียกใช้ CSS ประเภทใด ……………Internal………………………………….

3. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML โดยต้องเรียกใช้ style จากไฟล์ style.css

4. ให้นิสิตเรียกใช้อิลิเมนต์ต่างๆ ใน bootstrap อย่างน้อย 1 รายการ โดยมีขั้นตอนดังนี้

3. ทาการดาวโหลด bootstrap-5.0.2-dist.zip โดยภายในจะประกอบด้วยโฟลเด้อ css และ js

<div class="input-group mb-3">

<div class="input-group mb-3">

<label for="basic-url" class="form-label">Your vanity URL</label>

<div class="input-group mb-3">

<div class="input-group mb-3">

โค้ด File name: login.html

โค้ด File name: member_information.html

You might also like