แบบฝึกหัด - เพิ่ม HTML พื้นฐานไปยังเว็บแอปของคุณ

  • 10 นาที

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

ในหน่วยนี้ คุณเพิ่มเนื้อหา HTML พื้นฐาน เปิดหน้า HTML ในเบราว์เซอร์และดูเครื่องมือนักพัฒนาเป็นครั้งแรก

เพิ่มโค้ด HTML บางอย่าง

Visual Studio Code ให้การสนับสนุนพื้นฐานสําหรับการเขียนโปรแกรม HTML แบบนอกกรอบ มีการเน้นไวยากรณ์ การทําให้สมาร์ทเสร็จสมบูรณ์ด้วย IntelliSense และการจัดรูปแบบที่สามารถกําหนดเองได้

  1. เปิดโฟลเดอร์เว็บไซต์ของคุณใน Visual Studio Code จากนั้นเปิดไฟล์ index.html โดยการเลือกไฟล์ใน Explorer

  2. ในหน้า index.html ให้พิมพ์ html:5จากนั้นเลือก ป้อน โค้ดเทมเพลต HTML5 จะถูกเพิ่มไปยังไฟล์

    โน้ต

    ถ้าไม่ได้เพิ่มโค้ดเทมเพลต HTML5 ลงในไฟล์ index.html ให้ลองปิดและเปิดไฟล์ใหม่

  3. แก้ไขโค้ดเทมเพลตเพื่อให้มีลักษณะดังต่อไปนี้ จากนั้นบันทึกไฟล์โดยการเลือก Control + S บน Windows หรือคําสั่ง + S บน macOS

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

HTML มีหลายเวอร์ชัน บ่งชี้ว่าเอกสาร HTML นี้มีโค้ด HTML5

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

ชุดอักขระ (charset) สําหรับ UTF-8 อาจดูเหมือนไม่มีนัยสําคัญ แต่เป็นสิ่งสําคัญในการสร้างวิธีที่คอมพิวเตอร์แปลอักขระ หากเมตาดาต้าของชุดอักขระหายไป อาจทําให้เกิดความปลอดภัยที่ไม่ปลอดภัยได้ มีประวัติและข้อมูลทางเทคนิคอยู่เบื้องหลังแอตทริบิวต์ charset ค่อนข้างมาก แต่ประเด็นสําคัญของแบบฝึกหัดนี้คือ ต้นแบบของ Visual Studio Code เป็นค่าเริ่มต้น

แก้ไขส่วนหัว

องค์ประกอบ <head> ในโค้ด HTML ของคุณประกอบด้วยข้อมูลเกี่ยวกับเว็บไซต์ของคุณที่ไม่สามารถมองเห็นได้ภายในแท็บเบราว์เซอร์

เมตาดาต้า กําหนดข้อมูลเกี่ยวกับเอกสาร HTML เช่น ชุดอักขระ สคริปต์ และเบราว์เซอร์ที่เว็บเพจเปิดขึ้น

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

สําคัญ

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

  1. ในตัวแก้ไข แก้ไของค์ประกอบ <title> เพื่อให้คล้ายกับตัวอย่างต่อไปนี้

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

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

  1. ในตัวแก้ไข Visual Studio Code ให้เพิ่มบรรทัดว่างหลังจากองค์ประกอบ <title> พิมพ์ linkจากนั้นเลือก ป้อน Visual Studio Code ควรเพิ่มบรรทัดต่อไปนี้ลงในไฟล์ index.html ของคุณ

    <link rel="stylesheet" href="">

  2. อัปเดต href= ไปที่ href="main.css"และบันทึกไฟล์โดยการเลือก Control+S บน Windows หรือ Command+S บน macOS

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

แก้ไขเนื้อความ

มาเริ่มกรอกข้อมูลในองค์ประกอบ <body> กันเลย

องค์ประกอบ <body> ประกอบด้วยเนื้อหาของเว็บไซต์ของคุณที่ลูกค้าของคุณสามารถมองเห็นได้ในเบราว์เซอร์ของพวกเขา

  1. ภายในองค์ประกอบ <body> เพิ่มหัวเรื่อง <h1> องค์ประกอบ ตามด้วยองค์ประกอบ จากนั้นสร้างรายการที่ไม่เรียงลําดับ <p> ที่มีองค์ประกอบ <ul>หลายรายการ

  2. แก้ไขโค้ดของคุณ หรือคัดลอกและวาง เพื่อให้มีลักษณะดังตัวอย่างต่อไปนี้

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

คุณสามารถใช้แอตทริบิวต์ ID (ที่ใช้ในองค์ประกอบ <p>) สําหรับการกําหนดลักษณะองค์ประกอบหนึ่ง ในขณะที่แอตทริบิวต์คลาส (ที่ใช้ในองค์ประกอบ <li>) ใช้สําหรับการจัดรูปแบบองค์ประกอบทั้งหมดของคลาสเดียวกัน

