Welcome to the HTML tutorial. Click on the topics below to start learning:
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements are represented by tags
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
- Browsers do not display the HTML tags, but use them to render the content of the page
- HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and
content of web pages
- HTML is not a programming language, but a markup language
TOP
An HTML document has the following basic structure...
คำอธิบาย:
<!DOCTYPE html>: ระบุว่าเป็นเอกสาร HTML5
<html>: เป็นรากของเอกสาร HTML ทั้งหมด
<head>: ส่วนที่ใช้เก็บข้อมูลเมตา เช่น <title> ชื่อหน้าเว็บ
<body>: ส่วนที่จะแสดงผลบนหน้าเว็บ
องค์ประกอบสำคัญของ HTML
แท็ก (Tags):
- แท็กเริ่มต้น (Opening Tag): เช่น <h1>
- แท็กปิด (Closing Tag): เช่น </h1>
แอตทริบิวต์ (Attributes): คุณสมบัติของแท็ก
- ใช้เพื่อกำหนดคุณสมบัติเพิ่มเติม เช่น href, src, width, height
ตัวอย่าง: <h1>Hello, World!</h1>
<img src="image.jpg" alt="A description of the image">
TOP
HTML headings are defined with the <h1> to <h6> tags...
- <h1>: Heading 1
- <h2>: Heading 2
- <h3>: Heading 3
- <h4>: Heading 4
- <h5>: Heading 5
- <h6>: Heading 6
TOP
HTML paragraphs are defined with the <p> tag...
- <p>: Paragraph
TOP
HTML provides various elements to format text...
- <h1> to <h6>: Headings
- <p>: Paragraph
- <pre>: Preformatted text
- <b>: Bold text
- <strong>: Important text
- <i>: Italic text
- <em>: Emphasized text
- <u>: Underline text
- <ins>: Inserted text
- <del>: Deleted text
- <s>: Strikethrough text
- <strike>: Strikethrough text
- <small>: Smaller text
- <big>: Big text
- <mark>: Marked/highlighted text
- <sub>: Subscript text
- <sup>: Superscript text
- <blockquote>: Block quotation
- <q>: Inline quotation
- <code>: Code snippet
TOP
HTML links are defined with the tag...
- <a href="url" target="">Link text</a>
- The href attribute specifies the URL of the page the link goes to
- The target attribute specifies where to open the linked document
- _self: Open the linked document in the same window/tab
- _blank: Open the linked document in a new window/tab
- _parent: Open the linked document in the parent frame
- _top: Open the linked document in the full body of the window
- The link text is the visible part of the link
- Anchor links:
- Use the href attribute with the # symbol to link to a specific part of the page
- Use the id attribute to define the section to link to
- Example: <a href="#section">Go to Section</a>
- Example: <h3 id="section">This is the Section</h3>
- Email links:
- Use the mailto: prefix to create an email link
- Example: <a href="mailto:support@example.com">email us</a>
- Download links:
- Use the download attribute to create a download link
- Example: <a href="file.txt" download>Download Text File</a>
TOP
HTML lists are defined with the <ul>, <ol>, and <li> tags...
- <ul>: Unordered list
- <ol>: Ordered list
- <li>: List item
- Unordered list:
- Use the <ul> tag to create an unordered list
- Use the <li> tag to create each list item
- Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
- Ordered list:
- Use the <ol> tag to create an ordered list
- Use the <li> tag to create each list item
- Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- List style types:
- Use the list-style-type property to define the style of the list
- Example: <ul style="list-style-type: disc;">
- Example: <ul style="list-style-type: circle;">
- Example: <ul style="list-style-type: square;">
- Example: <ul style="list-style-type: none;">
- Example: <ol type="1">
- Example: <ol type="A">
- Example: <ol type="a">
- Example: <ol type="I">
- Example: <ol type="i">
- Example: <ol type="A" start="3">
- Example: <ol type="1" start="3">
- Example: <ol style="list-style-type: decimal;">
- Example: <ol style="list-style-type: upper-alpha;">
- Example: <ol style="list-style-type: lower-alpha;">
- Example: <ol style="list-style-type: upper-roman;">
- Example: <ol style="list-style-type: lower-roman;">
TOP
HTML images are defined with the <img> tag...
- <img src="url" alt="description">
- The src attribute specifies the URL of the image
- The alt attribute provides a description of the image
- The width and height attributes provide the size of the image
- Example: <img src="image.jpg" alt="description of image">
- Example: <img src="image.jpg" alt="description of image" width="300" height="200">
- Image alignment:
- Use the align attribute to specify the alignment of an image
- Example: <img src="image.jpg" alt="description" align="left">
- Example: <img src="image.jpg" alt="description" align="right">
- Image border:
- Use the border attribute to add a border around an image
- Example: <img src="image.jpg" alt="description" border="1">
- Image link:
- Use the <a> tag to create a link around an image
- Example: <a href="url"><img src="image.jpg" alt="description"></a>
- Image gallery:
- Use the <div> tag to create an image gallery
- Use the <img> tag to display each image
- Example:
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
- flex box:
- Use the display: flex; property to create a flex container
- Use the gap property to create space between flex items
- Example:
.gallery {
display: flex;
gap: 10px;
}
.gallery img {
width: 150px;
height: 150px;
object-fit: cover;
}
TOP
HTML tables are defined with the <table>, <tr>, <th>, and <td> tags...
- <table>: Table
- <tr>: Table row
- <th>: Table header
- <td>: Table data/cell
TOP
HTML forms are defined with the <form> tag...
หัวข ้อเกี่ยวกับฟอร์ม
1. โครงสร้างพื้นฐานของฟอร์ม
- <form>: ใชเ้ป็นตวัครอบขอ้มูลในฟอรม์
- action และ method (GET/POST): การก าหนดปลายทางและวธิสี ง่ ขอ้มลู
2. ชนิดของอินพุต (Input Types)
- <input>: ชนดิ ตา่ ง ๆ เชน่ text, password, email, number,
radio, checkbox, date, file
- <textarea>: ชอ่ งขอ้ความขนาดใหญ่
- <select> และ <option>: เมนูแบบเลื่อนลง
- <datalist>: รายการตัวเลือกที่ก าหนดไว ้ล่วงหน้า
- <optgroup>: กลุ่มตัวเลือก
- <fieldset> และ <legend>: กลุ่มข ้อมูลที่เกี่ยวข ้อง
3. ปุ่ มในฟอร์ม
- <button>: ปุ่ มทั่วไป
- <input type="submit"> และ <input type="reset">: ป่มุ สง่ และลา้งขอ้ มลู
- <input type="button">: ปุ่ มทั่วไป
- <input type="image">: ปุ่ มรูปภาพ
- <input type="file">: ปุ่ มอัพโหลดไฟล์
4. การจัดการป้ายก ากับ (Labels)
- <label>: เพอื่ เชอื่ มกับ <input> (ชว่ ยเพมิ่ การเขา้ถงึ)
- for: ระบุ id ของอินพุตที่เกี่ยวข ้อง
5. การตรวจสอบข ้อมูล (Validation)
- คณุ สมบัติเชน่ required, min, max, pattern
- การใช ้JavaScript เพื่อท าการตรวจสอบ
6. ฟอร์มแบบสมัยใหม่ (HTML5)
- placeholder: ตัวอย่างขอ้ความในชอ่ งอนิ พุต
- autofocus: ให ้ฟอร์มเริ่มต ้นโฟกัส
7. การสง่ ฟอรม์ (Form Submission)
- การสง่ ขอ้มลู ไปยังเซริฟ์ เวอร์
- การใช ้JavaScript (เชน่ onsubmit)
TOP
Semantic HTML elements clearly define the content of a web page...
- <header>: Defines a header for a document or section
- <nav>: Defines navigation links
- <section>: Defines a section in a document
- <article>: Defines an article
- <aside>: Defines content aside from the page content
- <footer>: Defines a footer for a document or section
TOP