หน้านี้ได้รับการแปลโดย Cloud Translation API

สื่อการสอนของนักเรียน HTML

HTML เป็นดั่งกระดูกสันหลังของหน้าเว็บ ในหน่วยการเรียนรู้นี้ เราจะมาดูวิธีสร้างโครงสร้างที่ดีและมีความหมายสําหรับหน้าเว็บ

สรุปประเด็นสำคัญ

นักเรียนจะเข้าใจโครงสร้างไฟล์ HTML
นักเรียนรู้วิธีใช้แท็กทั่วไปในการสร้างหน้าเว็บ

HTML คืออะไร

HTML ย่อมาจาก HyperText Markup Language โค้ดที่เราใช้เพื่อทําสิ่งต่อไปนี้

สร้างเอกสารที่จัดเก็บไว้ใน World Wide Web และแสดงในเบราว์เซอร์
ระบุโครงสร้างพื้นฐานสําหรับหน้าเว็บของเรา - กระดูกของหน้าเว็บ
ตรวจสอบว่าโหลดข้อความและรูปภาพที่เหมาะสมสําหรับเบราว์เซอร์ที่จะแสดง

เราจะใช้ HTML เมื่อใด

หน้าเว็บแต่ละหน้าที่คุณเห็นบน World Wide Web จะเขียนโดยใช้โค้ด HTML ปุ่ม รูปภาพ ฟอร์ม ส่วนของข้อความ - องค์ประกอบเหล่านี้ทั้งหมดสร้างขึ้นด้วย HTML

หากจะคิดว่าหน้าเว็บของเราเป็นเหมือนมนุษย์ ระบบ HTML คือโครงสร้างกระดูก เราใส่สกินและเสื้อผ้าลงในร่างกายได้โดยใช้ CSS แต่เมื่อเราเตรียมโครงสร้างโครงไว้เรียบร้อยแล้ว

การทํางานของ HTML

หัวใจสําคัญของ HTML คือองค์ประกอบ องค์ประกอบจะสร้างด้วยแท็ก

องค์ประกอบส่วนใหญ่มีแท็กเปิดและแท็กปิด

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

คุณสามารถวางเนื้อหา (หรือแม้กระทั่งองค์ประกอบ HTML อื่นๆ) ที่ต้องการดูในหน้าเว็บระหว่างแท็กเหล่านี้ก็ได้ เช่น การซ้อนเลเยอร์แซนด์วิช

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

เนื้อหา HTML บางรายการสร้างขึ้นด้วยแท็กปิดเองที่ไม่ต้องการแท็กปิดเพิ่มเติม

<img />
<link />

เพียงแท็กเดียวนี้ถือว่าเพียงพอแล้ว เนื่องจากองค์ประกอบนี้เก็บสถานที่ในเอกสารของคุณ ซึ่งต่างจากองค์ประกอบ HTML อื่นๆ ส่วนใหญ่ตรงที่จะไม่สามารถฝังองค์ประกอบหรือข้อมูลอื่นๆ ภายในองค์ประกอบที่ปิดเองเหล่านี้

ส่วนต่างๆ ขององค์ประกอบ HTML

ตัวอย่าง HTML

โค้ดนี้จะแสดงในเบราว์เซอร์และมีลักษณะเหมือนรูปภาพด้านล่าง

รหัสนี้...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... ทําให้หน้าเว็บนี้

การอ้างอิง HTML

รายการแท็ก HTML ทั้งหมด

การแบ่งพื้นที่หน้าจอ

บริบทและวัตถุประสงค์

HTML ย่อมาจาก Hyper Text Markup Language คือการให้ความหมายเชิงโครงสร้างแก่ข้อความ ช่วยให้คอมพิวเตอร์และโปรแกรมเมอร์ระบุถึงวัตถุประสงค์ของข้อความได้อย่างง่ายดาย

ให้คิดว่า HTML เป็นโครงกระดูกของหน้าเว็บ หน้านี้มีโครงสร้างและเนื้อหา ขณะที่ JavaScript และ CSS ให้การโต้ตอบและการจัดรูปแบบ

หมายเหตุสําหรับผู้สอน:

