นัฏพัฒน เเซ่อึ้ง: พฤศจิกายน 2015

วันพฤหัสบดีที่ 5 พฤศจิกายน พ.ศ. 2558

การเขียนเว็บด้วยภาษา Html เบื้องต้น

เริ่มต้น พื้นฐาน HTML

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

รูปแบบโครงสร้าง HTML

  <html>
  <head><title> ....ตรงนี้คือส่วนของข้อความที่จะปรากฏที่ Title Bar ของ Browser....</title></head>
       <body>
         ....ตรงนี้คือ ส่วนข้อความหรือเนื้อหา รายละเอียดที่ต้องการให้ปรากฏที่ Web browser ....       </body>
  </html>

HTML มีองค์ประกอบ 2 ส่วน คือ ส่วนที่เป็นเนื้อหา และส่วนที่เป็นคำสั่งหรือแท็กรูปแบบโครงสร้างของเอกสาร HTML จะเป็นดังนี้

<HTML>........</HTML>	เป็นคำสั่งเริ่มต้นและสิ้นสุดเอกสาร HTML
<HEAD>.......</HEAD>	ส่วนของ HEAD ของเอกสาร HTML เป็นส่วนที่เราจะสามารถใส่คำอธิบายเว็บเพจ เช่น Title หรือชื่อเรื่องของเอกสาร, Keyword สำหรับการค้นหา ซึ่งเราจะเขียน TAG ในกลุ่มของ HEAD ไว้ภายใน TAG <HEAD> …… </HEAD>
<TITLE>........</TITLE>	เป็นส่วนแสดงชื่ออกสารโดยจะแสดงที่ไตเติล บาร์ของ วินโดว์ที่ เปิดเอกสารนี้อยู่เท่านั้น
<BODY>.......</BODY>	เป็นส่วนที่จะแสดงผลออกไปยังหน้า Web Browser เช่น การแสดงผลรูปภาพ การแสดงผล Contents การสร้างจุดเชื่อมโยง ซึ่งเราจะเขียน TAG ในกลุ่มของ Body ไว้ภายใน TAG <BODY> ….. </BODY>

เมื่อลอง สังเกตดูเราจะพบสัญลักษณ์ <...> และ </...> เป็นคู่ จากโครงสร้างจะมี <...> 4ตำแหน่ง และ </...>อีก 4 ตำแหน่ง ซึ่งลักษณะการเขียน HTML จะมีลักษณะแบบนี้ สัญลักษณ์ <...> เราเรียกว่าการเปิด Tag ส่วน</...> คือการปิด Tag นั้นเอง โดยส่วนใหญ่รูปแบบของการเขียน HTML จะมีการเปิดและปิด Tag แต่ก็มียกเว้นบ้าง สำหรับแท็กบางแท็ก ที่ไม่จำเป็นต้องมีการปิดแท็ก

ตารางแสดงตัวอย่าง Tag และคำอธิบาย

<html>...</html>	= Tag เปิด เป็นจุดเริ่มต้นและสิ้นสุดของเอกสาร
<head>...</head>	= เป็น Tag ที่กำหนดชื่อเรื่อง
<title>...</title>	= เป็น Tag ที่ใช้แสดงชื่อเอกสารที่ Title Bar ของ Windows ที่เปิดอยู่
<body>...</body>	= Tag เปิด เป็นจุดเริ่มต้นและสิ้นสุด เนื้อหาของเอกสาร

<br>	= เป็น Tag สำหรับขึ้นบรรทัด ใหม่
<hr>	= เป็น Tag กำหนดให้เขียนเส้น ใน Web Page

<b>...</b>	= เป็น Tag สำหรับทำตัวอักษร ให้หนา
<I>...</I>	= เป็น Tag สำหรับทำตัวอักษร ให้เอียง
<u>...</u>	= เป็น Tag สำหรับทำตัวอักษร มีขีดเส้นใต้

<a>...</a>	= เป็น Tag กำหนดการเชื่อมโยง
<img>...</img>	= เป็น Tag กำหนดการเชื่อมโยง ด้วยรูปภาพ
<table>...</table>	= เป็น Tag สำหรับการสร้าง ตาราง
<td>...</td>	= เป็น Tag สำหรับกำหนด คอลัมน์
<form>...</form>	= เป็น Tag สำหรับสร้าง Form
<input>...</input>	= เป็น Tag สำหรับกำหนด input ใน Form
<frame>...</frame>	= เป็น Tag สำหรับสร้าง Frame
<h1>...</h1>	= เป็น Tag สำหรับกำหนดขนาดตัวอักษร ซึ่งมีค่าถึง 6 ขนาด เวลาเปลี่ยนขนาดก็แค่เปลี่ยนตัวเลขครับ

คำสั่งกำหนดขนาดตัวอักษร

คำสั่งขีดเส้น คั่น<HR>เช่นเส้นใต้บรรทัดนี้ไงใช้โดยไม่ ต้องมี</HR> มาปิดท้าย

<HR WIDTH=50%> เมื่อต้องการปรับขนาดเส้นให้ยาว 50 % ของหน้าต่าง
<HR WIDTH=200> เมื่อต้องการปรับขนาดเส้นให้ยาว 200 พิกเซล
<HR SIZE=10> เมื่อต้องการปรับความหนาของเส้นให้เท่ากับ 10 พิกเซล
<HR ALIGN=RIGHT width=50%> เมื่อต้องการกำหนดให้เส้นชิดขวา และมีความยาว 50 %
<HR NOSHADE> เพื่อแสดงเส้นที่ไม่มีเฉดสี เป็นเส้นทึบไปเลย

ตาราง

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

<TABLE>...</TABLE> เปิดรูปแบบตาราง-ปิดตาราง

<TABLE BORDER>...</TABLE> ตารางแบบมีเส้นขอบ

<TABLE WIDTH=100%>...</TABLE> ตารางมีขนาดเต็มหน้าต่าง100%
<TR>ส่วนคอลัมน์</TR> ครอบส่วนที่เป็นแถวเดียวกัน

<TD>เนื้อหาในแต่ละคอลัมน์</TD> ครอบในแต่ละกรอบคอลัมน์

<TD COLSPAN=2>...</TD> กำหนดให้กรอบนั้นยาวเท่ากับ2 คอลัมน์ในแถวถัดไป

<TD ROWSPAN=2>...</TD> กำหนดให้กรอบนั้นกว้างเท่ากับ 2 แถว

การจัดวางข้อความในตาราง

<table BORDER COLS=1 WIDTH="100%">
<tr><td ALIGN=CENTER>กึ่งกลาง</td></tr> กึ่งกลาง

<tr><td ALIGN=LEFT>ชิดซ้าย</td></tr> ชิดซ้าย

<tr><td ALIGN=RIGHT>ชิดขวา</div></td></tr> ชิดขวา

</table>

การปรับแนววาง ข้อมูลบนตาราง

<table BORDER COLS=3 WIDTH="100%"><tr>
<td VALIGN=TOP>ชิดบน<br><br></td> ชิดบน
<td VALIGN=CENTER>กึ่งกลาง</td> กึ่งกลาง
<td VALIGN=BOTTOM>ชิดล่าง</td> ชิดล่าง
</tr>
</table>

การปรับแต่งตารางนั้น เราสามารถทำได้โดยเิพิ่มคุณสมบัติของตารางหรือ การกำหนด attribute ของตาราง เพิ่มเติมเข้าไปในแท็กต่าง ๆ ไม่ว่าจะเป็นการเพิ่มในส่วนของ แท็ก <table> แท็ก <tr> และ แท็ก <td> เป็นต้น เราลองมาดูตัวอย่างต่าง ๆ ดังต่อไปนี้

การใส่สี ให้กรอบตาราง

ในการใส่สีให้กับกรอบตาราง นั้นมีข้อควรระวัง โดยต้องตรวจสอบกรอบของตารางด้วยว่าไม่ได้กำหนดเป็น 0 border="0" เพราะหากกำหนดเป็น 0 จะทำให้ไม่เห็นเส้นขอบ ในตัวอย่างนี้ก็มี attribute ต่าง ๆ เกี่ยวกับแท็ก <table> อยู่หลาย ๆ attribute ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้

border สำหรับกำหนดความหนาของกรอบตาราง โดยการกำหนดขนาดด้วยหน่วยของ Pixel โดยมีรูปแบบดังนี้ <table border = "0"> กรณีไม่ต้องการให้มีกรอบ หรือ <table border = "1"> ค่าตัวเลขมากกรอบจะมีความหนา

bordercolor สำหรับกำหนดสีของเส้นกรอบของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bordercolor = "red"> หรือ <tablebordercolor = "#ff0000">