ก่อนขั้นตอนถัดไป ตรวจสอบให้แน่ใจว่าไฟล์ของคุณได้รับการบันทึกโดยการเลือก Control+S หรือ Command+S

เปิดในเบราว์เซอร์

คุณสามารถแสดงตัวอย่างเว็บเพจของคุณได้ภายในเครื่องโดยการเปิดแฟ้ม HTML ในเบราว์เซอร์ แทนที่จะเป็นที่อยู่เว็บไซต์ที่ขึ้นต้นด้วย https://เบราว์เซอร์ของคุณจะชี้ไปยังเส้นทางของแฟ้มภายในเครื่องซึ่งควรมีลักษณะคล้ายกับ C:/dev/simple-website/index.html

  • เมื่อต้องการแสดงตัวอย่างโดยใช้ Visual Studio Code ให้คลิกขวา index.html และเลือก เปิดในเบราว์เซอร์เริ่มต้น หรือเลือกไฟล์ index.html และใช้แป้นพิมพ์ลัด Alt + B

    สกรีนช็อตของรายการเมนูบริบทเปิดในเบราว์เซอร์ในรหัส Visual Studio

    สําคัญ

    ถ้าคุณกําลังมีปัญหา ตรวจสอบให้แน่ใจว่า คุณกําลังคลิกขวาที่ไอคอนชื่อไฟล์หรือข้อความโดยตรง หากกล่องโต้ตอบ Visual Studio Code ปรากฏขึ้น ให้เลือก ใช่ ฉันเชื่อถือผู้เขียนนี่คือคุณลักษณะ Workspace Trust ที่ช่วยให้คุณตัดสินใจว่าโฟลเดอร์โครงการของคุณควรอนุญาตหรือจํากัดการดําเนินการโค้ดอัตโนมัติ คุณเพิ่งสร้างไฟล์ ขึ้น ดังนั้นจึงปลอดภัย

    เว็บเพจเปิดขึ้นในเบราว์เซอร์เริ่มต้นของคุณ

ดูหน้าโดยใช้เครื่องมือสําหรับนักพัฒนา

คุณสามารถตรวจสอบเว็บเพจโดยใช้เครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์ของคุณ ลองทําดู

  1. เปิด เครื่องมือสําหรับนักพัฒนา โดยการคลิกขวาในเว็บเพจ และเลือก ตรวจสอบหรือลองใช้ทางลัดเหล่านี้:

    • กดแป้นพิมพ์ลัดสําหรับ เครื่องมือสําหรับนักพัฒนาซึ่งจะ F12

    • กด Ctrl + Shift + I บน Windows และ Linux หรือ Option + Command + I บน Mac

    แป้นพิมพ์ลัดเหล่านี้ทํางานใน Microsoft Edge Chromeและ Firefox ถ้าคุณกําลังใช้ Safariให้ดู เครื่องมือ Web Development เมื่อติดตั้งแล้ว ให้เลือก การกําหนดลักษณะ > Safariจากนั้นเลือก ขั้นสูง ที่ด้านล่างของบานหน้าต่าง เลือกกล่องกาเครื่องหมาย แสดงการพัฒนา ในแถบเมนู เลือก พัฒนา >ตัวตรวจสอบเว็บ สําหรับข้อมูลเพิ่มเติม ให้ตรวจสอบเอกสารประกอบของตัวตรวจสอบเว็บใน Safari

    เมื่อต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเปิดเครื่องมือนักพัฒนาและคุณลักษณะหลักที่พร้อมใช้งาน โปรดดูบทความ ภาพรวมของ DevTools

  2. เลือกแท็บ องค์ประกอบ

    สกรีนช็อตที่แสดงหน้าต่างเบราว์เซอร์พร้อมเว็บไซต์ และเครื่องมือสําหรับนักพัฒนาที่อยู่ถัดจากหน้านั้นด้วยแท็บองค์ประกอบที่เลือก

  3. เลื่อนเมาส์ของคุณไปไว้เหนือองค์ประกอบ HTML ที่แสดงในแท็บ Elements และขยายเนื้อหาขององค์ประกอบต่าง ๆ

องค์ประกอบ แท็บในเครื่องมือนักพัฒนาแสดงให้คุณเห็นแบบจําลองออบเจ็กต์เอกสาร (DOM) ตามที่แสดงในเบราว์เซอร์ เมื่อมีการดีบัก เป็นสิ่งสําคัญที่จะต้องดูว่าเบราว์เซอร์ตีความโค้ดต้นฉบับของคุณอย่างไรบ่อยครั้ง

การตรวจสอบหน้าเพจในเบราว์เซอร์จะให้ข้อมูลที่เป็นประโยชน์และสามารถช่วยคุณแก้ไขปัญหาได้ คุณยังสามารถดูรายละเอียด CSS ด้วยตัวตรวจสอบ ตามที่คุณจะเห็นในส่วนถัดไป