Tag: สร้างเว็บไซต์

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

การเรียกใช้งาน JavaScript

ในการเขียนโค้ด JavaScript สิ่งที่สำคัญคือการเลือกตำแหน่งที่เหมาะสมในการวางโค้ด เพื่อให้สคริปต์ทำงานตามที่ต้องการ ในบทนี้เราจะอธิบายถึง 3 ตำแหน่งหลักที่สามารถใส่ JavaScript ได้ใน HTML

Internal JavaScript (เขียนภายในไฟล์ HTML)
External JavaScript (แยกไฟล์ JavaScript ออกมา)
In-line JavaScript (เขียนใน Attribute ของ HTML Tag)

1. Internal JavaScript (ภายในไฟล์ HTML)

การเขียนโค้ด JavaScript ภายในไฟล์ HTML สามารถทำได้โดยวางโค้ดภายในแท็ก <script> โดยทั่วไปนิยมวางไว้ที่ส่วน <head> หรือท้าย <body> ของเอกสาร HTML

ตัวอย่างการใส่ใน <head>

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <script>
        document.write("Hello from the Head section!");
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

CSS Box Model คือหนึ่งในแนวคิดพื้นฐานที่สุดของการออกแบบเว็บไซต์ด้วย CSS ซึ่งใช้กำหนดลักษณะของการจัดวางองค์ประกอบต่างๆ ในหน้าเว็บ โดยอธิบายถึงพื้นที่ขององค์ประกอบแต่ละชิ้นว่าแบ่งออกเป็นส่วนต่างๆ อย่างไร

โครงสร้างของ CSS Box Model ประกอบไปด้วย 4 ส่วนหลัก ๆ

Content (เนื้อหา)

เป็นส่วนที่บรรจุเนื้อหาจริง ๆ ขององค์ประกอบ ไม่ว่าจะเป็นข้อความ รูปภาพ หรือเนื้อหาอื่นๆ ขนาดของส่วนนี้จะถูกกำหนดโดย width และ height ขององค์ประกอบ

ตัวอย่าง

div {
  width: 200px;
  height: 100px;
}

Padding (ช่องว่างระหว่างเนื้อหาและขอบ)

เป็นพื้นที่ระหว่างเนื้อหากับขอบขององค์ประกอบ กำหนดช่องว่างภายในขององค์ประกอบ (ยิ่งค่า padding มากขึ้น เนื้อหาจะยิ่งห่างจากขอบมากขึ้น)

สามารถกำหนด padding ให้เฉพาะด้านใดด้านหนึ่งได้ เช่น padding-top, padding-right, padding-bottom, และ padding-left

การใช้งาน CSS Height Width

CSS height และ width เป็นคุณสมบัติที่ใช้ในการกำหนดขนาดขององค์ประกอบ (elements) บนหน้าเว็บ โดยจะควบคุมความสูงและความกว้างของกล่อง (box) ขององค์ประกอบต่างๆ เช่น <div>, <img>, <p>, ฯลฯ

Width (ความกว้าง)

width ใช้ในการกำหนดความกว้างขององค์ประกอบ โดยค่าเริ่มต้นจะไม่รวม padding, border, และ margin หากไม่ได้กำหนด box-sizing: border-box;

รูปแบบทั่วไป

.element {
  width: 300px;
}

หน่วยที่ใช้

px (พิกเซล) เป็นหน่วยที่ใช้บ่อยที่สุด มีความแม่นยำในระดับหน้าจอ
% (เปอร์เซ็นต์) ใช้ในการกำหนดความกว้างเป็นเปอร์เซ็นต์ของพ่อแม่ (parent element)
vw (viewport width) อ้างอิงตามความกว้างของ viewport
em หรือ rem อ้างอิงตามขนาดฟอนต์ปัจจุบัน

การใช้งาน CSS Padding

Padding ใน CSS คือระยะห่างระหว่าง เนื้อหา (content) กับ ขอบ (border) ขององค์ประกอบ (element) มันจะเพิ่มพื้นที่ภายในองค์ประกอบ แต่ไม่กระทบกับขนาดความกว้างหรือความสูงขององค์ประกอบ ยกเว้นในกรณีที่มีการกำหนดอย่างชัดเจน Padding ช่วยทำให้เนื้อหาดูไม่เบียดจนเกินไป

