HTML


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

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 --!>




คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ

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 แทน ตามแบบด้านล่าง




เชื่อมต่อเอกสารของเราด้วย 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>



แบ่งหน้าจอโดยใช้ Frame

HTML

    ปรกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frame 

เรามาลองสร้าง Frame กันง่ายๆดู 

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.การแบ่ง frame แบบแนวตั้ง 
    frame ในแนวตั้งซึ่งจะเปิดเว็บเพจถึง 3 ไฟล์ในหน้าเดียวกันโดยเราจะแบ่งขนาดของ frame เป็น % หรือเป็น (px) pixel ก็ได้ 

    รูปแบบของ frame แนวตั้ง 

<html>

<frameset cols=ขนาดเฟรม1,ขนาดเฟรม2>

<frame src='เว็บเพจ1'>

<frame src='เว็บเพจ2'> 

</frameset>

</html>


    2.การแบ่ง frame แบบแนวนอน 
    การแบ่งแบบแนวนอน ก็สามารถทำได้เช่นเดียวกัน ซึ่งแบ่งเป็น % หรือ px (pixel) ก็ได้เช่นกัน ซึ่งเราจะใช้ rows (แถว) แทน cols (หลัก) 

    รูปแบบของ frame แนวนอน 

<html>

<frameset rows=ขนาดเฟรม1,ขนาดเฟรม2>

<frame src='เว็บเพจ1'>

<frame src='เว็บเพจ2'> 

</frameset>

</html>


    3. <noframes> 
    ถ้า browser ของคุณไม่สนับสนุน frame จะมีคำเตือนตามที่เราเขียนขึ้นมา

<html>

<noframes>

<body> คำเตือน </body>

</noframes>

</html>


    4.ลองเอา frame แนวตั้งและแนวนอนมารวมกัน 
    ในตัวอย่างนี้จะนำเอา frame แนวตั้งและแนวนอนมารวมกัน ซึ่งเป็นการซ้อนกันของ frame นั่นเอง

    5.ห้ามเปลี่ยนขนาดของ frame 
    frame ในตัวอย่างที่ผ่านมานั้นจะสังเกตุได้ว่าสามารถเปลี่ยนขนาดได้ตามใจของเรา แต่ถ้าเราไม่ต้องการให้ผู้ใช้เปลี่ยนขนาดเราต้องใช้คำสั่ง noresize ซึ่งเป็น Attributes มาช่วย 

    6.การใช้ link ให้สัมพันธ์กันใน frame 
    ข้อดีของ frame ที่จะเห็นได้ก็คือ ใช้ในการทำเมนู ดังในตัวอย่างนั่นเองซึ่งจะต้องใช้ ไฟล์ 2 ไฟล์ ดังนี้ 

    1.ไฟล์ที่ใช้จัด frame ดังในตัวอย่างซึ่งจะเห็นว่าเราได้ใส่ชื่อ(name) ให้กับ frame ที่เราสร้างขึ้นมาด้วย 

    2. ไฟล์ที่ใช้ทำเป็น link ของเราซึ่งมีคำสั่ง target='frame' หมายความว่าให้แสดงผลใน frame ที่มีชื่อว่า frame2 นั่นเอง มี soure code ดังนี้ 

<html>

<body>

    เว็บไซต์ที่น่าสนใจ

    <a href="http://www.hellomyweb.com" target="frame2">

    hellomyweb</a>

    <a href="http://www.w3schools.com" target="frame2"> 

    w3schools </a>

</body>

</html>


    7. การใช้ link ให้ปิด frame ทั้งหมด
    ในตัวอย่างนี้จะเป็นการสร้าง link ให้ทำลาย frame ทั้งหมด ซึ่งเราจะใช้คำสั่ง target ซึ่งมีรายละเอียดดังนี้ 

    1.target='_top'เป็นคำสั่งให้เปิด link ทับหน้าเดิมทั้งหมด ซึ่งจะปิด frame ทั้งหมดเช่นเดียวกัน

    2.target='_blank' เป็นคำสั่งให้เปิด link ในหน้าใหม่

    3.target='_self' เป็นคำสั่งให้เปิด link ใน frame ปัจจุบัน

    8. iframe
    เป็น frame รูปแบบหนึ่ง นิยมใช้ในส่วนที่เป็นโฆษณา เนื่องจากทำให้เราสะดวกไม่ต้องมาแก้ที่หน้าหลักแต่แก้ที่หน้าที่เป็นโฆษณาได้เลย ซึ่งเราอาจเอาให้หน้าที่เป็นโฆษณาให้ลูกค้าแก้ไขโดยไม่ต้องยุ่งกับหน้าหลักของเรา 

