การสร้่างเว็บด้วยภาษา html

บทที่ 4
การสร้างเว็บด้วยภาษา HTML
Webpage Design and Programming Workshop (7152306)
อาจารย์สุธารัตน์ ชาวนาฟาง
สาขาวิศวกรรมซอฟต์แวร์ คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏนครปฐม

ภาษา 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

ภาษา HTML
 การเขียนภาษา HTML ด้วยโปรแกรม
Notepad
 การเขียนเปิดดูเอกสาร HTML ด้วย
โปรแกรม IE

ข้อดี-ข้อเสียภาษา HTML
ข้อดี
สามารถใช้ได้กับเครื่องคอมพิวเตอร์และระบบปฏิบัติการได้หลากหลาย
ชนิดและไฟล์ที่ได้จากการสร้างเอกสาร HTML ยังมีขนาดเล็กอีกด้วย
ข้อเสีย
คือโปรแกรมเหล่านี้ มัก Generate code ที่เกินความจาเป็นมากเกินไป ทาให้
ไฟล์ HTML มีขนาดใหญ่และแสดงผลช้า

โครงสร้างภาษา HTML
1. แท็ก (Tag)
• คือคาสั่งที่ใช้ในภาษา HTML อยู่ในเครื่องหมาย <และ>
• ใช้สาหรับจัดรูปแบบข้อความ ภาพหรือวัตถุอื่นๆ ในภาษา HTML
ส่วนมากจะมี tag เปิด และ tag ปิด โดยมีรูปแบบดังนี้
1.1 Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR>, <HR> เป็นต้น
1.2 Tag เปิด/ปิด เช่น <h1>…..</h1>, <p>…..</p> เป็นต้น

โครงสร้างภาษา HTML
2. Attributes
• Attributes เป็นส่วนขยายความสามารถของ Tag
• ใช้สาหรับจัดรูปแบบเพิ่มเติม เช่น ขนาด สี ระยะห่าง เป็นต้น
• ค่าของ attribute จะอยู่ในเครื่องหมาย "…..…"
• ในคาสั่ง HTML จะมี Attribute แตกต่างกันไปและมีจานวนไม่เท่ากัน
• จะใช้เป็นตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้ เช่น
<p align="center"> ข้อความในพารากราฟนี้ จัดวางอยู่กึ่งกลางหน้าจอ </p>
<hr width="200" color="red" noshade> ใช้สร้างเส้นคั่นยาว 200 pixel สีแดงทึบ

รูปแบบการเขียน
คาสั่ง รายละเอียด
<HTML>…</HTML> เป็นคาสั่งเริ่มต้นในการเขียนโปรแกรม และคาสั่ง </HTML> เป็น
การสิ้นสุดโปรแกรม
<HEAD>…</HEAD> ใช้กาหนดรายละเอียดต่างๆ เกี่ยวกับเว็บเพจ
<TITLE>…<TITLE> ข้อความภายในคาสั่งจะแสดงผลในส่วนของ Title Bar ของ
โปรแกรมเว็บบราวเซอร์
<BODY>…</BODY> คาสั่งนี้ เป็นส่วนที่สาคัญในการแสดงผลในเว็บบราวเซอร์ ซึ่งจะ
ประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่าง ๆ

รูปแบบการเขียน
<HTML>
<HEAD>
<TITLE> ส่วนของข้อความที่จะปรากฏที่ Title Bar ของ Browser </TITLE></HEAD>
<BODY>
คาสั่งหรือข้อความที่ต้องการให้แสดง
……………………………………………………
………………………………………
</BODY>
</HTML>

Body Section
เป็นส่วนเนื้ อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag ทั้งนี้ ให้ป้ อน
คาสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY> และแบ่งกลุ่มคาสั่งได้ดังนี้
1. การกาหนดลักษณะข้อความ
2. การจัดรูปแบบเอกสาร
3. คาสั่งแทรกรูปภาพ
4. คาสั่งการเชื่อมโยงลิงค์ (Links)
5. การสร้างตาราง
6. การสร้างฟอร์ม
7. กลุ่มคาสั่งควบคุมเฟรม

