css

ตอนที่ 2 เขียนโต๊ะกัน
เรื่องเล่า โค้ดดิ้งสร้างโฮมเพจ

ตอนที่ 2 เขียนโต๊ะกัน
.
เมื่อเรียนการเขียนโค้ด
ด้วยภาษาเอชทีเอ็มแอลในอดีต
ย่อมต้องจัดเลเอาท์ของเว็บเพจ
ด้วยแท็กเทเบิ้ล
.
แต่ เทเบิ้ล ในที่นี่ไม่ใช่โต๊ะนะครับ
ความหมายที่ถูกต้องในที่นี้
คือ ตาราง (Table)
ที่แบ่งออกเป็น แถว และ คอลัมภ์
เหมือนที่พบในโปรแกรมเอ็กเซล
.
ถ้าใช้แท็กเทเบิ้ลในโค้ด
แบบที่ไม่มีคุณสมบัติเพิ่มเติม
หรือใช้เพียงคุณสมบัติขั้นพื้นฐาน
ก็จะได้ตารางที่แบ่งขอบเขต
ของข้อมูลได้ในแบบธรรมดา
.
แต่ถ้าเพิ่มเรื่อง ซีเอสเอส เข้าไป
จะได้ตารางที่มีความสวยงาม และ สมบูณ์มากขึ้น
เช่น
– กำหนดความโปร่งใสให้สีพื้นหลัง
– กำหนดลักษณะเส้นกรอบตาราง
– วางตำแหน่งตารางให้ลอยทับตารางอื่น
.
ซึ่งในตัวอย่างภาพประกอบนี้
เป็นการเขียนโค้ดด้วย
ภาษาเอชทีเอ็มแอล (HTML)
ร่วมกับการใช้ซีเอสเอส (CSS)
ทดสอบประมวลผลบน
เว็บไซต์ w3schools.com
.
ปัจจุบัน พบว่า นักพัฒนาเลือกใช้
การออกแบบเลเอาท์
ด้วยแท็กดีไอวี แทน แท็กเทเบิ้ล
เพราะสามารถสนับสนุน
เรสสปอนซีฟเว็บดีไซน์
ได้อย่างสมบูรณ์
เช่น การใช้โค้ดเวิร์ดเพรส wordpress
ของเว็บไซต์ premiumperfect.com เป็นต้น

https://vt.tiktok.com/ZSFKs9Ptt/

Coding by HTML

https://www.thaiall.com/html/indexo.html

ตอนที่ 2 เขียนโต๊ะกัน
เรื่องเล่า โค้ดดิ้งสร้างโฮมเพจ
#html
#css
#coding
#programming
#testing
#howto

ปรับให้ชิดขอบทั้งซ้ายและขวา

เพื่อนทัก ชวนมอง text-align : justify ในบทความ

นึกถึงเพื่อน ๆ และโฆษณาอุปกรณ์ออกกำลัง
กับคำว่า #เอวเล็กเพื่อนทัก
ผมคิดว่าไม่ใช่แค่เอวนะครับ อะไรเล็กเพื่อนก็ทัก
เมื่อวาน มีเพื่อนทัก เรื่องการใช้ css tag
ที่ชื่อ text-align กำหนดค่าเป็น justify
ซึ่งที่ผ่านมา พบ thai-justify บน microsoft word
ที่เพื่อน ๆ ใช้เขียนบทความ พบใช้เขียนกันทุกบทความ ทุกเวที
Paragraph ไหนไม่มี thai-justify เป็นต้องโดนทัก
แต่กับการเขียน webpage แล้ว ผมก็ยังไม่เคยใช้ properties นี้

วันนี้ 26 กุมภาพันธ์ 2565 ได้เริ่มปรับการแสดงผลบทความ
หัวข้อ “รวมบทความของ ผศ.ดร.กฤษฎา ตันเปาว์ จาก facebook.com
มีผลให้เนื้อหาในบทความทั้ง 45 เรื่อง
ชิดขอบซ้าย และขอบขวา ซึ่งค่า default การแสดงผล มักชิดแต่ขอบขวา
นับจากนี้ เมื่อเตรียมเนื้อหา ก็จะมองหาตำแหน่งที่จะใช้ justify
เพราะการปรับ justify ทำให้เนื้อหาดูเป็นระเบียบชิดขอบสวยงาม
เหมือนที่พบใน บทความวิชาการในวารสาร thaijo
เหมือนที่พบใน รายงานสืบเนื่องจากการประชุม conference
เหมือนที่พบใน รายงานวิทยานิพนธ์ที่สืบค้นได้จาก thailis

การเขียนคำสั่งที่น่าสนใจมี 3 แบบ บน IE
text-align:justify;
text-align:justify;text-justify:inter-word;
text-align:justify;text-justify:inter-cluster;

ทดสอบบน IE แต่ Browser อื่น ไม่รับรองว่าจะได้ผล