Skip to main content

สรุปสั้น ๆ

สำหรับใครที่อยากมีเว็บไซต์เป็นของตนเอง แต่ไม่รู้จะเริ่มยังไงดี วันนี้เรามาลองเริ่มเขียน html กันดีกว่า เพื่อให้เราได้มองเห็นภาพได้เร็วยิ่งขึ้น ในที่นี้ เราได้นำตัวอย่างการเขียน Single Page เว็บไซต์ง่าย ๆ ในการศึกษาการวางโครงสร้างหน้าเว็บไซต์ ตั้งแต่เริ่มต้น จนเราได้หน้า Portfolio ของเรากัน มาเริ่มเขียนกันได้เลย !!

เริ่มต้นวางโครงสร้างหน้าเว็บ

ให้ทดลองนำโค้ดด้านล่างนี้ไปเปิดด้วย Editor ที่คุณมี

<!DOCTYPE html>
<html lang="th">

<head>
  <title>ชื่อเว็บไซต์</title>
</head>

<body>
  <!-- Nav bar -->
  <header>
   <nav>ส่วนหัวของเว็บไซต์ ใส่เว็บ โลโก้ และ เมนู</nav>
  </header>

  <!-- main -->
<main>
    <!-- hero section-->
    <section id="home">
     ส่วนแสดงแบนเนอร์ รูปภาพเด่น ๆ หริอข้อความไฮไลท์ที่ต้องการนำเสนอ
    </section>

    <hr />

    <!-- about us -->
  <article>
    <section id="aboutus">
    บทความสั้น ๆ เช่น ประวัติส่วนตัว ประสบการณ์ และบทความที่เกี่ยวข้อง 
    </section>

    <hr />

    <!-- portfolio -->
    <section id="portfolio">
      แกลลอรี่รูปภาพ
    </section>
  </article>
</main>

  <hr />

  <!-- contact -->
  <footer id="contact">
    ส่วนติดต่อเรา มีแบบฟอร์ม และลิงค์ภายในหน้า
  </footer>

</body>
</html>

ส่วน header

ส่วนนี้จะเป็นส่วนหัวของเว็บไซต์ เรามักจะใส่ โลโก้ ชื่อเว็บ หรือ เมนูลิงค์ที่ไปยังหน้าอื่น/หน้าเดียวกัน เราจะเขียนอยู่ใน Tag Element <header></header> และ เมนู เราจะเขียนอยู่ใน Tag Element <nav></nav> ให้ลอง Copy code นี้ไปเพิ่มตรงส่วน header ดูครับ

<header>
    <nav id="home">
      <h1>My website</h1>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#aboutus">About Us</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

ส่วน Hero Banner

ส่วน Banner หรือส่วนที่เราอยากให้เด่นสุดในหน้าเว็บ เรามักจะใส่รูปที่ดูสะดุดตา และข้อความ Hilight และปุ่มไปยังส่วนที่ต้องการนำเสนอหลัก เราจะเขียนอยู่ใน Tag Element <main></main> โดยแบ่งเป็น ส่วน ๆ ที่เรียกว่า Tag Element <section></section> ให้ลอง Copy code นี้ไปเพิ่มตรงส่วน section home ดูครับ

<main>
<section id="home">
      <img src="./img/profile.jpg" alt="profile" />
      <h2>Visual Designer & Art Director</h2>
      <p>Hi, I am Jack, focusing on creating emotional experiences</p>
      <button>Here Me</button>
</section>

Photo by Austin Distel on Unsplash

ส่วน About Us

ส่วนที่เราต้องการนำเสนอเป็นบทความสั้น ๆ เช่น ประวัติส่วนตัว ประสบการณ์ และบทความที่เกี่ยวข้อง เราจะเขียนอยู่ใน Tag Element <main></main> โดยแบ่งเป็น ส่วน ๆ ที่เรียกว่า Tag Element <article></article> ให้ลอง Copy code นี้ไปเพิ่มตรงส่วน article ดูครับ

  <article>
    <section id="aboutus">
        <h2>About My Self</h2>
        <p>
          I'm a Creative director based on New York, who loves clean, simple &
          unique desing. I also enjoy crafting...
        </p>

        <button>Download resume</button>

        <h3>Skill</h3>
        <ul>
          <li>User Reachers</li>
          <li>Web Design</li>
          <li>UI Design</li>
          <li>Illustration</li>
        </ul>
        <p>
          Proin laoreet elementum ligula, ac tincidunt lorem accumsan nec. Fusce
          eget urna ante. Donec massa velit, varius a accumsan ac, tempor
          iaculis massa. Sed placerat justo sed libero varius vulputate.
        </p>

        <h3>Experience</h3>
        <ul>
          <li>
            <strong>User Experience Designer</strong>
            <i>March 2020 - Present</i>
          </li>
          <li>
            <strong>UI Designer</strong>
            <i>March 2020 - Present</i>
          </li>
          <li>
            <strong>Illustration Artiest</strong>
            <i>March 2020 - Present</i>
          </li>
          <li>
            <strong>Graphic Designer</strong>
            <i>March 2020 - Present</i>
          </li>
        </ul>
    </section>
 <article>