การกาหนดรูปแบบของตัวอักษร
• รูปแบบคาสั่ง
<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>

การกาหนดข้อความลักษณะหัวเรื่อง
<Hn>....Heading Text ... </Hn>
<body>
<h1>หัวเรื่อง ที่มีค่า n เป็น 1</h1>
</body>

การกาหนดขนาดของตัวอักษร
• กำหนดเป็นตัวเลข รูปแบบคาสั่ง
<FONT SIZE="ค่ากาหนดขนาดของตัวอักษร">..........</FONT>
<BODY>
<FONT SIZE="1">Computer</Font>
</BODY>

การกาหนดขนาดของตัวอักษร
• กำหนดโดยใช้เครื่องหมำยบวกและเครื่องหมำยลบ รูปแบบคาสั่ง
<BODY>
<FONT SIZE="+4">Computer</Font>
Computer
<FONT SIZE="-1">Computer</Font>
<FONT SIZE="-2">Computer</Font>
</BODY>

การกาหนดตัวอักษรให้มีความหนา
<B>…………………..</B>
<HTML>
<HEAD><TITLE> การกาหนดตัวหนา </TITLE></HEAD>
<BODY>
ตัวอักษรปกติ COMPUTER
ตัวอักษรหนา <B>COMPUTER</B>
</BODY>
</HTML>

การกาหนดตัวอักษรให้ขีดเส้นใต้
<U>…………………..</U>
<HTML>
<HEAD>
<TITLE> การกาหนดการขีดเส ้นใต ้ </TITLE></HEAD>
<BODY>
ตัวอักษรที่ขีดเส ้นใต ้ <U> COMPUTER </U>
</BODY>
</HTML>

การกาหนดตัวอักษรให้มีการเอน
<i>…………………..</i>
<HTML>
<HEAD>
<TITLE>การกาหนดอักษรเอน</TITLE></HEAD>
<BODY>
ตัวอักษรเอน <i>COMPUTER
</BODY>
</HTML>

การกาหนดตัวอักษรกระพริบ
<BLINK>…………………..</BLINK>
<HTML>
<HEAD>
<TITLE> การกาหนดตัวอักษรกระพริบ </TITLE></HEAD>
<BODY>
<Blink> COMPUTER </Font></Blink> แสดงผลได ้เฉพาะบน Netscape
</BODY>
</HTML>

การกาหนดสีของตัวอักษร
<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>

การกาหนดสีให้กับตัวอักษรทั้งเอกสาร
แบบที่ 1
<BODY Text = "สีพื้นหลัง">
.................................………………
</BODY>
แบบที่ 2 (กาหนดสีพื้นหลังจากเลขฐาน 16)
<BODY Text = "#RRGGBB">
.................................………………
</BODY>
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD>
<BODY Text="#FF0000">
มหาวิทยาลัยราชภัฎนครปฐม
</BODY>
</HTML>

การกาหนดสีพื้นหลัง
แบบที่ 1
<BODY BGColor = "สีพื้นหลัง">
.................................…………………
</BODY>
แบบที่ 2 (กำหนดสีพื้นหลังจำกเลขฐำน 16)
<BODY BGColor = "#RRGGBB">
.................................……………………………..
</BODY>
<HTML>
<HEAD><TITLE> BGColor </TITLE></HEAD>
<BODY BGColor="#FFFF00">
มหาวิทยาลัยราชภัฎนครปฐม
</BODY>
</HTML>

คาสั่ง หน้าที่
<BR> การขึ้นบรรทัดใหม่
<P> การย่อหน้าใหม่ (Paragraph Tag)
  คาสั่งการเว้นวรรค
<MARQUEE>..........</MARQUEE> การกาหนดตัวอักษรเคลื่อนที่
<SUP>..........</SUP> คาสั่งที่กาหนดตัวอักษรยกระดับ
<SUB>..........</SUB> คาสั่งที่กาหนดตัวอักษรพ่วงท้าย (ตัวห้อย)
<P
ALIGN="LEFT/RIGHT/CENTER">......</P>
กาหนดค่าของการจัดการจัดตาแหน่งการแสดงผล
• "left" การจัดตาแหน่งการแสดงผลอยู่ทางซ้าย
• "right" การจัดตาแหน่งการแสดงผลอยู่ทางขวา
• "center" การจัดตาแหน่งการแสดงผลอยู่ตรงกลาง

กาหนดค่าของการจัดการจัดตาแหน่งการแสดงผล
<HTML>
<HEAD><TITLE> Paragraph </TITLE></HEAD>
<BODY>
<H4>การจัดย่อหน้าในเวบเพจ</H4><BR>
<P ALIGN="Left">ข ้อความชิดซ ้ายบรรทัด </P>
<P ALIGN="Center">ข ้อความกึ่งกลางบรรทัด </P>
<P ALIGN="Right">ข ้อความชิดขวาบรรทัด </P>
</BODY>
</HTML>

คาสั่งเส้นคั่นทางแนวนอน
• รูปแบบคาสั่ง <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">

การแสดงผลแบบรายการแบบมีหมายเลขกากับ
ชนิดของ 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
</OL>

การแสดงผลแบบรายการแบบมีหมายเลขกากับ
<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>

การแสดงผลแบบรายการแบบมีสัญลักษณ์กากับ
ชนิดของเครื่องหมาย รูปแบบคาสั่ง
รูปวงกลมทึบ (Disc) <UL type = "square">
</UL>
รูปวงกลมโปร่ง (Circle)
รูปสี่เหลี่ยม (Square)

การแสดงผลแบบรายการแบบมีสัญลักษณ์กากับ
<BODY>
<UL Type="Circle">การศึกษาวิชาพื้นฐานของคณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์ได ้แก่
<LI>วิชาการออกแบบโปรแกรม
<UL>
<LI Type="Disc">(CT211)
</UL>
<LI>วิชาวิทยาการคอมพิวเตอร์เบื้องต ้น
<UL>
</UL>
<LI>วิชาโครงสร ้างไม่ต่อเนื่อง
<UL>
</UL>
</UL>
</BODY>

ชนิดไฟล์ รายละเอียด
GIF ภาพกราฟิกมีลักษณะลายเส้น ข้อความตัวอักษร หรือภาพการ์ตูนต่างๆ ซึ่งมีสีไม่
มากนัก ไฟล์ GIF มีค่าสีสูงสุด 256 สี ดังนั้นที่เซฟจะเป็นภาพที่มีลักษณะทึบ และ
ไม่สามารถไล่เฉดสีได้มากนัก
JPG แสดงผลของสีได้ 16.7 ล้านสี จึงเหมาะสาหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่าย
หรือภาพอื่นๆ ที่มีสีเยอะ นอกจากนี้ ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาด
เล็กลงได้ แต่คุณภาพจะลดลง
PNG ไฟล์ประเภทนี้ จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้
สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้
สูงสุดถึง16.7 ล้านสี สามารถทาเป็นภาพพื้นหลังโปร่งใส แต่ไฟล์ภาพประเภทนี้
จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็กๆ แต่
มีการใช้สีมาก เช่น ภาพไอคอนต่างๆ

<imgsrc="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" >
Alt เป็นการกาหนดข้อความอธิบาย
Align = "top" เป็นการกาหนดข้อความที่อยู่ด้านบนของรูปภาพ
Align = "middle" เป็นการกาหนดข้อความที่อยู่กึ่งกลางของรูปภาพ
Align = "bottom" เป็นการกาหนดข้อความที่อยู่ด้านล่างของรูปภาพ
Align = "left" เป็นการกาหนดข้อความที่อยู่ด้านขวาของรูปภาพ
Align = "right" เป็นการกาหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ
Width การกาหนดขนาดความกว้างของรูปภาพ
Height การกาหนดขนาดความสูงของรูปภาพ
Vspace / Hspace เป็นการกาหนดระยะเว้นขอบจากด้านซ้ายกับรูปภาพ ในการแสดงข้อความ
ล้อมรอบรูป
Border เป็นการกาหนดเส้นกรอบของรูปภาพ

<html>
<head>
<title>คาสั่งใส่รูปภาพ </title></head>
<body>
<imgsrc="file:///C|/Users/Administrator/Desktop/picLOGO.jpg" width="851"
height="315"/>
</body>
</html>

การกาหนดขนาดของรูปภาพ
<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>

ส่วนการจัดวางตาแหน่งรูปภาพ
<html>
<head>
<title> Insert Images :ตาแหน่งและเส้นขอบรูปภาพ </title></head>
<body>
<div align="center">ตาแหน่งและเส้นขอบรูปภาพ<br>
<imgsrc="kerokero.gif" border="3">
</div>
</body>
</html>

คาสั่งที่นารูปภาพมาเป็นพื้นหลัง
o background คือการกาหนดรูปภาพ
o bgproperties fixed คือการกาหนดให้รูปภาพคงที่
<body background="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" bgproperties=fixed>

คาสั่งที่นารูปภาพมาเป็นพื้นหลัง
<html>
<head>
<title> คาสั่งที่นารูปภาพมาเป็นพื้นหลัง </title></head>
<body background="bgimage.gif">
ข้อความที่แสดงในส่วนเนื้ อหา
....................................
..........................
</body>
</html>

• การลิงค์ภายในเว็บเพจเดียวกัน
• การเชื่อมโยงนอกเว็บไซต์
• การเชื่อมโยงแบบอีเมล์
<A HREF="table.html" >................</A>
<a href="http://URLที่ต้องการจะเชื่อมโยงไป">.................</a>
<a href = “mailto:ชื่อ E-mail address”>................</a>

• การเชื่อมโยงแบบ 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>

• โครงสร้างของตาราง
Tag คาอธิบาย
<TABLE> ... </TABLE> คาสั่งในการสร้างตาราง
<CAPTION> ... </CAPTION> คาสั่งในการกาหนดข้อความกากับตาราง
<TR> ... </TR> คาสั่งในการกาหนดแถวของตาราง 1 แถว
<TH> ... </TH> คาสั่งในการกาหนดส่วนหัวของตารางแถวแรก
<TD> ... </TD> คาสั่งในการกาหนดส่วนของข้อมูลในแถว หรือทาคอลัมน์

• Attributes ในการสร้างตาราง
Attributes คาอธิบาย
Align กาหนดการวางตาแหน่งตางราง มี 3 ลักษณะ
- Left กาหนดจัดวางชิดซ้าย (เป็นค่า default)
- Right กาหนดจัดวางชิดขวา
- Center กาหนดจัดวางกึ่งกลาง
Border กาหนดแสดงความหนาของเส้นตาราง มีหน่วยเป็น Pixel
Height กาหนดความสูงของตาราง มีหน่วยเป็น Pixel และ Percent
Width กาหนดความกว้างของตาราง มีหน่วยเป็น Pixel และ Percent
CellSpacing กาหนดช่องว่างระหว่างตาราง
CellPadding กาหนดช่องว่างระหว่างบรรทัดของตาราง

• การสร้างตาราง
<TABLE>
<TR>
<TD>ช่องที่ 1</TD>
</TR>
<TR>
</TR>
</TABLE>

• การกาหนดเส้นของตาราง
<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>

• การกาหนดเส้นของตาราง
<TABLE BORDER="1">
<TR>
<TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
</TR>
<TR>
</TR>
</TABLE>

• กาหนดความกว้างและความสูงของตาราง
<TABLE BORDER="1" WIDTH="90%">
<TR>
</TR>
<TR>
</TR>
</TABLE>

