HTML and CSS

Table of Contents

Text Editor

[toc] [wiki]

Text editor เป็นโปรแกรมที่ใช้สำหรับการแก้ไขข้อความ (edit text) ซึ่ง text editor แต่ละตัวจะมีความสามารถเพิ่มเติมที่อาจจะแตกต่างกันไป เช่น Syntax Highlighting

การเขียนโปรแกรมภาษาต่าง ๆ เป็นการ edit text ให้อยู่ใน syntax ของภาษานั้น ๆ แล้วไฟล์นั้นจะถูกอ่านด้วยโปรแกรมเช่น compiler หรือ interpreter เพื่อนำไปใช้งานต่อไป

การเขียนเว็บไซต์อย่างง่าย คือการ edit text ให้อยู่ใน syntax ของภาษา HTML แล้วนำไฟล์นั้นไปให้ browser อ่าน

ตัวอย่างโปรแกรม text editor คือ

Browser Developer Tools

[toc]

Browser ส่วนมากจะมี developer tool ให้ใช้ เช่น Chrome สามารถคลิกขวาบนเว็บไซต์แล้วเลือก Inspect ได้

ซึ่งจะมี tabs ที่มีประโยชน์หลายอย่าง เช่น

Modern Website

[toc]

เว็บไซต์สมัยใหม่จะประกอบไปด้วยไฟล์สามประเภทหลัก ๆ คือ

HTML (HyperText Markup Language)

เป็นภาษา markup ที่เอาไว้กำหนดโครงสร้างและหมายความของเนื้อหาบทเว็บไซต์ เช่น การกำหนดข้อความในแต่ละพารากราฟ หัวข้อ ตารางข้อมูล หรือการใส่วิดีโอ รูปภาพ ในหน้า ๆ หนึ่ง

ลักษณะของภาษา HTML จะเป็นดังรูป คือ ประกอบไปด้วย

ทั้งหมดจะถูกเรียกโดยรวมว่าเป็น element ซึ่งใน element สามารถระบุ attribute เพิ่มได้ดังรูป

ตัวอย่างนี้ (สามารถคลิกขวาแล้ว Save link as เพื่อดูไฟล์ได้) มีโครงสร้าง tags เบื้องต้นดังต่อไปนี้

  1. โหลดไฟล์ตัวอย่าง แล้วเปิดด้วย text editor และ browser พร้อม ๆ กัน
  2. ลอง edit text แล้ว save และ refresh browser
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Title</title> </head> <body> <header> <h1>Header</h1> </header> <article> <section> <h2>Section 1</h2> <ul> <li>list item 1</li> <li>list item 2</li> </ul> </section> <section> <h2>Section 2</h2> <p>paragraph</p> <p> paragraph <a href="https://www.google.com" target="_blank">link</a> </p> </section> </article> </body> <footer>Footer</footer> </html>

สามารถศึกษาเกี่ยวกับ HTML เพิ่มเติมได้ที่ What is HTML?

CSS (Cascading Style Sheets)

เป็นภาษาที่ใช้กำหนดกฏในการแต่งสไตล์ต่าง ๆ ให้กับเนื้อหา HTML เช่น การกำหนดสีพื้นหลัง ฟ้อนท์ หรือการแบ่งเนื้อหาในอยู่ในแนวหลายคอลัมน์

ลักษณะของภาษา CSS จะเป็นดังรูป คือ ประกอบไปด้วย

สามารถลองลบ css บนเว็บไซต์ได้ใน (Inspect > Sources > static)

ศึกษาเกี่ยวกับ CSS เพิ่มเติมได้ที่ What is CSS?

JavaScript

เป็นภาษาที่ใช้ในการทำ script ซึ่งจะทำให้สร้างเนื้อหาที่มีการอัพเดตแบบ dynamic ควบคุมการเล่นไฟล์ ทำอนิเมชัน และอื่น ๆ ได้อีกมากมาย ศึกษาเกี่ยวกับ JavaScript ได้ที่ What is JavaScript?

สามารถลองทดสอบ block JavaScript บนเว็บต่าง ๆ เช่น YouTube (ตัวอย่าง) ดูได้

Figma to HTML

[toc]

steps

  1. เตรียม design ที่พร้อมใช้งาน เช่น Example Portfolio Figma
  2. สร้าง html file พร้อมตั้งชื่อ เช่น portfolio.html แล้วใส่เนื้อหากับโครงสร้าง tags ต่าง ๆ ให้ครบที่สุด
  3. สร้าง css file พร้อมตั้งชื่อ เช่น styles.css เพื่อลองตกแต่ง โดยเชื่อมเข้า html ดังนี้
    1. นำไฟล์ไว้ที่โฟลเดอร์เดียวกัน
    2. ใน portfolio.html เพิ่ม <link href="styles.css" rel="stylesheet" /> ภายใน tag <head> แล้ว save file
    3. ใน styles.css ลองเพิ่ม style rule เช่น p { color: green; } แล้ว save file
    4. ลอง refresh หน้า browser