วิธีการ สร้างหน้าเว็บด้วย HTML

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

HTML (HyperText Markup Language)เป็นภาษาพื้นฐานที่ใช้ในการพัฒนาหน้าเว็บไซต์ ถูกคิดค้นมาให้เป็นภาษาที่ใช้และปรับแต่งโค้ดได้ง่าย แต่ละหน้าเว็บที่คุณเห็นในอินเทอร์เน็ตก็มาจากโค้ดนี้กันทั้งนั้นแหละ (ColdFusion, XML, XSLT) HTML นั้นไม่ยากเกินจะเรียน แต่ถ้าจะให้แอดวานซ์ถึงขั้นใช้ได้ครบถ้วนกระบวนความ ก็ต้องใช้เวลากันสักหน่อย อย่างถ้าอยากจะใส่สีหรือแต่งหน้าเว็บให้ตื่นตาตื่นใจมากยิ่งขึ้น ก็ต้องหัดใช้ CSS ขั้นพื้นฐาน แต่นั่นคือหลังจากคุณคุ้นเคยกับหน้าเว็บแบบ HTML เรียบร้อยแล้วนะ

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

จัดทำไฟล์ Text

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-1-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    NotePad ก็ได้ เพราะดาวน์โหลดมาใช้ได้ฟรี คุณเขียนภาษา HTML ได้ด้วยแทบจะทุกโปรแกรมจัดทำและแก้ไขไฟล์ text แต่โปรแกรมไหนยิ่งแอดวานซ์ ปรับฟอร์แมตอัตโนมัติ ก็ยิ่งไม่สะดวกต่อการเขียนหน้าเว็บ HTML [1]
    • เราไม่แนะนำให้ใช้ TextEdit เพราะโปรแกรมนี้ชอบเซฟไฟล์เป็นฟอร์แมตที่เบราว์เซอร์ไม่ค่อยจะตรวจจับได้ว่าเป็นภาษา HTML
    • หรือจะใช้ online HTML editor ก็ได้ แต่พวกโปรแกรมที่เน้นแก้ไขภาษา HTML โดยเฉพาะมักจะยากไปสักหน่อยสำหรับมือใหม่ [2]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-2-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เลือก File → Save As ในเมนูด้านบนสุด แล้วเปลี่ยนฟอร์แมตของไฟล์ไปเป็น "Web Page," ".html" หรือ ".htm" จากนั้นเซฟไว้ในที่ที่คุณหาเจอได้ง่ายๆ
    • จริงๆ แล้ว 3 ฟอร์แมตนี้ก็ใช้แทนกันได้หมดแหละ
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-3-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    พอดับเบิลคลิกแล้ว ไฟล์ก็จะเปิดขึ้นมาอัตโนมัติเป็นหน้าเว็บว่างๆ ในเบราว์เซอร์ หรือจะเปิดเบราว์เซอร์ขึ้นมาก่อนก็ได้ ไม่ว่าจะเป็น Firefox หรือ Internet Explorer ก็ตาม แล้วคลิก File → Open File เพื่อเลือกไฟล์ text นั้น
    • หน้าเว็บนี้ยังไม่ออนไลน์นะ ดูได้แค่ในคอมของคุณเท่านั้นแหละ
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-4-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    รีเฟรชหน้าเว็บดูว่าที่แก้ไขอะไรไปใช้ได้หรือยัง. พิมพ์ข้อความนี้ในเอกสารโล่งๆ ของคุณ: <strong>Hello</strong> จากนั้นเซฟเลย แล้วรีเฟรชหน้าเว็บโล่งๆ ในเบราว์เซอร์ดูอีกที ควรจะมีคำว่า "Hello" โผล่ขึ้นมาด้านบนของหน้า เป็นตัวหนาด้วยนะ ระหว่างขั้นตอนต่างๆ ข้างล่าง ถ้าตอนไหนเกิดอยากทดสอบ HTML ใหม่ของคุณขึ้นมา ก็ให้เซฟเอกสาร .html แล้วรีเฟรชหน้าเบราว์เซอร์ว่าภาษา HTML ที่ใช้ไปนั้นได้ผลออกมาเป็นยังไง
    • ถ้าเห็นคำว่า "<strong>" กับ "</strong>'' โผล่ขึ้นมาในเบราว์เซอร์ด้วย แปลว่าไฟล์ไม่ถูกอ่านเป็น HTML ได้ถูกต้อง ให้ลองเปลี่ยนไปใช้โปรแกรม text ตัวอื่น หรือลองเปลี่ยนเบราว์เซอร์ดู
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คำสั่ง HTML นั้นจะอยู่ในรูปของ "tag" ที่คอยบอกเบราว์เซอร์ว่าต้องแปลแล้วแสดงหน้าเว็บออกมายังไง ทุก tag จะอยู่ในวงเล็บเหลี่ยม <แบบนี้> ซึ่งจะไม่แสดงในหน้าเว็บ แบบที่คุณได้ลองใช้ไปแล้วในตัวอย่างด้านบน:
    • <strong> ถือเป็น "tag เริ่มต้น" หรือ "tag เปิด" อะไรที่ตามหลัง tag นี้จะกลายเป็น "strong text" ทั้งหมด (พูดง่ายๆ คือกลายเป็นตัวหนาในหน้าเว็บ)
    • </strong> ถือเป็น "tag จบ" หรือ "tag ปิด" ดูได้จากสัญลักษณ์ / ที่จะบอกว่า strong text นั้นจบแค่ตรงไหน tag ส่วนใหญ่ (ไม่ใช่ทั้งหมด) ต้องมี tag ปิด ถึงจะใช้งานได้ ห้ามลืมเชียวล่ะ
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/Write-an-HTML-Page-Step-6-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-6-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/Write-an-HTML-Page-Step-6-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ลบทุกข้อความในไฟล์ text HTML ของคุณทิ้งก่อน แล้วเริ่มพิมพ์ใหม่ให้เป๊ะทุกตัวอักษรตามนี้ (ไม่ต้องใส่จุด bullet points ไปด้วยนะ) โค้ด HTML นี้จะบอกเบราว์เซอร์ว่าคุณจะใช้ HTML ชนิดไหน และบอกว่า HTML ของคุณจะอยู่ระหว่าง tag <html> กับ </html> [3]
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • </html>
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เอกสาร HTML ของคุณจะแบ่งออกเป็น 2 ส่วนด้วยกัน ส่วน "head" นั้นสำหรับข้อมูลพิเศษ อย่างชื่อของหน้าเว็บนั้น ในขณะที่ส่วน "body" จะเป็นเนื้อหาหลักของหน้าเว็บ ให้ใส่ลงไปทั้งคู่ อย่าลืม end tag เด็ดขาด ข้อความที่คุณต้องเพิ่มเข้าไปในขั้นตอนนี้เราทำไว้เป็นตัวหนาให้เห็นกันเลยชัดๆ:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • </head>
    • <body>
    • </body>
    • </html>
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5d\/Write-an-HTML-Page-Step-8-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-8-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5d\/Write-an-HTML-Page-Step-8-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-8-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    tag ส่วนใหญ่ในส่วนของ head นั้น ถ้าคุณเป็นมือใหม่ยังไม่ต้องรู้ไว้ก็ได้ แต่ title tag นี่สิที่ง่ายหน่อย จะเป็นตัวกำหนดชื่อที่แสดงในหน้าต่างเบราว์เซอร์หรือแถบเบราว์เซอร์นั้น ให้ใส่ start แล้วก็ end tag ของ title ลงใน head tag แล้วตั้งชื่อ title ไว้ตรงกลางตามต้องการ
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>หน้าเว็บ HTML แรกของฉัน</title>
    • </head>
    • <body>
    • </body>
    • </html>
    โฆษณา
