Close Elements

#HelloFront-end #HelloErmine #HelloWorld2021

Heading elements : <h>

<hn> เป็น tag ที่ใช้ในการกำหนดขนาด content โดย n เป็นตัวเลข 1-7 ใช้กำหนดขนาดเรียงจากใหญ่ไปเล็ก เพราะถือว่า 1 สำคัญสุดต้องมีขนาดใหญ่สุด

Paragraphs : <p>

<p> ใช้ในการจัดหน้าให้ content ที่อยู่ระหว่าง tag เปิดและปิด อยู่เป็นกลุ่มแยกออกจาก content ภายนอก คล้าย ๆ กับการแบ่งเนื้อหาเป็นย่อหน้าเป็น block แค่อาจไม่ได้ย่อหน้าเข้าไปจริง ๆ

ตัวอย่าง

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
    <p>This is a paragraphhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
    <p>This is another paragraphhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</body>
</html>

ผลลัพธ์

Preformatted sections : <pre>

<pre> ใช้สำหรับกำหนดรูปแบบการแสดงผลบนหน้าเว็บเพจ โดยทุก content ที่แสดงผลบนเว็บเพจจะมีรูปแบบที่เหมือนกับที่เราได้จัดไว้ในการเขียน code มักใช้กับข้อความที่เป็นสูตรทางคณิตศาสตร์และวิทยาศาสตร์

ตัวอย่าง

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
     <pre>
        <h3>ในการเปลี่ยนแปลงหน่วยวัดอุณหภูมิจากหน่วยหนึ่งไปยังอีกหน่วยหนึ่งใช้สูตรความสัมพันธ์ดังนี้</h3>

                               oC/5 = oF -32/9 =  K - 273/5

        ตัวอย่าง  อุณหภูมิร่างกายของคนเราปกติคือ 37 องศาเซลเซียส จะมีค่าเท่าใดในหน่วยองศาฟาเรนไฮต์
            วิธีทำ   จากสูตร   oC/5   =  oF-32/9
                            37/5  =  oF-32/9
                         7.4 x 9  =  oF - 32
                           66.6   =  oF - 32 
                             oF   =    66.6 + 32
                                  =    98.6   oF
            ดังนั้นอุณหภูมิร่างกายของคนปกติจะเท่ากับ  98.6  ฟาเรนไฮต์
    </pre>
</body>
</html>

ผลลัพธ์

Addresses : <addresses>

<addresses> ใช้บอกขอบเขตว่า content ภายใต้<addresses>...</addresses> เป็น content ที่มีเนื้อหาเกี่ยวกับข้อมูลที่อยู่หรือข้อมูลติดต่อ

Presentational elements : <b>, <i>, <u>, <s>, <tt>, <sup>, <sub>, <strike>, <big> และ <small>

ใช้สำหรับกำหนด/จัดการการแสดงผลของข้อความต่าง ๆ เช่น

  • <b> กำหนดให้เป็นตัวหนา

  • <i> กำหนดให้เป็นตัวเอียง

  • <sup> กำหนดให้แสดงผลอยู่ด้านบน (แสดงผลในลักษณะเหมือนตัวชี้กำลัง)

  • <sub> กำหนดให้แสดงผลอยู่ด้านล่าง (แสดงผลในลักษณะของตัวห้อย)

Phrase elements : <em>, <strong>, <abbr>, <dfn>, <blockquote>, <q>, <cite>, <code>, <kbd>, <var> และ <samp>

ใช้ในการกำหนด/จัดการการแสดงผลของข้อความต่าง ๆ เช่น

  • <em> กำหนดให้เป็นตัวเอียง

  • <strong> กำหนดให้เป็นตัวหนา

  • <abbr> กำหนดให้ขีดเส้นจุดไข่ปลาใต้ข้อความนั้น ๆ

  • <q> เป็นการกำหนดเครื่องหมายฟันหนู ( "..." ) ครอบข้อความนั้น

Lists : <ul>, <ol>, <li>, <dl>, <dt> และ <dd>

ใช้สร้างรายการในรูปแบบต่าง ๆ ได้แก่

รายการแบบไม่มีลำดับ : <ul>, <li>

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</body>
</html>

รายการแบบมีลำดับ : <ol>, <li>

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</body>
</html>

รายการแบบคำอธิบาย : <dl>, <dt>, <dd>

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
    <dl>
        <dt>Coffee</dt>
            <dd>- black hot drink</dd>
        <dt>Milk</dt>
            <dd>- white cold drink</dd>
    </dl>
</body>
</html>

Tables : <table>, <tr>, <td>, <th>

