css and xhtml
DESCRIPTION
How to use CSS and XHTMLTRANSCRIPT
CSS and XHTML
สรางไฟล CSS+XHTML จากไฟลกราฟฟคหน่ึงวันตัด CSS • รองรับทุก Browser • พรอมใชกับทุก CMS
สารบัญ หนา
ขอมูลทั่วไปของหลักสูตร3 2
พื้นฐานการแบงการนำเสนอออกจากเนื้อหา3 4
พื้นฐาน HTML3 5
พื้นฐาน CSS3 7
Firefox และ Firebug3 11
ปฏิบัติการ3 12
หนา 1
ขอมูลท่ัวไปของหลักสูตร
ชื่อหลักสูตร
ภาษาอังกฤษ: CSS and XHTML
ภาษาไทย: สรางไฟล CSS+XHTML จากไฟลกราฟฟค
URL: http://www.smallbooks.org/css-and-xhtml/
คำอธิบาย
ทำความเขาใจแนวคิดการแยกเนื้อหาออกจากการนำเสนอ คือ การแยกเปนไฟล XHTML กับ CSS ซึ่งจำเปนสำหรับการปรับ
เปลี่ยนเนื้อหาเว็บในอนาคต สำหรับนำไปใชกับโปรแกรมที่เขียนเอง หรือใชกับ CMS ตางๆ
หลักสูตรนี้จะเนนที่การแปลงไฟลกราฟฟคใหเปน CSS+XHTML ตามมาตรฐาน เพื่อสามารถแสดงผลใน Browser สมัยใหม
ไดอยางถูกตอง รวมถึงการแนวทางแกปญหากับ Browser ในรุนเกา
ผูอบรมตองมีพื้นฐานการทำเว็บ สามารถอาน HTML ได, ใช Text Editor ได หากมีความรูพื้นฐานดานการใชโปรแกรมแตง
ภาพ (เชน Photoshop, Gimp) และทดลองออกแบบเว็บไซตที่ตองการมากอน จะทำใหสรางงานไดรวดเร็วและตรงใจมากขึ้น
หลักสูตรที่แนะนำใหเรียนกอน: ใช Photoshop ออกแบบเว็บสมัยใหม
หัวขอสัมมนา
ชวงเชา 9:00 - 12:00 น.
• ทบทวน XHTML, CSS พื้นฐาน, โครงสรางการทำงานของเว็บสมัยใหม (Content/Presentation)
• Firefox และ FireBug
• CSS Reset และ ชุด CSS เริ่มตน
• Box Module
• ทดลองตัด CSS โดยไมใชรูป
ชวงบาย 13:00 - 16:00 น.
• Box Module + Image
• CSS3 พื้นฐาน
• ปฎิบัติการตัด XHTML+CSS
CSS and XHTML by SmallBooks.org
หนา 2
หลักสูตรน้ีเหมาะสำหรับ
• ผูสนใจทั่วไปที่ตองการเขียนโคด XHTML+CSS ไดอยางถูกตอง
• นักออกแบบเว็บไซต ที่ตองการสรางไฟล XHTML+CSS จากไฟลกราฟฟคได
พื้นฐานความรูของผูเขาอบรม
• มีพื้นฐานในการใชคอมพิวเตอรและการหาความรูในอินเตอรเน็ท
• มีพื้นฐานดานการทำเว็บ สามารถอาน HTML ได, ใช Text Editor ได
ซอฟทแวรท่ีใชในการอบรม
• Text Editor ที่ผูเรียนถนัด
• หากใช Mac แนะนำ CSSEdit และ BBEdit (ซอฟแวรลิขสิทธิ์) TextWrangler หรือ Smultron (ฟรีแวร)
• หากใช Windows แนะนำ Ultraedit-32 หรือ Edit Plus (ซอฟแวรลิขสิทธิ์) Notepad++ (ฟรีแวร)
• โปรแกรมกราฟฟคที่ใชในการ Export รูปภาพ แนะนำ Photoshop, Gimp
• Firefox และ FireBug
ส่ิงท่ีจะไดรับจากการอบรม
• สามารถสรางไฟล XHTML+CSS จากไฟลกราฟฟคไดอยางมีระบบ ถูกตองตามมาตรฐาน
วิทยากร
ครูเมน (จักรกฤษณ ตาฬวัฒน) iMenn.com
Art Director บริษัทไทเกอร ไอเดีย จำกัด (www.tigeridea.com)
ลิขสิทธิ์
ลิขสิทธิ์ของเอกสารและหลักสูตรนี้เปนของนายจักรกฤษณ ตาฬวัฒน แตอนุญาตใหดัดแปลง เผยแพร และนำไปใชเชิง
พาณิชยได โดยตองอางที่มา http://www.smallbooks.org/css-and-xhtml/
ตามสัญญาอนุญาต http://creativecommons.org/licenses/by/3.0/th/
ประวัติการแกไข
14 มิ.ย. 25533 เผยแพรครั้งแรก
CSS and XHTML by SmallBooks.org
หนา 3
พื้นฐานการแบงการนำเสนอออกจากเน้ือหา ในสมัยแรกที่มีการสรางอินเตอรเน็ทและ HTML นั้น ยังเปนชวงของการนำเสนอเนื้อหาที่ไมซับซอน โดยมากจึงเขียนเปนโคด
HTML อยางเดียว ผสมทั้ง “รูปแบบการนำเสนอ” และ “เนื้อหา” เขาดวยกัน เชน
HTML
<font color=“red” size=“5”>TEST CODE</font>
ซึ่งเปนการระบุใหเนื้อหา TEST CODE มีการนำเสนอเปนตัวอักษร สีแดง ขนาดใหญ
ตอมามีการสรางเอกสารรูปแบบตางๆ ที่ซับซอนขึ้น โคดมีขนาดใหญและซับซอนเกินไป ทำใหเริ่มมีการคิดเรื่องการใสเนื้อหา
ไวเฉพาะใน HTML ระบุชนิดของขอมูลกำกับ แลวแยกสวนการนำเสนอไวในอีกไฟล ที่เรียกวา Cascading Style Sheets
(CSS)
HTML CSS
<p>TEST CODE</p> p {color: red; font-size: large;}
คือการบอกวา มีเนื้อหา TEST CODE ที่เปน paragraph อยู แลวคอยไประบุใน CSS วา ถาเจอ paragraph ใหใชฟอนทสี
แดง ตัวอักษรขนาดใหญ
นอกจากนั้น ยังใช CSS เพื่อกำหนดรูปแบบการนำเสนออื่นๆ เชน การจัดวางตำแหนงตางๆ, การแสดงผลตัวอักษร สี พื้น
หลัง กรอบ ลิงก รูปแบบตางๆ
แหลงความรูอื่นๆ
http://www.csszengarden.com/ – เปนเว็บที่เนนเรื่องการแยกเนื้อหาและการนำเสนอเปนเจาแรกๆ ละเอียดละออ ลึกซึ้ง
CSS and XHTML by SmallBooks.org
หนา 4
พื้นฐาน HTMLHTML มีหลายรุนที่ใชงานอยู ปจจุบันที่นิยมคือ XHTML 1.0 Transitional ซึ่ง XHTML คือ HTML (HyperText Markup
Language) ที่มีแนวคิดของ XML (Extensible Markup Language) ซึ่งกลาวคราวๆ ก็คือ มีรูปแบบเปนโครงสราง มีการเปด
ปดคำสั่งชัดเจน ทำใหคอมพิวเตอรประมวลผลเว็บไดเร็ว และแสดงออกไดอยางถูกตอง (เชน ตองใช <img src=... /> ไมใช
<img src=... > )
การประกาศชนิดของ HTML เริ่มที่บรรทัดแรกของไฟล .html คือ
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
สำหรับแบบอื่นๆ ดูที่ http://www.w3schools.com/tags/tag_doctype.asp
หลังจากนั้นจะเปนโครงสรางมาตรฐาน คือ
HTML
<html>
<head> <title>Title of the document</title>
</head> <body>
The content of the document...... </body>
</html>
โครงสรางคำส่ัง HTML
ไวยากรณหลักคือ เปดดวยเครื่องหมาย < และปดดวยเครื่องหมาย > โดยภายในประกอบดวยคำสั่ง (HTML Tag) และ
คุณสมบัติ (Attribute) เชน
HTML
<img src="photo.jpg" />
โดยคำสั่งนี้ชื่อ img (ยอมาจาก image) และคุณสมบัติ src (ยอมาจาก Source) นั้นมีคา photo.jpg
CSS and XHTML by SmallBooks.org
หนา 5
คำสั่ง (HTML Tag) จะตองมีการเปดคำสั่งและปดคำสั่ง เชน
HTML
<strong>ตัวหนา</strong>
ถาเปนคำสั่งที่เปนชิ้นเดียว เชนรูปภาพ ก็ใหเครื่องหมายเปดตอนทายดวย เชน
HTML
<img src="photo.jpg" />
คำส่ัง XHTML ท่ีควรรู
คำสั่งที่จำเปนและใชบอย ดังนี้,
• <a> มาจากคำวา anchor หรือสมอ เปนหมุดหมายของที่ตางๆ ไวใชแสดงลิงก (link)
• <div> มาจากคำวา division หรือสวนยอยตางๆ ของขอมูล ใชแสดงกลองตางๆ
• <em> มาจากคำวา emphasized หรือเนน ในที่นี้หมายถึงตัวเอียง
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6> มาจากคำวา head หรือหัวเรื่อง มี 6 ระดับ h1 สำคัญสุด
• <img /> มาจากคำวา image คือใสรูป
• <li> มาจากคำวา list เอาไวใสรายการตางๆ (ครอบดวย <ul> หรือ <ol>)
• <ol> มาจากคำวา ordered list ไวใสรายการที่เปนตัวเลข 1, 2, 3, …การใสขอมูลรายการจึงเปน
<ol><li>รายการที่ 1</li><li>รายการที่ 2</li></ol>
• <p> มาจากคำวา paragraph คือขึ้นยอหนาใหม
• <strong> คือตัวหนา
• <table> ใสตาราง
• <td> มาจากคำวา table data ใสขอมูลตาราง
• <th> มาจากคำวา table header ใสขอมูลหัวตาราง
• <tr> มาจากคำวา table row ไวเริ่มแตละแถว ดังนั้น การใสขอมูลในตารางจึงเปน
<table><tr><td>ขอมูล</td></tr>< /table>
• <ul> มาจากคำวา unordered list ไวใสรายการที่ไมเปนตัวเลขลำดับ การใสขอมูลรายการจึงเปน
<ul><li>รายการ A</li><li>รายการที่ B</li></ol>
แหลงความรูอื่นๆ
สำหรับคูมือรายชื่อคำสั่งอยางละเอียด ลองดูที่ http://www.w3schools.com/tags/default.asp
สำหรับคูมือแบบสั้นหรือโพย (Cheat Sheet) ลองดูที่ http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
CSS and XHTML by SmallBooks.org
หนา 6
พื้นฐาน CSSเมื่อใช HTML ประกอบกับ CSS พยายามให HTML ระบุแคชนิดขอมูล (เชน <table>) ไมตองระบุคาตัวแปร (เชน <table
cellspaceing=“2”>) เพราะเราจะให CSS เปนตัวระบุแทน
โครงสรางคำส่ัง CSS
เริ่มดวยการบอกวาจะจัดการหนาตาของวัตถุชิ้นไหน แลวตามดวยคุณสมบัติตางๆ ในเครื่องหมาย {} โดยคั่นแตละคุณสมบัติ
ดวยเครื่องหมาย ; ดังนี้
CSS
p {color: orange; margin: 10px; }
CSS and XHTML by SmallBooks.org
หนา 7
วัตถุท่ีจัดการได มี 3 แบบคือ
1. HTML elements – ส่ังทับคำส่ัง HTML ไปเลย
เชน p, a, h1, h2
CSS
a {color: white;}
สั่งให link มีสีขาว
2. The ID Selector – ตั้งชื่อ ID ใหม โดยใหสอดคลองกับการใสคุณสมบัติในหนา HTML
เชน <div>
HTML CSS
<div id="header">
<h1>Title Ja</h1></div>
#header {background-color: black;}
พอแสดงผล ก็จะพบวาพื้นหลังของ div ที่ชื่อ header นี้มีสีดำ
3. The Class Selector – ตั้งชื่อ Class ใหม โดยใหสอดคลองกับการใสคุณสมบัติในหนา HTML
เหมือนกับขอ 2. แต ID ตองมีที่เดียวในหนา (ไมใชซ้ำในหนาเดียวกัน) สวน Class จะมีกี่ที่ก็ได สำหรับคนไมชัวรก็อาจจะใช
แต Class ก็ได เชน
HTML CSS
<div class="header">
<h1>Title Ja</h1></div>
.header {background-color: black;}
ก็ไดผลเหมือนขอ 2
แตคำแนะนำก็คือ ถาชัวรวามีที่เดียวในหนา ก็ใช ID ดีกวา จะทำใหการเขียนโปรแกรมตอจากนี้ไปทำไดงายขึ้น (เชนการเขียน
JavaScript ใหอางถึงวัตถุในหนา ถาใช ID ก็ระบุถึงตัวไดเลย)
CSS and XHTML by SmallBooks.org
หนา 8
วิธีการใช CSS มี 3 แบบคือ
1. Internal Stylesheet ใชภายใน HTML น้ันเลย
วิธีนี้เหมาะสำหรับเว็บหนาเดียว ใชโคดซ้ำเฉพาะในหนานั้นๆ ไมใชกับหนาอื่น ดังนั้นไมจำเปนตองแยกไฟลก็ได ใชคำสั่ง
<style>
HTML
<head>
<title> ... <title> <style type="text/css">
CSS Content </style>
</head><body>
2. External Stylesheet แยกไฟล CSS มาตางหาก
วิธีนี้เปนวิธีมาตรฐาน นั่นคือแยกไฟล CSS ออกมาตางหากดวยคำสั่ง link (เชนชื่อ style.css) จะไดสามารถใชคำสั่ง CSS ซ้ำ
กัน / รวมกับหนาอื่นๆ ได
HTML
<head>
<title> ... <title> <link rel="stylesheet" type="text/css" href="style.css" />
</head><body>
3. In-line Stylesheet – ใสตรงๆ ในท่ีท่ีตองการระบุรูปแบบเลย
วิธีนี้เหมาะสำหรับการแสดงผลในจุดนั้นๆ ไมใชซ้ำอีกเลย เชน การเปลี่ยน class สำหรับ JavaScript กรณีกดปุมตางๆ
HTML
<head>
<title> ... <title> <link rel="stylesheet" type="text/css" href="style.css" />
</head><body>
CSS and XHTML by SmallBooks.org
หนา 9
คำส่ัง CSS ท่ีควรรู
หนวยท่ีใชใน CSS
มีทั้ง %, in, cm, mm, em, ex, pt, pc, px รายละเอียด
ภาษาไทยที่ http://www.enjoyday.net/webtutorial/css/css_chapter03.html
ภาษาอังกฤษที่ http://www.w3schools.com/css/css_units.asp
สวนใหญแนะนำใหใช
px (pixel) เพราะมีหนวยเปนจุด เหมาะกับจอคอมพิวเตอรทั่วไป
em มาจาก letter m ซึ่งเปนตัวอักษรที่อวนสุดในฟอนททั้งหมด ในที่นี้คือขนาดของฟอนท เชน line-height: 1.5 em; คือ
ระยะระหวางบรรทัดเทากับ 1.5 เทาของตัวอักษร ซึ่งเหมาะกับภาษาไทยที่มีสระ/วรรณยุกต ทำใหอานงาย
สีท่ีใชใน CSS
เนื่องจากจอที่แสดงผล เปนระบบผสมแมสีแสง Red+Green+Blue การสั่งใหแสดงผล จึงเปนการสั่งใหแสดงคาของแมสีตางๆ
นั่นเอง ถาแสดงทั้ง 3 สีเต็มที่ จะเปนสีขาว (#ffffff) ถาปดทั้งหมด จะเปนสีดำ (#000000) นอกจากนั้นใน CSS3 ยังมีตัวแปร
Opacity หรือความโปรงแสงอีกดวย แนะนำใหใชเครื่องมือดูดสี เชน Photoshop, Gimp หรือโปรแกรมแตงภาพตางๆ
รายละเอียดการใชสี
ภาษาไทยที่ http://www.enjoyday.net/webtutorial/css/css_chapter04.html
ภาษาอังกฤษที่ http://www.w3schools.com/css/css_colors.asp
การจัดการรูปแบบ (CSS Styling)
ชนิด แหลงความรู
พื้นหลัง http://www.w3schools.com/css/css_background.asp
ขอความ http://www.w3schools.com/css/css_text.asp
ตัวอักษร http://www.w3schools.com/css/css_font.asp
ลิงก http://www.w3schools.com/css/css_link.asp
รายการ (ลิสต) http://www.w3schools.com/css/css_list.asp
ตาราง http://www.w3schools.com/css/css_table.asp
แนะนำใหดูโพย หรือ Cheat Sheet ที่ http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
CSS and XHTML by SmallBooks.org
หนา 10
Firefox และ Firebugเปนโปรแกรมหลักในการตรวจสอบโครงสรางของเว็บเพจตางๆ ใหลงโปรแกรม Firefox กอน แลวลง Add on ที่ชื่อ Firebug
เมื่อใช Firebug ดูเว็บ ใหกดปุมขวาลาง จะปรากฏโครงสรางดังรูป
ปฏิบัติการ
ทำความเขาใจโครงสรางเว็บที่ตองการ แลวทดลองเปลี่ยน CSS บางคา
CSS and XHTML by SmallBooks.org
หนา 11
CSSHTML
ปฏิบัติการ1. ทดลองโหลด CSS Reset มาใช
2. ทำความเขาใจ CSS เริ่มตน (CSS Generic)
3. ทดลองใช .clear และ .clearfix โดยสราง div ครอบ div ภายในที่ float:left และ float:right
4. ทำความเขาใจ CSS Box Model
5. ทดลองวาดชื่อ div จากรูปหนาเว็บที่ตองการ
6. สราง html จากชื่อ div ที่ตั้งไว
7. สราง css ตาม html
CSS and XHTML by SmallBooks.org
หนา 12