การเขียน HTML ที่คนทำเว็บ รุ่นใหม่ ควรรู้
การเขียนเว็บถึงแม้สมัยนี้จะมี cms หลายตัวให่เราเลือกใช้ แต่ cms เป็นเพียงเครื่องมือที่ช่วยเราเท่านั้น พื้นฐานในการเขียน code html เบื้องต้นนั้นเราควรจะรู้ไว้บ้างเพื่อเป็นกรณีศึกษาและสามารถพัฒนาตัวเองไปสู่ระดับสูงขึ้นได้ อย่างเพิกเฉยต่อ code หรือละเลย มองข้ามมันไป หากคุณรู้วิธีเขียน code คุณย่อมไปได้ไกลกว่าคนที่ไม่รู้
1. การเขียน code HTML ต้องมีการปิด tag เช่น
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
แบบนี้ ถือว่าผิด จะเห็นว่ายังขาด code อีกชุดหนุ่งคือ UL หรือ OL และการเขียน li ยังไม่การปิด tag ซึ่งบางทีสามารถทำงานได้แต่การตรวจสอบจะไม่ผ่านมาตรฐาน
การเขียนที่ถูกต้อง
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
2. อย่าใส่รูปแบบลงในไฟล์โดยตรงให้ไปเขียนไว้ที่ css ไฟล์
<p style="color: red;">หากคุณใช้โฮสกับเรา คุณได้รับมากกว่าบริการที่ดี</p>
จาก code บนเป็นการกำหนดรูปบบให้ตัวหนังสือเป็นสีแดง หากคุณเขียนแบบนี้ตัวหนังสือใดๆที่คุณต้องการให้เป็นสีแดง คุณต้องเขียน code แบบนี้ทุกครั้ง หรือทุกบันทัด ให้คุณใส่เป็น css แทน เ่ช่น
#someElement > p {
color: red;
}
3. ให้ใส่ คำสั่งเรียกใช้งาน ไฟล์ css ไว้บนสุดเสมอ
การเรียกไฟล์ css เป็นไฟลืที่ใช้เรียกการแสดงผล สี รูป ดังนั้นควรเอาไว้บนหัวของไฟลืเพื่อให้เรียกขึ้นมาก่อน
ตัวอย่าง
<head>
<title>Hosting Colorpack Host For Opensource CMS</title>
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/anotherFile.css" />
</head>
4. ไฟล์ จาวาสคริป ( Javascript ) ทั้งหมดให้เอาไว้ท้ายสุดของไฟล์
เนื่องจากไฟล์ จาวาสคริป ( Javascript ) เป็นไฟล์ที่โหลดนาน ดังนั้นควรเอาไว้ท้ายสุดเพื่อให้หน้่าเว็บแสดงผลออกมาก่อนแล้วค่อยเรียกใช้สคริป
ตัวอย่าง
<p>โฮส สำหรับคนใช้ Opensource เช่น ๋joomla! mambo wordpress drupal phpbb smf magento</p>
<script type="text/javascript" src="/path/to/file.js"></script>
<script type="text/javascript" src="/path/to/anotherFile.js"></script>
</body>
</html>
5. การเขียน code Tag Name ต่างๆ ควรใช้ตัวอักษรพิมพ์เล็ก
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
ควรใช้
<div>
<p>Here's an interesting fact about corn. </p>
</div>
6. ควรใช้ H1 - H6 Tags เพื่อผลดีต่อ SEO
tag h มีทั้งหมด 6 tag ควรใช้ให้เป็นประโยชน์ ตั้งแต่ h1,h2,h2,h3,h4,h5,h6
<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>
7. เมนูควรใช้ Tag <ul> <li> แทน
ปรกติเราอาจทำเมนูแบบนี้
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
ให้เปลี่ยนเป็น
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
จะทำให้คุณสามารถสร้างรูปแบบของเมนูได้หลากหลายมากขึ้น
8. หากเราต้องการเขียน css บางชุดสำหรับ IE ทำอย่างไร
บ่อยครั้งที่ code css ที่เป้นมาตรฐาน IE อาจทำงานไม่เหมือนคนอื่น ให้คุณเขียนชุด css สำหรับ ie ไว้ อาจตั้งชื่อเป็น ie7.css
การเรียกใช้งาน
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/ie7.css" />
<![endif]-->
9. รูปทุกรูปต้องใส่ "Alt"
การใส่ alt นั้นจะช่วย ให้ผู้พิการตาบอดสามารถรู้ได้ว่ารูปนี้เป็นรูปอะไร นอกจากนั้นยังช่วยให้เว็บคุณมีคำค้นหามากขึ้น
การใส่ที่ไม่ดี
<IMG SRC="/cornImage.jpg" />
การใส่ที่ดี
<img src="/cornImage.jpg" alt="A corn field I visited." />
10. ลิ้งเชื่อมโยงต่างๆต้องใส่ "title"
การใส่ที่ไม่ดี
<a href="#">Home </a>
การใส่ลิ้งที่ดี
<a href="#" title"click to home">Home </a>
?
- Hits: 36387