** เราจะใช้ Frameset ใน <body> </body> ไม่ได้ยกเว้นกรณีของ <noframes> 




Table คำสั่งที่สำคัญสุดในการทำเว็บเพจ

HTML

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

ลองสร้างตารางดู

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ลองสร้างตารางดู 
    ตารางจะแบ่งออกเป็น 2 ส่วน คือ 

    1.แถว    คือจำนวนตารางในแนวนอน

    2.หลัก    คือจำนวนตารางในแนวตั้ง

รูปแบบของคำสั่งตาราง

<table>

    <tr>

        <td></td>

    </tr>

</table>


    2.เส้นขอบตาราง 
    เมื่อพูดถึงตารางก็ต้องพูดถึงเส้นขอบของตาราง ซึ่งในบทนี้จะพูดถึงการกำหนดเส้นขอบของตาราง โดยขอบของตารางเราจะใช้ Attibute คำสั่ง border ในการควบคุม 

รูปแบบของคำสั่ง border

<table border="ขนาดเส้นของขอบ"> <tr><td></td></tr> </table>


    3.หัวข้อตาราง 
    ปรกตินั้นถ้าเราจะเขียนส่วนที่เป็นหัวข้อเราจะใช้ h tag หรือ <b> เพื่อเน้นส่วนที่เป็นหัวข้อ แต่ในส่วนของตารางมีคำสั่งให้เราใช้กันอยู่แล้ว นั่นคือ th 

รูปแบบของคำสั่ง border

<table> <tr><th></th></tr> </table>


    4.ใส่ช่องว่างให้ตาราง 
    ถ้าเรามีตาราง 6 ช่อง แต่มีข้อมูลอยู่เพียง 5 ชิ้น เมื่อเราเขียนข้อมูลใส่ตารางจะพบว่าตารางแสดงผลมีเส้นขาดหายไปดังนั้นเราจึงต้องใส่ค่าว่างไปให้ตารางเพื่อแสดงผลเส้นที่ขาดหายไป ด้วยการใช้ &nbsp; 

การใช้ช่องว่าง

<table> <tr><td> &nbsp; </td></tr> </table>


    5.การผสานตาราง 
    ถ้าข้อมูลเขาเรา มี 1 หัวข้อใหญ่แต่มีข้อมูล ย่อยๆ 2 ชนิด ทำให้เราต้องทำการผสานตารางตามตัวอย่าง โดยมีหลักดังนี้

    1.ผสานในหลักให้ใช้คำสั่ง colspan = "จำนวนช่องที่ต้องการผสาน" 

    2.ผสานในแถวให้ใช้คำสั่ง rowspan = "จำนวนช่องที่ต้องการผสาน" 

    6.ตารางซ้อนตาราง 
    การทำตารางซ้อนตาราง เป็นการจัดหน้าเว็บที่ใช้กันบ่อยมาก และเป็นการใช้งานที่มีประสิทธิภาพ ทำให้จัดเรียงข้อมูลได้ดีขึ้น

    7.กำหนดระยะห่างของช่อง
    ในตัวอย่างจะเป็นการแสดงการใช้งาน cellpadding และ cellspacing โดยทั้ง 2 อย่างมีการใช้งานดังนี้ 

    1. cellpadding    ใช้กำหนดระยะห่างระหว่างข้อมูล กับเส้นขอบตาราง 

    2. cellspacing    ใช้กำหนดระยะห่างระหว่างเส้นตารางภายนอก และภายใน ให้ลองสังเกตุจากตัวอย่างดู จะเห็นว่าแตกต่างจากการใช้ border 

    8.ใส่พื้นหลังให้ตาราง
    ในบทนี้จะใส่พื้นหลังให้กับตาราง และช่องของตาราง โดยพื้นหลังมี 2 แบบคือ 

    1.แบบที่เป็นสี ใช้คำสั่ง bgcolor 

    2.แบบที่เป็นรูปภาพ ใช้คำสั่ง background 

    9.ขนาดตาราง
    ขนาดของตารางกำหนดได้โดย Attibute คำสั่ง width และความสูงใช้คำสั่ง height ซึ่งเราจะกำหนดหน่วยเป็น % หรือ px(pixel) แล้วแต่จุดประสงค์ 

    1.แบบเปอร์เซนต์ (%) ขนาดจะเปลี่ยนตามขนาดหน้าต่างของ web browser ที่เปลี่ยนแปลง 

    2.แบบ pixel (px) ขนาดจะเท่าที่เรากำหนดตลอดไม่มีการเปลี่ยนแปลง ถ้าเราไม่กำหนดหน่วยเป็น % ตัวของ html จะกำหนดให้เป็น px เสมอ 

    10.การจัดเรียงตัวอักษรในช่องของตาราง
    ในบทนี้จะเป็นเรื่องของ การจัดเรียงตัวอักษร หรือ รูปภาพ ในช่องของตารางให้ชิดซ้าย หรือชิดขวา หรือจัดเข้ากึ่งกลาง ซึ่งจะทำให้ตารางข้อมูลดูได้ง่ายขึ้น ซึ่งเราจะใช้ Attibute คำสั่ง Align 

    11.การกำหนดขอบของตาราง
    ขอบของตารางเราสามารถกำหนดได้ว่าจะให้มีขอบที่ด้านใดบ้าง โดยใช้ Attibute คำสั่ง frame ซึ่งมีค่าที่ใส่ให้ frame ตามข้อมูลด้านล่าง

