XHTML tutor
Attribute Names Must Be In Lower Case
Wrong
<table WIDTH=”100%”>
Correct
<table width=”100%”>
Attribute Values Must Be Quoted
Wrong:
<table width=100%>
Correct:
<table width=”100%”>
Attribute Minimization Is Forbidden
Wrong:
<input checked>
<option selected>
<frame noresize>
Correct:
<input checked=”checked” />
<option selected=”selected” />
<frame noresize=”noresize” />
The id Attribute Replaces The name Attribute
Wrong:
<img src=”picture.gif” name=”picture1″ />
Correct:
<img src=”picture.gif” id=”picture1″ />
XHTML Structure
<!DOCTYPE …>
<html ….>
<head> –<title>……</title>
</head>
<body> –…..
</body>
</html>
DOCTYPE
แท็กที่มีลักษณะพิเศษ
ต้องประกาศไว้ตอนต้นของเอกสาร
ไม่้ต้องมีแท็กปิด (closing tag)
มีรูปแบบการใช้ 3 รูปแบบ คือ –STRICT –TRANSITIONAL –FRAMESET
จำเป็นต้องประกาศ DOCTYPE ถ้าต้องการให้ผ่าน Validator
XHTML 1.0 Strict
Use this when you want really clean markup, free of presentational clutter.
Use this together with Cascading Style Sheets.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
XHTML 1.0 Transitional
Use this when you need to take advantage of HTML’s presentational features and when you want to support browsers that don’t understand Cascading Style Sheets.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
คำถามเกี่ยวกับการ generate html code จาก DataGrid(asp.net 1.1) กับ GridView(asp.net 2.0)
คำถามเกี่ยวกับการ generate html code จาก DataGrid(asp.net 1.1) กับ GridView(asp.net 2.0)
- อยากรู้ว่า generate เป็น table หรือเปล่า???
XHTML Syntax Rules
●Attribute names must be in lower case
●Attribute values must be quoted
●Attribute minimization is forbidden
●The id attribute replaces the name attribute
●The XHTML DTD defines mandatory elements
จุดสำคัญของ xhtml
จุดสำคัญของ xhtml
- ต้องมีลักษณะเป็น Well formed รูปแบบถูกต้อง ไม่พิมพ์ตกหล่น
- ทุก tag ต้องมี tag ปิด ด้วยเสมอ
เช่น <p> ปิดด้วย </p>
ถ้าเป็น tag ที่แต่เดิมไม่มีตัวปิดให้เขียนในลักษณะนี้
<img src=”………” mce_src=”………” /> ,
<input type=”checkbox” checked=”checked” /> - ชื่อ tag และ attribute ต้องเป็นตัวพิมพ์เล็ก ทั้งหมด
ไม่ควรเขียน <BODY><P></P></BODY>
แต่จะต้องเป็น <body><p></p></body> - attribute values ต้องคลุมด้วย quoted
เช่น <div class=red> ต้องเขียนเป็น <div class=”red”>
สำหรับผมใช้ Dreamweaver8 เราก็กำหนดให้เป็นเอกสาร xhtml ตั้งแต่ต้นได้เลย กด File / New จะมีกล่องด้านล่างขวา ให้เลือก Doctype
กฎการเขียน CSS
- Inheritance หากแปลตามตัวก็คือ การสืบทอด propertyบางตัว จะมีผลกับสิ่งที่อยู่ข้างในทั้งหมด เช่น
body{
color:green;
margin:5px;
}
สื่งที่อยู่ใน body จะมีฟ้อนต์เป็น สีเขียว ทั้งหมด แต่ margin จะทำเฉพาะ body เท่านั้น ไม่สืบทอดต่อไป
- Comment การคอมเม้นในไฟล์ .css จะใช้ /* เป็นการเปิด และ */ เป็นการปิด เช่น
/* COMMENTS CANNOT BE NESTED */
- Cascading Order คือ ลำดับความสำคัญของสไตล์ชีท
โดยธรรมชาติแล้ว ไฟล์.css จะถูกอ่านจากบนลงล่าง หากคุณเขียนซ้ำ class เดิม อันที่อยู่ด้านล่าง จะถูกทำเป็นลำดับสุดท้าย เช่น
.test{
color:red;
}
.test{
color:blue;
}
เมื่อคุณเรียกใช้คลาส ในhtml เช่น <div class=”test”> test test </div> จะได้ตัวหนังสือ test สีน้ำเงิน
ความสำคัญ ลำดับแรก !important
หากคุณกำหนด !important ไว้ใน value เช่น
p{
color:red!important;
}
p{
color:blue;
}
เมื่อเขียนแบบนี้ ในแท็ก <p> จะมีฟ้อนต์เป็น สีแดง
การคำนวณลำดับความสำคัญจาก การประกาศ class และ id
ให้ a เป็นจำนวนของ id b เป็นจำนวนของ class และ c เป็นจำนวนของ tag html
#id1 {xxx} /* a=1 b=0 c=0 –> เรียงตัวเลข abc = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 –> เรียงตัวเลข abc = 013 */
LI.red {xxx} /* a=0 b=1 c=1 –> เรียงตัวเลข abc = 011 */
LI {xxx} /* a=0 b=0 c=1 –> เรียงตัวเลข abc = 001 */
ตัวเลขมากกว่า จะมีลำดับความสำคัญที่สูงกว่า จะเห็นว่า id มีความสำคัญสูงกว่า class หากเรียก id และ class พร้อมๆกันลักษณะที่กำหนด จะเป็นไปตาม id
ตัวอย่าง
<style>
ul li.test{ color:blue; } /*012*/
li.test{color:red } /*011*/
</style>
<ul>
<li class=”test”>คุณว่าจะได้สีอะไร</li>
</ul>
ลองนำโค้ดนี้ไป paste ในส่วน body ดู นะครับ หากตัวเลขมีค่าเท่ากัน สิ่งที่ประกาศไว้ลำดับสุดท้ายจะมีความสำคัญสูงกว่าครับ
Pseudo-classes and Pseudo-elements คือ class และ element พิเศษ มีวิธีเขียนได้ 2 รูปแบบ ดังนี้
selector: Pseudo-class { property: value }
or
selector: Pseudo-element { property: value }
selector.class: Pseudo-class { property: value }
or
selector.class: Pseudo-element { property: value }
Anchor Pseudo-classes เช่น
a:link { color: red }
a:hover {color:black; text-decoration:underline;}
a:active { color: blue; font-size: 125% }
a:visited { color: green; font-size: 85% }
a:link คือสถานะของลิ้งค์ a:hover คือ สถานะลิ้งค์เมื่อเอาเมาส์ไปแตะ a:active คือ สถานะเมื่อลิ้งค์หน้านั้นถูกเปิดอยู่ a:visited คือ สถานะลิ้งค์ที่ถูกเปิดและปิดไปแล้ว คุณสามารถกำหนด ให้มีรูปแบบต่างกันได้ ในกรณีนี้ เมื่อคุณ เขียน
<a href=”http://www.divland.com”> ลิ้งค์จะเป็นสีแดง เมื่อเอาเมาส์แตะ จะเป็นสีดำ มีเส้นใต้ หากเป็นการเปิดหน้าใหม่ คุณจะเห็นลิ้งค์ เป็นสีน้ำเงิน และเมื่อคุณปิดหน้านั้น ลิ้งค์ที่คุณได้กดไปแล้ว จะเป็นสีเขียว
First Line Pseudo-element
ในหน้าหนังสือพิมพ์ จะมีพาดหัวข่าวบรรทัดแรกตัวหนา ใหญ่ รูปแบบนั้น จะใช้ firstline
P:first-line {
font-variant: small-caps;
font-weight: bold }
First Letter Pseudo-element
ตามชื่อเลยครับ firstletter ก็คือการควบคุมตัวหนังสือตัวแรกนั่นเอง
P:first-letter { font-size: 300%; float: left }
ที่ใช้บ่อยๆ ก็คือการควบคุมลิ้งค์ ส่วน first line and first letter ก็ลองนำไปใช้กันดูครับ
Grouping คือ การรวมกลุ่มนั่นเอง เช่น
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
ลักษณะนี้หมายถึง H1, H2, H3, H4, H5, H6จะมี สีแดง และฟ้อนต์แบบ sans-serif เอาไว้แยกส่วนที่ซ้ำๆกัน ออกมา เพื่อลดปริมาณโค้ด จากนั้น คุณค่อยกำหนดขนาดของ H1, H2, H3, H4, H5, H6 แต่ละอันไว้ด้านล่าง
คุณไม่จำเป็นต้องเขียน ซ้ำกันบ่อยๆ หากอันไหน มีลักษณะเหมือนกัน ก็แทรกเข้าไปแล้ว คั่นด้วย , ได้เลย
#leftnav, .rightnav a{
color:red;
}
แปลว่า ภายในขอบเขต id=”leftnav” และ ลิ้งค์ที่อยู่ใน ขอบเขต class=”rightnav” จะมีสีแดง
สร้างเว็บไซต์แบบ Tableless
Tableless คืออะไร? หลายคนอาจจะสงสัยเมื่อได้ยินคำนี้เป็นครั้งแรก ถ้าแปลกันแบบกำปั้นทุบดินก็จะมีความหมายว่า “ไม่มีตาราง” แต่เมื่อคำว่า Tableless ปรากฎอยู่ในเรื่องของการสร้างเว็บไซต์ เราก็พอที่จะแปลความหมายของคำว่า Tableless ได้ว่า เป็น “การพัฒนาเว็บไซต์โดยไม่ใช้ตาราง” นั้นเอง
แต่เดิมที่นักพัฒนาเว็บหลายคนคงใช้แท็ก <table> ในการจัดการโครงสร้างของเว็บ ซึ่งจริงๆ แล้วตารางควรจะถูกใช้เมื่อต้องการนำเสนอข้อมูลที่เป็นกลุ่มก้อนมากกว่า เช่น การแสดงรายการผลสอบของวิชาหนึ่ง หากเราจัดข้อมูลใส่ในตาราง ผลที่ได้ก็จะประกอบด้วยคอลัมน์ของ รหัสนักเรียน ชื่อนักเรียน คะแนนที่ได้ หรือเกรดที่ได้ ส่วนการควบคุมการแสดงผลอื่นๆ เราก็ใช้ eXtensible HyperText Markup Language (XHTML) และ Cascading Style Sheets (CSS) แทนนั้นเอง
สำหรับเทคนิค Tableless นี้ บางคนก็เรียกว่า Tableless layout หรือไม่ก็ CSS Layout เพราะเราจะใช้ CSS เข้ามาแสดงบทบาทแทนที่ตารางในการจัดการโครงสร้างเว็บไซต์ โดย CSS นั้นจะทำการควบคุมแท็กต่างๆ เช่น <div> หรือ <span> ว่าควรจะมีขนาดเท่าใด ตำแหน่งอยู่ตรงไหน ใช้รูปแบบอักษรอะไร ขนาดเท่าไร ใช้สีอย่างไร ฯลฯ ดังนั้นการใช้เทคนิค Tableless ในการพัฒนาเว็บไซต์นี้จะได้ผลลัพธ์ที่สำคัญมากประการหนึ่งคือ การแยกแยะส่วนข้อมูล และส่วนที่ใช้ควบคุมการแสดงผลออกจากกัน เมื่อต้องการแก้ไขส่วนของการแสดงผลเราก็เพียงเข้าไปแก้ในส่วนที่ใช้ควบคุมซึ่งในที่นี้ก็คือ CSS นั้นเอง
เพราะฉะนั้นเราสามารถสรุปได้ว่าการออกแบบและพัฒนาเว็บไซต์ด้วยเทคนิค Tableless นั้น เราไม่ใช่จะไม่ใช้ Table เลย Table หรือตารางนั้นควรจะทำหน้าที่เฉพาะของมันนั้นก็คือ ใช้ในการแสดงข้อมูลที่มีความเกี่ยวเนื่องกัน เช่นตารางที่ใช้แสดงข้อมูลชื่อของสินค้า รหัสสินค้า ราคา และแหล่งผลิตเป็นต้น หรือใช้ในการแสดงข้อมูลต่างๆที่สมควรจะอยู่ในตาราง แต่จะไม่ใช่ในการควบคุมตำแหน่งการแสดงผลของวัตถุต่างๆ บนเว็บ
การศึกษาการใช้เทคนิค Tableless ในการพัฒนาเว็บไซต์นั้น จำเป็นที่จะต้องมีความรู้พื้นฐานในเรื่องของ CSS มาก่อน และควรทำการศึกษาตัวอย่างจากเว็บไซต์ที่ใช้ Tableless ในการพัฒนา เพื่อรวบรวมแนวคิดต่างๆในการออกแบบเพื่อใช้ในการพัฒนาต่อไป เช่น http://www.cssplay.co.uk, http://www.csszengarden.com, และ http://www.oswd.org เป็นต้น
บทความโดย : นฤพล ตั้งตรีรัตน์
บริษัท โวเน่ จำกัด(http://www.wone.co.th)
