HTML (Hypertext Markup Language).

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
FORM อ.กันทิมา อ่อนละออ
Advertisements

Location object Form object
การสร้างแบบฟอร์ม <form>
HTML (คืออะไร) ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML.
ทส215 การเขียนโปรแกรมบนเว็บ 1
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
การสร้างเอกสารเว็บเพจ
การสร้างตาราง (Table)
การสร้างเฟรม(Frame) ด้วยภาษา HTML
แก้ไขปรับปรุง Form.
– Web Programming and Web Database
– Web Programming and Web Database
การสร้างเว็บด้วย HTML HyperText Markup Language
ภาษา HTML.
PHP with Form ฟอร์ม คือหน้าจอที่ใช้เป็นสื่อกลางในการติดต่อระหว่างผู้ใช้เว็บไซต์ กับ เจ้าของเว็บไซต์ โดยผู้ใช้สามารถกรอกข้อมูลผ่านฟอร์มส่งไปยังเซอร์เวอร์
Electronic Commerce เว็บฟอร์ม (Web Form).
HTML.
CSS.
Master Page Style Sheet
Page: 1 การพัฒนาโปรแกรมประยุกต์บนเว็บ อ. บุรินทร์ รุจจนพันธุ์.. ปรับปรุง 12 กรกฎาคม 2550 HTML (HyperText Markup Language)
HTML Hypertext Markup Language Updated : August 23,2012.
Data Form c40205 Web Site Developing in PDP style ศูนย์คอมพิวเตอร์ โรงเรียน ปลวกแดงพิทยาคม.
การนำเสนองานบนอินเตอร์เน็ต
How to use HyperText Markup Language
PHP for Web Programming
CHAPTER 12 FORM.
 Mr.Nitirat Tanthavech.  HTML forms are used to pass data to a server.  A form can contain input elements like text fields, checkboxes, radio-buttons,
การสร้างฟอร์ม(Form) ด้วยภาษา HTML
Introduction to HTML, PHP – Special Problem (Database)
เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML (2) ตอน... การใช้ FORM โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ
1 Introduction to HTML 1 Introduction to HTML 1 Chapter 3.
การสร้าง ฟอร์มรับข้อมูล ง การเขียนเว็บไซต์ เบื้องต้น ศูนย์คอมพิวเตอร์ โรงเรียน ปลวกแดงพิทยาคม.
Mr. Winai Purikasem. Introduction  Hypertext model  Use of hypertext in World Wide Web (WWW)  WWW client-server model  Use of TCP/IP protocols in.
PHP Html Form && Query string
Form.
โดย ส.อ.ประกาศิต วรนุช วิททยาลัยเฉลิมกาณจนา
ศูนย์ส่งเสริมวิชาการ 231/4 ซอยวัดสังข์กระจาย เขตบางกอกใหญ่ กทม Tel , การเขียนเว็บเพจด้วยภาษา HTML ( ) 1 ประเภทของ.
ภาษามาร์คอัป เอกสารประกอบการสอนรายวิชา ภาษามาร์คอัป ระดับมัธยมศึกษาตอนปลาย.
4 Array ● array types ● foreach loop ● Use arrays with Web forms
Chapter 8 WWW.
HTML HyperText Markup Language
Microsoft Access การใช้งานโปรแกรมระบบจัดการฐานข้อมูล
การสร้างเว็บเพจด้วยภาษา HTML
บทที่ 8 เครือข่ายการสื่อสารทางไกลระหว่างประเทศ
JavaSCript.
What is CSS? CSS (Cascading Style Sheet) ซึ่งเราจะใช้ CSS เพื่อให้แก้ไขคุณสมบัติ ของเว็บเพจ ให้มีหน้าตา สีสันหรือรูปแบบเป็นไปตามที่ต้องการ CSS มีลักษณะคล้ายหน้ากาก.
อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ
เอกสารประกอบการบรรยายรายวิชา Web Technology
- HTML (1) – Web Programming and Web Database
Control Statements.
Work Shop 2.
หน่วยการเรียนรู้ การเขียนโปรแกรมภาษาขั้นพื้นฐาน เรื่อง การตกแต่ง HTML 5 ด้วย CSS รหัส รายวิชา ง23102 การงานอาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและเทคโนโลยี
HTML (2) – Web Programming and Web Database
บทที่ 4 การสร้างเว็บด้วยภาษา HTML
จงยกตัวอย่างโปรแกรมที่ใช้สำหรับออกแบบเว็บไซด์
HYPER TEXT MARKUP LANGUAGE
การจัดการฐานข้อมูลด้วยโปรแกรม MS Access 2013
การออกแบบระบบ System Design.
อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ
อาจารย์สุธารัตน์ ชาวนาฟาง
DOM Document Object Model.
การออกแบบส่วนต่อประสานกับผู้ใช้
ระบบเครือข่ายคอมพิวเตอร์ Internet
JavaScript&CSS&DOM.
ความรู้เบื้องต้นเกี่ยวกับการเขียนโปรแกรม PHP
ความรู้พื้นฐานเกี่ยวกับการสร้างเว็บไซต์
อาการของมะเร็งเต้านม ที่กลับเป็นซ้ำ และ หรือ แพร่กระจาย
โดย อ.ปริญญา น้อยดอนไพร คณะวิทยาศาสตร์และเทคโนโลยี
การเชื่อมโยงหน้า ลิงค์ (Link)
Introduction to Internet Service Technology
ใบสำเนางานนำเสนอ:

