แบบฝึกหัด - สร้างหน้า HTML

5 นาที

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

แบบฝึกหัดนี้ใช้ vscode.dev - Visual Studio Code และ CodeSwing เวอร์ชันบนเว็บ เครื่องมือเหล่านี้ช่วยปรับปรุงกระบวนการพัฒนาให้มีประสิทธิภาพขึ้น ไม่จําเป็นต้องติดตั้งภายในเครื่องเพื่อทําแบบฝึกหัดต่อไปนี้ให้เสร็จสมบูรณ์

สร้างหน้า HTML ด้วย CodeSwing

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

วิดีโอต่อไปนี้สาธิตวิธีการติดตั้ง CodeSwing ใน Visual Studio Code ขั้นตอนเหล่านี้จะอยู่ในขั้นตอนแบบฝึกหัด

สร้างโฟลเดอร์บนเดสก์ท็อปของคุณที่มีชื่อว่าประวัติย่อ
เปิด vscode.dev
เลือก เปิดโฟลเดอร์
นําทางไปยังโฟลเดอร์ประวัติย่อที่คุณสร้างไว้ก่อนหน้านี้ และเลือกเลือกโฟลเดอร์
เมื่อได้รับพร้อมท์แจ้งให้แสดงไฟล์ของไซต์ ให้เลือกดูไฟล์
เลือกปุ่ม ส่วนขยาย
ในกล่องข้อความ ค้นหาส่วนขยายใน Marketplace ให้พิมพ์ CodeSwing
เลือก ติดตั้ง เพื่อติดตั้ง CodeSwing
เปิด Command Palette โดยการเลือก Ctl-Shift-P หรือ Cmd-Shift-P บน Mac
พิมพ์ CodeSwing ใน Command Palette และเลือก CodeSwing: การสวิงใหม่ในไดเรกทอรี...
เลือก เลือกโฟลเดอร์ เพื่อใช้ไดเรกทอรีปัจจุบัน (ซึ่งเป็นไดเรกทอรีที่คุณสร้างขึ้นในขั้นตอนก่อนหน้า)
เลือก พื้นฐาน: HTML เท่านั้น
เมื่อได้รับพร้อมท์ให้บันทึกการเปลี่ยนแปลงเพื่อดําเนินต่อ เลือกบันทึกการเปลี่ยนแปลง

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

เพิ่ม HTML เพื่อสร้างโครงสร้างของเพจของคุณ

ถัดไป คุณเพิ่ม HTML เพื่อสร้างโครงสร้างของเพจของคุณ คุณสร้างองค์ประกอบhtmlหลักของ , headและbody bodyภายใน คุณเพิ่มส่วนที่ประกอบด้วยข้อมูลทั่วไปเกี่ยวกับคุณ เช่น ชื่อและข้อมูลสื่อทางสังคมออนไลน์ของคุณ จากนั้นคุณเพิ่มส่วนที่แสดงรายการของการศึกษาและประสบการณ์ของคุณ

วิดีโอต่อไปนี้สาธิตวิธีการเขียน HTML ใน Visual Studio Code และมีโค้ดที่แสดงผลใน CodeSwing ขั้นตอนเหล่านี้จะอยู่ในขั้นตอนแบบฝึกหัด

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

หลังจากเพิ่มโค้ดแล้ว คุณจะตรวจสอบได้ว่ามีการเพิ่มโค้ดใดแล้ว

ภายใน index.htmlเพิ่ม HTML ต่อไปนี้:

<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

แต่ละองค์ประกอบใน HTML ทําสิ่งที่เฉพาะเจาะจง ตารางต่อไปนี้อธิบายแท็กที่คุณใช้ใน HTML ของคุณและวิธีที่เบราว์เซอร์เข้าใจแท็กเหล่านั้น

ฉลาก	คำอธิบาย
`<html>`	แท็ก "คอนเทนเนอร์" สําหรับเอกสาร HTML ทั้งหมด แท็กอื่น ๆ ทั้งหมดจะถูกเขียนภายในองค์ประกอบ HTML

`<head>`	คอนเทนเนอร์ส่วนหัว โดยทั่วไปส่วนหัวจะรวมการอ้างอิงไปยังไฟล์อื่นๆ ที่หน้าหรือไซต์ต้องการ นอกจากนี้ยังสามารถรวมข้อมูลที่เครื่องมือค้นหาและไซต์โซเชียลมีเดียใช้เพื่อค้นหาเว็บไซต์ของคุณได้ดียิ่งขึ้น
`<body>`	แท็กนี้จะสร้างคอนเทนเนอร์เนื้อความสําหรับเว็บเพจ องค์ประกอบการแสดงผลส่วนใหญ่จะอยู่ในองค์ประกอบเนื้อความ
`<div>`	แท็กการหารจะสร้างส่วนใน HTML ส่วนมักจะมีเนื้อหาหรือเนื้อหาที่คล้ายกันที่เกี่ยวข้องกับอีกส่วนหนึ่ง
`<h1>` - `<h6>`	นี่คือแท็กส่วนหัว พวกเขาให้โครงสร้างบางอย่างกับเอกสาร HTML พวกเขาบอกเบราว์เซอร์ให้จัดรูปแบบข้อความระหว่างกันในวิธีเฉพาะในการแสดงลําดับชั้นนั้น
`<!-- comment text -->`	แท็กเหล่านี้เป็นข้อคิดเห็นใน HTML พวกเขาไม่ได้สร้างเอาต์พุตที่แสดง นักพัฒนาใช้โค้ดเพื่อทําให้ค้นหา แชร์ และทําความเข้าใจโค้ดได้ง่ายขึ้น
`/* CSS comment */`	แท็กข้อคิดเห็นเหล่านี้จะถูกใช้ใน Cascading Style Sheets

เมื่อคุณพิมพ์ หน้าดังกล่าวจะอัปเดตโดยอัตโนมัติ ผลลัพธ์สุดท้ายจะปรากฏคล้ายกับรูปภาพต่อไปนี้:

สกรีนช็อตของโครงสร้างประวัติย่อ

การตรวจสอบรหัส

ทุกหน้า HTML มี html เป็นองค์ประกอบหลักราก ซึ่งมีเนื้อหาทั้งหมดอยู่ภายใน โดยปกติ html มีลูกโดยตรงสองคน head ที่ประกอบด้วยเมตาดาต้า และ body ที่มีข้อมูลที่แสดง

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

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

คำติชม

หน้านี้มีประโยชน์หรือไม่