HTML เบื้องต้น

- โครงสร้าง HTML
- Tag สำหรับแสดงข้อความ
- Tag สำหรับ link เชื่อมโยงหน้าเว็บ
- คำสั่งหมายเหตุ ( comment )
- แบบทดสอบ

html

HTML เบื้องต้น

           HTML ย่อมาจาก Hypertext Markup Language
           html คือภาษาเขียนเว็บไซต์ที่ใช้เพื่อกำกับข้อมูลต่างๆ และแสดงผลคำสั่งบนหน้า Web Browser เป็นเหมือนภาษาพื้นฐานที่มีไว้ในการพัฒนาหน้าเว็บไซต์ ในปัจจุบันอยู่ภายใต้การดูแลของ องค์กร World Wide Web Consortium (W3C) และถูกพัฒนามาถึงเวอร์ชั่น 5 หรือที่เรียกว่า HTML5 โดยเริ่มจาก HTML1 ที่ทำอะไรได้ไม่มากนอกจากโบว์ชัวร์ออนไลน์ ข้อมูลต่างๆ บนหน้าเว็บไซต์จะถูกเชื่อมโยงกันด้วยชุดคำสั่งต่างๆ เพื่อให้แสดงผลออกมาในรูปแบบที่นักออกแบบต้องการให้เป็น ข้อมูลเหล่านั้นถูกควบคุมโดยการเขียน HTML ทั้งที่เป็นรูปภาพ ข้อความ หรือวัตถุอื่นๆบนหน้าเว็บไซต์

HTML

โครงสร้าง HTML

โครงสร้างพื้นฐานของ HTML:

1. <html> ...... </html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ
           2. <head> ...... </head> เป็นส่วนที่ใช้ให้รายละเอียดเกี่ยวกับ เว็บเพจหน้านี้ ซึ่งจะไม่แสดงให้เห็นในส่วนของการแสดงผลของ web browser แต่จะมีผลกับส่วนอื่นๆ เช่น การหาของ search engine (google,yahoo) การใช้งานก็จะมีคำสั่งย่อยเพื่อบรรยายรายละเอียด เช่น <title> .... </title> , <meta> และอื่นอีกมากมาย
           3. <title> .......... </title> ในส่วนตัวอักษรที่อยู่ในคำสั่งนี้จะอยู่ใน title bar ของ web page
           4. <body> .......... </body> ตัวอักษรที่อยู่ในคำสั่งนี้จะแสดงส่วนแสดงผลของ web browser

ตัวอย่างรูปแบบแท็กพื้นฐานของ HTML


<html>
    <head>
        <meta charset="UTF-8">
        <title>หัวเรื่อง</title>
    </head>
    <body>
        เนื้อหา
    </body>
</html>
Tag สำหรับแสดงข้อความ

Tag สำหรับแสดงข้อความ

ตัวอย่าง Tag สำหรับแสดงข้อความ


<h1> DEX WAT DEV </h1>
 
<h2> DEX WAT DEV </h2>

<h3> DEX WAT DEV </h3>

<h4> DEX WAT DEV </h4>

<h5> DEX WAT DEV </h5>

<h6> DEX WAT DEV </h6>

<p> DEX WAT DEV </p>

<i> DEX WAT DEV </i>

<u> DEX WAT DEV </u>

<b> DEX WAT DEV </b>
 
<p> <sub>DEX<sub> WAT DEV </p>

<p> DEX <del>WAT<del> DEV </p>

<p> DEX WAT <sup>DEV<sup> </p>

<mark> DEX WAT DEV </mark>
<h1> คือหัวข้อที่สำคัญที่สุด และ <h6> คือหัวข้อที่สำคัญน้อยที่สุด
<p> คือข้อความธรรมดา
<i> คือกำหนดข้อมความตัวเอียง
<u> คือกำหนดข้อมความขีดเส้นใต้
<b> คือกำหนดข้อมความตัวหนา
<sub> คือตัวห้อยข้อความ
<sup> คือตัวยกข้อความ
<del> คือขีดฆ่าข้อความ
<mark> คือไฮไลท์หรือเน้นข้อความ
LINK

Tag สำหรับ link เชื่อมโยงหน้าเว็บ

<a href="หัวข้อ , ที่อยู่ไฟล์ หรือ เว็บไซต์"> ข้อความ </a>
           ในการ เชื่อมโยงหน้าเว็บเราจะใช้ Attribute href ของ tag <a> ในการกำหนดการเชื่อมโยง

ตัวอย่าง Tag สำหรับ link เชื่อมโยงหน้าเว็บ


<a href="https://www.facebook.com/DEX-WAT-DEV-105778258632023"> เพจ DEX WAT DEV </a>
<a href="page2.php"> หน้าที่ 2 </a>
<a href="#ss1"> หัวข้อที่ </a>
COMMENT

การ comment ใน HTML

ตัวอย่าง การ comment ใน HTML


<!-- <a href="https://www.facebook.com/DEX-WAT-DEV-105778258632023"> เพจ DEX WAT DEV </a> -->
<!--..........................................-->
                      ในการ comment จะเปิดด้วย <!-- และปิดด้วย -->
แบบทดสอบ

TestL


1
- แสดงข้อมูลส่วนตัว พร้อม comment อธิบาย code แต่ละบรรทัด

ตัวอย่าง

Profile

Name : Chaitawat Loongyod
Age : 25year
Birth Day : 8/997
school : CCC
favorite food : fried basil
favorite song : 24.7