HTML เกี่ยวกับการคิดเชิงอัลกอริทึมและการแก้ไขปัญหาน้อยกว่าหน่วยการเรียนรู้อื่นๆ ที่เราจะพูดถึงกันมาก และเกี่ยวกับการสร้างและฝึกฝนการทําความคุ้นเคยกับไวยากรณ์ นักเรียนมักจะพบปัญหาในการซ้อนเนื้อหาและการเยื้องอย่างเหมาะสม และเมื่อพยายามรวม HTML ที่เขียนอย่างช้าๆ เข้ากับ CSS นักเรียนจะรู้สึกหงุดหงิดได้

บทเรียนนี้จะจบเร็วพอๆ กับตัวอย่าง และโดยทั่วไปแล้วมีวิธีการอยู่ 3 แบบด้วยกัน ดังนี้

คุณสามารถแสดงตัวอย่างและถามคําถามมากมายเพื่อช่วยให้นักเรียนวิเคราะห์และคาดการณ์โค้ด รวมทั้งสาเหตุที่มีโครงสร้างในรูปแบบดังกล่าว จากนั้นเปิดตัวในห้องทดลองซึ่งนักเรียนเขียน HTML ของตัวเองและใช้เป็นข้อมูลอ้างอิง
คุณอาจให้นักเรียนคัดลอกโค้ดนี้ไปใส่ในตัวแก้ไข แล้วท้าทายให้นักเรียนเปลี่ยนเนื้อหาขององค์ประกอบโดยไม่ต้องเปลี่ยนองค์ประกอบเอง แล้วเพิ่มองค์ประกอบอื่นๆ ลงในโค้ดที่มีอยู่
คุณสามารถสร้างรายงานนี้ขึ้นใหม่ทั้งหมดโดยเป็นโค้ดไปพร้อมๆ กัน โดยอธิบายองค์ประกอบเมื่อคุณเพิ่ม แล้วนักเรียนจะกลับมาที่คู่มือนี้เพื่อช่วยเตือนว่าเขาสร้างอะไรหรือตรวจสอบอะไรผิดไปในโค้ด

ในฐานะผู้สอน งานของคุณไม่เพียงช่วยให้นักเรียนได้แสดงเนื้อหาในหน้าเว็บเท่านั้น แต่ยังช่วยสร้างความเข้าใจให้นักเรียนเข้าใจว่า HTML มีรูปแบบถูกต้องอย่างไร และทําไมเนื้อหาจึงสําคัญอย่างยิ่ง การใช้เวลาศึกษารายละเอียดเพิ่มเติมสัก 10 นาทีจะช่วยให้ประหยัดเวลาการแก้ไขข้อบกพร่องได้ภายในไม่กี่วัน

วัตถุประสงค์การเรียนรู้

นักเรียนจะทําสิ่งต่อไปนี้ได้

สร้างไฟล์ HTML และเปิดไฟล์ในตัวแก้ไขและเบราว์เซอร์
ตั้งค่าไฟล์ HTML ที่มีโครงสร้างที่เหมาะสม
ระบุและใช้แท็กทั่วๆ ไปเพื่อเพิ่มโครงสร้างและเนื้อหาลงในเว็บไซต์

เริ่มต้นใช้งาน

การจัดเฟรมและวัตถุประสงค์ในส่วนต่างๆ

HTML เขียนอยู่ภายในไฟล์ที่มีส่วนขยาย .html
คุณสามารถตั้งชื่อไฟล์ HTML ได้ตามต้องการ แต่ index.html เป็นชื่อที่ใช้บ่อยที่สุดสําหรับหน้า Landing Page เว้นแต่ว่านักพัฒนาซอฟต์แวร์มีเหตุผลในการกําหนดค่าเซิร์ฟเวอร์เป็นอย่างอื่น

# creating an html file on the command line
touch index.html

# opening your html file in your browser
open index.html

ภารกิจย่อย

สร้างไฟล์ HTML เพิ่มเติม 3 ไฟล์โดยใช้ชื่อที่ต้องการ
เปิดไฟล์ใดไฟล์หนึ่งในเครื่องมือแก้ไขข้อความและเบราว์เซอร์

