.jpg)
.jpg)
.jpg)
Archive for มกราคม 2015
บทนำ HTML
.jpg)
HTML
ต้นกำเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สำหรับนักวิจัยของสถาบันเพื่อแบ่งข้อมูลกัน และถูกพัฒนามาเรื่อยๆจนถึงปัจจุบันHTML เป็นตัวย่อมาจาก Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการแสดงผลบนเว็บ บราวเซอร์ในอินเตอร์ โดยสามารถนำเสนอข้อมูลตัวอักษร รวมทั้งเชื่อมต่อเพื่อ แสดงภาพ , เสียง และไฟล์ในรูปแบบอื่นๆ
ภาษา HTML จะแบ่งออกเป็น 2 ส่วน คือ
1. ส่วนของคำสั่ง (tag) เป็นส่วนที่กำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกว่า Tag โดยจะอยู่ในเครื่องหมาย < ... >
2. ส่วนของบทความทั่วๆไป เป็นส่วนของข้อความที่เราต้องการแสดงผล
ตัวอย่างการใช้งานภาษา HTML
คุณอาจลองพิมพ์ตามตัวอักษรด้านล่างนี้ ใน Text editer ของคุณเช่น Notepad
|
<html> <head> <title> หัวข้อเรื่อง ของหน้านี้ </title> </head> <body> เนื้อหาที่จะแสดงใน web browser </body> </html> |
เมื่อคุณพิมพ์เสร็จก็ให้ save ในชื่อ mypage.html และลองใช้ web browser อย่าง internet explorer หรือ fire fox เปิดดูก็จะเห็นผลตามรูปด้านล่าง
การทำงานของ code ด้านบน
1. <html> ...... </html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ
2. <head> ...... </head> เป็นส่วนที่ใช้ให้รายละเอียดเกี่ยวกับ เว็บเพจหน้านี้ ซึ่งจะไม่แสดงให้เห็นในส่วนของการแสดงผลของ web browser แต่จะมีผลกับส่วนอื่นๆ เช่น การหาของ search engine (google,yahoo) การใช้งานก็จะมีคำสั่งย่อยเพื่อบรรยายรายละเอียด เช่น <title> .... </title> , <meta> และอื่นอีกมากมาย
3. <title> .......... </title> ในส่วนตัวอักษรที่อยู่ในคำสั่งนี้จะอยู่ใน title bar ของ web page
4. <body> .......... </body> ตัวอักษรที่อยู่ในคำสั่งนี้จะแสดงส่วนแสดงผลของ web browser
โครงสร้างคำสั่งของ HTML
.jpg)
HTML
การใช้งานในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้
1. คำสั่ง หรือ Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น
Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag> เราเรียกว่า tag เปิด
</tag> เราเรียกว่า tag ปิด
2. Attributes
Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย
3. not case sensitive
หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน
โครงสร้างของหลักของ HTML
โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ
1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง
2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web brower โดยตรง
|
<html> <head> คำสั่งในหัวข้อของ head </head> <body> คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล </body> </html> |
1. คำสั่งในหัวข้อของ head (Head Section)
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ
|
<HEAD> <TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ"> <META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2 "> </HEAD> |
TITLE
ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser
META
Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการจัดอันดับบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine เช่น google , yahoo)
charset=TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้ charset=TIS-620 หรืออาจเป็น charset=windows-874 ก็ได้ ตอนนี้แนะนำให้ใช้เป็น charset=utf-8
keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คำได้โดยใช้เครื่องหมาย (,) ในการคั่นระหว่างคำ
การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง
2. คำสั่งในส่วนของ (Body Section)
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ
ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้
กลุ่มคำสั่งเกี่ยวกับการจัดรูปแบบเอกสาร
กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร
กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)
กลุ่มคำสั่งเกี่ยวกับการทำลิงค์
กลุ่มคำสั่งจัดการรูปภาพ
กลุ่มคำสั่งจัดการตาราง (Table)
กลุ่มคำสั่งควบคุมเฟรม
กลุ่มคำสั่งอื่นๆ
คำสั่งในการจัดหน้า
HTML
ในบทความนี้จะเป็นเนื้อหาของคำสั่งที่ใช้ในส่วนของ body section ทั้งหมดโดยจะเป็นคำสั่งในส่วนของการจัดหน้าซึ่งการเรียนรู้ที่ดีที่สุดคือการลองพิมพ์ดู ดังนั้น Hellomyweb.com จึงได้ทำ text editor และหน้าจอแสดงผลไว้ด้วยกันให้คุณลองพิมพ์ลองแก้ไขกันดู โดยคลิกที่ลิงก์ที่หัวข้อได้เลย
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.คำสั่งที่ใช้ในการจัดย่อหน้า
คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง
รูปแบบ p tag
|
<p> ย่อหน้าที่ 1 </p> <p> ย่อหน้าที่ 2 </p> <p> ย่อหน้าที่ 3 </p> |
2.คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่
การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง
รูปแบบ br tag
|
บรรทัดที่ 1 <br> บรรทัดที่ 2 <br> บรรทัดที่ 3 <br> |
3.คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง
คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1,h2,h3,h4,h5,h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่น ขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ
รูปแบบ h tag
|
<h1>head 1</h1> <h2>head 2</h2> <h3>head 3</h3> <h4>head 4</h4> <h5>head 5</h5> <h6>head 6</h6> |
4. คำสั่งที่ใช้ในการขึดเส้นคั่น
คำสั่งที่ใช้ในการขีดเส้นคั่น
รูปแบบ hr
|
<p>เนื้อหาบทที่ 1</p> <hr> <p>เนื้อหาบทที่ 2</p> <hr> |
5.คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง
การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = 'left') ชิดขวา (align = 'right') และ จัดกึ่งกลาง (align = 'center')
รูปแบบ align
|
<h3 align = 'left'>ชิดซ้าย</h3> <h3 align = 'right'>ชิดขวา</h3> <h3 align = 'center'>จัดเข้ากลาง</h3> |
6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง
bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้
รูปแบบ bgcolor
|
<body bgcolor ='green'> <h1> ดูสีพื้นหลัง </h1> </body> |
7. การเขียนคำบรรยาย soure code
ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข
รูปแบบการเขียนคำบรรยาย source code
| <!-- คำบรรยาย source code --!> |
เชื่อมต่อเอกสารของเราด้วย hyperlink
HTML
hyperlink หรือเราเรียกกันสั้นว่า link ซึ่งเราจะเห็นอยู่ในทุกเว็บไซต์ ใช้เพื่อเปิดเว็บเพจอื่นๆใน เว็บไซต์ของเรา หรือเชื่อมโยงไปที่ web site หรือ เว็บเพจอื่นๆ ซึ่งมีความสำคัญมากในเว็บไซต์เรามาลองสร้าง hyperlink กันง่ายๆดู
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.สร้าง hyperlink
ในตัวอย่างจะใช้ตัวอักษรในการทำ hyperlink ซึ่งการลิงค์ในตัวอย่างจะมี 2 แบบคือ
1.1. ลิงค์ภายในเว็บไซต์ด้วยกัน มีหลักการสร้าง hyperlink ดังรูปด้านล่าง
รูปแบบของ hyperlink ภายใน directory เดียวกัน
| <a href='ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
รูปแบบของ hyperlink จาก directory ที่สูงกว่า
| <a href='ชื่อ directory ที่เก็บไฟล์ไว้/ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
รูปแบบของ hyperlink จาก directory ที่ต่ำกว่า 1 ขั้น
| <a href='../ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
1.2. ลิงค์กับเว็บภายนอก
รูปแบบของ hyperlink กับเว็บภายนอก
| <a href='http://domain name'> ตัวอักษรที่จะใช้แสดง </a> |
2.สร้าง hyperlink ด้วยรูปภาพ
ในตัวอย่างจะเป็นการสร้างลิงค์ด้วยรูปภาพ
รูปแบบของการสร้าง hyperlink ด้วยรูปภาพ
|
<a href='หน้าที่ต้องการเชื่อมโยง'> <img border = '0' src ='ที่อยู่ภาพ/ชื่อภาพ'> </a> |
3.สร้าง hyperlink ในหน้าเดียวกัน
ในหน้าที่มีบทความเยอะมากๆ เราต้องการสร้าง link เพื่อไปยังหัวข้อที่อยู่ในหน้าเดียวกันเพื่อความสะดวกในการอ่านบทความ โดยเราจะตั้งจุดที่เราต้องการจะ link ไปหาโดยใช้ <a name ='ชื่อ'> </a>
รูปแบบของการสร้าง hyperlink ในหน้าเดียวกัน
สร้างจุดที่ต้องการจะลิงค์ไป
| <a name='ชื่อจุดลิงค์'> </a> |
สร้างลิงค์
| <a href='#ชื่อจุดลิงค์'> ตัวอักษรที่ต้องการแสดง </a> |
4.เปิด browser ใหม่เมื่อคลิกที่ลิงค์
การสร้าง link ให้เปิด browser ใหม่เราจะใช้ Attributes โดยพิมพ์ target="_blank" ใน a tag
เปิด browser ใหม่เมื่อคลิกที่ลิงค์
<a href="เป้าหมาย" target="_blank">ตัวอักษรที่ใช้แสดง</a>
คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ
HTML
ตัวเอียง ตัวหนา หรือแบบอักษรแบบต่างนั้นมีเพื่อให้เราอ่านบทความได้ง่ายขึ้น หรือเป็นการเน้นคำ ซึ่งในบทนี้เราจะมาดูกันว่ามีคำสั่งอะไรบ้างลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.คำสั่งที่ใช้ในการจัดลักษณะตัวอักษร
ในหัวข้อนี้จะเป็นคำสั่งที่ใช้ในการจัดรูปแบบทั่วไปเช่นตัวเอียง ตัวหนา
คำสั่งเราจะแบ่งได้เป็น 2 พวกดังนี้
1.แบ่งตามลักษณะที่ปรากฏ เช่นตัวเอียง ตัวหนา
| <B> <I> <S> <Sub> <Sup> <U> |
ตัวอักษรแบบตัวหนา (bold) ตัวอักษรแบบตัวเอน (italic) ตัวอักษรแบบตัวขีดฆ่า (strike) ตัวอักษรแบบตัวห้อย (subscripted) ตัวอักษรแบบตัวยก (superscripted) ตัวอักษรแบบขีดเส้นใต้ (underline) |
2.แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก
| <Em> <Stong> <Ins> <Del> <Code> <Address> |
ใช้เน้นข้อความ คำพูดหรือวลี (emphasized) ใช้เน้นข้อความที่สำคัญมากๆ (strong) ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted) ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted) ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code) ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code) |
ซึ่งจริงแล้วนั้น ผลลัพธ์ออกมาก็เหมือนกัน เช่น B ให้ผลลัพธ์เหมือนกับ Strong เราจะเลือกใช้แบบใดก็ได้ แต่เราแยกเพื่อความสะดวกในการใช้งานมากกว่า
2.คำสั่งที่ทำให้รูปแบบตัวอักษรใน soure code เหมือนกับที่แสดงผล
Pre tag จะมีประโยชน์มากในการที่เราจะแสดงบทความที่มีเนื้อหามาก หรือ คัดลอกเนื้อหาจากที่อื่นมาทำให้เราไม่ต้องขึ้นบรรทัดใหม่ด้วยคำสั่ง br และใช้ในการแสดง source code ได้ดีอีกด้วย
รูปแบบของ Pre tag
| <pre> ..... </pre> |
3.คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ
สัญลักษณ์พิเศษบางตัวเช่น เครื่องหมายมากว่า (>) หรือ เครื่องหมายน้อยกว่า (<) ซึ่งเครื่องหมายเหล่านี้ใช้ในภาษา HTML ด้วยทำให้ตัวอักษรที่อยู่ในเครื่องหมายเหล่านี้กลายเป็น Tag หมด หรือเครื่องหมายที่ไม่มีบนคีบอร์ด แต่ถ้าเราต้องการแสดงเครื่องหมายเหล่านี้เราต้องใช้ Entity Name แทน ตามแบบด้านล่าง
การใช้งานสีในเว็บเพจ
สีสันนั้นอยู่คู่กับเว็บเพจอยู่แล้ว เพราะนอกจากจะทำให้เว็บดูสวยงามน่าสนใจแล้ว ยังช่วยให้การอธิบายข้อความดีขึ้นอีก ในบทความนี้เราจะมีดูการใช้งานสีกัน
รายชื่อสีแบบ HEX value และ แบบ RGB value
| Color | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
ตัวอย่าง code สีในแบบ hex value และแบบ ชื่อของสี
| Color Name | Color HEX | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGrey | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| Darkorange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkSlateGrey | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DimGrey | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Grey | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray | #D3D3D3 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSlateGrey | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370D8 | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #D87093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| SlateGrey | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
การใส่ภาพพื้นหลัง ให้เว็บเพจ
HTML
ภาพพื้นหลังเป็นสิ่งที่ทำให้เว็บของเราดูสวยงามแต่ถ้าเราใช้ภาพพื้นหลังที่ไม่ดี อาจส่งผลเสียกับเว็บเราได้ ในบทความนี้จะเป็นตัวอย่างของการใส่พื้นหลังที่ดี และไม่ดีลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.สีพื้นหลังที่ดี
ตัวอย่างของภาพพื้นหลังที่ดี สีของตัวหนังสือและพื้นหลังแตกต่างกันเห็นได้ชัดเจน และสีพื้นหลังเป็นสีที่อ่อนทำให้อ่านแล้วสบายตา
2.สีพื้นหลังที่ไม่ดี
ตัวอย่างพื้นหลังที่ไม่ดีเนื่องจากว่าสีพื้นหลัง และตัวหนังสือเป็นสีสว่างเหมือนกัน ทำให้อ่านได้ยาก
ตัวอย่าง code ที่ใช้กับสีพื้นหลัง
| <body bgcolor="#000000"> กำหนดสีโดยใช้ hexadecimal number <body bgcolor="rgb(0,0,0)"> กำหนดสีโดยใช้ RGB value <body bgcolor="black"> กำหนดสีโดยใช้ชื่อของสีเอง |
การใช้ภาพพื้นหลัง
ภาพพื้นหลังเป็นสิ่งที่ทำให้เว็บของเราดูดีขึ้น แต่เราต้องคำนึงถึงเรื่องต่อไปนี้ด้วย
1.การใส่ภาพพื้นหลังที่ใหญ่มาก จะทำให้เว็บของเราโหลดได้ช้าลง
2.การใส่ภาพพื้นหลังที่ไม่ดีจะทำให้อ่านข้อความได้ยาก
3.การใส่ภาพพื้นหลังอาจทำให้สับสนระหว่างภาพที่เราใช้สื่อความหมายกับภาพพื้นหลังได้
4.การใส่ภาพพื้นหลังทำให้ตัวอักษรอาจลดความเด่นชัดลงไป
code ที่ใช้ใส่ภาพพื้นหลัง
| <body background="logo.jpt"> <body background="http://www.hellomyweb.com/images/logo.jpg"> |
เราใส่ code อ้างอิงที่อยู่ของภาพ ได้แบบเดียวกับที่เราเขียนอ้างอิง hyperlink
3.การใส่ภาพพื้นหลังที่ดี
ตัวอย่างการใส่ภาพพื้นหลังที่ดี ทำให้เว็บไซต์ดูน่าสนใจขึ้น
4.การใส่ภาพพื้นหลังที่ไม่ดี
ตัวอย่างการใส่ภาพพื้นหลังที่ไม่ดีทำให้เว็บไซต์มีประสิทธิภาพลดลงไป
การใส่รูปในเว็บเพจ
.jpg)
HTML
รูปนั้นสามารถบรรยายรายละเอียดได้ดีกว่าคำพูดมาก ดังนั้นแทบทุกเว็บไซต์จึงมีรูปอยู่เกือบทุกเว็บไซต์ ในบทความนี้เราจะมาใส่รูปในเว็บเพจกันลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.ลองใส่รูปในเว็บเพจ
จะเห็นได้ว่าการใส่รูปที่ขยับได้ หรือขยับไม่ได้นั้น code ไม่แตกต่างกัน แต่จะแตกต่างกันที่ตัวรูปเองว่าขยับได้หรือไม่
ฟอร์ตแมตของไฟต์ที่เราจะเห็นกันบ่อยๆ
1.JPEG เหมาะสำหรับภาพถ่าย หรือภาพที่มีความละเอียดและจำนวนสีมากๆ
2.GIF เหมาะสำหรับภาพลายเส้น เช่นการ์ตูน ตัวหนังสือ หรือภาพที่ต้องการสร้างให้ภาพโปร่งใส หรือ ทำให้เคลื่อนไหวได้
3.PNG เหมาะสำหรับภาพที่ต้องการให้โปร่งแสง ขนาดไฟล์จะใหญ่กว่า JPEG แต่คุณภาพจะดีกว่า JPEG
สำหรับการเปลี่ยนฟอร์ตแมตของภาพเราจะใช้โปรแกรมเช่น Photoshop ในการเปลี่ยนซึ่งเรื่องนี้เราจะไปศึกษากันที่หัวข้อ Photoshop กันต่อไป ซึ่งฟอร์ตแมตของภาพจะมีผลมากต่อการทำเว็บไซต์ของเรา
2.ใส่รูปจาก directory ที่ต่างกัน
จะเห็นว่าการใส่รูปจาก directory ที่ต่างกันใช้หลักการเดียวกับการเขียน hyperlink นั่นเอง ซึ่งหากไม่เข้าใจสามารถกลับไปดูได้ที่หัวข้อ เชื่อมต่อเอกสารของเราด้วย hyperlink
3.The Alt Attribute
รูปแบบ <img src="boat.gif" alt="Big Boat"> เราใช้ alt Attribute เพื่อแสดงผลในกรณีที่ไม่สามารถโหลดรูปได้ และแสดงผลเมื่อมีเมาส์ไปอยู่ด้านบน นอกจากนั้นยังไม่ผลต่อการคนหาของ google อีกด้วย
4.การใส่รูปพื้นหลัง
รูปพื้นหลังจะถูกแสดงผลซ้ำกันเองโดยเราแม้ว่ารูปจะรูปจะมีขนาดเล็ก หรือสั้นเพียงใดก็ตาม
5.การจัดตำแหน่งของรูปในตัวอักษร
จะเป็นการจัดตำแหน่งของรูปในตัวอักษร เมื่อเรามีตัวอักษรกับภาพอยู่ด้วยกัน เราจะใช้ Align Attribute เพื่อจัดตำแหน่งของภาพ
6.การจัดตำแหน่งของรูปให้ชิดซ้าย หรือขวา
จะเป็นการจัดรูปของเราให้ชิดซ้ายหรือชิดขวา เมื่อแสดงผล
7.การใช้คำสั่งกำหนดขนาดของรูป
การใส่ขนาดของรูปนั้นเราจะใส่หรือไม่ใส่ก็ได้ ถ้าเราใส่ขนาด การแสดงผลของรูปก็จะเปลี่ยนแปลงตามที่เราใส่ แต่ขนาดของรูปจริงๆจะไม่เปลี่ยนแปลง
8.ทำให้รูปภาพเป็น hyperlink
การทำให้รูปภาพเป็น hyperlink ก็ให้ใส่คำสั่งของ hyperlink ครอบคำสั่งแสดงภาพ เท่านั้นเอง
9.คำสั่งที่ใช้ในการแสดงพิกัดในภาพ
เป็นการแสดงพิกัดที่อยู่ในภาพโดยจะแสดงที่ status bar เป็นพิกัดค่า X,Y ตามจุดที่เมาส์ของเราอยู่ด้านบน โดยจุด 0,0 จะอยู่ที่ด้ายซ้ายบนของภาพ
10.สร้าง hyperlink ด้วยพิกัดในรูปภาพ
ในหัวข้อที่แล้วเราทราบพิกัดจุดของภาพแล้ว ในหัวข้อนี้จะใช้พิกัดจุดในภาพมาสร้าง hyperlink ซึ่งในตัวอย่างจะเห็นว่ามี hyperlink ในรูปภาพอยู่ 2 ที่คือ keyboard , mouse