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 นั่นเอง ซึ่งบางครั้งอาจจะมีทั้ง tag ที่ต้องการทั้ง open tag, close tag แยกกัน แต่ก็มีบางอันเช่นกัน ที่เป็นทั้ง open tag และ close tag ในเวลาเดียวกัน เช่น <img/> เรามายกตัวอย่างเป็น p tag หรือ paragraph 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>

bacsic tag

tag พื้นฐานที่เราควรจะรู้จักเอาไว้มีหลักๆ ดังนี้

<head> โดยปกติแล้วเราจะเห็น tag นี้อยู่ด้านบนสุดของไฟล์ HTML เลย เป็น tag ที่เอาไว้เก็บข้อมูลต่างๆของเว็บไซต์ เช่น title, style sheet(css)

ยกตัวอย่างเช่น ถ้าเราอยากเปลี่ยน title ของเว็บไซต์ของเรา

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eve's website</title> // เปลี่ยนชื่อตรงนี้ได้เลย
  	<link rel="stylesheet" href="index.css" />
</head>

<body>
    
</body>

</html>

แบบนี้ชื่อเว็บไซต์เราก็จะเปลี่ยนไปแล้วววว

<body> tag นี้สำคัญมากๆ เพราะเป็น tag ที่รวม content ทุกอย่างของเว็บไซต์เราไว้ในนี้เลย ทั้ง paragraph, image, tables, header, div ซึ่ง content ทุกอย่างที่อยู่ภายใน <body> จะโชว์ให้ผู้ใช้งานเห็นทั้งหมดเลย
<div> tag นี้เปรียบเสมือนการที่เราสร้างกล่องๆนึงเลย เอาไว้สำหรับวาง layout หน้าเว็บ ใน tag นี้จะมี attribute หลักๆก็คือ ~~class/~~class/ id นั่นเอง เอาไว้ระบุว่า tag นี้ใช้เพื่ออะไร และเราสามารถนำชื่อ ~~class/~~class/id ของ tag นี้ไป style เว็บไซต์ต่อ ใน css

  <div class="main">
        <div class="main-container">
            <div class="main-content">
                <p>MAIN CONTENT</p>
            </div>
            <div class="main-img-container">
                <img src="path" alt="describe img">
            </div>
        </div>
 </div>

<h> หรือเรียกอีกชื่อว่า heading tag เป็น tag ที่ใช้เมื่อเราต้องการให้คำๆนั้นเป็นหัวข้อ ซึ่งจะมีทั้งหมด 6 ตัว เรียงตั้งแต่ h1 - h6 เลย

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

ลองดูขนาดตัวอักษรแต่ละตัวแล้วเอาไปปรับใช้กับหน้าเว็บตัวเองได้เลยย

<img> หรือก็คือ tag ที่เอาใส่ใส่รูปภาพนั่นเองง มี attribute หลักๆเลย คือ src -> source of img, alt -> alternative information

<img src="assets/logo.png" alt="logo of jpc camp" />

ทุกครั้งที่ใช้ <img/> อย่าลืมใส่ alt attribute เด็ดขาดเลย เพราะตัวนี้จะช่วยบอกผู้ใช้งานว่ารูปภาพรูปนี้คืออะไร เมื่อเกิดเหตุขัดข้องหากเว็บไซต์ไม่สามารถโชว์รูปภาพให้กับผู้ใช้เห็นได้

<iframe> เป็น tag ที่จะใส่ website ไว้ข้างในอีกที

<iframe src="https://jpc16.sit.kmutt.ac.th/" width="1024" height="900"></iframe>

จากตัวอย่างนี้เราใส่เว็บไซต์ JPC เข้าไป ในเว็บไซต์ของเราก็จะมีเว็บ JPC อยู่ข้างในนั่นเอง

<strong> เป็น tag สำหรับการ style text นั่นเอง เปรียบเสมือนเราใส่ bold ให้กับ text ของเรา
<em> tag นี้ก็เป็นอีก tag สำหรับการ style text แต่อันนี้จะเป็นการทำให้ text ของเรามีความเอียง หรือ italic นั่นเอง
<a> เป็น tag สำหรับการใส่ link ไปยังเว็บไซต์อื่น อีเมล์ ไฟล์ นอกจากนี้ยังสามารถ link ไปยังหน้าอื่นๆของเว็บไซต์เราได้อีกด้วย โดยจะมี attribute หลักเลยก็คือ href นั่นเอง

 <p>You can reach JPC Camp at:</p>
    <ul>
        <li><a href="https://example.com">Website</a></li>
        <li><a href="mailto:[email protected]">Email</a></li>
        <li><a href="tel:+123456789">Phone</a></li>
    </ul>

ถ้าหากว่าเราใช้ href attribute ตัวอักษรนั้นจะมี underline อยู่ และหากเราเอาเมาส์ไปชี้ จะทำให้เรารู้ได้ทันทีว่าข้อความนั้นสามารถกดได้