HTML คือ? สอนเขียน HTML สำหรับมือใหม่แบบละเอียด

PND777
📖 บทความนี้มีอะไรบ้าง แสดง

HTML คือ ?


ในบทความจะพูดถึง HTML คืออะไร การทำงานของ Website การลง VS studio และเนื้อหาที่จำเป็นในการพัฒนา Website เพื่อใช้ต่อยอดในการเป็น Front-end developer ที่ดี

การพัฒนาเว็บไซต์จะไม่ใช่เรื่องยากอีกต่อไป ถ้าเพื่อนๆได้อ่านบทความนี้

File:HTML5 logo and wordmark.svg - Wikimedia Commons

เนื้อหา

01. HTML คือ ?


ในบทแรกจะพูดถึงองค์ประกอบ HTML element และโครงสร้าง HTML document ว่ามีส่วนประกอบอะไรบ้าง รวมทั้ง พื้นฐาน HTML ที่ควรรู้

และ CSS selector พื้นฐานที่จำเป็นในการตกแต่ง HTML document ให้สวยงาม

HTML คืออะไร ?

HTML คือ ภาษาคอมพิวเตอร์ ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับหรือที่เรียกว่า Tag ใช้ควบคุมการแสดงผลหน้าจอเว็บไซต์ เช่น รูปภาพ ข้อความเป็นต้น

CSS ใช้ในการตกแต่ง ตัว HTML ให้สวยงาม และ ตอบสนองต่อ Device หลายรูปแบบ

JavaScript จะใช้ในการสร้างหรือพัฒนาระบบการทำงานให้ซับซ้อนหรือมีการ Interaction มากขึ้น

HTML, CSS, JavaScript HTML คือ
HTML, CSS, JavaScript

ถ้าเปรียบเทียบ Website กับอวัยวะของมนุษย์

HTML คือ กระดูกส่วนต่างๆ

CSS คือ หุ่น ผิวพรรณ หน้าตา

JavaScript คือ ระบบต่างๆในร่างกาย


HTML element ประกอบไปด้วยอะไรบ้าง

HTML element HTML คือ
HTML element

จากรูปจะเห็น HTML จะเริ่มด้วย Start tag และจบที่ End tag โดยมีเนื้อหาหรือข้อมูล( Content ) คั่นกลางอยู่

โดยปกติในแต่ละ Tag จะประกอบไปด้วยแค่ Element name ที่จะบอกว่า Element ตัวนี้ทำหน้าที่อะไร

ตัวอย่างเช่น: <H1> ย่อมาจาก Heading ทำหน้าที่เป็นหัวข้อเนื้อหา

แต่ในกรณี ที่เราต้องการเพิ่มเติมลักษณะพิเศษให้กับ HTML element เราจะใช้ Attribute ซึ่งจะอยู่ใน Start tag เสมอ


HTML self-closing element

HTML คือ  Self-closing element
Self-closing element

Self-Closing element คือ HTML Element ที่ไม่ต้องมี Close tag เป็นองค์ประกอบ


โครงสร้าง HTML

HTML structure HTML คือ
HTML structure

จากรูปจะเห็นได้ว่า โครงสร้าง HTML มีรูปแบบเป็นลำดับชั้น หรือที่เรียกว่า Hierachy

โดยวงนอกสุดจะเริ่มจากการที่มี <html> คลุม 2 tag อื่นอยู่คือ

  1. <head> ทำหน้าที่เก็บข้อมูลที่สำคัญและแสดงชื่อ Website(Title)

โดยจะประกอบไปด้วย tag จำนวนมาก ตัวอย่างเช่น <meta>, <title>, <viewport>

รวมทั้งเป็นส่วนที่ใช้เขียน CSS ใน <style>

2. <body> ทำหน้าที่แสดงข้อมูลเนื้อหาให้แก่ผู้ใช้ Website

โดยจะประกอบไปด้วย tag จำนวนมาก ตัวอย่างเช่น <h1>, <p>, <input>

รวมทั้งเป็นส่วนที่ใช้เขียน JavaScript ใน <script>


CSS selector คือ

สำหรับการเริ่มเขียน HTML ควรจะรู้ CSS เล็กน้อยมาก่อน เพื่อให้สามารถใช้งานบาง Attribute ได้

เราจะเขียน Selector ใน <style> เสมอนะ

Selector Structure HTML คือ
Selector Structure

CSS Selector คือ การเลือก HTML element เฉพาะเจาะจงเพื่อการตกแต่งด้วย CSS

