เนื้อหา

• ขั้นตอน
• คำถามและคำตอบของชุมชน
• เคล็ดลับ
• คำเตือน

ส่วนอื่น ๆ

หากคุณต้องการเขียนโค้ดเว็บไซต์ด้วยตนเองคุณสามารถแก้ไขไฟล์ HTML ในโปรแกรมแก้ไขข้อความพื้นฐานเช่น Notepad (Windows) หรือ TextEdit (macOS) หากคุณต้องการย้ายองค์ประกอบไปมาบนหน้าจอและดูตัวอย่างสดคุณสามารถใช้โปรแกรมแก้ไขแบบ WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ) เช่น Dreamweaver หรือ Kompozer บทความวิกิฮาวนี้จะแนะนำวิธีการเปิดและแก้ไขไฟล์ HTML ในแอปมาตรฐานหรือแอปแก้ไขภาพ

ขั้นตอน

วิธีที่ 1 จาก 4: การใช้ Notepad บน Windows

1. 

   . เป็นปุ่มที่มีโลโก้ Windows ในแถบงาน โดยค่าเริ่มต้นจะอยู่ที่มุมล่างซ้าย ซึ่งจะแสดงเมนูเริ่ม

2. 

   . อยู่ที่มุมขวาบนของเดสก์ท็อป Mac ซึ่งจะแสดงแถบค้นหา

3. 

   
   
   ประเภท TextEdit ในแถบค้นหา ซึ่งจะแสดงรายการแอพที่ตรงกับผลการค้นหาของคุณ

4. 

   
   
   คลิก TextEdit.app. อยู่ที่ด้านบนสุดของผลการค้นหา ถัดจากไอคอนที่เป็นแผ่นกระดาษและปากกา

5. 

   คลิก ไฟล์. ที่แถบเมนูด้านบนของหน้าจอเมื่อ TextEdit เปิดอยู่

6. 

   
   
   คลิก เปิด. เพื่อเปิดไฟล์เบราว์เซอร์ที่ใช้นำทาง Mac และเปิดไฟล์ได้

7. 

   คลิกไฟล์ HTML แล้วคลิก เปิด. ไฟล์ HTML มีนามสกุลว่า ".html" หลังชื่อไฟล์ ใช้เบราว์เซอร์ไฟล์เพื่อนำทางไปยังไฟล์ HTML และคลิกเพื่อเลือก จากนั้นคลิก เปิด เพื่อเปิดไฟล์ HTML ใน TextEdit

8. 

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

   • ข้อความพาดหัว

     : แท็กเหล่านี้สร้างแท็กบรรทัดแรก ข้อความที่อยู่ระหว่าง "

     "และ"

     แท็กจะปรากฏเป็นข้อความตัวหนาขนาดใหญ่ข้อความจะอยู่ในเนื้อหาของเอกสาร HTML

   • ข้อความย่อหน้า

     : แท็กเหล่านี้ใช้เพื่อสร้างข้อความย่อหน้าในเอกสาร HTML ข้อความที่อยู่ระหว่าง "

     "และ"

     "ปรากฏเป็นข้อความขนาดปกติข้อความจะอยู่ในเนื้อหาของเอกสาร HTML
   • ข้อความตัวหนา: แท็กเหล่านี้ใช้เพื่อสร้างข้อความตัวหนา ข้อความที่อยู่ระหว่าง ""และ""ปรากฏเป็นข้อความตัวหนา
   • ข้อความตัวเอียง: แท็กเหล่านี้ใช้เพื่อสร้างข้อความตัวเอียง ข้อความที่อยู่ระหว่าง ""และ""ปรากฏเป็นข้อความตัวอักษร
   • ข้อความลิงก์: แท็กนี้ใช้เพื่อเชื่อมโยงไปยังเว็บไซต์อื่น คัดลอกที่อยู่เว็บที่คุณต้องการเชื่อมโยงและวางในตำแหน่ง "URL" (อยู่ระหว่างเครื่องหมายคำพูด) ข้อความของลิงก์ที่ระบุว่า "ข้อความลิงก์" (ไม่ต้องใช้เครื่องหมายคำพูด)
   • : แท็กนี้ใช้เพื่อโพสต์รูปภาพโดยใช้ HTML แทนที่ข้อความที่ระบุว่า "URL รูปภาพ" ด้วยที่อยู่เว็บของรูปภาพ