ส่วน 2
ส่วน 2 ของ 4:

ฟอร์แมต Text

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Write-an-HTML-Page-Step-9-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-9-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Write-an-HTML-Page-Step-9-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-9-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ตรงนี้เราจะบอกคุณแค่ข้อความที่คุณต้องใส่ใน body tag เท่านั้น ข้อความอื่นก็เหมือนเดิมแหละ แต่เพื่อไม่ให้เสียเวลา เราจะไม่มานั่งทวนกันทุกครั้งที่ขึ้นขั้นตอนใหม่ ให้พิมพ์อะไรที่จะใส่ลงไประหว่าง tag <body> กับ </body> แล้วจะกลายเป็นเนื้อหาแรกในหน้าเว็บของคุณ เช่น
    • <body>
    • ฉันกำลังเรียนรู้วิธีการสร้างหน้าเว็บด้วยภาษา HTML จากบทความของ wikiHow
    • </body>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/10\/Write-an-HTML-Page-Step-10-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-10-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/10\/Write-an-HTML-Page-Step-10-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-10-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คุณจัดระเบียบหน้าเว็บได้ง่ายๆ ด้วย header tag ซึ่งจะเป็นตัวบอกเบราว์เซอร์ให้แสดงข้อความที่อยู่ระหว่างกลางเป็นตัวอักษรที่ใหญ่กว่า เป็นตัวที่เครื่องมือต่างๆ และ bots ของ search engine ใช้ค้นหาว่าหน้าเว็บของคุณนั้นเกี่ยวกับเรื่องอะไร และมีการจัดการอย่างไร <h1> </h1> จะเป็น header ที่ใหญ่ที่สุด แต่ถ้าจะเอาเล็กกว่านี้ก็ปรับได้ โดยขนาดเล็กที่สุดคือ <h6> </h6>. ลองเอาไปใช้ในหน้าเว็บของคุณดูได้เลย
    • <body>
    • <h1>ยินดีต้อนรับสู่หน้าเว็บของฉัน</h1>
    • ฉันกำลังเรียนรู้วิธีการสร้างหน้าเว็บด้วยภาษา HTML จากบทความของ wikiHow
    • <h3>เป้าหมายของฉันในวันนี้:</h3>
    • <h5>เป้าหมายที่ทำสำเร็จ:</h5>
    • เรียนรู้วิธีใช้ headers
    • <h5>เป้าหมายที่ทำไม่สำเร็จ:</h5>
    • เรียนรู้วิธีใช้ tag ฟอร์แมตข้อความ
    • </body>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/25\/Write-an-HTML-Page-Step-11-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-11-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/25\/Write-an-HTML-Page-Step-11-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-11-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ตอนนี้คุณรู้จัก "strong" tag แล้ว แต่ยังมีอีกหลายวิธีที่ใช้ฟอร์แมตข้อความของคุณได้ ให้ลองใช้ tag ข้างล่างนี่ดู หรือใช้ร่วมกันหลายๆ tag ในชุดข้อความเดียวกัน แต่ที่สำคัญที่สุดคือห้ามลืมปิดท้ายด้วย end tag เด็ดขาด!
    • <strong> ข้อความสำคัญ จะขึ้นเป็นตัวหนาในเบราว์เซอร์ </strong>
    • <em> เน้นข้อความเป็นตัวเอียงในเบราว์เซอร์ </em>
    • <small> ข้อความขนาดเล็กกว่าปกติ แต่จะปรับขนาดอัตโนมัติถ้าใช้เป็น heading [4] </small>
    • <del> ข้อความที่ไม่ใช้แล้ว ข้อความจะถูกขีดฆ่าไว้ </del>
    • <ins> ข้อความที่เพิ่มเข้ามาทีหลัง ข้อความจะถูกขีดเส้นใต้ไว้ </ins>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-12-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-12-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คุณอาจสังเกตเห็นว่า ถึงกด "enter" แล้ว ข้อความก็ยังไม่ยอมลงมาที่อีกบรรทัดนึง tag ข้างล่างนี่เอาไว้แบ่งย่อหน้าและขึ้นบรรทัดใหม่ได้ หรือจะจัดวางข้อความแบบอื่นก็ได้
    • <p> ย่อมาจาก "paragraph" หรือย่อหน้านั่นเอง ข้อความไหนที่อยู่ระหว่าง tag นี้ จะอยู่ในย่อหน้าเดียวกัน แยกจากข้อความด้านบนและด้านล่าง </p>
    • <br> จะเป็นการขึ้นบรรทัดใหม่ ห้าม ใส่ end tag ไปด้วยเด็ดขาด เพราะจะไม่ส่งผลต่อเนื้อหาอื่นๆ เอาไว้ใช้เวลาจะใส่กลอนหรือที่อยู่เป็นต้น อย่าใช้แบ่งย่อหน้า [5]
    • <pre> ถ้าอยากกำหนดการแสดงข้อความแบบเฉพาะเจาะจง tag นี้จะกำหนดข้อความด้านในเป็นฟอนต์แบบ fixed-width (ความกว้างของแต่ละตัวอักษรจะเท่ากัน) ให้คุณสามารถแบ่งวรรคหรือขึ้นบรรทัดใหม่ได้เหมือนเวลาคุณพิมพ์ข้อความตามปกติที่ไม่ได้ใช้ tag [6] </pre>
    • <blockquote> ใช้แสดงข้อความที่ยกมาอ้างอิงจากแหล่งอื่น </blockquote> จะแนบแหล่งที่มาด้วยก็ได้โดยใช้ <cite> cite tag </cite>
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-13-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-13-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Comment tag เป็นส่วนที่จะไม่ปรากฏในหน้าเว็บ คุณสามารถใช้จดโน้ตเตือนตัวเองในเอกสาร HTML ได้โดยไม่ไปพัวพันกับตัวเนื้อหา <!--- ให้พิมพ์ความคิดเห็นของคุณใน tag นี้ ---> โดยไม่ต้องใส่ end tag
    • Tag ที่เราใช้ได้โดยไม่ต้องมี end tag นั้นเรียกว่า "empty tags"
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-14-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-14-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    วิธีเดียวที่จะทำให้คุณคุ้นเคยกับ tag พวกนี้ได้เร็วที่สุดก็คือการใช้งานจริงในหน้าเว็บของคุณ เราได้รวบรวมตัวอย่าง tag ต่างๆ ที่คุณได้ทำความรู้จักในแต่ละขั้นตอนที่ผ่านมาไว้ข้างล่างนี้แล้ว ลองคิดดูว่าจะออกมาหน้าตาเป็นยังไงในเบราว์เซอร์ ว่าแล้วก็ copy-paste ใส่เอกสารของคุณแล้วไปดูกันเลย
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>หน้าเว็บ HTML แรกของฉัน</title>
    • </head>
    • <body>
    • <h1>ยินดีต้อนรับสู่หน้าเว็บของฉัน</h1>
    • ขอให้สนุกกับเว็บไซต์นี้!<p><strong>เว็บนี้เพื่อคุณโดยเฉพาะเลยนะเนี่ย</strong>
    • <h2>ตอนที่ 1: ฉันรู้จัก HTML ได้ยังไง</h2>
    • <!---เตือนตัวเอง: จำไว้ "h1" คือ header ที่ใหญ่กว่า "h2"--->
    • ตอนนี้เรียนเรื่อง HTML มา <del>หนึ่ง</del> <ins>สอง</ins>ชั่วโมงแล้ว ชักเชี่ยวแล้วสิ
    • </body>
    • </html>
    โฆษณา
