ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
บทความวิกิฮาวนี้จะแนะนำวิธีการเขียนโค้ด HTML สร้างหน้าเว็บอย่างง่ายที่มีแต่ข้อความ พอสร้างหน้าเว็บของตัวเองแล้ว ก็เซฟเป็นเอกสาร HTML เอาไปเปิดในเบราว์เซอร์ได้เลย คุณเขียนโค้ด HTML ได้ด้วยโปรแกรม text editor ทั่วไป ที่มีในคอมพิวเตอร์ Windows และ Mac อยู่แล้ว
ขั้นตอน
-
เปิด text editor. ถ้าใช้ Windows ก็จะมีโปรแกรม Notepad หรือ Notepad++ ส่วนใครใช้ Mac ก็จะเป็น TextEdit
- Windows - เปิด Start พิมพ์ notepad หรือ notepad++ แล้วคลิก Notepad หรือ "Notepad++" ทางด้านบนของหน้าต่าง
- Mac - คลิก Spotlight พิมพ์ textedit แล้วดับเบิลคลิก TextEdit ทางด้านบนของผลลัพธ์
-
กำหนดฟอร์แมตเอกสารเป็น HTML. พิมพ์ <!DOCTYPE html> แล้วกด ↵ Enter จากนั้นพิมพ์ <html> แล้วกด ↵ Enter อีกรอบ สุดท้ายพิมพ์ <head> แล้วกด ↵ Enter ทางด้านบนของเอกสารของคุณก็จะออกมาหน้าตาประมาณนี้ [1] X แหล่งข้อมูลอ้างอิง
<!DOCTYPE html> < html > < head >
-
ตั้งชื่อ tab ของหน้าเว็บนั้น. ก็คือชื่อที่ขึ้นใน tab ของเบราว์เซอร์ตอนคุณเปิดหน้าเว็บนั้น (เช่น "Facebook") พิมพ์ <title> พิมพ์ชื่อ tab ของหน้าเว็บ แล้วพิมพ์ </title> จากนั้นใส่แท็ก "Head" ปิด หรือก็คือขึ้นบรรทัดใหม่แล้วพิมพ์ </head> ส่วนของชื่อหน้าเว็บจะออกมาประมาณนี้
< title > เว็บของฉัน </ title > </ head >
-
กำหนดจุดเริ่มต้นของข้อความเนื้อหาในหน้าเว็บ. พิมพ์ <body> ล่างแท็ก "Head" ปิด เพื่อให้แน่ใจว่าข้อความที่ตามมาในเอกสาร จะถือเป็นเนื้อหาของเว็บ จนกว่าคุณจะใส่แท็ก "Body" ปิด ก็จะได้ออกมาแบบนี้
< body >
-
สร้าง heading ของหน้าเว็บ. page heading ก็คือชื่อที่จะขึ้นทางด้านบนของเว็บไซต์ วิธีใส่ชื่อเว็บก็คือพิมพ์ <h1> ใส่ heading แล้วใส่แท็กปิด </h1> เช่น
< h1 > ยินดีต้อนรับสู่เว็บของเรา! </ h1 >
-
จะใส่ heading อื่นเพิ่มเติมด้วยก็ได้. คุณสร้าง heading ได้ 6 แบบด้วยกัน โดยใช้แท็ก <h1></h1> ไปจนถึง <h6></h6> เช่น ถ้าจะสร้าง heading 3 ขนาดเรียงกัน ก็ให้พิมพ์ดังต่อไปนี้
< h1 > ยินดีต้อนรับสู่เว็บของเรา! </ h1 > < h2 > เราชื่อโบว์ </ h2 > < h3 > อ่านให้สนุกนะ </ h3 >
-
สร้างข้อความ 1 ย่อหน้า. แท็ก paragraph ใช้แบ่งข้อความเป็น "ก้อน" หรือเป็นย่อหน้า ถ้าจะเพิ่มข้อความในย่อหน้านั้น ก็ให้พิมพ์ <p> แล้วพิมพ์ข้อความที่ต้องการ จากนั้นพิมพ์ </p> เพื่อปิดแท็ก
< p > ย่อหน้าของฉัน </ p >
- คุณขึ้นย่อหน้าใหม่ติดๆ กันได้หลายย่อหน้า ก็จะได้ชุดย่อหน้าใน heading เดียวกัน
-
เปลี่ยนสีข้อความ. คุณเปลี่ยนสีข้อความไหนก็ได้ โดยล้อมข้อความนั้นด้วยแท็ก
<font color="color"></font>อย่าลืมพิมพ์สีข้อความที่ต้องการในส่วนของ "color" (อย่าลบเครื่องหมายคำพูด) เช่น ถ้าจะเปลี่ยนสีข้อความในย่อหน้านั้นเป็นน้ำเงิน ก็ให้พิมพ์ [2] X แหล่งข้อมูลอ้างอิง< p >< font color = "blue" > วาฬเป็นสัตว์ที่ดูสวยสง่า </ font ></ p >
หมายเหตุ:
เป็นแท็ก deprecated ให้ใช้< font >
< span style = "color: (สีที่ต้องการ)" > ... </ span >
แทน
- คุณเปลี่ยนสีของข้อความไหนก็ได้ (เช่น header) โดยใช้ชุดแท็กนี้
- HTML รองรับสีต่างๆ มากมาย เพราะงั้นก็ลองใส่ชื่อสีต่างๆ ดู จนได้สีตามต้องการ
-
กำหนดฟอร์แมตของข้อความ เช่น ตัวหนา ตัวเอียง หรือขีดเส้นใต้. คุณสร้างข้อความตัวหนา Bold ข้อความตัวเอียง italic และข้อความที่ขีดเส้นใต้ได้ ด้วยแท็ก <b></b> แท็ก <i></i> และแท็ก <u></u> ตามลำดับ รวมถึงตัวยก (superscript เช่น เลขยกกำลัง) และตัวห้อย (subscript เช่น เลขหน้าสแควรูท) [3] X แหล่งข้อมูลอ้างอิง
< b > ตัวหนา </ b > < i > ตัวเอียง </ i > < u > ขีดเส้นใต้ </ u > < sub > ตัวห้อย </ sub > < sup > ตัวยก </ sup >
-
ใส่รูปในหน้าเว็บ. คุณใช้แท็ก <img src="URL"></img> embed หรือฝังรูปที่มี ลงในเว็บได้ เช่น ถ้า URL ของรูปคือ "http://www.mypicture.com/lake" ก็ให้พิมพ์ว่า
< img src = "http://www.mypicture.com/lake" ></ img >
-
ใส่ลิงค์ไปหน้าเว็บอื่น. คุณใส่ลิงค์ไปยังเว็บอื่นได้ โดยใช้ชุดแท็ก <a href="link">link text</a> โดยเปลี่ยนตรง link เป็น URL ของเว็บที่จะเชื่อมต่อไป ส่วน link text ให้พิมพ์ข้อความที่จะทำเป็นลิงค์ เช่น ถ้าจะใส่ลิงค์ไปยัง Facebook ก็ให้พิมพ์ว่า [4] X แหล่งข้อมูลอ้างอิง
< a href = "https://www.facebook.com" > ลิงค์ไปยังเว็บ Facebook </ a > .
-
ปิดแท็กของหน้าเว็บ. ก็เหมือนทุกแท็กในโค้ด HTML คือต้องปิดแท็ก <body> กับแท็ก <html> ที่ด้านบนของเอกสาร โดยพิมพ์โค้ดต่อไปนี้ที่ท้ายเอกสาร
</ body > </ html >
-
ตรวจทานโค้ดของหน้าเว็บ. คุณเพิ่มเติม 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 >
-
ตรวจทานแล้วปรับปรุงก่อนออนไลน์. ถ้าเจอ error ไหนในโค้ด ก็ให้รีบแก้ไขก่อนเว็บออนไลน์ พอแน่ใจแล้วว่าโค้ด HTML ถูกต้องตามตั้งใจ ก็ไปทำส่วนถัดไปได้เลยโฆษณา
-
ถ้าใช้ Mac ให้แปลงไฟล์เป็น plain text (ข้อความที่ไม่มีฟอร์แมต) ซะก่อน. คลิกเมนู Format ทางด้านบนของหน้าจอ แล้วคลิก Make Plain Text ในเมนูที่ขยายลงมา
ใครใช้ Windows ก็ไม่ต้องทำขั้นตอนนี้ (ทำไม่ได้อยู่แล้ว)
-
เปิดเมนู "Save". พอสร้างไฟล์ text ใหม่สำหรับโค้ดของหน้าเว็บไว้แล้ว ก็ให้กด Ctrl + S (Windows) หรือ ⌘ Command + S (Mac) ได้เลย
- หรือคลิก File แล้วคลิก Save As ในเมนูที่ขยายลงมา ทำได้ทั้งใน Windows และ Mac
-
ตั้งชื่อไฟล์ HTML. พิมพ์ชื่อไฟล์ที่ต้องการในช่อง "File name" (Windows) หรือ "Name" (Mac)
-
เปลี่ยนประเภทไฟล์ของเอกสาร. ต้องเปลี่ยนเอกสารจากไฟล์ text ไปเป็นไฟล์ HTML
- Windows - คลิกช่อง "Save as type" ให้ขยายลงมา คลิก All Files แล้วพิมพ์ .html ต่อท้ายชื่อไฟล์
- Mac - เปลี่ยน .txt ท้ายชื่อไฟล์เป็น .html
-
คลิก Save . ทางด้านล่างของหน้าต่าง เพื่อสร้างไฟล์ HTML
- ปกติไฟล์ HTML จะเปิดขึ้นมาในเบราว์เซอร์หลักของคอม
-
ปิด text editor. เท่านี้ไฟล์ HTML ของคุณก็พร้อมเปิดในเบราว์เซอร์ ให้คุณได้เห็นหน้าตาของเว็บแบบเต็มๆ แล้ว
-
เปิดไฟล์ HTML ในเบราว์เซอร์. ส่วนใหญ่ให้ดับเบิลคลิกไฟล์ HTML ถ้าดับเบิลคลิกไฟล์แล้ว error ให้ทำตามขั้นตอนต่อไปนี้
- Windows - คลิกขวาที่ไฟล์ เลือก Open with แล้วคลิกเบราว์เซอร์ที่ถนัด
- Mac - คลิกที่ไฟล์ 1 ครั้ง คลิก File เลือก Open With แล้วคลิกเบราว์เซอร์ที่ถนัด
-
แก้ไขไฟล์ 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 หรือเว็บอื่นๆ ที่ใกล้เคียง ถ้าจะอัพโหลดรูปเข้าเว็บ ถ้าไปโพสต์รูปคนอื่น ระวังจะโดนเรื่องละเมิดลิขสิทธิ์
โฆษณา
ข้อมูลอ้างอิง
โฆษณา
