เนื้อหา
ส่วนอื่น ๆหากคุณต้องการเขียนโค้ดเว็บไซต์ด้วยตนเองคุณสามารถแก้ไขไฟล์ HTML ในโปรแกรมแก้ไขข้อความพื้นฐานเช่น Notepad (Windows) หรือ TextEdit (macOS) หากคุณต้องการย้ายองค์ประกอบไปมาบนหน้าจอและดูตัวอย่างสดคุณสามารถใช้โปรแกรมแก้ไขแบบ WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ) เช่น Dreamweaver หรือ Kompozer บทความวิกิฮาวนี้จะแนะนำวิธีการเปิดและแก้ไขไฟล์ HTML ในแอปมาตรฐานหรือแอปแก้ไขภาพ
ขั้นตอน
วิธีที่ 1 จาก 4: การใช้ Notepad บน Windows
- . เป็นปุ่มที่มีโลโก้ Windows ในแถบงาน โดยค่าเริ่มต้นจะอยู่ที่มุมล่างซ้าย ซึ่งจะแสดงเมนูเริ่ม
- . อยู่ที่มุมขวาบนของเดสก์ท็อป Mac ซึ่งจะแสดงแถบค้นหา
-
ประเภท TextEdit ในแถบค้นหา ซึ่งจะแสดงรายการแอพที่ตรงกับผลการค้นหาของคุณ -
คลิก TextEdit.app. อยู่ที่ด้านบนสุดของผลการค้นหา ถัดจากไอคอนที่เป็นแผ่นกระดาษและปากกา - คลิก ไฟล์. ที่แถบเมนูด้านบนของหน้าจอเมื่อ TextEdit เปิดอยู่
-
คลิก เปิด. เพื่อเปิดไฟล์เบราว์เซอร์ที่ใช้นำทาง Mac และเปิดไฟล์ได้ - คลิกไฟล์ HTML แล้วคลิก เปิด. ไฟล์ HTML มีนามสกุลว่า ".html" หลังชื่อไฟล์ ใช้เบราว์เซอร์ไฟล์เพื่อนำทางไปยังไฟล์ HTML และคลิกเพื่อเลือก จากนั้นคลิก เปิด เพื่อเปิดไฟล์ HTML ใน TextEdit
- แก้ไขโค้ด HTML คุณสามารถใช้ TextEdit เพื่อแก้ไขโค้ด HTML ได้ คุณต้องเรียนรู้ HTML เพื่อที่คุณจะสามารถแก้ไขได้ด้วยตนเอง องค์ประกอบทั่วไปที่คุณสามารถแก้ไขได้มีดังต่อไปนี้
- : ไปที่ด้านบนสุดของเอกสาร HTML นี่เป็นการบอกเว็บเบราว์เซอร์ว่าเป็นเอกสาร HTML
- : แท็กเหล่านี้จะอยู่ที่ด้านบนและด้านล่างของเอกสาร HTML สิ่งนี้ระบุตำแหน่งที่โค้ด HTML เริ่มต้นและหยุด
- : แท็กเหล่านี้จะอยู่ที่ด้านบนสุดของเอกสาร HTML ระบุตำแหน่งที่ส่วนหัวของเอกสาร HTML เริ่มต้นและหยุด ส่วนหัวของเอกสาร HTML มีข้อมูลที่ไม่เห็นบนหน้าเว็บ ซึ่งรวมถึงชื่อหน้าข้อมูลเมตาและ CSS
ชื่อหน้า : แท็กเหล่านี้ระบุชื่อเพจ ชื่อจะอยู่ในส่วนหัวของเอกสาร HTML พิมพ์ชื่อของเพจระหว่างสองแท็กนี้- : แท็กเหล่านี้ระบุตำแหน่งที่เนื้อหาของเอกสาร HTML เริ่มต้นและหยุด เนื้อหาคือที่เขียนเนื้อหาของหน้าเว็บทั้งหมด เนื้อหาอยู่หลังส่วนหัวในเอกสาร HTML
ข้อความพาดหัว
: แท็กเหล่านี้สร้างแท็กบรรทัดแรก ข้อความที่อยู่ระหว่าง ""และ"
แท็กจะปรากฏเป็นข้อความตัวหนาขนาดใหญ่ข้อความจะอยู่ในเนื้อหาของเอกสาร HTMLข้อความย่อหน้า
: แท็กเหล่านี้ใช้เพื่อสร้างข้อความย่อหน้าในเอกสาร HTML ข้อความที่อยู่ระหว่าง ""และ"
"ปรากฏเป็นข้อความขนาดปกติข้อความจะอยู่ในเนื้อหาของเอกสาร HTML- ข้อความตัวหนา: แท็กเหล่านี้ใช้เพื่อสร้างข้อความตัวหนา ข้อความที่อยู่ระหว่าง ""และ""ปรากฏเป็นข้อความตัวหนา
- ข้อความตัวเอียง: แท็กเหล่านี้ใช้เพื่อสร้างข้อความตัวเอียง ข้อความที่อยู่ระหว่าง ""และ""ปรากฏเป็นข้อความตัวอักษร
- ข้อความลิงก์: แท็กนี้ใช้เพื่อเชื่อมโยงไปยังเว็บไซต์อื่น คัดลอกที่อยู่เว็บที่คุณต้องการเชื่อมโยงและวางในตำแหน่ง "URL" (อยู่ระหว่างเครื่องหมายคำพูด) ข้อความของลิงก์ที่ระบุว่า "ข้อความลิงก์" (ไม่ต้องใช้เครื่องหมายคำพูด)
- : แท็กนี้ใช้เพื่อโพสต์รูปภาพโดยใช้ HTML แทนที่ข้อความที่ระบุว่า "URL รูปภาพ" ด้วยที่อยู่เว็บของรูปภาพ
- คลิก ไฟล์. อยู่ในแถบเมนูด้านบนของหน้าจอ
- คลิก บันทึก. ในเมนูแบบเลื่อนลงด้านล่าง "File" ซึ่งจะบันทึกไฟล์ HTML
- ในการเปลี่ยนชื่อไฟล์ให้คลิก เปลี่ยนชื่อ ในเมนูแบบเลื่อนลง "ไฟล์" พิมพ์ชื่อไฟล์ใหม่ที่ด้านบนสุดของหน้าจอ อย่าลืมใส่ส่วนขยาย ".html" ที่ด้านบนของหน้า
วิธีที่ 3 จาก 4: การใช้ Dreamweaver
- เปิด Dreamweaver Dreamweaver มีไอคอนที่เป็นรูปสี่เหลี่ยมสีเขียวที่เขียนว่า "Dw" อยู่ตรงกลาง คลิกไอคอนในเมนู Start ของ Windows หรือโฟลเดอร์ Application บน Mac เพื่อเปิด Dreamweaver
- Adobe Dreamweaver ต้องสมัครสมาชิก คุณสามารถซื้อการสมัครสมาชิกเริ่มต้นที่ $ 20.99 ต่อเดือน
- คลิก ไฟล์. อยู่ในแถบเมนูด้านบนสุดของหน้าจอ
- คลิก เปิด. ในเมนูแบบเลื่อนลงด้านล่าง "File"
- เลือกเอกสาร HTML แล้วคลิก เปิด. ใช้เบราว์เซอร์ไฟล์เพื่อเลือกเอกสาร HTML บนคอมพิวเตอร์ของคุณแล้วคลิกเพื่อเลือก จากนั้นคลิก เปิด ที่มุมล่างขวา
- คลิก แยก. เป็นแท็บกลางที่ด้านบนของหน้า ซึ่งจะแสดงหน้าจอแยกที่มีตัวแก้ไข HTML ที่ด้านล่างและหน้าจอแสดงตัวอย่างอยู่ด้านบน
- แก้ไขเอกสาร HTML ใช้โปรแกรมแก้ไข HTML เพื่อแก้ไข HTML วิธีการแก้ไข HTML ใน Dreamweaver ไม่แตกต่างจากการแก้ไข HTML ใน Notepad หรือ TextEdit มากเกินไป เมื่อคุณพิมพ์แท็ก HTML เมนูค้นหาจะปรากฏขึ้นพร้อมกับแท็ก HTML ที่ตรงกัน คุณสามารถคลิกแท็ก HTML เพื่อแทรกแท็กเปิดและปิด Dreamweaver จะตรวจสอบว่ามีแท็กเปิดและปิดสำหรับองค์ประกอบ HTML ทั้งหมดของคุณ
- หรือคุณสามารถคลิกตำแหน่งที่คุณต้องการแทรกองค์ประกอบ HTML ในโปรแกรมแก้ไข HTML แล้วคลิก แทรก ในแถบเมนูที่ด้านบนสุดของหน้าจอ คลิกรายการที่คุณต้องการแทรกในเมนูแบบเลื่อนลงเพื่อเพิ่มโค้ด HTML โดยอัตโนมัติ
- คลิก ไฟล์. เมื่อคุณแก้ไขเอกสาร HTML เสร็จแล้วให้คลิก ไฟล์ ในแถบเมนูที่ด้านบนสุดของหน้าจอ
- คลิก บันทึก. ในเมนูที่ขยายลงมาด้านล่าง ไฟล์. ซึ่งจะบันทึกเอกสาร HTML ของคุณ
วิธี 4 จาก 4: ใช้ Kompozer
- ไปที่ https://sourceforge.net/projects/kompozer/ ในเว็บเบราว์เซอร์ คุณสามารถใช้เว็บเบราว์เซอร์ใดก็ได้บนพีซีหรือ Mac นี่คือหน้าดาวน์โหลด Kompozer เป็นโปรแกรมแก้ไข HTML (WYSIWYG) ฟรีที่ทำงานได้ทั้งบน Windows และ Mac
- คลิก ดาวน์โหลด. ที่เป็นปุ่มสีเขียวทางด้านบนของหน้า ซึ่งจะนำคุณไปยังหน้าดาวน์โหลดแยกต่างหาก หลังจากล่าช้าไป 5 วินาทีการดาวน์โหลดของคุณจะเริ่มขึ้น
- ดับเบิลคลิกที่ไฟล์ติดตั้ง โดยค่าเริ่มต้นไฟล์ที่คุณดาวน์โหลดจะอยู่ในโฟลเดอร์ "ดาวน์โหลด" บนพีซีหรือ Mac คุณยังสามารถคลิกบนเว็บเบราว์เซอร์ของคุณเพื่อเปิดโปรแกรมติดตั้ง Kompozer ใช้คำแนะนำต่อไปนี้เพื่อติดตั้ง Kompozer:
- Windows:
- หากระบบถามว่าคุณต้องการอนุญาตให้โปรแกรมติดตั้งทำการเปลี่ยนแปลงระบบของคุณหรือไม่ให้คลิก ใช่.
- คลิก ต่อไป ในหน้าต่างบทนำ
- คลิกปุ่มรัศมีถัดจาก "ฉันยอมรับข้อตกลง" แล้วคลิก ต่อไป.
- คลิก ต่อไป เพื่อใช้ตำแหน่งการติดตั้งเริ่มต้นหรือคลิก เรียกดู เพื่อเลือกตำแหน่งการติดตั้งอื่น
- คลิก ต่อไป จากนั้นคลิก ต่อไป อีกครั้ง
- คลิก ติดตั้ง
- คลิก เสร็จสิ้น
- Mac:
- ดับเบิลคลิกที่ไฟล์ติดตั้ง Kompozer
- คลิก KompoZer.app
- คลิกไอคอน Apple ที่มุมบนซ้าย
- คลิก การตั้งค่าระบบ
- คลิก ความปลอดภัยและความเป็นส่วนตัว
- คลิก ทั่วไป แท็บ
- คลิก เปิดอย่างไรก็ตาม ใกล้ด้านล่างของหน้าต่าง
- คลิก เปิด ในหน้าต่างป๊อปอัป
- ลากไอคอน Kompozer ไปที่เดสก์ท็อปของคุณ
- เปิด Finder
- คลิก การใช้งาน โฟลเดอร์
- ลากไอคอน Kompozer จากเดสก์ท็อปไปที่โฟลเดอร์ Applications
- Windows:
- เปิด Kompozer ใช้ขั้นตอนต่อไปนี้เพื่อเปิด Kompozer บน PC หรือ Mac
- Windows:
- คลิก Windows เริ่ม เมนู.
- พิมพ์ "Kompozer"
- ดับเบิลคลิกที่ไอคอน Kompozer
- Mac:
- คลิกไอคอนแว่นขยายที่มุมขวาบน
- พิมพ์ "Kompozer" ในแถบค้นหา
- ดับเบิลคลิก Kompozer.app.
- Windows:
- คลิก ไฟล์. อยู่ในแถบเมนูด้านบนของแอป
- คลิก เปิดไฟล์. เป็นตัวเลือกที่สองในเมนูแบบเลื่อนลงด้านล่าง "ไฟล์" เพื่อเปิดไฟล์เบราว์เซอร์ที่ใช้เลือกไฟล์ HTML ที่เปิดอยู่
- คลิกไฟล์ HTML แล้วคลิก เปิด. เพื่อเปิดไฟล์ HTML ใน Kompozer
- คลิก แยก. เป็นแท็บกลางที่ด้านบนของหน้า ซึ่งจะแสดงหน้าจอแยกที่มีโปรแกรมแก้ไข HTML ที่ด้านล่างและหน้าจอแสดงตัวอย่างอยู่ด้านบน
- คุณอาจต้องขยายแอพเพื่อให้มีพื้นที่ทำงานมากขึ้น
- แก้ไขเอกสาร HTML หน้าจอซอร์สโค้ด HTML อยู่ด้านล่างคุณสามารถใช้หน้าจอนี้เพื่อแก้ไข HTML ได้เหมือนกับที่คุณทำใน Notepad หรือ TextEdit คุณยังสามารถใช้หน้าจอแสดงตัวอย่างเพื่อแก้ไข HTML ของคุณโดยใช้ขั้นตอนต่อไปนี้:
- ใช้เมนูแบบเลื่อนลงที่มุมขวาบนเพื่อเลือกประเภทข้อความ (เช่นหัวเรื่องย่อหน้า ฯลฯ }
- คลิกและพิมพ์เพื่อเพิ่มข้อความ
- ใช้ปุ่มในแผงด้านบนของหน้าจอเพื่อเพิ่มตัวหนาตัวเอียงจัดแนวข้อความเยื้องหรือรายการให้กับข้อความของคุณ
- คลิกสี่เหลี่ยมสีในแผงด้านบนของหน้าจอเพื่อเปลี่ยนสีข้อความ
- คลิก ภาพ ไอคอนที่ด้านบนของหน้าจอเพื่อเพิ่มรูปภาพลงในเอกสาร HTML ของคุณ
- คลิกไอคอนที่เป็นรูปลูกโซ่เพื่อเพิ่มลิงก์ไปยังเอกสาร HTML ของคุณ
- คลิก บันทึก ไอคอน. เมื่อคุณทำการเปลี่ยนแปลงเอกสารของคุณเสร็จแล้วให้คลิกไฟล์ บันทึก ไอคอนที่ด้านบนของหน้าจอ ใต้ไอคอนที่เป็นรูปฟล็อปปี้ดิสก์ ซึ่งจะช่วยประหยัดงานของคุณ
คำถามและคำตอบของชุมชน
เคล็ดลับ
คำเตือน
- อย่าลืมบันทึกเอกสารของคุณขณะแก้ไข อาจมีบางอย่างผิดพลาดได้ตลอดเวลา