สัปดาห์ที่ 3 : การจัดรูปแบบเว็บด้วย Style Sheetสไตล์ชีต (Cascading Style Sheet หรือ CSS) 1. สไตล์ชีต คือ การกำหนดรูปแบบการแสดงผลให้กับแท็กต่าง ๆ ในหน้าเว็บ เช่น ในเอกสาร HTML ที่มีแท็ก <h2> ปรากฎในหลาย ๆ ที่ภายในเอกสาร เราสามารถเปลี่ยนแปลงรูปแบบตัวอักษรทั้งหมดได้ด้วยการกำหนดที่ 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> Show
ผลลัพธ์ : การแสดงผลแบบ Block และ Inline» ทุก ๆ แท็กของเอกสาร HTML จะมีค่าการแสดง 2 แบบ คือ Block และ Inline » Block จะเริ่มต้นด้วยการขึ้นต้นบรรทัดใหม่และสามารถแสดงผลได้เต็มความกว้างของบราวเซอร์ และมี top และ bottom margin (inline ไม่มี) เช่น แท็ก <div> <ol> <ul> <video> <h2-h6> <form> เป็นต้น » Inline จะอยู่ในบรรทัดเดียวกันไม่ขึ้นบรรทัดใหม่ เช่น แท็ก <span> <a> <b> <i> เป็นต้น เรื่องระยะห่างของบล็อกระยะห่างมี 3 อย่าง 1) ระยะ margin 2) ระยะ border 3) ระยะ padding ดังภาพต่อไปนี้ - คำถาม : จากภาพ จงอธิบายระยะ margin ? ตอบ : .......................................................... - คำถาม : จากภาพ จงอธิบายระยะ border ? ตอบ : .......................................................... - คำถาม : จากภาพ จงอธิบายระยะ padding ? ตอบ : .......................................................... คำอธิบาย : การกำหนดระยะ padding ประกอบด้วย 1) padding-top (ระยะด้านบน) 2) padding-right (ระยะด้านขวา) , 3) padding-buttom (ระยะด้านล่าง) และ 4) padding-left (ระยะด้านซ้าย)  สไตล์พื้นฐาน» background-color คือ การกำหนดสีพื้นหลัง » color คือ การกำหนดสีตัวอักษร » font-family คือ การกำหนดฟอนต์ » font-size คือ การกำหนดขนาดฟอนต์ » text-align คือ การกำหนดตำแหน่งการแสดงผล left, center และ right จงเขียนข้อความด้วยสไตล์ชีต» ให้ตัวอักษรสีขาว เขียนคำว่า "สวัสดีชาวโลก" » ให้ตัวอักษรมีขนาด 40 พิกเซล » ให้แสดงผลกึ่งกลาง div » ให้กำหนดสีพื้นเป็นสีดำ สวัสดีชาวโลก การกำหนดค่า padding ด้วยตัวเลขเพียง 1 ตัวการกำหนดค่า padding ด้วยตัวเลข 1 ตัว คือกำหนดให้ระยะซ้าย, บน, ขวา, ล่าง มีค่าเท่ากันทั้งหมดทุกด้าน จงเขียนโค๊ด HTML และ CSS เพื่อกำหนดระยะ padding และ border จากนั้นอธิบายผลลัพธ์ ? <html> <body> <div style="padding: 70px; border: 5px solid green;">ระยะ padding = 70พิกเซล, ขอบหนา 5พิกเซลเส้นเต็มสีเขียว</div> </body> </html> ระยะ padding = 70พิกเซล, ขอบหนา 5พิกเซลเส้นเต็มสีเขียว การกำหนดค่า padding ด้วย top right bottom และ left- 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 ด้วยตัวเลข 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 คือ กำหนดความกว้าง Edit or delete this <html> <body> <div style="height: 200px; width: 50%; background-color: powderblue;"></div> </body> </html> การกำหนดความสูงคงที่และความกว้างเป็นเปอร์เซ็นต์- การกำหนดความสูงเป็นค่าคงที่ จะทำให้กล่องมีค่าตามที่กำหนดไม่เปลี่ยนแปลงไปตามความกว้างของบราวเซอร์ - การกำหนดความกว้างเป็นเปอร์เซ็นต์ กล่องจะปรับขนาดตามความกว้างของบราวเซอร์ที่เปลี่ยนไป <html> <body> <div style="height: 100px; width: 500px; background-color: powderblue;"></div> </body> </html> การกำหนด max-width- ปัญหาของแท็ก <div> คือ เมื่อบราวเซอร์ย่อให้เล็กลงมากกว่าความกว้างของแท็ก div บราวเซอร์จะเพิ่มสกอร์บาร์ลงในหน้าเว็บเพจแก้ไขโดยใช้ max-width - การใช้ max-width แทนจะช่วยปรับปรุงผลลัพธ์ในกรณีบราวเซอร์ถูกย่อให้เล็กลงมาก ๆ หรืออุปกรณ์แสดงผลมีขนาดเล็ก <html> <body> <div style="max-width: 500px; height: 100px; background-color: powderblue;"></div> </body> </html> การฝังสไตล์ชีตลงในแท็กโดยตรง (Inline Style Sheet)เขียนโค๊ด HTML ต่อไปนี้และอธิบายผลลัพธ์ ? <html><body> <h2>Hello World</h2> <h2 style="font-size:36px">Hello World</h2> <h2 style="font-size:46px;color:red;">Hello World</h2> </body></html> คำถาม : มีแท็ก <h2> กี่แท็ก ? ตอบ : ............................................. คำถาม : แท็ก <h2> ตัวแรก (ด้านบน) มีแอตทริบิวส์ กี่ตัวอะไรบ้าง ? ตอบ : ............................................. คำถาม : ค่าข้อมูลของแอตทริบิวส์ style ของแท็ก <h2> ตัวแรก คือคำว่าอะไร ? ตอบ : .............................................. คำถาม : "font-size:36px" เป็นสตริงใช่หรือไม่ (ปล. สตริงมีเครื่องหมายคำพูด " หรือเครื่องหมาย single quote ( ' ) เปิดปิดหน้าหลัง) ตอบ : ............................................... คำถาม : "font-size:36px" มีตัวคั่นระหว่างชื่อตัวแปรและค่าข้อมูลด้วยเครื่องหมายใด ? ตอบ : ............................................... คำถาม : "font-size:35px" มีตัวแปรชื่ออะไร ? และค่าของตัวแปรคืออะไร ? ตอบ :................................................ คำถาม : "35px" หน่วย px ย่อมาจากอะไร หมายถึงอะไร ? ตอบ : ................................................ การขอใช้งานฟอนต์ 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> <h2>สวัสดีชาวโลก</h2> <h2 style="font-family:'Athiti';font-size:36px">สวัสดีชาวไทย</h2> <h2 style="font-family:'Athiti';font-size:46px;color:red;">นี่คือฟอนต์ อทิติ</h2> </body></html> ย้ำอีกครั้งว่าแท็ก div ต่างจากแท็ก span อย่างไร- แท็ก div แสดงผลเป็นบล็อก เมื่อถูกแสดงผลจะขึ้นต้นบรรทัดใหม่เสมอ - แท็ก span แสดงผลเป็นต่อเนื่องไม่ขึ้นบรรทัดใหม่ (inline) <html> <body> <span>AAA</span><span>BBB</span><span>CCC</span> <div>AAA</div><div>BBB</div><div>CCC</div> </body> </html> AAA BBB CCC AAA BBB CCC รหัสสีการกำหนดพื้นหลังประกอบด้วย 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;"> <h2 style="background-color:green;"> นี่คือ header1 </h2> <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 คือ ภาพพื้นหลัง การใส่พื้นหลัง ด้วย background-image ให้เขียนโค๊ด HTML และอธิบายผลลัพธ์ ? <html> <body style="background-image:url(https://www.w3schools.com/css/paper.gif);"> <h2>สวัสดีชาวโลก !</h2> <p>นี่คือเอกสารที่มีภาพเป็นพื้นหลัง!</p> </body> </html> สวัสดีชาวโลก !นี่คือเอกสารที่มีภาพเป็นพื้นหลัง! การกำหนดพื้นหลังประกอบด้วย background-image และ repeat- background-image คือ ภาพพื้นหลัง - background-repeat คือ กำหนดให้พื้นหลังเรียงวนซ้ำ ๆ เขียนโค๊ด HTML และ CSS เพื่อกำหนดสไตล์ด้วย background-image และ background-repeat จากนั้นอธิบายผลลัพธ์การทำงาน ?
<html>
<body style="background-image: url('https://www.w3schools.com/css/gradient_bg.png');
background-repeat: repeat-x;">
<h2>การแสดงภาพซ้ำแนวนอน</h2>
<p>นี่คือเอกสารที่มีภาพพื้นหลังทำซ้ำไปในแนวนอน</p>
</body>
</html>การแสดงภาพซ้ำแนวนอนนี่คือเอกสารที่มีภาพพื้นหลังทำซ้ำไปในแนวนอน การกำหนดพื้นหลังประกอบด้วย background-image และ no-repeat- background-image คือ ภาพพื้นหลัง - background-repeat คือ กำหนดให้พื้นหลังเรียงวนซ้ำ ๆ หากไม่ต้องการให้ภาพวนซ้ำให้ใส่ค่า background-repeat: no-repeat; เขียนโค๊ด HTML และ CSS เพื่อกำหนดสไตล์ด้วย background-image และ background-repeat จากนั้นอธิบายผลลัพธ์การทำงาน ?
<html>
<body style="background-image: url('https://www.w3schools.com/css/img_tree.png');
background-repeat: no-repeat;">
<h2>การกำหนดตำแหน่งภาพพื้นหลัง!</h2>
<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;'>
<h2>การกำหนดตำแหน่งพื้นหลังชิดขวาและชิดด้านบน!</h2>
</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;'>
<h2>Hello World!</h2>
</body>
</html>Hello World!การกำหนดขอบด้วย properties ชื่อ border-style1) none (ไม่มีกรอบ) 2) solid (ขอบเส้นเต็ม) 3) double (ขอบคู่) 4) dotted (ขอบไข่ปลา) 5) dashed (ขอบจุดประ) 6) groove (ขอบมีเงาด้านล่าง) 7) inset (ขอบมีเงาดำด้านบนซ้าย) 8) outset (ขอบมีเงาดำด้านล่างขวา) การกำหนดรูปแบบการแสดงขอบแบบต่าง ๆ- ตัวอย่างต่อไปนี้แสดงขอบแต่ละแบบ ได้แก่ dotted, dashed, solid, double, groove, insert, outsset, non และ hidden ดังนี้ การกำหนดขอบด้วย 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 hidden border. A mixed border. การกำหนดความกว้างด้วย 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. การกำหนดสีให้กับขอบ 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> A solid red border A solid green border A solid multicolor border ขอบบน=จุด, ขอบขวา = เส้นตรง, ขอบล่าง =จุด , ขอบซ้าย = เส้นตรง ขอบซ้ายขวา=เส้นตรง, ขอบบนล่าง=เส้นประ ขอบหนา 5พิกเซล, เส้นเต็ม, สีแดงขอบซ้าย หนา 6พิกเซล เส้นเต็ม สีแดง สีพื้นเทาสว่าง การกำหนดความมนของขอบ 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 พิกเซลเส้นเต็มสีดำ การใช้งานฟอนต์การใช้งานฟอนต์ในเอกสาร 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: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้Text-shadow effect!ใบงาน 4: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้บทกลอนสุนทรภู่เป็นสาวแซ่แร่รวยสวยสะอาด ก็หมายมาดเหมือนมณีอันมีค่า แม้นแตกร้าวรานร่อยถอยราคา จะพลอยพาหอมหายจากกายนาง อันตัวต่ำแล้วอย่าทำให้กายสูง ดูเยี่ยงยูงแววยังมีที่วงหาง ค่อยเสงี่ยมเจียมใจจะไว้วาง ให้ต้องอย่างกริยาเป็นนารี ฯ ใบงาน 5: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้บทกลอนสุนทรภู่เป็นสาวแซ่แร่รวยสวยสะอาด ก็หมายมาดเหมือนมณีอันมีค่า แม้นแตกร้าวรานร่อยถอยราคา จะพลอยพาหอมหายจากกายนาง อันตัวต่ำแล้วอย่าทำให้กายสูง ดูเยี่ยงยูงแววยังมีที่วงหาง ค่อยเสงี่ยมเจียมใจจะไว้วาง ให้ต้องอย่างกริยาเป็นนารี ฯ ใบงาน 6: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้» สี่เหลี่ยมมุมมน » ความกว้าง 50% » ไม่มีเส้นขอบ » พื้นหลังระบุสีไม่ซ้ำกับตัวอย่าง » ฟอนต์ 1 ใน 13 ฟอนต์จากกูเกิ้ล <ชื่อ-สกุล> ใบงาน 7: ให้เขียนสไตล์ชีตสร้างผลลัพธ์ดังภาพต่อไปนี้» กำหนดกรอบด้วยภาพ » กำหนดสีพื้นหลังของกรอบ » ใช้ฟอนต์ 1 ใน 13 google fonts <div style="position: fixed; bottom: 0; right: 0; width: 300px; background-color:rgba(192,192,192,0.3); border: 10px solid; border-image: url(https://www.w3schools.com/css/border.png) 30 round;"> ตำแหน่งแบบ fixed เป็นผลของใบงานที่ 7 </div> ใบงาน 8: การเปลี่ยนแอตทริบิวส์ภาพด้วย jQuery» jQuery คือ เครื่องมือสำหรับเข้าถึง Tag ต่าง ๆ ภายในเอกสาร HTML และสามารถเปลี่ยนแปลงค่าภายในแอตทริบิวส์ (Attribute) ต่าง ๆ ได้ » jQuery ถูกสร้างขึ้นจากภาษา Java Script » jQuery สามารถใช้งานได้ฟรีไม่เสียค่าลิขสิทธิ์ การใช้งาน jquery
1. ประกาศขอใช้ jquery ในส่วนของแท็ก head ดังนี้
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2. กำหนด value ของ attribute ที่ชื่อว่า onclick ด้วยค่า "$('#img1').attr('src', 'https://dsdi.msu.ac.th/articles/MacOS/MacOS.gif');"
<img id='img1' src='https://dsdi.msu.ac.th/articles/docker/docker.gif'>
<br>
<input type="button" onclick="
$('#img1').attr('src', 'https://dsdi.msu.ac.th/articles/MacOS/MacOS.gif');
" value="mac">
จงตอบคำถามต่อไปนี้ » แท็ก <img> มีแอตทริบิวส์ กี่ตัวอะไรบ้าง ? .............................. (id และ src) » แท็ก input มีแอตทริบิวส์ กี่ตัวอะไรบ้าง ? ....................................... (type, onclick และ value) » แท็ก input มีแอตทริบิวส์ onclick มี value คือคำว่า อะไร ? .................................................... » อธิบายความหมายของแท็ก onclick ว่าเมื่อคลิ๊กลงที่ปุ่มจะมีผลอย่างไรต่อแท็ก img ที่มีแอตทริบิวส์ id ที่มีค่า img1 ............................... คำชี้แจงเรื่องการส่งงาน :» เนื่องจากสถานะการณ์โควิด ทำให้นิสิตเรียนออนไลน์ » เรียนออนไลน์ในความหมายของวิชานี้ไม่ใช่ล็อกอินเข้ามาเจอกันตามเวลาเรียน แต่หมายถึงการให้นิสิตเข้ามาเรียนรู้และทำกิจกรรมในสัปดาห์ที่ 3 และส่งงานเข้ามายัง Google Classroom (บรรยายการดำเนินกิจกรรมและส่งไฟล์วีดีโอเข้า Google Classroom) » ให้บรรยายกิจกรรมที่ 1 - 8 เป็นด้วยการจับหน้าจอคอมพิวเตอร์เป็นไฟล์วีดีโอ และส่งเข้ามายัง Google Classroom รายชื่อการเข้าเรียนและส่งงาน» ไม่พบกิจกรรมการเรียนในสัปดาห์นี้ กรุณาตรวจสอบเวลา : วันนี้ คือ วันที่ 24-10-2022 ตำแหน่งแบบ fixed เป็นผลของใบงานที่ 7 บันทึกวีดีโอการสอนYour browser does not support the video tag. |
หาก ต้องการ ใส่ รูปภาพ ใน เว็บเพจ ขนาด ความกว้างของรูป 300 pixel ต้อง เขียน โค้ด อย่างไร
กระทู้ที่เกี่ยวข้อง
ลิขสิทธิ์ © 2024 th.ketiadaan Inc.
