นโยบายการจัดการความรู้ มหาวิทยาลัยสงขลานครินทร์ 1.ให้ใช้เครื่องมือการจัดการความรู้ผลักดัน คุณภาพคน และกระบวนทำงาน 2.ส่งเสริมการแลกเปลี่ยนประสบการณ์การทำงาน จากหน้างาน 3.ส่งเสริมให้มีเวทีเรียนรู้ร่วมกัน

EkarinS.
Ico64
เอกรินทร์ ซื่อธานุวงศ์
อาจารย์
มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตตรัง
เครือข่าย
สมาชิก · ติดตาม: 0 · ผู้ติดตาม: 0

อ่าน: 1093
ความเห็น: 0

บริการวิชาการ อบรมเชิงปฏิบัติการ การจัดหน้าเว็บเพจด้วย HTML5 และ CSS3

อบรมเชิงปฏิบัติการ การจัดหน้าเว็บเพจด้วย HTML5 และ CSS3

สืบเนื่องจากผมได้มีโอกาสไปเป็นวิทยากรอบรมเชิงปฏิบัติการในหัวข้อ การจัดหน้าเว็บเพจด้วย HTML5 และ CSS3 ให้กับสถานศึกษาโรงเรียนมัธยมแห่งหนึ่งในสามจังหวัดชายแดนภาคใต้ นั่นคือ โรงเรียนตากใบ ตั้งอยู่ในอำเภอตากใบ จังหวัดนราธิวาส ในวันที่ 3-5 สิงหาคม 2559 การได้ไปทำงานเป็นวิทยากรอบรมในครั้งนี้มีเหตุมาจากว่า ครั้งหนึ่งผมเคยได้ไปทำงานบริการวิชาการเป็นกรรมการตัดสินการแข่งขันการสร้าง Web Page ประเภท Web Editor ระดับมัธยมศึกษาตอนต้น ในงานศิลปหัตถกรรมนักเรียน ระดับภาคใต้ ผมบังเอิญได้เจอคุณครูโรงเรียนตากใบ ซึ่งได้พานักเรียนเข้าร่วมแข่งขันในงานดังกล่าว จากการที่ได้พูดคุยกับคุณครูโรงเรียนตากใบ พบว่านักเรียนได้มีการฝึกการจัดโครงร่าง (Layout) ของหน้าเว็บเพจด้วยวิธีการใช้ตาราง ซึ่งในปัจจุบันการจัดโครงร่างของหน้าเว็บเพจด้วยวิธีการแบบ CSS3 (Cascading Style Sheet) และ HTML5 ได้รับความนิยมเพิ่มมากขึ้นแทนวิธีการใช้ตาราง ด้วยเหตุนี้จึงเป็นจุดเริ่มต้นของแนวคิดการบริการวิชาการเผยแพร่ความรู้พื้นฐานของการจัดหน้าเว็บเพจด้วย HTML5 และ CSS3 ให้กับนักเรียนโรงเรียนมัธยม (โรงเรียนตากใบ) ผมลืมบอกไปว่าผมเป็นศิษย์เก่าของโรงเรียนตากใบ การไปบริการวิชาการในครั้งนี้ทำให้ผมรู้สึกว่าได้กลับมาทำคุณประโยชน์ให้กับสถานศึกษาที่ผมเคยจบมา


ขอกลับมาสู่เนื้อหาทางวิชาการ ปัญหาที่สำคัญของการใช้ ตารางจัดโครงร่างของหน้าเว็บเพจ คือ องค์ประกอบทั้งหมดของเว็บเพจอยู่ในตารางเดียวกัน ทำให้เกิดแท็ก <tr> และ <td> ของตารางที่ใช้จัดโครงร่างอยู่ปะปนกับองค์ประกอบต่างๆ ของหน้าเว็บเพจ ซึ่งทำให้ยุ่งยากต่อการปรับเปลี่ยนโครงร่างของหน้าเว็บเพจ

ต่อมาได้มีการจัดโครงร่างของหน้าเว็บเพจด้วย CSS แท็กที่สำคัญสำหรับการใช้ CSS จัดโครงร่างของหน้าเว็บเพจคือ แท็ก <div> ซึ่งทำหน้าที่เหมือนเป็นกล่องเปล่า นั่นคือ อิลิเมนต์ที่ถูกสร้างมาจากแท็กนี้มีการแสดงผลเป็นแบบบล็อก (คุณสมบัติของ Display เป็น Block) แต่ถ้ามีอิลิเมนต์หรือบล็อกต่างๆ ที่เกิดจากแท็ก <div> ในหน้าเว็บเพจเป็นจำนวนมาก อาจทำให้ดูยุ่งยากต่อการแยกแยะระหว่างอิลิเมนต์เหล่านี้ จากข้อเสียนี้ทำให้มีการกำหนดกลุ่มของแท็กขึ้นมาใหม่ใน HTML5 เพื่อใช้ในการจัดโครงร่างของหน้าเว็บเพจโดยเฉพาะ

HTML5 ได้มีการกำหนดแท็กกลุ่มหนึ่งขึ้นมาเพื่อช่วยในการจัดโครงร่างของหน้าเว็บเพจ คือ <header>, <nav>, <article>, <aside>, <section>, และ <footer> ซึ่งแท็กเหล่านี้เป็นเพียงแท็กสำหรับสร้างกล่องเปล่า (Display แบบ Block) แบบเดียวกับแท็ก <div> แต่มีความแตกต่างจากแท็ก <div> ตรงที่แท็กเหล่านี้เป็นแท็กที่มีความหมายหรือแท็กเชิงความหมาย (Semantic Tags) ส่วนการจัดหน้าในลักษณะอื่นๆรวมถึงการปรับแต่งหน้าเว็บเพจจะใช้ CSS3 เป็นหลัก รายละเอียดของเนื้อหาของการอบรมเชิงปฏิบัติการในครั้งนี้สามารถเข้าไปอ่านได้ที่สไลด์ตามลิงค์ต่อไปนี้

https://drive.google.com/open?id=0BxXZWlBkKvtGdmk0NmZvQ2g2elU


หมวดหมู่บันทึก: บริการวิชาการ
คำสำคัญ (keywords): CSS3  HTML5  web page
สัญญาอนุญาต: ซีซี: แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน Cc-by-nc-sa
สร้าง: 13 สิงหาคม 2559 23:14 แก้ไข: 19 สิงหาคม 2559 13:22 [ แจ้งไม่เหมาะสม ]
ดอกไม้
สมาชิกที่ให้กำลังใจ: Ico24 kwang saelee.
สมาชิกที่ให้กำลังใจ
 
Facebook
Twitter
Google

บันทึกอื่นๆ

ความเห็น

ไม่มีความเห็น

ร่วมแสดงความเห็นในหน้านี้

ชื่อ:
อีเมล:
IP แอดเดรส: 3.93.75.30
ข้อความ:  
เรียกเครื่องมือจัดการข้อความ
   
ยกเลิก หรือ