ดาวน์โหลดบทความดาวน์โหลดบทความ

บทความวิกิฮาวนี้จะแนะนำวิธีการเขียนโค้ด HTML สร้างหน้าเว็บอย่างง่ายที่มีแต่ข้อความ พอสร้างหน้าเว็บของตัวเองแล้ว ก็เซฟเป็นเอกสาร HTML เอาไปเปิดในเบราว์เซอร์ได้เลย คุณเขียนโค้ด HTML ได้ด้วยโปรแกรม text editor ทั่วไป ที่มีในคอมพิวเตอร์ Windows และ Mac อยู่แล้ว

ส่วน 1
ส่วน 1 ของ 2:

สร้างหน้าเว็บ

ดาวน์โหลดบทความ
  1. How.com.vn ไท: Step 1 เปิด text editor.
    ถ้าใช้ Windows ก็จะมีโปรแกรม Notepad หรือ Notepad++ ส่วนใครใช้ Mac ก็จะเป็น TextEdit
    • Windows - เปิด Start
      How.com.vn ไท: Windows Start
      พิมพ์ notepad หรือ notepad++ แล้วคลิก Notepad หรือ "Notepad++" ทางด้านบนของหน้าต่าง
    • Mac - คลิก Spotlight
      How.com.vn ไท: Mac Spotlight
      พิมพ์ textedit แล้วดับเบิลคลิก TextEdit ทางด้านบนของผลลัพธ์
  2. How.com.vn ไท: Step 2 กำหนดฟอร์แมตเอกสารเป็น HTML.
    พิมพ์ <!DOCTYPE html> แล้วกด Enter จากนั้นพิมพ์ <html> แล้วกด Enter อีกรอบ สุดท้ายพิมพ์ <head> แล้วกด Enter ทางด้านบนของเอกสารของคุณก็จะออกมาหน้าตาประมาณนี้[1]
    <!DOCTYPE html><html><head>
  3. How.com.vn ไท: Step 3 ตั้งชื่อ tab ของหน้าเว็บนั้น.
    ก็คือชื่อที่ขึ้นใน tab ของเบราว์เซอร์ตอนคุณเปิดหน้าเว็บนั้น (เช่น "Facebook") พิมพ์ <title> พิมพ์ชื่อ tab ของหน้าเว็บ แล้วพิมพ์ </title> จากนั้นใส่แท็ก "Head" ปิด หรือก็คือขึ้นบรรทัดใหม่แล้วพิมพ์ </head> ส่วนของชื่อหน้าเว็บจะออกมาประมาณนี้
    <title>เว็บของฉัน</title></head>
  4. How.com.vn ไท: Step 4 กำหนดจุดเริ่มต้นของข้อความเนื้อหาในหน้าเว็บ....
    กำหนดจุดเริ่มต้นของข้อความเนื้อหาในหน้าเว็บ. พิมพ์ <body> ล่างแท็ก "Head" ปิด เพื่อให้แน่ใจว่าข้อความที่ตามมาในเอกสาร จะถือเป็นเนื้อหาของเว็บ จนกว่าคุณจะใส่แท็ก "Body" ปิด ก็จะได้ออกมาแบบนี้
    <body>
  5. How.com.vn ไท: Step 5 สร้าง heading ของหน้าเว็บ.
    page heading ก็คือชื่อที่จะขึ้นทางด้านบนของเว็บไซต์ วิธีใส่ชื่อเว็บก็คือพิมพ์ <h1> ใส่ heading แล้วใส่แท็กปิด </h1> เช่น
    <h1>ยินดีต้อนรับสู่เว็บของเรา!</h1>
  6. How.com.vn ไท: Step 6 จะใส่ heading อื่นเพิ่มเติมด้วยก็ได้.
    คุณสร้าง heading ได้ 6 แบบด้วยกัน โดยใช้แท็ก <h1></h1> ไปจนถึง <h6></h6> เช่น ถ้าจะสร้าง heading 3 ขนาดเรียงกัน ก็ให้พิมพ์ดังต่อไปนี้
    <h1>ยินดีต้อนรับสู่เว็บของเรา!</h1><h2>เราชื่อโบว์</h2><h3>อ่านให้สนุกนะ</h3>
  7. How.com.vn ไท: Step 7 สร้างข้อความ 1 ย่อหน้า.
    แท็ก paragraph ใช้แบ่งข้อความเป็น "ก้อน" หรือเป็นย่อหน้า ถ้าจะเพิ่มข้อความในย่อหน้านั้น ก็ให้พิมพ์ <p> แล้วพิมพ์ข้อความที่ต้องการ จากนั้นพิมพ์ </p> เพื่อปิดแท็ก
    <p>ย่อหน้าของฉัน</p>
    • คุณขึ้นย่อหน้าใหม่ติดๆ กันได้หลายย่อหน้า ก็จะได้ชุดย่อหน้าใน heading เดียวกัน
  8. How.com.vn ไท: Step 8 เปลี่ยนสีข้อความ.
    คุณเปลี่ยนสีข้อความไหนก็ได้ โดยล้อมข้อความนั้นด้วยแท็ก <font color="color"></font> อย่าลืมพิมพ์สีข้อความที่ต้องการในส่วนของ "color" (อย่าลบเครื่องหมายคำพูด) เช่น ถ้าจะเปลี่ยนสีข้อความในย่อหน้านั้นเป็นน้ำเงิน ก็ให้พิมพ์[2]
    <p><font color="blue">วาฬเป็นสัตว์ที่ดูสวยสง่า</font></p>

    หมายเหตุ:

    <font>
    เป็นแท็ก deprecated ให้ใช้
    <span style="color: (สีที่ต้องการ)">...</span>

    แทน

    • คุณเปลี่ยนสีของข้อความไหนก็ได้ (เช่น header) โดยใช้ชุดแท็กนี้
    • HTML รองรับสีต่างๆ มากมาย เพราะงั้นก็ลองใส่ชื่อสีต่างๆ ดู จนได้สีตามต้องการ
  9. How.com.vn ไท: Step 9 กำหนดฟอร์แมตของข้อความ เช่น ตัวหนา...
    กำหนดฟอร์แมตของข้อความ เช่น ตัวหนา ตัวเอียง หรือขีดเส้นใต้. คุณสร้างข้อความตัวหนา Bold ข้อความตัวเอียง italic และข้อความที่ขีดเส้นใต้ได้ ด้วยแท็ก <b></b> แท็ก <i></i> และแท็ก <u></u> ตามลำดับ รวมถึงตัวยก (superscript เช่น เลขยกกำลัง) และตัวห้อย (subscript เช่น เลขหน้าสแควรูท)[3]
    <b>ตัวหนา</b><i>ตัวเอียง</i><u>ขีดเส้นใต้</u><sub>ตัวห้อย</sub><sup>ตัวยก</sup>
  10. How.com.vn ไท: Step 10 ใส่รูปในหน้าเว็บ.
    คุณใช้แท็ก <img src="URL"></img> embed หรือฝังรูปที่มี ลงในเว็บได้ เช่น ถ้า URL ของรูปคือ "http://www.mypicture.com/lake" ก็ให้พิมพ์ว่า
    <img src="http://www.mypicture.com/lake"></img>
  11. How.com.vn ไท: Step 11 ใส่ลิงค์ไปหน้าเว็บอื่น.
    คุณใส่ลิงค์ไปยังเว็บอื่นได้ โดยใช้ชุดแท็ก <a href="link">link text</a> โดยเปลี่ยนตรง link เป็น URL ของเว็บที่จะเชื่อมต่อไป ส่วน link text ให้พิมพ์ข้อความที่จะทำเป็นลิงค์ เช่น ถ้าจะใส่ลิงค์ไปยัง Facebook ก็ให้พิมพ์ว่า[4]
    <a href="https://www.facebook.com">ลิงค์ไปยังเว็บ Facebook</a>.
  12. How.com.vn ไท: Step 12 ปิดแท็กของหน้าเว็บ.
    ก็เหมือนทุกแท็กในโค้ด HTML คือต้องปิดแท็ก <body> กับแท็ก <html> ที่ด้านบนของเอกสาร โดยพิมพ์โค้ดต่อไปนี้ที่ท้ายเอกสาร
    </body></html>
  13. How.com.vn ไท: Step 13 ตรวจทานโค้ดของหน้าเว็บ.
    คุณเพิ่มเติม paragraph, heading และข้อความตรงไหนในหน้าเว็บก็ได้ โดยต้องอยู่ระหว่างแท็ก <body></body> ตัวอย่างโค้ดของหน้าเว็บแบบเต็มๆ ก็เช่น
    <!DOCTYPE html><html><head><title>แฟนเพจวิกิฮาว</title></head><body><h1>ยินดีต้อนรับสู่เว็บของเรา!</h1><p>เว็บนี้เป็นแฟนเพจของวิกิฮาว ขอให้สนุกกับการอ่าน!</p><h2>เหตุการณ์สำคัญ</h2><p><i>15 มกราคม พ.ศ. 2562</i> - วันเกิดวิกิฮาว</p><h2>ลิงค์</h2><p>ลิงค์ไปยัง official website ของวิกิฮาว: <a href="https://th.wikihow.com">https://th.wikihow.com</a></p></body></html>
  14. How.com.vn ไท: Step 14 ตรวจทานแล้วปรับปรุงก่อนออนไลน์.
    ถ้าเจอ error ไหนในโค้ด ก็ให้รีบแก้ไขก่อนเว็บออนไลน์ พอแน่ใจแล้วว่าโค้ด HTML ถูกต้องตามตั้งใจ ก็ไปทำส่วนถัดไปได้เลย
    โฆษณา
