วันอาทิตย์ที่ 17 มกราคม พ.ศ. 2559

บทนำ 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 โดยการใช้งานหลักจะมีดังนี้

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

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

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

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

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

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

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

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

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

แบ่งหน้าจอโดยใช้ 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

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	แสดงเส้นด้านขวาของช่องตาราง

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