HTML (Hypertext Markup Language)

รูปแบบของ HTML 1. Text หมายถึงข้อความทั่วไป 2. Tag , Element หรือ คำสั่ง หมายถึงคำสั่งที่ใช้ใน การกำหนดรูปแบบของ Text 3. Attribute หมายถึงตัวเลือกที่คำสั่งของ HTML สามารถใช้ได้

กฏในการใช้งาน HTML แต่ละคำสั่ง จะต้องอยู่ในเครื่องหมาย < และ > เท่านั้น สามารถใช้ตัวอักษรพิมพ์เล็ก หรือ ใหญ่ ก็ได้เพราะได้ความหมายเหมือนกัน สามารถพิมพ์เอกสาร HTML จัพิมพ์ติดต่อกัน หรือ พิมพ์แยกบันทัดกันก็ได้

การใส่คำอธิบาย(Comment) การใส่คำอธิบายบางส่วนของ HTML ที่เราเขียนมาเพื่อจะได้สะดวกในการติดตามในภายหลัง Comment จะไม่แสดงผลบน Browser รูปแบบของคำสั่งจะแตกต่างจาก HTML ทั่วไป คือเริ่มต้นด้วยคำสั่ง <!- และ ปิดด้วยคำสั่ง ->

เริ่มต้นกับการสร้าง Web Page!!! ในเอกสาร HTML นั้นจะต้องขึ้นต้นด้วยคำสั่ง(Tags.) <HTML> และปิดท้ายด้วย </HTML> ดังนี้ <HTML> ……….. </HTML>

ทุกเอกสาร HTML จะต้องมี HEAD tag ซึ่ง บอกว่าส่วนนี้เป็น Head ของเอกสารนี้ </HEAD> </HTML>

ใน HEAD tags เราจะบอกหน้าปัจจุบันของ Home Page ของเราด้วย TITLE tag <HTML> <HEAD> <TITLE>……………….</TITLE> </HEAD> </HTML>

ส่วนรายละเอียดของหน้าเอกสารจะอยู่ในส่วนของ BODY tags ส่วนรายละเอียดของหน้าเอกสารจะอยู่ในส่วนของ BODY tags. ซึ่งจะเป็นส่วนที่อยู่ถัดไปจาก HEAD tags. <HTML> <HEAD> <TITLE> ……… </TITLE> </HEAD> <BODY> ……………. </BODY> </HTML>

Attribute ของคำสั่ง <BODY>

เริ่มเขียน Page แรกกัน <HTML> <HEAD> <TITLE>My First Page.</TITLE> </HEAD> <BODY> Hello.........World. </BODY> </HTML>

พิมพ์ข้อความ ทดสอบการแสดงผล <BODY> ทดสอบการแสดงผล </BODY>

เปลี่ยนสีพื้นหลังของหน้าต่างได้โดยใช้คำสั่ง <BODY BGCOLOR="#FF0000"> ทดสอบการแสดงผล </BODY>

ใช้รูปภาพมาเป็น Background ได้ด้วย <BODY BACKGROUND=”bgg.gif"> ทดสอบการแสดงผล </BODY>

กลับสู่หน้าจอสีขาวตามเดิม <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล </BODY>