ส่วน 2
ส่วน 2 ของ 2:

เซฟแล้วเปิดหน้าเว็บของตัวเอง

ดาวน์โหลดบทความ
  1. How.com.vn ไท: Step 1 ถ้าใช้ Mac ให้แปลงไฟล์เป็น...
    ถ้าใช้ Mac ให้แปลงไฟล์เป็น plain text (ข้อความที่ไม่มีฟอร์แมต) ซะก่อน. คลิกเมนู Format ทางด้านบนของหน้าจอ แล้วคลิก Make Plain Text ในเมนูที่ขยายลงมา

    ใครใช้ Windows ก็ไม่ต้องทำขั้นตอนนี้ (ทำไม่ได้อยู่แล้ว)

  2. Step 2 เปิดเมนู "Save".
    พอสร้างไฟล์ text ใหม่สำหรับโค้ดของหน้าเว็บไว้แล้ว ก็ให้กด Ctrl+S (Windows) หรือ Command+S (Mac) ได้เลย
    • หรือคลิก File แล้วคลิก Save As ในเมนูที่ขยายลงมา ทำได้ทั้งใน Windows และ Mac
  3. How.com.vn ไท: Step 3 ตั้งชื่อไฟล์ HTML.
    พิมพ์ชื่อไฟล์ที่ต้องการในช่อง "File name" (Windows) หรือ "Name" (Mac)
  4. How.com.vn ไท: Step 4 เปลี่ยนประเภทไฟล์ของเอกสาร.
    ต้องเปลี่ยนเอกสารจากไฟล์ text ไปเป็นไฟล์ HTML
    • Windows - คลิกช่อง "Save as type" ให้ขยายลงมา คลิก All Files แล้วพิมพ์ .html ต่อท้ายชื่อไฟล์
    • Mac - เปลี่ยน .txt ท้ายชื่อไฟล์เป็น .html
  5. How.com.vn ไท: Step 5 คลิก Save.
    ทางด้านล่างของหน้าต่าง เพื่อสร้างไฟล์ HTML
    • ปกติไฟล์ HTML จะเปิดขึ้นมาในเบราว์เซอร์หลักของคอม
  6. How.com.vn ไท: Step 6 ปิด text editor.
    เท่านี้ไฟล์ HTML ของคุณก็พร้อมเปิดในเบราว์เซอร์ ให้คุณได้เห็นหน้าตาของเว็บแบบเต็มๆ แล้ว
  7. How.com.vn ไท: Step 7 เปิดไฟล์ HTML ในเบราว์เซอร์.
    ส่วนใหญ่ให้ดับเบิลคลิกไฟล์ HTML ถ้าดับเบิลคลิกไฟล์แล้ว error ให้ทำตามขั้นตอนต่อไปนี้
    • Windows - คลิกขวาที่ไฟล์ เลือก Open with แล้วคลิกเบราว์เซอร์ที่ถนัด
    • Mac - คลิกที่ไฟล์ 1 ครั้ง คลิก File เลือก Open With แล้วคลิกเบราว์เซอร์ที่ถนัด
  8. How.com.vn ไท: Step 8 แก้ไขไฟล์ HTML ตามต้องการ.
    ถ้าเจอ error ในหน้าเว็บ HTML ก็แก้ไขได้ โดยปรับปรุงโค้ดในไฟล์ HTML
    • ถ้าใช้ Windows ให้คลิกขวาที่ไฟล์ แล้วคลิก Edit ในเมนูที่ขยายลงมา (ถ้าในคอมติดตั้ง Notepad++ ไว้ จะขึ้นว่า Edit with Notepad++ แทน)
    • ถ้าใช้ Mac ให้คลิกเลือกไฟล์ คลิก File เลือก Open With แล้วคลิก TextEdit หรือลากไฟล์ไปใส่ใน TextEdit
    โฆษณา