cellspacing สำหรับกำหนดระยะห่างระหว่างเซลล์แต่ละเซลล์ โดยจะใช้ค่าเดียวกันทุกเซลล์ทั้งตาราง โดยมีรูปแบบดังนี้ <table cellspacing = "0"> หรือ <table cellspacing = "3">

cellpadding สำหรับกำหนดระยะห่างระหว่างขอบของเซลล์กับเนื้อหา (อาจเป็นข้อความหรือรูปภาพ) ที่อยู่ภายในเซลล์นั้น ระยะห่างในที่นี้หมายถึงระยะห่างจากขอบของเซลล์ทั้ง 4 ด้าน โดยมีรูปแบบดังนี้ <table cellpadding = "0"> หรือ <table cellpadding = "3">

การใส่สีพื้นหลังให้กับตาราง

จากตัวอย่างเป็นการเพิ่ม attribute bgcolor สำหรับกำหนดสีืพื้นหลังของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bgcolor = "green">หรือ <table bgcolor = "#00ff00">

การใส่ ภาพเป็นพื้นหลังให้กับตาราง

จากตัวอย่างเป็นการเพิ่ม attribute background สำหรับกำหนดใส่รูปให้กับพื้นหลังของตาราง โดยมีรูปแบบดังนี้ <table backgound = "ชื่อรูป"> สำหรับการนำรูปมาใช้สามารถใช้ได้กับสกุล .gif .jpg .png เป็นต้น

การปรับ ขนาดของตาราง

จากตัวอย่างเป็นการเพิ่ม attribute width และ height ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้

width สำหรับกำหนดความกว้างของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table width = "150"> หรือ <table width = "50%">

height สำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table hight = "150"> หรือ <table hight = "10%">

Tip HTML

การเพิ่ม Attribute ในแท็กต่าง ๆ ของภาษา HTMLการเพิ่ม Attribute ในแท็กต่าง ๆ เราสามารถพิ่มเข้ามาได้เรื่อย ๆ โดยไม่จำเป็นจะต้องเรียงลำดับว่า Attribute ใดจะต้องเขียนก่อนหรือหลัง โดยการเพิ่ม Attribute เข้าไปสามารถทำได้ง่าย ๆ เพียงใช้ Space หรือช่องว่างเป็นตัวแบ่งระหว่าง Attribute แต่ล่ะตัว

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

1. GIF (Graphic Intechange Format)
ไฟล์ภาพชนิดนี้ นิยมใช้สำหรับภาพกราฟิคที่เป็นลักษณะลายเล้น ข้อความตัวอักษร หรือภาพการ์ตูนต่าง ๆ ซึ่งมีสีไม่มากนัก เพราะไฟล์ GIF มีค่าสีสูงสุดเพียง 256 สี ดังนั้นทำให้ภาพกราฟิคที่เราเซฟเป็นไฟล์ประเภท GIF เป็นภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก แต่ข้อดีของไฟล์ประเภทนี้คือ เราสามารถสร้างและเซฟภาพประเภทนี้ให้มีลักษณะพื้นหลังโปร่งใส (Transparent) ซึ่งสามารถนำภาพเหล่านี้ไปใช้กับพื้นหลังสีอะไรก็ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .gif

2. JPG (Joint Photographic Expert Group)

ไฟล์ประเภทนี้สามารถแสดงผลของสีได้สูงสุดถึง16.7 ล้านสี ดังนั้นจึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายต่าง ๆ หรือภาพอื่น ๆ ที่มีสีเยอะ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง และไฟล์ประเภทนี้ไม่สามารถทำเป็นแบบพื้นหลังโปร่งใส่ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .jpg และ .jpeg

3. PNG (Portable Network Graphic)
ไฟล์ประเภทนี้จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง 16.7 ล้านสีเหมือนไฟล์ JPG นอกจากนี้ยังสามารถทำเป็นภาพพื้นหลังโปร่งใส เหมือนกับ GIF ได้ด้วย แต่ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็ก ๆ แต่มีการใช้สีมาก เช่น ภาพไอคอน ต่าง ๆ ไฟล์ประเภทนี้มีนามสกุล .png

การวางภาพ

<P> ขึ้นย่อหน้าใหม่ โดยจะเว้นบรรทัดให้หนึ่งบรรทัด
<BR> ขึ้นบรรทัดใหม่