9. 

   คลิก ไฟล์. อยู่ในแถบเมนูด้านบนของหน้าจอ

10. 

    คลิก บันทึก. ในเมนูแบบเลื่อนลงด้านล่าง "File" ซึ่งจะบันทึกไฟล์ HTML
    • ในการเปลี่ยนชื่อไฟล์ให้คลิก เปลี่ยนชื่อ ในเมนูแบบเลื่อนลง "ไฟล์" พิมพ์ชื่อไฟล์ใหม่ที่ด้านบนสุดของหน้าจอ อย่าลืมใส่ส่วนขยาย ".html" ที่ด้านบนของหน้า

วิธีที่ 3 จาก 4: การใช้ Dreamweaver

1. 

   เปิด Dreamweaver Dreamweaver มีไอคอนที่เป็นรูปสี่เหลี่ยมสีเขียวที่เขียนว่า "Dw" อยู่ตรงกลาง คลิกไอคอนในเมนู Start ของ Windows หรือโฟลเดอร์ Application บน Mac เพื่อเปิด Dreamweaver
   • Adobe Dreamweaver ต้องสมัครสมาชิก คุณสามารถซื้อการสมัครสมาชิกเริ่มต้นที่ $ 20.99 ต่อเดือน

2. 

   คลิก ไฟล์. อยู่ในแถบเมนูด้านบนสุดของหน้าจอ

3. 

   คลิก เปิด. ในเมนูแบบเลื่อนลงด้านล่าง "File"

4. 

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

5. 

   คลิก แยก. เป็นแท็บกลางที่ด้านบนของหน้า ซึ่งจะแสดงหน้าจอแยกที่มีตัวแก้ไข HTML ที่ด้านล่างและหน้าจอแสดงตัวอย่างอยู่ด้านบน

6. 

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

7. 

   คลิก ไฟล์. เมื่อคุณแก้ไขเอกสาร HTML เสร็จแล้วให้คลิก ไฟล์ ในแถบเมนูที่ด้านบนสุดของหน้าจอ

8. 

   คลิก บันทึก. ในเมนูที่ขยายลงมาด้านล่าง ไฟล์. ซึ่งจะบันทึกเอกสาร HTML ของคุณ

วิธี 4 จาก 4: ใช้ Kompozer

1. 

   ไปที่ https://sourceforge.net/projects/kompozer/ ในเว็บเบราว์เซอร์ คุณสามารถใช้เว็บเบราว์เซอร์ใดก็ได้บนพีซีหรือ Mac นี่คือหน้าดาวน์โหลด Kompozer เป็นโปรแกรมแก้ไข HTML (WYSIWYG) ฟรีที่ทำงานได้ทั้งบน Windows และ Mac

2. 

   คลิก ดาวน์โหลด. ที่เป็นปุ่มสีเขียวทางด้านบนของหน้า ซึ่งจะนำคุณไปยังหน้าดาวน์โหลดแยกต่างหาก หลังจากล่าช้าไป 5 วินาทีการดาวน์โหลดของคุณจะเริ่มขึ้น

3. 

   ดับเบิลคลิกที่ไฟล์ติดตั้ง โดยค่าเริ่มต้นไฟล์ที่คุณดาวน์โหลดจะอยู่ในโฟลเดอร์ "ดาวน์โหลด" บนพีซีหรือ Mac คุณยังสามารถคลิกบนเว็บเบราว์เซอร์ของคุณเพื่อเปิดโปรแกรมติดตั้ง Kompozer ใช้คำแนะนำต่อไปนี้เพื่อติดตั้ง Kompozer:
   • Windows:
     • หากระบบถามว่าคุณต้องการอนุญาตให้โปรแกรมติดตั้งทำการเปลี่ยนแปลงระบบของคุณหรือไม่ให้คลิก ใช่.
     • คลิก ต่อไป ในหน้าต่างบทนำ
     • คลิกปุ่มรัศมีถัดจาก "ฉันยอมรับข้อตกลง" แล้วคลิก ต่อไป.
     • คลิก ต่อไป เพื่อใช้ตำแหน่งการติดตั้งเริ่มต้นหรือคลิก เรียกดู เพื่อเลือกตำแหน่งการติดตั้งอื่น
     • คลิก ต่อไป จากนั้นคลิก ต่อไป อีกครั้ง
     • คลิก ติดตั้ง
     • คลิก เสร็จสิ้น
   • Mac:
     • ดับเบิลคลิกที่ไฟล์ติดตั้ง Kompozer
     • คลิก KompoZer.app
     • คลิกไอคอน Apple ที่มุมบนซ้าย
     • คลิก การตั้งค่าระบบ
     • คลิก ความปลอดภัยและความเป็นส่วนตัว
     • คลิก ทั่วไป แท็บ
     • คลิก เปิดอย่างไรก็ตาม ใกล้ด้านล่างของหน้าต่าง
     • คลิก เปิด ในหน้าต่างป๊อปอัป
     • ลากไอคอน Kompozer ไปที่เดสก์ท็อปของคุณ
     • เปิด Finder
     • คลิก การใช้งาน โฟลเดอร์
     • ลากไอคอน Kompozer จากเดสก์ท็อปไปที่โฟลเดอร์ Applications

