HTML Layout Elements and Techniques

เราสามารถจัดรูปแบบหน้าเว็บที่แสดงให้มีหลายคอลัมน์ได้ โดยให้มีรูปแบบหน้าเว็บอย่าง Magazine หรือหนังสือ หรือรูปแบบอื่นๆ ที่ต้องการได้

ตัวอย่างรูปแบบหน้าเว็บที่แสดง

HTML Layout Elements

HTML มี elements มากมายที่ใช้กำหนดส่วนต่างๆ ของหน้าเว็บ

<header> ใช้กำหนดส่วนหัวของเอกสารหรือส่วนของหน้าเว็บ
<nav> ใช้กำหนดในส่วนของลิงก์
<section> ใช้กำหนดส่วนในส่วนของเอกสาร
<article> ใช้กำหนดเนื้อหาอิสระ หรือเนื้อหาของตัวเอง อย่างช่าว หรือบทความเป็นต้น
<aside> ใช้กำหนดเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลักที่อยู่รอบๆ หรือใช้เป็นส่วนของ sidebar ก็ได้
<footer> ใช้กำหนดส่วนท้ายของหน้าเว็บ
<detail> ใช้กำหนดรายละเอียดเพิ่มเติม สามารถเปิดหรือปิดก็ได้ตามต้องการ
<summary> กำหนดส่วน header ของ tag detail

เทคนิคการใช้ HTML Layout

วิธีจัดวางหรือรูปแบบ HTML Layout มีวิธีการสร้างคอลัมน์หลายๆ คอลัมน์อยู่ 4 วิธี แต่ละวิธีก็มีข้อดีและข้อเสียแตกต่างกันไป

CSS framework
CSS float property
CSS flexbox
CSS grid

CSS Frameworks

ถ้าอยากจะสร้าง Layout เร็วๆ สามารถใช้ CSS Framework จาก w3.css หรือ Bootstrap

CSS Float Layout

หากจะใช้ property CSS float ก็ไม่แปลกอะไร ซึ่งถือเป็นเรื่องปกติอยู่แล้ว และการเรียนรู้เรื่อง float นั้นก็ง่ายมาก เพียงแต่คุณต้องจำเอาไว้ว่า property float และ clear ทำงานอย่างไร

ข้อเสีย: elements Floating นั้นจะเชื่อมต่อกับเอกสารทั้งหมด ดังนัั้นจะไม่สามารถยืดหยุ่นได้

ตัวอย่างการเขียน

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style ของ header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* สร้าง 2 columns/boxes โดยใช้ float*/
nav {
  float: left;
  width: 30%;
  height: 300px; /*ใช้เฉพาะการสาธิตเท่านั้น ควรลบออก*/
  background: #ccc;
  padding: 20px;
}

/* Style ของรายการภายในเมนู */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* ใช้เฉพาะการสาธิตเท่านั้น ควรลบออก */
}

/* ล้างค่า floats หลัง columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style ของ footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - สร้าง 2 columns/boxes ให้ซ้อนทับกันหากขนาดหน้าจอมีขนาดเล็ก */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<h2>CSS Layout Float</h2>
<p>จากตัวอย่างนี้ ได้สร้าง header, คอลัมน์ 2 คอลัมน์และส่วน Footer

<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    <p>London เป็นเมืองหลวงของประเทศอังกฤษ เป็นเมืองที่มีประชากรมากที่สุดในอังกฤษโดยมีประมาณ 13 ล้านคน</p>
    <p>London ตั้งอยู่ริมฝั่งแม่น้ำ Thames มากว่า 2 พันปีหากมองย้อนกลับไปในประวัติศาสตร์ ได้มีการกล่าวว่า London ถูกพบโดย Romans และมีชื่อว่า Londoninium </p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

ผลการแสดงหน้าเว็บของโค้ดด้านบน

html-layout-elements-and-techniques-003 - HostAtom Knowledge Base

CSS Flexbox Layout

Flexbox จะช่วยให้ element ต่างๆ จะช่วยให้ Page Layout แสดงออกมาได้ตามขนาดของหน้าจอหรืออุปกรณ์ที่ใช้ได้

ตัวอย่างการเขียน

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style ของ header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* สิ่งที่ต้องใส่ใน flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

/* Style ของเมนู menu */
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
  padding: 20px;
}

/* Style ของ List ที่อยู่ใน menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

/* Style ของ content */
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Style ของ footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - สร้าง menu กับ content  ให้อยู่ข้างบนต่อกัน แทนที่จะอยู่ข้างกัน */
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h2>CSS Layout Flexbox</h2>
<p>จากตัวอย่างนี้ เราได้สร้าง header, column 2 columns และ Footer </p>
<p><strong>Note:</strong> Flexbox ไม่รองรับการทำงานบน Internet Explorer 10 และ versions ก่อนหน้านี้.</p>

<header>
  <h2>เมือง</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    <p>London เป็นเมืองหลวงของประเทศอังกฤษ ซึ่งมีประชากรมากที่สุด โดยมีประมาณ 13 ล้านคน</p>
    <p>London ตั้งอยู่ริมฝั่งแม่น้ำ Thames มากว่า 2 พันปี หากมองย้านกลับไปในอดีต London ถูกพบโดย Romans และถูกเรียกว่า Londinium </p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

ผลการแสดงหน้าเว็บของโค้ดด้านบน

html-layout-elements-and-techniques-004 - HostAtom Knowledge Base

CSS Grid Layout

ด้วย CSS Grid Layout จะเป็นการนำเสนอรูปแบบเว็บด้วยระบบ grid-based layout ทำให้ง่ายต่อการออกแบบเว็บเพจโดบที่ไม่ต้องใช้ float หรือ positioning

< บทความก่อนหน้า

บทความถัดไป >

บริการตลอด 24 ชั่วโมง

0-2107-3466