โดยจะประกอบ 3 องค์ประกอบหลักคือ

  1. Selector = ใช้กำหนด HTML element ที่จะทำการตกแต่ง
  2. Properties = ส่วนของการตกแต่ง ตัวอย่าง width คือ กำหนดความกว้างของ Element
  3. Value = ค่าที่เรากำหนดขึ้นมา ตัวอย่าง width : 100px คือ Element นี้จะมีความกว้าง 100 pixel

Selector มีหลายประเภทมาก วันนี้แอดจะมาแนะนำ 5 simple selector ที่นิยมใช้กัน

HTML คือ Simple Selector
Simple Selector
  1. Element ใช้เลือก HTML element ตัวอย่างเช่น p{} เลือก <p>
  2. Class ใช้เลือก element ที่ attribute ชนิด class โดยเขียน .Class
  3. ID ใช้เลือก element ที่ attribute ชนิด id โดยเขียน #ID
  4. Universal ใช้เลือกทุก element เราจะเขียนด้วยตัวดอกจันทร์(*)
  5. Group ใช้เลือกหลาย element พร้อมกันเช่น <h1> กับ <p>จะเขียน h1,p

แอดคิดว่าตอนนี้ เพื่อนๆ น่าจะเข้าใจ โครงสร้าง HTML,CSS ไปบ้างแล้ว

ถ้าอย่างนั้น เราไปบทถัดไปกันเลยดีกว่า !!!

02. Website ทำงานยังไง


ในบทนี้จะพูดถึงการทำงานของ Website ว่ากว่าจะมีหน้าแต่ละหน้าให้เราได้ใช้กัน ต้องผ่านอะไรมาบ้าง

Client และ Server คืออะไร ส่งข้อมูลอะไรให้กัน วันนี้เราจะมาหาคำตอบกันครับ

URL คืออะไร

ก่อนที่จะเข้าใจการทำงาน เราต้องมารู้จัก URL(Uniform Resource Location) กันซะก่อน

URL คือที่อยู่ website บนโลกอินเทอร์เน็ต เปรียบเทียบได้กับ ที่อยู่บ้านของเรานั่นเอง

URL Structure พื้นฐาน HTML
URL Structure

โดยจะประกอบไปด้วย

  1. Protocol คือ ภาษาที่ใช้ในการติดต่อสื่อสารระหว่างอุปกรณ์
  2. Sub domain เป็นลำดับการตั้งชื่อ ซึ่งรองลงมากจาก Domain name
  3. Domain name คือชื่อหลักของ website ใช้ระบุ IP address
  4. Path เป็นเหมือนเส้นทางไปยังข้อมูลต่างๆ เช่น รุปภาพ, วิดีโอ

คำศัพท์ที่ควรรู้

  1. TCP/IP คือ Protocol ทั่วไปที่ใช้ในการส่งข้อมูลบนโลกอินเทอร์เน็ต
  2. DNS คือ ระบบเก็บข้อมูล domain name เมื่อเพื่อนๆค้นหา website ตัวBrowser จะเข้าไปหา web address ที่ DNS
  3. Client คือ เครื่องมือที่ใช้ในการเชื่อมต่ออินเทอร์เน็ต เช่น Firefox, Chrome browser
  4. Server คือ ระบบคอมพิวเตอร์ที่เก็บข้อมูลหน้า website มีหน้าที่รอรับ Respond และส่งข้อมูล web ไปที่ Client
  5. HTTP คือ Protocol ที่ Website ใช้ในการคุยกัน

HTTP ต่างกับ HTTPS อย่างไร

HTTP และ HTTPS ต่างเป็น Protocol ที่มีหน้าที่ในการส่งข้อมูลบน website แต่สิ่งทำทำให้ HTTPS แตกต่างจาก HTTP คือการมีในส่วน Encrytion ทำให้การส่งข้อมูลมีความปลอดภัยที่มากกว่า

HTTPS ใช้ในการส่งข้อมูลจำพวก Password, Credit card เป็นต้น


การทำงานของ Website

การทำงาน Website HTML คือ
การทำงาน Website

มีขั้นตอนดังนี้ :

1.การทำงานของ Website จะเริ่มจากที่เราค้นหา URL ใน Browser ก่อน

2. หลังจากนั้นตัว Browser หรือ Client จะทำการส่ง HTTP Request ไปที่ Server เพื่อร้องขอข้อมูลหน้า Website

HTTP Request HTML คือ
HTTP Request

