วิธีการทำเว็บไซต์

Dec 01 2022

สวัสดี! ฉันเห็นว่าคุณมาเพื่อการสอนที่ยอดเยี่ยมจากฉัน! วันนี้เราจะมาเรียนรู้การทำเว็บไซต์กัน ไชโย! ข้อกำหนดพื้นฐาน ก่อนที่เราจะเริ่มสร้างเว็บไซต์ เราจำเป็นต้องมีข้อกำหนดพื้นฐานเหล่านี้: HTML คุณอาจรู้จัก HTML บ้างหรือเคยได้ยินมาบ้าง เช่น จากบล็อก Phaser ของฉัน ตอนนี้หากไม่รู้เกี่ยวกับ HTML ก็ไม่ต้องกังวล ฉันจะสอนคุณ: ดังนั้น เราต้องการซอร์สโค้ดบางส่วนเพื่อเริ่มต้นใน Atom เพียงพิมพ์ “html” ตามด้วย enter หรือคัดลอกโค้ดด้านล่าง: แท็ก <body> แท็ก body ใน HTML เป็นแท็กที่แสดงให้คุณเห็นข้อความ มี 2 วิธีที่แตกต่างกันในการ เขียนข้อความที่นี่ H1 แท็ก H1 เป็นแท็กหัวเรื่อง ฉันจะแสดงให้คุณเห็นว่าฉันหมายถึงอะไร: แท็ก p ย่อมาจากย่อหน้า: การเพิ่ม css โอเค ก่อนอื่นเราเพิ่ม css สำหรับสไตล์

สวัสดี! ฉันเห็นว่าคุณมาเพื่อการสอนที่ยอดเยี่ยมจากฉัน! วันนี้เราจะมาเรียนรู้การทำเว็บไซต์กัน ไชโย!

ข้อกำหนดพื้นฐาน

ก่อนที่เราจะเริ่มสร้างเว็บไซต์ เราจำเป็นต้องมีข้อกำหนดพื้นฐานเหล่านี้:

อินเทอร์เน็ต
เซิร์ฟเวอร์
โปรแกรมแก้ไขข้อความ เช่น โปรแกรมแก้ไขข้อความอะตอม

HTML

คุณอาจรู้จัก HTML บ้างหรือได้ยินมาบ้าง เช่น จากบล็อก Phaser ของฉัน ตอนนี้ถ้าไม่รู้เกี่ยวกับ HTML ก็ไม่ต้องกังวล ฉันจะสอนคุณ:

ดังนั้นเราต้องการซอร์สโค้ดเพื่อเริ่มต้นใน Atom เพียงพิมพ์ “html” ตามด้วย enter หรือคัดลอกโค้ดด้านล่าง:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>

  </body>
</html>

แท็ก <body>

แท็กเนื้อหาใน HTML เป็นแท็กที่แสดงข้อความ แสดงว่ามี 2 วิธีในการเขียนข้อความที่นี่

H1

แท็ก H1 เป็นแท็กหัวเรื่อง ฉันจะแสดงให้คุณเห็นว่าฉันหมายถึงอะไร:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
<h1>Hello this is a heading</h1>

  </body>
</html>

แท็ก p หมายถึงย่อหน้า:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
<p>Hello this is a paragraph</p>

  </body>
</html>

การเพิ่ม css

โอเค ก่อนอื่นเราเพิ่ม css สำหรับสไตล์

สร้างไฟล์ css อย่างรวดเร็ว

ตอนนี้มาเพิ่มสไตล์กันเถอะ!

h1{
color: brickred;

}

ใช่ ฉันจบบล็อกนี้ก่อนกำหนด แต่ในวันที่ 3 ธันวาคม ส่วนที่ 2 จะเปิดตัว

คุณจะได้เรียนรู้เกี่ยวกับฟังก์ชัน js divs และไฮเปอร์ลิงก์