Show
HTML คือ ?ในบทความจะพูดถึง HTML คืออะไร การทำงานของ Website การลง VS studio และเนื้อหาที่จำเป็นในการพัฒนา Website เพื่อใช้ต่อยอดในการเป็น Front-end developer ที่ดีการพัฒนาเว็บไซต์จะไม่ใช่เรื่องยากอีกต่อไป ถ้าเพื่อนๆได้อ่านบทความนี้เนื้อหา01. HTML คือ ?ในบทแรกจะพูดถึงองค์ประกอบ HTML element และโครงสร้าง HTML document ว่ามีส่วนประกอบอะไรบ้าง รวมทั้ง พื้นฐาน HTML ที่ควรรู้และ CSS selector พื้นฐานที่จำเป็นในการตกแต่ง HTML document ให้สวยงามHTML คืออะไร ?HTML คือ ภาษาคอมพิวเตอร์ ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับหรือที่เรียกว่า Tag ใช้ควบคุมการแสดงผลหน้าจอเว็บไซต์ เช่น รูปภาพ ข้อความเป็นต้น CSS ใช้ในการตกแต่ง ตัว HTML ให้สวยงาม และ ตอบสนองต่อ Device หลายรูปแบบ JavaScript จะใช้ในการสร้างหรือพัฒนาระบบการทำงานให้ซับซ้อนหรือมีการ Interaction มากขึ้น HTML, CSS, JavaScriptถ้าเปรียบเทียบ Website กับอวัยวะของมนุษย์ HTML คือ กระดูกส่วนต่างๆ CSSคือ หุ่น ผิวพรรณ หน้าตา JavaScript คือ ระบบต่างๆในร่างกาย HTML element ประกอบไปด้วยอะไรบ้างHTML elementจากรูปจะเห็น HTML จะเริ่มด้วย Start tag และจบที่ End tag โดยมีเนื้อหาหรือข้อมูล( Content) คั่นกลางอยู่ โดยปกติในแต่ละ Tag จะประกอบไปด้วยแค่ Element name ที่จะบอกว่า Element ตัวนี้ทำหน้าที่อะไร ตัวอย่างเช่น: <H1> ย่อมาจาก Heading ทำหน้าที่เป็นหัวข้อเนื้อหา แต่ในกรณี ที่เราต้องการเพิ่มเติมลักษณะพิเศษให้กับ HTML element เราจะใช้ Attribute ซึ่งจะอยู่ใน Start tag เสมอ HTML self-closing elementSelf-closing elementSelf-Closing element คือ HTML Element ที่ไม่ต้องมี Close tag เป็นองค์ประกอบ โครงสร้าง HTMLHTML structureจากรูปจะเห็นได้ว่า โครงสร้าง HTML มีรูปแบบเป็นลำดับชั้น หรือที่เรียกว่า Hierachy โดยวงนอกสุดจะเริ่มจากการที่มี <html> คลุม 2 tag อื่นอยู่คือ
โดยจะประกอบไปด้วย tag จำนวนมาก ตัวอย่างเช่น <meta>, <title>, <viewport> รวมทั้งเป็นส่วนที่ใช้เขียน CSS ใน <style> 2. <body> ทำหน้าที่แสดงข้อมูลเนื้อหาให้แก่ผู้ใช้ Website โดยจะประกอบไปด้วย tag จำนวนมาก ตัวอย่างเช่น <h2>, <p>, <input> รวมทั้งเป็นส่วนที่ใช้เขียน JavaScript ใน <script> CSS selector คือสำหรับการเริ่มเขียน HTML ควรจะรู้ CSS เล็กน้อยมาก่อน เพื่อให้สามารถใช้งานบาง Attribute ได้ เราจะเขียน Selector ใน <style> เสมอนะ Selector StructureCSS Selector คือ การเลือก HTML element เฉพาะเจาะจงเพื่อการตกแต่งด้วย CSS โดยจะประกอบ 3 องค์ประกอบหลักคือ
Selector มีหลายประเภทมาก วันนี้แอดจะมาแนะนำ 5 simple selector ที่นิยมใช้กัน Simple Selector
แอดคิดว่าตอนนี้ เพื่อนๆ น่าจะเข้าใจ โครงสร้าง HTML,CSS ไปบ้างแล้ว ถ้าอย่างนั้น เราไปบทถัดไปกันเลยดีกว่า !!! 02. Website ทำงานยังไงในบทนี้จะพูดถึงการทำงานของ Website ว่ากว่าจะมีหน้าแต่ละหน้าให้เราได้ใช้กัน ต้องผ่านอะไรมาบ้างClient และ Server คืออะไร ส่งข้อมูลอะไรให้กัน วันนี้เราจะมาหาคำตอบกันครับURL คืออะไรก่อนที่จะเข้าใจการทำงาน เราต้องมารู้จัก URL(Uniform Resource Location) กันซะก่อน URL คือที่อยู่ website บนโลกอินเทอร์เน็ต เปรียบเทียบได้กับ ที่อยู่บ้านของเรานั่นเอง URL Structureโดยจะประกอบไปด้วย
คำศัพท์ที่ควรรู้
HTTP ต่างกับ HTTPS อย่างไรHTTP และ HTTPS ต่างเป็น Protocol ที่มีหน้าที่ในการส่งข้อมูลบน website แต่สิ่งทำทำให้ HTTPS แตกต่างจาก HTTP คือการมีในส่วน Encrytion ทำให้การส่งข้อมูลมีความปลอดภัยที่มากกว่า HTTPS ใช้ในการส่งข้อมูลจำพวก Password, Credit card เป็นต้น การทำงานของ Websiteการทำงาน Websiteมีขั้นตอนดังนี้ : 1.การทำงานของ Website จะเริ่มจากที่เราค้นหา URL ใน Browser ก่อน 2. หลังจากนั้นตัว Browser หรือ Client จะทำการส่ง HTTP Request ไปที่ Server เพื่อร้องขอข้อมูลหน้า Website HTTP Request3. Server ได้รับ Request และทำการค้นหา Website
4. Client ได้รับ Respond และทำการตรวจสอบ HTML document ตั่งแต่ตัวหัวจรดเท้า เพื่อหาพวก file อื่นๆ เช่น CSS file, รูปภาพ, วิดีโอ แล้วทำการส่ง HTML request ในแต่ละ file พร้อมกันไปยัง Server อีกทีซึ่งเรียกกันว่า DOM ทำให้องค์ประกอบของ Website จะปรากฎขึ้นมาบน Browser เร็วมาก 5. เมื่อ Client มี File เพียงพอแล้ว ก็จะแสดงผล Website บน Browser ทันที แสดงผล Website Chrome dev tool คือะไรChrome dev tool คือเครื่องมือที่นักพัฒนาใช้ในการตรวจสอบและทดสอบการทำงานของ Website ซึ่งแต่ละ Browser ก็จะมี dev tool เป็นของตัวเอง ตัวอย่างเช่น Mozilla dev tool เป็นต้น วันนี้แอดเลือก Chrome เพราะคิดว่าเพื่อนๆ น่าจะนิยมใช้ Browser นี้มากที่สุด Chrome dev toolวิธีเปิด Chrome dev toolการเปิด Chrome dev tool มี 4 วิธี
เพื่อนๆ สามารถปรับตำแหน่งของ Chrome dev tool ได้ด้วยการคลิกปุ่ม 3 จุด -> เลือก Dock side ขนาดต่างๆ การใช้งาน Chrome dev tool1. NetworkTab แรกที่จะพูดถึงกันคือ Network นักพัฒนาจะใช้ Tab นี้ในการตรวจสอบ HTTP request และ Respond ที่เราได้เรียนในบทที่แล้ว Network Chrome dev toolถ้ายังไม่มีค่าอะไรปรากฎขึ้นมา เพื่อนๆสามารถกด Refresh หน้า Website แล้วตารางข้างล่างจะปรากฎขึ้นใน Network ขึ้นมา ซึ่งจะมีข้อมูลที่แสดงผลออกมาตามนี้ Network Chrome dev tool2. Elementนักพัฒนาใช้เพื่อตรวจสอบ HTML document รวมทั้งทดลองปรับแก้ไข code ในส่วนต่างๆ Element Chrome dev toolเพื่อนๆ สามารถลองกด ปุ่ม Checkbox ของ CSS ทางด้านขวาได้ แล้วลองสังเกตุการณ์เปลี่ยนแปลงดู รวมทั้ง สามารถตรวจสอบ code เฉพาะเจาะจงขององค์ประกอบบนหน้า Website ได้ด้วยการคลิกที่ “Select an element to inspect” ด้านซ้ายบน ตามรูป 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 ระบบได้แก่
สามารถดาวน์โหลดเพื่อติดตั้งได้ที่ Visual studio code เลย วิธีติดตั้ง VS code
สำหรับใครที่ไม่แน่ใจว่า Window เรามัน 32 หรือ 64 bit สามารถเช็คได้ตามขั้นตอนล่างนี้เลย
2. กดติดตั้ง File ที่ ดาวน์โหลดมา เลือก accept the agreement และ กด “Next” 3. เลือก “Create a desktop icon” และ “Add to PATH(requires shell restart)” 4. สุดท้ายคลิก Install และ รอ จนติดตั้งสำเร็จ VS code extensionExtension คือส่วนเสริมของ Visual studio code ที่จะช่วยให้การใช้งานของพวกเราง่ายขึ้น และ productive เราสามารถค้นหาและติดตั้ง Extension ได้ในส่วน Navbar ของ VS code หรือกด (Ctrl+Shift+X) ในการเริ่มพัฒนา พื้นฐาน HTML จำเป็นต้องใช้ 3 extension นี้มาก 1. Live ServerLive Serverเป็น Extension ที่จะช่วยให้เราสามารถ launch ตัว local Server ได้อย่างง่ายดาย หรือให้พูดง่ายๆ คือสามารถสร้าง Web page ได้ ใน server ของตัวเอง เราสามารถอัพเดต code ที่เปลี่ยนไปได้แบบ real-time เพียงกด save หรือ Ctrl + s ใน VS code 2. PrettierPrettierเป็น Extensionช่วยจัดรูปแบบ Code ให้อ่านง่ายขึ้น 3. Auto Rename TagAuto Rename TagExtension ที่ทำให้เราสามารถแก้ไข Start tag และ End tag ใน HTML element ได้แบบอัตโนมัติ Auto Rename tagมาเริ่มสร้าง HTML Project กันเถอะ
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 Server05. พื้นฐาน HTMLในบทนี้จะพูดถึง HTML element ที่จำเป็นต้องรู้ในการพัฒนา Website พร้อมทั้งการตกแต่งด้วย Style attribute เล็กน้อยHTML Element ที่ควรรู้1. HeadingHeading 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 example2. ParagraphParagraph tag ใช้ในการแสดงเนื้อหาต่างๆ จะเขียนอยู่ในรูป <p>…</p> See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0 3. FormattingFormatting tags จะใช้ในการตกแต่งข้อความต่างๆ ซึ่งมีหลายรูปแบบให้เลือกใช้กัน See the Pen Untitled by Tanapon Wijanpreecha (@tanapon-wijanpreecha) on CodePen.0 4. HyperlinkHyperlink 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สำหรับใครที่อยากให้ 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. CommentComment คือการอธิบาย 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
บทความที่เกี่ยวข้อง
Html คืออะไร ใช้งานอย่างไรHTML ย่อมาจาก HyperText Markup Language เป็น ภาษาคอมพิวเตอร์ที่ใช้สร้างหน้าเว็บ (Web Page) ในรูปแบบของ ไฟล์ HTML (คือไฟล์ที่มีนามสกุลเป็น .htm หรือ .html) ซึ่งมีเว็บเบ ราว์เซอร์ (Web Browser) เป็นโปรแกรมที่ใช้แปลงไฟล์ HTML เพื่อ แสดงผลในรูปของหน้าเว็บ
Html คืออะไร มีประโยชน์อย่างไรHTML เป็นภาษามาตรฐานที่ใช้พัฒนาเอกสารในรูปแบบของเว็บเพจโดยสามารถนำเสนอข้อมูลตัวอักษร ภาพเสียง และไฟล์ในรูปแบบอื่นๆ บนระบบเครือข่ายอินเทอร์เน็ต การเรียกใช้เอกสารเหล่านี้ทำได้โดยการใช้โปรแกรมเว็บบราวเซอร์
Tag HTML มีอะไรบ้างรวม 5 HTML Tag เบื้องต้น ที่คนทำคอนเทนต์บนเว็บต้องรู้จัก. 1. heading – ไม่ใช่เพื่อขนาดตัวอักษร แต่ดีต่อใจกับ SEO. ... . 2. paragraph – โปรแกรมจะรู้ทันทีว่าตรงนี้คือย่อหน้าใหม่ ... . 3. a href – ใส่ลิงก์ในข้อความ ทำได้มากกว่าที่คิด ... . 4. img – รูปภาพสื่อความหมาย ใช้ข้อความอธิบายได้ด้วย ... . 5. svg – วาดภาพด้วย Code โคตรเล็ก โคตรชัด. HHTP เเละ html คืออะไรคำที่ศัพท์ที่เกี่ยวข้องกับ HTML
WWW ย่อจาก World Wide Web เป็นการสื่อสารด้วยการเชื่อมโยงเครือข่ายข่าวสารแบบใยแมงมุม(Web) แสดงผล ด้วยเอกสารไฮเปอร์เท็กซ์ HTTP ย่อมาจาก Hypertext Transfer Protocol เป็นรูปแบบการสื่อสารที่ใช้ในการรับส่งข้อมูลไฮเปอร์เท็กซ์ในเครือข่าย อินเทอร์เน็ต
|