---
description: '#HelloFront-end #HelloErmine #HelloWorld2021'
---

# Close Elements

## **Heading elements : \<h>**

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

## **Paragraphs : \<p>**

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

&#x20;         ตัวอย่าง

```markup
<!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>
```

&#x20;         ผลลัพธ์

![](https://lh5.googleusercontent.com/Akvc7mIvwol-DK-Ul47XFd1uLiDomAKeRoetZoZSMEQ0B6pormP4ocWX8VWPsW4g6CgzOP9vc-zMcUdgbA_xfb8mFKEeJDiGkTDn29psLbv44oiTi3iXhB6lNEs7tkt-k9bDP8Us)

## **Preformatted sections : \<pre>**

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

&#x20;         ตัวอย่าง

```markup
<!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>
```

&#x20;         ผลลัพธ์

![](https://lh6.googleusercontent.com/_5CAJMINAtIi9yC7C3fR2Ip9ywBlMQW8KXAGiUW2MWpcRigZLuxZFgo0wqrG4foV-jTD8ujn_3W57jQ7FvRQ2zEGxWUlNMMH-9ls4VCd1Jg7MtIFqmrK0HzRHale77IPppgISzpO)

## **Addresses : \<addresses>**

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

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

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

* **`<b>`**        กำหนดให้เป็นตัวหนา
* **`<i>`**        กำหนดให้เป็นตัวเอียง
* **`<sup>`**    กำหนดให้แสดงผลอยู่ด้านบน (แสดงผลในลักษณะเหมือนตัวชี้กำลัง)
* **`<sub>`**    กำหนดให้แสดงผลอยู่ด้านล่าง (แสดงผลในลักษณะของตัวห้อย)

## **Phrase elements : \<em>, \<strong>, \<abbr>, \<dfn>,  \<blockquote>, \<q>, \<cite>, \<code>, \<kbd>, \<var> และ \<samp>**&#x20;

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

* **`<em>`**            กำหนดให้เป็นตัวเอียง
* **`<strong>`**    กำหนดให้เป็นตัวหนา
* **`<abbr>`**        กำหนดให้ขีดเส้นจุดไข่ปลาใต้ข้อความนั้น ๆ
* **`<q>`**              เป็นการกำหนดเครื่องหมายฟันหนู ( "..." ) ครอบข้อความนั้น

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

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

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

```markup
<!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>
```

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-MfXveKMEARJyQbKJmAu%2F-MfY6VvAX16tjZOC4Sd_%2Fimage.png?alt=media\&token=e44a3eab-b69a-447c-9045-6206b5cfa711)

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

```markup
<!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>
```

![](https://lh4.googleusercontent.com/qjaEeRtc8zXacAVkEsm2oCi4wJtXKchr7eD1RDICfCOShBSk73D4iMbIZpMApKMEgenMIePG6gxj5r3NOC4m8_dLvJyFDgOze3X0a15DHkCCy6bKp8G4YlZFJMkt1kyVgzRGkvd3)

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

```markup
<!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>
```

![](https://lh3.googleusercontent.com/KzD0Ojgvk_jz4I_Uc4k2W4MSCh87pZiUXaZ2-tWwRFiMNLowHXBS0r-UHNdRehTVRTpysaz-yRjMaTj2AOw9A4sKLPn6SIix6fPcB0tTD7Km-czNykHyqgQ-uDwmwREc_XXw5_5O)

## &#x20;**Tables : \<table>, \<tr>, \<td>, \<th>**

&#x20;         ใช้ในการสร้างตาราง โดย

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

&#x20;         ตัวอย่าง

```markup
<!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>
```

&#x20;         ผลลัพธ์

![](https://lh5.googleusercontent.com/Hm5qIPTPUMBmFk5dTotSgXS-jgyGkCp0YmygW4462EB9ePk_fTuZYXbWfO0uXcWZH4YgGk6IdjI6PNIw_IT6tdY5quWKZhtfID6BH_b1-ZUJAUeFF6swcPdVvwIFkMPGRuMQaFRq)

## **Editing elements : \<ins> และ \<del>**

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

* **`<ins>`**    ใช้สำหรับขีดเส้นใต้ข้อความ
* **`<del>`**    ใช้ขีดฆ่าข้อความ

## **Grouping elements : \<div> และ \<span>**

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

* **`<div>`**      เป็นการจัดการในระดับ block-level
* **`<span>`**    เป็นการจัดการในระดับ inline-level

&#x20;           ตัวอย่าง

```markup
<!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>
```

&#x20;          ผลลัพธ์

![](https://lh4.googleusercontent.com/Sauilop90FaM8p3JpGYYjMQDWqcFp6F5yCH6hR8tKveylc-8kYGfc1H6e7sZbrZgPvJqpzewbN01E7Yu89yIgFuRCT-HydzekxnqF-kwkB9Kb5KFKitNbkSOLg9t7XAry4BzjLZT)

{% hint style="info" %}
**ศึกษาเพิ่มเติมได้ที่** [**HTML Block and Inline Elements (w3schools.com)**](https://www.w3schools.com/html/html_blocks.asp)
{% endhint %}

## **Anchor element : \<a>**

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

### **Internal link**

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

&#x20;         ตัวอย่าง

```markup
<!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**

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

&#x20;         ตัวอย่าง

```markup
<!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**

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

### **iframe element :** `<iframe>`

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

&#x20;          ตัวอย่าง

```markup
<!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>
```

&#x20;          ผลลัพธ์

![](https://lh4.googleusercontent.com/o2VnD-DgYMq5jppTQWHLwyAyO19YYLWL5eiAQqTf1b7TE9Ubn8mxbylDgcDisOaytB2chgMGmeZKij4iVbavCDfgYBC4sIHXlpoqVtNxhOxSemdyJI8RSki0ZAtqYx2m64im5zpM)

{% hint style="info" %}
**เนื้อหาในส่วนนี้น้องสามารถศึกษาเพิ่มเติมได้ที่** [**HTML YouTube Videos (w3schools.com)**](https://www.w3schools.com/html/html_youtube.asp) **หรือที่หัวข้อ HTML Multimedia ใน** [**HTML Tutorial (w3schools.com)**](https://www.w3schools.com/html/default.asp)
{% endhint %}

\
