What is HTML, CSS, JS?
จากบทที่แล้วเราก็ได้รู้จัก IDE ที่ช่วยเราเขียนเว็บแล้วเนอะ ตอนท้ายๆ น้องๆอาจจะสงสัยว่า แล้วตัว HTML,CSS มันคืออะไร แต่ละตัวใช้ทำอะไรบ้าง ในบทนนี้เราจะมาทำความรู้จักกับ HTML, CSS กันเลยยย
What is Frontend and Backend?
แต่ขอย้อนกลับไปนิดนึง หลายๆคนอาจจะได้ยินความว่า Frontend, Backend กันมาบ้างเนอะ ในการพัฒนาเว็บ เราจะแบ่งออกเป็น 2 ฝั่ง
- Frontend: หรือก็คือฝั่งหน้าบ้านซึ่งเป็นส่วนที่ทุกคนสามารถมองเห็น และสามารถมี interact กับหน้าเว็บของเราได้
- Backend: หรือก็คือฝั่งหลังบ้าน เป็นส่วนของการทำงานเบื้องหลังของเว็บไซต์เรา เช่นการดึงข้อมูลมาจากฐานข้อมูล เป็นต้น
และตัว HTML, CSS ที่เราจะได้เรียนกันต่อจากนี้เป็นส่วนพื้นฐานและส่วนที่สำคัญที่สุดของฝั่ง frontend นั่นเองง
จริงๆแล้วตัว Javascript(JS) เป็นพื้นฐานของ frontend เช่นเดียวกันกับ HTML, CSS แต่ในครั้งนี้อาจจะกล่าวถึงมากนัก
Frontend Languages
HTML/CSS/Javascript เป็นส่วนพื้นฐานที่สำคัญที่สุดของทาง Frontend ซึ่งแต่ละตัวนั้นก็จะมีการใช้แตกต่างกันไปตามการ functional ของแต่ละตัว สามตัวนี้จะถูกใช้ในการออกแบบเว็บไซต์นั่นเองง อาจจะใช้ในการสร้างฟอร์ม การตกแต่งหน้าเว็บ เป็นต้น
an overview:
- HTML: เป็นโครงสร้างพื้นฐานของเว็บไซต์ และเป็นภาษาที่ใช้ในการสร้างและปรับรูปแบบเนื้อหาของเว็บไซต์
- CSS: เป็นภาษาที่ใช้ในการกำหนดรูปแบบ(style) ให้กับ HTML
- Javascript: เป็นภาษาที่ช่วยเพิ่มความ active ให้กับเว็บไซต์ เพื่อให้สามารถตอบสนองต่อผู้ใช้งานและจัดการกับ event ต่างๆบนหน้าเว็บไซต์ได้
What is HTML?
HTML ถือเป็นส่วนสำคัญที่สุดของทุกๆเว็บไซต์ และ HTML ย่อมาจาก HyperText Markup Language ซึ่งเป็นหนึ่งในภาษาพื้นฐานในการสร้างเว็บไซต์ HTML นั้นไม่ใช่ Programming Language นะ แต่เป็น Markup Language หรือก็คือเป็นภาษาที่เน้นไปที่การวาง structure หน้าเว็บ และการ present content ให้กับผู้ใช้เห็น เพื่อให้ผู้ใช้เข้ามาในเว็บไซต์แล้วรู้สึกว่า content มันอ่านและเข้าถึงได้ง่าย ส่วน Programming Language คือภาษาที่เน้นไปที่การเขียนเพื่อแก้ปัญหานั้นๆนั่นเอง
หลายๆคนอาจจะยังไม่เห็นภาพว่า HTML จะมีหน้าตาเป็นยังไง เราลองไปดูตัวอย่างกันก่อน เปิด VS Code แล้วลองทำไปพร้อมๆกันได้เลย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>ให้น้องๆลองสร้างโฟลเดอร์เปล่าๆให้มาสักอัน แล้วเปิดโฟลเดอร์นั้นได้เลย หลังจากนั้นลองสร้างไฟล์ index.html กันเลย จากให้ให้น้องๆ พิมพ์คำว่า html:5 น้องๆก็จะได้โค้ดหน้าตาแบบด้านบนเลย
เอาล่ะ เรามาอธิบายสิ่งที่เป็นพื้นฐานสุดๆของ HTML กันก่อนดีกว่า
Tag vs Element vs Attribute in HTML
เรามารู้จักกันก่อนเลย ว่าแต่ละตัวคืออะไรใน HTML เพื่อให้เห็นภาพลองดูภาพด้านล่างกัน
HTML Tag: เป็นส่วนหัวท้ายของ HTML element ตัว tag นั้นจะเริ่มต้นด้วย < และปิดท้ายด้วย > เสมอ อะไรก็ตามที่เขียนในรูปของ <> จะเรียกมันว่า Tag นั่นเอง
ยกตัวอย่างเช่น p tag ส่วน open tag คือ <p> และส่วน close tag คือ </p>
<p></p>HTML Element: ประกอบไปด้วย open tag, close tag, content ต้องมีทั้งสามตัวนี้ เราถึงจะเรียกมันว่า Element นั่นเอง
ยกตัวอย่างเช่น p tag มี open tag คือ <p> close tag คือ </p> และมี conent ข้างใน tag อีกด้วย
<p>This is the content</p>HTML Attribute: ตัวนี้จะเป็นตัวที่กำหนด charateristic ของ HTML Element นั้นๆ หรือก็คือการ style นั่นเอง โดยส่วนใหญ่แล้วจะถูกวางอยู่ใน open tag
ยกตัวอย่างเช่น p tag ที่มี open tag <p> และ close tag </p> อีกทั้งยังมีการ style element นั้นด้วยการทำให้ข้อความนั้นอยู่ตรงกลางอีกด้วย
<p align="center">This is the content</p>