การกำหนดหัวข้อด้วย Tag <Hn> รูปแบบ <Hn> ………………… </Hn> n = ค่าของขนาดเป็นตัวเลข เช่น <h1>…….</h1> โดยค่าของ n จะมีค่าตั้งแต่ 1- 6 เรียงจากมากไปน้อย

<h1> ข้อความ </h1>

การจัดรูปแบบของตัวอักษร

การทำตัวอักษรหนา (Bold) <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <B>ตัวหนา</B> </BODY>

การทำตัวอักษรเอียง (Italics) <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <I>ตัวเอียง</I> </BODY>

การทำตัวอักษรขีดเส้นใต้ (Underlining) <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <U>ตัวขีดเส้นใต้</U> </BODY>

เราสามารถใช้ Tags หลายอย่างปนกันได้ตามต้องการ <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <I><B>ตัวเอียงและหนา</B></I> </BODY>

ในการใช้ Tags หลายอันปนกันจะต้องจัด เรียงลำดับโดยตัวที่ใช้ก่อนจะต้องถูกปิดทีหลังและ ตัวอยู่ทีหลังจะต้องปิดก่อน <ก่อน><หลัง></ก่อน></หลัง> ผิดหลักการ <ก่อน><หลัง></หลัง></ก่อน> ถูกหลักการ

เปลี่ยนขนาดของอักษร(Font) ได้ด้วยวิธีการง่ายๆ อันดับแรกต้องเพิ่ม <FONT> tags... <BODY BGCOLOR="#FFFFFF"> ทดสอบขนาดตัวอักษร <FONT>ขนาด</FONT> </BODY> จากนั้นจึงกำหนดค่าของขนาดด้วย SIZE <BODY BGCOLOR="#FFFFFF"> ทดสอบขนาดตัวอักษร <FONT SIZE=6>ขนาด</FONT> </BODY>

ขนาดของอักษรทั้งหมด 7 ขนาด 1-teeny tiny 2-small 3-regular 4-extra medium 5-large 6-real big 7-yelling!

การกำหนดชื่อ Font ที่ใช้แสดงผล <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT FACE="ARIAL">ARIAL</FONT> </BODY>

เราสามารถที่จะใส่ชื่อ Font มากกว่า 1 ชื่อได้ลงไป ใน Tags ของ <FONT> ได้เพื่อที่เราจะใช้ Font ตัว ที่สองหรือสามแทนเมื่อ ใน Browser ไม่มี Font ตัวแรกๆ ถ้ารายชื่อ Font ที่ เราใส่ไว้ไม่มีเลย Browser จะใช้ Default Font แทน <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">ชื่อ Font </FONT>

เปลี่ยนสีอักษรเป็นสีที่เราชอบ <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT COLOR="#FFOOOO">สีแดง</FONT> </BODY>

เราสามารถใช้หลายๆ ATTRIBUTE ใน <TAG>... <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT> </BODY>

<BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT></B></I></U> </BODY>

การทำงานของ Browser <BODY BGCOLOR="#FFFFFF"> สวัสดี ลองดูซิ ว่ามีการจัดเรียงบรรทัด เป็นอย่างไร ? </BODY>

จะขึ้นบรรทัดใหม่จะต้องเพิ่ม Tags <BR> ลงไป เพื่อเป็นการบอกให้ขึ้นบรรทัดใหม่ <BODY BGCOLOR="#FFFFFF"> สวัสดี <BR> ลองดูซิ <BR> ว่ามีการจัดเรียงบรรทัด <BR> เป็นอย่างไร ? </BODY>

<BODY BGCOLOR="#FFFFFF"> ทดสอบ การแสดงผล ของ Browser <BODY BGCOLOR="#FFFFFF"> ทดสอบ การแสดงผล ของ Browser. </BODY>

จะต้องใส่รหัสช่องว่าง(Space) ใช้   <BODY BGCOLOR="#FFFFFF"> ทดสอบ            การ แสดงผล     &nbsp ;     ของ Browser. </BODY>

Special Character ที่มี ; ปิดท้าย   ( non-breaking space) < (< less-than symbol) > (> greater-than symbol) & (& ampersand) " (" quotation mark)

การสั่งให้เว้นบรรทัดที่ละหลายๆบรรทัดกัน <BODY BGCOLOR="#FFFFFF"> ทดสอบ <BR>  <BR>  <BR>  <BR> การแสดงผล </BODY>

เรื่องของเส้นกั้น หรือ "Horizontal Rule." <BODY BGCOLOR="#FFFFFF"> <HR> </BODY>

