บล็อค.
ข้อมูลต่างๆที่มีประโยชน์ เกี่ยวกับแพลตฟอร์มดิจิตอล และทำความรู้จักแอพพลิเคชั่นที่บริษัทเราทำขึ้น
Back
ภาษา HTML และ CSS เริ่มต้น
ภาษา HTML และ CSS เริ่มต้น
UX 13 Nov 2015 Wittawas Suwannawit
เว็บไซต์ที่เราเห็นกันทั่วไปนั้น ถูกสร้างด้วยภาษาคอมพิวเตอร์อย่างน้อยสองภาษา นั่นคือ HTML และ CSS แต่ละภาษาก็มีหน้าที่และหน้าตาต่างกัน เป็นอย่างไร ไปดูกันครับ
HTML ย่อมาจาก Hypertext Markup Language
หน้าที่ของ HTML คือเป็นโครงสร้างของเนื้อหา(Content Structure)ของเว็บไซต์แต่ละหน้า นอกจากนี้ทำให้ผู้อ่านเข้าใจได้ด้วยว่าแต่ละส่วนทำหน้าที่หรือมีความหมาย(Meaning) อะไร เช่น หัวข้อ(Heading), เนื้อหาแต่ละย่อหน้า(Paragraphs), รูปภาพ(Image)และอื่นๆ
CSS ย่อมาจาก Cascading Style Sheets
หน้าที่ของ CSS คือทำให้แต่ละส่วนมีหน้าตา(Appearance)ตามที่เราต้องการ เช่น หัวข้อมีขนาดใหญ่กว่าปกติสองเท่า มีสีเป็นสีเขียว หรือก็คือเป็นส่วนจัดการเนื้อหาทำให้ดูน่าสนใจยิ่งขึ้นนั่นเอง เราเรียกว่า “Presentation Language”
ส่วนประกอบของ HTML
ประกอบด้วยส่วนต่างๆ 3 ส่วน ดังนี้
- Element : ชิ้นส่วนของโครงสร้างเนื้อหา ในเนื้อหาจะประกอบด้วยหลายๆ element รวมกัน จากตัวอย่าง a คือชื่อของ element นี้
- Attribute : รายละเอียดเพิ่มเติมของ element นั้น
- Tag : ส่วนที่ห่อหุ้มเนื้อหาแบ่งเป็น Opening tag และ Closing tag ในบาง element อาจจะไม่มี Closing tag
โครงสร้างของ HTML
- Document Type : ส่วนนี้จะระบุว่าเอกสารชิ้นนี้เป็นประเภทอะไร เวอร์ชั่นเท่าไร จากตัวอย่างก็คือ HTML เวอร์ชั่นล่าสุด(HTML5)
- Head : จะเก็บข้อมูลเพิ่มเติมของเอกสารชิ้นนี้ โดยใช้ <meta> และยังมี Title ที่จะแสดงในส่วนของ Title Bar และการเชื่อม(Link)กับเอกสารอื่นๆก็ใส่ลงในส่วนนี้
- Body : เนื้อหาทั้งหมดที่ผู้ชมเว็บมองเห็นจะอยู่ในส่วนนี้ ไม่ว่าจะเป็นหัวข้อ เนื้อหา รูปภาพต่างๆ
ส่วนประกอบของ CSS
ประกอบด้วยส่วนต่างๆ 3 ส่วน ดังนี้
- Selector : บอกว่าไปเลือกที่ส่วนไหนของ HTML เพื่อมากำหนดสไตร์ มีวิธีเลือก 3 แบบ
- Type Selector: เลือกจากชื่อของ Element
- Class Selector: เลือกจากคลาสที่ตั้งให้ Element
- ID Selector: เลือกจากไอดีที่ตั้งให้ Element
*แต่ละแบบมีวิธีการเลือกใช้ที่แตกต่างกันไป ครั้งต่อไปจะมาแนะนำให้รู้จากแต่ละแบบครับ
- Property: ชื่อค่าของสไตร์ที่ต้องการกำหนด จากรูปคือ property ชื่อ color หรือต้องการจะแก้ไขสีนั่นเอง
- Value: ค่าที่ต้องการกำหนด
การเชื่อมไฟล์ HTML และ CSS เข้าด้วยกัน
สามารถใช้ Element ที่ชื่อ link เพิ่มลงไปในระหว่าง <head> ของไฟล์ HTML โดยมี attribute ชื่อ rel(Relation) มีค่าเป็น ‘stylesheet’ และ href(Hypertext Reference) มีค่าเป็น ‘ตำแหน่งของไฟล์ CSS’ เท่านี้ทั้งสองไฟล์ก็ถูกเชื่อมเข้าหากันแล้ว
สำหรับบทความนี้ก็ขอจบเพียงเท่านี้ บทความต่อไปเรามารู้จัก HTML และ CSS ให้มากขึ้นกัน ขอบคุณครับ
Related Content
การรีเซ็ต CSS และ HTML Semantics