เคล็ดลับ

  • ถ้าอยากให้รูปอยู่กลางหน้าเว็บ ก็ให้พิมพ์ <class="center"> ต่อท้ายชื่อรูป ในแท็ก img (เช่น <img src="URL" class="center">)
  • คุณใส่ข้อความแบบเลื่อนขึ้นลงด้านข้างในเว็บได้ โดยใช้แท็ก <marquee></marquee> แต่บางเบราว์เซอร์ก็แสดงผลแท็กนี้ไม่ได้
  • หลายคนพิมพ์และ compile โค้ดใน Notepad++
  • แท็กต่างๆ ถ้าเปิดแล้วอย่าลืมปิด เช่น <tag1><tag2> ก็ให้ปิดด้วย </tag2></tag1>
โฆษณา

คำเตือน

  • แนะนำให้โฮสต์ไฟล์รูปของคุณเองใน Imgur หรือเว็บอื่นๆ ที่ใกล้เคียง ถ้าจะอัพโหลดรูปเข้าเว็บ ถ้าไปโพสต์รูปคนอื่น ระวังจะโดนเรื่องละเมิดลิขสิทธิ์
โฆษณา

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

เกี่ยวกับวิกิฮาวนี้

วิกิฮาวเป็น "wiki" ซึ่งหมายความว่าบทความหลายๆ บทความของเรานั้นเป็นการร่วมมือกันเขียนของผู้เขียนหลายคน ในการเขียนบทความชิ้นนี้ ผู้คน 197 คน ซึ่งบางคนไม่ขอเปิดเผยตัว ได้ร่วมกันเขียนและปรับปรุงเนื้อหาของบทความอย่างต่อเนื่อง บทความนี้ถูกเข้าชม 123,215 ครั้ง
หมวดหมู่: อินเทอร์เน็ต
มีการเข้าถึงหน้านี้ 123,215 ครั้ง

บทความนี้เป็นประโยชน์กับคุณไหม

⚠️ Disclaimer:

Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

Notices:
  • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
  • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
  • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
  • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

โฆษณา