4. 

   เปิด Kompozer ใช้ขั้นตอนต่อไปนี้เพื่อเปิด Kompozer บน PC หรือ Mac
   • Windows:
     • คลิก Windows เริ่ม เมนู.
     • พิมพ์ "Kompozer"
     • ดับเบิลคลิกที่ไอคอน Kompozer
   • Mac:
     • คลิกไอคอนแว่นขยายที่มุมขวาบน
     • พิมพ์ "Kompozer" ในแถบค้นหา
     • ดับเบิลคลิก Kompozer.app.

5. 

   คลิก ไฟล์. อยู่ในแถบเมนูด้านบนของแอป

6. 

   คลิก เปิดไฟล์. เป็นตัวเลือกที่สองในเมนูแบบเลื่อนลงด้านล่าง "ไฟล์" เพื่อเปิดไฟล์เบราว์เซอร์ที่ใช้เลือกไฟล์ HTML ที่เปิดอยู่

7. 

   คลิกไฟล์ HTML แล้วคลิก เปิด. เพื่อเปิดไฟล์ HTML ใน Kompozer

8. 

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

9. 

   แก้ไขเอกสาร HTML หน้าจอซอร์สโค้ด HTML อยู่ด้านล่างคุณสามารถใช้หน้าจอนี้เพื่อแก้ไข HTML ได้เหมือนกับที่คุณทำใน Notepad หรือ TextEdit คุณยังสามารถใช้หน้าจอแสดงตัวอย่างเพื่อแก้ไข HTML ของคุณโดยใช้ขั้นตอนต่อไปนี้:
   • ใช้เมนูแบบเลื่อนลงที่มุมขวาบนเพื่อเลือกประเภทข้อความ (เช่นหัวเรื่องย่อหน้า ฯลฯ }
   • คลิกและพิมพ์เพื่อเพิ่มข้อความ
   • ใช้ปุ่มในแผงด้านบนของหน้าจอเพื่อเพิ่มตัวหนาตัวเอียงจัดแนวข้อความเยื้องหรือรายการให้กับข้อความของคุณ
   • คลิกสี่เหลี่ยมสีในแผงด้านบนของหน้าจอเพื่อเปลี่ยนสีข้อความ
   • คลิก ภาพ ไอคอนที่ด้านบนของหน้าจอเพื่อเพิ่มรูปภาพลงในเอกสาร HTML ของคุณ
   • คลิกไอคอนที่เป็นรูปลูกโซ่เพื่อเพิ่มลิงก์ไปยังเอกสาร HTML ของคุณ

10. 

    คลิก บันทึก ไอคอน. เมื่อคุณทำการเปลี่ยนแปลงเอกสารของคุณเสร็จแล้วให้คลิกไฟล์ บันทึก ไอคอนที่ด้านบนของหน้าจอ ใต้ไอคอนที่เป็นรูปฟล็อปปี้ดิสก์ ซึ่งจะช่วยประหยัดงานของคุณ

คำถามและคำตอบของชุมชน

เคล็ดลับ

คำเตือน

• อย่าลืมบันทึกเอกสารของคุณขณะแก้ไข อาจมีบางอย่างผิดพลาดได้ตลอดเวลา