เนื้อหา
01. HTML คือ ?
ในบทแรกจะพูดถึงองค์ประกอบ HTML element และโครงสร้าง HTML document ว่ามีส่วนประกอบอะไรบ้าง รวมทั้ง พื้นฐาน HTML ที่ควรรู้
และ CSS selector พื้นฐานที่จำเป็นในการตกแต่ง HTML document ให้สวยงาม
HTML คืออะไร ?
HTML คือ ภาษาคอมพิวเตอร์ ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับหรือที่เรียกว่า Tag ใช้ควบคุมการแสดงผลหน้าจอเว็บไซต์ เช่น รูปภาพ ข้อความเป็นต้น
CSS ใช้ในการตกแต่ง ตัว HTML ให้สวยงาม และ ตอบสนองต่อ Device หลายรูปแบบ
JavaScript จะใช้ในการสร้างหรือพัฒนาระบบการทำงานให้ซับซ้อนหรือมีการ Interaction มากขึ้น
ถ้าเปรียบเทียบ Website กับอวัยวะของมนุษย์
HTML คือ กระดูกส่วนต่างๆ
CSS คือ หุ่น ผิวพรรณ หน้าตา
JavaScript คือ ระบบต่างๆในร่างกาย
HTML element ประกอบไปด้วยอะไรบ้าง
จากรูปจะเห็น HTML จะเริ่มด้วย Start tag และจบที่ End tag โดยมีเนื้อหาหรือข้อมูล( Content ) คั่นกลางอยู่
โดยปกติในแต่ละ Tag จะประกอบไปด้วยแค่ Element name ที่จะบอกว่า Element ตัวนี้ทำหน้าที่อะไร
ตัวอย่างเช่น: <H1> ย่อมาจาก Heading ทำหน้าที่เป็นหัวข้อเนื้อหา
แต่ในกรณี ที่เราต้องการเพิ่มเติมลักษณะพิเศษให้กับ HTML element เราจะใช้ Attribute ซึ่งจะอยู่ใน Start tag เสมอ
HTML self-closing element
Self-Closing element คือ HTML Element ที่ไม่ต้องมี Close tag เป็นองค์ประกอบ
โครงสร้าง HTML
จากรูปจะเห็นได้ว่า โครงสร้าง HTML มีรูปแบบเป็นลำดับชั้น หรือที่เรียกว่า Hierachy
โดยวงนอกสุดจะเริ่มจากการที่มี <html> คลุม 2 tag อื่นอยู่คือ
- <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> เสมอนะ
CSS Selector คือ การเลือก HTML element เฉพาะเจาะจงเพื่อการตกแต่งด้วย CSS
โดยจะประกอบ 3 องค์ประกอบหลักคือ
- Selector = ใช้กำหนด HTML element ที่จะทำการตกแต่ง
- Properties = ส่วนของการตกแต่ง ตัวอย่าง width คือ กำหนดความกว้างของ Element
- Value = ค่าที่เรากำหนดขึ้นมา ตัวอย่าง width : 100px คือ Element นี้จะมีความกว้าง 100 pixel
Selector มีหลายประเภทมาก วันนี้แอดจะมาแนะนำ 5 simple selector ที่นิยมใช้กัน
- Element ใช้เลือก HTML element ตัวอย่างเช่น p{} เลือก <p>
- Class ใช้เลือก element ที่ attribute ชนิด class โดยเขียน .Class
- ID ใช้เลือก element ที่ attribute ชนิด id โดยเขียน #ID
- Universal ใช้เลือกทุก element เราจะเขียนด้วยตัวดอกจันทร์(*)
- Group ใช้เลือกหลาย element พร้อมกันเช่น <h1> กับ <p>จะเขียน h1,p
แอดคิดว่าตอนนี้ เพื่อนๆ น่าจะเข้าใจ โครงสร้าง HTML,CSS ไปบ้างแล้ว
ถ้าอย่างนั้น เราไปบทถัดไปกันเลยดีกว่า !!!
02. Website ทำงานยังไง
ในบทนี้จะพูดถึงการทำงานของ Website ว่ากว่าจะมีหน้าแต่ละหน้าให้เราได้ใช้กัน ต้องผ่านอะไรมาบ้าง
Client และ Server คืออะไร ส่งข้อมูลอะไรให้กัน วันนี้เราจะมาหาคำตอบกันครับ
URL คืออะไร
ก่อนที่จะเข้าใจการทำงาน เราต้องมารู้จัก URL(Uniform Resource Location) กันซะก่อน
URL คือที่อยู่ website บนโลกอินเทอร์เน็ต เปรียบเทียบได้กับ ที่อยู่บ้านของเรานั่นเอง
โดยจะประกอบไปด้วย
- Protocol คือ ภาษาที่ใช้ในการติดต่อสื่อสารระหว่างอุปกรณ์
- Sub domain เป็นลำดับการตั้งชื่อ ซึ่งรองลงมากจาก Domain name
- Domain name คือชื่อหลักของ website ใช้ระบุ IP address
- Path เป็นเหมือนเส้นทางไปยังข้อมูลต่างๆ เช่น รุปภาพ, วิดีโอ
คำศัพท์ที่ควรรู้
- TCP/IP คือ Protocol ทั่วไปที่ใช้ในการส่งข้อมูลบนโลกอินเทอร์เน็ต
- DNS คือ ระบบเก็บข้อมูล domain name เมื่อเพื่อนๆค้นหา website ตัวBrowser จะเข้าไปหา web address ที่ DNS
- Client คือ เครื่องมือที่ใช้ในการเชื่อมต่ออินเทอร์เน็ต เช่น Firefox, Chrome browser
- Server คือ ระบบคอมพิวเตอร์ที่เก็บข้อมูลหน้า website มีหน้าที่รอรับ Respond และส่งข้อมูล web ไปที่ Client
- HTTP คือ Protocol ที่ Website ใช้ในการคุยกัน
HTTP ต่างกับ HTTPS อย่างไร
HTTP และ HTTPS ต่างเป็น Protocol ที่มีหน้าที่ในการส่งข้อมูลบน website แต่สิ่งทำทำให้ HTTPS แตกต่างจาก HTTP คือการมีในส่วน Encrytion ทำให้การส่งข้อมูลมีความปลอดภัยที่มากกว่า
HTTPS ใช้ในการส่งข้อมูลจำพวก Password, Credit card เป็นต้น
การทำงานของ Website
มีขั้นตอนดังนี้ :
1.การทำงานของ Website จะเริ่มจากที่เราค้นหา URL ใน Browser ก่อน
2. หลังจากนั้นตัว Browser หรือ Client จะทำการส่ง HTTP Request ไปที่ Server เพื่อร้องขอข้อมูลหน้า Website
3. Server ได้รับ Request และทำการค้นหา Website
- ถ้ามี Website ตัว Server จะทำการเตรียมส่ง HTTP Respond กลับไปยัง Client
- ถ้าไม่มี Website ที่ร้องขอ จะส่ง HTTP 404 error page ไปยัง Client แทน อย่างที่เราเห็นกันเป็นประจำเวลาไม่เจอหน้า Web
4. Client ได้รับ Respond และทำการตรวจสอบ HTML document ตั่งแต่ตัวหัวจรดเท้า เพื่อหาพวก file อื่นๆ เช่น CSS file, รูปภาพ, วิดีโอ
แล้วทำการส่ง HTML request ในแต่ละ file พร้อมกันไปยัง Server อีกทีซึ่งเรียกกันว่า DOM
ทำให้องค์ประกอบของ Website จะปรากฎขึ้นมาบน Browser เร็วมาก
5. เมื่อ Client มี File เพียงพอแล้ว ก็จะแสดงผล Website บน Browser ทันที
03. Chrome Dev Tool
ในบทนี้พูดถึงการใช้ Chrome inspection ให้มีประสิทธิภาพสูงสุดในการพัฒนา Website
Chrome dev tool คือะไร
Chrome dev tool คือเครื่องมือที่นักพัฒนาใช้ในการตรวจสอบและทดสอบการทำงานของ Website ซึ่งแต่ละ Browser ก็จะมี dev tool เป็นของตัวเอง ตัวอย่างเช่น Mozilla dev tool เป็นต้น
วันนี้แอดเลือก Chrome เพราะคิดว่าเพื่อนๆ น่าจะนิยมใช้ Browser นี้มากที่สุด
วิธีเปิด Chrome dev tool
การเปิด Chrome dev tool มี 4 วิธี
- คลิกขวาที่หน้า website ->คลิก Inspect
- กด F12(Windows)
- กด ที่ icon จุด 3 จุด ทางด้านขวาบนสุดของ Browser -> เลือก More tools -> คลิก Developer tools
- กด Command + Option +I (MacOS)
เพื่อนๆ สามารถปรับตำแหน่งของ Chrome dev tool ได้ด้วยการคลิกปุ่ม 3 จุด -> เลือก Dock side ขนาดต่างๆ
การใช้งาน Chrome dev tool
1. Network
Tab แรกที่จะพูดถึงกันคือ Network
นักพัฒนาจะใช้ Tab นี้ในการตรวจสอบ HTTP request และ Respond ที่เราได้เรียนในบทที่แล้ว
ถ้ายังไม่มีค่าอะไรปรากฎขึ้นมา เพื่อนๆสามารถกด Refresh หน้า Website
แล้วตารางข้างล่างจะปรากฎขึ้นใน Network ขึ้นมา ซึ่งจะมีข้อมูลที่แสดงผลออกมาตามนี้
2. Element
นักพัฒนาใช้เพื่อตรวจสอบ HTML document รวมทั้งทดลองปรับแก้ไข code ในส่วนต่างๆ
เพื่อนๆ สามารถลองกด ปุ่ม Checkbox ของ CSS ทางด้านขวาได้ แล้วลองสังเกตุการณ์เปลี่ยนแปลงดู
รวมทั้ง สามารถตรวจสอบ code เฉพาะเจาะจงขององค์ประกอบบนหน้า Website ได้ด้วยการคลิกที่ “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
- เริ่มแรกก็ต้องดาวน์โหลดตาม OS คอมพิวเตอร์เราก่อน
สำหรับใครที่ไม่แน่ใจว่า Window เรามัน 32 หรือ 64 bit สามารถเช็คได้ตามขั้นตอนล่างนี้เลย
- ไปที่ Windows ถ้าเป็น Win 7 พิมพ์คำว่า “My Computer” ส่วน Win 8,10 พิมพ์คำว่า “This PC”
- คลิกเลือกที่ Properties
- ข้อมูล 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
เป็น Extension ที่จะช่วยให้เราสามารถ launch ตัว local Server ได้อย่างง่ายดาย
หรือให้พูดง่ายๆ คือสามารถสร้าง Web page ได้ ใน server ของตัวเอง
เราสามารถอัพเดต code ที่เปลี่ยนไปได้แบบ real-time เพียงกด save หรือ Ctrl + s ใน VS code
2. Prettier
เป็น Extensionช่วยจัดรูปแบบ Code ให้อ่านง่ายขึ้น
3. Auto Rename Tag
Extension ที่ทำให้เราสามารถแก้ไข Start tag และ End tag ใน HTML element ได้แบบอัตโนมัติ
มาเริ่มสร้าง HTML Project กันเถอะ
- สร้าง Folder นึงขึ้นมาบน Desktop ตั้งชื่อว่า “HTML”
- กลับไปที่ VS code เลือก File บน Tab ด้านบน แล้วเลือก Open Folder… หรือ กด Ctrl + K + O
- ไปที่ Explorer tab ด้านซ้าย คลิกที่ New File
4. พิมพ์ชื่อไฟล์ “index”
5. ไปในส่วนเขียน code ทางด้านขวา พิมพ์ ! และ กด Enter ตัว HTML code พื้นฐาน ก็จะปรากฎตัวขึ้นมา
แค่นี้เราก็สามารถเริ่มเขียน HTML และ CSS ได้แล้ว
6. สุดท้าย เปิดใช้งาน Live server extension เพื่อ run website ขี้นมา
ด้วยการคลิกขวาที่ code แล้วเลือก “Open with Live Server” ตัว Website ก็จะปรากฎออกมา
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.
เนื้อหาใน Website ส่วนใหญ่จะมี Heading 1 แค่อันเดียว
และมีการวางโครงสร้างหัวข้อต่างๆ แบบลำดับขั้นต้นไม้ เรียงกันไป
2. Paragraph
Paragraph tag ใช้ในการแสดงเนื้อหาต่างๆ
จะเขียนอยู่ในรูป <p>…</p>
See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.
3. Formatting
Formatting tags จะใช้ในการตกแต่งข้อความต่างๆ ซึ่งมีหลายรูปแบบให้เลือกใช้กัน
See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.
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.
โดยเราทำการแก้ไขส่วน href จาก Website link เป็นชื่อไฟล์ HTML document
หรือถ้าเป็นไฟล์ภาพที่อยู่ในโฟล์เดอร์ ก็ต้องใส่ชื่อโฟล์เดอร์ตามด้วย ” / “
สำหรับใครที่อยากให้ 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.
เพื่อนสามารถปรับแต่งขนาดรูปภาพได้ด้วย 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.
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.
2. Text color
เราใช้ color property ในการกำหนดสีตัวอักษร
See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.
3. Font
เราใช้ font-family property ในการกำหนดประเภท font ที่ใช้
See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.
4. Text size
เราใช้ font-size property ในการกำหนดขนาดตัวอักษร
See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.
5. Text alignment
เราใช้ text-align property ในการกำหนดตำแหน่งตัวอักษร บน HTML document
See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.
จบไปแล้วกับบทความ HTML คือ พื้นฐานสำหรับมือใหม่ เป็นไงบ้างครับ ได้รับความรู้อะไรไปบ้าง Comment บอกพวกเราได้นะ
สำหรับเพื่อนๆ ที่อยากจะศึกษา HTML เพิ่มเติม หรืออยากลองทำโจทย์ HTML ที่ได้เรียนไป
แอดแนะนำ W3school HTML tutorial เพื่อนๆต้องไม่ผิดหวังแน่นอน
อ้างอิงจาก Youtube
- วิดีโอ html5
- HTML Tutorial for Beginners: HTML Crash Course [2021]
- Identifying resources on the Web
- How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)
- How the Web works
บทความที่เกี่ยวข้อง