รูปแบบการใช้ Padding

คุณสามารถกำหนดค่า Padding ได้หลายรูปแบบดังนี้

ค่าเดียว

1	`padding: 20px;`

การกำหนดค่าเดียวนี้ จะใช้กับทุกด้าน (บน, ขวา, ล่าง, ซ้าย) ขององค์ประกอบ

สองค่า

1	`padding: 20px 10px;`

20px ใช้กับด้านบนและด้านล่าง

10px ใช้กับด้านขวาและด้านซ้าย

การใช้งาน CSS Margin

CSS Margin คือคุณสมบัติใน CSS ที่ใช้ในการสร้างช่องว่างรอบๆ ขอบขององค์ประกอบ (Element) หรือที่เรียกว่า “ระยะห่างภายนอก” (outer spacing) ระหว่างองค์ประกอบในหน้าเว็บ การใช้ margin จะช่วยในการจัดวางองค์ประกอบให้ดูเรียบร้อยและเหมาะสมยิ่งขึ้น

ลักษณะการใช้งานของ CSS Margin

คุณสามารถกำหนดค่าของ margin ได้หลายวิธี โดยสามารถตั้งค่าให้กับทุกด้านขององค์ประกอบ (ด้านบน, ด้านขวา, ด้านล่าง, และด้านซ้าย) พร้อมกันหรือแยกกันได้ดังนี้

1. ใช้คุณสมบัติเดียว margin เพื่อกำหนดให้ทุกด้านพร้อมกัน

.element {
  margin: 20px;
}

ในกรณีนี้ ทุกด้านขององค์ประกอบจะมีระยะห่าง (margin) 20px ทั้งด้านบน (top), ด้านขวา (right), ด้านล่าง (bottom), และด้านซ้าย (left)

การใช้งาน CSS Border

CSS Borders เป็นคุณสมบัติที่ใช้ในการกำหนดขอบขององค์ประกอบ (element) ในหน้าเว็บ เราสามารถปรับแต่งลักษณะของขอบได้หลายแบบ ทั้งความหนา สี และสไตล์

โครงสร้างของ CSS Borders

การกำหนดขอบใน CSS สามารถระบุได้ผ่านคุณสมบัติหลักๆ ดังนี้

border-width กำหนดความหนาของขอบ

border-style กำหนดสไตล์ของขอบ เช่น เส้นทึบ, เส้นประ เป็นต้น

border-color กำหนดสีของขอบ

หรือสามารถใช้ border เพียงตัวเดียวในการกำหนดทั้ง 3 ค่าพร้อมกัน

ตัวอย่างการกำหนด border แบบละเอียด

div {
  border-width: 2px;    /* ความหนาของขอบ */
  border-style: solid;  /* สไตล์ของขอบ */
  border-color: red;    /* สีของขอบ */
}

การใช้งานพื้นหลัง CSS

การจัดการพื้นหลังใน CSS เป็นสิ่งสำคัญมากในการออกแบบเว็บไซต์ คุณสามารถกำหนดสีพื้นหลังหรือรูปภาพพื้นหลังให้กับองค์ประกอบได้ ซึ่งช่วยให้การแสดงผลของเว็บไซต์ดูสวยงามและน่าสนใจมากขึ้น เราจะมาอธิบายคุณสมบัติและวิธีการใช้งานพื้นหลังใน CSS อย่างละเอียด ดังนี้

สีพื้นหลัง background-color

background-color ใช้เพื่อกำหนดสีพื้นหลังขององค์ประกอบ สามารถใช้สีในรูปแบบต่าง ๆ เช่น ชื่อสี รหัสสีแบบ Hex, RGB, RGBA, HSL หรือ HSLA

ตัวอย่าง

/* ใช้ชื่อสี */
div {
  background-color: blue;
}
 
/* ใช้รหัสสีแบบ Hex */
div {
  background-color: #3498db;
}
 
/* ใช้ค่าสีแบบ RGB */
div {
  background-color: rgb(52, 152, 219);
}
 
/* ใช้ค่าสีแบบ RGBA (รวมความโปร่งใส) */
div {
  background-color: rgba(52, 152, 219, 0.7);
}

การใช้สี CSS

CSS สี (Color) เป็นหนึ่งในคุณสมบัติพื้นฐานที่ใช้ในการตกแต่งหน้าเว็บเพื่อเพิ่มความสวยงามและดึงดูดสายตา โดยใน CSS คุณสามารถกำหนดสีได้หลายรูปแบบ รวมถึงการใช้ชื่อสี (color names), รหัสสีแบบ Hex, ค่าสี RGB, ค่าสี HSL, และฟังก์ชันความโปร่งใส เช่น RGBA และ HSLA ต่อไปนี้จะเป็นคำอธิบายแบบละเอียดของแต่ละวิธี

ชื่อสี (Color Names)

CSS รองรับชื่อสีมาตรฐานมากกว่า 140 สี ซึ่งรวมถึงสีทั่วไป เช่น red, blue, green, yellow, และอื่นๆ ตัวอย่างการใช้งาน

h1 {
    color: red;
}

รหัสสีแบบ Hex (Hexadecimal Colors)

สีในรูปแบบนี้จะใช้เลขฐานสิบหกที่มี 6 ตัวอักษรเพื่อแสดงค่าสี โดยมีรูปแบบคือ #RRGGBB ซึ่ง RR หมายถึงค่าสีแดง (Red), GG หมายถึงค่าสีเขียว (Green), และ BB หมายถึงค่าสีน้ำเงิน (Blue) เช่น

p {
    color: #FF5733; /* สีส้ม */
}

แต่ถ้าหากค่าสีแต่ละชุดมีค่าเหมือนกัน สามารถย่อเหลือ 3 หลักได้ เช่น

p {
    color: #333; /* สีเทา */
}

การเขียนคอมเม้น CSS

ใน CSS คุณสามารถใช้ “comments” (ความคิดเห็น) เพื่อเพิ่มคำอธิบายหรือโน้ตต่าง ๆ ลงในโค้ดของคุณ โดยคอมเมนต์นี้จะไม่ส่งผลต่อการทำงานของโค้ด และจะไม่แสดงผลในหน้าเว็บไซต์ Comments มีประโยชน์มากในการช่วยให้คุณหรือผู้ร่วมงานสามารถเข้าใจโค้ดได้ง่ายขึ้นเมื่อต้องการแก้ไขหรือเพิ่มเติมในอนาคต

รูปแบบการเขียนคอมเมนต์ใน CSS

คอมเมนต์ใน CSS จะเริ่มต้นด้วย /* และสิ้นสุดด้วย */ ข้อความที่อยู่ภายในเครื่องหมายนี้จะไม่ถูกอ่านโดยเบราว์เซอร์

ตัวอย่าง

/* This is a comment */
body {
    background-color: #f0f0f0;
}

ในตัวอย่างนี้ ข้อความ “This is a comment” คือคอมเมนต์ที่ไม่ส่งผลต่อการทำงานของ CSS ใด ๆ

การเรียกใช้งาน CSS

การเพิ่ม CSS ให้กับเว็บเพจมีหลายวิธี แต่ละวิธีจะทำให้คุณสามารถปรับแต่งรูปลักษณ์และการจัดรูปแบบของเว็บเพจได้ตามต้องการ ต่อไปนี้คือคำอธิบายแบบละเอียด ๆ เกี่ยวกับวิธีการเพิ่ม CSS เข้าไปในเว็บเพจ

การเพิ่ม CSS ภายใน (Internal CSS)

นี่คือการเพิ่ม CSS ในไฟล์ HTML โดยตรงผ่านแท็ก <style> ที่อยู่ภายใน <head> ของเอกสาร HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการเพิ่ม CSS ภายใน</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            color: green;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>ยินดีต้อนรับ</h1>
    <p>นี่คือตัวอย่างการใช้ Internal CSS</p>
</body>
</html>

คำอธิบาย

<style> เป็นแท็กที่ใช้เขียนโค้ด CSS ภายในไฟล์ HTML นั้น ๆ
คุณสามารถกำหนดลักษณะต่าง ๆ เช่น สี ขนาด ฟอนต์ และการจัดวางให้กับองค์ประกอบ HTML ได้โดยตรง