ส่วน 3
ส่วน 3 ของ 4:

ใส่ลิงค์กับรูปภาพ

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-15-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-15-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คุณใส่ข้อมูลเพิ่มเติมเข้าไปใน Tag ได้ เรียกว่า "attributes" ในรูปของคำที่คุณเพิ่มเข้าไปในตัว tag เป็น attribute-name="specific value " พูดง่ายๆ ว่า แทบจะทุก tag ของ HTML สามารถใส่ title attribute เข้าไปได้
    • <p title="คำนำ">ใส่ย่อหน้าคำนำตรงนี้</p> ตั้งชื่อให้ย่อหน้านั้นว่า "คำนำ" ซึ่งจะโผล่ขึ้นมาเวลาคุณเลื่อนเมาส์ไปเหนือย่อหน้านั้นของหน้าเว็บ
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-16-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-16-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ให้ใช้ tag <a> </a> สร้าง hyperlink ไปยังหน้าอื่นของเว็บ ใส่ URL ของหน้าเว็บนั้นในลิงค์เพื่อใช้ href attribute ข้างล่างคือตัวอย่างสำหรับลิงค์ไปยังหน้าที่คุณกำลังอ่านอยู่นี่แหละ
    • <a href="http://www.wikihow.com/Write-an-HTML-Page">คนที่เข้าชมเว็บไซต์ของคุณสามารถคลิกที่ข้อความนี้เพื่อไปยังลิงค์</a>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-17-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-17-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    อีก attribute ที่ใช้ได้กับแทบทุก tag ของ HTML ก็คือ " id " ให้พิมพ์ id="example" ใน tag ไหนก็ได้ หรือใช้ชื่ออะไรที่ไม่มีเว้นวรรค [7] ตอนนี้จะยังไม่เห็นผลอะไร แต่เราจะมาใช้งานกันต่อไปในขั้นตอนข้างล่าง
    • เช่น ถ้าลองใส่ <p id="example"> ลงในเอกสารของคุณ ย่อหน้านี้ก็จะกลายเป็นตัวอย่างอธิบายวิธีใช้ id attribute ให้คุณ</p>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Write-an-HTML-Page-Step-18-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-18-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-18-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-18-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ตอนนี้คุณสามารถใช้ hyperlink tag <a> </a> เพื่อลิงค์ไปยังจุดอื่นในหน้าเดียวกันได้อีกด้วย แทนที่จะใช้ URL ให้คุณใช้สัญลักษณ์ # ตามด้วยค่า id ที่จะลิงค์ไป เช่น <a href="#example"> ข้อความนี้จะลิงค์ไปที่ย่อหน้าที่มี id "example" </a>
    • ทุกค่าของ HTML นั้นคุณจะพิมพ์ตัวเล็กหรือตัวใหญ่ก็ได้ทั้งนั้น [8] ไม่ว่าจะ "#EXAMPLE" หรือ "#example" ก็ลิงค์ไปที่เดียวกันนั่นแหละ
    • ถ้าหน้าเว็บนั้นสั้นจนไม่ต้องเลื่อนลงไป คุณอาจไม่ทันสังเกตว่ามันเกิดอะไรขึ้นตอนคุณคลิกลิงค์ในเบราว์เซอร์ ให้ลองย่อหน้าต่างจนมี scroll bar โผล่ขึ้นมานั่นแหละ แล้วลองดูใหม่อีกรอบ
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/49\/Write-an-HTML-Page-Step-19-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-19-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/49\/Write-an-HTML-Page-Step-19-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-19-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tag <img> นั้นเป็น empty tag แปลว่าไม่จำเป็นต้องใช้ closing tag ทุกข้อมูลที่เบราว์เซอร์ต้องใช้แสดงรูปจะถูกเพิ่มในรูปของ attribute แทน [9] ข้างล่างคือตัวอย่างสำหรับแสดงโลโก้ของ wikiHow ตามด้วยคำอธิบายของแต่ละ attribute
    • <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="wikiHow logo">
    • Attribute src=" " จะบอกเบราว์เซอร์ว่าต้องหารูปจากตรงไหน (บอกไว้ก่อนเลยว่าเสียมารยาทมากถ้าเที่ยวไปแอบหยิบยืมรูปมาจากเว็บของคนอื่น แถมถ้าวันดีคืนดีเว็บนั้นเกิดล่มหรือเจ๊งไป รูปที่มาโผล่ในเว็บคุณก็จะพลอยอันตรธานหายไปด้วย)
    • Attribute style=" " ทำได้หลายอย่าง แต่ที่เด่นสุดคือใช้กำหนด pixel ความกว้างความสูงของรูป (หรือจะใช้ attribute width=" " กับ height=" " แยกกันก็ได้ แต่ระวังจะเจอปัญหาเรื่องปรับขนาดรูปถ้าใช้ CSS [10] )
    • Attribute alt=" " คือคำบรรยายรูปสั้นๆ ที่คนเข้าเว็บจะเห็นเวลารูปไม่ขึ้น อันนี้บังคับใส่เลย เลือกไม่ได้ เพราะต้องใช้กับ screen reader สำหรับผู้พิการทางสายตาที่แวะมาเยี่ยมชมเว็บของคุณ [11]
    โฆษณา
ส่วน 4
ส่วน 4 ของ 4:

ศึกษาเพิ่มเติมและเปิดตัวหน้าเว็บคุณออนไลน์

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Write-an-HTML-Page-Step-20-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-20-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-20-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-20-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    การตรวจสอบ HTML จะหา error ในโค้ดที่รอดสายตาคุณไปได้ ถ้าหน้าเว็บคุณแสดงไม่ครบถ้วนสมบูรณ์ การตรวจทานในขั้นตอนนี้จะช่วยให้คุณเจอสาเหตุของข้อผิดพลาดที่เกิดขึ้น แถมคุณยังได้เรียนรู้เพิ่มเติมเรื่อง HTML เพราะต้องหาโค้ดที่ดูปกติดีในหน้าจอของคุณแต่กลับใช้ไม่ได้เพราะมาตรฐานของ HTML มีการอัพเดท เวลามี HTML ที่ใช้การไม่ได้ ไม่ได้แปลว่าเว็บของคุณจะเข้าไม่ได้ แต่จะเป็นปัญหาอื่นหรือหน้าเว็บนั้นออกมาไม่ครบถ้วนสมบูรณ์เวลาเปิดในเบราว์เซอร์ที่แตกต่างออกไป
    • ลองใช้เว็บตรวจสอบฟรีอย่าง W3C ดู หรือจะใช้เว็บตรวจสอบ HTML 5 เว็บอื่นก็ได้
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-21-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-21-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ยังมี tag กับ attribute ของ HTML อีกเยอะ และคุณก็ศึกษาหาความรู้เพิ่มเติมได้มากมายหลายที่เช่นกัน
    • ลองเข้าไปที่ w3schools กับ HTML Dog จะเจอ tutorial กับรายการ tag ต่างๆ เต็มไปหมด
    • ลองหาเว็บไหนที่หน้าตาถูกใจคุณ แล้วใช้ฟังก์ชั่น "View Page Source" ในเบราว์เซอร์ส่องโค้ด HTML ของเขาเป็นตัวอย่างก็ได้ จากนั้น Copy-paste มาลองปรับนู่นแต่งนี่ดูซิว่าจะออกมาเป็นยังไง
    • หาบทความอื่นๆ มาอ่านเพิ่มเติมด้วย เช่น การสร้างตาราง HTML การใช้ meta tag ให้เว็บคุณโผล่มาต้นๆ ใน search engine หรือการใช้ div กับ span ช่วยแต่ง css
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-22-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-22-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    พอหาบริการ web hosting ได้แล้ว คราวนี้จะอัพโหลดหน้าเว็บ HTML สักกี่หน้าลงใน web domain ของคุณเองก็ไม่มีใครว่า แต่ก่อนจะทำแบบนั้นได้คุณต้องมีโปรแกรมอัพโหลด FTP ซะก่อน ปกติก็มากับบริการของ web host นั่นแหละ
    • เวลาลิงค์ไปที่หน้ากับรูปต่างๆ ในเว็บของคุณ ไม่ต้องใช้ address เต็มๆ ก็ได้ เช่น ถ้า domain name ของคุณคือ www.superskilledhtmlcoder.com <a href="/journal/monday.html">ข้อความใน tag นี้</a> ก็จะลิงค์ไปยัง address "www.superskilledhtmlcoder.com/journal/monday.html" เอง
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-23-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-23-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ถ้าหน้าเว็บ HTML ของคุณดูโล้นเลี่ยนไปหน่อย ให้ไปศึกษา CSS พื้นฐานดู จะได้หัดใส่สี เปลี่ยนฟอนต์ ใช้งานส่วนประกอบต่างๆ ได้ดีกว่าเดิม การลิงค์ "stylesheet" ของ CSS ไปยังหน้าเว็บ HTML ให้คุณยกเครื่องส่วนต่างๆ อย่างรวดเร็ว ทันใจ เปลี่ยนรูปแบบข้อความอัตโนมัติโดยใช้ tag ต่างๆ ให้ลองปรับ stylesheet ดูเอง หรือจะศึกษาจาก tutorial ละเอียดๆ อย่าง คู่มือ CSS ของ HTML Dog ดูก็ได้
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2a\/Write-an-HTML-Page-Step-24-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-24-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2a\/Write-an-HTML-Page-Step-24-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-24-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    JavaScript เป็นภาษาสำหรับเขียนโปรแกรมที่ใช้ในการเพิ่มเติมฟังก์ชั่นให้หน้าเว็บ HTML ของคุณ คุณต้องใส่คำสั่ง JavaScript ไว้ระหว่าง start กับ end tag <script> </script> โดยใช้ได้ทั้งการเพิ่มปุ่มแบบ interactive การคำนวณโจทย์เลข และอื่นๆ อีกมากมาย อยากรู้ไปดูที่ ตัวอย่างของ w3c ได้เลย
    โฆษณา