<CENTER> อะไรก็ได้</CENTER> จัดให้อยู่กึ่งกลางของหน้าต่าง

รูปภาพและการ จัดวาง

ชื่อรูปภาพ ต้องระบุพาธและชื่อไฟล์.สกุล(jpg หรือ gif) ควรเป็นตัวเลขทั้งหมดเพื่อจะได้ไม่เป็นปัญหาในภายหลัง

ชื่อแสดง จะปรากฏในกรณีเล่นโหมด Text หรือรูปภาพยังโหลดขึ้นมาไม่สมบูรณ์

ระดับภาพ มี (Top,Middle,Bottom) จะกำหนดระดับภาพเมื่อวางติดกับข้อความ

ระบุเป็นพิกเซล เช่น <IMG SRC="DookDik_016_onion.gif" WIDTH="64" HEIGHT="64">

วันจันทร์ที่ 2 พฤศจิกายน พ.ศ. 2558

สอนตกแต่งหน้าเว็บให้สวยงามด้วย CSS

หลังจากที่เราได้ลองสร้างเว็บเพจแรกไปแล้วในบทเรียนการสร้างเว็บไซต์ วันนี้เรามาตกแต่งเว็บเพจของเราให้สวยขึ้นด้วย CSS กันดีกว่า

ทำไมต้องมี CSS?

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

ในการปรับเปลี่ยน “สไตล์” ให้กับเนื้อหา เราจะใช้สิ่งที่เรียกว่า “CSS (Cascading Style Sheets)” เข้ามาช่วย ไม่ว่าจะเป็นการจัดตำแหน่งของเนื้อหา ปรับขนาดของตัวอักษร หรือเปลี่ยนสีพื้นหลัง สิ่งเหล่านี้ ล้วนทำผ่าน CSS ทั้งสิ้น หรือพูดง่ายๆ ก็คือ CSS มีไว้บอก web browsers ว่าเนื้อหาต่างๆ ควรแสดงผลออกมาอย่างไร

CSS Rule

อย่าลืมว่าเนื้อหาต่างๆ ในหน้าเว็บนั้นถูกสร้างมาจาก “HTML Elements” การจะตกแต่งสไตล์ให้กับเนื้อหา ก็คือการใส่สไตล์ให้กับ HTML Elements นั่นเอง วิธีการก็คือ เราจะต้องสร้าง “กฎเกณฑ์” หรือสิ่งที่เรียกว่า “CSS Rule” ขึ้นมา ซึ่ง CSS Rule นี้เอง ที่จะเป็นตัวบอกว่า HTML Elements ไหนที่เราอยากจะปรับ และอยากปรับให้เป็นแบบไหน โดยมันจะแบ่งออกเป็น 4 ส่วน ด้วยกัน ดังนี้

Selectorคือส่วนที่เอาไว้ระบุ HTML Element ที่เราต้องการจะปรับสไตล์ สมมติว่า เราอยากจะเปลี่ยนสไตล์ของ h1 ให้เรากำหนด Selector ให้เป็น h1
Curly Bracketsเราสามารถกำหนดสไตล์หลายๆ ด้าน ได้ใน CSS Rule เดียว การกำหนดสไตล์เหล่านี้จะเรียกว่า “CSS Declarations” ซึ่งเราจะต้องครอบมันทั้งหมดด้วยปีกกา
Propertyเป็นการระบุว่าเราอยากปรับลักษณะอะไร สมมติว่า เราอยากปรับ “การจัดตำแหน่งข้อความ” ก็จะได้ว่า “text-align” คือ Property
Valueเป็นการระบุว่าเราอยากปรับลักษณะนั้นให้เป็นแบบไหน สมมติว่า เราอยากปรับ “การจัดตำแหน่งข้อความ” ให้เป็น “กึ่งกลาง” เราจะได้ว่า “center” คือ Value

Selector แบบ Class และ Id

จากตัวอย่างก่อนหน้านี้ เราได้กำหนดให้ Selector เป็น h1 ซึ่งเราจะเรียกการเขียน Selector แบบนี้ว่า “Tag Selector” คือ มันจะส่งผลไปยังทุกๆ HTML Elements ที่เป็น h1 เลย ในบางครั้ง การเขียน Selector แบบนี้ อาจดูกว้างเกินไป ให้เราแก้โดยการเขียน Selector แบบ Class หรือ Id แทน

