สอนสร้างเว็บไซต์ ตอนที่ 3 เริ่มต้นสร้างเว็บไซต์แรกด้วย HTML

สอนสร้างเว็บไซต์ ตอนที่ 3 เริ่มต้นสร้างเว็บไซต์แรกด้วย HTML

เรามาลองเริ่มต้นสร้างเว็บไซต์แรกง่ายๆ เรียนรู้ส่วนประกอบของของเว็บ การจัดการไฟล์ ชื่อไฟล์ และ Tags ต่างๆ

Dec 07, 2017

แก้ไขล่าสุด มีผู้อ่าน 2,393  |  WEB HTML

ตอนที่ 3 เราจะใช้ Visual Studio Code ลองเขียนเว็บไซต์แบบง่ายๆ กันก่อนครับ เพื่อให้เข้าใจโครงสร้างและภาษาที่ใช้ในการสร้างเว็บ 

 

เริ่มต้น 

เปิด Visual Studio Code ขึ้นมาก่อน เลือกที่เก็บไฟล์เว็บไซต์ในเครื่อง ตัวอย่างเช่น เก็บบน Desktop โฟลเดอร์ชื่อ web ดังรูป

 


 

สร้างไฟล์ชื่อ index.html โดยกดปุ่ม + ดังรูปด้านล่าง

ตั้งชื่อไฟล์เป็น index.html จะได้ไฟล์เปล่าๆ ที่มีนามสกุล .html ไฟล์นามสกุลนี้ เป็นไฟล์หลักของการพัฒนาเว็บไซต์พื้นฐาน ต่อไปเราลองมาวางโครงสร้างของเว็บไซต์กัน


 

ส่วนประกอบที่สำคัญของภาษา HTML ได้แก่ Tag, Attribute


Tag คือ คำสั่งในภาษา HTML อยู่ในเครื่องหมาย < และ > ใช้สำหรับแสดงข้อความ วีดีโอ รูปภาพ ซึ่ง Tag เหล่านี้จะถูก Browser แปลงเป็นหน้าเว็บที่เราเห็นกันในปัจจุบัน การเขียน Tag จะมี 2 แบบ 

  1. แบบมี tag เปิดและ tag ปิด
    • <html> .... </html>    ส่วนของภาษา html
    • <head> .... </head> ส่วนหัวของเว็บ
    • <title>... </title>         แสดง Title ของเว็บ
    • <body> ... </body>   ส่วนเนื้อหาเว็บ
    • <h1> ... </h1>           แสดงหัวเรื่อง
       
  2. แบบมี tag เปิด อย่างเดียว
    • <hr> ใช้สร้างเส้นคั่นหน้า
    • <br> ใช้ขึ้นบรรทัดใหม่

 

Attribute เป็นส่วนขยายใน Tag ใช้สำหรับกำหนดคุณสมบัติเพิ่มเติม เช่น สี ความกว้าง ความยาว การวางตำแหน่ง เป็นต้น ค่าของ Attribute จะอยู่ภายในเครื่องหมาย "...." เช่น

<h1 align="center" >Website is easy </h1>

 

โค้ดภาษา HTML โครงสร้างของเว็บไซต์เริ่มต้นจะประกอบด้วย 

html, head, body ดังรูปด้านล่าง เป็นเว็บไซต์หน้าเปล่าๆ เราจะข้ามส่วน head  กันไปก่อนแล้วจะหลับมาอธิบายช่วงหลังครับ การเขียนโค้ดให้แสดงผลออกมาเป็นเว็บไซต์จะทำใน body 

<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
   
</body>
</html>
ว่าแล้วเราจะมาลองเขียนเว็บให้ได้หน้าตาตามรูปด้านล่างกันครับ โดยใช้ Tags พื้นฐานต่างๆ ดังนี้ h1, h2, p, br, hr, img, a
 
  • h1 แสดงส่วนหัวใหญ่ที่สุด
  • h2 แสดงส่วนหัวใหญ่รองลงมา
  • p แสดงย่อหน้า
  • br แสดงการขึ้นบรรทัดใหม่
  • hr แสดงเส้นคั่นหน้า
  • img แสดงรูปภาพ
  • a แสดงลิงค์บนเว็บ
 

วีดีโอแสดงวิธีทำ

 
 

เมื่อเขียนเสร็จจะได้ โค้ดตามด้านล่าง 

 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>สอนสร้างเว็บไซต์</title>
</head>
<body>
    <h1>Shopping Pocket</h1>
    <hr>
    <h3>สวัสดีครับ เว็บไซต์ Shopping Pocket ยินดีต้อนรับ</h3>
    <p>แหล่งรวมสินค้า ไอที โทรศัพท์ และอุปกรณ์เสริม</p>
    <img width="600" src="iphone-8-plus-18.jpg" />
    <br>
    <a href="https://www.amazon.com/Apple-Unlocked-Smartphone-Certified-Refurbished/dp/B00YD545CC/ref=sr_1_1?s=wireless&ie=UTF8&qid=1512550476&sr=1-1&keywords=iphone" >ดูเพิ่มเติม</a>
</body>
</html>

 


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย