ก่อนที่จะไปสู่การสร้าง header, index, page หรือ sidebar เรามาดู HTML ตัวอย่างกันก่อน เพื่อนำไปใช้ในส่วนต่อไปของบทความ ในที่นี้ใช้เป็น XHTML 1.0 Strict (อยากใช้ HTML5 แต่ยังงงกับการใช้ tag บาง tag เช่น article กับ section ว่าใช้อย่างไรกันแน่ เลยใช้ XHTML ไปก่อน) แล้วบันทึกเป็น index.php โดยมีโครงสร้างคร่าว ๆ ดังนี้
<!--Begin Header (ส่วนหัว) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="th" xml:lang="th"> <head profile="http://gmpg.org/xfn/11"> <title>My Blog</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>Blog ของผมครับ</h1> <div id="topnav"> </div> <!--#topnav--> </div> <!--End Header--> <!--Begin Content (ส่วนเนื้อหา) --> <div id="content"> ส่วนเนื้อหา </div> <!--End Content--> <!--Begin Sidebar (ส่วนเมนู) --> <div id="nav"> ส่วนนำทางหรือเมนู </div> <!--End Sidebar--> <!--Begin Footer (ส่วนล่าง) --> </div> <!--#wrapper--> <div id="footer"> Copyright © 2011 My Blog </div> <!--End Footer--> </body> </html>
การสร้าง Header
ให้ copy ส่วนของ html ที่อยู่ระหว่าง tag <!–Begin Header (ส่วนหัว) –> และ <!–End Header–> คือในบรรทัดที่ 1 ถึงบรรทัดที่ 17 ในตัวอย่างไปใส่ไว้ใน header.php ดังนั้น header.php ในตอนนี้จะมี code ดังนี้
