HTML PHP MySQL
HTML
ส่วนประกอบของ webpage 1. ส่วน Header ประกอบด้วย ชื่อหน่วยงาน ตราหรือสัญลักษณ์ของหน่วยงาน หน้าที่หรือวัตถุประสงค์ของหน่วยงาน 2. ส่วน Body ประกอบด้วย เส้นแบ่งข้อความ รายการของหัวข้อหรือเนื้อหา ภาพประกอบ ปุ่มหรือ icon
ส่วนประกอบของ webpage(ต่อ) 3. ส่วน footer ประกอบด้วย email address ของผู้สร้าง(webmaster) และหน่วยงาน วันเวลาที่สร้างและปรับปรุงข้อมูล คำประกาศลิขสิทธิ์ ตราหรือสัญลักษณ์ของหน่วยงาน คำประกาศหรือเจตนารมย์ของหน่วยงาน
องค์ประกอบของเอกสาร HTML ข้อความที่ให้แสดงบนจอภาพ ข้อความที่เป็นคำสั่ง เรียกว่า HTML tag
HTML Tag HTML Tag ประกอบด้วยเครื่องหมาย < (Left angle bracket) ตามด้วยชื่อ Tag และ > (Right angle bracket ) เช่น head tag : <HEAD> title tag : <TITLE> body tag : <BODY> ชื่อ tag ที่เขียนอยู่ในเครื่องหมาย <> นี้จะเขียนเป็นตัวใหญ่หรือตัวเล็กก็ได้แต่นิยมเขียนตัวใหญ่เพื่อให้เห็นความแตกต่าง
ชนิดของ HTML Tag ชนิดของ HTML Tag มี 2 ชนิด 1. tag คู่ (Paired tag) 2. tag เดี่ยว (Single tag)
1. Tag คู่ (Paired Tag) tag คู่(Paired tag) ใส่ tag เปิดไว้หน้าข้อความ และใส่ tag ปิด(ลักษณะเหมือน tag เปิดแต่มีเครื่องหมาย / นำหน้า) ไว้หลังข้อความ <Tag name> ข้อความ</Tag name> เช่น <HTML> ………</HTML> <HEAD> ………</HEAD> <BODY> ………</BODY>
2. Tag เดี่ยว (Single Tag) tag เดี่ยว (Single tag) เป็น tag ที่มีเฉพาะ Tag เปิดเท่านั้น ไม่มี tag ปิด <Tag name> เช่น <BR> ใช้สำหรับขึ้นบรรทัดใหม่ <HR> ใช้ตีเส้นตามแนวนอน <IMG> ใช้แทรกรูปภาพ
โครงสร้างพื้นฐานของ HTML <HEAD> <TITLE> ชื่อหัวเรื่องที่ต้องการแสดง </TITLE> </HEAD> <BODY> คำสั่งหรือข้อมูลที่ต้องการแสดง </BODY> </HTML>
คำสั่งพื้นฐานของ HTML <HTML> … </HTML> กำหนดจุดเริ่มต้น และสิ้นสุดเอกสาร HTML <HEAD> … </HEAD> กำหนดส่วนหัวเรื่องของเอกสาร HTML ภายในคำสั่งนี้จะมีคำสั่ง <TITLE> … </TITLE> <TITLE> … </TITLE> กำหนดหัวเรื่องของเอกสารบน title bar ของโปรแกรม Browser และจะปรากฎในคำสั่ง bookmark ของโปรแกรม Browser ด้วย
คำสั่งพื้นฐานของ HTML(ต่อ) <BODY>…</BODY> กำหนดบล็อคที่ใช้บรรจุข้อมูลต่างๆ ของเอกสาร HTML เช่นข้อความ รูปภาพ ตาราง แบบฟอร์ม รวมทั้ง tag ต่าง ๆ ส่วนนี้เป็นส่วนที่โปรแกรม Browser นำไปแสดงเป็นผลลัพธ์บนจอภาพ
ตัวอย่าง <HTML> <HEAD> <TITLE> This is my first home’s page </TITLE> </HEAD> <BODY> HELLO WORLD ! </BODY> </HTML>
กฎในการเขียนคำสั่ง HTML Tag ภาษา HTML อยู่ในเครื่อง < >หมายเท่านั้น ชื่อ Tag จะใช้ตัวอักษรตัวใหญ่หรือเล็กก็ได้ เช่น <title> <TITLE> หรือ <Title> พิมพ์เอกสาร HTML ติดต่อกันทั้งข้อความ และคำสั่ง พิมพ์แยกบรรทัด หรือ พิมพ์เว้นช่องว่าง ก็ได้
คำสั่งอธิบายโปรแกรม แทรกคำอธิบายโปรแกรม หรือหมายเหตุลงในโปรแกรมโดยใช้ <!-- massage--> เมื่อ massage คือข้อความที่ต้องการให้เป็นคำอธิบาย ตัวอย่าง <!-- DEMO Home page Create By Seree Chinodom 26 Dec 1996 -->
การจัดข้อความในเอกสาร HTML คำสั่งขึ้นบรรทัดใหม่ คำสั่งให้ขึ้นย่อหน้าใหม่ คำสั่งกำหนดบล็อคข้อความ คำสั่งจัดรูปแบบข้อความ คำสั่งจัดรูปแบบข้อความให้อยู่ตรงกลาง คำสั่งควบคุมให้แสดงข้อความแบบต่อเนื่อง
คำสั่งขึ้นบรรทัดใหม่ (Line Break) ใช้คำสั่งของ HTML คือ tag เดี่ยว <BR> ซึ่งมีรูปแบบดังนี้ ข้อความ <BR> ตัวอย่าง Department of Computer Science <BR> Faculty of Science <BR> Burpaha University <BR>
คำสั่งขึ้นย่อหน้าใหม่ (Paragraph Break) ใช้คำสั่งของ HTML คือ Tag คู่ <P> คล้ายกับการขึ้นบรรทัดใหม่ แต่จะเว้นบรรทัดให้ 1 บรรทัด มีรูปแบบคือ <P> ข้อความ </P> ตัวอย่าง <P> Seree Chinodom Department of Computer Science Faculty of Science Burapha University, Chonburi </P>
คำสั่งขึ้นย่อหน้าใหม่ (ต่อ) ใช้ Tag คู่<P> จะมี tag เสริมที่ใช้ประกอบเพื่อใช้ในการจัดข้อความ เราเรียก tag เสริมว่า attribute มีรูปแบบดังนี้ <P ALIGN = Position> ค่าแทน Position ได้แก่ - LEFT จัดข้อความชิดซ้ายของจอภาพ - RIGHT จัดข้อความชิดขวาของจอภาพ - CENTER จัดข้อความกลางจอภาพ เช่น <P ALIGN = CENTER> Burapha University </P>
คำสั่งกำหนดบล็อคข้อความ ใช้ tag คู่ <BLOCKQUOTE> เน้นข้อความ เพื่อแยกจากเนื้อหาที่มาก่อน มีรูปแบบดังนี้ <BLOCKQUOTE> ข้อความ </BLOCKQUOTE> ตัวอย่าง This is the blockquote demo <BLOCKQUOTE> Department of Computer science, Faculty of Science, Burapha University . Bangsaen , Chonburi. 20131 Thailand </BLOCKQUOTE>
คำสั่งจัดรูปแบบข้อความให้ตรงตามเอกสารเดิม(Preformatted) ใช้ tag คู่<PRE> โดยข้อความใด ๆ ที่จัดวางภายใน tag นี้ จะถูกโปรแกรม Browser แสดงผลตามที่ได้จัดไว้ <PRE> ข้อความ </PRE> ตัวอย่าง <PRE> B U R A P H A U N I V E R S I T Y </PRE>
คำสั่งจัดข้อความให้อยู่ตรงกลางบรรทัด(Center) ใช้ tag คู่ <CENTER> มีรูปแบบดังนี้ <CENTER> ข้อความ </CENTER> ตัวอย่าง <CENTER> This is text with CENTER tag </CENTER>
การตีเส้นตรงแนวนอนในเอกสาร HTML การตีเส้นตรงแนวนอน (Horizontal line) ใช้ tag เดี่ยว <HR> มีรูปแบบดังนี้ <HR> ตัวอย่าง The following is horizontal line The rest of this is just more text
การกำหนดลักษณะของเส้นตรงแนวนอน ใช้ tag เดี่ยว <HR> กำหนด ความหนา ความยาว ตำแหน่งและแสดงผลเส้นทึบของเส้นได้ดังนี้ <HR SIZE = n WIDTH = m ALIGN = position NOSHADE> SIZE = n ความหนาของเส้น ขนาดปกติ 2 pixel WIDTH = m กำหนดความยาวของเส้น ถ้าไม่ระบุจะยาวเต็มจอภาพ อาจระบุเป็น % ก็ได้ ALIGN = LEFT|RIGHT|CENTER กำหนดตำแหน่งเส้นตรงแนวนอน หากเส้นยาวไม่เต็มจอภาพ กำหนดได้เป็น LEFT, RIGHT, CENTER NOSHADE กำหนดเส้นตรงแนวนอน แบบทึบไม่มีเงา
ตัวอย่างการกำหนดเส้นตรงแนวนอน <HTML> <BODY> <HR SIZE= 40 WIDTH=50% ALIGN = LEFT> <HR SIZE= 20 WIDTH=40% ALIGN = LEFT> <HR NOSHADE SIZE= 10 WIDTH=50% ALIGN = LEFT> <HR NOSHADE SIZE= 100 WIDTH=1% > <HR NOSHADE SIZE= 80 WIDTH= 1% > </BODY> </HTML>
การกำหนดหัวเรื่อง(Heading) กำหนดหัวเรื่องให้มีขนาดแตกต่างกันได้ 6 ระดับโดยใช้ Tag คู่ <H1> ถึง <H6> มีรูปแบบคือ <Hn> ข้อความ </Hn> ตัวอย่าง <H1> Burapha University </H1> <H2> Burapha University </H2> <H3> Burapha University </H3> <H4> Burapha University </H4> <H5> Burapha University </H5> <H6> Burapha University </H6>
การกำหนดรูปแบบตัวอักษร ใช้ tag ที่กำหนดคุณลักษณะของตัวอักษรกำกับข้อความที่ต้องการ แบ่งตามการใช้งานมี 2 ประเภท คือ 1. Physical Character Styles 2. Logical Character Style
1. Physical Character style กำหนดรูปแบบบังคับให้กับข้อความ คุณลักษณะของตัวอักษรแบบที่ต้องการแสดงบนจอภาพ เรียกว่า Fixed type style รูปแบบคำสั่ง ตัวเข้ม(Bold) <B> ...</B> ตัวเอน (Italic) <I>…</I> ตัวขีดเส้นใต้(Underline) <U>…</U> ตัวกระพริบ <BLINK>...</BLINK> ตัวอักษรกว้างเท่ากันทุกตัว(Typewriter text) <TT>….</TT> ตัวขีดทับข้อความ <STRIKE>...</STRIKE> หรือ <S>...</S>
2. Logical Character Style ผลจากการอ่านจากโปรแกรม Browser ที่ต่างชนิดกันอาจจะแสดงผลไม่เหมือนกัน <ADDRESS>…</ADDRESS> กำหนดรูปแบบตัวอักษรให้กับข้อมูลเกี่ยวกับ ที่อยู่ หมายเลขโทรศัพท์ และ Email address <CITE>…</CITE> ตัวอักษรเอียงที่เน้นข้อความที่เป็นคำพูด คำสนทนา(Citeation) <EM>…</EM> ตัวอักษรเอียงที่เน้นข้อความที่เป็นคำพูด วลี (Emphasize) <CODE>….</CODE> ตัวอักษรแบบคอมพิวเตอร์ (Computer Code)
Logical Character Style(ต่อ) <STRONG>…</STRONG> ตัวอักษรหนา <VAR>….</VAR> ตัวอักษรที่เน้นข้อความและค่าตัวเลข <SUB>….</SUB> ตัวอักษรแบบตัวห้อย <SUP>….</SUP> ตัวอักษรแบบตัวยกขึ้น <BIG>….</BIG> ตัวอักษรใหญ่ <SMALL>….</SMALL> ตัวอักษรแบบตัวเล็ก
การจัดวางตำแหน่งข้อความ กำหนดตำแหน่งข้อความให้ชิดซ้าย ขวา หรืออยู่กึ่งกลางจอภาพ ให้กำหนด attribute ดังนี้ ALIGN=LEFT | RIGHT | CENTER ตัวอย่าง <H1><P ALIGN=LEFT> Dept. of Computer Science </P></H1> <H2><P ALIGN=CENTER> Dept. of Computer Science </P></H2> <H2><P ALIGN=RIGHT >
การกำหนดขนาดของตัวอักษร (Size) จะไม่กำหนดขนาดตัวอักษรเป็นพอยต์ แต่จะกำหนดเป็นความสูง มี 7 ขนาด โดยใช้ตัวเลข 1-7 มีรูปแบบดังนี้ <FONT SIZE = n > ข้อความ </FONT> เมื่อ n เป็นเลขจำนวนเต็มบวก 1-7 1 คือขนาดเล็กที่สุด 7 คือขนาดใหญ่ที่สุด
การกำหนดขนาดของตัวอักษร (ต่อ) การกำหนดขนาดตัวอักษรแบบมาตรฐานทั้งเอกสาร ซึ่งสามารถเพิ่มหรือลดขนาดได้ภายหลังโดยใช้ <FONT SIZE = +/- n> มีรูปแบบดังนี้ <BASEFONT SIZE = n> ข้อความ ตัวอย่าง <BASEFONT SIZE = 4> Burapha University <BR> <FONT SIZE = +2> Bangsaen Chonburi> </FONT> <BR>
การกำหนดแบบตัวอักษร หากต้องการให้โปรแกรม Browserแสดงแบบตัวอักษรหลายแบบใน Web page เดียวกันจะต้องใช้ tag สำหรับกำหนด Font ซึ่งมีรูปแบบดังนี้ <FONT FACE = “ name1”, ” name2”,…> ตัวอย่าง <FONT FACE = “AngsanaUPC”> มหาวิทยาลัยบูรพา </FONT> <FONT FACE = “CordialUPC”> มหาวิทยาลัยบูรพา </FONT> <FONT FACE = “DilleniaUPC”> มหาวิทยาลัยบูรพา </FONT> <FONT SIZE = 2 FACE = “Courier”> Burapha University </FONT> <BR>
การกำหนดสีให้ตัวอักษร(Color) การกำหนดสีให้ตัวอักษรมี 2 กรณี 1. การกำหนดสีให้ตัวอักษรเฉพาะข้อความ 2. การกำหนดสีให้ตัวอักษรทั้งเอกสาร
ความหมายของตัวเลขและการผสมสี ตัวเลขแทนสีที่ใช้เป็นเลขฐานสิบหก (0-9 และ A-F) จำนวน 3 ชุด แต่ละชุดมีค่า 00-FF - ชุดที่ 1 แทนสีแดง (RED) - ชุดที่ 2 แทนสีเขียว (GREEN) - ชุดที่ 3 แทนสีน้ำเงิน (BLUE) RGB (Red GreenBlue) เป้นแม่สีทางวิทยาศาสตร์ และสามารถนำมาใช้ในระบบคอมพิวเตอร์ด้วย
ตารางตัวอย่างรหัสสี สี รหัสสี ขาว #FFFFFF น้ำเงิน #0000FF ดำ #000000 สี รหัสสี ขาว #FFFFFF น้ำเงิน #0000FF ดำ #000000 ฟ้า #4D4DFF เทา #7F7F7F ชมพู #CC3299 แดง #FF0000 เขียว #00FF00 เหลือง #FFFF00
1. การกำหนดสีให้กับตัวอักษรเฉพาะข้อความ กำหนดใน tag <FONT> มีรูปแบบดังนี้ <FONT COLOR = #rrggbb > กำหนดสีจากเปอร์เซ็นต์การผสมสี <FONT COLOR = colorname > กำหนดสีจากสีมาตราฐาน ตัวอย่าง <FONT COLOR = Red> This is Red color <BR> <FONT COLOR = #0000FF> next is blue <BR> <FONT COLOR = #00FF00> This is Green Color <BR>
2. การกำหนดสีให้กับตัวอักษรทั้งเอกสาร กำหนดใน tag <BODY> ซี่งมีรูปแบบดังนี้ <BODY TEXT = #rrggbb> กำหนดสีจากเปอร์เซ็นต์การผสมสี <BODY TEXT = colorname > กำหนดสีจากชื่อสีมาตราฐาน ตัวอย่าง <BODY TEXT = Red> <H1> This is testing Text Color </H1> All text in this page is red color by body text = Red Text <BR>
การใช้ตัวอักษรพิเศษ (Special Character) พิมพ์ข้อความระหว่าง tag <BODY> และ </BODY> ได้ทั้งตัวอักษรและตัวเลข รวมทั้งสัญลักษณ์ต่าง ๆ ยกเว้นเครื่องหมาย “ < > และ & ใช้คำสั่งพิเศษ สำหรับแทนสัญลักษณ์เหล่านี้ ใช้รหัสควบคุมซึ่งระบุได้ 2 วิธี ดังนี้ 1. ระบุชื่อสัญลักษณ์ที่ต้องการ (Name Entities) 2. ระบุโดยใช้ ASCII Code
1. ระบุชื่อสัญลักษณ์ที่ต้องการ ชื่อสัญลักษณ์ที่ระบุจะขึ้นต้นด้วยเครื่องหมาย & (Ampersand) แล้วตามด้วยชื่อย่อของสัญลักษณ์ " แสดงเครื่องหมาย quotation mark (“) < แสดงเครื่องหมาย Less than (<) > แสดงเครื่องหมาย greater than (>) & แสดงเครื่องหมาย ampersand (&) แสดงการเว้นวรรค 1 ตัวอักษร ® แสดงเครื่องหมายพิเศษเครื่องหมาย ลงทะเบียน
2. ระบุโดยใช้รหัส ASCII เริ่มต้นด้วยเครื่องหมาย & แล้วตามด้วยเครื่องหมาย # และค่าของตัวเลขรหัส ASCII ตัวอย่าง Symbol of Copyright is :© <BR> Symbol of Registration is :® <BR>
การแสดงผลแบบรายการ (List) ด้วยภาษา HTML รูปแบบ <LIST TYPE> <ITEM> First Item in List <ITEM> Second Item in List <ITEM> Third Item in List </LIST TYPE>
การแสดงผลรายการแบบลำดับตัวเลข(order Lists) ใช้แสดงรายการที่เรียงลำดับ หรือจัดลำดับความสำคัญของหัวข้อ ใช้ตัวเลข หรือ ตัวอักษรเรียง ในการเรียงก็ได้ มีรูปแบบดังนี้ <OL TYPE = number_type START = number..> <LI> Item number one <LI> Item number two <LI> Item number tree </OL>
ตัวอย่าง <OL TYPE = a> <LI> Oranges </LI> <LI> Peaches </LI> <LI> Grapes </LI> </OL> ได้ผลลัพธ์คือ a. Oranges b. Peaches c. Grapes
ตัวอย่าง <OL TYPE = I> <LI> Oranges </LI> <LI> Peaches </LI> <LI> Grapes </LI> </OL> ได้ผลลัพธ์คือ I. Oranges II. Peaches III. Grapes
ตัวอย่าง <OL START = 3> <LI> Oranges </LI> <LI> Peaches </LI> <LI VALUE = 7> Grapes </LI> <LI>Apples </LI> </OL> ได้ผลลัพธ์คือ 3. Oranges 4. Peaches 7. Grapes 8. Apples
การแสดงผลรายการแบบไม่มีลำดับ(Unordered List) ใช้แสดงรายการหัวข้อย่อยโดยไม่มีหน่วยนับนำหน้า แต่จะเป็น bullet กำหนดรูปแบบได้ โดยระบุหลังคำสั่ง TYPE ต่อจาก <UL> เป็น disc(วงกลมทึบ), circle, square รูปแบบ <UL TYPE = bullet_type> <LI> First Item <LI> Second Item <LI> Third Item </UL>
ตัวอย่าง These are name of CS Staff <UL> <LI>Seree Chinodom </LI> <LI>Tawatchai Iempairoj </LI> <LI>Jira Jaturanon </LI> <LI>Surangkana Thumlikhit </LI> <LI>Others </LI> </UL>
Directory Lists เป็นการแสดงผลข้อมูลเหมือนกับ <UL>,</UL> แต่จะถูกจำกัดด้วยตัวอักษรไม่เกิน 24 ตัว มีรูปแบบดังนี้ <DIR> <LI> message </LI> <LI> massage </LI> </DIR>
Menu Lists แสดงรายการต่างๆแบบไม่มีตัวเลข แต่มีหัวข้อเป็นสัญลักษณ์ (Bullet) แต่การแสดงผลข้อมูลจะกะทัดรัดกว่าการใช้ tag <UL> มีรูปแบบดังนี้ <MENU> <LI> message <LI> massage </MENU>
NESTED LISTS <UL> <LI> few New England states: <LI> Vermont </LI> <LI> New Hampshire </LI> </UL> <LI> One Midwestern state: <LI> Michigan </LI>
การจัดการรูปภาพ ด้วยภาษา HTML 1. รูปภาพชนิด Graphic Interchange Format (GIF) 2. รูปภาพชนิด Joint Photographic Experts Group (JPEG หรือ JPG)
GIF Format GIF (Graphic Interchange From) พัฒนาโดย CompuServe นิยมใช้กับภาพถ่าย ภาพการ์ตูน ความละเอียดได้สูง 64000 x 64000จุด เก็บรายละเอียดได้ไม่เกิน 8 บิต แสดงสีได้ 256 สี ใช้แสดงภาพเคลื่อนไหว
JPEG Format JPEG (JPG) -Joint Protographic Expert Group เป็นไฟล์ที่ผ่านการบีบอัดข้อมูลมาก่อน ในอัตรา 10:1 ขนาดของการบีบอัด มี 3 ระดับ HIGH, MIDDLE, LOW ภาพที่นำมาใช้เป็นภาพนิ่งหรือภาพถ่ายเท่านั้น แสดงสีได้ 16.7 ล้านสี มีความชัดเจนสูง
การแทรกภาพลงในเอกสาร ใช้ tag เดี่ยว ได้แก่ <IMG SRC= “ชื่อแฟ้มรูปภาพ“> <IMG SRC= “ชื่อแฟ้มรูปภาพ” ALT=“ข้อความ”> ภาพควรเป็นชนิด GIF หรือ JPEG เพิ่มแอตทริบิวต์ ALT= “ข้อความ“ ต่อจาก SRC = “ไฟล์รูปภาพ“ ผู้ใช้บราวเซอร์แบบ text mode รูปภาพที่กำหนดไว้จะแทนด้วย [IMAGE] เมื่อกำหนด ALT = “ข้อความ“
การใส่ข้อความแสดงผลแแบบ Text ตัวอย่าง <IMG SRC=“rock.gif” ALT=“Rock Garden”>
การวางตำแหน่งรูปภาพ HTML กำหนดการวางรูปภาพเพื่อแสดงผลได้ 2 แบบคือ 1) แบบแนวนอน ประกอบด้วย Left, Right 2) แบบแนวตั้ง มี 3 ระดับ เสมอบน ใช้ top และ texttop กึ่งกลางใช้ middle และ abdmiddle เสมอล่างใช้ baseline, bottom, absbottom เขียนภายใต้แอททริบิวต์ ALIGN เช่น <IMG ALIGN=bottom>
การใส่ภาพลงใน WEB กึ่งกลางจอภาพ แอตทริบิวต์ ALIGN ไม่สามารถกำหนดภาพไว้กลางจอภาพได้ ต้องใช้คำสั่ง <CENTER> ...</CENTER> การกำหนดขนาดของภาพจะกำหนดด้วยแอตทริบิวต์ WIDTH=ความกว้าง HEIGHT=ความสูง เขียนไว้หน้าหรือต่อท้าย SRC Ex. <IMG SRC = “building.gif” WIDTH=100 HEIGHT=100>
การปรับขนาดภาพ การปรับขนาดของภาพให้ใหญ่หรือเล็กตามสัดส่วน ให้กำหนดแอททริบิวต์ ความกว้างของรูปภาพเป็นจำนวนเปอร์เซ็นต์ของภาพอย่างเดียว เช่น WIDTH=50% หรือ WIDTH=150%
การใส่ภาพลงใน WEB การใส่ภาพที่มีขนาดเท่ากันซ้อนกัน โดยภาพแรกจะเกิดชั่วขณะแล้วภาพที่สองจะปรากฏ ใช้แอตทริบิวต์ LOWSRC=“รูปภาพ“ ตัวอย่าง <IMG SRC=“rock.gif” LOWSRC=“rock.gif”
การสร้างจุดเชื่อมโยง (Link) ด้วยภาษา HTML กำหนดให้เชื่อมโยงในเอกสารเดียวกันหรือ หรือต่างเอกสาร หรือ ต่างที่อยู่ ได้ การเชื่อมโยงเอกสารใน HTML แบ่งได้ 2 ประเภท คือ 1. การเชื่อมโยงกับข้อความ (Text Link) 2. การเชื่อมโยงกับรูปภาพ (Graphic Link)
1. การเชื่อมโยงกับข้อความ (Text Link) ใช้ เขียน tag Anchor และ แอตทริบิวต์ HREF (Hypetext REFerence) รูปแบบ <A HREF =“ เป้าหมาย”> ข้อความ </A> หากต้องการให้ข้อความที่เชื่อมโยงไม่มีการขีดเส้นใต้ ให้ใช้ attribute style ร่วมกับ tag Anchor ดังนี้ <A HREF =“เป้าหมาย” style=“text-decoration:none”> ข้อความ </A>
การเชื่อมโยงข้อมูลภายในแฟ้มเอกสารเดียวกัน มีขั้นตอนดังนี้ 1. การสร้างเป้าหมายเพื่อใช้เป็นจุดเชื่อมโยง ด้วยคำสั่งดังนี้ <A NAME=“ชื่อเป้าหมาย”> โดย tag <A> ไม่ต้องมี tag ปิด</A> 2. เชื่อมโยงด้วย tag Anchor โดยใช้เครื่องหมาย # นำหน้าชื่อเป้าหมาย <A HREF =“#เป้าหมาย”> ข้อความ </A>
การเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร 1.ข้อความที่จะเชื่อมโยงอยู่ต่างแฟ้มแต่อยู่ในโฮสต์เดียวกัน <A HREF =“ชื่อแฟ้ม.html“ > ข้อความ </A> <A HREF =<“ชื่อแฟ้ม.html#ชื่อเป้าหมาย“ > ข้อความ </A> 2. อยู่ต่าง URL <A HREF =“URL“ > ข้อความ </A> ตัวอย่าง <A HREF = “http://www.yahoo.com”> Yahoo Site </A>
การกำหนดสีให้กับข้อความที่มีการเชื่อมโยง มีตัวเลือก ที่ใช้งานดังนี้ LINK เป็นสีของตัวอักษรก่อนมีการเชื่อมโยง ALINK เป็นสีของตัวอักษรขณะถูกเลือก VLINK เป็นสีของตัวอักษรหลังจากการเชื่อมโยงข้อมูลเรียบร้อยแล้ว โดยตัวเลือกทั้ง 3 จะต้องกำหนดรูปแบบสีของตัวอักษร รูปแบบ <BODY BGCOLOR=“#rrggbb” LINK=“#rrggbb” VLINK=“#rrggbb” ALINK=“#rrggbb”>
ตัวอย่าง <BODY BGCOLOR=“#000000” TEXT=“#F0F0F0” LINK=“#FFFF00” VLINK=“#22AA22” ALINK=“#0077FF”> </BODY> *** ค่า default คือ LINK=สีน้ำเงิน ALINK=สีแดง VLINK= สีม่วง
2. การใช้ภาพเป็นจุดเชื่อมโยง ให้เพิ่มคำสั่ง <IMG SRC= “รูปภาพ”> เข้าไปใน tag Anchor รูปแบบ <A HREF= “URL” > <IMG SRC = “ขื่อแฟ้มรูปภาพ”> </A>
ตัวอย่าง <HTML> <HEAD><TITLE> Image Links </TITLE></HEAD> <BODY> <CENTER> <H1> Image Links </H1> <A HREF= “http://www.microsoft.com”> <IMG SRC= “IE.GIF” > </A> <BR> <A HREF=“http://www.yahoo.com”> <IMG SRC = “YAHOO.GIF”> </A> </CENTER> </BODY> </HTML>
การใช้ mailto เป็นโปรโตคอลที่ใช้สำหรับการสื่อสารข้อมูลแบบจดหมายอีเล็กทรอนิกส์ รูปแบบ <A HREF=“mailto:username@hostname”> ตัวอย่าง Address your comment or suggestions at <A HREF=“mailto:someone@buu.ac.th”> someone@buu.ac.th </A>
การกำหนดลวดลายให้กับ Background สามารถกำหนดลวดลาย (Pattern) ให้กับ Background ได้โดยใช้รูปภาพได้ แต่รูปภาพนั้นไม่ควรมีลวดลายมากเกินไป กำหนดโดยแอตทริบิวต์ BACKGCROUND = “ชื่อแฟ้มรูปภาพ” ลงในส่วนของ tag BODY รูปแบบ <BODY BACKGROUND = “ชื่อแฟ้มรูปภาพ” >
การสร้างตาราง (Table) ด้วยภาษา HTML Table ประกอบด้วยแถว (row) และคอลัมน์ (col) จุดตัดของเรียกว่า cell ซึ่งใช้บรรจุข้อมูล คำสั่งที่ใช้สร้างตาราง <TABLE>...</TABLE> สำหรับใช้เริ่มต้นการสร้าง และจบการสร้างตาราง โดยจะไม่มี เส้นแบ่ง cell <TABLE BORDER=n>… </TABLE> สำหรับใช้เริ่มต้นการสร้างและจบการสร้างตาราง โดยจะมี เส้นแบ่ง Cell แสดงให้เห็น <TR>...</TR> ใช้กำหนดแถวของตาราง (Table Row)
คำสั่งสร้างตาราง(ต่อ) </TD>...</TD> กำหนดส่วนของข้อมูลลง cell (Table Data) โดยข้อมูลจะอยู่ระหว่าง คำสั่ง <TD>และ</TD> <TH>...</TH> ใช้เหมือน tag <TD>...</TD> แต่ตัวอักษรที่ได้จะเป็นตัวเข้ม มักใช้เป็นหัวตาราง(Table Heading) <CAPTION> ใช้เขียนข้อความอธิบายตาราง โดยเขียนให้อยู่ด้านบนหรือด้านล่างของตารางก็ได้ <CAPTION ALIGN=TOP | BOTTOM> ถ้าไม่กำหนดจะเป็นการกำหนดให้คำอธิบายอยู่ด้านบนของตาราง
tag <TABLE> <TABLE> <TR> <TD>ข้อความ </TD> <TD>ข้อความ </TD> <TD>ข้อความ </TD> </TR> </TR> …….. </TABLE>
การตีกรอบตาราง คำสั่ง <TABLE>...</TABLE> เป็นการสร้างตารางที่ไม่มีเส้น การกำหนดเส้นในตารางใช้ แอตทริบิวต์ BORDER กำหนดลงในคำสั่ง <TABLE> ดังนี้ <TABLE BORDER= ความหนา> ……. </TABLE>
ตัวอย่าง <HTML> <HEAD><TITLE> Table Demo </TITLE></HEAD> <BODY> <H1> ตาราง 2 x 2 พร้อมเส้นกรอบ </H1> <TABLE BORDER=1> <TR> <TD>เสรี</TD> <TD>ธวัชชัย</TD></TR> <TR> <TD>วิชัย</TD> <TD>ถมกนก</TD> </TR> </TABLE> </BODY> </HTML>
การปรับขนาดความกว้างของตาราง เพิ่ม แอตทริบิวต์ WIDTH = x% ลงในคำสั่งเปิด ของ tag <TABLE> โดยที่ x แทนความกว้างของแถวของตารางที่จะแสดงบนจอภาพ <TABLE WIDTH=x%>
การปรับขนาดความสุงของตาราง เพิ่ม แอตทริบิวต์ HEIGHT = x% ลงในคำสั่งเปิด ของ tag <TABLE> โดยที่ x แทนความสูงของแถวของตารางที่จะแสดงบนจอภาพ <TABLE HEIGHT=x%>
การจัดตำแหน่งของข้อมูลใน cell การจัดข้อมูลในเซลทำได้ 2 แบบคือ แนวนอน ได้แก่ LEFT,RIGHT,CENTER แนวตั้ง ได้แก่ TOP, BUTTON, MIDDLE ใน tag <TR>เพิ่ม แอตทริบิวต์ ALIGN= สำหรับแนวนอน VALIGN= สำหรับแนวตั้ง รูปแบบ <TR ALIGN = … VALIGN=…> <TD>…</TD> </TR>
ROWSPAN แอตทริบิวต์ ROWSPAN ใช้กำหนดความสูงเป็นจำนวนเท่าของแถวปกติ ใช้กับ tag <TD> ตัวอย่าง <TABLE BORDER> <TR> <TD>Item1</TD> <TD ROWSPAN=2>Item2</TD> <TD>Item3</TD> </TR> <TR> <TD>Item4</TD> <TD >Item5</TD> </TR> </TABLE>
COLSPAN แอตทริบิวต์ COLSPAN ใช้ปรับขนาดของความกว้างคอลัมน์ในตารางให้มีขนาดเป็นจำนวนเท่าของของขนาดความกว้างปกติ ใน tag <TD> ตัวอย่าง <TABLE BORDER> <TR> <TD>Item1</TD> <TD COLPAN=2>Item2</TD> </TR> <TR> <TD>Item3</TD> <TD>Item4</TD> <TD >Item5</TD> </TR> </TABLE>
CELLPADDING แอตทริบิวต์ CELLPADDING ใช้กำหนดพื้นที่การแสดงข้อมูล ภายในตาราง ปกติจะกำหนดค่า cellpadding เป็น 0 ซึ่งพื้นที่ในการแสดงข้อมูลในตารางเท่ากับจำนวนตัวอักษรที่แสดงเท่านั้น ถ้ากำหนดให้มีค่ามากจะมีพื้นที่เป็นที่ว่างมากขึ้น
CELLSPACING แอตทริบิวต์ CELLSPACING ใช้กำหนดขนาดเส้นตาราง ถ้ากำหนดให้มีค่ามากจะมีขนาดเส้นตารางมากขึ้น
การใส่ภาพลงในตาราง ให้บรรจุคำสั่งอ่านภาพ คือ <IMG SRC = “ชื่อแฟ้มรูปภาพ”> ลงในคำสั่งของตาราง กรณีที่ต้องการปรับขนาดของรูปภาพให้มีขนาดเหมาะสมกับตาราง ให้ใช้คำสั่ง WIDTH=x% และ HEIGHT=y% ลงในคำสั่ง <IMG>
การสร้างเฟรม (Frame) ด้วยภาษา HTML ใช้ Tag <FRAMSET>…</FRAMESET> กำหนดให้ Browser แสดงผลแบบเฟรม กำหนดขนาดของเฟรม ใช้ attributes 2 ตัวคือ ROWS และ COLS ROWS เป็น attribute แบ่งเฟรมตามแนวนอนตามค่า ที่กำหนด ROWS = “lists” COLS เป็น attribute แบ่งเฟรมตามแนวตั้งตามค่า ที่กำหนด COLS = “lists” Lists เป็นชุดค่าตัวเลขที่ใช้กำหนดขนาดให้กับเฟรมตามแนวนอนหรือแนวตั้ง ถ้ามีหลายค่าจะคั่นด้วยเครื่องหมายจุลภาค
การแบ่งจอภาพ เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนมีข้อมูลและการทำงานที่เป็นอิสระจากกัน การสร้างเฟรม มีคำสั่งที่ใช้ร่วมกันอยู่ 3 คำสั่ง ดังนี้ <FRAMESET> …</FRAMESET> กำหนดการแสดงผลแบบเฟรม <FRAME> กำหนดการแสดงเฟรมแต่ละเฟรม <NOFRAME>…</NOFRAME> เป็นแท็กที่จะแสดงก็ต่อเมื่อ โปรแกรม Browser ไม่สนับสนุนการแสดงผลแบบเฟรม
Tag <FRAMESET> สามารถสร้างเฟรมซ้อนภายใน <FRAMESET> ได้ หรืออาจจะมี แท็ก <FRAME> หรือ <NOFRAME> อยู่ภายในได้ ในเอกสาร HTML ที่มีการใช้แท็ก <FRAMESET> แล้วจะไม่มี แท็ก <BODY> ตัวอย่าง <HTML> <HEAD> <TITLE> This is frame Demo </TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML>
การกำหนดขนาดของเฟรม การกำหนดค่าของ lists มีวิธีกำหนด 3 แบบคือ 1. กำหนดค่าด้วย pixel ต้องดูความละเอียดของจอภาพที่ใช้ (640 x 480 หรือ 1024 x 768 ) <FRAMESET ROWS = “200, 140, 100”> <FRAMESET COLS = “200, 200,150 “> 2. กำหนดค่าด้วยหน่วยเปอร์เซ็นต์ <FRAMESET ROWS = “25%, 25%, 50%”> <FRAMESET COLS = “60%,40%”>
การกำหนดขนาดของเฟรม(ต่อ) 3. กำหนดโดยใช้ความสัมพันธ์ของแต่ละเฟรม ใช้เครื่องหมาย * เป็นตัวกำหนด <FRAMESET ROWS = “40%, *”> แบ่งเป็น 2 ส่วนตามแนวนอน ส่วนบนสูง 40% ของเนื้อที่ทั้งหมด และส่วนล่างใข้เนื้อที่ ๆเหลือทั้งหมด <FRAMESET COLS = “60,80, *”> แบ่งจอภาพเป็น 3 ส่วน ส่วนซ้ายกว้าง 60 pixel ส่วนกลางกว้าง 80 pixel และส่วนขวาใช้เนื้อที่ที่เหลือทั้งหมด
Tag <FRAME> เป็นแท็กที่ใส่ระหว่างแท็ก <FRAMESET>…</FRAMESET> ใช้สำหรับใส่ชื่อเอกสารหรือรูปภาพไว้ในส่วนของจอภาพที่แบ่งไว้ด้วยแท็ก<FRAMESET> มีรูปแบบดังนี้ <FRAME SRC = “URL” NAME = “windows_name” MARGINWIDTH=value1 MARGINHEIGHT = value2 SCROLLING=choice NORESIZE FRAMEBORSER=choice2 FRAMESPACING=value2>
Attribute ของ <FRAME> SRC= “url” บอกถึงไฟล์รูปภาพ หรือไฟล์ HTML ที่ต้องการแสดงในเฟรม NAME = “windows_name” ตั้งชื่อให้กับเฟรม เพื่อนำไฟล์รูปภาพหรือไฟล์เอกสารอื่นๆ มาแสดง MARGINWIDTH กำหนดช่องว่างทางซ้ายและขวาระหว่างข้อมูลและเฟรม MARGINHEIGHT กำหนดช่องว่างด้านบนและล่างระหว่างข้อมูลและเฟรม
Attribute ของ <FRAME>(ต่อ) SCROLLING =“YES/NO/AUTO” ใช้กำหนดให้เฟรมมี Scrollbar หรือไม่มี yes มี scrollbar No ไม่มี scrollbar auto browser เป็นตัวกำหนด FRAMEBORDER กำหนดให้ browser สร้างกรอบให้กับเฟรม FRAMEBORDER = 0 ซ่อนเส้นกรอบเฟรม ปกติค่า default ของกรอบเฟรมเป็น 5 FRAMESPACING กำหนดระยะห่างระหว่างเฟรม NORESIZE กำหนดไม่ให้ผู้ใช้เปลี่ยนแปลงขนาดเฟรมในขณะที่ใช้งาน
ตัวอย่างการแบ่งเฟรม <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,40%,30%”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame1” SRC=“web3.html”> </FRAMESET> </HTML>
ตัวอย่างการแบ่งเฟรมให้มีขนาดแน่นอน <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,40%,30%”> <FRAME NAME=“frame1” SRC=“web1.html” NORESIZE> <FRAME NAME=“frame2” SRC=“web2.html” NORESIZE > SRC=“web3.html” NORESIZE > </FRAMESET> </HTML>
การกำหนดแถบเลื่อนในเฟรม โดยปกติเฟรมที่มีพื้นที่ไม่เพียงพอสำหรับแสดงเนื้อหา จะมีแถบเลื่อนเพื่อให้ผู้ใช้เลื่อนดูข้อมูลในส่วนที่เหลือได้ ถ้ไม่ต้องการให้แสดงแถบเลื่อนจะต้องกำหนดแอตทริบิวต์ SCROLLING=“NO” ใน <FRAME>
ตัวอย่างการใช้แถบเลื่อนในเฟรม <HTML> <HEAD> <TITLE> Using frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html” NORESIZE> <FRAME NAME=“frame3” SRC=“web3.html” SCROLLING=“NO” > </FRAMESET> </HTML>
การสร้างเฟรมซ้อน แต่ละคอลัมน์สามารถแบ่งเป็นแถวและแต่ละแถวสามารถแบ่งเป็นคอลัมน์ได้เช่นกัน ตัวอย่าง แบ่งจอภาพเป็น 2 เฟรมตามแนวดิ่งขนาด 40% และ60% โดย เฟรมแรกแบ่งตามแนวนอนเป็น 2 เฟรม โดยเฟรมแรกสูง 30% และส่วนที่เหลือสูง 70% <FRAMESET COLS = “40%, *”> ... <FRAMESET ROWS = “30%, 70%”> </FRAMESET>
ตัวอย่างการสร้างเฟรมซ้อน 1 <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET COLS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAMESET ROWS=“40%,*”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame3” SRC=“web3.html”> </FRAMESET> </FRAMESET> </HTML>
ตัวอย่างการสร้างเฟรมซ้อน 2 <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET ROWS=“30%,*”> <FRAME NAME=“frame1” SRC=“web1.html”> <FRAMESET COLS=“20%,*”> <FRAME NAME=“frame2” SRC=“web2.html”> <FRAME NAME=“frame3” SRC=“web3.html”> </FRAMESET> </FRAMESET> </HTML>
tag <NOFRAME>…</NOFRAME> ใช้กำหนดส่วนของเอกสารที่จะให้แสดงโดย browser ที่ไม่สามารถแสดงเฟรมได้ มีรูปแบบดังนี้ <NOFRAME>…</NOFRAME> ถ้ามีการใช้เฟรมควรใส่ส่วน <NOFRAME> ไว้เสมอเพื่อให้ผู้ใช้ที่ใช้ browser ที่ไม่สามารถแสดงเฟรมได้ ใช้ได้ตามปกติเหมือนไม่มีเฟรม
การสร้างฟอร์ม (Form) ด้วยภาษา HTML HTML Form เป็นลักษณะของระบบการสอบถามข้อมูลแบบหนึ่งที่ใช้ในระบบเครือข่ายอินเทอร์เน็ต รูปแบบ <FORM METHOD=“methodname” ACTION=“URLsname”> ข้อความและฟิลด์ของฟอร์ม …… </FORM>
การสร้างแบบฟอร์ม(ต่อ) ฟอร์ม (Form) ใช้ในการรับข้อมูลจากผู้ใช้ และทำงานร่วมกับโปรแกรมย่อยๆ หรือ Script ที่เรียกว่า Common Gateway Interface(CGI) CGI เป็นโปรแกรมตัวกลางที่ทำหน้าที่เชื่อมโยงข้อมูลระหว่างเครื่องคอมพิวเตอร์ของผู้ใช้กับเครื่อง Server โดย Server รวบรวมข้อมูลที่ผู้ใช้ป้อนมา เพื่อประมวลผล เมื่อเสร็จแล้วส่งผลลัพธ์กลับไปยังผู้ใช้
การสร้างแบบฟอร์ม(ต่อ) ตัวเลือกที่ใช้ร่วมกับแท็ก Form METHOD = ”GET” หรือ ”POST” ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธีใด GET เป็นการนำข้อมูลทั้งหมดในฟอร์มไปต่อท้ายสุดแล้วประมวลผลครั้งเดียว POST จะนำข้อมูลส่งไปที่ server แยกกันไปเป็นแต่ละ transaction ACTION = “URLsname” ใช้ระบุURL ของ CGI script ที่เรียกมาใช้งาน
คำสั่ง INPUT เป็นคำสั่งรับข้อมูลในฟอร์มโดยการสร้างปุ่ม หรือตัวเช็ค หรือ ช่องกรอกข้อความ ตาม attribute ของ TYPE รูปแบบ <INPUT TYPE=ชนิดการรับข้อมูล NAME=“ชื่อตัวแปร“ [ตัวเลือกเพิ่มเติม]> TYPE ใช้บอกชนิดของข้อมูลนำเข้าประกอบด้วย TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET ตัวเลือกเพิ่มเติมมีดังนี้ ALIGN, CHECKED, ROWS, COLS, SIZE, MAXLENGTH, SRC, VALUE
คำสั่ง INPUT กับแบบข้อมูลชนิด TEXT เป็นแบบข้อมูลที่ผู้ใช้ป้อนข้อความลงในช่องรับข้อมูลในแบบฟอร์มเพียงบรรทัดเดียว มีตัวเลือกที่ใช้ร่วมกับคำสั่งคือ SIZE กำหนดขนาดของช่องรับข้อมูล NAME กำหนดชื่อข้อมูล (ตัวแปร) ที่ใช้เก็บข้อมูล VALUE บอกค่าที่กำหนดไว้แล้ว ถ้าไม่ป้อนค่าเข้ามาจะถือว่าเป็น default ตัวอย่าง ชื่อ: <INPUT TYPE=TEXT NAME = “fNAME” SIZE = 40>
คำสั่ง INPUT กับข้อมูลแบบ PASSWORD Password เป็นรูปแบบรับข้อมูลคล้าย Text แต่จะแสดงเป็นเครื่องหมาย “*” ขณะพิมพ์ข้อมูล รูปแบบ <INPUT TYPE=PASSWORD SIZE=8 NAME=“password”> ตัวอย่าง Password : <INPUT TYPE= PASSWORD SIZE = 8 NAME = “mycode”>
ตัวอย่างการใช้ PASSWORD <FORM> Enter text:<INPUT TYPE=TEXT NAME=“NAME” SIZE=25> <BR> Enter password : <INPUT TYPE=PASSWORD NAME=“PASSWORD” SIZE=8 MAXLENGTH=8> </FORM> แสดงผลดังนี้ Enter text: Enter password : Seree ********
คำสั่ง INPUT กับข้อมูลแบบ RADIO RADIO BUTTON มีลักษณะ เป็นปุ่มกลม เป็นรูปแบบการรับข้อมูลที่กำหนดให้ผู้ใช้เลือกตัวเลือกเพียงอย่างเดียว เมื่อเลือกจะเป็นจุดดำ ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย รูปแบบ <INPUT TYPE= Radio NAME =“rName” VALUE= “rValue> ข้อความ
ตัวอย่างการใช้ radio button <FORM> Please choose one of the following :<p> <INPUT TYPE = RADIO NAME = “sex” VALUE=“Male”> Male <BR> VALUE=“Female”> Female <BR> </FORM>
คำสั่ง INPUT กับแบบข้อมูลชนิด CHECKBOX เป็นรูปแบบการเลือกที่ผู้ใช้เลือกตัวเลือกได้มากกว่า 1 รายการ VALUE เป็น attribute ที่กำหนดค่าให้แต่ละตัวเลือกที่ผู้ใช้เลือก ชื่อตัวแปรที่ใช้เก็บค่าจะต้องแตกต่างกัน ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย รูปแบบ <INPUT TYPE= CHECKBOX NAME =“cName” VALUE= “cValue”>
ตัวอย่างการใช้ checkbox <FORM> <INPUT TYPE=CHECKBOX NAME = “FRUIT1” VALUE = “MANGO”> Mango <BR> <INPUT TYPE=CHECKBOX NAME = “FRUIT2” VALUE = “ORANGE”> Orange <BR> <INPUT TYPE=CHECKBOX NAME = “FRUIT3” VALUE = “BANANA”> Banana <BR> <INPUT TYPE=CHECKBOX NAME = “FRUIT4” VALUE = “DURAIN”> Durian <BR> </FORM>
การสร้างปุ่มส่งข้อมูลในแบบฟอร์ม Submit เป็นปุ่มใช้สำหรับส่งข้อมูลที่กรอกหรือเลือกในแบบฟอร์มไปยัง Server รูปแบบ <INPUT TYPE = “SUBMIT” Name = “message”> เมื่อ message คือข้อความที่ปรากฏบนปุ่มเลือก
การสร้างปุ่มยกเลิกข้อมูลในแบบฟอร์ม Reset เป็นปุ่มที่ใช้กดสำหรับยกเลิกข้อมูลที่ป้อนเข้าไปทั้งหมดในแบบฟอร์ม เพื่อให้กับไปใช้ค่าเริ่มต้นใหม่ รูปแบบ <INPUT TYPE = “RESET” Name = “message” > เมื่อ message คือข้อความที่ปรากฏบนปุ่ม RESET
การใช้ปุ่ม submit และ reset <FORM> <INPUT TYPE = SUBMIT VALUE =“Sent Form”> <INPUT TYPE = RESET VALUE =“Cancel Form”> </FORM> แสดงผลดังนี้ Send Form Cancel Form
TEXTAREA เป็นการรับข้อความหลายบรรทัด (Multiline text input)บนแบบฟอร์มในบริเวณที่กำหนดไว้ รูปแบบ <TEXTAREA NAME = “ชื่อตัวแปร“ ROWS = จำนวนบรรทัด COLS = จำนวนคอลัมน์> ข้อความ </TEXTAREA> ตัวแปรแทนชื่อพื้นที่ที่เรากำหนด
ตัวอย่าง <FORM> Please enter any comments here <p> <TEXTAREA NAME = “comments” ROWS=8 COLS=60> This is comments </TEXTAREA> </FORM>
การสร้าง SELECT BOX SELECT แสดงตัวเลือกทั้งหมดให้ผู้ใช้เลือกโดยอาจแสดงในรูปของ Drop-down list หรือแสดงตัวเลือกตามปกติ รูปแบบ <SELECT NAME = “ชื่อตัวแปร“> <OPTION [VALUE = “ข้อมูล“ ] >ข้อความ ………….. </SELECT>
ตัวอย่าง <FORM> <SELECT NAME = “sport” > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”> Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>Volleyball </SELECT> </FORM>
การใช้ MULTIPLE ใน SELECTION BOX <FORM> <SELECT NAME = “sport” MULTIPLE > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”>Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>Volleyball </SELECT> </FORM>
การใช้ SIZE กำหนดจำนวนตัวเลือก SIZE ใช้แสดงจำนวนตัวเลือกที่ต้องการให้เห็นใน drop-down lists <FORM> <SELECT NAME = “sport” SIZE = 3 > <OPTION VALUE = “tennis”> Tennis <OPTION VALUE = “basketball”>Basketball <OPTION VALUE = “football”>Football <OPTION VALUE = “volleyball”>Volleyball </SELECT> </FORM>
การส่งข้อมูลในแบบฟอร์มด้วย Mailto เราสามารถส่งข้อมูลจากแบบฟอร์มที่เราสร้างขึ้น โดยใช้ไปรษณีย์อีเลก ทรอนิกส์ได้ โดยใช้คำสั่ง mailto ใน ACTIONของแบบฟอร์ม เมื่อผู้ใช้กดปุ่ม SUBMIT ข้อมูลที่กรอกในแบบฟอร์มจะถูกส่งเป็น ไปรษณีย์อีเลกทรอนิกส์ไปยังผู้รับตามที่อยู่ที่กำหนดทันที รูปแบบ <FORM METHOD=“POST” ACTION=“mailto:user@hostname”> : </FORM>
ตัวอย่างโปรแกรม
Hypertext Preprocessor PHP Hypertext Preprocessor
PHP คือ PHP เป็นภาษาสคริปต์แบบเซิร์ฟเวอร์ไซด์ (Server-side scripting language) หมายถึง การประมวลผลจะเกิดขึ้นบนเครื่องแม่ข่าย (Server) แล้วสร้างผลลัพธ์เป็นภาษา HTML ส่งให้กับเครื่องลูกข่าย (Client) เพื่อแสดงผล ซึ่งลดภาระการส่งถ่ายข้อมูลจำนวนมากเพื่อมาประมวลผลบนเครื่องลูกข่าย
PHP คือ(ต่อ) การเขียนสามารถทำได้โดยการเขียนโค้ด PHP แทรกลงในโค้ด HTML ด้วยการเปิดแท็ก <?php และปิดด้วยแท็ก ?> (ในกรณีที่ไม่มีการใช้ร่วมกับสคริปต์ XML สามารถเปิดด้วย <? ได้) การบันทึกจะต้องกำหนดเป็นนามสกุล .php หรือ .phtml
ใช้ PHP ต้องมีอะไรบ้าง เครื่องแม่ข่าย (หากไม่มีจะต้องจำลองเครื่องแม่ข่าย :: เช่น โปรแกรมเว็บเซิร์ฟเวอร์ Apache หรือชุดสำเร็จ อย่างเช่น Appserv ประกอบไปด้วย Apache, PHP, MySQL และ PHPMyAdmin เป็นต้น) เครื่องลูกข่าย ต้องมีเว็บบราวเซอร์ (Web Browser) เช่น IE หรือ FireFox เป็นต้น
การทำงานของ PHP ทำงานบน Server ทำงานร่วมกับเอกสาร HTML สามารถแทรกคำสั่ง PHP ได้ตามที่ต้องการลงในเอกสาร HTML ทำงานในส่วนที่เป็นคำสั่งของ PHP ก่อน เมื่อมีการเรียกใช้เอกสารนั้น ๆ แสดงผลออกทาง Web Browsers
โครงสร้างภาษา PHP แบบที่ 1 XML style <?php คำสั่งภาษา PHP ?> ตัวอย่าง <?php echo “Hello World ! <br>”; echo “I am PHP”; ?>
โครงสร้างภาษา PHP(ต่อ) แบบที่ 2 SGML style <? คำสั่งภาษา PHP ?> ตัวอย่าง <? echo “Hello World ! <br>”; echo “I am PHP”; ?>
โครงสร้างภาษา PHP(ต่อ) แบบที่ 3 Java Language style <script language=“php”> คำสั่งภาษา PHP </script> ตัวอย่าง echo “Hello World”;
โครงสร้างภาษา PHP(ต่อ) แบบที่ 4 ASP Style <% คำสั่งภาษา PHP %> ตัวอย่าง <% echo “Hello World ! <br>”; echo “I am PHP”; %>
โครงสร้างภาษา PHP(ต่อ) แบบที่เป็นที่นิยม คือ แบบที่ 1 ผลที่ได้เมื่อผ่านการทำงานแล้วจะได้ผลดังนี้ Hello World ! I am PHP ข้อสังเกต - รูปแบบคล้ายกับภาษา C และ Perl - ใช้เครื่องหมาย ( ; ) คั่นระหว่างคำสั่งแต่ละคำสั่ง File ที่ได้ต้อง save เป็นนามสกุล php
Language Reference Comments - เหมือนกับการ Comment ของภาษา C, C++ และ Unix ตัวอย่าง <?php echo “Hello !”; // การ comment แบบ 1 บรรทัด /* แบบหลายบรรทัดตั้งแต่ 2 บรรทัดขึ้นไป */ echo “World”; # การ comment แบบ shell-style ?>
คำสั่ง echo เป็นคำสั่งสำหรับแสดงผลลัพธ์ไปที่โปรแกรม browser รูปแบบ ข้อความ เขียนภายใต้เครื่องหมาย double quote (“ “) หรือ single quote (‘ ‘) ตัวแปรของภาษา PHP จะขึ้นต้นด้วยเครื่องหมาย $ เสมอ
ตัวอย่างที่ 1 intro.php <HTML> <HEAD> <TITLE>Example –1</TITLE> </HEAD> <BODY> <?php phpinfo() ; ?> </HTML>
ตัวแปร ชนิดข้อมูล และค่าคงที่ ตัวแปรในภาษา PHP จะเหมือนกับในภาษา Perl คือเริ่มต้นด้วยเครื่องหมาย dollar ($) โดยเราไม่จำเป็นต้องกำหนดแบบของข้อมูล (data type) อย่างเจาะจงเหมือนในภาษาซี เพราะว่า ตัวแปลภาษาจะจำแนกเองโดยอัตโนมัติว่า ตัวแปรดังกล่าว ใช้ข้อมูลแบบใด ในช่วงเวลานั้นๆ เช่น ข้อความ จำนวนเต็ม จำนวนที่มีเลขจุดทศนิยมตรรก เป็นต้น ตัวอย่างการใช้งาน เช่น <?php $text = “Hello World”; $number = 123; ?>
ตัวแปร ชนิดข้อมูล และค่าคงที่(ต่อ) เมื่อต้องการแสดงค่าของตัวแปร สามารถใช้คำสั่ง echo ได้ ตัวอย่างเช่น <?php $text = “Hello World”; $number = 123; echo $text.“<br>”; echo $number .“<br>”; echo “ค่าตัวอักษรในตัวแปร \$text คือ $text <br>”; echo “ค่าตัวเลขในตัวแปร \$number คือ $number” ?> หมายเหตุ ในภาษา PHP ไม่ต้องประกาศตัวแปรก่อนใช้งาน สามารถกำหนดค่าให้กับตัวแปรได้เลยเมื่อต้องการใช้งาน
การตั้งชื่อตัวแปร ชื่อตัวแปรจะต้องประกอบด้วยตัวอักษร ตัวเลข หรือเครื่องหมายขีดล่าง (Underscore) เท่านั้น ห้ามตั้งชื่อตัวแปรด้วยตัวเลขเป็นตัวขึ้นต้น เช่น $name , $parinya_mr เป็นต้น ภาษา PHP ถือว่าตัวอักษรพิมพ์เล็กและพิมพ์ใหญ่แตกต่างกัน (Case Sensitive) เช่น $text หรือ $Text หรือ $TEXT เป็นคนละตัวแปรกัน
ชนิดของข้อมูล (Data Type) ขั้นพื้นฐานในภาษา ประกอบด้วย 1. ตรรกศาสตร์ (Boolean) 2. เลขจำนวนเต็ม (Integer) 3. เลขจำนวนทศนิยม (Float หรือ Double) 4. ข้อความ (String)
รหัสควบคุมพิเศษต่างๆ
ตัวดำเนินการ (Operator) ในภาษา PHP มี Operator ต่างๆ ให้ใช้ ไม่ว่าจะเป็นโอเปอเรเตอร์ทางคณิตศาสตร์ โอเปอเรเตอร์เชิงตรรกะ เช่นเดียวดับภาษาอื่นดังนี้
ตัวดำเนินการ (Operator) ต่อ
การใช้เงื่อนไข(condition) เพื่อการตัดสินใจ การใช้ IF...ELSE Condition เป็นการกำหนดเงื่อนไขที่ธรรมดาที่สุด คือกำหนดเงื่อนไข แล้วโปรแกรมตรวจสอบเงื่อนไขนั้น ถ้าเงื่อนไขนั้นเป็นจริงก็จะทำตามคำสั่งที่กำหนด ถ้าเป็นเท็จก็จะไม่ทำ ผลที่ได้ : Summation = 10
การใช้เงื่อนไข(condition) เพื่อการตัดสินใจ(ต่อ) การใช้ Switch…Case ในบางครั้งในการกำหนดทางเลือกของโปรแกรมโดยการใช้ If…Else อาจจะทำให้เขียนโปรแกรมยาวและทำความเข้าใจยาก ดังนั้นเราอาจใช้ Switch แทนซึ่งเขียนโปรแกรมง่ายกว่าและมีความกระชับมากกว่า ผลที่ได้ : i equals 2
การวนลูป (Loop) การใช้ While Loop คำสั่ง while จะทำงานโดยการตรวจสอบเงื่อนไขก่อน ถ้าเงื่อนไขเป็นจริงก็จะทำตามคำสั่ง ผลที่ได้ : 12345
การวนลูป (Loop) ต่อ Do while เป็นคำสั่งที่คล้ายกับ While Loop แต่ต่างกันที่ Do while นั้นจะทำงานโดยการตรวจสอบเงื่อนไขภายหลังจากการทำงานไปแล้วแต่ While นั้นจะตรวจสอบเงื่อนไขก่อนการทำงาน ผลที่ได้ : 5 กรณีที่ใช้ While...Loop จะทำการตรวจสอบเงื่อนไขก่อน แล้วจึงค่อยทำในลูป กรณีที่ใช้ Do...Loop จะทำคำสั่งในลูปก่อน แล้วจึงค่อยตรวจสอบเงื่อนไข
การวนลูป (Loop) ต่อ For Loop คำสั่งนี้จะทำหน้าที่สั่งให้โปรแกรมทำงานวนรอบตามต้องการ ซึ่งกำหนดเป็นเงื่อนไข โดยจะทำเมื่อเงื่อนไขเป็นจริง และจะมีลักษณะการวนรอบที่รู้จำนวนรอบที่แน่นอน ผลที่ได้ : 12345
การวนลูป (Loop) ต่อ Foreach เป็นการทำงานในลักษณะวนรอบที่ทำงานกับตัวแปรอาร์เรย์ โดยสามารถเข้าถึงข้อมูลทั่วไป โดย $Value เป็นตัวกำหนดค่าให้กับ array expression โดยพอยน์เตอร์จะเลื่อนไปตามสมาชิดถัดไปของอาร์เรย์ตามการเปลี่ยนแปลงรอบที่เปลี่ยนไป
การใช้ break และ continue ภายในลูป คำสั่ง break เป็นคำสั่งจะใช้เพื่อให้หยุดการทำงาน จากการใช้คำสั่งเพื่อวนรอบที่ผ่านมาจะเห็นว่าจะออกจากการวนรอบเมื่อสิ้นสุดการทำงานแล้วเท่านั้น แต่ถ้าต้องการให้หยุดทำงานกะทันหัน สามารถใช้คำสั่ง break ก็ได้ คำสั่ง continue เป็นคำสั่งที่ทำงานตรงข้ามกับคำสั่ง break คือ จะสั่งให้โปรแกรมทำงานต่อไป ถ้าใช้คำสั่ง Continue กับ For เมื่อพบคำสั่งนี้จะเป็นการสั่งให้กลับไปเพิ่มค่าให้กับตัวแปรทันที หรือถ้าใช้กับคำสั่ง While เมื่อพบคำสั่งนี้จะเป็นการสั่งให้กลับไปทดสอบเงื่อนไขใหม่ทันที
การใช้คำสั่ง include และ require คำสั่งทั้งสองเอาไว้แทรกเนื้อหาจากไฟล์อื่นที่ต้องการ ข้อแตกต่างระหว่าง include และ require อยู่ตรงที่ว่า ในกรณีของการแทรกไฟล์ใช้ชื่อต่างๆ กันมากกว่าหนึ่งครั้งโดยใช้ลูป คำสั่ง require จะอ่านเพียงแค่ครั้งเดียว คือไฟล์แรก และจะแทรกไฟล์นี้เท่านั้นไปตามจำนวนครั้งที่วนลูป ในขณะที่ include สามารถอ่านได้ไฟล์ต่างๆ กันตามจำนวนครั้งที่ต้องการ
ตัวอย่างโปรแกรม
MySQL
ชนิดของข้อมูลใน MySQL ชนิดของข้อมูลพื้นฐาน มี 3 ชนิด คือ ตัวเลข, วันที่เวลา และตัวอักษร แต่ละชนิดจะมีขนาดไม่เท่ากัน ดังนั้น เมื่อกำหนดคอลัมน์หรือฟิลด์ข้อมูลในตารางบนฐานข้อมูล จะต้องคำนึงถึงชนิดของข้อมูลด้วย เพื่อความเหมาะสมของข้อมูล โดยข้อมูลแต่ละชนิดมีรายละเอียดดังนี้ 1. ชนิดตัวเลข แบ่งได้เป็น เลขจำนวนเต็มและเลขจำนวนจริง ตารางแสดงชนิดของตัวเลขจำนวนเต็ม
ชนิดของข้อมูลใน MySQL(ต่อ) ตารางแสดงชนิดของเลขจำนวนจริง 2. ชนิดวันที่และวันเวลา ตารางแสดงชนิดวันที่และเวลา
ชนิดของข้อมูลใน MySQL(ต่อ) 3. ชนิดตัวอักษร ตารางแสดงชนิดของสตริง
ฟังก์ชันในการจัดการฐานข้อมูลใน MySQL function : mysql_connect ( server, username, password, new_link ); return type : resource content : ใช้ในการเชื่อมต่อกับฐานข้อมูล ในลักษณะชั่วคราว คือจะยุติการเชื่อมต่อเมื่อสิ้นสุด script หรือพบคำสั่ง mysql_close() ข้อดีคือใช้ทรัพยากรน้อย ข้อเสียคือต้องเชื่อมต่อบ่อยซึ่งทำให้เสียเวลา ( จะคืนค่า false กลับมาถ้าเชื่อมต่อไม่สำเร็จ ) example : $conn = mysql_connect ( "localhost", "root", "1234" );
ฟังก์ชันในการจัดการฐานข้อมูลใน MySQL(ต่อ ) function : mysql_select_db ( db_name, resource ); return type : boolean, void content : ใช้เลือก ฐานข้อมูล ที่จะใช้งาน โดยจะคืนค่า false ถ้าหากเกิดความผิดพลาด example : $conn = mysql_connect ( "localhost", "root", "1234" ); if ( ! mysql_select_db ( "dblabcode", $conn ) ) { echo "not have database dblabcode"; }
ฟังก์ชันในการจัดการฐานข้อมูลใน MySQL(ต่อ ) function : mysql_query ( sql, resource ); return type : result, void content : ใช้ประมวลผลคำสั่ง sql ไปยังฐานข้อมูลที่ได้เลือกไว้ example : $conn = mysql_connect ( "localhost", "root", "1234" ); mysql_select_db ( "dblabcode", $conn ); $sql = "SELECT * FROM employee"; $result = mysql_query ( $sql, $conn ); comment : คำสั่ง SQL ได้แก่ CREATE, INSERT, UPDATE, DELETE, DROP คำสั่งเหล่านี้จะคืนค่า void SELECT, SHOW, DESCRIBE, EXPLAIN คำสั่งเหล่านี้จะคืนค่า result
ฟังก์ชันในการจัดการฐานข้อมูลใน MySQL(ต่อ ) function : mysql_num_rows ( result ); return type : int content : ใช้นับจำนวนแถวทั้งหมดของ result example : $conn = mysql_connect ( "localhost", "root", "1234" ); $sql = "SELECT * FROM employee"; $result = mysql_db_query ( "dblabcode", $sql, $conn ); echo "Total Record : " . mysql_num_rows ( $result );
ฟังก์ชันในการจัดการฐานข้อมูลใน MySQL(ต่อ ) function : mysql_fetch_array ( result, type ); return type : array content : ใช้คืนค่า ค่าข้อมูล ของ result ในแถวที่ชี้อยู่ และเก็บไว้ที่ array และเลื่อนไปตัวชี้ชี้ไปยังตำแหน่งถัดไป โดย array ที่ได้มี key คือคอลัมน์ที่หรือชื่อฟิลด์ โดยจะคืนค่า false ถ้าเกิดความผิดพลาดขึ้น example : $conn = mysql_connect ( "localhost", "root", "1234" ); $sql = "SELECT * FROM employee INNER JOIN position ON employee.position_id = position.id"; $result = mysql_db_query ( "dblabcode", $sql, $conn ); while ( $record = mysql_fetch_array ( $result ) ) { echo $record["name"] . " " . $record[1]; }
ฟังก์ชันในการจัดการฐานข้อมูลใน MySQL(ต่อ ) function : mysql_result ( result, row, column ); return type : string content : ใช้คืนค่า ค่าข้อมูล ในแถวและคอลัมน์ที่กำหนด ของ result โดยจะคืนค่า false ถ้าเกิดความผิดพลาดขึ้น example : $conn = mysql_connect ( "localhost", "root", "1234" ); $sql = "SELECT * FROM employee INNER JOIN position ON employee.position_id = position.id"; $result = mysql_db_query ( "dblabcode", $sql, $conn ); echo mysql_result ( $result, 0, 0 );
ตัวอย่างโปรแกรม
แบบฝึกหัด โจทย์ : ให้ทำการออกแบบฐานข้อมูล, สร้างฐานข้อมูล และสร้างระบบขายสินค้าออนไลน์อย่างงายโดยมีรายละเอียดดังนี้ 1. ผู้ใช้ ซื้อสินค้าออนไลน์ (เก็บข้อมูลการสั่งซื้อและข้อมูลลูกค้าเบื้องต้น) 2. ผู้ดูแลระบบ เพิ่มสินค้า แก้ไขข้อมูลสินค้า ลบสินค้า
THE END