DEX  WAT  LEARN

LEARN  FOR  WEB  DESIGN  WITH  DEX  WAT  DEV

html

HTML เบื้องต้น

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

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




HTML

โครงสร้าง HTML

<html>
           <head>
                     <meta charset="UTF-8">
                     <title> หัวเรื่อง </title>
           </head>
           <body>
                     เนื้อหา
           </body>
</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

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

<html>
           <head>
                     <meta charset="UTF-8">
                     <title> หัวเรื่อง </title>
           </head>
           <body>
                     เนื้อหา
           </body>
</html>




ตัวอย่าง 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>
Tag สำหรับแสดงข้อความ

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

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







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

<!-- <a href="https://www.facebook.com/DEX-WAT-DEV-105778258632023"> เพจ DEX WAT DEV </a> -->
COMMENT

การ comment ใน HTML

<!--..........................................-->
                      ในการ comment จะเปิดด้วย <!-- และปิดด้วย -->




แบบทดสอบ


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

ตัวอย่าง

Profile

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