More Related Content Similar to การสร้่างเว็บด้วยภาษา html
Similar to การสร้่างเว็บด้วยภาษา html (20) More from CC Nakhon Pathom Rajabhat University
More from CC Nakhon Pathom Rajabhat University (20) การสร้่างเว็บด้วยภาษา html2. ภาษา HTML
Webpage Design and Programming Workshop
• HTML ย่อมาจากคาว่า Hypertext Markup Language
• มีลักษณะเป็นภาษาในเชิงการบรรยายเอกสารไฮเปอร์มีเดีย
• มีโครงสร้างภาษา Markup Tags เพื่อทาหน้าที่ควบคุมการแสดงผลข้อมูล
รูปภาพ และวัตถุอื่นๆ ผ่านทางโปรแกรมเว็บบราวเซอร์
• แสดงในลักษณะ WYSIWYG (What You See Is What You Get)
• เรียกใช้เอกสารผ่านโปรแกรมเว็บบราวเซอร์ เช่น IE, Mozilla Firefox, และ
Google Chrome เป็นต้น
• มีนามสกุลเป็น .html หรือ .htm
3. ภาษา HTML
Webpage Design and Programming Workshop
การเขียนภาษา HTML ด้วยโปรแกรม
Notepad
การเขียนเปิดดูเอกสาร HTML ด้วย
โปรแกรม IE
4. ข้อดี-ข้อเสียภาษา HTML
Webpage Design and Programming Workshop
ข้อดี
สามารถใช้ได้กับเครื่องคอมพิวเตอร์และระบบปฏิบัติการได้หลากหลาย
ชนิดและไฟล์ที่ได้จากการสร้างเอกสาร HTML ยังมีขนาดเล็กอีกด้วย
ข้อเสีย
คือโปรแกรมเหล่านี้ มัก Generate code ที่เกินความจาเป็นมากเกินไป ทาให้
ไฟล์ HTML มีขนาดใหญ่และแสดงผลช้า
5. โครงสร้างภาษา HTML
Webpage Design and Programming Workshop
1. แท็ก (Tag)
• คือคาสั่งที่ใช้ในภาษา HTML อยู่ในเครื่องหมาย <และ>
• ใช้สาหรับจัดรูปแบบข้อความ ภาพหรือวัตถุอื่นๆ ในภาษา HTML
ส่วนมากจะมี tag เปิด และ tag ปิด โดยมีรูปแบบดังนี้
1.1 Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR>, <HR> เป็นต้น
1.2 Tag เปิด/ปิด เช่น <h1>…..</h1>, <p>…..</p> เป็นต้น
6. โครงสร้างภาษา 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
7. รูปแบบการเขียน
คาสั่ง รายละเอียด
<HTML>…</HTML> เป็นคาสั่งเริ่มต้นในการเขียนโปรแกรม และคาสั่ง </HTML> เป็น
การสิ้นสุดโปรแกรม
<HEAD>…</HEAD> ใช้กาหนดรายละเอียดต่างๆ เกี่ยวกับเว็บเพจ
<TITLE>…<TITLE> ข้อความภายในคาสั่งจะแสดงผลในส่วนของ Title Bar ของ
โปรแกรมเว็บบราวเซอร์
<BODY>…</BODY> คาสั่งนี้ เป็นส่วนที่สาคัญในการแสดงผลในเว็บบราวเซอร์ ซึ่งจะ
ประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่าง ๆ
Webpage Design and Programming Workshop
8. รูปแบบการเขียน
Webpage Design and Programming Workshop
<HTML>
<HEAD>
<TITLE> ส่วนของข้อความที่จะปรากฏที่ Title Bar ของ Browser </TITLE></HEAD>
<BODY>
คาสั่งหรือข้อความที่ต้องการให้แสดง
……………………………………………………
………………………………………
</BODY>
</HTML>
9. Body Section
Webpage Design and Programming Workshop
เป็นส่วนเนื้ อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag ทั้งนี้ ให้ป้ อน
คาสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY> และแบ่งกลุ่มคาสั่งได้ดังนี้
1. การกาหนดลักษณะข้อความ
2. การจัดรูปแบบเอกสาร
3. คาสั่งแทรกรูปภาพ
4. คาสั่งการเชื่อมโยงลิงค์ (Links)
5. การสร้างตาราง
6. การสร้างฟอร์ม
7. กลุ่มคาสั่งควบคุมเฟรม
10. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดรูปแบบของตัวอักษร
• รูปแบบคาสั่ง
<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>
11. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดข้อความลักษณะหัวเรื่อง
• รูปแบบคาสั่ง
<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>
12. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดขนาดของตัวอักษร
• กำหนดเป็นตัวเลข รูปแบบคาสั่ง
<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>
13. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดขนาดของตัวอักษร
• กำหนดโดยใช้เครื่องหมำยบวกและเครื่องหมำยลบ รูปแบบคาสั่ง
<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>
14. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดตัวอักษรให้มีความหนา
• รูปแบบคาสั่ง
<B>…………………..</B>
<HTML>
<HEAD><TITLE> การกาหนดตัวหนา </TITLE></HEAD>
<BODY>
ตัวอักษรปกติ COMPUTER
ตัวอักษรหนา <B>COMPUTER</B>
</BODY>
</HTML>
15. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดตัวอักษรให้ขีดเส้นใต้
• รูปแบบคาสั่ง
<U>…………………..</U>
<HTML>
<HEAD>
<TITLE> การกาหนดการขีดเส ้นใต ้ </TITLE></HEAD>
<BODY>
ตัวอักษรปกติ COMPUTER
ตัวอักษรที่ขีดเส ้นใต ้ <U> COMPUTER </U>
</BODY>
</HTML>
16. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดตัวอักษรให้มีการเอน
• รูปแบบคาสั่ง
<i>…………………..</i>
<HTML>
<HEAD>
<TITLE>การกาหนดอักษรเอน</TITLE></HEAD>
<BODY>
ตัวอักษรปกติ COMPUTER
ตัวอักษรเอน <i>COMPUTER
</BODY>
</HTML>
17. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดตัวอักษรกระพริบ
• รูปแบบคาสั่ง
<BLINK>…………………..</BLINK>
<HTML>
<HEAD>
<TITLE> การกาหนดตัวอักษรกระพริบ </TITLE></HEAD>
<BODY>
<Blink> COMPUTER </Font></Blink> แสดงผลได ้เฉพาะบน Netscape
</BODY>
</HTML>
18. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดสีของตัวอักษร
• รูปแบบคาสั่ง
<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>
19. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดสีให้กับตัวอักษรทั้งเอกสาร
• รูปแบบคาสั่ง
แบบที่ 1
<BODY Text = "สีพื้นหลัง">
.................................………………
</BODY>
แบบที่ 2 (กาหนดสีพื้นหลังจากเลขฐาน 16)
<BODY Text = "#RRGGBB">
.................................………………
</BODY>
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD>
<BODY Text="#FF0000">
มหาวิทยาลัยราชภัฎนครปฐม
</BODY>
</HTML>
20. 1. การกาหนดลักษณะข้อความ
Webpage Design and Programming Workshop
การกาหนดสีพื้นหลัง
• รูปแบบคาสั่ง
แบบที่ 1
<BODY BGColor = "สีพื้นหลัง">
.................................…………………
</BODY>
แบบที่ 2 (กำหนดสีพื้นหลังจำกเลขฐำน 16)
<BODY BGColor = "#RRGGBB">
.................................……………………………..
</BODY>
<HTML>
<HEAD><TITLE> BGColor </TITLE></HEAD>
<BODY BGColor="#FFFF00">
มหาวิทยาลัยราชภัฎนครปฐม
</BODY>
</HTML>
21. 2. การจัดรูปแบบเอกสาร
Webpage Design and Programming Workshop
คาสั่ง หน้าที่
<BR> การขึ้นบรรทัดใหม่
<P> การย่อหน้าใหม่ (Paragraph Tag)
คาสั่งการเว้นวรรค
<MARQUEE>..........</MARQUEE> การกาหนดตัวอักษรเคลื่อนที่
<SUP>..........</SUP> คาสั่งที่กาหนดตัวอักษรยกระดับ
<SUB>..........</SUB> คาสั่งที่กาหนดตัวอักษรพ่วงท้าย (ตัวห้อย)
<P
ALIGN="LEFT/RIGHT/CENTER">......</P>
กาหนดค่าของการจัดการจัดตาแหน่งการแสดงผล
• "left" การจัดตาแหน่งการแสดงผลอยู่ทางซ้าย
• "right" การจัดตาแหน่งการแสดงผลอยู่ทางขวา
• "center" การจัดตาแหน่งการแสดงผลอยู่ตรงกลาง
22. 2. การจัดรูปแบบเอกสาร
Webpage Design and Programming Workshop
กาหนดค่าของการจัดการจัดตาแหน่งการแสดงผล
<HTML>
<HEAD><TITLE> Paragraph </TITLE></HEAD>
<BODY>
<H4>การจัดย่อหน้าในเวบเพจ</H4><BR>
<P ALIGN="Left">ข ้อความชิดซ ้ายบรรทัด </P>
<P ALIGN="Center">ข ้อความกึ่งกลางบรรทัด </P>
<P ALIGN="Right">ข ้อความชิดขวาบรรทัด </P>
</BODY>
</HTML>
23. 2. การจัดรูปแบบเอกสาร
Webpage Design and Programming Workshop
คาสั่งเส้นคั่นทางแนวนอน
• รูปแบบคาสั่ง <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">
24. 2. การจัดรูปแบบเอกสาร
Webpage Design and Programming Workshop
การแสดงผลแบบรายการแบบมีหมายเลขกากับ
• รูปแบบคาสั่ง
ชนิดของ Type สิ่งที่ปรากฏ
A แสดงตัวอักษรพิมพ์ใหญ่ (Caplital letters)
a แสดงตัวอักษรพิมพ์เล็ก (Small letters)
I แสดงตัวเลขโรมันตัวพิมพ์ใหญ่ (Large Roman numerals)
i แสดงตัวเลขโรมันตัวพิมพ์เล็ก (Small Roman numerals)
1 แสดงตัวเลขอารบิก (Small Roman numerals)
* เป็นค่า default *
<OL value = "1" >
<LI>รายการที่ 1
<LI>รายการที่ 2
</OL>
25. 2. การจัดรูปแบบเอกสาร
Webpage Design and Programming Workshop
การแสดงผลแบบรายการแบบมีหมายเลขกากับ
<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>
26. 2. การจัดรูปแบบเอกสาร
Webpage Design and Programming Workshop
การแสดงผลแบบรายการแบบมีสัญลักษณ์กากับ
ชนิดของเครื่องหมาย รูปแบบคาสั่ง
รูปวงกลมทึบ (Disc) <UL type = "square">
<LI>รายการที่ 1
<LI>รายการที่ 2
</UL>
รูปวงกลมโปร่ง (Circle)
รูปสี่เหลี่ยม (Square)
27. 2. การจัดรูปแบบเอกสาร
Webpage Design and Programming Workshop
การแสดงผลแบบรายการแบบมีสัญลักษณ์กากับ
<BODY>
<UL Type="Circle">การศึกษาวิชาพื้นฐานของคณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์ได ้แก่
<LI>วิชาการออกแบบโปรแกรม
<UL>
<LI Type="Disc">(CT211)
</UL>
<LI>วิชาวิทยาการคอมพิวเตอร์เบื้องต ้น
<UL>
<LI Type="Disc">(CT105)
</UL>
<LI>วิชาโครงสร ้างไม่ต่อเนื่อง
<UL>
<LI Type="Disc">(CT203)
</UL>
</UL>
</BODY>
28. 3. คาสั่งแทรกรูปภาพ
ชนิดไฟล์ รายละเอียด
GIF ภาพกราฟิกมีลักษณะลายเส้น ข้อความตัวอักษร หรือภาพการ์ตูนต่างๆ ซึ่งมีสีไม่
มากนัก ไฟล์ GIF มีค่าสีสูงสุด 256 สี ดังนั้นที่เซฟจะเป็นภาพที่มีลักษณะทึบ และ
ไม่สามารถไล่เฉดสีได้มากนัก
JPG แสดงผลของสีได้ 16.7 ล้านสี จึงเหมาะสาหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่าย
หรือภาพอื่นๆ ที่มีสีเยอะ นอกจากนี้ ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาด
เล็กลงได้ แต่คุณภาพจะลดลง
PNG ไฟล์ประเภทนี้ จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้
สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้
สูงสุดถึง16.7 ล้านสี สามารถทาเป็นภาพพื้นหลังโปร่งใส แต่ไฟล์ภาพประเภทนี้
จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็กๆ แต่
มีการใช้สีมาก เช่น ภาพไอคอนต่างๆ
Webpage Design and Programming Workshop
29. 3. คาสั่งแทรกรูปภาพ
Webpage Design and Programming Workshop
<imgsrc="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" >
Alt เป็นการกาหนดข้อความอธิบาย
Align = "top" เป็นการกาหนดข้อความที่อยู่ด้านบนของรูปภาพ
Align = "middle" เป็นการกาหนดข้อความที่อยู่กึ่งกลางของรูปภาพ
Align = "bottom" เป็นการกาหนดข้อความที่อยู่ด้านล่างของรูปภาพ
Align = "left" เป็นการกาหนดข้อความที่อยู่ด้านขวาของรูปภาพ
Align = "right" เป็นการกาหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ
Width การกาหนดขนาดความกว้างของรูปภาพ
Height การกาหนดขนาดความสูงของรูปภาพ
Vspace / Hspace เป็นการกาหนดระยะเว้นขอบจากด้านซ้ายกับรูปภาพ ในการแสดงข้อความ
ล้อมรอบรูป
Border เป็นการกาหนดเส้นกรอบของรูปภาพ
30. 3. คาสั่งแทรกรูปภาพ
Webpage Design and Programming Workshop
<html>
<head>
<title>คาสั่งใส่รูปภาพ </title></head>
<body>
<imgsrc="file:///C|/Users/Administrator/Desktop/picLOGO.jpg" width="851"
height="315"/>
</body>
</html>
31. 3. คาสั่งแทรกรูปภาพ
Webpage Design and Programming Workshop
การกาหนดขนาดของรูปภาพ
<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>
32. 3. คาสั่งแทรกรูปภาพ
Webpage Design and Programming Workshop
ส่วนการจัดวางตาแหน่งรูปภาพ
<html>
<head>
<title> Insert Images :ตาแหน่งและเส้นขอบรูปภาพ </title></head>
<body>
<div align="center">ตาแหน่งและเส้นขอบรูปภาพ<br>
<imgsrc="kerokero.gif" border="3">
</div>
</body>
</html>
33. 3. คาสั่งแทรกรูปภาพ
Webpage Design and Programming Workshop
คาสั่งที่นารูปภาพมาเป็นพื้นหลัง
• รูปแบบคาสั่ง
o background คือการกาหนดรูปภาพ
o bgproperties fixed คือการกาหนดให้รูปภาพคงที่
<body background="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" bgproperties=fixed>
34. 3. คาสั่งแทรกรูปภาพ
Webpage Design and Programming Workshop
คาสั่งที่นารูปภาพมาเป็นพื้นหลัง
<html>
<head>
<title> คาสั่งที่นารูปภาพมาเป็นพื้นหลัง </title></head>
<body background="bgimage.gif">
ข้อความที่แสดงในส่วนเนื้ อหา
....................................
..........................
</body>
</html>
35. 3. คาสั่งแทรกรูปภาพ
Webpage Design and Programming Workshop
คาสั่งที่นารูปภาพมาเป็นพื้นหลัง
• รูปแบบคาสั่ง
o background คือการกาหนดรูปภาพ
o bgproperties fixed คือการกาหนดให้รูปภาพคงที่
<body background="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" bgproperties=fixed>
36. 4. คาสั่งการเชื่อมโยงลิงค์ (Links)
Webpage Design and Programming Workshop
• การลิงค์ภายในเว็บเพจเดียวกัน
• การเชื่อมโยงนอกเว็บไซต์
• การเชื่อมโยงแบบอีเมล์
<A HREF="table.html" >................</A>
<a href="http://URLที่ต้องการจะเชื่อมโยงไป">.................</a>
<a href = “mailto:ชื่อ E-mail address”>................</a>
37. 4. คาสั่งการเชื่อมโยงลิงค์ (Links)
Webpage Design and Programming Workshop
• การเชื่อมโยงแบบ 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>
38. 5. การสร้างตาราง
Webpage Design and Programming Workshop
• โครงสร้างของตาราง
Tag คาอธิบาย
<TABLE> ... </TABLE> คาสั่งในการสร้างตาราง
<CAPTION> ... </CAPTION> คาสั่งในการกาหนดข้อความกากับตาราง
<TR> ... </TR> คาสั่งในการกาหนดแถวของตาราง 1 แถว
<TH> ... </TH> คาสั่งในการกาหนดส่วนหัวของตารางแถวแรก
<TD> ... </TD> คาสั่งในการกาหนดส่วนของข้อมูลในแถว หรือทาคอลัมน์
39. 5. การสร้างตาราง
Webpage Design and Programming Workshop
• Attributes ในการสร้างตาราง
Attributes คาอธิบาย
Align กาหนดการวางตาแหน่งตางราง มี 3 ลักษณะ
- Left กาหนดจัดวางชิดซ้าย (เป็นค่า default)
- Right กาหนดจัดวางชิดขวา
- Center กาหนดจัดวางกึ่งกลาง
Border กาหนดแสดงความหนาของเส้นตาราง มีหน่วยเป็น Pixel
Height กาหนดความสูงของตาราง มีหน่วยเป็น Pixel และ Percent
Width กาหนดความกว้างของตาราง มีหน่วยเป็น Pixel และ Percent
CellSpacing กาหนดช่องว่างระหว่างตาราง
CellPadding กาหนดช่องว่างระหว่างบรรทัดของตาราง
40. 5. การสร้างตาราง
Webpage Design and Programming Workshop
• การสร้างตาราง
<TABLE>
<TR>
<TD>ช่องที่ 1</TD>
<TD>ช่องที่ 2</TD>
</TR>
<TR>
<TD>ช่องที่ 3</TD>
<TD>ช่องที่ 4</TD>
</TR>
</TABLE>
41. 5. การสร้างตาราง
Webpage Design and Programming Workshop
• การกาหนดเส้นของตาราง
<TABLE BORDER="ค่าตัวเลข” BORDERCOLOR="#RGB หรือชื่อสี” >
<CAPTION>ข้อความ</CAPTION>
<TR>
<TH>.........</TH>
<TH>.........</TH>
</TR>
<TR>
<TD>.........</TD>
<TD>.........</TD>
</TR>
<TR>
<TD>.........</TD>
<TD>.........</TD>
</TR>
<TABLE>
42. 5. การสร้างตาราง
Webpage Design and Programming Workshop
• การกาหนดเส้นของตาราง
<TABLE BORDER="1">
<TR>
<TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
</TR>
<TR>
<TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
</TR>
</TABLE>
43. 5. การสร้างตาราง
Webpage Design and Programming Workshop
• กาหนดความกว้างและความสูงของตาราง
<TABLE BORDER="1" WIDTH="90%">
<TR>
<TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
</TR>
<TR>
<TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
</TR>
</TABLE>
44. 5. การสร้างตาราง
Webpage Design and Programming Workshop
• การกาหนดการจัดวางข้อความ
<TABLE BORDER="1" WIDTH="95%" HEIGHT="100">
<TR>
<TD align="left" valign="top">ซ้ายบน</TD>
<TD align="right" valign="middle">ขวากลาง</TD>
</TR>
<TR>
<TD align="center" valign="bottom">กลางล่าง</TD>
<TD align="right" valign="top">ขวาบน</TD>
</TR>
</TABLE>
45. 5. การสร้างตาราง
Webpage Design and Programming Workshop
• การแทรกภาพในตาราง
<TABLE BORDER="1">
<TR>
<TD> <IMG SRC="kerokero.gif"> </TD>
<TD> รูปด้านข้างนี้ คือ กบเคโระ </TD>
</TR>
</TABLE>
47. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
• คาสั่ง
<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
48. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
6.1 Text Fields
ช่องรับข้อมูลประเภท Text จะมีลักษณะเป็นช่องรับข้อมูล ขนาดบรรทัดเดียว
โดยที่ผู้ใช้สามารถพิมพ์ตัวอักษรเข้าไป
• size="number" ความกว้างของช่องกรอกข้อมูล
• maxlengt="number" จานวนตัวอักษรสูงสุดที่กรอกได้
• disabled lock ไม่ให้ช่องกรอกข้อมูลใช้งานได้
• readonly ให้ช่องกรอกข้อมูลอ่านได้อย่างเดียว กรอกข้อมูลไม่ได้
<form>
<input type="text" name="ชื่อช่องกรอกข ้อมูล" value="ข ้อมูล" size="number"
maxlength="number" disabled readonly />
</form>
49. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
6.2 Checkbox
จะแสดงผลตัวเลือกทั้งหมดที่เรากาหนดไว้ โดยจะแสดงช่องทา
เครื่องหมายรูปสี่เหลี่ยมอยู่หน้าตัวเลือก
<form>
<input type="checkbox" name="ชื่อ checkbox" value="ค่าข ้อมูล" checked>
</form>
50. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
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
51. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
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
52. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
6.4 Password
จะเป็นคาสั่งที่มีลักษณะการแสดงผลแบบบรรทัดเดียว แต่เป็นการแสดงผล
แบบ 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" />
53. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
6.5 File upload
ตัวอย่ำง
<FORM>
<INPUT TYPE="FILE" NAME="ชื่อ" INPUT FILE" VALUE="ค่าข ้อมูล" SIZE="NUMBER" MAXLENGTH="NUMBER" />
</FORM>
<INPUT TYPE="FILE" NAME="FILENAME" SIZE="30" />
54. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
6.6 Button
คือการกาหนดให้แอตทริบิวต์ Type มีค่าเป็น Button นอกจากนี้ ต้องกาหนด
ชื่อที่ต้องการให้ปรากฏบนปุ่มด้วย ไม่เช่นนั้นบนปุ่มจะไม่มีชื่อใด ๆ ปรากฏเลย
ตัวอย่ำง
<form>
<input type="button" name="ชื่อ button" value="ค่าข ้อมูล" />
</form>
<input type="button" name="cancel" value="Cancel" />
55. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
6.7 Submit
คาสั่งนี้ จะทาหน้าที่ส่งข้อมูลแบบฟอร์มสอบถาม ไปยังเซอร์ฟเวอร์ของ
เราเพื่อทาการประมวลผลข้อมูล การแสดงผลในคาสั่งนี้ จะแสดงผลเป็นลักษณะ
ปุ่ม โดยมีการกาหนดค่าที่จะแสดงบนปุ่มที่ VALUE
ตัวอย่ำง
<input type="button" name="cancel" value="Cancel" />
<input type="button" name="save" value="Save" />
56. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
6.8 Reset
คาสั่งจะทาหน้าที่ในการยกเลิกข้อมูลต่าง ๆ ที่ทาการป้ อนลงใน
แบบฟอร์ม เพื่อทาการป้ อนข้อมูลลงในแบบฟอร์มใหม่ การแสดงผลในคาสั่งนี้ จะ
แสดงผลเป็นลักษณะปุ่ม
ตัวอย่ำง
<form>
<input type="button" name="ชื่อ button" />
</form>
<input type="reset" name="Clear" />
57. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
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>
58. 6. การสร้างฟอร์ม
Webpage Design and Programming Workshop
6.10 Textarea
คาสั่งนี้ จะเป็นการกาหนดการสร้างกรอบป้ อนข้อมูลแบบหลายบรรทัด
โดยในที่นี้ จะมีคุณสมบัติในการกาหนดความกว้าง และความสูงของกรอบป้ อน
ข้อความคือ
• ROWS เป็นการกาหนดจานวนแถวที่ใช้ในการป้ อนข้อมูลต่าง ๆ ลงในกรอบป้ อนข้อความ
• COLS เป็นการกาหนดจานวนคอลัมน์สูงสุดในการป้ อนข้อมูลในแต่ละแถว ซึ่งจานวน
คอลัมน์ที่เหมาะสมที่สุดจะมีค่าตัวเลขเท่ากับ 80 Characters
<form>
<textarea name="ชื่อ textarea" rows="number" cols="number" wrap="off"> ข ้อความ
ใน textareas </textarea>
</form>