โครงสร้างของหน้า HTML

การจัดเฟรมและวัตถุประสงค์ในส่วนต่างๆ

เอกสาร HTML ควรเริ่มต้นด้วยโครงสร้างเดียวกันเสมอ

แท็ก DOCTYPE เป็นแท็กพิเศษและไม่ได้ปิด และยังเป็นเพียงแท็กเดียวที่มีค่าที่ไม่ใช่ตัวอักษรและตัวเลข (ตัวอักษร/ตัวเลข) ได้
<head> มีข้อมูลเกี่ยวกับเว็บไซต์ของคุณ แต่ไม่มีเนื้อหาจริงที่จะแสดงบนหน้าเว็บ
<body> มีเนื้อหาทั้งหมดของหน้าเว็บซึ่งจะปรากฏขึ้นบนหน้าจอจริงๆ
แท็กที่คุณจะใช้สร้างโครงสร้างของหน้าเว็บควรวางไว้ระหว่างแท็ก <body>
ระหว่างแท็กเปิดและปิดใช้ เราจะแทรกข้อความหรือ "content" ขององค์ประกอบ ผลลัพธ์สุดท้ายจะมีลักษณะดังนี้ <example-tag>Content Goes in here</example-tag> คุณยังวางแท็กไว้ในแท็กอื่นๆ ได้ด้วย
โปรดทราบว่าเมื่อวางแท็กไว้ในแท็กอื่น คุณควรเยื้องแท็กใหม่เพื่อแสดงว่าเป็นแท็กย่อยของแท็กระดับบนสุด

คำศัพท์

องค์ประกอบ - รายการต่างๆ (เช่น รูปภาพ ย่อหน้า และส่วนหัว) ที่สร้างขึ้นด้วยโค้ด HTML
tags - โค้ดสั้นๆ ที่บ่งชี้ว่าองค์ประกอบหนึ่งเริ่มต้นและสิ้นสุดที่ใด
child - องค์ประกอบมีองค์ประกอบ INSIDE อื่นๆ
ระดับบนสุด - องค์ประกอบที่มีองค์ประกอบอื่นๆ

ตัวอย่าง HTML

หมายเหตุ: ข้อมูลต่อไปนี้เป็นเพียงตัวอย่างสําหรับการอ้างอิง คุณไม่จําเป็นต้องเข้าใจข้อมูลทั้งหมดโดยทันที แต่การที่ HTML จัดรูปแบบแล้วน่าจะดูดีอยู่แล้ว

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

ภารกิจย่อย

เปิดไฟล์ใดไฟล์หนึ่งที่คุณสร้างและเพิ่มโครงสร้างแท็ก HTML พื้นฐาน
สร้างเนื้อความ HTML เพื่อแสดงแผนผังครอบครัว (หรือแผนผังครอบครัวของผู้อื่น) ใช้แท็ก section เพื่อเก็บกลุ่มครอบครัว ใช้แท็ก p เพื่อเก็บสมาชิกในครอบครัว ครอบครัวอาจมีความซับซ้อน แต่ตัวอย่างเช่น

<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

แท็กทั่วไป

การจัดเฟรมและวัตถุประสงค์ในส่วนต่างๆ

โดยทั่วไป เราไม่สร้างองค์ประกอบประเภทของเราเอง แต่มีชุดองค์ประกอบที่กําหนดไว้ล่วงหน้าซึ่งมีฟังก์ชันการทํางานแล้ว

ดูการอ้างอิง HTML สําหรับตัวอย่างโค้ดบล็อกแจกแจง

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

ภารกิจย่อย