Class

การเขียน Selector แบบนี้ จะเป็นการระบุ HTML Elements โดยอาศัย Attribute ที่มีชื่อว่า “class” สมมติเราต้องการกำหนดสไตล์ให้กับ 4 หัวข้อ นี้

1

2

3

4

5

<h1>หัวข้อสีแดง</h1>

<h1>หัวข้อสีแดง</h1>

<h1>หัวข้อสีน้ำเงิน</h1>

<h1>หัวข้อสีน้ำเงิน</h1>

จะเห็นว่าทั้ง 4 หัวข้อ ต่างก็เป็น h1 ถ้าเราใช้ Tag Selector มันก็จะส่งผลเหมือนกันทั้งหมด ให้เราเปลี่ยนมาใช้ Class Selector แทน ก่อนอื่น ให้เราใส่ Attribute “class” เพิ่มเข้าไปที่ h1 ก่อน โดยตั้งชื่อให้ตรงกับลักษณะของมัน

1

2

3

4

5

<h1 class="red-text">หัวข้อสีแดง</h1>

<h1 class="red-text">หัวข้อสีแดง</h1>

<h1 class="blue-text">หัวข้อสีน้ำเงิน</h1>

<h1 class="blue-text">หัวข้อสีน้ำเงิน</h1>

จากนั้น ให้เราเขียน CSS Rule ขึ้นมา ในส่วนของ Selector ให้เราใส่ชื่อ Class แทนการใส่ h1 โดยเราจะต้องใส่เครื่องหมาย “.” เอาไว้ข้างหน้าชื่อ Class ด้วย เพื่อเป็นการบอก web browsers ให้รู้ว่านี่คือชื่อ Class นะ ลองดูตัวอย่างนี้

1

2

3

4

5

6

.red-text {

    color: red;

}

.blue-text {

    color: blue;

}

เพียงเท่านี้ หัวข้อทั้ง 4 ก็จะมีสีแดง และสีน้ำเงิน ตรงตามที่เราต้องการแล้วล่ะ

ID

สมมติเราอยากให้เฉพาะหัวข้อที่เป็นสโลแกนมีสีแดง เราจะเขียน Selector อย่างไร?

1

2

3

4

<h1>สโลแกน</h1>

<h1>หัวข้อ</h1>

<h1>หัวข้อ</h1>

<h1>หัวข้อ</h1>

แน่นอนว่าเราไม่สามารถใช้ Tag Selector ได้ เพราะมันจะมีผลกับทุกๆ หัวข้อเลย ให้เราใส่ Attribute ที่มีชื่อว่า “id” เข้าไปที่สโลแกนของเรา แบบนี้

1

2

3

4

<h1 id="slogan">สโลแกน</h1>

<h1>หัวข้อ</h1>

<h1>หัวข้อ</h1>

<h1>หัวข้อ</h1>

จากนั้น ให้เราเขียน CSS Rule ขึ้นมา ในส่วนของ Selector ให้เราใส่ชื่อ Id ลงไป โดยเราจะต้องใส่เครื่องหมาย “#” เอาไว้ข้างหน้าชื่อ Id ด้วย เพื่อเป็นการบอก web browsers ให้รู้ว่านี่คือชื่อ Id นะ ลองดูตัวอย่างนี้

1

2

3

#slogan {

    color: red;

}

เพียงเท่านี้ หัวข้อที่เป็นสโลแกนก็จะเปลี่ยนเป็นสีแดง ในขณะที่หัวข้ออื่นๆ ยังคงเหมือนเดิม

อย่างไรก็ตาม เราไม่สามารถตั้งชื่อของ id ให้ซ้ำกันได้ หรือพูดง่ายๆ ก็คือ id จะใช้กับ HTML Element ที่มีแค่จุดเดียวในหน้านั้นๆ ซึ่งต่างจาก class ที่เอาไว้ระบุกลุ่มของ HTML Elements ที่มีลักษณะคล้ายกัน

วิธีการนำ CSS ไปใช้จริง

การนำ CSS ไปใช้จริงมีอยู่ 3 รูปแบบด้วยกัน ดังนี้

Internal

เป็นการเขียน CSS Rules เอาไว้ที่ตัวเว็บเพจเลย โดยจะใส่ไว้ในส่วน head ของเว็บเพจ แล้วครอบด้วย Tag “style” อีกที ลองดูตัวอย่างนี้

