html

ตอนที่ 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

ตอนที่ 1 คลิกแล้วไปไหน
เรื่องเล่า โค้ดดิ้งสร้างโฮมเพจ

ตอนที่ 1 คลิกแล้วไปไหน

เพราะทุกการกระทำมีเป้าหมาย
ดังนั้น เมื่อมีการเชื่อมโยงเนื้อหา
ที่ปรากฎในรูปของเว็บเพจ
และสร้างจุดเชื่อมโยง
เว็บเพจจำนวนมากเข้าด้วยกัน
ก็ต้องกำหนดว่า
เมื่อคลิกแล้วจะไปไหนต่อ

https://thaiall.com/html/mytarget.htm
.
เช่น สร้างเว็บไซต์ ของ สมาคมศิษย์เก่า
โรงเรียน สำนักงาน ร้านกาแฟ
หรือ โรงงานของพรีเมี่ยม
.
ก็ต้องสร้างภาพขึ้นมา
เป็นตัวแทน เพื่อเชิญชวน
ให้ผู้สนใจได้คลิก
เปิดรายละเอียด
เช่น เว็บไซต์รับผลิต
กระบอกน้ำ แบตสำรอง
ร่มเพอร์เฟค
ยูเอสบีเพอร์เฟค
ปากกาเพอร์เฟค
นำเข้าสินค้าจากจีน
หรือ ttpcargo.com
.
หากคลิกภาพข้างต้น
ก็จะเปิดข้อมูลที่เกี่ยวข้อง
ที่แสดงรายละเอียด
เพื่อช่วยสนับสนุนการตัดสินใจ
เลือกสินค้าหรือบริการนั้น
.
เป้าหมาย หรือ ทาร์เก็ต
ในโค้ดดิ้งด้วยภาษาเอชทีเอ็มแอล
คือ การกำหนดเฟรมปลายทาง
หรือ เปิดเนื้อหาขึ้นมาในหน้าต่างใหม่
ซึ่งเป็นคุณสมบัติที่ต้องระบุ
ในขณะเขียนโค้ดเพื่อสร้างลิงก์
.
ส่วนเป้าหมายการรวมกลุ่ม
ของสมาชิกในสังคม
ก็ย่อมมี Target
เช่น สมาคมศิษย์เก่า มารวมกลุ่มกัน
ก็เพื่อแสดงความรัก
ความเป็นเพื่อน
ความเป็นพี่
ความเป็นน้อง
ความรัก และ ความสุขของสมาชิก

https://vt.tiktok.com/ZSFKjps15/

ตอนที่ 1 คลิกแล้วไปไหน
เรื่องเล่า โค้ดดิ้งสร้างโฮมเพจ
#homepage
#webpage
#html
#howto
#school
#coding
#target
#frame
#browser

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

เพื่อนทัก ชวนมอง 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 อื่น ไม่รับรองว่าจะได้ผล