สารบัญ:

วิธีสร้างเว็บเพจอย่างง่ายโดยใช้วงเล็บสำหรับผู้เริ่มต้น: 14 ขั้นตอน
วิธีสร้างเว็บเพจอย่างง่ายโดยใช้วงเล็บสำหรับผู้เริ่มต้น: 14 ขั้นตอน

วีดีโอ: วิธีสร้างเว็บเพจอย่างง่ายโดยใช้วงเล็บสำหรับผู้เริ่มต้น: 14 ขั้นตอน

วีดีโอ: วิธีสร้างเว็บเพจอย่างง่ายโดยใช้วงเล็บสำหรับผู้เริ่มต้น: 14 ขั้นตอน
วีดีโอ: การสร้างแบบฟอร์มออนไลน์และการใช้งานโปรแกรมตารางทำงานออนไลน์ (เทคโนโลยี ป.6 บทที่ 7) 2024, พฤศจิกายน
Anonim
วิธีสร้างเว็บเพจอย่างง่ายโดยใช้วงเล็บสำหรับผู้เริ่มต้น
วิธีสร้างเว็บเพจอย่างง่ายโดยใช้วงเล็บสำหรับผู้เริ่มต้น

บทนำ

คำแนะนำต่อไปนี้ให้คำแนะนำทีละขั้นตอนในการสร้างหน้าเว็บโดยใช้วงเล็บ วงเล็บคือเครื่องมือแก้ไขซอร์สโค้ดโดยเน้นที่การพัฒนาเว็บเป็นหลัก สร้างโดย Adobe Systems เป็นซอฟต์แวร์โอเพ่นซอร์สฟรีที่ได้รับอนุญาตภายใต้ใบอนุญาต MIT และขณะนี้ Adobe และนักพัฒนาซอฟต์แวร์โอเพ่นซอร์สอื่นๆ ได้รับการดูแลบน GitHub มันเขียนด้วย JavaScript, HTML และ CSS

คำแนะนำ

หมายเหตุ: - แท็ก HTML ทั้งหมดควรอยู่ระหว่างวงเล็บ:

ขั้นตอนที่ 1: ดาวน์โหลดซอฟต์แวร์

ดาวน์โหลดซอฟต์แวร์
ดาวน์โหลดซอฟต์แวร์

ดาวน์โหลดวงเล็บจากเว็บไซต์นี้

ขั้นตอนที่ 2: เปิดวงเล็บ

เปิดวงเล็บ
เปิดวงเล็บ

เปิดซอฟต์แวร์วงเล็บที่ดาวน์โหลดมาบนคอมพิวเตอร์

ขั้นตอนที่ 3: สร้างไฟล์ใหม่

สร้างไฟล์ใหม่
สร้างไฟล์ใหม่

หลังจากเปิดวงเล็บ คลิกที่ไอคอนไฟล์ที่ด้านบนซ้ายของหน้าต่าง จากนั้นคลิกใหม่ คุณจะเห็นไฟล์ใหม่ "Untitled"

ขั้นตอนที่ 4: บันทึกเป็น.. ไฟล์

บันทึกเป็น.. ไฟล์
บันทึกเป็น.. ไฟล์

คลิกขวาที่ไฟล์นี้ 'ไม่มีชื่อ' คลิกบันทึกเป็น จากนั้นคุณควรบันทึกลงในไดรฟ์

ณ จุดนี้ คุณสามารถตั้งชื่อไฟล์ใดก็ได้ เพียงตรวจสอบให้แน่ใจว่าหลังจากชื่อนั้นให้เพิ่ม “.html” (จุด html)

ขั้นตอนที่ 5: เริ่มต้นด้วยแท็ก DOCTYPE

เริ่มต้นด้วยแท็ก DOCTYPE
เริ่มต้นด้วยแท็ก DOCTYPE

หน้า html ทุกหน้าต้องขึ้นต้นด้วยแท็กโครงสร้างต่อไปนี้ ซึ่งจะบอกให้เบราว์เซอร์ทราบว่า 'กฎที่ต้องปฏิบัติตาม' เมื่อแสดงหน้า HTML

ขั้นตอนที่ 6: แท็ก HTML

แท็ก HTML
แท็ก HTML

และ - แท็กเหล่านั้นใช้เพื่อเริ่มต้นและสิ้นสุดเอกสาร

ขั้นตอนที่ 7: แท็กศีรษะและร่างกาย

แท็กหัวและลำตัว
แท็กหัวและลำตัว

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

ขั้นตอนที่ 8: Meta Tag

เมตาแท็ก
เมตาแท็ก

ระหว่างแท็ก ให้เขียนตำแหน่งที่ให้ข้อมูลเช่นคำของเครื่องมือค้นหาหรือการเข้ารหัสอักขระ

ขั้นตอนที่ 9: แท็กชื่อ

แท็กชื่อเรื่อง
แท็กชื่อเรื่อง

ระหว่างแท็ก ภายใต้ เขียน และ. ดังนั้น สิ่งที่คุณเขียนในระหว่างนั้น คุณจะเห็นมันที่ด้านบนของหน้าต่างเบราว์เซอร์ และแท็กนี้มีความสำคัญสำหรับเครื่องมือค้นหา ตัวอย่างเช่น ฉันจะเขียนว่า “WRD 204”

ขั้นตอนที่ 10: การเพิ่มย่อหน้าโดยใช้ P Tag

การเพิ่มย่อหน้าโดยใช้ P Tag
การเพิ่มย่อหน้าโดยใช้ P Tag

ในระหว่างเขียนข้อมูลใด ๆ ที่คุณต้องการให้ปรากฏบนหน้าเว็บ เช่น รูปภาพ เสียง วิดีโอ และย่อหน้า ตัวอย่างเช่น ฉันจะเขียนย่อหน้าโดยใช้แท็กนี้สำหรับย่อหน้า:

และ.

ขั้นตอนที่ 11: ดูผลลัพธ์ของคุณ

ดูผลลัพธ์ของคุณ
ดูผลลัพธ์ของคุณ
ดูผลลัพธ์ของคุณ
ดูผลลัพธ์ของคุณ

ในการดูผลลัพธ์ของคุณ: ก่อนอื่นให้คลิกขวาที่ไฟล์แล้วคลิก "บันทึก" แล้วคลิกไอคอน "แสดงตัวอย่างสด" ที่มุมบนขวา

หมายเหตุ: - ทุกครั้งที่คุณทำการเปลี่ยนแปลงและต้องการดูผลลัพธ์ ก่อนอื่น คุณต้องบันทึกไฟล์ คุณสามารถใช้ทางลัด "Ctrl + S"

ขั้นตอนที่ 12: เปลี่ยนการจัดรูปแบบ

เปลี่ยนการจัดรูปแบบ
เปลี่ยนการจัดรูปแบบ
เปลี่ยนการจัดรูปแบบ
เปลี่ยนการจัดรูปแบบ

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

ขั้นตอนที่ 13: แท็กตัวแบ่งบรรทัดเดี่ยว/คู่

แท็กตัวแบ่งบรรทัดเดี่ยว/คู่
แท็กตัวแบ่งบรรทัดเดี่ยว/คู่
แท็กตัวแบ่งบรรทัดเดี่ยว/คู่
แท็กตัวแบ่งบรรทัดเดี่ยว/คู่

หากคุณต้องการแบ่งบรรทัดเดี่ยว/คู่ระหว่างย่อหน้า ให้ใช้ tag

ขั้นตอนที่ 14: บทสรุป

ยินดีด้วย! ตอนนี้คุณสามารถเริ่มสร้างหน้าเว็บของคุณเองได้

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

แนะนำ: