BOSSZI HTML HTML5

HTML5

0 Comments

HTML5 บันทึกส่วนตัว

โครงสร้างภาษา

<!DOCTYPE html> 
<html>
     <head> <!-- ส่วนหัว  -->
  	<meta charset=”utf-8”>
   	<meta name=”viewport” content=”width=device-width,initial-scale=1”>
  	<title>ไตเติ้ลด้านบน</title>
     </head>
<body>
     เนื้อหาข้อความที่เราจะใส่
</body>
</html>
<!-- คอมเม้นข้อความ  -->

 


Tags และ Attribute

Heading Tag  <h1></h1>ใช้กำหนดขนาดเล็กใหญ่ของตัวอักษร

<h1>ข้อความ</h1>
<h2>ข้อความ</h2>
<h2>ข้อความ</h2>
<h2>ข้อความ</h2>
<h2>ข้อความ</h2>
<h6>ข้อความ</h6>

Paragraph Tag <p></p>ใส่ให้รู้ว่านี้คือเนื้อหาย่อหน้า

<p>ใส่เนื้อหาข้อความ</p>

<!– คอมเม้นข้อความ –> สำหรับอธิบายโค๊ดที่เราเขียนแต่จะไม่เอาไปแสดง

<!-- คอมเม้นข้อความ -->

ขีดเส้นใต้ <hr>

<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for creating Web pages.</p>
<hr>    <!-- ขีดเส้นยาว -->
<p>CSS is a language that describes how HTML elements are to be displayed on screen</p>
<hr>    <!-- ขีดเส้นยาว -->
<p>JavaScript is the programming language of HTML and the Web.</p>

ขึ้นบรรทัดใหม่ <br>

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

 


HTML Lists การเรียงลำดับข้อความ

<!DOCTYPE html>
<html>
    <body>
        <h4>An Unordered HTML List</h4>
        <ul>                <!-- การเรียงแบบ จุดกลมนำหน้า  -->
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ul>  

        <h4>An Ordered HTML List</h4>
        <ol>                <!-- การเรียงแบบ ตัวเลขนำหน้าอัตโนมัติ  -->
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol> 

        <h4>A Description List</h4>
        <dl>                <!-- การเรียงแบบ แสดงรายละเอียด  -->
            <dt>Coffee</dt>
            <dd>- black hot drink</dd>
            <dt>Milk</dt>
            <dd>- white cold drink</dd>
        </dl>
</body>
</html>

An Unordered HTML List

  • Coffee
  • Tea
  • Milk

An Ordered HTML List

  1. Coffee
  2. Tea
  3. Milk

A Description List

Coffee
– black hot drink
Milk
– white cold drink

 

Block-level  <div></div>    กล่องดิป จะมีผลรวมทั้งหมดที่มันคลุมใว้ เวลาที่เราทำหน้าเว็บเป็นกล่องๆ

<!DOCTYPE html>
<html>
    <body>
    <div> <!-- กล่องดิป -->
        <h2>London</h2>
            <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>
    </div>
</body>
</html>

London

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.


span <span></span> กล่องสเปน สำหรับกำหนดลักษณะเฉพาะของแต่ล่ะอย่าง

<!DOCTYPE html>
<html>
    <body>
        <h1>The span element</h1>
        <p>
            My mother has <span style="color:blue;font-weight:bold">blue</span> <!-- กล่องสเปน สำหรับกำหนดลักษณะเฉพาะของแต่ล่ะอย่าง -->
            eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.
        </p>
</body>

 

The span element

My mother has blue
eyes and my father has dark green eyes.


Tables ตาราง

<!DOCTYPE html>
<html>
<body>
    <h4>HTML Table</h4>
    <table>
        <tr>
            <th>ส่วนหัว 1</th>    <!-- ส่วนหัว -->
            <th>ส่วนหัว 2</th>
            <th>ส่วนหัว 3</th>
        </tr>
        <tr>
            <td>ข้อมูลชุดที่ 1 แถว 1</td> <!-- ข้อมูล -->
            <td>ข้อมูลชุดที่ 1 แถว 2</td>
            <td>ข้อมูลชุดที่ 1 แถว 3</td>
        </tr>
        <tr>
            <td>ข้อมูลชุดที่ 2 แถว 1</td> <!-- ข้อมูล -->
            <td>ข้อมูลชุดที่ 2 แถว 2</td>
            <td>ข้อมูลชุดที่ 2 แถว 3</td>
        </tr>
    </table>
</body>
</html>

HTML Table

ส่วนหัว 1 ส่วนหัว 2 ส่วนหัว 3
ข้อมูลชุดที่ 1 แถว 1 ข้อมูลชุดที่ 1 แถว 2 ข้อมูลชุดที่ 1 แถว 3
ข้อมูลชุดที่ 2 แถว 1 ข้อมูลชุดที่ 2 แถว 2 ข้อมูลชุดที่ 2 แถว 3

 

ใส่ style เพื่อใส่ขอบตาราง ความหนา 1px แบบเส้นทึบ solid สีดำ black

  • table, th, td จะมีผลทั้งส่วนหัว และเนื้อหา
  • border สร้างขอบ
  • 1px ขนาดเส้นขอบ
  • solid ชนิดเส้นทึบ
  • black สีดำ
<!DOCTYPE html>
<html>
<head>
    <!-- ใส่ style เพื่อใส่ขอบตาราง ความหนา 1px แบบเส้นทึบ solid สีดำ black -->
<style> 
table, th, td {
  border: 1px solid black;
}
</style>
</head>

<body>
    <h4>HTML Table</h4>
    <table>
        <tr>
            <th>ส่วนหัว 1</th>    <!-- ส่วนหัว -->
            <th>ส่วนหัว 2</th>
            <th>ส่วนหัว 3</th>
        </tr>
        <tr>
            <td>ข้อมูลชุดที่ 1 แถว 1</td> <!-- ข้อมูล -->
            <td>ข้อมูลชุดที่ 1 แถว 2</td>
            <td>ข้อมูลชุดที่ 1 แถว 3</td>
        </tr>
        <tr>
            <td>ข้อมูลชุดที่ 2 แถว 1</td> <!-- ข้อมูล -->
            <td>ข้อมูลชุดที่ 2 แถว 2</td>
            <td>ข้อมูลชุดที่ 2 แถว 3</td>
        </tr>
    </table>
</body>
</html>

 


การกำหนดส่วนต่างๆของหน้า <section></section>

<!DOCTYPE html>
<html>
    <section>
        <h4>section 1</h4>
        <p>เนื้อหา 1</p>
    </section>

    <section>
        <h4>section 2</h4>
        <p>เนื้อหา 2</p>
    </section>
</body>
</html>

 

section 1

เนื้อหา 1

section 2

เนื้อหา 2


ส่วนนำทาง <nav> หรือเมนู อยู่ใน header

<body>
<header>
    <h1>Website Header</h1>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="about.html">Contact Us</a></li>
        </ul>
    </nav>
</header>
.....
</body>

 

Website Header