HTML - เลย์เอาต์

เค้าโครงหน้าเว็บเป็นสิ่งสำคัญมากในการทำให้เว็บไซต์ของคุณดูดีขึ้น ต้องใช้เวลาพอสมควรในการออกแบบเค้าโครงของเว็บไซต์ด้วยรูปลักษณ์ที่สวยงาม

ปัจจุบันเว็บไซต์สมัยใหม่ทั้งหมดใช้ CSS และเฟรมเวิร์กที่ใช้ JavaScript เพื่อสร้างเว็บไซต์ที่ตอบสนองและไดนามิก แต่คุณสามารถสร้างเลย์เอาต์ที่ดีได้โดยใช้ตาราง HTML แบบง่ายหรือแท็กการแบ่งร่วมกับแท็กการจัดรูปแบบอื่น ๆ บทนี้จะให้ตัวอย่างบางส่วนเกี่ยวกับวิธีสร้างเค้าโครงที่เรียบง่าย แต่ใช้งานได้จริงสำหรับหน้าเว็บของคุณโดยใช้ HTML แท้และแอตทริบิวต์

เค้าโครง HTML - การใช้ตาราง

วิธีที่ง่ายและเป็นที่นิยมที่สุดในการสร้างเลย์เอาต์คือการใช้แท็ก HTML <table> ตารางเหล่านี้จัดเรียงเป็นคอลัมน์และแถวดังนั้นคุณสามารถใช้แถวและคอลัมน์เหล่านี้ได้ในแบบที่คุณต้องการ

ตัวอย่าง

ตัวอย่างเช่นตัวอย่างเค้าโครง HTML ต่อไปนี้ทำได้โดยใช้ตารางที่มี 3 แถวและ 2 คอลัมน์ แต่คอลัมน์ส่วนหัวและส่วนท้ายครอบคลุมทั้งสองคอลัมน์โดยใช้แอตทริบิวต์ colspan -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เค้าโครงหลายคอลัมน์ - การใช้ตาราง

คุณสามารถออกแบบหน้าเว็บของคุณเพื่อใส่เนื้อหาเว็บของคุณในหลาย ๆ หน้า คุณสามารถเก็บเนื้อหาของคุณไว้ในคอลัมน์กลางและคุณสามารถใช้คอลัมน์ด้านซ้ายเพื่อใช้เมนูและคอลัมน์ด้านขวาสามารถใช้เพื่อวางโฆษณาหรือสิ่งอื่น ๆ ได้ เค้าโครงนี้จะคล้ายกับที่เรามีในเว็บไซต์ tutorialspoint.com

ตัวอย่าง

นี่คือตัวอย่างการสร้างเลย์เอาต์สามคอลัมน์ -

<!DOCTYPE html>
<html>

   <head>
      <title>Three Column HTML Layout</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
				
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เลย์เอาต์ HTML - การใช้ DIV, SPAN

องค์ประกอบ <div> เป็นองค์ประกอบระดับบล็อกที่ใช้สำหรับการจัดกลุ่มองค์ประกอบ HTML แม้ว่าแท็ก <div> เป็นองค์ประกอบระดับบล็อก แต่องค์ประกอบ HTML <span> จะใช้สำหรับการจัดกลุ่มองค์ประกอบที่ระดับอินไลน์

แม้ว่าเราจะสามารถสร้างเลย์เอาต์ที่สวยงามได้ด้วยตาราง HTML แต่ตารางไม่ได้ถูกออกแบบมาเพื่อเป็นเครื่องมือจัดวาง ตารางเหมาะกับการนำเสนอข้อมูลแบบตารางมากกว่า

Note - ตัวอย่างนี้ใช้ Cascading Style Sheet (CSS) ดังนั้นก่อนที่จะเข้าใจตัวอย่างนี้คุณต้องมีความเข้าใจมากขึ้นเกี่ยวกับการทำงานของ CSS

ตัวอย่าง

ที่นี่เราจะพยายามบรรลุผลลัพธ์เดียวกันโดยใช้แท็ก <div> ร่วมกับ CSS สิ่งที่คุณทำได้โดยใช้แท็ก <table> ในตัวอย่างก่อนหน้านี้

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2007 Tutorialspoint.com
            </center>
         </div>
			
      </div>
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสามารถสร้างเลย์เอาต์ที่ดีขึ้นได้โดยใช้ DIV, SPAN พร้อมกับ CSS สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ CSS โปรดดู CSS Tutorial