ใช้ในการสร้างตาราง โดย

  • <table> ภายใต้ tag นี้ จะเป็นส่วนของตารางทั้งหมด

  • <tr> ภายใต้ tag นี้ จะเป็นเนื้อหาที่อยู่ในแถวเดียวกันทั้งหมด

  • <td> ภายใต้ tag นี้ จะเป็นเนื้อหาที่อยู่ในคอลัมน์

  • <th> ภายใต้ tag นี้ จะเป็นเนื้อหาที่อยู่ในคอลัมน์ แต่เนื้อหาจะแสดงผลในรูปของตัวหนาเป็นเหมือนหัวข้อ

ตัวอย่าง

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <style>
        table,th,td {
            border: 1px solid brown;
        }
    </style>
</head>

<body>
   <table>
        <tr>
          <th>menu</th>
          <th>pice</th>
        </tr>
        <tr>
          <td>Coffee</td>
          <td>45</td>
        </tr>
        <tr>
            <td>Tea</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Milk</td>
            <td>40</td>
        </tr>
      </table>
</body>
</html>

ผลลัพธ์

Editing elements : <ins> และ <del>

ใช้สำหรับจัดการกับข้อความ

  • <ins> ใช้สำหรับขีดเส้นใต้ข้อความ

  • <del> ใช้ขีดฆ่าข้อความ

Grouping elements : <div> และ <span>

ใช้ในการจัดกลุ่มข้อมูลและกระทำกับกลุ่มนั้น ๆ ตามที่ attribute หรือ ตามที่ CSS ได้กำหนดไว้

  • <div> เป็นการจัดการในระดับ block-level

  • <span> เป็นการจัดการในระดับ inline-level

ตัวอย่าง

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
    <div style="color: blue;">
    <h3>London</h3>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
         with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history
         going back to its founding by the Romans, who named it Londinium.</p>
  </div> 
<p>My mother has <span style="background-color:yellow;font-weight:bold">yellow</span> eyes 
    and my father has <span style="background-color:pink;font-weight:bold">pink</span> eyes.</p>
</body>
</html>

ผลลัพธ์

ศึกษาเพิ่มเติมได้ที่ HTML Block and Inline Elements (w3schools.com)

Anchor element : <a>

มักนำมาใช้คู่กับ href attribute เพื่อใช้ในการเชื่อมโยงเว็บเพจไปยังที่/สิ่งต่าง ๆ โดยการเชื่อมโยงนี้จะเรียกว่า hyperlink ซึ่งการลิงก์แบ่งเป็นสองประเภท คือ

Internal link

เป็นการลิงก์ไปยังหน้าอื่น ๆ ในหน้าเว็บไซต์เดียวกัน มักเก็บไว้ใน server หรือแหล่งเก็บข้อมูลเดียวกัน มักเป็นการลิงก์โดยใช้ path name

ตัวอย่าง

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
     <a href="/HelloWorldCamp/page2.html"> domain name and path name </a>
</body>
</html>

External link

เป็นการลิงก์ไปยังเว็บไซต์หรือเว็บเพจอื่น ๆ ที่เราไม่ได้ทำอยู่ มักเป็นการลิงก์โดยใช้ URL ที่เป็น domain name และ path name

ตัวอย่าง

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
     <a href="https://www.w3schools.com/"> only domain name </a>
    <a href="https://www.w3schools.com/html/html_basic.asp"> domain name and path name </a>
</body>
</html>

HTML Multimedia

ในส่วนนี้เป็นเนื้อหาที่มีความเกี่ยวข้องกับการนำเอา Multimedia ต่าง ๆ ได้แก่ video, audio, plug-ins, youtube มาใช้ในเว็บเพจของเรา โดยพี่จะยกตัวอย่างการนำวิดีโอจาก youtube มาใช้แสดงบนเว็บเพจ ซึ่งเราจำเป็นที่จะต้องใช้

iframe element : <iframe>

  • src attribute ใช้ในการกำหนด URL ของ วิดีโอที่เรานำมาจาก youtube

  • width และ height attributes ใช้ในการกำหนดขนาดความกว้างและความสูงของวิดีโอที่จะแสดงผลบนเว็บเพจ

ตัวอย่าง

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>

    <iframe width="420" height="315" 
    src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>

</body>
</html>

ผลลัพธ์

เนื้อหาในส่วนนี้น้องสามารถศึกษาเพิ่มเติมได้ที่ HTML YouTube Videos (w3schools.com) หรือที่หัวข้อ HTML Multimedia ใน HTML Tutorial (w3schools.com)

PreviousWhat are Elements and Tags?NextEmpty Elements

Last updated

Was this helpful?