BORDERแสดงเส้นกรอบทุกด้านของช่องตาราง
VOIDลบเส้นกรอบทุกด้านของตาราง
HSIDESแสดงเส้นด้านบนและด้านล่างของช่อางตาราง
ABOVEแสดงเส้นด้านบนของช่องตาราง
BELOWแสดงเส้นด้านล่างของช่องตาราง
VSIDESแสดงเส้นด้านซ้ายและด้านขวาของช่องตาราง
LHSแสดงเส้นด้านซ้ายของช่องตาราง
RHSแสดงเส้นด้านขวาของช่องตาราง


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



list จัดข้อมูลในเว็บเพจให้เป็นระเบียบ

HTML

list tag ใช้ในการจัดข้อมูลเป็นชุดๆ หรือเป็นหัวข้อ ซึ่งจะทำให้ข้อมูลอ่านได้ง่ายขึ้น ซึ่ง list แบ่งได้เป็น 2 แบบด้วยกัน 

ลองสร้าง list ดู

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.list แบบไม่มีลำดับ 
    เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้ 

    รูปแบบ list แบบไม่มีลำดับ

    <UL>

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

        <LI> ข้อมูล 1 </LI> 

        <LI> ข้อมูล 2 </LI> 

    </UL>


    2.list แบบมีลำดับ 
    เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้ 

    รูปแบบ list แบบมีลำดับ

    <OL>

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

        <LI> ข้อมูล 1 </LI> 

        <LI> ข้อมูล 2 </LI> 

    </OL>


    3.การใส่สัญลักษณ์ให้กับ list
    การใส่สัญลักษณ์ให้กับ list เราจะเห็นสัญลักษณ์หน้า list อยู่แล้วซึ่งสัญลักษณ์ตัวนั้นสามารถเปลี่ยนแปลงได้โดยใช้ Attibuet คำสั่ง type มีรายละเอียดดังนี้ 

    สัญลักษณ์ที่ใช้กับแบบไม่มีลำดับ

TYPEสัญลักษณ์
discวงกลมทึบ
circleวงกลมโปร่งใส
squareสี่เหลี่ยมทึบ


    สัญลักษณ์ที่ใช้กับแบบมีลำดับ

TYPEสัญลักษณ์
Aเรียงแบบ A,B,C
aเรียงแบบ a,b,c
Iเรียงแบบเลขโรมัน I,II,III
iเรียงแบบเลขโรมัน i,ii,iii


    4.การใช้ list ซ้อน list
    ในตัวอย่างจะเป็นการทำ list ซ้อน list ซึ่ง html จะเปลี่ยนสัญลักษณ์ให้อัตโนมัติ 

    5.list แบบจำกัดความ
    Definition list เป็น list ที่ใช้กับการให้คำจำกัดความ ดังตัวอย่าง

    list เป็นคำสั่งที่ใช้สำหรับการแสดงข้อมูลเป็นชุดๆ ซึ่งจะสะดวกและ อ่านข้อมูลได้ง่าย เป็นทางเลือกทางหนึ่งที่ดีในการใช้แสดงบทความ 




การสร้างแบบฟอร์ม

HTML

    เว็บไซต์นั้นต่างจากเอกสารธรรมดา ตรงที่สามารถตอบโต้กับผู้ใช้งานได้ เช่นการใช้ search (ค้นหา) ในเว็บไซต์ hellomyweb.com ช่องรับค่าของ search นั้นก็คือแบบฟอร์มใน html นั่นเอง

    เมื่อได้รับค่าจากแบบฟอร์ม search แล้วที่ฝั่ง server จะนำไปประมวลผลต่อโดยจะมีโปรแกรม (CGI Program) ที่ใช้สำหรับประมวลผล CGI Program จะเขียนโดยใช้ภาษา PHP , ASP , Python และอื่นๆอีกมากมาย CGI Program ที่เราเขียนไว้จะรับค่าจาก search แล้วนำไปประมวลผลหาบทความที่ใกล้เคียงกับค่าที่รับไป 

    ในบทความนี้เราจะมาศึกษาในเรื่องฟอร์ม ของ HTML แต่จะไม่ลงลึกไปถึงการเขียน CGI Program ซึ่งหาท่านสนใจ CGI Program ก็ให้หาอ่านจากหัวข้อของ PHP ในเว็บไซต์ของเราได้ 

ลองสร้าง form ดู

     รูปแบบของ form 

<form>

    ชนิดของค่าที่รับเช่น text , password 

</form>


ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.แบบฟอร์มรับค่าตัวอักษร
    ในตัวอย่างเป็นการเขียน Text form ผู้ใช้งานสามารถกรอกข้อมูลที่เป็นตัวอักษรลงไปได้ จะสังเกตุว่า ใน input tag จะมี Attibute name อยู่ซึ่งเราจะใช้ในการอ้างอิงเมื่อเขียน CGI Program เราสามารถกำหนดขนาดของ text form ได้โดย ใช้ Attibute คำสั่ง size="ขนาดที่ต้องการ" 

    2.แบบฟอร์มรับค่า password 
    ในตัวอย่างเป็นการเขียน Password form เมื่อผู้ใช้กรอกข้อมูลลงไปในฟอร์มจะแสดงสัญลักษณ์ " ? " เพื่อไม่ให้คนอื่นเห็น password ที่เรากรอก

    3.ratio form 
    ratio form เป็นฟอร์มที่ให้เลือกผลลัพธ์เพียงค่าเดียวเท่านั้น

    4.Checkboxes form 
    Checkboxes เป็นฟอร์มที่ให้เลือกผลลัพธ์ได้หลายค่า

    5.สร้างปุ่มยืนยันรับค่า 
    สังเกตุที่ search เป็นปุ่ม ปุ่มหนึ่งที่ใช้ในการยืนยันว่าเราพิมพ์ข้อมูลเสร็จแล้วหรือเลือกเสร็จแล้วเราต้องการให้ส่งค่านี้ไปให้ CGI program ประมวลผล ปุ่มยืนยันจะใช้ในทุกฟอร์มของ html ซึ่งการส่งค่าไปประมวลผลจะมีด้วยการ 2 method คือ get , post ซึ่งเราจะพูดกันในหัวข้อของ PHP 

    6.drop down box 
    drop down เมนูในการเลือกข้อมูลแบบหนึ่ง ที่ให้คุณเลือกข้อมูลได้ข้อมูลเดียว เหมาะกับการใช้กับข้อมูลที่มากๆ เช่น กรอกข้อมูลที่อยู่ โดยใช้ dropdown ให้เลือกจังหวัด

    7.text area 
    text area เหมาะสำหรับแบบฟอร์มที่ต้องกรอกข้อมูลจำนวนมากๆเช่น ที่อยู่ 

    8. Fieldset 
    fieldset จะสร้างขอบให้ข้อมูลของคุณและมีหัวข้อให้ทำให้อ่าข้อมูลได้ง่ายขึ้น 




การใส่รูปในเว็บเพจ

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 




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

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.การใส่ภาพพื้นหลังที่ไม่ดี
    ตัวอย่างการใส่ภาพพื้นหลังที่ไม่ดีทำให้เว็บไซต์มีประสิทธิภาพลดลงไป




การใช้งานสีในเว็บเพจ

สีสันนั้นอยู่คู่กับเว็บเพจอยู่แล้ว เพราะนอกจากจะทำให้เว็บดูสวยงามน่าสนใจแล้ว ยังช่วยให้การอธิบายข้อความดีขึ้นอีก ในบทความนี้เราจะมีดูการใช้งานสีกัน

รายชื่อสีแบบ HEX value และ แบบ RGB value
ColorColor HEXColor RGB
 #000000rgb(0,0,0)
 #FF0000rgb(255,0,0)
 #00FF00rgb(0,255,0)
 #0000FFrgb(0,0,255)
 #FFFF00rgb(255,255,0)
 #00FFFFrgb(0,255,255)
 #FF00FFrgb(255,0,255)
 #C0C0C0rgb(192,192,192)
 #FFFFFFrgb(255,255,255)

ตัวอย่าง code สีในแบบ hex value และแบบ ชื่อของสี

Color NameColor HEXColor
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 



ไม่มีความคิดเห็น: