การสร้างเอกสารเว็บเพจ ด้วยภาษา HTML เอกสารประกอบคำบรรยายวิชา 887371 Web Programming คณะวิทยาการสารสนเทศ มหาวิทยาลัยบูรพา
การสร้างเอกสารเว็บเพจ การสร้างเอกสารเว็บเพจด้วยภาษา HTML รูปแบบคำสั่งภาษา HTML
ส่วนประกอบของ webpage ส่วน Header ประกอบด้วย ชื่อหน่วยงาน ตราหรือสัญลักษณ์ของหน่วยงาน หน้าที่หรือวัตถุประสงค์ของหน่วยงาน ส่วน Body ประกอบด้วย เส้นแบ่งข้อความ รายการของหัวข้อหรือเนื้อหา ภาพประกอบ ปุ่มหรือ icon
ส่วนประกอบของ Homepage 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 มี 2 ชนิด tag คู่(Paired tag) tag เดี่ยว (Single tag)
Tag คู่ (Paired Tag) tag คู่(Paired tag) ใส่ tag เปิดไว้หน้าข้อความ และใส่ tag ปิด(ลักษณะเหมือน tag เปิดแต่มีเครื่องหมาย / นำหน้า) ไว้หลังข้อความ <Tag name> ข้อความ</Tag name> เช่น <HTML> ………</HTML> <HEAD> ………</HEAD> <BODY> ……….</BODY>
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>
คำสั่งขึ้นย่อหน้าใหม่ (2) ใช้ 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
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>
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 คือขนาดใหญ่ที่สุด
การกำหนดขนาดของตัวอักษร (2) การกำหนดขนาดตัวอักษรแบบมาตรฐานทั้งเอกสาร ซึ่งสามารถเพิ่มหรือลดขนาดได้ภายหลังโดยใช้ <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
การกำหนดสีให้กับตัวอักษรเฉพาะข้อความ กำหนดใน 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>
การกำหนดสีให้กับตัวอักษรทั้งเอกสาร กำหนดใน 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 วิธี ดังนี้ ระบุชื่อสัญลักษณ์ที่ต้องการ (Name Entities) ระบุโดยใช้ 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) รูปแบบ <LIST TYPE> <ITEM> First Item in List <ITEM> Second Item in List <ITEM> Third Item in List </LIST TYPE>
การแสดงผลรายการแบบลำดับตัวเลข(orderer Lists) ใช้แสดงรายการที่เรียงลำดับ หรือจัดลำดับความสำคัญของหัวข้อ ใช้ตัวเลข หรือ ตัวอักษรเรียง ในการเรียงก็ได้ มีรูปแบบดังนี้ <OL TYPE = number_type START = number..> <LI> Item number one <LI> Item number two <LI> Item number tree </OL>
การแสดงผลรายการแบบลำดับตัวเลข(orderer Lists) TYPE เป็นการกำหนดว่าจะแสดงรายการโดยใช้ตัวเลข ตัวอักษร หรือตัวอักษรโรมันเป็นต้น
ตัวอย่าง <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
การจัดการกับรูปภาพ รูปภาพที่สามารถนำมาใช้ในเอกสาร HTML มี 2 ชนิด คือ 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%
การแสดงกรอบรูปภาพและระยะห่าง การแสดงกรอบรูปภาพใช้แอตทริบิวต์ BORDER = n โดยปกติ n=0 ค่า n ยิ่งมาก กรอบยิ่งหนา การเว้นระยะห่างของภาพกับข้อความใช้แอตทริบิวต์ VSPACE =n สำหรับระยะยะห่างด้านบน ล่าง HSPACE =n สำหรับระยะยะห่างด้านซ้าย ขวา ตัวอย่าง <IMG VSPACE=10 HSPACE=30 SRC=“building.gif”>
การใส่ภาพลงใน WEB การใส่ภาพที่มีขนาดเท่ากันซ้อนกัน โดยภาพแรกจะเกิดชั่วขณะแล้วภาพที่สองจะปรากฏ ใช้แอตทริบิวต์ LOWSRC=“รูปภาพ“ ตัวอย่าง <IMG SRC=“rock.gif” LOWSRC=“rock.gif”
การสร้างภาพเคลื่อนไหว โปรแกรม GIF Construction Set หรือ GIFCON ของบริบัท Alchemy Mindworks Inc. เป็นโปรแกรมที่ใช้สร้างภาพเคลื่อนไหวใน Web ใช้เปลี่ยนภาพแบบ GIF เป็นภาพเคลื่อนไหว ถ้าใช้ MS Internet Explorer ตั้งแต่เวอร์ชั่น 2 สามารถใช้ภาพที่มีส่วนขยายเป็น .AVI ได้เลย หรือจะใช้โปรแกรม GIFCON แปลงภาพก่อนก็ได้
การสร้างจุดเชื่อมโยง (Link) ด้วยภาษา HTML
การเชื่อมโยงเอกสาร(Link) กำหนดให้เชื่อมโยงในเอกสารเดียวกันหรือ หรือต่างเอกสาร หรือ ต่างที่อยู่ ได้ การเชื่อมโยงเอกสารใน HTML แบ่งได้ 2 ประเภท คือ การเชื่อมโยงกับข้อความ (Text Link) การเชื่อมโยงกับรูปภาพ (Graphic Link)
การเชื่อมโยงกับข้อความ(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>
การเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร ใช้หลักของ path ดังนี้ ข้อมูลที่อยู่ใน directory ก่อนหน้า 1 ชั้น เขียนได้เป็น ../index.html ข้อมูลที่อยู่ใน directory ก่อนหน้า 2 ชั้นเขียนได้เป็น ../../index.html ข้อมูลที่อยู่ใน directory อื่นก่อนหน้านั้น 1 ชั้น เขียนได้เป็น ../ชื่อdirectory/index.html ข้อมูลที่อยู่ใน directory ถัดไป 1 ชั้น เขียนได้เป็น /directory1/index.html
การกำหนดสีให้กับข้อความที่มีการเชื่อมโยง มีตัวเลือก ที่ใช้งานดังนี้ LINK เป็นสีของตัวอักษรก่อนมีการเชื่อมโยง ALINK เป็นสีของตัวอักษรขณะถูกเลือก VLINK เป็นสีของตัวอักษรหลังจากการเชื่อมโยงข้อมูลเรียบร้อยแล้ว โดยตัวเลือกทั้ง 3 จะต้องกำหนดรูปแบบสีของตัวอักษร รูปแบบ <BODY BGCOLOR=“#rrggbb” LINK=“#rrggbb” VLINK=“#rrggbb” ALINK=“#rrggbb”> ค่า default คือ LINK=สีน้ำเงิน ALINK=สีแดง VLINK= สีม่วง
ตัวอย่าง <BODY BGCOLOR=“#000000” TEXT=“#F0F0F0” LINK=“#FFFF00” VLINK=“#22AA22” ALINK=“#0077FF”> </BODY>
การใช้ภาพเป็นจุดเชื่อมโยง ให้เพิ่มคำสั่ง <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> <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
กำหนดขนาดของเฟรม ใช้ attributes 2 ตัวคือ ROWS และ COLS คำสั่งกำหนดเฟรม ใช้ Tag <FRAMSET>…</FRAMESET> กำหนดให้ Browser แสดงผลแบบเฟรม กำหนดขนาดของเฟรม ใช้ attributes 2 ตัวคือ ROWS และ COLS ROWS เป็น attribute แบ่งเฟรมตามแนวนอนตามค่า ที่กำหนด ROWS = “lists” COLS เป็น attribute แบ่งเฟรมตามแนวตั้งตามค่า ที่กำหนด COLS = “lists”
คำสั่งกำหนดเฟรม Lists เป็นชุดค่าตัวเลขที่ใช้กำหนดขนาดให้กับเฟรมตามแนวนอนหรือแนวตั้ง ถ้ามีหลายค่าจะคั่นด้วยเครื่องหมายจุลภาค
การแบ่งจอภาพ เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนมีข้อมูลและการทำงานที่เป็นอิสระจากกัน การสร้างเฟรม มีคำสั่งที่ใช้ร่วมกันอยู่ 3 คำสั่ง ดังนี้ <FRAMESET> …</FRAMESET> กำหนดการแสดงผลแบบเฟรม <FRAME> กำหนดการแสดงเฟรมแต่ละเฟรม <NOFRAME>…</NOFRAME> เป็นแท็กที่จะแสดงก็ต่อเมื่อ โปรแกรม Browser ไม่สนับสนุนการแสดงผลแบบเฟรม
สามารถสร้างเฟรมซ้อนภายใน <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) 2. กำหนดค่าด้วยหน่วยเปอร์เซ็นต์ <FRAMESET ROWS = “25%, 25%, 50%”> <FRAMESET COLS = “60%,40%”>
การกำหนดขนาดของเฟรม(3) 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>(2) 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 ที่ไม่สามารถแสดงเฟรมได้ ใช้ได้ตามปกติเหมือนไม่มีเฟรม
การเชื่อมโยงให้สัมพันธ์กันในเฟรม Targeting Frame เป็นการส่งเอกสารไปแสดงในเฟรมอื่น โดยเฟรมเป้าหมายต้องมีการตั้งชื่อสำหรับอ้างอิง ระบุเฟรมเป้าหมายในแท็ก anchor <A HREF = “page1.html” TARGET = “ชื่อเฟรมเป้าหมาย”> กำหนดbase (default) target ให้กับทุก Link ที่ไม่ได้ระบุชื่อ target ด้วยคำสั่ง <BASE TARGET = “ชื่อเฟรมเป้าหมาย”>
การเชื่อมโยงให้สัมพันธ์กันในเฟรม(2) ถ้าไม่มีชื่อเฟรมในวินโดว์ที่เปิดอยู่ browser จะเปิดวินโดว์ใหม่ให้โดยถือว่าเป็นวินโดว์ลูก ชื่อเฉพาะแสดงความสัมพันธ์ระหว่างเอกสารระหว่างเอกสารปัจจุบันกับเอกสารอื่น _blank โหลด link นี้ไปที่หน้าจอที่บราวเซอร์เปิดเป็นหน้าต่างใหม่ _self โหลด link นี้ทับเฟรมที่กำลังถูกใช้งานอยู่ _parent โหลด link นี้ทับพื้นที่ของทุกเฟรมที่ถูกกำหนดภายใต้แท็ก<FRAMESET> เดียวกันกับเฟรม ที่กำลังถูกใช้งานอยู่ _top ใหลด link นี้ไปยังพื้นที่ทั้งหมดของหน้าจอบราวเซอร์ปัจจุบัน
การเชื่อมโยงให้สัมพันธ์กันในเฟรม(3) ตัวอย่าง <A HREF = “mypage.html” TARGET= “_parent”> 4/4/2017 CS BUU
ตัวอย่าง <HTML> <HEAD> <TITLE> Using nested frame demo</TITLE> </HEAD> <FRAMESET COLS=“30%,*”> <FRAME NAME=“frame1” SRC=“toc.html”> <FRAME NAME=“main” SRC=“first.html”> </FRAMESET> </HTML>
ตัวอย่าง แฟ้ม toc.html <HTML> <HEAD> <TITLE> Table of Content</TITLE> </HEAD> <BODY> <B>เวบไซต์ที่สนใจ</B>Click mouse เพื่อไปยังเวบไซต์ที่ต้องการ<BR> <A HREF=“http://www.yahoo.com” TARGET=“main”>Yahoo Search</A><BR> <A HREF=“http://www.sci.buu.ac.th” TARGET=“main”>Science BUU</A><BR> <A HREF=“http://www.compsci.buu.ac.th” TARGET=“main”>Computer Science</A> <BR> </BODY> </HTML>
ตัวอย่าง แฟ้ม first.html <HEAD> <TITLE> first file Content</TITLE> </HEAD> <BODY> <H1>หน้าจอแรกนะจ๊ะ</H1> <H2>ภาควิชาวิทยาการคอมพิวเตอร์</H2> <H2>คณะวิทยาศาสตร์</H2> <H3>มหาวิทยาลัยบูรพา</H3> </BODY> </HTML>
HELPING SEARCH ENGINES FIND YOUR WEBSITE สามารกำหนดแท็ก <META> เพื่อใช้จัดทำ index เอาไว้สำหรับให้ Search Engine ต่างๆเช่น Infoseek, AltaVista ค้นหาข้อมูลจาก index ได้ แท็กที่ใช้สร้างคือ Meta Tag มีรูปแบบดังนี้ <META NAME=“description” CONTENT=“ คำบรรยายทีแสดงว่าโฮมเพจเราเป็นอย่างไร?”> <META NAME=“Key word” CONTENT=“key1, key2, key3,…”> ต้องเขียนแท็ก <META>ไว้ภายในแท็ก <HEAD>…</HEAD> เสมอ
DESCRIPTION เป็นส่วนที่ใช้สรุปย่อถึงการอธิบายเว็บเพจ KEYWORD เป็นรายการของคีย์เวิร์ดที่เราคาดว่าผู้ที่เข้ามาเยี่ยมชมจะค้นหาเว็บไซต์ ตัวอย่าง <META NAME=“description” CONTENT=“ How to promote website.”> <META NAME=“Key word” CONTENT=“announcing website, web submittion, Burapha University, Eastern Seaboard”>
ใน Infoseek จะใช้ชื่อ title ของเว็บเพจเป็นการค้นหาอันดับแรก ใน yahoo จะใช้ title ของเว็บเพจพร้อมทั้ง description ในการค้นหา ใน Excite จะค้นหาจากแท็ก Comment และเนื้อาของเว็บเพจ สรุป ต้องจัดทำคีย์เวิร์ดไว้ในแท็ก TITLE, META และ COMMENT
การสร้างฟอร์ม (Form) ด้วยภาษา HTML
การสร้างแบบฟอร์ม (Form) HTML Form เป็นลักษณะของระบบการสอบถามข้อมูลแบบหนึ่งที่ใช้ในระบบเครือข่ายอินเทอร์เน็ต รูปแบบ <FORM METHOD=“methodname” ACTION=“URLsname”> ข้อความและฟิลด์ของฟอร์ม …… </FORM>
การสร้างแบบฟอร์ม(2) ฟอร์ม (Form) ใช้ในการรับข้อมูลจากผู้ใช้ และทำงานร่วมกับโปรแกรมย่อยๆ หรือ Script ที่เรียกว่า Common Gateway Interface(CGI) CGI เป็นโปรแกรมตัวกลางที่ทำหน้าที่เชื่อมโยงข้อมูลระหว่างเครื่องคอมพิวเตอร์ของผู้ใช้กับเครื่อง Server โดย Server รวบรวมข้อมูลที่ผู้ใช้ป้อนมา เพื่อประมวลผล เมื่อเสร็จแล้วส่งผลลัพธ์กลับไปยังผู้ใช้
ตัวเลือกที่ใช้ในร่วมกับแท็ก Form การสร้างแบบฟอร์ม(3) ตัวเลือกที่ใช้ในร่วมกับแท็ก Form METHOD = ”GET” หรือ ”POST” ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธีใด GET เป็นการนำข้อมูลทั้งหมดในฟอร์มไปต่อท้ายสุดแล้วประมวลผลครั้งเดียว POST จะนำข้อมูลส่งไปที่ server แยกกันไปเป็นแต่ละ transaction ACTION = “URLsname” ใช้ระบุURL ของ CGI script ที่เรียกมาใช้งาน ENCRYPT ใช้สำหรับเข้ารหัส โดยระบุเป็น MINE Type
คำสั่ง 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>
เอกสารอ้างอิง http://www.w3.org/ http://www.w3shcools.com/ Bryan Pfaffenberger. (2002), Computers in your future 2003., New Jersy , Prentice Hall. H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet & World Wide Web How to Program, Prentice Hall.