การกำหนดความกว้าง WIDTH - กำหนดเป็น % ของ Windows - กำหนดเป็น Pixel ของจอภาพ

<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>

การกำหนดตำแหน่งของเส้น <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% ALIGN=LEFT> <HR WIDTH=60% ALIGN=RIGHT> <HR WIDTH=60% ALIGN=CENTER> </BODY>

สามารถที่จะกำหนด Thickness... ได้ <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15> </BODY>

สามารถกำหนดให้เป็น Solid Line. ได้ด้วย <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=3 NOSHADE> <HR WIDTH=60% SIZE=8 NOSHADE> <HR WIDTH=60% SIZE=15 NOSHADE> </BODY>

การจัดเอกสาร ด้วย tag <p> และ <pre> รูปแบบ <pre>……………</pre> ใช้ในการรูปแบบของข้อความให้อยู่ในรูปแบบที่พิมพ์

ตัวอย่างการจัดย่อหน้าด้วย <p> <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p> การเขียนโฮมเพจ<br> ด้วยภาษา html </p> เรื่อง <br> การทดสอบการใช้<br> คำสั่งจัดย่อหน้า </BODY> </HTML> ตัวอย่างการจัดย่อหน้าด้วย <p>

ตัวอย่างการใช้คำสั่ง จัดย่อหน้าและวางตำแหน่ง <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p align=center> การเขียนโฮมเพจ<br> ด้วยภาษา html </p> <p align=right> เรื่อง <br> การทดสอบการใช้<br> คำสั่งจัดย่อหน้า </BODY> </HTML> ตัวอย่างการใช้คำสั่ง จัดย่อหน้าและวางตำแหน่ง

ตัวอย่างการจัดรูปแบบข้อความด้วย<pre> <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p > การเขียนโฮมเพจ ด้วยภาษา html </p> <pre > เรื่อง การทดสอบการใช้ คำสั่งจัดย่อหน้า </pre> </BODY> </HTML> ตัวอย่างการจัดรูปแบบข้อความด้วย<pre>

การเรียกใช้งาน File รูปภาพนั้นเราจะใช้คำสั่งนี้ <IMG> (image) tag. <BODY BGCOLOR="#FFFFFF"> <IMG> </BODY>

การกำหนดขนาดของรูปภาพ <BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> </BODY>

การกำหนดเส้นกรอบของรูปภาพ ด้วย BORDER <img src=“duck.gif” border=2 > การกำหนดข้อความแทนรูปภาพด้วย Alternative <img src=“duck.gif” border=2 alt=“เป็ด” >

การจัดวางรูปภาพ ด้วย Align Align=left คือการ วางรูปภาพให้ชิดของเอกสารด้านซ้าย Align=right คือการ วางรูปภาพให้ชิดของเอกสารด้านขวา

การจัดวางรูปภาพ ร่วมกับข้อความ ด้วย Align Align=Top คือการ วางรูปภาพให้ชิดข้อความบันทัดบนสุด Align=Middle คือการ วางรูปภาพให้ตำแหน่งกลางของข้อความ Align=botton คือการ วางรูปภาพให้ชิดข้อความบันทัดบนสุด

การกำหนดระยะการแสดงรูปภาพด้วย Vspace,Hspace เช่น <img src=“duck.gif” vspce=100 hspace=200>

วิธีการแสดง List มีทั้ง ORDERED List. และ UNORDERED List. 1 รายละเอียด 1 2 รายละเอียด 2 3 รายละเอียด 3 4 รายละเอียด 4 นี่คือตัวอย่างของ UNORDERED รายละเอียด 1 รายละเอียด 2 รายละเอียด 3 รายละเอียด 4

Un Order Lists แสดงข้อความแยกเป็นบรรทัดๆ ด้วย Bullet ใช้คำสั่ง <UL> สามารถใช้ตัวเลือก “TYPE” กับ <UL> ได้ดังนี้ <UL TYPE=DISC> กำหนด Bullet ให้เป็นวงกลมสีดำ <UL TYPE=CIRCLE> กำหนด Bullet ให้เป็นวงกลมสีขาว <UL TYPE=SQUARE> กำหนด Bullet ให้เป็นสีเหลี่ยมสีทึบ

<BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <UL> <LI>รายละเอียด 1 <LI>รายละเอียด 2 <LI>รายละเอียด 3 <LI>รายละเอียด 4 </UL> </BODY>

List แบบ Unordered List

