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

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

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

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 ด้วยรูปภาพ

    3.สร้าง hyperlink ในหน้าเดียวกัน
    ในหน้าที่มีบทความเยอะมากๆ เราต้องการสร้าง link เพื่อไปยังหัวข้อที่อยู่ในหน้าเดียวกันเพื่อความสะดวกในการอ่านบทความ โดยเราจะตั้งจุดที่เราต้องการจะ link ไปหาโดยใช้ <a name ='ชื่อ'> </a>
รูปแบบของการสร้าง hyperlink ในหน้าเดียวกัน

    สร้างจุดที่ต้องการจะลิงค์ไป

สร้างลิงค์

<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 แนวตั้ง

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

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

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.หลัก    คือจำนวนตารางในแนวตั้ง

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

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

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

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

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

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

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

    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 แบบไม่มีลำดับ

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

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

    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 ที่ใช้ใส่ภาพพื้นหลัง

เราใส่ code อ้างอิงที่อยู่ของภาพ ได้แบบเดียวกับที่เราเขียนอ้างอิง hyperlink

    3.การใส่ภาพพื้นหลังที่ดี
    ตัวอย่างการใส่ภาพพื้นหลังที่ดี ทำให้เว็บไซต์ดูน่าสนใจขึ้น

    4.การใส่ภาพพื้นหลังที่ไม่ดี
    ตัวอย่างการใส่ภาพพื้นหลังที่ไม่ดีทำให้เว็บไซต์มีประสิทธิภาพลดลงไป

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

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

รายชื่อสีแบบ 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

HTML

โครงสร้างคำสั่งของ HTML

HTML

คำสั่งในการจัดหน้า

HTML

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

HTML

เชื่อมต่อเอกสารของเราด้วย hyperlink

HTML

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

HTML

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

HTML

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

HTML

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

HTML

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

HTML

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

HTML

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

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