แก้ไขเนื้อหาทั้งหมดข้างต้นให้สอดคล้องกับความสนใจของคุณ
ในไฟล์ HTML อื่นๆ ที่คุณสร้างขึ้นตอนเริ่มต้นบทเรียน ให้สมมติว่าคุณกําลังเตรียมบทความข่าวโดยใช้ชื่อ หัวข้อ และส่วนหัวย่อย (หากคิดเนื้อหาไม่ได้ เขียนประมาณ 1 วันขณะที่คุณเดินทาง นึกถึงการเดินทางขนาดเล็ก สถานที่ที่คุณไป อาหารที่คุณรับประทาน)
ใช้แท็กที่เกี่ยวข้องและเพิ่มเนื้อหาบางส่วนเพื่อให้บทความข่าวปรากฏในเว็บไซต์
ยืนยันว่าเนื้อหาของคุณปรากฏในเบราว์เซอร์
ร่าง: สร้างแบบฟอร์มที่ผู้ใช้สามารถกรอกเพื่อส่งความคิดเห็นเกี่ยวกับบทความของคุณ แม้ว่าวิธีนี้จะยังไม่ได้ผล (แต่เราไม่แนะนําให้ใช้ JavaScript) แต่การทําให้แบบฟอร์มนี้เป็น HTML แสดงขั้นตอนแรกของวิธีที่เราสร้างแบบฟอร์มที่ใช้งานได้

บริบท

HTML คือภาษาของเนื้อหาบน World Wide Web

คุณจะต้องใช้บรรทัดคําสั่งเพื่อไปยังและเปิดไฟล์ HTML ไฟล์ HTML ของคุณจะเพิ่มด้วยรูปแบบและลักษณะการทํางานของ CSS ที่เขียนโดยใช้สคริปต์ JavaScript ซึ่งประกอบด้วยฟังก์ชันต่างๆ ไฟล์ HTML จะเป็นเทมเพลตที่ Google App Engine ใช้และสร้างขึ้นจากฐานข้อมูลด้วย

การทํางานของ HTML

เริ่มต้นใช้งาน HTML

HTML เขียนอยู่ภายในไฟล์ที่มีส่วนขยาย .html

การดูหน้าเว็บของคุณ

หากต้องการดูตัวอย่างไฟล์ HTML บน Mac: ในบรรทัดคําสั่ง ให้ไปที่โฟลเดอร์ที่มีหน้า HTML และพิมพ์ชื่อไฟล์ที่เปิดอยู่โดยแทนที่ "filename" ด้วยชื่อไฟล์ HTML

ไวยากรณ์ทั่วไป

<tag>
  Content
</tag>

องค์ประกอบฝังอยู่

คุณสามารถวางองค์ประกอบ HTML ไว้ภายในองค์ประกอบอื่นๆ ได้ดังนี้

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

โครงสร้างของหน้า HTML

หน้าเว็บทุกหน้ามีโครงสร้างพื้นฐานที่เหมือนกัน ซึ่งมีลักษณะดังนี้

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

<head> มีข้อมูลเกี่ยวกับเว็บไซต์ของคุณ แต่ไม่มีเนื้อหาจริงที่จะแสดงบนหน้าเว็บ (เหมือนเป็น "สมองและหน้าเว็บ")
<body> มีเนื้อหาทั้งหมดของหน้าเว็บซึ่งจะปรากฏขึ้นบนหน้าจอจริงๆ

องค์ประกอบทั่วไป

ใช้องค์ประกอบทั่วไปเหล่านี้ในแท็ก <body> และ </body> เพื่อเพิ่มเนื้อหาลงในหน้า

ย่อหน้า

หากต้องการสร้างย่อหน้า ให้ใช้แท็กเปิดและปิด p

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

ความคิดเห็น

ใช้ความคิดเห็นเพื่อให้อ่านโค้ดได้ง่ายขึ้นโดยไม่ส่งผลต่อ HTML ที่แสดงผลสุดท้าย

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

ส่วนหัว

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

ทั่วไป <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

รายการ

รายการ <li> จะรวมอยู่ในแท็กรายการที่ไม่ได้เรียงลําดับ <ul> หรือแท็กรายการเรียงลําดับ <ol>

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>

<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

อิมเมจ

แท็ก <img> ต้องมีการระบุที่อยู่ของรูปภาพโดยใช้แอตทริบิวต์ src และใช้แอตทริบิวต์ alt ที่ไม่บังคับในการช่วยเหลือพิเศษ ซึ่งรวมถึงโปรแกรมอ่านหน้าจอ

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

โฆษณา Anchor (สิ่งที่ผู้คนใช้โทร "links")

