บทที่ 4 การสร้างเว็บด้วยภาษา HTML Webpage Design and Programming Workshop (7152306) อาจารย์สุธารัตน์ ชาวนาฟาง สาขาวิศวกรรมซอฟต์แวร์ คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏนครปฐม
ภาษา HTML HTML ย่อมาจากคำว่า Hypertext Markup Language มีลักษณะเป็นภาษาในเชิงการบรรยายเอกสารไฮเปอร์มีเดีย มีโครงสร้างภาษา Markup Tags เพื่อทำหน้าที่ควบคุมการแสดงผลข้อมูล รูปภาพ และวัตถุอื่นๆ ผ่านทางโปรแกรมเว็บบราวเซอร์ แสดงในลักษณะ WYSIWYG (What You See Is What You Get) เรียกใช้เอกสารผ่านโปรแกรมเว็บบราวเซอร์ เช่น IE, Mozilla Firefox, และ Google Chrome เป็นต้น มีนามสกุลเป็น .html หรือ .htm Webpage Design and Programming Workshop
ภาษา HTML การเขียนภาษา HTML ด้วยโปรแกรม Notepad การเขียนเปิดดูเอกสาร HTML ด้วยโปรแกรม IE Webpage Design and Programming Workshop
ข้อดี-ข้อเสียภาษา HTML คือโปรแกรมเหล่านี้มัก Generate code ที่เกินความจำเป็นมากเกินไป ทําให้ไฟล์ HTML มีขนาดใหญ่และแสดงผลช้า Webpage Design and Programming Workshop
โครงสร้างภาษา HTML 1. แท็ก (Tag) ใช้สําหรับจัดรูปแบบข้อความ ภาพหรือวัตถุอื่นๆ ในภาษา HTML ส่วนมากจะมี tag เปิด และ tag ปิด โดยมีรูปแบบดังนี้ 1.1 Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR>, <HR> เป็นต้น 1.2 Tag เปิด/ปิด เช่น <h1>…..</h1>, <p>…..</p> เป็นต้น Webpage Design and Programming Workshop
โครงสร้างภาษา HTML 2. Attributes Attributes เป็นส่วนขยายความสามารถของ Tag ใช้สําหรับจัดรูปแบบเพิ่มเติม เช่น ขนาด สี ระยะห่าง เป็นต้น ค่าของ attribute จะอยู่ในเครื่องหมาย "…..…" ในคำสั่ง HTML จะมี Attribute แตกต่างกันไปและมีจำนวนไม่เท่ากัน จะใช้เป็นตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้ เช่น <p align="center"> ข้อความในพารากราฟนี้จัดวางอยู่กึ่งกลางหน้าจอ </p> <hr width="200" color="red" noshade> ใช้สร้างเส้นคั่นยาว 200 pixel สีแดงทึบ Webpage Design and Programming Workshop
รูปแบบการเขียน คำสั่ง รายละเอียด <HTML>…</HTML> <HEAD>…</HEAD> ใช้กำหนดรายละเอียดต่างๆ เกี่ยวกับเว็บเพจ <TITLE>…<TITLE> ข้อความภายในคำสั่งจะแสดงผลในส่วนของ Title Bar ของโปรแกรมเว็บบราวเซอร์ <BODY>…</BODY> คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บบราวเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่าง ๆ Webpage Design and Programming Workshop
รูปแบบการเขียน <HTML> <HEAD> <TITLE> ส่วนของข้อความที่จะปรากฏที่ Title Bar ของ Browser </TITLE></HEAD> <BODY> คำสั่งหรือข้อความที่ต้องการให้แสดง …………………………………………………… ……………………………………… </BODY> </HTML> Webpage Design and Programming Workshop
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้ การกำหนดลักษณะข้อความ การจัดรูปแบบเอกสาร คำสั่งแทรกรูปภาพ คำสั่งการเชื่อมโยงลิงค์ (Links) การสร้างตาราง การสร้างฟอร์ม กลุ่มคำสั่งควบคุมเฟรม Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดรูปแบบของตัวอักษร รูปแบบคำสั่ง <FONT FACE="font name หรือ typeface">..........</FONT> <HTML><HEAD> <TITLE>FONT FACE </TITLE></HEAD> <BODY> ชนิดของฟอนต์ปกติ <BR> <font face ="MS Sans Serif"> ฟอนต์ชื่อ MS Sans Serif </font><BR> <font face = "Tahoma"> ฟอนต์ชื่อ Tahoma </font> </BODY> </HTML> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดข้อความลักษณะหัวเรื่อง รูปแบบคำสั่ง <Hn>....Heading Text ... </Hn> <body> <h1>หัวเรื่อง ที่มีค่า n เป็น 1</h1> <h2>หัวเรื่อง ที่มีค่า n เป็น 2</h2> <h3>หัวเรื่อง ที่มีค่า n เป็น 3</h3> <h4>หัวเรื่อง ที่มีค่า n เป็น 4</h4> <h5>หัวเรื่อง ที่มีค่า n เป็น 5</h5> <h6>หัวเรื่อง ที่มีค่า n เป็น 6</h6> </body> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดขนาดของตัวอักษร กำหนดเป็นตัวเลข รูปแบบคำสั่ง <FONT SIZE="ค่ากำหนดขนาดของตัวอักษร">..........</FONT> <BODY> <FONT SIZE="1">Computer</Font> <FONT SIZE="2">Computer</Font> <FONT SIZE="3">Computer</Font> <FONT SIZE="4">Computer</Font> <FONT SIZE="5">Computer</Font> <FONT SIZE="6">Computer</Font> <FONT SIZE="7">Computer</Font> </BODY> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดขนาดของตัวอักษร กำหนดโดยใช้เครื่องหมายบวกและเครื่องหมายลบ รูปแบบคำสั่ง <BODY> <FONT SIZE="+4">Computer</Font> <FONT SIZE="+3">Computer</Font> <FONT SIZE="+2">Computer</Font> <FONT SIZE="+1">Computer</Font> Computer <FONT SIZE="-1">Computer</Font> <FONT SIZE="-2">Computer</Font> </BODY> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดตัวอักษรให้มีความหนา รูปแบบคำสั่ง <B>…………………..</B> <HTML> <HEAD><TITLE> การกำหนดตัวหนา </TITLE></HEAD> <BODY> ตัวอักษรปกติ COMPUTER ตัวอักษรหนา <B>COMPUTER</B> </BODY> </HTML> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดตัวอักษรให้ขีดเส้นใต้ รูปแบบคำสั่ง <U>…………………..</U> <HTML> <HEAD> <TITLE> การกำหนดการขีดเส้นใต้ </TITLE></HEAD> <BODY> ตัวอักษรปกติ COMPUTER ตัวอักษรที่ขีดเส้นใต้ <U> COMPUTER </U> </BODY> </HTML> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดตัวอักษรให้มีการเอน รูปแบบคำสั่ง <i>…………………..</i> <HTML> <HEAD> <TITLE>การกำหนดอักษรเอน</TITLE></HEAD> <BODY> ตัวอักษรปกติ COMPUTER ตัวอักษรเอน <i>COMPUTER </BODY> </HTML> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดตัวอักษรกระพริบ รูปแบบคำสั่ง <BLINK>…………………..</BLINK> <HTML> <HEAD> <TITLE> การกำหนดตัวอักษรกระพริบ </TITLE></HEAD> <BODY> <Blink> COMPUTER </Font></Blink> แสดงผลได้เฉพาะบน Netscape </BODY> </HTML> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดสีของตัวอักษร รูปแบบคำสั่ง <FONT COLOR="#RGB หรือ กำหนดชื่อสีที่ต้องการ">..........</FONT> <HTML> <HEAD> <TITLE> FONT COLOR </TITLE></HEAD> <BODY text="yellow"> Computer <font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง </font><br> <font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> </BODY> </HTML> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดสีให้กับตัวอักษรทั้งเอกสาร รูปแบบคำสั่ง แบบที่ 1 <BODY Text = "สีพื้นหลัง"> .................................……………… </BODY> แบบที่ 2 (กำหนดสีพื้นหลังจากเลขฐาน 16) <BODY Text = "#RRGGBB"> <HTML> <HEAD><TITLE> Heading </TITLE></HEAD> <BODY Text="#FF0000"> มหาวิทยาลัยราชภัฎนครปฐม </BODY> </HTML> Webpage Design and Programming Workshop
1. การกำหนดลักษณะข้อความ 1. การกำหนดลักษณะข้อความ การกำหนดสีพื้นหลัง รูปแบบคำสั่ง แบบที่ 1 <BODY BGColor = "สีพื้นหลัง"> .................................………………… </BODY> แบบที่ 2 (กำหนดสีพื้นหลังจากเลขฐาน 16) <BODY BGColor = "#RRGGBB"> .................................…………………………….. <HTML> <HEAD><TITLE> BGColor </TITLE></HEAD> <BODY BGColor="#FFFF00"> มหาวิทยาลัยราชภัฎนครปฐม </BODY> </HTML> Webpage Design and Programming Workshop
2. การจัดรูปแบบเอกสาร คำสั่ง หน้าที่ <BR> การขึ้นบรรทัดใหม่ 2. การจัดรูปแบบเอกสาร คำสั่ง หน้าที่ <BR> การขึ้นบรรทัดใหม่ <P> การย่อหน้าใหม่ (Paragraph Tag) คำสั่งการเว้นวรรค <MARQUEE>..........</MARQUEE> การกำหนดตัวอักษรเคลื่อนที่ <SUP>..........</SUP> คำสั่งที่กำหนดตัวอักษรยกระดับ <SUB>..........</SUB> คำสั่งที่กำหนดตัวอักษรพ่วงท้าย (ตัวห้อย) <P ALIGN="LEFT/RIGHT/CENTER">......</P> กำหนดค่าของการจัดการจัดตำแหน่งการแสดงผล "left" การจัดตำแหน่งการแสดงผลอยู่ทางซ้าย "right" การจัดตำแหน่งการแสดงผลอยู่ทางขวา "center" การจัดตำแหน่งการแสดงผลอยู่ตรงกลาง Webpage Design and Programming Workshop
2. การจัดรูปแบบเอกสาร กำหนดค่าของการจัดการจัดตำแหน่งการแสดงผล 2. การจัดรูปแบบเอกสาร กำหนดค่าของการจัดการจัดตำแหน่งการแสดงผล <HTML> <HEAD><TITLE> Paragraph </TITLE></HEAD> <BODY> <H4>การจัดย่อหน้าในเวบเพจ</H4><BR> <P ALIGN="Left">ข้อความชิดซ้ายบรรทัด </P> <P ALIGN="Center">ข้อความกึ่งกลางบรรทัด </P> <P ALIGN="Right">ข้อความชิดขวาบรรทัด </P> </BODY> </HTML> Webpage Design and Programming Workshop
tag <hr>, <hr /> 2. การจัดรูปแบบเอกสาร คำสั่งเส้นคั่นทางแนวนอน รูปแบบคำสั่ง <HR> tag <hr>, <hr /> แสดงผล <hr> หรือ <hr /> <hr width="50%" /> <hr width="200" /> <hr size="1" /> <hr size="3" /> <hr size="5" /> <hr width="50%" align="right" /> <hr color="red" /> <hr size="3" color="red" /> <hr size="5" /> <hr size="5" noshade> หรือ <hr size="5" noshade="noshade"> Webpage Design and Programming Workshop
2. การจัดรูปแบบเอกสาร การแสดงผลแบบรายการแบบมีหมายเลขกำกับ รูปแบบคำสั่ง 2. การจัดรูปแบบเอกสาร การแสดงผลแบบรายการแบบมีหมายเลขกำกับ รูปแบบคำสั่ง <OL value = "1" > <LI>รายการที่ 1 <LI>รายการที่ 2 </OL> ชนิดของ Type สิ่งที่ปรากฏ A แสดงตัวอักษรพิมพ์ใหญ่ (Caplital letters) a แสดงตัวอักษรพิมพ์เล็ก (Small letters) I แสดงตัวเลขโรมันตัวพิมพ์ใหญ่ (Large Roman numerals) i แสดงตัวเลขโรมันตัวพิมพ์เล็ก (Small Roman numerals) 1 แสดงตัวเลขอารบิก (Small Roman numerals) * เป็นค่า default * Webpage Design and Programming Workshop
2. การจัดรูปแบบเอกสาร การแสดงผลแบบรายการแบบมีหมายเลขกำกับ <HTML> 2. การจัดรูปแบบเอกสาร การแสดงผลแบบรายการแบบมีหมายเลขกำกับ <HTML> <HEAD><TITLE> Order List </TITLE></HEAD> <BODY> <OL Type="I"> My computer in my dream <LI>Inter Pentium 4 processor 2.0 GHz <LI>RDRAM 256 MB <LI>Harddisk 50 GB ATA-100 <LI>52X CD-Rom Drive <LI>Speakers (Labtec) 160 Watt <LI>Asus GeForce3 64 MB <LI>Creative Sound Baster <LI>Monitor Sony Wega 20" </OL> </BODY> </HEAD> Webpage Design and Programming Workshop
2. การจัดรูปแบบเอกสาร การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ 2. การจัดรูปแบบเอกสาร การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ ชนิดของเครื่องหมาย รูปแบบคำสั่ง รูปวงกลมทึบ (Disc) <UL type = "square"> <LI>รายการที่ 1 <LI>รายการที่ 2 </UL> รูปวงกลมโปร่ง (Circle) รูปสี่เหลี่ยม (Square) Webpage Design and Programming Workshop
2. การจัดรูปแบบเอกสาร การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ 2. การจัดรูปแบบเอกสาร การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ <BODY> <UL Type="Circle">การศึกษาวิชาพื้นฐานของคณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์ได้แก่ <LI>วิชาการออกแบบโปรแกรม <UL> <LI Type="Disc">(CT211) </UL> <LI>วิชาวิทยาการคอมพิวเตอร์เบื้องต้น <LI Type="Disc">(CT105) <LI>วิชาโครงสร้างไม่ต่อเนื่อง <LI Type="Disc">(CT203) </BODY> Webpage Design and Programming Workshop
3. คำสั่งแทรกรูปภาพ ชนิดไฟล์ รายละเอียด GIF ภาพกราฟิกมีลักษณะลายเส้น ข้อความตัวอักษร หรือภาพการ์ตูนต่างๆ ซึ่งมีสีไม่มากนัก ไฟล์ GIF มีค่าสีสูงสุด 256 สี ดังนั้นที่เซฟจะเป็นภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก JPG แสดงผลของสีได้ 16.7 ล้านสี จึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายหรือภาพอื่นๆ ที่มีสีเยอะ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง PNG ไฟล์ประเภทนี้จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง16.7 ล้านสี สามารถทำเป็นภาพพื้นหลังโปร่งใส แต่ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็กๆ แต่มีการใช้สีมาก เช่น ภาพไอคอนต่างๆ Webpage Design and Programming Workshop
<imgsrc="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" > 3. คำสั่งแทรกรูปภาพ <imgsrc="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" > Alt เป็นการกำหนดข้อความอธิบาย Align = "top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ Align = "middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ Align = "bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ Align = "left" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ Align = "right" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ Width การกำหนดขนาดความกว้างของรูปภาพ Height การกำหนดขนาดความสูงของรูปภาพ Vspace / Hspace เป็นการกำหนดระยะเว้นขอบจากด้านซ้ายกับรูปภาพ ในการแสดงข้อความล้อมรอบรูป Border เป็นการกำหนดเส้นกรอบของรูปภาพ Webpage Design and Programming Workshop
3. คำสั่งแทรกรูปภาพ <html> <head> <title>คำสั่งใส่รูปภาพ </title></head> <body> <imgsrc="file:///C|/Users/Administrator/Desktop/picLOGO.jpg" width="851" height="315"/> </body> </html> Webpage Design and Programming Workshop
3. คำสั่งแทรกรูปภาพ การกำหนดขนาดของรูปภาพ <html> head> <title> Insert Images : การกำหนดขนาดภาพ</title></head> <body> แสดงการกำหนดขนาดภาพ<br> <imgsrc="daffy.gif"><br> <imgsrc="daffy.gif" width="50" height="51"><br> <imgsrc="daffy.gif" width="150" height="153"><br> </body> </html> Webpage Design and Programming Workshop
3. คำสั่งแทรกรูปภาพ ส่วนการจัดวางตำแหน่งรูปภาพ <html> <head> <title> Insert Images :ตำแหน่งและเส้นขอบรูปภาพ </title></head> <body> <div align="center">ตำแหน่งและเส้นขอบรูปภาพ<br> <imgsrc="kerokero.gif" border="3"> </div> </body> </html> Webpage Design and Programming Workshop
3. คำสั่งแทรกรูปภาพ คำสั่งที่นำรูปภาพมาเป็นพื้นหลัง รูปแบบคำสั่ง background คือการกำหนดรูปภาพ bgproperties fixed คือการกำหนดให้รูปภาพคงที่ <body background="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" bgproperties=fixed> Webpage Design and Programming Workshop
3. คำสั่งแทรกรูปภาพ คำสั่งที่นำรูปภาพมาเป็นพื้นหลัง <html> <head> <title> คำสั่งที่นำรูปภาพมาเป็นพื้นหลัง </title></head> <body background="bgimage.gif"> ข้อความที่แสดงในส่วนเนื้อหา .................................... .......................... </body> </html> Webpage Design and Programming Workshop
3. คำสั่งแทรกรูปภาพ คำสั่งที่นำรูปภาพมาเป็นพื้นหลัง รูปแบบคำสั่ง background คือการกำหนดรูปภาพ bgproperties fixed คือการกำหนดให้รูปภาพคงที่ <body background="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" bgproperties=fixed> Webpage Design and Programming Workshop
4. คำสั่งการเชื่อมโยงลิงค์ (Links) การลิงค์ภายในเว็บเพจเดียวกัน การเชื่อมโยงนอกเว็บไซต์ การเชื่อมโยงแบบอีเมล์ <A HREF="table.html" >................</A> <a href="http://URLที่ต้องการจะเชื่อมโยงไป">.................</a> <a href = “mailto:ชื่อ E-mail address”>................</a> Webpage Design and Programming Workshop
4. คำสั่งการเชื่อมโยงลิงค์ (Links) การเชื่อมโยงแบบ Download การเชื่อมโยงไฟล์ด้วยรูปภาพ <a href=“URL/filename.ppt”>ไฟล์เอกสารนำเสนอ เรื่อง....</a> <a href=“URL/filename.doc”>ไฟล์เอกสารนำเสนอ เรื่อง....</a> <a href=“URL/filename.xls”>ไฟล์เอกสารนำเสนอ เรื่อง....</a> <a href=“URL/filename.pdf”>ไฟล์เอกสารนำเสนอ เรื่อง....</a> <a href="ไฟล์ที่มีนามสกุล .html"> <imgsre="ชื่อไฟล์รูปภาพ .gif หรือ .jpg" alt="การเชื่อมโยงโดยรูปภาพ"></a> Webpage Design and Programming Workshop
5. การสร้างตาราง โครงสร้างของตาราง Tag คำอธิบาย <TABLE> ... </TABLE> คำสั่งในการสร้างตาราง <CAPTION> ... </CAPTION> คำสั่งในการกำหนดข้อความกำกับตาราง <TR> ... </TR> คำสั่งในการกำหนดแถวของตาราง 1 แถว <TH> ... </TH> คำสั่งในการกำหนดส่วนหัวของตารางแถวแรก <TD> ... </TD> คำสั่งในการกำหนดส่วนของข้อมูลในแถว หรือทำคอลัมน์ Webpage Design and Programming Workshop
5. การสร้างตาราง Attributes ในการสร้างตาราง Attributes คำอธิบาย Align กำหนดการวางตำแหน่งตางราง มี 3 ลักษณะ - Left กำหนดจัดวางชิดซ้าย (เป็นค่า default) - Right กำหนดจัดวางชิดขวา - Center กำหนดจัดวางกึ่งกลาง Border กำหนดแสดงความหนาของเส้นตาราง มีหน่วยเป็น Pixel Height กำหนดความสูงของตาราง มีหน่วยเป็น Pixel และ Percent Width กำหนดความกว้างของตาราง มีหน่วยเป็น Pixel และ Percent CellSpacing กำหนดช่องว่างระหว่างตาราง CellPadding กำหนดช่องว่างระหว่างบรรทัดของตาราง Webpage Design and Programming Workshop
5. การสร้างตาราง การสร้างตาราง <TABLE> <TR> <TD>ช่องที่ 1</TD> <TD>ช่องที่ 2</TD> </TR> <TD>ช่องที่ 3</TD> <TD>ช่องที่ 4</TD> </TABLE> Webpage Design and Programming Workshop
5. การสร้างตาราง การกำหนดเส้นของตาราง <TABLE BORDER="ค่าตัวเลข” BORDERCOLOR="#RGB หรือชื่อสี” > <CAPTION>ข้อความ</CAPTION> <TR> <TH>.........</TH> </TR> <TD>.........</TD> <TABLE> Webpage Design and Programming Workshop
5. การสร้างตาราง การกำหนดเส้นของตาราง <TABLE BORDER="1"> <TR> <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD> </TR> <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD> </TABLE> Webpage Design and Programming Workshop
5. การสร้างตาราง กำหนดความกว้างและความสูงของตาราง <TABLE BORDER="1" WIDTH="90%"> <TR> <TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD> </TR> <TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD> </TABLE> Webpage Design and Programming Workshop
5. การสร้างตาราง การกำหนดการจัดวางข้อความ <TABLE BORDER="1" WIDTH="95%" HEIGHT="100"> <TR> <TD align="left" valign="top">ซ้ายบน</TD> <TD align="right" valign="middle">ขวากลาง</TD> </TR> <TD align="center" valign="bottom">กลางล่าง</TD> <TD align="right" valign="top">ขวาบน</TD> </TABLE> Webpage Design and Programming Workshop
5. การสร้างตาราง การแทรกภาพในตาราง <TABLE BORDER="1"> <TR> <TD> <IMG SRC="kerokero.gif"> </TD> <TD> รูปด้านข้างนี้คือ กบเคโระ </TD> </TR> </TABLE> Webpage Design and Programming Workshop
การสร้างฟอร์ม
6. การสร้างฟอร์ม คำสั่ง <form name="form_name" method="get/post" action="url" target="window name"> …..... </form> คำสั่ง ความหมาย name ชื่อของ Form METHOD เป็นรูปแบบของวิธีในการส่งข้อมูล ได้แก่ GET เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร POST เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server ACTION คือตำแหน่งหรือ URL ของ CGI Script ที่วางไว้ที่ Server ที่กำหนดใน Domain ต่างๆ หรือใช้ ค่า mailto: ก็ได้ target คือหน้าต่างที่จะให้ผลของ Script แสดงผล โดยมีคำสั่งให้เลือกดั่งนี้ Blank, self หรือ parent Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.1 Text Fields size="number" ความกว้างของช่องกรอกข้อมูล maxlengt="number" จำนวนตัวอักษรสูงสุดที่กรอกได้ disabled lock ไม่ให้ช่องกรอกข้อมูลใช้งานได้ readonly ให้ช่องกรอกข้อมูลอ่านได้อย่างเดียว กรอกข้อมูลไม่ได้ <form> <input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number" maxlength="number" disabled readonly /> </form> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.2 Checkbox จะแสดงผลตัวเลือกทั้งหมดที่เรากำหนดไว้ โดยจะแสดงช่องทำเครื่องหมายรูปสี่เหลี่ยมอยู่หน้าตัวเลือก <form> <input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked> </form> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.2 Checkbox <input type="checkbox" name="selection1" value="Yes" checked="checked" /> Selection 1 <input type="checkbox" name="selection2" value="Yes" /> Selection 2 <input type="checkbox" name="selection3" value="Yes" /> Selection 3 Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.3 Radio จะแสดงผลตัวเลือกทั้งหมดที่เรากำหนดไว้ โดยจะแสดงช่องทำเครื่องหมายเป็นรูปวงกลม ตัวอย่าง <form> <input type="radio" name="ชื่อ radio" value="ค่าข้อมูล"checked="checked" /> </form> <input type="radio" name="sex" value="M" checked="checked" /> <input type="radio" name="sex" value="F" /> Female Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.4 Password SIZE เป็นการกำหนดความกว้างของ Textbox MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล Textbox <form> <input type="password" name="ชื่อ input password" value="ค่าข้อมูล" size="number" maxlength="number" /> </form> <input type="password" name="txt_passw" value="1234" size="10" maxlength="30" /> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.5 File upload ตัวอย่าง <FORM> <INPUT TYPE="FILE" NAME="ชื่อ" INPUT FILE" VALUE="ค่าข้อมูล" SIZE="NUMBER" MAXLENGTH="NUMBER" /> </FORM> <INPUT TYPE="FILE" NAME="FILENAME" SIZE="30" /> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.6 Button ตัวอย่าง คือการกำหนดให้แอตทริบิวต์ Type มีค่าเป็น Button นอกจากนี้ต้องกำหนดชื่อที่ต้องการให้ปรากฏบนปุ่มด้วย ไม่เช่นนั้นบนปุ่มจะไม่มีชื่อใด ๆ ปรากฏเลย ตัวอย่าง <form> <input type="button" name="ชื่อ button" value="ค่าข้อมูล" /> </form> <input type="button" name="cancel" value="Cancel" /> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.7 Submit คำสั่งนี้จะทำหน้าที่ส่งข้อมูลแบบฟอร์มสอบถาม ไปยังเซอร์ฟเวอร์ของเราเพื่อทำการประมวลผลข้อมูล การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกำหนดค่าที่จะแสดงบนปุ่มที่ VALUE ตัวอย่าง <input type="button" name="cancel" value="Cancel" /> <input type="button" name="save" value="Save" /> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.8 Reset คำสั่งจะทำหน้าที่ในการยกเลิกข้อมูลต่าง ๆ ที่ทำการป้อนลงในแบบฟอร์ม เพื่อทำการป้อนข้อมูลลงในแบบฟอร์มใหม่ การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม ตัวอย่าง <form> <input type="button" name="ชื่อ button" /> </form> <input type="reset" name="Clear" /> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.9 Select เป็นคำสั่งที่ใช้สำหรับสร้างตัวเลือกที่อยู่ในกรอบตัวเลือก - size จำนวนตัวเลือกที่ให้มองเห็น - multiple ให้ผู้ใช้งานเลือกหลายตัวเลือกได้ โดยกดปุ่ม ctrl <FORM> <SELECT NAME="ชื่อ SELECT" SIZE="5" MULTIPLE> <OPTION VALUE="1" SELECTED="SELECTED">OPTION 1</OPTION> <OPTION VALUE="2">OPTION 2</OPTION> <OPTION VALUE="3">OPTION 3</OPTION> <OPTION VALUE="4">OPTION 4</OPTION> <OPTION VALUE="5">OPTION 5</OPTION> </SELECT> </FORM> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม 6.10 Textarea คำสั่งนี้จะเป็นการกำหนดการสร้างกรอบป้อนข้อมูลแบบหลายบรรทัด โดยในที่นี้จะมีคุณสมบัติในการกำหนดความกว้าง และความสูงของกรอบป้อนข้อความคือ ROWS เป็นการกำหนดจำนวนแถวที่ใช้ในการป้อนข้อมูลต่าง ๆ ลงในกรอบป้อนข้อความ COLS เป็นการกำหนดจำนวนคอลัมน์สูงสุดในการป้อนข้อมูลในแต่ละแถว ซึ่งจำนวนคอลัมน์ที่เหมาะสมที่สุดจะมีค่าตัวเลขเท่ากับ 80 Characters <form> <textarea name="ชื่อ textarea" rows="number" cols="number" wrap="off"> ข้อความใน textareas </textarea> </form> Webpage Design and Programming Workshop
6. การสร้างฟอร์ม Webpage Design and Programming Workshop
Question and Answer