1

2

3

4

5

6

7

<head>

    <style>

        h1 {

            color: red;

        }

    </style>

</head>

ข้อดีเหมาะกับการใส่สไตล์ที่ใช้เฉพาะเว็บเพจนี้เท่านั้น
ข้อเสียนำสไตล์เหล่านี้ไปใช้กับหน้าอื่นๆ ไม่ได้

External

เป็นการเขียน CSS Rules แยกไว้อีกไฟล์หนึ่ง แล้วค่อยเรียกไฟล์นั้นมาใช้กับเว็บเพจอีกที วิธีการก็คือ ให้เราสร้างไฟล์ขึ้นมาแล้วตั้งชื่อโดยใช้นามสกุลเป็น “.css” เช่น “style.css” เป็นต้น จากนั้นให้เราใส่ CSS Rules ลงไปในไฟล์นี้

1

2

3

h1 {

    color: red;

}

ทีนี้เราจะต้องทำการ link ไฟล์ “style.css” ดังกล่าว เข้ากับเว็บเพจของเรา ให้เราสร้าง Tag “link” ขึ้นมา แล้วใส่ไว้ในส่วน head ลองดูตัวอย่างนี้

1

<link rel="stylesheet" type="text/css" href="style.css">

หากสังเกตที่ Tag “link” จะพบว่าเราต้องระบุที่อยู่ของไฟล์ “style.css” ให้ถูกต้อง โดยใช้ Attribute “href”

ข้อดีสามารถนำไปใช้กับหลายๆ เว็บเพจได้
ข้อเสียต้องโหลดไฟล์ CSS เพิ่มเข้ามา

Inline

เป็นการเขียน CSS Declarations เอาไว้ที่ตัว HTML Element ที่ต้องการจะใส่สไตล์เลย วิธีการก็คือ เราจะต้องใช้ Attribute “style” เข้ามาช่วย ลองดูตัวอย่างต่อไปนี้

1

<h1 style="color: red;">หัวข้อ</h1>

ข้อดีมีผลเหนือการใส่สไตล์ด้วยวิธีอื่นๆ เพราะเป็นการใส่สไตล์เอาไว้ที่ตัว HTML Element เลย
ข้อเสียไม่สามารถนำสไตล์ไปใช้กับ HTML Elements อื่นๆ ต่อได้

Priority ของสไตล์

การดูว่าสไตล์ไหน ที่จะเอามา apply ให้กับ HTML Elements ต่างๆ web browsers จะไล่ดูไปทีละระดับ ดังนี้

Inlineหากมีการใส่สไตล์แบบ Inline สไตล์ในส่วนนี้จะถูกนำมา apply
Internalหากไม่มีการใส่สไตล์แบบ Inline เลย มันจะไปดูสไตล์แบบ Internal ถ้ามี สไตล์ในส่วนนี้จะถูกนำมา apply
Externalหากไม่มีการใส่สไตล์แบบ Internal เลย มันจะไปดูสไตล์แบบ External ถ้ามี สไตล์ในส่วนนี้จะถูกนำมา apply
Browser defaultหากไม่มีการใส่สไตล์แบบ External เลย สไตล์ default จาก web browser เอง จะถูกนำมา apply

Workshop – ตกแต่งหน้าเว็บให้สวยงามด้วย CSS

สมมติว่าโค้ด HTML ของเราเป็นแบบนี้

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS Tutorials by Siam HTML</title>

    </head>

    <body>

        <h1>CSS Tutorials</h1>

        <p>

            Free web tutorials at

            <a href="http://www.siamhtml.com">SiamHTML.com</a>

        </p>

    </body>

</html>

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

body

เริ่มจาก HTML Element ที่มีชื่อว่า “body” กันก่อนครับ เนื่องจาก body เป็น HTML Elements ที่อยู่ด้านนอกสุดที่จะแสดงผลออกมา การปรับแต่ง body ก็คือ การปรับหน้าเว็บทั้งหน้าเลยนั่นเอง ให้เราลองเปลี่ยนสไตล์ของ body ตามนี้

เปลี่ยน “สีพื้นหลัง” ของ body จากเดิม “สีขาว ” มาเป็น “สีดำ”
เปลี่ยน “สีตัวอักษร” ของ body จากเดิม “สีขาว” มาเป็น “สีส้ม”