สําหรับไฮเปอร์ลิงก์ แท็ก <a> ต้องมีการระบุที่อยู่ของปลายทางไฮเปอร์ลิงก์โดยใช้แอตทริบิวต์ href

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

เส้นแนวนอน

<!-- This self-closing tag creates a line across your web page. -->
<hr>

พัก

<!-- This self-closing tag creates a line break between elements. -->
<br>

แบบฟอร์ม

มีการใช้ <form> เพื่อรวบรวมข้อมูลจากผู้ใช้ เพื่อให้ <form> ทํางาน จะต้องส่งข้อมูลที่ได้ไปประมวลผลหรือประมวลผลบางส่วน ดังนั้น <form>บ่อยครั้งมักต้องมีแอตทริบิวต์เพิ่มเติม ดังนี้

action - ปลายทางของข้อมูลแบบฟอร์มเมื่อมีการส่งแบบฟอร์ม
method - ระบุว่าควรประมวลผลข้อมูลโดยใช้คําขอ GET หรือประเภท POST

<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

อินพุต

<input> คือองค์ประกอบที่ใช้โดย <form> เพื่อรวบรวมข้อมูล

นอกจากนี้ องค์ประกอบ <input> มักจะมีแอตทริบิวต์ name ที่ฐานข้อมูลใช้เพื่อระบุช่องของข้อมูลที่ส่ง

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

องค์ประกอบ <input> นั้นอเนกประสงค์: การระบุแอตทริบิวต์ type จะแสดงผลเป็นช่องข้อความ เครื่องมือเลือกวันที่ในรูปแบบปฏิทิน ปุ่มตัวเลือก เมนูแบบเลื่อนลง และอื่นๆ ดูรายการที่สมบูรณ์ยิ่งขึ้นได้ในเอกสารประกอบภายนอกบางส่วน

เคล็ดลับและคำแนะนำ

เรียนรู้ว่าแท็ก HTML ใดที่พร้อมใช้งาน โดยการตรวจสอบโค้ดของหน้าเว็บเพื่อดูว่าแท็กใดที่นักพัฒนาซอฟต์แวร์คนอื่นใช้เพื่อเพิ่มบางสิ่งลงในหน้าเว็บ
หากไม่พบสิ่งที่ต้องการเพิ่ม โปรดตรวจสอบเอกสารสําหรับนักพัฒนาซอฟต์แวร์ รายการเหล่านี้เป็นรายการองค์ประกอบ HTML ที่เป็นไปได้ทั้งหมด https://www.w3schools.com/Tag/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
เมื่อเขียน HTML สําหรับองค์ประกอบที่ต้องใช้แท็กเปิดและแท็กปิด ขอแนะนําให้เปิดและปิดแท็กก่อนเพิ่มเนื้อหาระหว่างแท็ก ด้วยวิธีนี้ คุณจะไม่มีแท็กที่ซับซ้อน
หากต้องการดูลักษณะตามธรรมชาติขององค์ประกอบ HTML ที่ซ้อนอยู่ในโค้ด ให้เยื้ององค์ประกอบที่อยู่ภายในองค์ประกอบอื่นๆ วิธีนี้จะช่วยให้คุณรู้จักโครงสร้างของเนื้อหา HTML ได้อย่างรวดเร็ว
ใช้ความคิดเห็นจํานวนมาก รหัสเหล่านี้จะช่วยแก้ปัญหารหัสของคุณเองและช่วยผู้อื่นเมื่อคุณขอให้ตรวจสอบ
แหล่งข้อมูลบนเว็บ เช่น html5boilerplate.com จะช่วยให้คุณเริ่มต้นเขียน HTML ได้อย่างรวดเร็ว

สรุปแนวทางปฏิบัติแนะนํา

