ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
บทความวิกิฮาวนี้จะแนะนำวิธีการสร้างหน้าเว็บง่ายๆ แบบมีเฉพาะข้อความ โดยใช้โปรแกรม Notepad ใน Windows เป็นการเขียนหน้าเว็บด้วยภาษา HTML
ขั้นตอน
-
เปิด Start. คลิกโลโก้ Windows มุมซ้ายล่างของหน้าจอ เพื่อเปิดเมนู Start
-
ค้นหา Notepad. โดยพิมพ์ notepad จะเห็นผลการค้นหาที่ตรงกัน โผล่มาด้านบนของเมนู Start
-
คลิก Notepad . ที่เป็นไอคอนสมุดโน้ตสีฟ้า ทางด้านบนของผลการค้นหา เพื่อเปิด Notepad
-
คลิก File . มุมซ้ายบนของหน้าต่าง Notepad แล้วเมนูจะขยายลงมา
-
คลิก Save As… . ในเมนูที่ขยายลงมา เพื่อเปิดหน้าต่าง Save As
-
คลิกช่อง "Save as type" ที่ขยายลงมา. จะเป็นตัวเลือกทางด้านล่างของหน้าต่าง เขียนว่า "Text documents (*.txt)" คลิกแล้วเมนูจะขยายลงมา
-
คลิก All Files . ในเมนูที่ขยายลงมา เพื่อเซฟไฟล์เป็นเอกสาร HTML
-
เลือกตำแหน่งเซฟไฟล์. คลิกชื่อโฟลเดอร์ที่จะเซฟเอกสาร ทางซ้ายของหน้าต่าง
- เช่น ถ้าจะเซฟเอกสารไว้ในหน้า desktop ให้เลื่อนขึ้นไปคลิก Desktop ใน sidebar ทางซ้าย
-
พิมพ์ชื่อและนามสกุลไฟล์ "html". คลิกช่อง "File name" แล้วพิมพ์ชื่อไฟล์ที่ต้องการ ตามด้วย .html
- เช่น ถ้าจะตั้งชื่อไฟล์หน้าเว็บว่า "hello" ให้พิมพ์ hello.html
-
คลิก Save . เพื่อเปลี่ยนเอกสาร Notepad นี้เป็นไฟล์ HTML เท่านี้ก็ไปเขียนโค้ดสร้างหน้าเว็บเบื้องต้นได้เลย
- ถ้าปิด Notepad ไปแล้ว หรือต้องกลับมาที่เอกสารนี้ทีหลัง ให้คลิกขวาที่ไฟล์ HTML แล้วคลิก Edit ในเมนูที่ขยายลงมา
โฆษณา
-
ใส่แท็กภาษาของหน้าเว็บ. แท็กแรก ใส่เพื่อบอก Notepad ว่าเอกสารนี้จะเป็นภาษา HTML ให้พิมพ์โค้ดต่อไปนี้ใน Notepad
<!DOCTYPE html> < html >
-
ใส่แท็ก "head". เป็นแท็กที่กำหนดจุดเริ่มต้นและจุดสิ้นสุดของชื่อหน้าเว็บ ที่เดี๋ยวจะสร้างในขั้นตอนถัดไป ตอนนี้ให้พิมพ์ <head> ต่อท้ายแท็ก "<html>" กด ↵ Enter 2 ครั้งเพื่อเว้นวรรค แล้วพิมพ์ </head>
-
ใส่ชื่อหน้าให้เว็บไซต์. title หรือชื่อหน้ากลางแท็ก "<title></title>" จะอยู่ระหว่าง 2 แท็ก "head" เป็นตัวกำหนดชื่อเว็บที่ขึ้นใน tab ของเบราว์เซอร์ อย่างถ้าจะใช้ header ตั้งชื่อเว็บว่า "เว็บของฉัน" ก็ให้พิมพ์
< title > เว็บของฉัน </ title >
-
ใส่แท็ก "body". โค้ดทั้งหมดของหน้าเว็บ จะอยู่กลางแท็กนี้ ที่อยู่ล่างแท็ก "</title>" อีกที
< body > </ body >
-
ปิดแท็กภาษา HTML. แท็กสุดท้ายในเอกสาร คือแท็กปิดของ HTML เพื่อบอกว่าหน้าเว็บจบตรงนี้ ให้พิมพ์ </html> ล่างแท็ก "</body>" เพื่อปิดแท็ก HTML
-
ตรวจทานโค้ด HTML. ตอนนี้โค้ดในเอกสารจะออกมาประมาณนี้
<!DOCTYPE html> < html > < head > < title > เว็บของฉัน </ title > </ head > < body > </ body > </ html >
-
เซฟไฟล์. โดยกด Ctrl + S เท่านี้ก็ไปเพิ่มองค์ประกอบต่างๆ ของหน้าเว็บได้เลย เช่น ย่อหน้า หัวข้อ เป็นต้นโฆษณา
-
ย้ำว่าทุกองค์ประกอบของหน้าเว็บ จะอยู่ระหว่าง 2 แท็ก "body". ทุกองค์ประกอบ ไม่ว่าจะหัวข้อหรือย่อหน้า ต้องใส่ไว้หลังแท็ก "<body>" แต่หน้าแท็ก "</body>"
-
ใส่หัวข้อหลักของเว็บ. พิมพ์ <h1></h1> กลางแท็ก "body" แล้วพิมพ์ข้อความที่อยากให้เป็นหัวข้อหลักของหน้าเว็บ กลางแท็ก "<h1></h1>" เช่น ถ้าจะสร้างหน้า "ยินดีต้อนรับ" ให้พิมพ์
< h1 > ยินดีต้อนรับ </ h1 >
- คุณใช้แท็ก "<h2></h2>" ไปจนถึง "<h6></h6>" สร้างหัวข้อย่อยๆ ได้เลย
-
ใส่เนื้อหาเป็นย่อหน้าในหน้าเว็บ. พิมพ์แท็ก paragraph "<p></p>" แล้วพิมพ์ข้อความที่จะใช้ในย่อหน้านั้น กลางแท็ก โค้ดที่ได้จะออกมาเป็น
< p > นี่คือเว็บไซต์ของเรา ช่วยโหวตให้เราได้เป็นประธานนักเรียนด้วยนะ! </ p >
-
เว้นวรรคระหว่างย่อหน้า. ถ้าอยากให้มีบรรทัดว่าง คั่นระหว่างย่อหน้าหรือหัวข้อ ให้พิมพ์ <br> ตามหลังแท็กปิดของบรรทัดนั้น เช่น ถ้าจะใส่ line break หลังย่อหน้า ให้ใส่โค้ดดังต่อไปนี้
< p > นี่คือเว็บไซต์ของเรา ช่วยโหวตให้เราได้เป็นประธานนักเรียนด้วยนะ! </ p >< br > < p > ของโปรดเราคือมันฝรั่ง </ p >
- จะใส่แท็ก "<br>" เพิ่มเติมจากแท็กแรก เพื่อใส่อีก line break ให้มีบรรทัดว่างระหว่างย่อหน้าแรกกับย่อหน้าที่ 2 ด้วยก็ได้
-
กำหนดฟอร์แมตให้ข้อความ. คุณทำให้คำ ประโยค หรือข้อความทั้งก้อนเป็นตัวหนา ตัวเอียง และขีดเส้นใต้ได้ (รวมถึงตัวยก ตัวห้อย) ขอแค่ใส่ไว้กลางแท็ก paragraph
< b > ตัวหนา </ b > < i > ตัวเอียง </ i > < u > ขีดเส้นใต้ </ u > < sup > ตัวยก </ sup > < sub > ตัวห้อย </ sub >
-
ตรวจทานหน้าตาของหน้าเว็บ. องค์ประกอบของหน้าเว็บนั้นมีมากมายหลากหลาย แต่ตัวอย่างหน้าเว็บก็จะออกมาประมาณนี้
<!DOCTYPE html> < html > < head > < title > เว็บไซต์ของฉัน </ title > </ head > < body > < h1 > ยินดีต้อนรับ! </ h1 > < p > นี่คือเว็บของฉัน อ่านให้สนุกนะ! </ p > < p >< b > ตรงนี้เป็นตัวหนาเน้นข้อความ </ b ></ p > < p >< i > ถ้าตัวเอียงก็จะหลอนๆ หน่อย </ i ></ p > </ body > </ html >
โฆษณา
-
เซฟไฟล์. โดยกด Ctrl + S เพื่อให้เอกสาร HTML แสดงหน้าเว็บที่มีเนื้อหาเวอร์ชั่นอัพเดทล่าสุด
-
คลิกขวาที่ไฟล์ HTML. แล้วเมนูจะขยายลงมา
-
เลือก Open with . ในเมนูที่ขยายลงมา เพื่อเปิดเมนูใหม่
-
เลือกเบราว์เซอร์ที่ถนัด. ปกติคุณเปิดไฟล์ HTML ได้ในทุกเบราว์เซอร์ ก็ให้คลิกเลือกเบราว์เซอร์ที่จะใช้ จากในเมนูที่โผล่มา เพื่อเปิดไฟล์ HTML ในเบราว์เซอร์ที่เลือก
-
ตรวจทานหน้าเว็บ. ถ้าฟอร์แมตต่างๆ ถูกต้องแล้ว ก็ปิด Notepad ได้เลย
- ถ้าจะแก้ไขโค้ดในเอกสาร HTML ต่อ ให้กลับไปที่ Notepad แล้วปรับแต่งตามต้องการ อย่าลืมเซฟเรื่อยๆ ป้องกันความผิดพลาด
โฆษณา
เคล็ดลับ
- คุณ เปลี่ยนสีพื้นหลังของหน้าเว็บ หรือ เปลี่ยนสีฟอนต์ ได้ โดยใช้ CSS ควบคู่ไปกับโค้ดในไฟล์ HTML
โฆษณา
โฆษณา
