ทดลองเขียนเว็บเพจด้วยภาษา HTML

8ทดลองเขียนเว็บเพจด้วยภาษา HTML

วิธีการเปิดโปรแกรม

1. เลือก Start >> All Programs >> Accessories >> Notepad

14ค           2. ลองพิมพ์โครงสร้างพื้นฐาน ดังรูป

<!DOCTYPE HTML>
<html>
<head>
<title>หัวข้อเว็บเพจ</title>
</head >
<body>
…ส่วนของเนื้อหา หรือข้อความที่จะใช้แสดงเนื้อหาในเว็บเพจ …
</body>
</html>

 

วิธีการเปลี่ยนรูปแบบตัวอักษร

Menu >> Format >>Font >>จากนั้นเปลี่ยนข้อมูลตามต้องการ >>จากนั้นคลิก OK

n3

n4

วิธีการบันทึกเอกสาร HTML

การบันทึกเอกสาร HTML ที่สร้างเสร็จแล้ว จะบันทึกนามสกุลเป็น .html หรือ .htm ซึ่งมีวิธีการบันทึกเอกสาร ดังนี้

1. เมื่อพิมพ์เสร็จแล้วไปที่ File >> Save

## หากเป็นการบันทึกชื่อใหม่ให้เลือก   File >> Save As..

3

2. บันทึกชื่อไฟล์และตามด้วยนามสกุล .html หรือ .htm   เช่น Test.html

4

วิธีการดูผลลัพธ์

วิธีที่ 1

หลังจากบันทึกเอกสารเรียบร้อยแล้วให้เราไปดับเบิลคลิกที่ไฟล์เอกสารเว็บที่เราสร้าง จะปรากฏดังรูป
5

วิธีที่ 2

เปิดโปรแกรม Internet Explorer

File >> Open >> Browse.. >> เลือกไฟล์เอกสารที่เราสร้าง >> Open >> OK  จะปรากฏเอกสาร HTML ที่เราสร้าง
k8

วิธีการแก้ไขเอกสาร HTML

           การแก้ไขเว็บเพจให้เรากลับไปที่ Notepad และทำการแก้ไขได้เลย เมื่อทำการแก้ไขเสร็จแล้ว ให้ทำการบันทึกไฟล์ และกลับไปที่เว็บบราวเซอร์อีกครั้ง จากนั้นกดปุ่ม F5 ที่แป้นพิมพ์ เพื่อให้บราวเซอร์ทำการโหลดเว็บเพจที่เราได้แก้ไข

1. เปิดอิดิเตอร์ Notepad

2. File >> Open

7           3. เลือก All Files

11

4. เลือกเอกสาร HTML ที่ต้องการแก้ไข >> คลิก Open >> ปรากฏเอกสาร HTML ที่ต้องการแก้ไข

k9

5. เมื่อทำการแก้ไขเสร็จแล้ว ให้ทำการบันทึกไฟล์ และกลับไปที่เว็บบราวเซอร์อีกครั้ง จากนั้นกดปุ่ม F5 ที่แป้นพิมพ์ เพื่อให้บราวเซอร์ทำการโหลดเว็บเพจที่เราได้แก้ไข

          หากพบว่าเนื้อหาที่เขียนในเว็บเพจไม่ปรากฏเป็นภาษาไทย ให้เรากำหนดการแสดงผลของบราวเวอร์ใหม่  โดยการคลิกเมาส์ขวา เลือกคำสั่ง >> Encoding >> Thai (Windows)

17

16

 คลิปวิดีโอ

อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad
Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out /  เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out /  เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out /  เปลี่ยนแปลง )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: