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

บทความวิกิฮาวนี้จะแนะนำวิธีการสร้างหน้าเว็บง่ายๆ แบบมีเฉพาะข้อความ โดยใช้โปรแกรม Notepad ใน Windows เป็นการเขียนหน้าเว็บด้วยภาษา HTML

ส่วน 1

ส่วน 1 ของ 4:

สร้างเอกสาร HTML

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

คลิกโลโก้ Windows มุมซ้ายล่างของหน้าจอ เพื่อเปิดเมนู Start
โดยพิมพ์ notepad จะเห็นผลการค้นหาที่ตรงกัน โผล่มาด้านบนของเมนู Start
ที่เป็นไอคอนสมุดโน้ตสีฟ้า ทางด้านบนของผลการค้นหา เพื่อเปิด Notepad
มุมซ้ายบนของหน้าต่าง Notepad แล้วเมนูจะขยายลงมา
ในเมนูที่ขยายลงมา เพื่อเปิดหน้าต่าง Save As
จะเป็นตัวเลือกทางด้านล่างของหน้าต่าง เขียนว่า "Text documents (*.txt)" คลิกแล้วเมนูจะขยายลงมา
ในเมนูที่ขยายลงมา เพื่อเซฟไฟล์เป็นเอกสาร HTML
8
เลือกตำแหน่งเซฟไฟล์. คลิกชื่อโฟลเดอร์ที่จะเซฟเอกสาร ทางซ้ายของหน้าต่าง
- เช่น ถ้าจะเซฟเอกสารไว้ในหน้า desktop ให้เลื่อนขึ้นไปคลิก Desktop ใน sidebar ทางซ้าย
9
พิมพ์ชื่อและนามสกุลไฟล์ "html". คลิกช่อง "File name" แล้วพิมพ์ชื่อไฟล์ที่ต้องการ ตามด้วย .html
- เช่น ถ้าจะตั้งชื่อไฟล์หน้าเว็บว่า "hello" ให้พิมพ์ hello.html
10
คลิก Save. เพื่อเปลี่ยนเอกสาร Notepad นี้เป็นไฟล์ HTML เท่านี้ก็ไปเขียนโค้ดสร้างหน้าเว็บเบื้องต้นได้เลย
- ถ้าปิด Notepad ไปแล้ว หรือต้องกลับมาที่เอกสารนี้ทีหลัง ให้คลิกขวาที่ไฟล์ HTML แล้วคลิก Edit ในเมนูที่ขยายลงมา
โฆษณา

ส่วน 2

ส่วน 2 ของ 4:

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

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

1
ใส่แท็กภาษาของหน้าเว็บ. แท็กแรก ใส่เพื่อบอก Notepad ว่าเอกสารนี้จะเป็นภาษา HTML ให้พิมพ์โค้ดต่อไปนี้ใน Notepad
```
<!DOCTYPE html><html>
```
เป็นแท็กที่กำหนดจุดเริ่มต้นและจุดสิ้นสุดของชื่อหน้าเว็บ ที่เดี๋ยวจะสร้างในขั้นตอนถัดไป ตอนนี้ให้พิมพ์ <head> ต่อท้ายแท็ก "<html>" กด ↵ Enter 2 ครั้งเพื่อเว้นวรรค แล้วพิมพ์ </head>
3
ใส่ชื่อหน้าให้เว็บไซต์. title หรือชื่อหน้ากลางแท็ก "<title></title>" จะอยู่ระหว่าง 2 แท็ก "head" เป็นตัวกำหนดชื่อเว็บที่ขึ้นใน tab ของเบราว์เซอร์ อย่างถ้าจะใช้ header ตั้งชื่อเว็บว่า "เว็บของฉัน" ก็ให้พิมพ์
```
<title>เว็บของฉัน</title>
```
4
ใส่แท็ก "body". โค้ดทั้งหมดของหน้าเว็บ จะอยู่กลางแท็กนี้ ที่อยู่ล่างแท็ก "</title>" อีกที
```
<body></body>
```
แท็กสุดท้ายในเอกสาร คือแท็กปิดของ HTML เพื่อบอกว่าหน้าเว็บจบตรงนี้ ให้พิมพ์ </html> ล่างแท็ก "</body>" เพื่อปิดแท็ก HTML
6
ตรวจทานโค้ด HTML. ตอนนี้โค้ดในเอกสารจะออกมาประมาณนี้
```
<!DOCTYPE html><html><head><title>เว็บของฉัน</title></head><body></body></html>
```
โดยกด Ctrl+S เท่านี้ก็ไปเพิ่มองค์ประกอบต่างๆ ของหน้าเว็บได้เลย เช่น ย่อหน้า หัวข้อ เป็นต้น
โฆษณา

ส่วน 3

ส่วน 3 ของ 4:

เพิ่มองค์ประกอบต่างๆ ในหน้าเว็บ

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

ย้ำว่าทุกองค์ประกอบของหน้าเว็บ จะอยู่ระหว่าง 2 แท็ก "body". ทุกองค์ประกอบ ไม่ว่าจะหัวข้อหรือย่อหน้า ต้องใส่ไว้หลังแท็ก "<body>" แต่หน้าแท็ก "</body>"
2
ใส่หัวข้อหลักของเว็บ. พิมพ์ <h1></h1> กลางแท็ก "body" แล้วพิมพ์ข้อความที่อยากให้เป็นหัวข้อหลักของหน้าเว็บ กลางแท็ก "<h1></h1>" เช่น ถ้าจะสร้างหน้า "ยินดีต้อนรับ" ให้พิมพ์
```
<h1>ยินดีต้อนรับ</h1>
```
- คุณใช้แท็ก "<h2></h2>" ไปจนถึง "<h6></h6>" สร้างหัวข้อย่อยๆ ได้เลย
3
ใส่เนื้อหาเป็นย่อหน้าในหน้าเว็บ. พิมพ์แท็ก paragraph "<p></p>" แล้วพิมพ์ข้อความที่จะใช้ในย่อหน้านั้น กลางแท็ก โค้ดที่ได้จะออกมาเป็น
```
<p>นี่คือเว็บไซต์ของเรา ช่วยโหวตให้เราได้เป็นประธานนักเรียนด้วยนะ!</p>
```
4
เว้นวรรคระหว่างย่อหน้า. ถ้าอยากให้มีบรรทัดว่าง คั่นระหว่างย่อหน้าหรือหัวข้อ ให้พิมพ์ <br> ตามหลังแท็กปิดของบรรทัดนั้น เช่น ถ้าจะใส่ line break หลังย่อหน้า ให้ใส่โค้ดดังต่อไปนี้
```
<p>นี่คือเว็บไซต์ของเรา ช่วยโหวตให้เราได้เป็นประธานนักเรียนด้วยนะ!</p><br><p>ของโปรดเราคือมันฝรั่ง</p>
```
- จะใส่แท็ก "<br>" เพิ่มเติมจากแท็กแรก เพื่อใส่อีก line break ให้มีบรรทัดว่างระหว่างย่อหน้าแรกกับย่อหน้าที่ 2 ด้วยก็ได้
5
กำหนดฟอร์แมตให้ข้อความ. คุณทำให้คำ ประโยค หรือข้อความทั้งก้อนเป็นตัวหนา ตัวเอียง และขีดเส้นใต้ได้ (รวมถึงตัวยก ตัวห้อย) ขอแค่ใส่ไว้กลางแท็ก paragraph
```
<b>ตัวหนา</b><i>ตัวเอียง</i><u>ขีดเส้นใต้</u><sup>ตัวยก</sup><sub>ตัวห้อย</sub>
```

How.com.vn ไท: Step 6 ตรวจทานหน้าตาของหน้าเว็บ.

องค์ประกอบของหน้าเว็บนั้นมีมากมายหลากหลาย แต่ตัวอย่างหน้าเว็บก็จะออกมาประมาณนี้

<!DOCTYPE html><html><head><title>เว็บไซต์ของฉัน</title></head><body><h1>ยินดีต้อนรับ!</h1><p>นี่คือเว็บของฉัน อ่านให้สนุกนะ!</p><p><b>ตรงนี้เป็นตัวหนาเน้นข้อความ</b></p><p><i>ถ้าตัวเอียงก็จะหลอนๆ หน่อย</i></p></body></html>

โฆษณา

ส่วน 4

ส่วน 4 ของ 4:

ทดสอบหน้าเว็บที่ได้

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

โดยกด Ctrl+S เพื่อให้เอกสาร HTML แสดงหน้าเว็บที่มีเนื้อหาเวอร์ชั่นอัพเดทล่าสุด
แล้วเมนูจะขยายลงมา
ในเมนูที่ขยายลงมา เพื่อเปิดเมนูใหม่
ปกติคุณเปิดไฟล์ HTML ได้ในทุกเบราว์เซอร์ ก็ให้คลิกเลือกเบราว์เซอร์ที่จะใช้ จากในเมนูที่โผล่มา เพื่อเปิดไฟล์ HTML ในเบราว์เซอร์ที่เลือก
5
ตรวจทานหน้าเว็บ. ถ้าฟอร์แมตต่างๆ ถูกต้องแล้ว ก็ปิด Notepad ได้เลย
- ถ้าจะแก้ไขโค้ดในเอกสาร HTML ต่อ ให้กลับไปที่ Notepad แล้วปรับแต่งตามต้องการ อย่าลืมเซฟเรื่อยๆ ป้องกันความผิดพลาด
โฆษณา