3. Server ได้รับ Request และทำการค้นหา Website

  • ถ้ามี Website ตัว Server จะทำการเตรียมส่ง HTTP Respond กลับไปยัง Client
  • ถ้าไม่มี Website ที่ร้องขอ จะส่ง HTTP 404 error page ไปยัง Client แทน อย่างที่เราเห็นกันเป็นประจำเวลาไม่เจอหน้า Web
HTML คือ HTTP Respond
HTTP Respond

4. Client ได้รับ Respond และทำการตรวจสอบ HTML document ตั่งแต่ตัวหัวจรดเท้า เพื่อหาพวก file อื่นๆ เช่น CSS file, รูปภาพ, วิดีโอ

แล้วทำการส่ง HTML request ในแต่ละ file พร้อมกันไปยัง Server อีกทีซึ่งเรียกกันว่า DOM

ทำให้องค์ประกอบของ Website จะปรากฎขึ้นมาบน Browser เร็วมาก

5. เมื่อ Client มี File เพียงพอแล้ว ก็จะแสดงผล Website บน Browser ทันที

Render Website HTML คือ
แสดงผล Website

03. Chrome Dev Tool


ในบทนี้พูดถึงการใช้ Chrome inspection ให้มีประสิทธิภาพสูงสุดในการพัฒนา Website

Chrome dev tool คือะไร

Chrome dev tool คือเครื่องมือที่นักพัฒนาใช้ในการตรวจสอบและทดสอบการทำงานของ Website ซึ่งแต่ละ Browser ก็จะมี dev tool เป็นของตัวเอง ตัวอย่างเช่น Mozilla dev tool เป็นต้น

วันนี้แอดเลือก Chrome เพราะคิดว่าเพื่อนๆ น่าจะนิยมใช้ Browser นี้มากที่สุด

Chrome dev too HTML คือ
Chrome dev tool

วิธีเปิด Chrome dev tool

การเปิด Chrome dev tool มี 4 วิธี

  1. คลิกขวาที่หน้า website ->คลิก Inspect
  2. กด F12(Windows)
  3. กด ที่ icon จุด 3 จุด ทางด้านขวาบนสุดของ Browser -> เลือก More tools -> คลิก Developer tools
  4. กด Command + Option +I (MacOS)

เพื่อนๆ สามารถปรับตำแหน่งของ Chrome dev tool ได้ด้วยการคลิกปุ่ม 3 จุด -> เลือก Dock side ขนาดต่างๆ


การใช้งาน Chrome dev tool

1. Network

Tab แรกที่จะพูดถึงกันคือ Network

นักพัฒนาจะใช้ Tab นี้ในการตรวจสอบ HTTP request และ Respond ที่เราได้เรียนในบทที่แล้ว

Network Chrome dev tool HTML คือ
Network Chrome dev tool

ถ้ายังไม่มีค่าอะไรปรากฎขึ้นมา เพื่อนๆสามารถกด Refresh หน้า Website

แล้วตารางข้างล่างจะปรากฎขึ้นใน Network ขึ้นมา ซึ่งจะมีข้อมูลที่แสดงผลออกมาตามนี้

Network Chrome dev tool HTML คือ
Network Chrome dev tool

2. Element

นักพัฒนาใช้เพื่อตรวจสอบ HTML document รวมทั้งทดลองปรับแก้ไข code ในส่วนต่างๆ

HTML คือ  Element Chrome dev tool
Element Chrome dev tool

เพื่อนๆ สามารถลองกด ปุ่ม Checkbox ของ CSS ทางด้านขวาได้ แล้วลองสังเกตุการณ์เปลี่ยนแปลงดู

รวมทั้ง สามารถตรวจสอบ code เฉพาะเจาะจงขององค์ประกอบบนหน้า Website ได้ด้วยการคลิกที่ “Select an element to inspect” ด้านซ้ายบน ตามรูป

Select an element to inspect พื้นฐาน HTML
Select an element to inspect

แล้วลองไปคลิ๊กที่อะไรก็ได้ในหน้า Website นั้น และลองสังเกตุผลลัพธ์ที่ปรากฎบน Dev tools

จะปรากฎตำแหน่งของ สิ่งที่เราคลิกไปใน HTML document รวมทั้ง CSS code ทางด้านขวา

04. Visual studio code


ในบทนี้จะพูดถึงการติดตั้ง VS code พร้อม Extension ที่จำเป็นในการเขียน HTML

เรามาเริ่มสร้าง HTML Project กันเถอะ

Visual studio code คือ