Order Lists แสดงข้อความแยกเป็นบรรทัดๆ ด้วยตัวเลข หรือ ตัวอักษรแบบเรียงลำดับ ใช้คำสั่ง <OL> สามารถใช้ตัวเลือก “TYPE” กับ <OL> ได้ดังนี้ <UL TYPE=A> ผลลัพธ์ คือ A , B , C , D , ... <UL TYPE=1> ผลลัพธ์ คือ 1 , 2 , 3 , 4 , ... <UL TYPE=I> ผลลัพธ์ คือ I , II , III , IV , ...

การกำหนดค่าเพิ่มเติมใน Order List

<BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <OL> <LI>รายละเอียด 1 <LI>รายละเอียด 2 <LI>รายละเอียด 3 <LI>รายละเอียด 4 </OL> </BODY>

List แบบ Ordered List

ความสามารถด้านการทำข้อความเคลื่อนไหว คำสั่งที่ใช้ <MARQUEE ตัวเลือก>…………</MARQUEE> ตัวเลือกได้แก่ BEHAVIOR = ลักษณะการเคลื่อนไหวได้แก่ SCROLL,SLIDE,ALTERNATE DIRECTION = ทิศทางการเคลื่อนไหว ได้แก่ LEFT,RIGHT WIDTH/HEIGHT= กำหนดขนาดของพื้นที่แสดงผล LOOP=จำนวนรอบที่แสดงผล

<html> <body> <marquee behavier=slide width=80% direction=right bgcolor=#ff0000> ยินดีต้อนรับ </marquee> </body> </html>

การสร้างตาราง ( TABLE ) รูปแบบคำสั่ง <TABLE> <CAPTION> ข้อความอธิบายตาราง</CAPTION> <TR><TH></TH><TH>----</TH></TR> <TR><TD></TD><TD>----</TD></TR> --- <TR><TD><TD/><TD>----</TD></TR> </TABLE>

< BODY> การสร้างตาราง ( TABLE ) <TABLE> <CAPTION>ผลการแข่งขัน</CAPTION> <TR><TH>รางวัลที่1</TH><TH>รางวัลที่2</TH></TR> <TR><TD>TV</TD><TD>CARD</TD></TR> <TR><TD>VDO</TD><TD>TOY</TD></TR> </TABLE> < /BODY >

การเพิ่มขนาดความหนาให้กับตาราง รูปแบบคำสั่ง <TABLE BORDER="number"> --- --- </TABLE>

< BODY> การเพิ่มขนาดความหนาให้กับตาราง <TABLE BORDER="10"> <CAPTION>ผลการแข่งขัน</CAPTION> <TR><TH>รางวัลที่1</TH><TH>รางวัลที่2</TH></TR> <TR><TD>TV</TD><TD>CARD</TD></TR> <TR><TD>VDO</TD><TD>TOY</TD></TR> </TABLE> < /BODY >

ตารางซ้อนตาราง รูปแบบคำสั่ง เหมือนกับคำสั่งการสร้างตารางทั่วๆไปเพียงแต่เรา สร้างตารางอีกชุดหนึ่งไว้ใน <TD>.....</TD>ของตารางหลัก

<TD> <TABLE BORDER="10"> <TR><TH>รางวัลที่1</TH><TH>รางวัลที่ 2</TH></TR> <TR><TD>TV</TD><TD>CARD</TD></TR> <TR><TD>VDO</TD><TD>TOY</TD></TR> </TABLE> </TD>

ALIGN เพื่อจัดวางข้อความ WIDTH เพื่อปรับขนาดตาราง COLSPAN เพื่อรวมตารางย่อยตามคอลัมน์ ROWSPAN เพื่อรวมตารางย่อยตามแถว

การสร้าง Link. เพื่อเชื่อมโยงไปยังเพจอื่นๆ <A href=“ชื่อเพจที่ต้องการไป”> ………. ข้อความ/รูปภาพ……. </a> <BODY BGCOLOR="#FFFFFF"> <A HREF=“Main.html"> COMPUTER-HTML</A> </BODY>

ต้องการจะ Link ไปหา ... URL <A HREF="ชื่อ URL ที่ต้องการจะไป">ข้อความ ที่ใช้เป็นตัว Link</A> <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://Comsc.rilp.ac.th">COMPUTE R-HTML</A> </BODY>

สร้าง Link เพื่อให้ส่ง E-Mail <BODY BGCOLOR="#FFFFFF"> Mail to Me : <A HREF="mailto:pakawatk@hotmail.com">pak awatk@hotmail.com</A> </BODY>

เราสามารถสร้าง Link จากรูปภาพได้ <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://Comsc.rilp.ac.th"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> </A> </BODY>

ไม่ต้องแสดงเส้นขอบ <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://Comsc.rilp.ac.th"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A> </BODY>

<A name=“top”>บนสุด</a> การระบุตำแหน่งของการ Link ในเอกสารอื่น <A name “ต่ำแหน่ง”> ข้อความ </a> เช่น <A name=“top”>บนสุด</a>

การระตำแหน่งในการแสดงเอกสารจากการ LINK <A href=“เอกสารที่จะแสดง” target=“Option”> ข้อความ </a>

การแบ่งจอภาพโดยคำสั่ง FRAME SRC <HTML> <HEAD><TITLE>....................</TITLE></HEAD> <FRAMESET ROWS[COLS]="number หรือ %"> <FRAME SRC=ชื่อไฟล์ที่ต้องการแสดงผล หรือ URL> <FRAME SRC=ชื่อไฟล์ที่ต้องการแสดงผล หรือ URL> </FRAMESET> </HTML> โดยที่...ROWS=แบ่งแนวนอน,COLS=แบ่งแนวตั้ง

<HTML> <HEAD> <TITLE>การแบ่งจอภาพ ( FRAME )</TITLE> </HEAD> <FRAMESET ROWS="20%,*"> <FRAME SRC="logo.html" > <FRAME SRC="main.html"> </FRAMESET> </HTML>

<HTML> <HEAD> <TITLE>การแบ่งจอภาพ ( FRAME )</TITLE></HEAD> <FRAMESET COLS="20%,*"> <FRAME SRC="menu.html" > <FRAME SRC="main.html"> </FRAMESET> </HTML>

<FRAMESET COLS="100,600"> <FRAME SRC="menu <FRAMESET COLS="100,600"> <FRAME SRC="menu.html" > <FRAMESET ROWS="20%,*"> <FRAME SRC="logo.html" > <FRAME SRC="main.html"> </FRAMESET> </FRAMESET>

การสร้างแบบฟอร์มเพื่อรับข้อมูล คำสั่ง <FORM> เป็นคำสั่งเริ่มต้นในการสร้างแบบฟอร์ม <FORM Attributes> …….. คำสั่งอื่นๆ ที่ใช้ภายในคำสั่ง FORM …….. </FORM

Attribute ต่างๆ ที่ใช้ในกับคำสั่ง <FORM> ได้แก่

<FORM METHOD="POST" ACTION="output.php"> ……………………………….. ตัวอย่าง การสร้างฟอร์ม <FORM METHOD="POST" ACTION="output.php"> ……………………………….. </FORM>

คำสั่ง <TEXTAREA> เป็นรูปแบบการป้อนข้อมูลแบบอิสระ (Free Form) <TEXTAREA Attributes> ……. Default Text ……. </TEXTAREA> Atteibute ต่างๆ ได้แก่ - NAME กำหนดชื่อให้กับพื้นที่ข้อมูล - ROWS กำหนดจำนวนแถวที่ต้องการแสดงไว้ใน Form - COLS กำหนดจำนวนตัวอักษรที่ต้องการแสดงไว้ใน Form - Default Text เป็นข้อความที่ใช้แสดงให้เห็นภายในพื้นที่ของ TEXT

<FORM METHOD="POST" ACTION="output.php"> ตัวอย่างการใช้ TEXTAREA <FORM METHOD="POST" ACTION="output.php"> <TEXTAREA NAME="text" ROWS="5" COLS="30"> .. บันทึกข้อมูล ... </TEXTAREA> </FORM>

… Text … <INPUT Attributes> Attribute ต่างๆ ของ <INPUT> - Text เป็นข้อความที่ใช้แสดงด้านหน้าของพื้นที่ที่ใช้รับข้อมูล - NAME กำหนดชื่อให้กับพื้นที่รับข้อมูล - SIZE กำหนดความยาวของช่องที่ใช้ในการป้อนข้อมูล - MAXLENGTH กำหนดความยาวสูงสุดของตัวอักษรที่จะป้อนข้อมูล - VALUE กำหนดค่าเริ่มต้นไว้ส่วนหน้าในช่องเติมข้อมูล - CHECKED กำหนดให้มีการเลือกตัวเลือกไว้ล่วงหน้า(เฉพาะชนิด Checkbox และ Radio Button เท่านั้น)