ส่วนแสดงผลงานของเรา จะเป็น แกลลอรี่รูปภาพ เพื่อให้การเข้าถึงผู้ใช้งาน ( Accessibility ) เราจึงใส่รูปภาพอยู่ใน Tag Element <figure>,</figcaption> เพื่อให้รู้ว่าภาพเราตรงนี้้เป็นรูปเกี่ยวกับอะไร ให้ลอง Copy code นี้ไปเพิ่มตรงส่วน section portfolio ดูครับ

<section id="portfolio">
      <h2>Portfolio</h2>
      <h3>Crafted I have created</h3>

      <figure>
        <img src="./img/gallery1.jpg" alt="gallery1" />
        <figcaption>
          <h4>Project Name 1</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            massa velit, varius a accumsan ac, tempor iaculis massa. Sed
            placerat justo sed libero varius vulputate.
          </p>
      </figure>

      <figure>
        <img src="./img/gallery2.jpg" alt="gallery2" />
        <figcaption>
          <h4>Project Name 2</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            massa velit, varius a accumsan ac, tempor iaculis massa. Sed
            placerat justo sed libero varius vulputate.
          </p>
      </figure>

      <figure>
        <img src="./img/gallery3.jpg" alt="gallery3" />
        <figcaption>
          <h4>Project Name 3</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            massa velit, varius a accumsan ac, tempor iaculis massa. Sed
            placerat justo sed libero varius vulputate.
          </p>
      </figure>

      <figure>
        <img src="./img/gallery4.jpg" alt="gallery4" />
        <figcaption>
          <h4>Project Name 4</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            massa velit, varius a accumsan ac, tempor iaculis massa. Sed
            placerat justo sed libero varius vulputate.
          </p>
      </figure>
    </section>
</main>

Photo by Charles Deluvio on Unsplash

ส่วนติดต่อเรา ในที่นี้ได้เพิ่มแบบฟอร์มเพื่อให้ผู้สนใจสามารถติดต่อเราได้ และมีเมนูลิงค์ภายในหน้าเว็บ ห้ลอง Copy code นี้ไปเพิ่มตรงส่วน footer ดูครับ

<footer id="contact">
    <h2>contact</h2>
    <h3>
      I'm a desinger, based in San Francisco. Currently a freelancer. You can
      seer my hobbies on @Jack-Co and some photos on mee too.
    </h3>

    <hr />

    <form action="">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" />
      <br /><br />
      <label for="email">Email</label>
      <input type="email" id="email" name="email" />
      <br /><br />
      <label for="message">Message</label>
      <textarea id="message" name="message"></textarea>
      <br /><br />
      <input type="submit" value="Submit" />
    </form>

    <hr />

    <h1>My website</h1>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#aboutus">About Us</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <p>Copyright ©2023 All rights reserved</p>
  </footer>

ตัวอย่างเว็บไซต์ที่เสร็จแล้ว… https://ipeakajoo.github.io/portfolio-html-tutorial/

สรุป

เป็นยังไงกันบ้างครับ กับบทความนี้เราได้เริ่มต้นเรียนรู้ html กับเว็บ Portfolio แรกที่คุณได้ทดลองทำเอง หลังจากนี้ให้คุณทดลองแก้ข้อความหรือลิงค์รูปภาพดูครับ โดยศึกษาเพิ่มเติมได้ที่ W3C school ทุกคนสามารถเริ่มจากตรงนี้ หวังว่าบทความนี้จะเป็นจุดเริ่มต้นที่ดีในการเขียนเว็บของคุณ ลุย!!!

สุดเขตต์ พิทักษ์พลางกูร

Author สุดเขตต์ พิทักษ์พลางกูร

Junior frontend Designer

More posts by สุดเขตต์ พิทักษ์พลางกูร

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า