Visual studio code คือ โปรแกรมที่ใช้สำหรับเขียน Code ถูกพัฒนาขึ้น จาก บริษัท Microsoft ซึ่งมี Feature ที่จะอำนวยความสะดวกสะบายให้ Programmer อย่างเรา ทำให้ในที่สุดกลายเป็น Editor ตัวนึงที่ได้รับความนิยมสูงในปัจจุบัน

ตัว VS code รองรับทั้ง 3 ระบบได้แก่

  • Windows
  • Linux
  • MacOS

สามารถดาวน์โหลดเพื่อติดตั้งได้ที่ Visual studio code เลย


วิธีติดตั้ง VS code

  1. เริ่มแรกก็ต้องดาวน์โหลดตาม OS คอมพิวเตอร์เราก่อน
HTML คือ VS code download
VS code download

สำหรับใครที่ไม่แน่ใจว่า Window เรามัน 32 หรือ 64 bit สามารถเช็คได้ตามขั้นตอนล่างนี้เลย

  1. ไปที่ Windows ถ้าเป็น Win 7 พิมพ์คำว่า “My Computer” ส่วน Win 8,10 พิมพ์คำว่า “This PC”
  2. คลิกเลือกที่ Properties
  3. ข้อมูล bit จะปรากฎ ในแถบ System type

2. กดติดตั้ง File ที่ ดาวน์โหลดมา เลือก accept the agreement และ กด “Next”

3. เลือก “Create a desktop icon” และ “Add to PATH(requires shell restart)”

4. สุดท้ายคลิก Install และ รอ จนติดตั้งสำเร็จ


VS code extension

Extension คือส่วนเสริมของ Visual studio code ที่จะช่วยให้การใช้งานของพวกเราง่ายขึ้น และ productive

เราสามารถค้นหาและติดตั้ง Extension ได้ในส่วน Navbar ของ VS code หรือกด (Ctrl+Shift+X)

ในการเริ่มพัฒนา พื้นฐาน HTML จำเป็นต้องใช้ 3 extension นี้มาก

1. Live Server

Live Server Extension HTML คือ
Live Server

เป็น Extension ที่จะช่วยให้เราสามารถ launch ตัว local Server ได้อย่างง่ายดาย

หรือให้พูดง่ายๆ คือสามารถสร้าง Web page ได้ ใน server ของตัวเอง

เราสามารถอัพเดต code ที่เปลี่ยนไปได้แบบ real-time เพียงกด save หรือ Ctrl + s ใน VS code

2. Prettier

Prettier HTML คือ
Prettier

เป็น Extensionช่วยจัดรูปแบบ Code ให้อ่านง่ายขึ้น

3. Auto Rename Tag

HTML คือ Auto Rename Tag
Auto Rename Tag

Extension ที่ทำให้เราสามารถแก้ไข Start tag และ End tag ใน HTML element ได้แบบอัตโนมัติ

Auto Rename tag

มาเริ่มสร้าง HTML Project กันเถอะ

  1. สร้าง Folder นึงขึ้นมาบน Desktop ตั้งชื่อว่า “HTML”
  2. กลับไปที่ VS code เลือก File บน Tab ด้านบน แล้วเลือก Open Folder… หรือ กด Ctrl + K + O
  3. ไปที่ Explorer tab ด้านซ้าย คลิกที่ New File

4. พิมพ์ชื่อไฟล์ “index”

5. ไปในส่วนเขียน code ทางด้านขวา พิมพ์ ! และ กด Enter ตัว HTML code พื้นฐาน ก็จะปรากฎตัวขึ้นมา

แค่นี้เราก็สามารถเริ่มเขียน HTML และ CSS ได้แล้ว

มาเริ่มสร้าง Project กันเถอะ

6. สุดท้าย เปิดใช้งาน Live server extension เพื่อ run website ขี้นมา

ด้วยการคลิกขวาที่ code แล้วเลือก “Open with Live Server” ตัว Website ก็จะปรากฎออกมา

Open with Live Server

05. พื้นฐาน HTML


ในบทนี้จะพูดถึง HTML element ที่จำเป็นต้องรู้ในการพัฒนา Website พร้อมทั้งการตกแต่งด้วย Style attribute เล็กน้อย

HTML Element ที่ควรรู้

1. Heading

Heading tag ใช้ในการแสดงหัวข้อเนื้อหาต่างๆ

มีอยู่ด้วยกัน 6 ระดับ ตั่งแต่ Heading 1 ไป Heading 6 ซึ่งจะเรียงไปตามขนาดและความสำคัญ

จะเขียนอยู่ในรูป <hx>…</hx>

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