ข้อมูลเกี่ยวกับหน้าเว็บจะอยู่ใน <head> ของเอกสาร HTML ได้แก่ ชื่อ ข้อมูลเมตา ลิงก์ไปยังรูปแบบ ฯลฯ
ข้อมูลบนหน้าเว็บจะอยู่ใน <body> ของเอกสาร HTML
มีองค์ประกอบจํานวนมากที่นักพัฒนาซอฟต์แวร์สามารถใช้เพื่อสร้างเนื้อหาของเอกสาร HTML ซึ่งรวมถึง <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>,  และอื่นๆ
องค์ประกอบบางอย่างต้องใช้แท็กเปิดและแท็กปิด: <p></p>
องค์ประกอบอื่นๆ เป็นการปิดตัวเอง ดังนั้นจึงต้องใช้แค่แท็กเปิด: <img>
แท็กอาจมีแอตทริบิวต์ (src, alt, id ฯลฯ) ที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับการทํางานขององค์ประกอบ <img src="filename.png" alt="description">
ความคิดเห็น  ให้ข้อมูลแก่นักพัฒนาแอปซึ่งมีประโยชน์ในการทําความเข้าใจส่วนต่างๆ ของหน้าเว็บ
ใช้เครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ภายในเบราว์เซอร์เพื่อตรวจสอบโค้ด HTML ของหน้าเว็บเพื่อตรวจสอบวิธีการสร้างหน้าเว็บ

คำถามข้อที่ 1

องค์ประกอบใดต่อไปนี้เป็นองค์ประกอบย่อย (ละเว้นองค์ประกอบเนื้อหา/html เพื่อวัตถุประสงค์ในการออกกําลังกายนี้)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

ชั้น 1
p
a
h1 และ p

คำถามข้อที่ 2

ในเอกสาร HTML จะอยู่ในองค์ประกอบ `<head>` และ จะอยู่ในองค์ประกอบ `<body>`

โครงสร้าง, ข้อมูลเมตา
ข้อมูลเมตา, โครงสร้าง
ส่วนหัว เนื้อหาขนาดเล็ก
ส่วนหัวของเว็บไซต์และเนื้อหาหลักของเว็บไซต์

คำถามที่ 3

ข้อใดต่อไปนี้ไม่ใช่เหตุผลที่ดีของการเยื้ององค์ประกอบที่ฝังอยู่

การเยื้องช่วยให้คุณดูได้ง่ายขึ้นว่าองค์ประกอบใดมีองค์ประกอบอื่นๆ
การเยื้องทําให้มนุษย์อ่านโครงสร้างของหน้าเว็บได้ง่ายขึ้น
การเยื้องทําให้บ็อต/เครื่องมือค้นหาอ่านโครงสร้างของหน้าเว็บได้ง่ายขึ้น
การเยื้องช่วยให้ระบุองค์ประกอบข้างเคียงได้ง่ายขึ้น

คำถามที่ 4

ข้อใดต่อไปนี้เป็นแอตทริบิวต์ขององค์ประกอบ HTML

<div class="sidebar">Sidebar goes here!</div>

div
class
แถบด้านข้าง
แถบด้านข้างอยู่นี่แล้ว

คำถามที่ 5

องค์ประกอบ HTML ต่อไปนี้มีแอตทริบิวต์กี่รายการ

<input type="text" placeholder="username" name="username" />

คำถามที่ 6

ในข้อมูลโค้ด HTML ต่อไปนี้ที่แสดงให้เห็นถึงความสัมพันธ์ องค์ประกอบใดเป็นองค์ประกอบระดับบนสุด

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p>
<b>
<i>

คำถามที่ 7

องค์ประกอบในข้อมูลโค้ด HTML ต่อไปนี้เป็นองค์ประกอบย่อยสําหรับองค์ประกอบระดับบนสุดกี่รายการ

(อย่านับรวมองค์ประกอบ <body> หรือ <html> ที่รวมกัน)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

คำถามที่ 8

แม้ว่าบางเบราว์เซอร์จะแสดงผลข้อมูลโค้ด HTML ต่อไปนี้อย่างถูกต้อง แต่จะเกิดอะไรขึ้น

<img src=puppies.png width=400 />

ไม่มีแท็กปิด
ควรมีเครื่องหมายคําพูดเกี่ยวกับค่าของแอตทริบิวต์
การระบุแอตทริบิวต์ width จําเป็นต้องมีแอตทริบิวต์ height ด้วย
ขาดแอตทริบิวต์ที่จําเป็น

คำถามข้อที่ 1

องค์ประกอบใดต่อไปนี้เป็นองค์ประกอบย่อย (ละเว้นองค์ประกอบเนื้อหา/html เพื่อวัตถุประสงค์ในการออกกําลังกายนี้)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

องค์ประกอบ a เป็นองค์ประกอบย่อยเนื่องจากอยู่ภายในองค์ประกอบอื่น

คำถามข้อที่ 2

ในเอกสาร HTML จะอยู่ในองค์ประกอบ `<head>` และ จะอยู่ในองค์ประกอบ `<body>`

ข้อมูลเมตาจะอยู่ในองค์ประกอบ <head> และโครงสร้างจะอยู่ในองค์ประกอบ <body> ไม่มีข้อมูลในองค์ประกอบ <head> ที่จะปรากฏในหน้าเว็บเอง

คำถามที่ 3

ข้อใดต่อไปนี้ไม่ใช่เหตุผลที่ดีของการเยื้ององค์ประกอบที่ฝังอยู่

การเยื้องไม่ได้ทําให้บ็อต/เครื่องมือค้นหาอ่านโครงสร้างหน้าเว็บได้ง่ายขึ้น เมื่อบ็อตอ่านเว็บไซต์ การอ่านโค้ดจะอ่านโค้ด HTML แม้ว่าจะทั้งหมดอยู่ในบรรทัดเดียวก็ตาม

คำถามที่ 4

ข้อใดต่อไปนี้เป็นแอตทริบิวต์ขององค์ประกอบ HTML

<div class="sidebar">Sidebar goes here!</div>

class คือแอตทริบิวต์ โดยแอตทริบิวต์จะอยู่ในองค์ประกอบ HTML และโดยปกติจะมีค่า (แต่ไม่จําเป็น)

คำถามที่ 5

องค์ประกอบ HTML ต่อไปนี้มีแอตทริบิวต์กี่รายการ

<input type="text" placeholder="username" name="username" />

องค์ประกอบ input ด้านบนมี 3 แอตทริบิวต์ ได้แก่ type, placeholder และ name

คำถามที่ 6

ในข้อมูลโค้ด HTML ต่อไปนี้ที่แสดงให้เห็นถึงความสัมพันธ์ องค์ประกอบใดเป็นองค์ประกอบระดับบนสุด

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> เป็นองค์ประกอบระดับบนเนื่องจากมีองค์ประกอบอื่นๆ

คำถามที่ 7

องค์ประกอบในข้อมูลโค้ด HTML ต่อไปนี้เป็นองค์ประกอบย่อยสําหรับองค์ประกอบระดับบนสุดกี่รายการ

(อย่านับรวมองค์ประกอบ <body> หรือ <html> ที่รวมกัน)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

องค์ประกอบย่อยจะมีอยู่ 4 รายการ กล่าวคือทุกองค์ประกอบที่มีองค์ประกอบระดับบนอยู่เหนือองค์ประกอบนั้น ดังนั้นองค์ประกอบใดๆ ยกเว้นองค์ประกอบ <div> เช่น <h1>, <p>, <i> และ <a>

คำถามที่ 8

แม้ว่าบางเบราว์เซอร์จะแสดงผลข้อมูลโค้ด HTML ต่อไปนี้อย่างถูกต้อง แต่จะเกิดอะไรขึ้น

<img src=puppies.png width=400 />

ควรมีเครื่องหมายคําพูดเกี่ยวกับค่าของแอตทริบิวต์ <img /> เป็นแท็กปิดด้วยตนเอง และไม่มีแอตทริบิวต์ที่จําเป็น การมี width โดยไม่มี height และในทางกลับกันก็ไม่เป็นไร

สรุปประเด็นสำคัญ

HTML คืออะไร

เราจะใช้ HTML เมื่อใด

การทํางานของ HTML

ส่วนต่างๆ ขององค์ประกอบ HTML

ตัวอย่าง HTML

รหัสนี้...

... ทําให้หน้าเว็บนี้

การอ้างอิง HTML

การแบ่งพื้นที่หน้าจอ

บริบทและวัตถุประสงค์

วัตถุประสงค์การเรียนรู้

เริ่มต้นใช้งาน

การจัดเฟรมและวัตถุประสงค์ในส่วนต่างๆ

ภารกิจย่อย

โครงสร้างของหน้า HTML

การจัดเฟรมและวัตถุประสงค์ในส่วนต่างๆ

คำศัพท์

ตัวอย่าง HTML

ภารกิจย่อย

แท็กทั่วไป

การจัดเฟรมและวัตถุประสงค์ในส่วนต่างๆ

ภารกิจย่อย

บริบท

การทํางานของ HTML

เริ่มต้นใช้งาน HTML

การดูหน้าเว็บของคุณ

ไวยากรณ์ทั่วไป

องค์ประกอบฝังอยู่

โครงสร้างของหน้า HTML

องค์ประกอบทั่วไป

ย่อหน้า

ความคิดเห็น

ส่วนหัว

ทั่วไป <div>

รายการ

อิมเมจ

โฆษณา Anchor (สิ่งที่ผู้คนใช้โทร "links")

เส้นแนวนอน

พัก

แบบฟอร์ม

อินพุต

เคล็ดลับและคำแนะนำ

สรุปแนวทางปฏิบัติแนะนํา

คำถามข้อที่ 1

คำถามข้อที่ 2

ในเอกสาร HTML __ จะอยู่ในองค์ประกอบ <head> และ __ จะอยู่ในองค์ประกอบ <body>

คำถามที่ 3

ข้อใดต่อไปนี้ไม่ใช่เหตุผลที่ดีของการเยื้ององค์ประกอบที่ฝังอยู่

คำถามที่ 4

ข้อใดต่อไปนี้เป็นแอตทริบิวต์ขององค์ประกอบ HTML

คำถามที่ 5

องค์ประกอบ HTML ต่อไปนี้มีแอตทริบิวต์กี่รายการ

คำถามที่ 6

ในข้อมูลโค้ด HTML ต่อไปนี้ที่แสดงให้เห็นถึงความสัมพันธ์ องค์ประกอบใดเป็นองค์ประกอบระดับบนสุด

คำถามที่ 7

องค์ประกอบในข้อมูลโค้ด HTML ต่อไปนี้เป็นองค์ประกอบย่อยสําหรับองค์ประกอบระดับบนสุดกี่รายการ

คำถามที่ 8

แม้ว่าบางเบราว์เซอร์จะแสดงผลข้อมูลโค้ด HTML ต่อไปนี้อย่างถูกต้อง แต่จะเกิดอะไรขึ้น

คำถามข้อที่ 1

คำถามข้อที่ 2

ในเอกสาร HTML __ จะอยู่ในองค์ประกอบ <head> และ __ จะอยู่ในองค์ประกอบ <body>

คำถามที่ 3

ข้อใดต่อไปนี้ไม่ใช่เหตุผลที่ดีของการเยื้ององค์ประกอบที่ฝังอยู่

คำถามที่ 4

ข้อใดต่อไปนี้เป็นแอตทริบิวต์ขององค์ประกอบ HTML

คำถามที่ 5

องค์ประกอบ HTML ต่อไปนี้มีแอตทริบิวต์กี่รายการ

คำถามที่ 6

ในข้อมูลโค้ด HTML ต่อไปนี้ที่แสดงให้เห็นถึงความสัมพันธ์ องค์ประกอบใดเป็นองค์ประกอบระดับบนสุด

คำถามที่ 7

องค์ประกอบในข้อมูลโค้ด HTML ต่อไปนี้เป็นองค์ประกอบย่อยสําหรับองค์ประกอบระดับบนสุดกี่รายการ

คำถามที่ 8

แม้ว่าบางเบราว์เซอร์จะแสดงผลข้อมูลโค้ด HTML ต่อไปนี้อย่างถูกต้อง แต่จะเกิดอะไรขึ้น

ในเอกสาร HTML จะอยู่ในองค์ประกอบ `<head>` และ จะอยู่ในองค์ประกอบ `<body>`

ในเอกสาร HTML จะอยู่ในองค์ประกอบ `<head>` และ จะอยู่ในองค์ประกอบ `<body>`