ทำหน้า website ง่ายๆ สำหรับมือใหม่ (ที่ไม่รู้ไรเลย แต่อยากมีเว็ปของตัวเอง)

ในการทำหน้าเว็ปง่ายๆ หลายๆคนก็จะมีคำถามในใจว่าเราควรเริ่มจากตรงไหนก่อน ไม่ใช่โปรแกรมเมอร์แต่อยากเขียนเว็ปไซต์ จะทำได้ไหม ง่ายๆเลยครับ เริ่มจาก 1 ภาษาที่เราจะใช้ในการเขียน กับ 2 เราจะใช้โปรแกรมอะไรในการเขียน
สิ่งที่เราควรรู้ว่าเราจะใช้ภาษาอะไรในการเขียนเว็ปนั้นมีอยู่เพียง 3 ภาษา เช่น HTML, CSS และ JavaScript และก็โปรแกรมที่แนะนำในการเขียนเว็ปง่ายๆ หรือที่เราเรียกว่า IDE (integrated development environment) ผมแนะนำ Atom ครับ โปรแกรมง่ายๆ แถมฟรีอีกต่างหาก
ทำไมต้องรู้ 3 ภาษาพื้นฐานในการเขียนหน้าเว็ปไซต์
เรามาดูความต่างของแต่ละภาษากันดีกว่า ว่าแต่ละอย่างคืออะไร
- HTML คือภาษาหลักในการเขียนเว็ปไซต์ โดยจะใช้ Tag ในการกำหนดการแสดงผล. <html>…</html>
- CSS ย่อมาจาก Cascading Style Sheets. เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ. ใช้สำหรับตกแต่งเอกสาร HTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น
- JavaScript คือ script ที่ทำให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น
ลุยกันเลย “hello world”
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>จาก code ด้านบน จะเป็น html เพียวๆ จะสังเกตได้ว่า ทุกอย่างจะต้องมี tag เปิด <> แล้วก็ tag ปิด </> สำหรับโครงสร้าง html เราจะมี tag แบบนี้เป็นพื้นฐาน เช่น
<html> … </html>คำสั่ง <html> เป็นคำสั่งเริ่มต้นในการเขียนและคำสั่ง </html> เป็นการสิ้นสุด HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา html
<head> … </head>Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ
<title> … </title >.ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุมถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคำสำคัญในการค้นหา
<body> … </body>Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผล
สรุป
<HTML>….</HTML>. คำสั่งเริ่มต้น คำสั่ง html เป็นคำสั่งเริ่มการเขียน
<HEAD>….</HEAD>. เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ
<TITLE>….</TITLE>. ใช้บอกชื่อของเว็บเพจ
<BODY>….</BODY>. เป็นส่วนสำคัญที่สุด เพราะเป็นส่วนที่แสดงเนื้อหาทั้งหมด อาจรวมถึง ข้อความ รูปภาพ ตารางการเชื่อมโยง
แล้ว css ละ
CSS จะเข้ามามีบทบาทในการสร้าง เว็ปของเรามีความสวยงามมากขึ้น. ในการเขียน CSS เขียนได้ สามแบบ
1 inline style โดยเราจะเขียน style= “” ใน tag เลย
<h1 style=”font-size:32px;color:#FF0000;”>Hello world</h1>2 เขียน style ใน tag <head></head>
<head>
<style>
h1 { font-size:32px; color:#FF0000; }
</style>
</head>3 สร้างไฟล์ style.css แล้วเรียก file ผ่าน tag <links> ใน tag <head>
<head>
<link rel=”stylesheet” href=”style.css” />
</head>ในส่วนของ JavaScript คือ ส่วนที่เราสามารถทำให้เวปเรามีความสามารถมากขึ้น เราจะเขียน โค๊ดภายใต้ tag script แต่ยังอยู่ภายใน tag body
<body> <p id=”demo” onclick=”myFunction()”>Click me to change my text color.</p> <script>
function myFunction() {
document.getElementById(“demo”).style.color = “red”;
}
</script>
</body>
