สัปดาห์ที่ 2 : การจัดรูปแบบเว็บด้วย Style Sheet
สไตล์ชีต (Cascading Style Sheet หรือ CSS) 1. สไตล์ชีต คือ การกำหนดรูปแบบการแสดงผลให้กับแท็กต่าง ๆ ในหน้าเว็บ เช่น ในเอกสาร HTML ที่มีแท็ก <h1> ปรากฎในหลาย ๆ ที่ภายในเอกสาร เราสามารถเปลี่ยนแปลงรูปแบบตัวอักษรทั้งหมดได้ด้วยการกำหนดที่ Style Sheet 2. การใช้งานสไตล์ชีต ทำได้ 2 วิธี 1) กำหนดไว้ในไฟล์นามสกุล .css 2) ฝังลงในเอกสาร HTML 3. ส่วนประกอบของสไตล์ชีต ได้แก่ » Selector คือ แท็กที่เราต้องการจะเปลี่ยนสไตล์ให้มัน » Declaration คือ สไตล์ที่เราเปลี่ยนให้มัน
สไตล์ชีต (Cascading Style Sheet หรือ CSS) คือ การกำหนดรูปแบบการแสดงผลให้กับแท็กต่าง ๆ ในหน้าเว็บ พิจารณาโค๊ดต่อไปนี้
<div style="height:200px; width:50%;background-color: powderblue;"></div>
ผลลัพธ์ :
การแสดงผลแบบ Block และ Inline
» แท็ก (Tag) ในเอกสาร HTML จะมีค่าการแสดง 2 แบบ คือ Block และ Inline » Block จะเริ่มต้นด้วยการขึ้นต้นบรรทัดใหม่และสามารถแสดงผลได้เต็มความกว้างของบราวเซอร์ และมี top และ bottom margin (inline ไม่มี) เช่น แท็ก <div> <ol> <ul> <video> <h1-h6> <form> เป็นต้น » Inline จะอยู่ในบรรทัดเดียวกันไม่ขึ้นบรรทัดใหม่ เช่น แท็ก <span> <a> <b> <i> เป็นต้น
» การแสดงแบบ Inline (ในบรรทัดเดียวกัน) เช่น แท็ก span, a, b, i, u เป็นต้น
<b>สวัสดี</b>
<i>ชาวโลก</i>
<u>สบายดีนะ</u>ผลลัพธ์สวัสดี ชาวโลก สบายดีนะ
» การแสดงแบบ Block (ขึ้นต้นบรรทัดใหม่) เช่น แท็ก div , h1, h2, h3, h4, h5, h6 เป็นต้น<div>สวัสดี</div>
<h1>ชาวโลก</h1>
<h2>สบายดีนะ</h2>ผลลัพธ์
สวัสดี
ชาวโลก
สบายดีนะ
รหัสสี
ในการใช้รหัสสีสามารถกำหนดได้ทั้งชื่อสี และรหัสสี
การกำหนดความสูงคงที่และความกว้างเป็นเปอร์เซ็นต์
» การกำหนดความสูงเป็นค่าคงที่ จะทำให้กล่องมีค่าตามที่กำหนดไม่เปลี่ยนแปลงไปตามความกว้างของบราวเซอร์
» การกำหนดความกว้างเป็นเปอร์เซ็นต์ กล่องจะปรับขนาดตามความกว้างของบราวเซอร์ที่เปลี่ยนไป
<html>
<body>
<div style="height: 100px;
width: 500px;
background-color:SeaGreen ;"></div>
</body>
</html>
ผลลัพธ์ :
การกำหนด max-width
» ปัญหาของแท็ก <div> คือ เมื่อบราวเซอร์ย่อให้เล็กลงมากกว่าความกว้างของแท็ก div บราวเซอร์จะเพิ่มสกอร์บาร์ลงในหน้าเว็บเพจแก้ไขโดยใช้ max-width
» การใช้ max-width แทนจะช่วยปรับปรุงผลลัพธ์ในกรณีบราวเซอร์ถูกย่อให้เล็กลงมาก ๆ หรืออุปกรณ์แสดงผลมีขนาดเล็ก
<html>
<body>
<div style="max-width: 500px;
height: 100px;
background-color:Blue;"></div>
</body>
</html>
ผลลัพธ์ :
การกำหนดค่า padding ด้วย top right bottom และ left (ตัวเลข 4 ชุด)
» padding-top สำหรับกำหนดระยะด้านบนของ padding
» padding-right สำหรับกำหนดระยะด้านขวาของ padding
» padding-bottom สำหรับกำหนดระยะด้านล่างของ padding
» padding-left สำหรับกำหนดระยะด้านซ้ายของ padding
» จงเขียนโค๊ด HTML และ CSS ต่อไปนี้และบอกผลลัพธ์ของระยะ padding แต่ละตัว
<html>
<body>
<div style="border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;">พื้นหลัง:สีเทาสว่าง; ระยะ padding บน,ขวา,ล่าง,ซ้าย = 50, 30, 50, 80 พิกเซลตามลำดับ </div>
</body>
</html>
ผลลัพธ์ :
พื้นหลัง:สีเทาสว่าง; ระยะ padding บน,ขวา,ล่าง,ซ้าย = 50, 30, 50, 80 พิกเซลตามลำดับ
การกำหนดค่า padding ด้วย top , (left-right), และ buttom (ตัวเลข 3 ตัว)
การกำหนดค่าด้วยตัวเลข 3 ตัว หมายถึงการกำหนดระยะ padding ดังนี้
» ตัวเลขลำดับที่ 1 คือ ระยะด้านบน
» ตัวเลขลำดับที่ 2 คือ ระยะด้านซ้ายและขวา
» ตัวเลขลำดับที่ 3 คือ ระยะด้านล่าง
กำหนดระยะ padding ด้วยค่าตัวเลข 3 ค่า (บน,ขวา,ล่าง) ให้เขียนโค๊ด HTML และ CSS ต่อไปนี้และอธิบายผลลัพธ์ ?
<html>
<body>
<div style=" border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;">ขอบหนา 1 พิกเซลเส้นเต็มสีดำ, ระยะ padding บน,ขวา,ล่าง มีค่า 25, 50 และ 75พิกเซลตามลำดับ; สีพื้นหลังใช้สีฟ้าสว่าง</div>
</body>
</html>
ผลลัพธ์ :
ขอบหนา 1 พิกเซลเส้นเต็มสีดำ, ระยะ padding บน,ขวา,ล่าง มีค่า 25, 50 และ 75พิกเซลตามลำดับ; สีพื้นหลังใช้สีฟ้าสว่าง
ตัวอย่าง
» กำหนด padding:25px คือ ระยะ padding ด้านบน ขวา ล่าง และ ซ้ายมีความระยะห่างเท่ากับ 25 พิกเซล
» กำหนด box-sizing: เป็น border-box คือมีขอบ
» กำหนด background-color คือสีพื้น
<html>
<body>
<div style="width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;">นี่คือ div ที่มีความกว้าง 300 พิกเซลและมีระยะ padding ซ้าย,ขวา,บน,ล่าง เท่ากับ 25พิกเซล และกำหนด box-sizing เป็น border-box (กล่องมีขอบ) โดยให้พื้นหลังมีสี ฟ้าอ่อน
</div>
</body>
</html>
ผลลัพธ์ :
นี่คือ div ที่มีความกว้าง 300 พิกเซลและมีระยะ padding ซ้าย,ขวา,บน,ล่าง เท่ากับ 25พิกเซล และกำหนด box-sizing เป็น border-box (กล่องมีขอบ) โดยให้พื้นหลังมีสี ฟ้าอ่อน
การกำหนดความกว้างและความสูง
การกำหนดความกว้างได้แก่
» height คือ กำหนดความสูง
» max-height คือ กำหนดความสูงสูงสุด
» max-width คือ กำหนดความกว้างมากสุด
» min-height คือ กำหนดความสูงน้อยสุด
» min-width คือ กำหนดความกว้างน้อยสุด
» width คือ กำหนดความกว้าง
<html>
<body>
<div style="height: 200px;
width: 50%;
background-color: Tomato;"></div>
</body>
</html>
ผลลัพธ์ :
การกำหนดพื้นหลังประกอบด้วย background / attachment color image position repeat
» background คือ กำหนดพื้นหลัง
» background-attachment คือ ภาพพื้นหลังให้คงที่
» background-color คือ สีพื้นหลัง
» background-image คือ ภาพพื้นหลัง
» background-position คือ ตำแหน่งเริ่มต้นของภาพพื้นหลัง
» background-repeat คือ กำหนดให้พื้นหลังเรียงวนซ้ำ ๆ
การใส่สีพื้นหลัง (background-color) โดยเขียนโค๊ด HTML และ Style Sheet ต่อไปนี้ จากนั้น อธิบายผลลัพธ์ ?
<html>
<body style="color:white;">
<h1 style="background-color:green;"> นี่คือ header1 </h1>
<div style="background-color:blue;">
นี่คือ div
<p style="background-color:black;">นี่คือ p อยู่ภายใน div </p>
นี่คือ div
</div>
</body>
</html>
ผลลัพธ์ :
นี่คือ header1
นี่คือ div
นี่คือ p อยู่ภายใน div
นี่คือ div
การกำหนดพื้นหลังประกอบด้วย background-image
» background-image คือ ภาพพื้นหลัง
<html>
<body style="background-image:url(https://www.w3schools.com/css/paper.gif);">
<h1>สวัสดีชาวโลก !</h1>
<p>นี่คือเอกสารที่มีภาพเป็นพื้นหลัง!</p>
</body>
</html>
ผลลัพธ์ :
สวัสดีชาวโลก !
นี่คือเอกสารที่มีภาพเป็นพื้นหลัง!
การกำหนดพื้นหลังประกอบด้วย background-image และ repeat
» background-image คือ ภาพพื้นหลัง
» background-repeat คือ กำหนดให้พื้นหลังเรียงวนซ้ำ ๆ
<html>
<body style="background-image: url('https://www.w3schools.com/css/gradient_bg.png');
background-repeat: repeat-x;">
<h1>การแสดงภาพซ้ำแนวนอน</h1>
<p>นี่คือเอกสารที่มีภาพพื้นหลังทำซ้ำไปในแนวนอน</p>
</body>
</html>
ผลลัพธ์ :
การแสดงภาพซ้ำแนวนอน
นี่คือเอกสารที่มีภาพพื้นหลังทำซ้ำไปในแนวนอน
การกำหนดพื้นหลังประกอบด้วย background-image และ no-repeat
» background-image คือ ภาพพื้นหลัง
» background-repeat คือ กำหนดให้พื้นหลังเรียงวนซ้ำ ๆ หากไม่ต้องการให้ภาพวนซ้ำให้ใส่ค่า background-repeat: no-repeat;
<html>
<body style="background-image: url('https://www.w3schools.com/css/img_tree.png');
background-repeat: no-repeat;">
<h1>การกำหนดตำแหน่งภาพพื้นหลัง!</h1>
<p>ภาพพื้นหลังจาก เว็บ w3schools.com</p>
<p>ภาพพื้นหลังแสดงเพียงครั้งเดียวด้วยค่า "no-repeat" </p>
</body>
</html>ผลลัพธ์ :
การกำหนดตำแหน่งภาพพื้นหลัง!
ภาพพื้นหลังจาก เว็บ w3schools.com
ภาพพื้นหลังแสดงเพียงครั้งเดียวด้วยค่า "no-repeat"
การกำหนดพื้นหลังด้วย background-position
» background-image คือ ภาพพื้นหลัง
» background-position คือ ตำแหน่งของพื้นหลัง เช่น right top นำภาพไว้ด้านบนขวา เป็นต้น
<html>
<body style='background-image: url("https://www.w3schools.com/css/img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;'>
<h1>การกำหนดตำแหน่งพื้นหลังชิดขวาและชิดด้านบน!</h1>
</body>
</html>
ผลลัพธ์ :
การกำหนดตำแหน่งพื้นหลังชิดขวาและชิดด้านบน!
การกำหนดพื้นหลังประกอบด้วย background และกำหนดค่าหลายค่าพร้อมกัน
» background สามารถกำหนดสี ไฟล์ภาพ การวนซ้ำ ตำแหน่ง และระยะขอบได้พร้อมกันทีเดียว ดังนี้
<html>
<body style='background: #ffffff url("https://www.w3schools.com/css/img_tree.png") no-repeat right top;margin-right: 200px;'>
<h1>Hello World!</h1>
</body>
</html>
ผลลัพธ์ :
Hello World!
การกำหนดขอบด้วย properties: border-style
1) none (ไม่มีกรอบ)
2) solid (ขอบเส้นเต็ม)
3) double (ขอบคู่)
4) dotted (ขอบไข่ปลา)
5) dashed (ขอบจุดประ)
6) groove (ขอบมีเงาด้านล่าง)
7) inset (ขอบมีเงาดำด้านบนซ้าย)
8) outset (ขอบมีเงาดำด้านล่างขวา)
การกำหนดขอบด้วย CSS ให้เขียนโค๊ด HTML และ CSS ต่อไปนี้จากนั้นอธิบายผลลัพธ์ ?
<html>
<head>
<body>
<p style="border-style: dotted;">A dotted border.</p>
<p style="border-style: dashed;">A dashed border.</p>
<p style="border-style: solid;">A solid border.</p>
<p style="border-style: double;">A double border.</p>
<p style="border-style: groove;">A groove border.</p>
<p style="border-style: inset;">An inset border.</p>
<p style="border-style: outset;">An outset border.</p>
<p style="border-style: none;">No border.</p>
<p style="border-style: hidden;">A hidden border.</p>
<p style="border-style: dotted dashed solid double;">A mixed border.</p>
</body>
</html>
ผลลัพธ์ :
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
An inset border.
An outset border.
No border.
A mixed border.
การกำหนดความกว้างด้วย properties: border-width
» border-width กำหนดค่าได้ดังนี้ medium , thick, และกำหนดด้วยตัวเลขที่ต้องการ ดังตัวอย่างต่อไปนี้
การกำหนดขอบด้วย CSS ให้เขียนโค๊ด HTML และ CSS ต่อไปนี้จากนั้นอธิบายผลลัพธ์ ?
<html>
<body>
<p style="border-style: solid;border-width: 5px;">Some text.</p>
<p style="border-style: solid;border-width: medium;">Some text.</p>
<p style="border-style: dotted;border-width: 2px;">Some text.</p>
<p style="border-style: dotted;border-width: thick;">Some text.</p>
<p style="border-style: double;border-width: 15px;">Some text.</p>
<p style="border-style: double;border-width: thick;">Some text.</p>
<p style="border-style: solid;border-width: 2px 10px 4px 20px;">Some text.</p>
</body>
</html>
ผลลัพธ์ :
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
การกำหนดสีให้กับขอบด้วย properties: border-color
» ตัวเลข 1 ตัว เป็นการกำหนดสีทั้ง 4 ด้าน บน ขวา ล่าง ซ้าย เป็นสีเดียวกัน
» ตัวเลข 4 ตัว เป็นการกำหนดสีทั้ง 4 แยกสีเป็นอิสระต่อกัน เช่น ด้าน บน ขวา ล่าง ซ้าย ดังตัวอย่างต่อไปนี้
การกำหนดสีขอบด้วย CSS ให้เขียนโค๊ด HTML และ CSS ต่อไปนี้จากนั้นอธิบายผลลัพธ์ ?
<html>
<body>
<p style="border-style: solid;border-color: red;">A solid red border</p>
<p style="border-style: solid;border-color: green;">A solid green border</p>
<p style=" border-style: solid;border-color: red green blue yellow;">A solid multicolor border</p>
<p style="border-top-style: dotted;border-right-style: solid;border-bottom-style: dotted;border-left-style: solid;">ขอบบน=จุด, ขอบขวา = เส้นตรง, ขอบล่าง =จุด , ขอบซ้าย = เส้นตรง</p>
<p style="border-style: dotted solid;">ขอบซ้ายขวา=เส้นตรง, ขอบบนล่าง=เส้นประ</p>
<h2 style="border: 5px solid red;">ขอบหนา 5พิกเซล, เส้นเต็ม, สีแดง</h2>
<p style="border-left: 6px solid red;background-color: lightgrey;">ขอบซ้าย หนา 6พิกเซล เส้นเต็ม สีแดง สีพื้นเทาสว่าง</p>
</body>
</html>
ผลลัพธ์ :
รหัสสี การกำหนดความสูงคงที่และความกว้างเป็นเปอร์เซ็นต์ การกำหนด max-width การกำหนดค่า padding ด้วย top right bottom และ left (ตัวเลข 4 ชุด)พื้นหลัง:สีเทาสว่าง; ระยะ padding บน,ขวา,ล่าง,ซ้าย = 50, 30, 50, 80 พิกเซลตามลำดับ
ขอบหนา 1 พิกเซลเส้นเต็มสีดำ, ระยะ padding บน,ขวา,ล่าง มีค่า 25, 50 และ 75พิกเซลตามลำดับ; สีพื้นหลังใช้สีฟ้าสว่าง
ตัวอย่างนี่คือ div ที่มีความกว้าง 300 พิกเซลและมีระยะ padding ซ้าย,ขวา,บน,ล่าง เท่ากับ 25พิกเซล และกำหนด box-sizing เป็น border-box (กล่องมีขอบ) โดยให้พื้นหลังมีสี ฟ้าอ่อน
การกำหนดความกว้างและความสูง การกำหนดพื้นหลังประกอบด้วย background / attachment color image position repeatนี่คือ header1
นี่คือ div
นี่คือ p อยู่ภายใน div
นี่คือ divสวัสดีชาวโลก !
นี่คือเอกสารที่มีภาพเป็นพื้นหลัง!
การแสดงภาพซ้ำแนวนอน
นี่คือเอกสารที่มีภาพพื้นหลังทำซ้ำไปในแนวนอน
การกำหนดตำแหน่งภาพพื้นหลัง!
ภาพพื้นหลังจาก เว็บ w3schools.com
ภาพพื้นหลังแสดงเพียงครั้งเดียวด้วยค่า "no-repeat"
การกำหนดตำแหน่งพื้นหลังชิดขวาและชิดด้านบน!
Hello World!
การกำหนดขอบด้วย properties: border-style A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
An inset border.
An outset border.
No border.
A mixed border.
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
A solid red border
A solid green border
A solid multicolor border
ขอบบน=จุด, ขอบขวา = เส้นตรง, ขอบล่าง =จุด , ขอบซ้าย = เส้นตรง
ขอบซ้ายขวา=เส้นตรง, ขอบบนล่าง=เส้นประ
ขอบหนา 5พิกเซล, เส้นเต็ม, สีแดง
ขอบซ้าย หนา 6พิกเซล เส้นเต็ม สีแดง สีพื้นเทาสว่าง
การกำหนดความมนของขอบด้วย properties: border-radius
» border-radius คือ รัศมีของส่วนโค้งที่มุมของบล็อก แสดงดังนี้
กำหนดสไตล์และขอบมน ให้เขียนโค๊ด HTML และ CSS จากนั้นอธิบายผลลัพธ์ ? <html> <body> <p style="border: 2px solid red;">ขอบหนา 2พิกเซล, เส้นเต็มสีแดง</p> <p style="border: 2px solid red;border-radius: 5px;">ขอบหนา 2พิกเซล, เส้นเต็มสีแดง, ตีโค้ง 5พิกเซล</p> <p style="border: 2px solid red;border-radius: 8px;">ขอบหนา 2พิกเซล, เส้นเต็มสีแดง, ตีโค้ง 8พิกเซล</p> <p style="border: 2px solid red;border-radius: 12px;">ขอบหนา 2พิกเซล, เส้นเต็มสีแดง, ตีโค้ง 12พิกเซล</p> </body> </html>
ผลลัพธ์ :
ขอบหนา 2พิกเซล, เส้นเต็มสีแดง
ขอบหนา 2พิกเซล, เส้นเต็มสีแดง, ตีโค้ง 5พิกเซล
ขอบหนา 2พิกเซล, เส้นเต็มสีแดง, ตีโค้ง 8พิกเซล
ขอบหนา 2พิกเซล, เส้นเต็มสีแดง, ตีโค้ง 12พิกเซล
การกำหนด margin ด้วยตัวเลข 4 ตัว (ขอบบน, ขอบขวา, ขอบล่าง, ขอบซ้าย)
» กำหนด margin ด้วยตัวเลข 4 ตัว ได้แก่ ระยะด้านบน ระยะด้านขวา ระยะด้านล่าง และระยะด้านซ้าย
<html> <body> <div style="border: 1px solid black; margin: 25px 50px 75px 100px; background-color: lightblue;">ขอบหนา 1 พิกเซลเส้นทึบสีดำ, ขอบบน 25พิกเซล ขอบขวา 50พิกเซล, ขอบล่าง 75พิกเซล และขอบซ้าย 100 พิกเซล; พื้นหลังสีเทาสว่าง </div> </body> </html>
ผลลัพธ์ :
ขอบหนา 1 พิกเซลเส้นทึบสีดำ, ขอบบน 25พิกเซล ขอบขวา 50พิกเซล, ขอบล่าง 75พิกเซล และขอบซ้าย 100 พิกเซล; พื้นหลังสีเทาสว่าง
การกำหนด margin ด้วยตัวเลข 3 ตัว (ขอบบน, ขอบซ้ายขวา, ขอบล่าง)
กำหนด margin ด้วยตัวเลข 3 ตัว » ตัวเลขที่ 1 กำหนดระยะด้านบน » ตัวเลขที่ 2 กำหนดระยะด้านซ้ายและขวา » ตัวเลขที่ 3 กำหนดระยะด้านล่าง
กำหนด margin แบบสั้น กำหนดตัวเลข 3 ค่า กำหนดดังนี้ margin: ระยะด้านบน <html> <body> <div style="border: 1px solid black; margin: 25px 50px 75px; background-color: lightblue;"> ขอบหนา 1พิกเซลเส้นเต็มขอบสีดำ ระยะด้านบน 25พิกเซล, ระยะด้านขวา 50พิกเซล, ระยะด้านล่าง 75พิกเซล; สีพื้นหลังสีเทาสว่าง</div> </body> </html>
ผลลัพธ์ :
ขอบหนา 1พิกเซลเส้นเต็มขอบสีดำ ระยะด้านบน 25พิกเซล, ระยะด้านขวา 50พิกเซล, ระยะด้านล่าง 75พิกเซล; สีพื้นหลังสีเทาสว่าง
การกำหนด margin ด้วยตัวเลข 2 ตัว (ขอบบน, ขอบล่าง)
กำหนด margin ด้วยตัวเลข 2 ตัว » ตัวเลขที่ 1 กำหนดระยะด้านบนและล่าง » ตัวเลขที่ 2 กำหนดระยะด้านซ้ายและขวา
<html> <body> <div style="border: 1px solid black; margin: 25px 50px; background-color: lightblue;">ขอบหนา 1พิกเซล เส้นเต็มสีดำ; ขอบด้านล่าง 25พิกเซลและขอบด้านซ้าย 50พิกเซล</div> </body> </html>
ผลลัพธ์ :
ขอบหนา 1พิกเซล เส้นเต็มสีดำ; ขอบด้านล่าง 25พิกเซลและขอบด้านซ้าย 50พิกเซล
การกำหนด margin ด้วยตัวเลข 1 ตัว (ขอบบน ขวา ล่าง ซ้ายเท่ากันทั้งหมด)
กำหนด margin ด้วยตัวเลข 1 ตัว จะมีระยะด้านบน ขวา ล่าง และซ้ายเท่ากันทุกด้าน
<html> <body> <div style="border: 1px solid black; margin: 25px; background-color: lightblue;">ขอบหนา 1 พิกเซล เส้นเต็มสีดำ, ระยะซ้ยา บน ขวา และล่างเท่ากัน คือ 25พิกเซล; สีพื้นเทาสว่าง</div> </body> </html>
ผลลัพธ์ :
ขอบหนา 1 พิกเซล เส้นเต็มสีดำ, ระยะซ้ยา บน ขวา และล่างเท่ากัน คือ 25พิกเซล; สีพื้นเทาสว่าง
การกำหนด margin ด้วย auto
กำหนด margin ด้วย auto เป็นการจัดให้บล็อกอยู่กึ่งกลางหน้าจอ ดังนี้
<html> <body> <div style=" width:300px; margin: auto; border: 1px solid red;"> ความกว้าง 300พิกเซล, ขอบจัดกึ่งกลางอัตโนมัติ, ขอบหนา 1 พิกเซลเส้นเต็มสีดำ </div> </body> </html>
ผลลัพธ์ :
ความกว้าง 300พิกเซล, ขอบจัดกึ่งกลางอัตโนมัติ, ขอบหนา 1 พิกเซลเส้นเต็มสีดำ
การขอใช้งานฟอนต์ Athiti
» ฟอนต์อทิติ (Athiti) เป็นหนึ่งในหลายฟอนต์ที่ให้บริการโดยบริษัทกูเกิ้ล » ในการขอใช้ฟอนต์ให้ใส่แท็ก link ลงในส่วนแท็ก head ดังนี้ <head><link href="https://fonts.googleapis.com/css?family=Athiti" rel="stylesheet"></head> » การกำหนดฟอนต์ ให้กำหนดค่าด้วย font-family ดังตัวอย่างต่อไปนี้
<html> <head><link href="https://fonts.googleapis.com/css?family=Athiti" rel="stylesheet"> </head> <body> <h1>สวัสดีชาวโลก</h1> <h1 style="font-family:'Athiti';font-size:36px">สวัสดีชาวไทย</h1> <h1 style="font-family:'Athiti';font-size:46px;color:RoyalBlue;text-align:right;">นี่คือฟอนต์ อทิติ</h1> <h1 style="font-family:'Athiti';font-size:46px;color:Navy;text-align:center;">นี่คือฟอนต์ อทิติ</h1> </body></html>
ผลลัพธ์
สวัสดีชาวโลก
สวัสดีชาวไทย
นี่คือฟอนต์ อทิติ
นี่คือฟอนต์ อทิติ
การใช้งานฟอนต์
การใช้งานฟอนต์ในเอกสาร HTML มีอยู่ 2 ขั้นตอน 1. ประกาศขอใช้ฟอนต์ในส่วนของแท็ก <head> 2. เรียกใช้ด้วย font-family พิจารณาตัวอย่างต่อไปนี้
<html> <head> <link href="https://fonts.googleapis.com/css?family=Athiti" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Itim" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Chonburi" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Trirong" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Mitr" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Pridi" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Maitree" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Pattaya" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Sriracha" rel="stylesheet"> </head> <body> <div style=" font-family:Athiti; font-size:28px; background-color: lightgrey; width: 500; border: 30px dotted green; padding: 25px; margin: 10px;"> <span style="font-family:Athiti;">นี่คือฟอนต์อทิติ</span> <span style="font-family:Itim;">นี่คือฟอนต์ไอติม</span> <span style="font-family:Chonburi;">นี่คือฟอนต์ชลบุรี</span> <span style="font-family:Kanit;">นี่คือฟอนต์คณิต</span> <span style="font-family:Prompt;">นี่คือฟอนต์พร้อม</span> <span style="font-family:Trirong;">นี่คือฟอนต์ไตรรงค์</span> <span style="font-family:Taviraj;">นี่คือฟอนทวิราช</span> <span style="font-family:Mitr;">นี่คือฟอนต์มิตร</span> <span style="font-family:Pridi;">นี่คือฟอนต์ปรีดี</span> <span style="font-family:Maitree;">นี่คือฟอนต์ไมตรี</span> <span style="font-family:Pattaya;">นี่คือฟอนต์พัทยา</span> <span style="font-family:Sriracha;">นี่คือฟอนต์ศรีราชา</span> </div> </body> </html>
ผลลัพธ์ :
นี่คือฟอนต์อทิติ
นี่คือฟอนต์ไอติม
นี่คือฟอนต์ชลบุรี
นี่คือฟอนต์คณิต
นี่คือฟอนต์พร้อม
นี่คือฟอนต์ไตรรงค์
นี่คือฟอนทวิราช
นี่คือฟอนต์มิตร
นี่คือฟอนต์ปรีดี
นี่คือฟอนต์ไมตรี
นี่คือฟอนต์พัทยา
นี่คือฟอนต์ศรีราชา
การกำหนดการลอย Float และ Clear
การกำหนดการลอย ได้แก่ » float:none คือ จะแท็กไม่มีการลอย (ค่าปกติ) » float:left คือ ลอยด้านซ้าย » float:right คือ ลอยด้านขวา
การกำหนดเคลียส์ค่าการลอย ได้แก่ » none คือ จะแท็กไม่มีการลอย (ค่าปกติ) » left คือ เคลียส์ด้านซ้าย » right คือ เคลียส์ด้านขวา » both คือ เคลียส์ทั้งด้านซ้ายและขวา
<html><body> <div> <span><img style="padding:0 10px 0 0;float:left;" width="20%" src="https://dsdi.msu.ac.th/articles/web-design/img/sudsakon-stamp.jpg">แล้วสอนว่าอย่าไว้ใจมนุษย์ มันแสนสุดลึกล้ำเหลือกำหนด ถึงเถาวัลย์พันเกี่ยวที่เลี้ยวลด ก็ไม่คดเหมือนหนึ่งในน้ำใจคน มนุษย์นี่ที่รักอยู่สองสถาน บิดามารดารักมักเป็นผล ที่พึ่งหนึ่งพึ่งได้แต่กายตน เกิดเป็นคนคิดเห็นจึงเจรจา แม้นใครรักรักมั่งชังชังตอบ ให้รอบคอบคิดอ่านนะหลานหนา รู้สิ่งไรไม่สู้รู้วิชา รู้รักษาตัวรอดเป็นยอดดี จงคิดตามไปเอาไม้เท้าเถิด จะประเสริฐสมรักเป็นศักดิ์ศรี พอเสร็จคำสำแดงแจ้งคดี รูปโยคีหายวับไปกับตา</span> </div> <div style="clear:both;"></div><br><br> <div> <span><img style="padding:0 0 0 10px;float:right;" width="20%" src="https://dsdi.msu.ac.th/articles/web-design/img/sudsakon-stamp.jpg">แล้วสอนว่าอย่าไว้ใจมนุษย์ มันแสนสุดลึกล้ำเหลือกำหนด ถึงเถาวัลย์พันเกี่ยวที่เลี้ยวลด ก็ไม่คดเหมือนหนึ่งในน้ำใจคน มนุษย์นี่ที่รักอยู่สองสถาน บิดามารดารักมักเป็นผล ที่พึ่งหนึ่งพึ่งได้แต่กายตน เกิดเป็นคนคิดเห็นจึงเจรจา แม้นใครรักรักมั่งชังชังตอบ ให้รอบคอบคิดอ่านนะหลานหนา รู้สิ่งไรไม่สู้รู้วิชา รู้รักษาตัวรอดเป็นยอดดี จงคิดตามไปเอาไม้เท้าเถิด จะประเสริฐสมรักเป็นศักดิ์ศรี พอเสร็จคำสำแดงแจ้งคดี รูปโยคีหายวับไปกับตา</span> </div> <div style="clear:both;"></div><br><br> </body></html>
ผลลัพธ์ :
แล้วสอนว่าอย่าไว้ใจมนุษย์ มันแสนสุดลึกล้ำเหลือกำหนด ถึงเถาวัลย์พันเกี่ยวที่เลี้ยวลด ก็ไม่คดเหมือนหนึ่งในน้ำใจคน มนุษย์นี่ที่รักอยู่สองสถาน บิดามารดารักมักเป็นผล ที่พึ่งหนึ่งพึ่งได้แต่กายตน เกิดเป็นคนคิดเห็นจึงเจรจา แม้นใครรักรักมั่งชังชังตอบ ให้รอบคอบคิดอ่านนะหลานหนา รู้สิ่งไรไม่สู้รู้วิชา รู้รักษาตัวรอดเป็นยอดดี จงคิดตามไปเอาไม้เท้าเถิด จะประเสริฐสมรักเป็นศักดิ์ศรี พอเสร็จคำสำแดงแจ้งคดี รูปโยคีหายวับไปกับตา
แล้วสอนว่าอย่าไว้ใจมนุษย์ มันแสนสุดลึกล้ำเหลือกำหนด ถึงเถาวัลย์พันเกี่ยวที่เลี้ยวลด ก็ไม่คดเหมือนหนึ่งในน้ำใจคน มนุษย์นี่ที่รักอยู่สองสถาน บิดามารดารักมักเป็นผล ที่พึ่งหนึ่งพึ่งได้แต่กายตน เกิดเป็นคนคิดเห็นจึงเจรจา แม้นใครรักรักมั่งชังชังตอบ ให้รอบคอบคิดอ่านนะหลานหนา รู้สิ่งไรไม่สู้รู้วิชา รู้รักษาตัวรอดเป็นยอดดี จงคิดตามไปเอาไม้เท้าเถิด จะประเสริฐสมรักเป็นศักดิ์ศรี พอเสร็จคำสำแดงแจ้งคดี รูปโยคีหายวับไปกับตา
คำอธิบาย: ตัวอย่างด้านบนมีแท็ก div จำนวน 4 ชุด 1. div ด้านบนสุดจะมี span และ img อยู่ภายใน โดยที่ img จะกำหนดระยะ padding มีค่า 0 10 0 0 (ระยะ padding ด้านบน 0 ด้านขวา 10 ด้านล่าง 0 และด้านซ้าย 0 ตามลำดับ) การเลื่อนระยะ padding ด้านขวาเท่ากับ 10 เนื่องจากต้องการให้ข้อความที่อยู่ภายใน span ห่างออกจากตัวรุป ไม่เชนนั้นจะชิดกันจนเกินไป นอกจากนั้นกำหนด float:left คือ ให้ภาพนี้ลอยอยู่ด้านซ้ายมือของข้อความในแท็ก span 2. div ตัวที่สอง ใช้เคลียส์การลอย 3. div ตัวที่สาม เป็นการสร้างบล็อกอีกอันหนึ่งเพื่อจะนำภาพสแตมป์ไปไว้ด้านขวา ดังนั้น จึงกำหนด float:right และระยะห่าง padding กำหนดเป็น 0 0 0 10 (ด้านบน ขวา ล่าง และซ้าย ตามลำดับ) เพื่อให้ระยะตัวอักษรในแท็ก span ไม่ชิดกับภาพจนเกินไป 4. div ตัวสุดท้าย ใช้เคลียส์การลอย
ตัวอย่างการสร้างบล็อกและใส่ภาพและข้อความและใช้ฟอนต์ต่าง ๆ
» เมื่อนิสิตศึกษามาจนถึงหัวข้อนี้ นิสิตจะรู้จัก 1) tag 2) attribute และ value 3) content ของแท็ก 4) การขอใช้งานฟอนต์และไลบรารี่โดยประกาศในแท็ก head » ตัวอย่างต่อไปนี้ เป็นการใช้งานฟอนต์และสร้างบล็อกโดยกำหนดขอบ รูปแบบของขอบ สี พื้นหลัง และการลอยตัวของแท็ก
<html> <head> <link href="https://fonts.googleapis.com/css?family=Athiti" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Itim" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Chonburi" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Trirong" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Mitr" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Pridi" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Maitree" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Pattaya" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Sriracha" rel="stylesheet"> </head> <body> <div style=" font-family:Athiti; font-size:28px; background-color: lightgrey; width: 500; border: 30px dotted green; padding: 25px; margin: 10px;"> <p style="font-family:'Athiti';font-size:16px;"><img src="articles/web-design/img/sudsakon-stamp.jpg" style="width:170px;height:170px;margin-right:15px;float:left;"> แล้วสอนว่าอย่าไว้ใจมนุษย์ มันแสนสุดลึกล้ำเหลือกำหนด ถึงเถาวัลย์พันเกี่ยวที่เลี้ยวลด ก็ไม่คดเหมือนหนึ่งในน้ำใจคน มนุษย์นี่ที่รักอยู่สองสถาน บิดามารดารักมักเป็นผล ที่พึ่งหนึ่งพึ่งได้แต่กายตน เกิดเป็นคนคิดเห็นจึงเจรจา แม้นใครรักรักมั่งชังชังตอบ ให้รอบคอบคิดอ่านนะหลานหนา รู้สิ่งไรไม่สู้รู้วิชา รู้รักษาตัวรอดเป็นยอดดี จงคิดตามไปเอาไม้เท้าเถิด จะประเสริฐสมรักเป็นศักดิ์ศรี พอเสร็จคำสำแดงแจ้งคดี รูปโยคีหายวับไปกับตา</p> <span style="font-family:Athiti;">นี่คือฟอนต์อทิติ</span> <span style="font-family:Itim;">นี่คือฟอนต์ไอติม</span> <span style="font-family:Chonburi;">นี่คือฟอนต์ชลบุรี</span> <span style="font-family:Kanit;">นี่คือฟอนต์คณิต</span> <span style="font-family:Prompt;">นี่คือฟอนต์พร้อม</span> <span style="font-family:Trirong;">นี่คือฟอนต์ไตรรงค์</span> <span style="font-family:Taviraj;">นี่คือฟอนทวิราช</span> <span style="font-family:Mitr;">นี่คือฟอนต์มิตร</span> <span style="font-family:Pridi;">นี่คือฟอนต์ปรีดี</span> <span style="font-family:Maitree;">นี่คือฟอนต์ไมตรี</span> <span style="font-family:Pattaya;">นี่คือฟอนต์พัทยา</span> <span style="font-family:Sriracha;">นี่คือฟอนต์ศรีราชา</span> </div> </body></html>
ผลลัพธ์ :
แล้วสอนว่าอย่าไว้ใจมนุษย์ มันแสนสุดลึกล้ำเหลือกำหนด
ถึงเถาวัลย์พันเกี่ยวที่เลี้ยวลด ก็ไม่คดเหมือนหนึ่งในน้ำใจคน
มนุษย์นี่ที่รักอยู่สองสถาน บิดามารดารักมักเป็นผล
ที่พึ่งหนึ่งพึ่งได้แต่กายตน เกิดเป็นคนคิดเห็นจึงเจรจา
แม้นใครรักรักมั่งชังชังตอบ ให้รอบคอบคิดอ่านนะหลานหนา
รู้สิ่งไรไม่สู้รู้วิชา รู้รักษาตัวรอดเป็นยอดดี
จงคิดตามไปเอาไม้เท้าเถิด จะประเสริฐสมรักเป็นศักดิ์ศรี
พอเสร็จคำสำแดงแจ้งคดี รูปโยคีหายวับไปกับตา
กิจกรรม 1: ให้เขียนสไตล์ชีตเพื่อสร้างธงชาติไทย
กิจกรรม 2: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้
ปล. ภาพพื้นหลัง https://www.w3schools.com/css/img_flwr.gif
กิจกรรม 3: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้
ชื่อเล่น รหัสนิสิต ชื่อ-สกุล มือถือ ....!
กิจกรรม 4: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้
บทกลอนสุนทรภู่
เป็นสาวแซ่แร่รวยสวยสะอาด ก็หมายมาดเหมือนมณีอันมีค่า แม้นแตกร้าวรานร่อยถอยราคา จะพลอยพาหอมหายจากกายนาง อันตัวต่ำแล้วอย่าทำให้กายสูง ดูเยี่ยงยูงแววยังมีที่วงหาง ค่อยเสงี่ยมเจียมใจจะไว้วาง ให้ต้องอย่างกริยาเป็นนารี ฯ
กิจกรรม 5: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้
บทกลอนสุนทรภู่
เป็นสาวแซ่แร่รวยสวยสะอาด ก็หมายมาดเหมือนมณีอันมีค่า แม้นแตกร้าวรานร่อยถอยราคา จะพลอยพาหอมหายจากกายนาง อันตัวต่ำแล้วอย่าทำให้กายสูง ดูเยี่ยงยูงแววยังมีที่วงหาง ค่อยเสงี่ยมเจียมใจจะไว้วาง ให้ต้องอย่างกริยาเป็นนารี ฯ
กิจกรรม 6: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้
» สี่เหลี่ยมมุมมน » ความกว้าง 50% » ไม่มีเส้นขอบ » พื้นหลังระบุสีไม่ซ้ำกับตัวอย่าง » ฟอนต์ 1 ใน 13 ฟอนต์จากกูเกิ้ล
<ชื่อ-สกุล>
<สถานบันการศึกษา>
<รหัสนิสิต>
<สถานบันการศึกษา>
<รหัสนิสิต>
กิจกรรม 7: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้
» กำหนดกรอบด้วยภาพ » กำหนดสีพื้นหลังของกรอบ » ใช้ฟอนต์ 1 ใน 13 google fonts
แล้วสอนว่าอย่าไว้ใจมนุษย์ มันแสนสุดลึกล้ำเหลือกำหนด ถึงเถาวัลย์พันเกี่ยวที่เลี้ยวลด ก็ไม่คดเหมือนหนึ่งในน้ำใจคน มนุษย์นี่ที่รักอยู่สองสถาน บิดามารดารักมักเป็นผล ที่พึ่งหนึ่งพึ่งได้แต่กายตน เกิดเป็นคนคิดเห็นจึงเจรจา แม้นใครรักรักมั่งชังชังตอบ ให้รอบคอบคิดอ่านนะหลานหนา รู้สิ่งไรไม่สู้รู้วิชา รู้รักษาตัวรอดเป็นยอดดี จงคิดตามไปเอาไม้เท้าเถิด จะประเสริฐสมรักเป็นศักดิ์ศรี พอเสร็จคำสำแดงแจ้งคดี รูปโยคีหายวับไปกับตา
แล้วสอนว่าอย่าไว้ใจมนุษย์ มันแสนสุดลึกล้ำเหลือกำหนด ถึงเถาวัลย์พันเกี่ยวที่เลี้ยวลด ก็ไม่คดเหมือนหนึ่งในน้ำใจคน มนุษย์นี่ที่รักอยู่สองสถาน บิดามารดารักมักเป็นผล ที่พึ่งหนึ่งพึ่งได้แต่กายตน เกิดเป็นคนคิดเห็นจึงเจรจา แม้นใครรักรักมั่งชังชังตอบ ให้รอบคอบคิดอ่านนะหลานหนา รู้สิ่งไรไม่สู้รู้วิชา รู้รักษาตัวรอดเป็นยอดดี จงคิดตามไปเอาไม้เท้าเถิด จะประเสริฐสมรักเป็นศักดิ์ศรี พอเสร็จคำสำแดงแจ้งคดี รูปโยคีหายวับไปกับตา
มอบหมายงาน: ให้นิสิตสร้างเว็บคอนเทนต์โดยเลือกเนื้อหาคนละ 1 เรื่อง
» เมนูด้านซ้าย ให้ใส่หัวข้อคอนเทนต์ » เมนูด้านบนและด้านล่าง ตลอดจนสีให้ปรับแก้ให้สวยงาม » ในแต่ละหัวข้อ ให้ใส่ไอคอนหรือภาพเพื่อความสวยงาม » คอนเทนต์ของแต่ละหัวข้อสามารถคัดลอกมาจากเว็บหรือจาก chatgpt ได้ » ดาวน์โหลดเทมเพลตพื้นฐาน ที่นี่
แหล่งข้อมูลเพิ่มเติม:
» https://www.w3schools.com/ » ดาวน์โหลดเทมเพลตพื้นฐาน ที่นี่