Blockdit Logo (Mobile)
KESANA
•
30 พ.ค. 2023 เวลา 22:53 • การศึกษา

เริ่ม HTML สร้างเว็บ พื้นฐานบนคอมพิวเตอร์

สร้างไฟล์ HTML ไฟล์แรกนี่เป็นเพียงตัวอย่างพื้นฐาน
เนื้อหานี้ศึกษาเรียนรู้ด้วยตนเอง
ก่อนที่เราจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งโปรแกรมแก้ไขข้อความบนคอมพิวเตอร์ของคุณแล้ว มีตัวเลือกมากมาย รวมถึง Notepad++, Visual Studio Code และ Sublime Text เมื่อคุณเตรียมโปรแกรมแก้ไขข้อความแล้ว ให้ทำตามขั้นตอนด้านล่างเพื่อสร้างไฟล์ HTML
ภาพที่1บรรยายสาธิ
เริ่มต้นสร้าง folder
  • 1.
    คลิกขวา
  • 2.
    ลากลูกศรลงเลือก Nwe
  • 3.
    เลือก folder
ภาพที่ 2 บรรยายสาธิ
ตั้งชื่อ folder
  • 1.
    ลากลูกศรชี้ folder
  • 2.
    คลิกขวา
ภาพที่ 3 บรรยายสาธิ
ลากลูกลงมาเลือก Rename
ภาพที่ 4 บรรยายสาธิ
จาก folder เปลี่ยนเป็นชื่อ web page
1
ภาพที่ 5 บรรยายสาธิ
ใส่ชื่อ เปิดโปรแกรมแก้ไขข้อความ
ภาพที่ 6 บรรยายสาธิ
พิมท์ notepad ในช่องค้นหา ไอคอนแว่ขยาย
ภาพที่ 7 บรรยายสาธิ
ชี้ลูกศรไบที่ open คลิกขวาเพื่อเปิด
ภาพที่ 8 บรรยายสาธิ
ตอนนี้คุณได้เปิด Notepad สำหรับ html พื้นฐาน
ภาพที่ 9 บรรยายสาธิ
บันทึกไฟล์ด้วยท้ายนามสกุล.html
บันทึกลงใน folder ชื่อ web page
ภาพที่ 10 บรรยายสาธิ
เลือก ลูกศรชี้ Desktop
ภาพที่ 11 บรรยายสาธิ
ลำถัดมา ลูกศรชี้เลือก web page เก็บงาน
ภาพที่ 12 บรรยายสาธิ
ลากลูกศรคลิก web page หนึ่งครั้ง ลากลูกศรลงมาเลือก open คลิกหนึ่งครั้ง
ภาพที่ 13 บรรยายสาธิ
ตอนนี้อยู่ใน web page สังเกตดู ที่เก็บผลงาน ใน Desktop>web page
ภาพที่ 14 บรรยายสาธิ
ตำแหน่งเก็บผลงาน ในตอนนี้ ThisPC>Desktop >web page
ภาพที่ 15 บรรยายสาธิ
ตอนนี้เรามาเลือกประเภท เลือกเป็น All File
ภาพที่ 16 บรรยายสาธิ
มาตั้งชื่อ ว่า mywebpage.html ลงด้วยนามสกุล .html
ภาพที่ 17 บรรยายสาธิ
เขียนโค้ดตามนี้ เปิดด้วย <ตามด้วย ! DOCTYPE html ปิดท้าย ด้วย >
เปิดด้วย < ตามด้วย html ปิดท้าย >
ถัดมา เปิดด้วย < ตาม head ปิดท้าย >
ถัดมา เปิด < ตาม title ปิดท้าย >ใส่ข้อความ ว่า My Web Page เปิดด้วย < / title > นี้เรียกว่าแท็กปิด
ถัดมาแท็กปิด < / heade >
แท็กเปิด < body > เนื้อหาอยู่ที่นี่ แท็กปิด < / body >
แท็กปิด < / html >
รหัสนี้กำหนดโครงสร้างพื้นฐานของเอกสาร HTML และรวมถึงองค์ประกอบชื่อสำหรับเพจของคุณ
ภายในแท็ก < body > สามารถเพื่มเนื้อหา หัวเรื่อง ย่อหน้า และรูปภาพ
เพิ่มหัวข้อ ใช้แท็ก < h > ย่อหน้าใช้แท็ก < p > รูปภาพใช้แท็ก < img > แอตทริบิวต์ src ในแท็กรูปภาพระบุ URL ของรูปภาพ แอตทริบิวต์ alt ให้ข้อความแสดงแทนหากไม่สามารถโหลดรูปภาพได้
< ! DOCTYPE html >
< html >
< head >
< title > My Web Page < / title >
< / head >
< body >
< h1 > Welcome to my web page < / h1 >
< p > This is my first HTML page ! < / p >
< img src = " https://example.com/image.jpg " alt="My imge" >
< / body >
< / html >
บันทึกไฟล์และเปิดในเว็บเบราว์เซอร์เพื่อดูการทำงานของหน้าเว็บของคุณ
ตัวอย่างเขียนโค้ด HTML
ภาพที่ 18 บรรยายสาธิ
คลิกขวา
ภาพที่ 19 บรรยายสาธิ
เปิดด้วย Google Chrome Dev
ภาพที่ 20 บรรยายสาธิ
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
ขอแสดงความยินดี คุณได้สร้างไฟล์ HTML ไฟล์แรกของคุณแล้ว! แน่นอนว่านี่เป็นเพียงตัวอย่างพื้นฐาน และคุณสามารถเพิ่มองค์ประกอบและสไตล์อื่นๆ อีกมากมายเพื่อสร้างหน้าเว็บที่ซับซ้อนยิ่งขึ้น ด้วยการฝึกฝนบางอย่าง คุณสามารถสร้างหน้าเว็บที่สวยงามและใช้งานได้ซึ่งทุกคนที่มีการเชื่อมต่ออินเทอร์เน็ตสามารถดูได้
โฆษณา