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