Home บทความดีๆ เทคนิค การทำเว็บการเขียน HTML ที่คนทำเว็บ รุ่นใหม่ ควรรู้

การเขียน HTML ที่คนทำเว็บ รุ่นใหม่ ควรรู้

เขียนโดย Host Admin
Posted in บทความ

การเขียนเว็บถึงแม้สมัยนี้จะมี 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"