ตัวอย่างการใช้งาน แท็ก HTML5 อย่างถูกวิธี

ตัวอย่างการใช้งาน แท็ก HTML5 อย่างถูกวิธี

ตัวอย่างการใช้งาน แท็ก HTML5 อย่างถูกวิธี- wynnsoft solution company limited

ตัวอย่างการใช้งาน แท็ก HTML5 อย่างถูกวิธี

ตัวอย่างการใช้งาน แท็ก HTML5 อย่างถูกวิธี
2016-09-06 Pijittra.ict5

ตัวอย่างการใช้งาน แท็ก HTML5 อย่างถูกวิธี

ตัวอย่างการใช้งาน แท็ก HTML5 อย่างถูกวิธี

 

HTML5 Elements

    มารู้จักกับ Elements ต่างๆ เพื่อนำมาใช้ในการทำเว็บไซต์ให้ง่ายขึ้น  Elements ที่พบเห็นการใช้งานบ่อย คือ <header> <nav> <main> <footer> 

เราจะมาทำความรู้จักและวีธีใช้งาน ขอเริ่มที่ตัวแรกกันเลย

 

<header> คือ จุดเริ่มต้นของหน้าเว็บ  เราสามารถเริ่มต้นด้วยอะไรก็ได้ เช่นต้องการให้แสดงหัวข้อหลักของเว็บไซต์ หรือจะเป็นชื่อ เว็บไซต์ ตัวอย่างเช่น

 

<header>

<h1>HTML5 Elements</h1>

<p>Elements ที่น่าสนใจ</p>

</header>

 

ซึ่งการเริ่มต้นด้วย <header> ที่น่าสนใจจะทำให้คนเข้ามาที่เว็บไซต์ของเรามากขึ้นด้วย

 

<nav> คือ ส่วนของการเชื่อมโยงการนำทางไปยังส่วนต่างๆภายในเว็บไซต์หรือไปยังภายนอกเว็บไซต์ เรียกง่ายๆคือส่วนที่ไว้เมนูต่างๆ ตัวอย่างเช่น

 

<nav>

  <a href="http://www.w3schools.com">มาตรฐานในการเขียนภาษาต่างๆ ในการทำเว็บไซต์</a> |

  <a href="http://www.wynnsoft-solution.com">รับทำเว็บไซต์ และ SEO</a> |

  <a href="/css/">css</a> |

  <a href="/jquery/">jQuery</a>

</nav>

 

การจัดกลุ่มเมนูหรือการนำทางไปส่วนต่างๆ จะทำให้ผู้เข้ามาชมเว็บไซต์สะดวกต่างการใช้งาน

 

<main> คือ ส่วนที่ใช้แสดงเนื้อต่างๆภายในเว็บไซต์ ตัวอย่างเช่น

 

<main>

  <h1>Web Browsers</h1>

  <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

 

  <article>

    <h1>Google Chrome</h1>

    <p>Google Chrome is a free, open-source web browser developed by Google,

    released in 2008.</p>

  </article>

 

  <article>

    <h1>Internet Explorer</h1>

    <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>

  </article>

 

  <article>

    <h1>Mozilla Firefox</h1>

    <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>

  </article>

</main>

 

<footer> คือ ส่วนสุดท้ายของเว็บไซต์  ตัวอย่างเช่น

 

<footer>

  <p>รับออกแบบจัดทำเว็บไซต์ และ SEO</p>

  <p>ข้อมูลติดต่อ: <a href="http://www.wynnsoft-solution.com">

  www.wynnsoft-solution.com</a>.</p>

</footer>

 

ซึ่งจะนิยมแสดงข้อมูลในการใช้ติดต่อ

 

    HTML5 ยังมี Elements ต่างๆ ให้นำมาใช้งานการเลือกใช้งาน Elements ต่างๆขึ้นอยู่กับวัตถุประสงค์ที่ต้องการใช้งาน ทั้งนี้การใช้งานแต่เพียง Elements นั้นยังไม่เพียงพอในการทำเว็บไซต์ให้สวยงามยังต้องใช้ css หรือ jquery เข้ามาช่วยให้การทำเว็บไซต์