อบรม การพัฒนาเว็บไซต์ที่ทุกคนเข้าถึงได้ วันที่ 2
ความเป็นมาเป็นไป ของการเข้ารับอบรมครั้งนี้
มาวันนี้เป็นวันที่สองครับ ว่าด้วยเรื่องของ CSS แล้ว ก็เหมือนเดิมครับ ก็คือด้านล่างจะเป็น note ย่อ อาจจะอ่านเข้าใจบ้าง ไม่เข้าใจบ้างนะครับ
**
เรื่องอบรมวันที่สอง โดยคุณ สว่าง ศรีสม
วันนี้ว่าด้วยเรื่องของ XHTML อีกเล็กน้อย
เริ่มจากให้เขียนชุดคำสั่งเพื่อเรียก flash ขึ้นมาแสดงผลที่หน้าเว็บ โดยใช้
<div>
<object width="480" height="385" type="application/x-shockwave-flash"
data="http://game.hunsa.com/flashgame/file/2001.swf">
<param value="http://game.hunsa.com/flashgame/file/2000.swf"></param>
<p>test</p>
</object>
</div>
ซึ่งคุณสว่างแจ้งว่า ต้องใช้เพียงแค่นี้เท่านั้น จึงจะสามารถ validate ถูก มากกว่านี้ไม่ได้
และการ validate นั้นทำได้ที่ http://validator.w3.org โดยการ validate ก็ถือว่าเป็นตรวจสอบว่าเราเขียนโค้ดได้ถูกต้องตรงตามมาตรฐานหรือไม่ ซึ่งการเขียนอย่างถูกต้องนี้จะมีนัยว่าทุกโปรแกรมช่วยอ่านสามารถใช้งานได้
ทั้งนี้ มีเรื่องของเครื่องหมายที่ใส่ใน data และ param ที่เมื่อมีเครื่องหมาย & เราจะต้องแปลงให้เป็น & ก่อนเสมอ เท่านี้ก็จะสามารถใช้งานได้ครับ และ validate ได้ผ่านแล้ว
ส่วนต่อมาก็ข้ามเรื่องไปที่เรื่องของ CSS หรือ Cascading Style Sheets
มันคือภาษาที่ใช้ในการจัดรูปแบบของภาษามาร์คอัพ(ก็คือ HTML, XHTML)
CSS 1.0 เริ่มใช้เมื่อ 1996 และ 1 ปี ถัดมาก็เริ่มใช้ CSS 2.0 เลย ส่วนของ CSS 3.0 นั้นเริ่มร่างมาตรฐานตั้งแต่ปี 1998 และในปัจจุบัน ก็ยังอยู่ในขั้นตอนการร่างอยู่ ถึงเริ่มมี browser ใช้ได้บ้างแล้ว แต่ก็เป็นส่วนน้อย และใช้ได้แค่บางส่วนของ CSS3 เท่านั้น
ข้อดีของ CSS
- เราสามารถแยกการตกแต่งกับเนื้อหาเว็บออกจากกันได้
- แก้หน้าตาทุกหน้าได้ โดยใช้ css ไฟล์เดียว
- โหลดได้เร็วเพราะว่าเนื้อหาจะถูกโหลดก่อน
- กำหนดการแสดงผล แบบเฉพาะเจาะจงกับอุปกรณ์ต่างๆได้
การเรียกใช้งาน CSS
1. External CSS (เรียกจากไฟล์ภายนอก)
<link rel="stylesheet" href="xx.css" />
2.Internal CSS (ใช้ style ที่ส่วนของ head ของ html)
<style type="text/css" media="all">
....
</style>
3.Inline CSS
<img style="border: 1px solid;" />
CSS syntax
Selector {
Property: Value;
}
หรือ
@media MediaName {
Selector {
Property: Value;
}
}
จากนั้นก็เริ่มเรื่องการสร้างไฟล์ CSS
ทำได้ด้วยการสร้างไฟล์ขึ้นมาเปล่าๆหนึ่งไฟล์ อาจจะใช้ notepad ก็ได้ เปิด notepad เปล่าๆแล้วบันทึกลงไปว่า file.css
* วันนี้จดได้แค่นี้ครับ เพราะว่าเป็น work shop แล้ว แต่สามารถอ่านเพิ่มเติมเรื่องของการเรียกใช้ css ได้ครับ
tag : การใช้ html, การใช้ css, อบรม css, อบรม HTML,css, xhtml
