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
- Coffee
- Tea
- 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>