จากโจทย์ด้านบน ให้เราเขียน CSS Rule แบบนี้

1

2

3

4

body {

    background-color: #000;

    color: #eb8c4a;

}

เมื่อลองพรีวิวดู จะเห็นว่าสีพื้นหลังของ body กลายมาเป็นสีดำแล้ว รวมไปถึงสีตัวอักษรที่กลายมาเป็นสีส้ม ส่วนสี Link ยังคงเป็นสีน้ำเงินตามเดิม โจทย์ต่อไปคือ

กำหนด “แบบตัวอักษร” ของ body ให้เป็น “Arial”
กำหนด “ขนาดตัวอักษร” ของ body ให้เป็น “24px”

จากโจทย์ที่เพิ่มเข้ามา CSS Rule จะเปลี่ยนเป็นแบบนี้

1

2

3

4

5

6

body {

    background-color: #000;

    color: #eb8c4a;

    font-family: Arial;

    font-size: 24px;

}

เมื่อลองพรีวิวดู จะเห็นว่าแบบตัวอักษรของ body เปลี่ยนมาเป็น Arial แล้ว และยังตัวใหญ่ขึ้นเป็น 24px อีกด้วย โจทย์ต่อไปก็คือ

กำหนด “การจัดตำแหน่งตัวอักษร” ของ body จากเดิม “ชิดซ้าย” มาเป็น “กึ่งกลาง”

จากโจทย์ที่เพิ่มเข้ามา CSS Rule จะเปลี่ยนเป็นแบบนี้

1

2

3

4

5

6

7

body {

    background-color: #000;

    color: #eb8c4a;

    font-family: Arial;

    font-size: 24px;

    text-align: center;

}

เมื่อลองพรีวิวดู เนื้อหาทั้งหมดก็จะเปลี่ยนมาอยู่กึ่งกลางของ body

h1

หลังจากที่เราปรับสไตล์ที่ body ไปเยอะแล้ว เราลองมาดูที่ h1 กันบ้างครับ โจทย์ต่อไปก็คือ

เปลี่ยน “สีตัวอักษร” ของ h1 จากเดิม “สีส้ม” มาเป็น “สีเหลือง”

สำหรับโจทย์นี้ ให้เราเขียน CSS Rule เพิ่มเข้าไป แบบนี้

1

2

3

h1 {

    color: #ffcc57;

}

เมื่อลองพรีวิวดู สีตัวอักษรของ h1 ได้เปลี่ยนจากสีส้มมาเป็นสีเหลืองแล้ว

a

จากการพรีวิวล่าสุด เราจะเห็นว่าสีของ Link ยังคงเป็นสีน้ำเงินอยู่ ซึ่งมันอาจจะดูไม่ค่อยชัดเท่าไรเมื่อสีพื้นหลังเป็นสีดำ โจทย์ต่อไปก็คือ

เปลี่ยน “สีตัวอักษร” ของ a จากเดิม “สีน้ำเงิน” มาเป็น “สีฟ้า”
เปลี่ยน “น้ำหนักตัวอักษร” ของ a จากเดิม “ตัวปกติ” มาเป็น “ตัวหนา”

สำหรับโจทย์นี้ ให้เราเขียน CSS Rule เพิ่มเข้าไป แบบนี้

1

2

3

4

a {

    color: #00ACEE;

    font-weight: bold;

}

เมื่อลองพรีวิวดู สีตัวอักษรของ a ได้เปลี่ยนจากสีน้ำเงินมาเป็นสีฟ้าแล้ว และยังเป็นตัวหนาอีกด้วย

สุดยอด! เราเขียน CSS เป็นแล้ว

มาถึงตรงนี้ เราสามารถตกแต่งหน้าเว็บของเราให้สวยงามด้วย CSS ได้แล้ว ถึงแม้ว่าเรื่องของ CSS จะยังมีให้เรียนรู้อีกมาก ไม่ว่าจะเป็นการเขียน Selectors ในระดับที่สูงขึ้น การสร้าง Layouts รวมไปถึงการทำ Animation แต่เนื้อหาที่เราได้เรียนรู้ไปในวันนี้ ถือเป็นพื้นฐานสำคัญที่จะช่วยให้เราเข้าใจในเรื่องต่อๆ ไปได้ง่ายขึ้น แล้วพบกันใหม่