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

Non Purachaka
Aug 8, 2017 · 2 min read

ในการทำหน้าเว็ปง่ายๆ หลายๆคนก็จะมีคำถามในใจว่าเราควรเริ่มจากตรงไหนก่อน ไม่ใช่โปรแกรมเมอร์แต่อยากเขียนเว็ปไซต์ จะทำได้ไหม ง่ายๆเลยครับ เริ่มจาก 1 ภาษาที่เราจะใช้ในการเขียน กับ 2 เราจะใช้โปรแกรมอะไรในการเขียน

สิ่งที่เราควรรู้ว่าเราจะใช้ภาษาอะไรในการเขียนเว็ปนั้นมีอยู่เพียง 3 ภาษา เช่น HTML, CSS และ JavaScript และก็โปรแกรมที่แนะนำในการเขียนเว็ปง่ายๆ หรือที่เราเรียกว่า IDE (integrated development environment) ผมแนะนำ Atom ครับ โปรแกรมง่ายๆ แถมฟรีอีกต่างหาก

ทำไมต้องรู้ 3 ภาษาพื้นฐานในการเขียนหน้าเว็ปไซต์

เรามาดูความต่างของแต่ละภาษากันดีกว่า ว่าแต่ละอย่างคืออะไร

  1. HTML คือภาษาหลักในการเขียนเว็ปไซต์ โดยจะใช้ Tag ในการกำหนดการแสดงผล. <html>…</html>
  2. CSS ย่อมาจาก Cascading Style Sheets. เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ. ใช้สำหรับตกแต่งเอกสาร HTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น
  3. 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>

    Non Purachaka

    Written by

    Fannec.com, GetLinks, Product Manager, Pizza Lover

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade