วิธีเชื่อมไฟล์ CSS เข้ากับหน้าเว็บ HTML


สำหรับมือใหม่ อิเฎลต้องขออนุญาตแนะนำว่า CSS คืออะไร และ HTML คืออะไร

**ไม่อนุญาตให้นำบทความ Tutorial นี้ไปใช้ในเว็บไซต์อื่น หรือเพื่อการค้าใด ๆ

HTML เป็นภาษาพื้นฐานสำหรับการทำเว็บไซต์อย่างง่าย สังเกตุได้โดยเราจะเห็น <….> หรือ </….> ทั่ว ๆ ไปหลาย ๆ ที่ เช่น
<p> วางไว้ที่เริ่มต้นย่อหน้า
</p> วางไว้ที่จุดสิ้นสุดย่อหน้า
<b> วางไว้จุดเริ่มต้นของข้อความตัวหนา
</b> วางไว้ที่จุดสิ้นสุดของข้อความตัวหนา
<font size=”5″> วางไว้หน้าจุดเริ่มต้นของตัวอักษรที่ใหญ่
</font> วางไว้จุดสิ้นสุดของการกำหนดสีและขนาดตัวอักษรใด ๆ

จะเห็นได้ว่า ทุกครั้งที่มีการกำหนดค่า สี และ ขนาด หรือขึ้นย่อหน้าใหม่ ภาษา HTML จะเริ่มด้วยคำสั่งในวงเล็บ <….> และเมื่อสิ้นสุดคำสั่งนั้น ต้องใส่ </….> เพราะถ้าไม่ใส่ สิ่งที่เกิดขึ้นก็มีเช่น เราอยากให้ตัวอักษรหนาแค่หัวข้อ แต่พอไม่ได้ใส่ </b> มันก็จะกลายเป็นตัวหนาทั้งหน้ากระดาษ

CSS คือภาษาที่ใช้ตกแต่งตัวอักษร ข้อความ จนกระทั่งขนาดของรูปภาพ ที่สวอิเฎลชอบคือมันสามารถทำให้รูปหรือข้อความใหญ่ขึ้นได้เมื่อเอา mouse ลากผ่าน (Roll Over) ข้อสังเกตุของการเขียนภาษานี้คือ จะมี Class หรือ ID อยู่ข้องหน้าวงเล็บ {….} เช่น Class จะมีลักษณะ .classname {….} และ ID จะมีลักษณะ #IDname {….} แต่ถ้าเป็นคำสั่งของภาษา HTML อยู่แล้ว จะไม่มีเครื่องหมาย . หรือ # อยู่ข้างหน้า เช่น body {….} ใช้สื่อสารกับ <body> ในหน้า HTML เป็นต้น

ใน code ของหน้า HTML ซึ่งมีภาษา CSS ไว้ตกแต่ง อิเฎลสามารถทำให้ CSS เป็นส่วนหนึ่งของภาษา HTML ได้โดยใส่ภาษา CSS ไว้ระหว่าง <style> และ </style> เช่น
<style>
table, td {
background-color: transparent;
border:1px;
}
body {
background:rgb(255,255,255);
margin-top: 10px;
}
</style>

กล่าวคือคำว่า <style> และ </style> เป็นภาษา HTML และสิ่งที่อยู่ระหว่าง <style> และ </style> คือภาษา CSS

เมื่อรู้ว่าการใช้ CSS นั้นง่ายนิดเดียว สวอิเฎลจึงชวนให้ดูการแยก file นามสกุล CSS ออกจาก HTML แต่ยังคงมีการเชื่อมกันอยู่ พูดอีกอย่างหนึ่งคือ อิเฎลมี CSS อยู่ไฟล์หนึ่ง และ HTML อีกหลาย ๆ ไฟล์ แต่ หน้าตาเว็บเพจ HTML มีสี, ลักษณะตัวอักษร, ลักษณะตาราง เป็นไปตามการกำหนดค่าจาก CSS ไฟล์เดียว

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

สมมุติว่าตอนนี้เรามีหน้าเว็บ HTML ที่มีภาษา CSS ปนอยู่ เมื่อเปิดดู code ใน Notepad หรือ Dreamweaver จะเห็นเป็น
<html>
<head>
<title>สว อิเฎล is an Instructor</title>
</head>
<body>
<style>
table, td {
background-color: transparent;
border:1px;
}
body {
background:rgb(255,255,255);
margin-top: 10px;
}
</style>
บริเวร body นี้คือตัวหนังสือและภาพที่ประกฏในหน้าเว็บ
</body>
</html>

หมายเหตุ: เวลาแก้ไข HTML กับ CSS สามารถใช้ Dreamweaver หรือ Notepad ก็ได้ คือคลิกขวาที่ไฟล์ แล้ว Open With > Notepad

ขั้นตอนที่ 1 อิเฎลจะแยกภาษา CSS ออกจากหน้า HTML
ตามที่เคยบอกไปคือ ภาษา CSS จะอยู่ระหว่าง <style> และ </style> ดังนั้นให้ highlight ข้อความทั้งหมดที่อยู่ระหว่าง <style> และ </style> และ Cut (คลิกขวา Cut หรือ Ctrl+X) **ส่วนคำว่า <style> และ </style> ที่ไม่มีข้อความใดอยู่ระหว่างกลางแล้ว ให้ delete ทิ้งไปได้

ขั้นตอนที่ 2 ตั้งไฟล์ CSS ใหม่
เปิด Notepad หรือ หน้า CSS หน้าว่าง ๆ ใน Dreamweaver แล้ว Paste (คลิกขวา Paste หรือ Ctrl+V) ภาษา CSS ที่เราเอามาจากหน้าเว็บลงไป จากนั้นก็ Save ให้ตั้งนามสกุลเป็น .css **ในกรณีเป็น Notepad ให้ตั้งค่าเมื่อจะ Save ดังนี้
File name: Name_in_english.css
Save as type: All Files
Encoding: Unicode
ชื่อไฟล์ควรเป็นภาษาอังกฤษ โดยไม่มีการเว้นวรรค หรือถ้าจะเว้นวรรค ให้ใส่ _ หรือ – ลงไปแทน
ให้เอาไฟล์นี้ ไว้ใน folder เดียวกับ ไฟล์ HTML

ขั้นตอนที่ 3 เชื่อมไฟล์ CSS เข้าสู่ HTML ตัวเดิม
ให้เปิดไฟล์ HTML (ที่เราพึ่งเอา ส่วนของ CSS ออกไป) ดูที่สวนบนของโคด จะเห็น
<html>
<head>
<title>สว อิเฎล is an Instructor</title>
</head>
<body>

ให้ Paste ข้อความบรรทัดด้านล่าง คือ
<link href=”Name_in_english.css” rel=”stylesheet” type=”text/css” />
ลงไประหว่าง </title> และ </head> (และกรุณาคีย์เครื่องหมายฟันหนูใหม่ ด้วยคีย์บอร์ของตนเอง)

จะเห็นเป็น
<html>
<head>
<title>สว อิเฎล is an Instructor</title>
<link href=”Name_in_english.css” rel=”stylesheet” type=”text/css” />
</head>
<body>

**หมายเหตุ: Name_in_english.css ให้เปลี่ยนตามชื่อไฟล์ CSS ที่ตนตั้งขึ้น

เสร็จละ

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply ถาม หรือ แสดงความคิดเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s