เนื้อหาใน Website ส่วนใหญ่จะมี Heading 1 แค่อันเดียว

และมีการวางโครงสร้างหัวข้อต่างๆ แบบลำดับขั้นต้นไม้ เรียงกันไป

Heading structure example HTML คือ
Heading structure example

2. Paragraph

Paragraph tag ใช้ในการแสดงเนื้อหาต่างๆ

จะเขียนอยู่ในรูป <p>…</p>

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

3. Formatting

Formatting tags จะใช้ในการตกแต่งข้อความต่างๆ ซึ่งมีหลายรูปแบบให้เลือกใช้กัน

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

4. Hyperlink

Hyperlink tag ใช้ในการสร้าง link ให้กับองค์ประกอบต่างๆใน HTML document

จะเขียนอยู่ในรูป <a>…</a> และใช้คู่กับ href attribute เสมอในการ link ไปที่ website

รวมทั้งยังสามารถ Link ไปยัง HTML document อื่นๆ หรือ component ต่างๆใน HTML document ได้อีกด้วย

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

โดยเราทำการแก้ไขส่วน href จาก Website link เป็นชื่อไฟล์ HTML document

หรือถ้าเป็นไฟล์ภาพที่อยู่ในโฟล์เดอร์ ก็ต้องใส่ชื่อโฟล์เดอร์ตามด้วย ” / “

  Hyperlink tag  HTML คือ
Hyperlink tag

สำหรับใครที่อยากให้ link ไปเปิดใน Tab browser ถัดไปเราสามารถใส่ target=”_blank” ใน tag ได้นะ

5. Image

ตรงตามชื่อ Image tag ที่ใช้แสดงผลรูปภาพ

ด้วยความที่เป็น Self-closing tag เลยเขียนอยู่ในรูป <img>

และใช้ src attribute ในการเลือกรูปภาพมาแสดง และ ใช้ alt ในการบอกกับผู้ใช้ว่าไฟล์รูปภาพนี้คืออะไร ในกรณีที่ไม่สารถดูรูปภาพนั้นได้ (เน็ตช้า)

alt attribute ถือเป็นส่วนสำคัญของ image tag ที่ขาดไม่ได้ เพื่อแสดงให้ Web page เห็น

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

เพื่อนสามารถปรับแต่งขนาดรูปภาพได้ด้วย width และ height attribute

6. Comment

Comment คือการอธิบาย Code ในกรณีที่มีคนอื่นมาอ่าน code ของเราหรือวในกรณีที่เรากลับมาอ่าน แล้วจำไม่ได้ว่า code บรรทัดนี้ใช้ทำอะไร

ซึ่งตัว Compiler จะไม่นำ Comment ไปแสดงผล

Comment ถือเป็นสิ่งที่สำคัญมากในการทำงานพัฒนา Website ร่วมกัน

เพื่อให้ทีมเข้าใจ Code ที่เราเขียนได้

โดยจะอยู่ในรูป <!–…–>

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0


HTML Style ที่ควรรู้

ส่วนนี้จะพูดถึงพื้นฐานการเขียน CSS เพื่อนำไปใช้ในการตกแต่ง HTML document ใน <style> นะ

1. Background color

เราใช้ background-color property ในการกำหนดสีพื้นหลัง HTML element

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

2. Text color

เราใช้ color property ในการกำหนดสีตัวอักษร

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

3. Font

เราใช้ font-family property ในการกำหนดประเภท font ที่ใช้

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

4. Text size

เราใช้ font-size property ในการกำหนดขนาดตัวอักษร

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0

5. Text alignment

เราใช้ text-align property ในการกำหนดตำแหน่งตัวอักษร บน HTML document

See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0


จบไปแล้วกับบทความ HTML คือ พื้นฐานสำหรับมือใหม่ เป็นไงบ้างครับ ได้รับความรู้อะไรไปบ้าง Comment บอกพวกเราได้นะ

สำหรับเพื่อนๆ ที่อยากจะศึกษา HTML เพิ่มเติม หรืออยากลองทำโจทย์ HTML ที่ได้เรียนไป

แอดแนะนำ W3school HTML tutorial เพื่อนๆต้องไม่ผิดหวังแน่นอน

อ้างอิงจาก Youtube

บทความที่เกี่ยวข้อง

PND777

PND777

จบจากคณะวิศวะคอมพิวเตอร์ สนใจในงาน UX/UI และ Coding มีความฝันว่าอยากจะทำงานบริษัทเกมชื่อดัง
บทความทั้งหมด