• การกาหนดการจัดวางข้อความ
<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>

• การแทรกภาพในตาราง
<TABLE BORDER="1">
<TR>
<TD> <IMG SRC="kerokero.gif"> </TD>
<TD> รูปด้านข้างนี้ คือ กบเคโระ </TD>
</TR>
</TABLE>

การสร้่างเว็บด้วยภาษา html

• คาสั่ง
<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

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>

6.2 Checkbox
จะแสดงผลตัวเลือกทั้งหมดที่เรากาหนดไว้ โดยจะแสดงช่องทา
เครื่องหมายรูปสี่เหลี่ยมอยู่หน้าตัวเลือก
<form>
<input type="checkbox" name="ชื่อ checkbox" value="ค่าข ้อมูล" checked>
</form>

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

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

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" />

6.5 File upload
<FORM>
<INPUT TYPE="FILE" NAME="ชื่อ" INPUT FILE" VALUE="ค่าข ้อมูล" SIZE="NUMBER" MAXLENGTH="NUMBER" />
</FORM>
<INPUT TYPE="FILE" NAME="FILENAME" SIZE="30" />

6.6 Button
คือการกาหนดให้แอตทริบิวต์ Type มีค่าเป็น Button นอกจากนี้ ต้องกาหนด
ชื่อที่ต้องการให้ปรากฏบนปุ่มด้วย ไม่เช่นนั้นบนปุ่มจะไม่มีชื่อใด ๆ ปรากฏเลย
<form>
<input type="button" name="ชื่อ button" value="ค่าข ้อมูล" />
</form>
<input type="button" name="cancel" value="Cancel" />

6.7 Submit
คาสั่งนี้ จะทาหน้าที่ส่งข้อมูลแบบฟอร์มสอบถาม ไปยังเซอร์ฟเวอร์ของ
เราเพื่อทาการประมวลผลข้อมูล การแสดงผลในคาสั่งนี้ จะแสดงผลเป็นลักษณะ
ปุ่ม โดยมีการกาหนดค่าที่จะแสดงบนปุ่มที่ VALUE
<input type="button" name="cancel" value="Cancel" />
<input type="button" name="save" value="Save" />

6.8 Reset
คาสั่งจะทาหน้าที่ในการยกเลิกข้อมูลต่าง ๆ ที่ทาการป้ อนลงใน
แบบฟอร์ม เพื่อทาการป้ อนข้อมูลลงในแบบฟอร์มใหม่ การแสดงผลในคาสั่งนี้ จะ
แสดงผลเป็นลักษณะปุ่ม
<form>
<input type="button" name="ชื่อ button" />
</form>
<input type="reset" name="Clear" />

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>
</SELECT>
</FORM>

6.10 Textarea
คาสั่งนี้ จะเป็นการกาหนดการสร้างกรอบป้ อนข้อมูลแบบหลายบรรทัด
โดยในที่นี้ จะมีคุณสมบัติในการกาหนดความกว้าง และความสูงของกรอบป้ อน
ข้อความคือ
• ROWS เป็นการกาหนดจานวนแถวที่ใช้ในการป้ อนข้อมูลต่าง ๆ ลงในกรอบป้ อนข้อความ
• COLS เป็นการกาหนดจานวนคอลัมน์สูงสุดในการป้ อนข้อมูลในแต่ละแถว ซึ่งจานวน
คอลัมน์ที่เหมาะสมที่สุดจะมีค่าตัวเลขเท่ากับ 80 Characters
<form>
<textarea name="ชื่อ textarea" rows="number" cols="number" wrap="off"> ข ้อความ
ใน textareas </textarea>
</form>

การสร้่างเว็บด้วยภาษา html

More Related Content

What's hot (20)

Similar to การสร้่างเว็บด้วยภาษา html (20)

More from CC Nakhon Pathom Rajabhat University (20)

การสร้่างเว็บด้วยภาษา html