วันเสาร์, ธันวาคม 5

5-3 การตกแต่ง Tag พื้นฐานของภาษา HTML5

สวัสดีครับ
ในหัวข้อนี้นะครับ
เรายังอยู่กับการแสดงผลด้วย CSS3 ซึ่งในส่วนนี้จะเป็นการปรับ
แต่งโดยใช้ Tag พื้นฐานของภาษา HTML5 ว่าเราสามารถปรับ
แต่งอะไรได้บ้างสำหรับเนื้อหาที่เราใส่ไปในเว็บไซต์ ซึ่งในการปรับ
แต่งนะครับ
เราสามารปรับ
แต่งเนื้อหาได้หลายรูปแบบไม่ว่าจะเป็น การใส่สีพื้นหรือรูปภาพพื้นหลังให้กับหน้าเว็บเพจ การปรับตำแหน่งนะครับ
การ
แต่งสีตัวอักษร รูปแบบตัวอักษรหรือแม้
แต่ขนาดนะครับ
เราก็สามารถปรับ
แต่งได้ซึ่งนะศึกษาจะได้เรียนรู้ได้ในหัวข้อนี้ และทำความเข้าใจพร้อมฝึกปฏิบัติตามกัน
ถ้านักศึกษาพร้อมแล้วเข้าที่โปรแกรม NetBeans กันได้เลยนะครับ
เมื่อเข้ามาที่โปรแกรม NetBeans กันแล้วนะครับ
ให้นักศึกษา ลองใส่เนื้อหาลงในหน้า เว็บเพจดูซึ่ง
ถ้าอาจารย์ลองรันโปรกรมดูนะครับ
ก็จะเห็นว่าเนื้อหาที่อาจารย์ใส่ก็จะมีตั้งแต่ รูปภาพ ลิงค์เชื่อมโยง มีวิดิโอ และก็มีข้อความต่างๆ ที่อาจารย์สามารถจัดวางลงไปแล้ว
แต่ยังไม่มีการปรับ
แต่งอะไร โดยการปรับ
แต่งนี้นะครับ
อาจารย์ใช้ลักษณะ CSS ที่เป็นการใช้งานแบบ External Link ก็คือ สร้างไฟล์ CSS ขึ้นมาตั้งหากแล้วเราค่อยลิงค์เชื่อมโยงเข้ามาใช้งาน
ดังนั้นเราก็จะไปปรับ
แต่งที่ตัวไฟล์ CSS ที่อาจารย์สร้างขึ้นมาแล้วนะครับ
ต้องการใส่ รูปภาพเป็นพื้นหลังให้กับหน้าเว็บเพจเราจะใส่ ที่ Tag ของ Body เป็น Element/Tag เราก็พิมพ์คำว่า Body ลงไปนะครับ
จากนั้นต้องการใส่รูปภาพพื้นหลัง เราใช้คำสั่งว่า Background-image จากนั้นระบุ url ของรูปภาพที่เราต้องการจะใส่เป็นพื้นหลังนะครับ
ในที่นี้ตัวอย่างอาจารย์อยู่ในโฟร์เดอร์ multimedia รูปภาพพื้นหลังอาจารย์ต้องการใส่เป็น gray_pad.png จากนั้นนักศึกษาลอง Save และลองกลับไปรับโปรแกรมดูนะครับ
นักศึกษาจะเห็นได้ว่าจากเมื่อกี้ที่มันไม่มีรูปภาพเป็นพื้นหลังพอเราใส่คำสั่ง CSS โดยใส่ background-image รูปภาพที่อาจารย์ใส่ก็จะเป็นรูปของตาราง ก็จะมีรูปภาพของตารางเป็นพื้นหลังขึ้นมาที่หน้าเว็บเพจหรือเว็บไซต์ ของนักศึกษาแล้วนะครับ
หรือ
ถ้านักศึกษาไม่ต้องการใส่รูปภาพเป็นพื้นหลังเราสามารถใส่สีพื้นเป็นพื้นหลังได้เช่นกันนะครับ
อาจารย์ยก
ตัวอย่างเช่น อาจารย์ต้องการใส่สีพื้นให้กับข้อความที่อยู่ภายใต้ Tag div นะครับ
เราก็พิมพ์ div ลงไป จากนั้นต้องการใส่สีพื้นเราจะเลือกเป็น Background-Color อาจารย์ใส่เป็นสี ชมพู เราก็เลือกเป็น Pink จากนั้นนักศึกษาลอง Save และกลับไปรันโปรแกรม นักศึกษาก็เห็นว่า Tag div ที่เราใส่คำสั่ง CSS เข้าไปถูกเปลี่ยนให้เป็นสีพื้นเป็นสีชมพูแล้ว

แต่…

ถ้านักศึกษาต้องการ ใส่สีพื้นหลัง Tag div เหมือนกัน
แต่ div ที่ต้องการเปลี่ยนมาเป็นอีกสีนึงนะครับ
เราก็จะมาเพิ่ม ในส่วนคำสั่งของ CSS ที่เป็นการอ้างอิงแบบ Class เพื่อระบุให้ชัดเจนว่า div Class ไหนสีพื้นเป็นสีอะไร เราก็ระบุเป็น div โดยชื่อ Class อาจารย์ตั้งเป็น Class1 จากนั้นต้องการใส่สีพื้น Background-Color อาจารย์ต้องการเป็นสีน้ำเงินนะครับ
แล้วเราก็ Save เราก็จะมาเรียกใช้ แอตทริบิวต์ Class ที่ div ตำแหน่งนี้ ก็คือ Class1 จากนั้นลองรันโปรแกรม นักศึกษาก็จะเห็นว่า div ที่เราเรียกใช้ Class ก็จะถูกเปลี่ยนเป็นสีพื้นสีน้ำเงินขึ้นมานะครับ
ต่อไปนะครับ
อาจารย์ต้องการกำหนดสีตัวอักษรเราก็ใช้คำสั่ง Color สมมุติสีแดงนะครับ
ต้องการเปลี่ยนรูปแบบตัวอักษรเราก็ใช้คำสั่ง font-family สมมุติเป็น sand-serit ต้องการเปลี่ยนขนาดเราก็ใช้เป็น font-size อาจารย์ต้องการขนาด 30 px. นะครับ
ต้องการปรับรูปแบบตัวอักษรเราก็ใช้เป็น font-style อาจารย์ต้องการให้เป็นตัวเอียงเราก็เลือก italic จากนั้น Save นะครับ
แล้วเรานักศึกษาลองกลับไปรันดู นักศึกษาก็จะเห็นว่า Tag div ที่เราใส่คำสั่ง CSS เข้าไปตรงที่เราเรียก Class1 ก็จะถูกเปลี่ยนตัวอักษรเป็นสีแดงตามคำสั่ง Color นะครับ
ถูกปรับขนาดตัวอักษรตามคำสั่ง font-style ถูกปรับเปลี่ยนรูปแบบตามคำสั่ง font-style นะครับ
ซึ่งตรงนี้เราสามารถปรับ
แต่งเนื้อหาได้
นอกจากนี้แล้ว เรายังสามารถกำหนดตำแหน่งการแสดงผล ของเนื้อหาที่เราใส่ลงเว็บไซต์ของเราได้ แม้ว่าจะเป็นชิดซ้าย กึ่งกลางหรือชิดขวา ยก
ตัวอย่างเช่น อาจารย์ต้องการให้ระบบนำทางหรือ menu ที่เราสร้างเป็นลิงค์เชื่อมโยงที่อยู่ภายใต้ Tag nav ของเรา อยู่ชิดด้านขวานะครับ
เราก็ไปเพิ่มคำสั่ง CSS เข้ามา ต้องการให้ Tag nav ของเราอยู่ตำแหน่งด้านขวาแล้วก็ใส่คำสั่ง CSS ที่ Tag nav เข้าไป จากนั้นต้องการปรับตำแหน่งนะครับ
เราใช้คำสั่งว่า Text-align ต้องการให้ชิดขวาเราก็เลือกเป็น right แล้วก็ ; จากนั้นลอง Save นะครับ
นักศึกษาก็จะเห็นว่า Tag nav ของเราถูกเลื่อนมาอยู่ที่ตำแหน่งด้านขวาแล้วตามคำสั่ง Text-align ที่เราใส่เข้าไป หรือ
ถ้าเราต้องการให้วีดิโอกับรูปภาพอยู่ที่ตำแหน่งกึ่งกลาง เราก็สามารถจัดตำแหน่งได้เช่นกันนะครับ
โดยวิดิโอของเราอยู่ใน Tag Section นะครับ
อาจารย์ไม่ต้องการให้ ทุก Section อยู่กึ่งกลาง นะครับ

ดังนั้น
ถ้าไม่ต้องการให้ทุก Section อยู่กึ่งกลางเราก็ไม่ใช้การอ้างอิงแบบ Element/Tag เราจะใช้อาศัยการสร้าง Class หรือ ID เข้าไปแทนนะครับ

ดังนั้นอาจารย์จะสร้างเป็น Class แล้วกันก็เป็น Class2 ต้องการปรับให้อยู่กึ่งกลางก็ใช้ Text-align นะครับ
อยู่กึ่งกลาง center แล้วเราก็ Save จากนั้นมากำหนดระบุว่าเราต้องการให้ Section ไหนอยู่กึ่งกลางบ้างเราก็จะเรียกใช้ Class2 ที่เราสร้างขึ้นมา Class Class2 นะครับ
อันนี้คือคำสั่งที่เราสร้างขึ้นมาเอาไว้จัดกึ่งกลางนะครับ
อีกตัวนึงก็คือตัวรูปภาพ เรียกใช้ แอตทริบิวต์ Class2 เช่นกัน จากนั้นลองรันโปรแกรมดู ก็จะเห็นว่าวิดิโอที่เราปรับคำสั่งกึ่งกลางก็จะอยู่กึ่งกลางแล้วส่วนรูปภาพก็เช่นกันนะครับ
ก็จะอยู่กึ่งกลางเช่นเดียวกัน เป็นยังไงกันบ้างครับ
รู้จักการใช้คำสั่ง CSS ในการปรับ Tag พื้นฐานต่างๆของภาษา HTM5 กันแล้วใช่มั้ยครับ
แม้ว่าจะเป็น การใส่สีพื้น รูปภาพพื้นหลัง การปรับ
แต่งขนาดสี รูปแบบตัวอักษร หรือแม้
แต่ตัวอักษร หรือแม้
แต่การปรับ
แต่งตำแหน่งใน การวางเนื้อหาลงไปนะครับ
เราก็สามารถทำได้ด้วยคำสั่ง CSS ซึ่งหัวข้อถัดไปก็จะเป็นการปรับ
แต่งด้วย CSS เหมือนเดิม เพียง
แต่จะเป็นการปรับ
แต่งรูปภาพและวิดิโอที่เราใส่ลงไป
ถ้านักศึกษาพร้อมแล้วคลิ้กที่หัวข้อถัดไปเลยนะครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *