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

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

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

สิ่งสำคัญที่เรียนรู้

นักเรียนเข้าใจโครงสร้างไฟล์ HTML
นักเรียน/นักศึกษาทราบวิธีใช้แท็กทั่วไปเพื่อสร้างหน้าเว็บ

HTML คืออะไร

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

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

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

หน้าเว็บทุกหน้าที่คุณเห็นในเวิลด์ไวด์เว็บเขียนขึ้นโดยใช้โค้ด 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 นี้เป็นข้อมูลอ้างอิง
คุณสามารถให้นักเรียนคัดลอกโค้ดนี้ลงในโปรแกรมแก้ไขและท้าทายให้นักเรียนเปลี่ยนเนื้อหาขององค์ประกอบโดยไม่ต้องเปลี่ยนองค์ประกอบเอง จากนั้นเพิ่มองค์ประกอบอื่นๆ ลงในโค้ดที่มีอยู่
คุณสามารถสร้างสิ่งนี้ตั้งแต่ต้นเป็นการเขียนโค้ดตาม โดยอธิบายองค์ประกอบต่างๆ ขณะเพิ่มองค์ประกอบเหล่านั้น จากนั้นนักเรียนจะกลับมาดูคำแนะนำนี้เพื่อเป็นการเตือนความจำเกี่ยวกับสิ่งที่สร้างขึ้น หรือเพื่อตรวจสอบว่าโค้ดมีข้อผิดพลาดตรงไหน

ในฐานะผู้สอน หน้าที่ของคุณไม่ได้มีเพียงการช่วยให้นักเรียน/นักศึกษาได้รับเนื้อหาในหน้าเว็บ แต่ยังรวมถึงการช่วยให้นักเรียน/นักศึกษาเข้าใจว่า 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>
เราจะแทรกข้อความหรือ "เนื้อหา" ขององค์ประกอบระหว่างแท็กเปิดและปิด ผลลัพธ์สุดท้ายจะมีลักษณะดังนี้ <example-tag>Content Goes in here</example-tag> นอกจากนี้ คุณยังวางแท็กไว้ภายในแท็กอื่นๆ ได้ด้วย
โปรดทราบว่าเมื่อวางแท็กไว้ภายในแท็กอื่น คุณควรเยื้องแท็กใหม่เพื่อแสดงว่าเป็นแท็กย่อยของแท็กหลัก

คำศัพท์

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

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

บริบท

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

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

การใช้งาน HTML

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

เขียน HTML ภายในไฟล์ที่มีนามสกุล .html

การดูเพจ

หากต้องการแสดงตัวอย่างไฟล์ HTML ใน Mac ให้ไปที่โฟลเดอร์ที่มีหน้า HTML ในบรรทัดคำสั่ง แล้วพิมพ์ open filename โดยแทนที่ "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 (สิ่งที่หลายคนเรียกว่า "ลิงก์")

สำหรับไฮเปอร์ลิงก์ แท็ก <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/Tags/, 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

องค์ประกอบใดต่อไปนี้เป็นองค์ประกอบย่อย (ไม่ต้องสนใจองค์ประกอบ body/html สำหรับวัตถุประสงค์ของแบบฝึกหัดนี้)

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

h1
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

องค์ประกอบใดต่อไปนี้เป็นองค์ประกอบย่อย (ไม่ต้องสนใจองค์ประกอบ body/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 หรือมี height โดยไม่มี width ก็ได้

สิ่งสำคัญที่เรียนรู้

HTML คืออะไร

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

การใช้งาน HTML

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

ตัวอย่าง HTML

รหัสนี้...

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

การอ้างอิง HTML

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

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

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

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

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

มินิชาเลนจ์

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

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

คำศัพท์

ตัวอย่าง HTML

มินิชาเลนจ์

แท็กที่ใช้กันทั่วไป

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

มินิชาเลนจ์

บริบท

การใช้งาน HTML

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

การดูเพจ

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

องค์ประกอบซ้อนกัน

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

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

ย่อหน้า

ความคิดเห็น

ส่วนหัว

<div> ทั่วไป

รายการ

รูปภาพ

Anchor (สิ่งที่หลายคนเรียกว่า "ลิงก์")

เส้นแนวนอน

พัก

แบบฟอร์ม

อินพุต

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

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

คำถามที่ 1

องค์ประกอบใดต่อไปนี้เป็นองค์ประกอบย่อย (ไม่ต้องสนใจองค์ประกอบ body/html สำหรับวัตถุประสงค์ของแบบฝึกหัดนี้)

คำถามที่ 2

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

คำถามที่ 3

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

คำถามที่ 4

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

คำถามที่ 5

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

คำถามที่ 6

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

คำถามที่ 7

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

คำถามที่ 8

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

คำถามที่ 1

องค์ประกอบใดต่อไปนี้เป็นองค์ประกอบย่อย (ไม่ต้องสนใจองค์ประกอบ body/html สำหรับวัตถุประสงค์ของแบบฝึกหัดนี้)

คำถามที่ 2

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

คำถามที่ 3

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

คำถามที่ 4

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

คำถามที่ 5

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

คำถามที่ 6

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

คำถามที่ 7

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

คำถามที่ 8

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

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

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