เคล็ดลับ

  • doctype ที่ใช้ใน tutorial นี้คือ "loose HTML 4.0.1 transitional" เป็นฟอร์แมตง่ายๆ สำหรับมือใหม่หัดใช้ HTML [12] ถ้าจะให้เบราว์เซอร์อ่านเป็นฟอร์แมต HTML 5 แบบเป๊ะๆ ให้ใช้ (<!DOCTYPE html>) แทน ซึ่งเป็นมาตรฐานที่แนะนำ (ถึงคนจะไม่ค่อยนิยมใช้กันก็เถอะ)
โฆษณา

คำเตือน

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

สิ่งของที่ใช้

  • โปรแกรมแก้ไขไฟล์ text ทั่วไป อย่าง NotePad หรือ TextEdit
  • เบราว์เซอร์ อย่าง Internet Explorer หรือ Mozilla Firefox
  • (ไม่จำเป็น) HTML editor อย่าง Adobe Dreamweaver, Aptana Studio หรือ Microsoft Expression Web

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

วิธีการ
ดาวน์โหลดวิดีโอจากทุกเว็บไซต์ได้แบบฟรีๆ
วิธีการ
แก้ปัญหาเข้าบางเว็บไม่ได้
วิธีการ
หาวันที่เผยแพร่ข้อมูลของเว็บไซต์
วิธีการ
ดูว่าใครแชร์โพสต์ของคุณบนเฟซบุ๊ก
วิธีการ
แก้ปัญหาเซิร์ฟเวอร์ DNS ไม่ตอบสนอง
วิธีการ
เช็คตำแหน่งปัจจุบันใน Google Maps
รู้ความหมายของอีโมจิรูปหัวใจสีดำ
วิธีการ
ตั้งชื่ออีเมลให้โดนใจ
วิธีการ
เปิดใช้งานคุกกี้ในเว็บเบราว์เซอร์อินเตอร์เน็ตของคุณ
วิธีการ
เชื่อมต่ออินเทอร์เน็ตในคอมพิวเตอร์ Windows
วิธีการ
เว้นวรรคห่างๆ ใน HTML
วิธีการ
หาละติจูดกับลองจิจูดใน Google Maps
อิโมจิซ่อนความสยิวที่คนใช้แชตกันมากที่สุด
วิธีการ
หา URL ของเว็บไซต์
โฆษณา

ข้อมูลอ้างอิง

  1. ↑ http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
  2. ↑ http://htmldog.com/guides/html/beginner/gettingstarted/
  3. ↑ http://www.w3.org/QA/Tips/Doctype
  4. ↑ HTML Tutorials
  5. ↑ http://www.w3schools.com/tags/tag_br.asp
  6. ↑ http://www.w3schools.com/tags/tag_pre.asp
  7. ↑ http://www.w3schools.com/tags/att_global_id.asp
  8. ↑ http://www.w3schools.com/tags/att_global_id.asp
  9. ↑ http://htmldog.com/guides/html/beginner/images/
  1. ↑ http://www.w3schools.com/html/html_images.asp
  2. ↑ http://www.w3schools.com/html/html_images.asp
  3. ↑ http://www.htmlbasictutor.ca/doctype-declaration.htm

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

ในภาษาอื่น
มีการเข้าถึงหน้านี้ 11,098 ครั้ง

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

โฆษณา