<FORM METHOD="POST" ACTION="output.php"> ตัวอย่างการใช้ Input โดยมี Type แบบ “Text” และ “Password” <FORM METHOD="POST" ACTION="output.php"> USER <INPUT TYPE="text" NAME="user"><BR> PASSWORD <INPUT TYPE="password"> </FORM>

ตัวอย่างการใช้ Input โดยมี Type แบบ “Check” และ “Radio” <FORM METHOD="POST" ACTION="output.php"> คำนำหน้าชื่อ<BR> <INPUT TYPE="checkbox" NAME="c1" value=0>นาย <INPUT TYPE="checkbox" NAME="c2" value=1>นาง <INPUT TYPE="checkbox" NAME="c3" value=2>นางสาว <BR> สถานะภาพ<BR> <INPUT TYPE="radio" NAME="r1" value=0>โสด <INPUT TYPE="radio" NAME="r2" value=1>สมรส <INPUT TYPE="radio" NAME="r3" value=2>หย่าร้าง </FORM>

<FORM METHOD="POST" ACTION="output.php"> ตัวอย่างการใช้ Input โดยมี Type แบบ “Reset” และ “Submit” <FORM METHOD="POST" ACTION="output.php"> <INPUT TYPE="reset" value="ยกเลิกการป้อนข้อมูล"><BR><BR> <INPUT TYPE="submit" value="ส่งข้อมูล"> </FORM>

คำสั่ง <SELECT> ใช้แสดงตัวเลือกทั้งหมดที่มีเพื่อให้ผู้ใช้เลือก โดย อาจแสดงในรูปแบบ Drop-down List ใช้คู่กับคำสั่ง <OPTION> <SELECT Attributes> <OPTION Attributes> Text1 …………….. <OPTION Attributes> Text n </SELECT> Attributes ที่ใช้กับคำสั่ง <Select> ได้แก่ - NAME กำหนดชื่อให้กับพื้นที่ข้อมูล - SIZE กำหนดจำนวนตัวเลือกที่ต้องการแสดงบนจอภาพ - MULTIPLE เพื่อให้แสดงตัวเลือกทั้งหมดที่มีมาให้

Attributes ที่ใช้กับคำสั่ง <OPTION> ได้แก่ - VALUE Attributes ที่ใช้กับคำสั่ง <OPTION> ได้แก่ - VALUE กำหนดค่าที่จะใช้ในการส่งให้กับ Script - SELECT กำหนดให้ตัวเลือกใดถูกเลือกไว้ล่วงหน้า - Text1…Text n แสดงค่าของตัวเลือกที่ต้องการให้ผู้ใช้เห็น

<FORM METHOD="POST" ACTION="output.asp"> ตัวอย่างการใช้ <SELECT> <FORM METHOD="POST" ACTION="output.asp"> <SELECT NAME="job" > <OPTION Value="0">รับจ้าง <OPTION Value="1">ข้าราชการ <OPTION Value="2">เกษตรกร <OPTION Value="3">ค้าขาย </SELECT> </FORM>

ตัวอย่างการสร้างแบบฟอร์ม <FORM METHOD="POST" ACTION="output.asp"> ชื่อ<INPUT TYPE="text" NAME="">นามสกุล<INPUT TYPE="text" NAME=""><BR> คำนำหน้าชื่อ<BR> <INPUT TYPE="checkbox" NAME="c1" value=0>นาย <INPUT TYPE="checkbox" NAME="c2" value=1>นาง <INPUT TYPE="checkbox" NAME="c3" value=2>นางสาว <BR> สถานะภาพ<BR> <INPUT TYPE="radio" NAME="r1" value=0>โสด <INPUT TYPE="radio" NAME="r2" value=1>สมรส <INPUT TYPE="radio" NAME="r3" value=2>หย่าร้าง

ตัวอย่างการสร้างแบบฟอร์ม(ต่อ) <BR> อาชีพ <SELECT NAME="job" > <OPTION Value="0">รับจ้าง <OPTION Value="1">ข้าราชการ <OPTION Value="2">เกษตรกร <OPTION Value="3">ค้าขาย </SELECT><BR> <INPUT TYPE="reset" value="ยกเลิกการป้อนข้อมูล"><INPUT TYPE="submit" value="ส่งข้อมูล"> </FORM>