การสร้างเอกสาร HTML
ในบทแรกเราได้รู้จักกับ HTML ไปแล้ว ฉะนั้นในบทนี้เราจะมาดูว่า
เขาสร้างเอกสาร HTML ให้ออกมาเป็นเว็บไซต์ได้ยังไง
ก่อนอื่นเรามาดูว่ามีโปรแกรมอะไรที่ใช้สร้างเอกสาร HTML ได้บ้างดังนี้ครับ
เพราะมันมีมาให้ในเครื่องอยู่แล้ว สำหรับคนที่หาโปรแกรม
Notepad ไม่เจอผมแนะนำให้ไปที่............
Start >> Run >> แล้วพิมพ์คำว่า Notepad จานั้นกดปุ่ม Enter ครับ
โปรแกรมก็จะเด้งขึ้นมาอัตโนมัติ
เมื่อเปิดโปรแกรม Notepad ขึ้นมาเรียบร้อยแล้วให้เราพิมพ์ Code HTML
ตามตัวอย่างต่อไปนี้ครับ
เมื่อเขียน Code เสร็จเรียบร้อยแล้วให้ไปที่
File >> Save As
โปรแกรมจะขึ้นหน้าต่างมาดังภาพ
File name: ให้เราตั้งชื่อเป็นตัวอักษรภาษาอังกฤษเท่านั้น
รูปแบบการตั้งชื่อคือ ชื่อไฟล์ตามด้วย .html เช่น hello.html ดังภาพด้านบน
Save as type: ให้เราเลือกเป็น All Files ดังภาพด้านบน
เลือกที่จัดเก็บให้ดีดี แนะนำให้สร้าง Folder ใหม่ไว้ใช้สำหรับจัดเก็บเอกสาร HTML
ต่างหากเลยจะดีกว่าครับ เลือกได้แล้วก็กด Save แรงๆ เลยครับ - -
เพียงแค่นี้เราก็จะได้เอกสาร HTML ออกมา
จากนั้นลองดับเบิ้ลคลิก หรือภาษาไทยเรียกว่าคลิกสองที ^^ (คลิกซ้ายนะครับ แหะๆ)
ก็จะได้ผลลัพธ์ดังรูปด้านล่างเลยครับ
ผลลัพธ์
อธิบาย Code
เรามาดูที่บรรทัด 03
<meta equiv="Content-Type" content="text/html; charset=utf-8">
บรรทัดนี้ใช้กำหนดรูปแบบของตัวอักษร เห็นตัวแดงๆคำว่า utf-8 ไหมครับ
นี้คือรูปแบบมาตรฐานที่เขานิยมใช้กัน ผมฟันธง และ คอนเฟิร์มให้ใช้ utf-8 ครับ -*-
ทำไมต้องกำหนดรูปแบบของตัวอักษร อ่าาา ก็เพราะป้องกันไม่ให้เว็บแสดงภาษาต่างดาวครับ
ถ้าอยากเห็นความแตกต่าง ลองลบ Code บรรทัดที่ 03 ออกแล้วนำไปเปิดกับ Fire Fox ดูครับ
จะเห็นว่าภาษาไทยกลายเป็นภาษาต่างดาวไปซะอยางนั้น
ส่วน Code บรรทัดอื่นๆ ผมจะแนะนำให้ทุกท่านได้รู้จักกันภายหลัง
ในบทนี้เอาไว้เท่านี้ก่อนครับ
พบกันใหม่ในบทความหน้า
สวัสดีครับ
เขาสร้างเอกสาร HTML ให้ออกมาเป็นเว็บไซต์ได้ยังไง
ก่อนอื่นเรามาดูว่ามีโปรแกรมอะไรที่ใช้สร้างเอกสาร HTML ได้บ้างดังนี้ครับ
- Notepad
- EditPlus
- Dreamweaver
- และอื่นๆ
เพราะมันมีมาให้ในเครื่องอยู่แล้ว สำหรับคนที่หาโปรแกรม
Notepad ไม่เจอผมแนะนำให้ไปที่............
Start >> Run >> แล้วพิมพ์คำว่า Notepad จานั้นกดปุ่ม Enter ครับ
โปรแกรมก็จะเด้งขึ้นมาอัตโนมัติ
เมื่อเปิดโปรแกรม Notepad ขึ้นมาเรียบร้อยแล้วให้เราพิมพ์ Code HTML
ตามตัวอย่างต่อไปนี้ครับ
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>ทดสอบสร้างเอกสาร HTML</title>
</head>
<body>
สวัสดีครับ นี่คือหน้าเว็บที่ถูกสร้างมาจาก Code HTML
<body>
</html>
เมื่อเขียน Code เสร็จเรียบร้อยแล้วให้ไปที่
File >> Save As
โปรแกรมจะขึ้นหน้าต่างมาดังภาพ
File name: ให้เราตั้งชื่อเป็นตัวอักษรภาษาอังกฤษเท่านั้น
รูปแบบการตั้งชื่อคือ ชื่อไฟล์ตามด้วย .html เช่น hello.html ดังภาพด้านบน
Save as type: ให้เราเลือกเป็น All Files ดังภาพด้านบน
เลือกที่จัดเก็บให้ดีดี แนะนำให้สร้าง Folder ใหม่ไว้ใช้สำหรับจัดเก็บเอกสาร HTML
ต่างหากเลยจะดีกว่าครับ เลือกได้แล้วก็กด Save แรงๆ เลยครับ - -
เพียงแค่นี้เราก็จะได้เอกสาร HTML ออกมา
จากนั้นลองดับเบิ้ลคลิก หรือภาษาไทยเรียกว่าคลิกสองที ^^ (คลิกซ้ายนะครับ แหะๆ)
ก็จะได้ผลลัพธ์ดังรูปด้านล่างเลยครับ
ผลลัพธ์
อธิบาย Code
เรามาดูที่บรรทัด 03
<meta equiv="Content-Type" content="text/html; charset=utf-8">
บรรทัดนี้ใช้กำหนดรูปแบบของตัวอักษร เห็นตัวแดงๆคำว่า utf-8 ไหมครับ
นี้คือรูปแบบมาตรฐานที่เขานิยมใช้กัน ผมฟันธง และ คอนเฟิร์มให้ใช้ utf-8 ครับ -*-
ทำไมต้องกำหนดรูปแบบของตัวอักษร อ่าาา ก็เพราะป้องกันไม่ให้เว็บแสดงภาษาต่างดาวครับ
ถ้าอยากเห็นความแตกต่าง ลองลบ Code บรรทัดที่ 03 ออกแล้วนำไปเปิดกับ Fire Fox ดูครับ
จะเห็นว่าภาษาไทยกลายเป็นภาษาต่างดาวไปซะอยางนั้น
ส่วน Code บรรทัดอื่นๆ ผมจะแนะนำให้ทุกท่านได้รู้จักกันภายหลัง
ในบทนี้เอาไว้เท่านี้ก่อนครับ
พบกันใหม่ในบทความหน้า
สวัสดีครับ
0 ความคิดเห็น