โครงสร้างของภาษา HTML |
เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ โดยคำสั่งในภาษา HTML จะทำหน้าที่ควบคุมการแสดงผลของข้อมูลในเว็บเพจ ซึ่งเราสามารถควบคุมได้ทั้งสีสัน รูปภาพ วีดีโอ และเสียง ตลอดจน ตำแหน่งต่างๆ ที่อยู่บนเว็บเพจได้
คำสั่งที่ใช้ควบคุมการแสดงผลของ HTML นั้น เรียกว่า แทก (Tag) ซึ่งมีอยู่มากมายหลายสิบชนิด แต่ละแทก จะมีหน้าที่ ต่างกันออกไป เป็นภาษาพื้นฐานแรกสุดสำหรับการพัฒนาเว็บไซต์
ลักษณะของแทกในภาษา HTML
แทก 1 แทก จะประกอบไปด้วย ส่วนเริ่มต้น และ ส่วนสิ้นสุด ทั้งสองส่วนนี้เราจะเรียกว่า แทกเปิด และ แทกปิด โดยปกติ เมื่อเราใช้งานแทกใดๆ จะต้องพิมพ์ทั้งแทกเปิด และแทกปิดด้วยเสมอ
<html> | แทกเปิด |
</html> | แทกปิด |
จะสังเกตุได้ว่า แทกปิด จะมีเครื่องหมาย / เพิ่มขึ้นมา ซึ่งแทก html นี้จะถูกนำไปใช้งานเสมอ ในหน้าเว็บเพจต่างๆ เนื่องจากเป็นแทกที่ใช้สำหรับกำหนดขอบเขตของเอกสาร HTML
จะสังเกตุได้ว่า ในเว็บเพจหนึ่งๆ จะแบ่งออกเป็น 2 ส่วน คือ ส่วนของ Header และ body จะอยู่ภายในแทก HTML ดังตัวอย่าง
<html> | แทกเปิด html |
<head> | แทกเปิด header |
<title>ข้อความส่วน title</title> | แทก title จะอยู่ภายใน header |
</head> | แทกปิด header |
<body> | ส่วนที่ 2 แทก body |
แสดงข้อความผ่านหน้าเว็บเพจ | |
</body> | แทกปิด body |
</html> | แทกปิด html |
ส่วน HEAD เป็นส่วนที่ใช้สำหรับกำหนดการทำงาน หรือกำหนด คุณสมบัติพิเศษบางประการของเว็บเพจ เช่น เราจะกำหนด ข้อความ title
ส่วน body ส่วนนี้จะเป็นส่วนที่เราจะใส่ข้อความต่างๆ ที่เป็นเนื้อหาของ เว็บเพจเข้าไป และเรายังสามารถกำหนดคุณสมบัติพื้นฐานของเว็บเพจ เช่น รูปภาพ รูปพื้นหลัง สี หรือจุด link
เริ่มต้นสร้างเว็บเพจ |
จากที่เราได้ศึกษาโครงสร้างของ HTML เราจะใส่ข้อมูลต่างๆ เข้าไปใน 2 ส่วนนี้ จะทำให้เราสามารถสร้างเว็บเพจง่ายๆได้ด้วยตัวเอง โดยไม่ต้องพึ่งโปรแกรม
การกำหนดคุณสมบัติของหน้าเว็บเพจ
เว็บเพจแต่ละหน้าจะมีคุณสมบัติบางประการเฉพาะตัว ซึ่งเราสามารถสังเกตุเห็นได้เมื่อเปิดหน้าเว็บนั้นๆ ขึ้นมาดู และคุณสมบัติดังกล่าวก็มีทั้งที่กำหนดใน ส่วนของ HEAD และ ส่วนของ BODY ซึ่งประกอบไปด้วย
ชื่อแทก : TITLE ตัวอย่าง : <title> Professional Website Builder , Flash Intro </title> ตำแหน่ง : ระหว่าง <head>….</head> |
การกำหนด พื้นหลังให้กับหน้า เว็บเพจ
การกำหนดพื้นหลังให้กับเว็บเพจนั้น เป็นการกำหนดแอตทริบิวต์ ให้กับ แทก body โดยใช้ แอตทริบิวต์ BGCOLOR
แอตทริบิวต์ (Attribute) ของแทกคือ รูปแบบหรือคุณสมบัติที่กำหนดเข้าไปในแทกนั้นๆ โดยจะกำหนดหรือไม่ก็ได้ ขึ้นอยู่กับรูปแบบการใช้งานของแต่ละแทก
วิธีการใช้งานแอตทริบิวต์ หลักในการใช้งานของแทกต่างๆ นั้นทำได้ด้วยการใส่ชื่อแอตทริบิวต์ไว้หลังชื่อแทกในแทกเปิด โดยจะเว้นช่องว่างระหว่างชื่อแทกและชื่อแอตทริบิวต์
ตัวอย่างรูปแบบการกำหนดแอตทริบิวต์
รูปแบบ :
<ชื่อแทก แอตทริบิวต์ตัวที่หนึ่ง=”ค่าที่กำหนดให้” …></ชื่อแทก>
ตัวอย่างการใช้ :
<body bgcolor=”black” background=”a.jpg”>…</body>
ชื่อแอตทริบิวต์ : BGCOLOR ตัวอย่าง: <BODY BGCOLOR=”#FFFF00”> </BODY> หรือ ตำแหน่ง : ภายในแทกเปิด <BODY> |
ชื่อแอตทริบิวต์ : BACKGROUND ตัวอย่าง: <BODY BACKGROUND=”a.jpg”> </BODY> หรือ ตำแหน่ง: ภายในแทกเปิด <BODY> |
ชื่อแอตทริบิวต์ : BGPROPERTIES ตัวอย่าง: <BODY background=”a.jpg” bgproperties=”fixed”> </BODY> หรือ ตำแหน่ง: ภายในแทกเปิด <BODY> |
สีของตัวอักษรบนเว็บ
รูปแบบ Text=#รหัสสี
ตัวอย่าง <BODY TEXT="#00FF00">
เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ <BODY> แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY TEXT="#00FF00"> ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด
สีของตัวอักษรเฉพาะที่
รูปแบบ <FONT COLOR="#สีที่ต้องการ">...</FONT>
ตัวอย่าง <font color="#FF0000">สีแดง</font>
คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น <FONT COLOR="#FF0000">สีแดง</FONT>ตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที
สีของตัวอักษรที่เป็นจุดคลิกเมาส์
รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"
ตัวอย่าง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22">
กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้
LINK = สีของตัวอักษรก่อนมีการคลิก
ALIGN = สีของตัวอักษรขณะถูกคลิก
VLINK = สีของอักษรหลังจากคลิกแล้ว
รูปแบบของตัวอักษร
หัวเรื่อง
รูปแบบ <Hx>ข้อความ</Hx>
ตัวอย่าง <H1>หัวข้อใหญ่สุด</H1>
ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง <Hx>....</Hx>
ขนาดตัวอักษร
รูปแบบ <FONT SIZE=x>ข้อความ</FONT>
ตัวอย่าง <FONT SIZE=2>www.signprosoft.com</FONT>
เราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ <FONT SIZE=value> มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7
ตัวหนา (Bold)
รูปแบบ <B>ข้อความ</B>
ตัวอย่าง <B>www.signprosoft.com</B>
จะทำให้ข้อความที่อยู่ใน <B>....</B> มีความหนาเกิดขึ้น เช่น www.signprosoft.com
ตัวเอน (Itatic)
รูปแบบ <I>ข้อความ</I>
ตัวอย่าง <I>www.signprosoft.com</I>
ทำให้ข้อความที่อยู่ใน<I>....</I> เกิดเป็นตัวเอนขึ้น เช่น www.signprosoft.com
ตัวขีดเส้นใต้ (Underline)
รูปแบบ <U>ข้อความ</U>
ตัวอย่าง <U>www.signprosoft.com</U>
ทำให้ข้อความที่อยู่ใน <U>.....<U> มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้น เช่น www.signprosoft.com
ตัวอักษรมีขนาดคงที่ (Typewriter text)
รูปแบบ <TT>ข้อมความ</TT>
ตัวอย่าง <TT>www.signprosoft.com</TT>
ทำให้ ข้อความ ที่อยู่ใน<TT>.....</TT> มีลักษณะเป็น fixed space เกิดขึ้น เช่น Www.signprosoft.com
แบบของตัวอักษร
รูปแบบ <FONT FACE="font name>ข้อความ</FONT>
c <FONT FACE="AngsanaUPC">www.signprosoft.com</FONT>
Font name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น <FONT FACE="AngsanaUPC"> Www.signprosoft.com</FONT> และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)
ขนาด Font ทั้งเอกสาร
รูปแบบ Basefont size="X">
ตัวอย่าง <Basefont size=3>
เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข)
ตัวอักษรแบบพิเศษ
รูปแบบ
< แทนด้วย <
> แทนด้วย >
& แทนด้วย &
" แทนด้วย "
เว้นวรรค แทนด้วย
การจัดรูปแบบ HOMEPAGE
ในการเขียนคำสั่งเพื่อให้แสดงผลด้วยเว็บเบราเซอร์การกด ปุ่ม Enter ที่แป้นพิมพ์เพื่อขึ้นบรรทัดใหม่ในขณะที่สร้าง ไฟล์นั้นยังไม่มีโปรแกรมเว็บเบราเซอร์ตัวใดรู้จักคำสั่งที่ขึ้นบรรทัดใหม่ที่เกิดจาก การกดแป้นพิมพ์เลยดังนั้น เราจึง ต้องมี การเขียนคำสั่งขึ้นซึ่งในบทนี้เราจะมารู้ถึงคำสั่งที่ใช้ใน การกำหนด รูปแบบต่างเพื่อให้ เว็บเพจ มีความสวยงามมากยิ่งขึ้น
การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
ย่อหน้าใหม่
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P> ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>
เส้นคั้น
รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>
เราสามารถกำหนดตำแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้ โดย
โดย X = ค่าต่าง ๆ เหล่านี้
<ALIGN> = CENTER , LEFT , RIGHT
COLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-B
SIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7
WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์
NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบ
การแสดงผลแบบรายงาน
ในการแสดงข้อมูลบนเว็บเพจนอกจากการแสดงผลแบบปกติทั่วไปแล้วบางครั้งเราอาจมีความจำเป็นต้องจัด รูปการแสดงผลให้เป็นแบบของ รายการ(list) คือ มีการ แสดงข้อมูลในลักษณะที่เป็นหัวข้อซึ่งอาจ มีคำอธิบายหรือ ไม่มีก็ได้ การแสดงข้อมูลแบบรายการจะมีรายการแบบลำดับ (ใช้หมายเลข กำกับ) หรือ รายการแบบไม่มี ลำดับ(ใช้สัญลักษณ์ กำกับ) แต่ไม่ว่า จะเลือกให้มีการ แสดงผลรายการ แบบใด ก็ตามทั้ง 2 ลักษณะ ก็มีลักษณะ การทำงาน ที่เหมือนกัน
รายการแบบใช้สัญลักษณ์กำกับ (Bullet lists)
รูปแบบ
<UL> ตัวเปิด
<LI> ข้อมูลที่นำมาแสดง
<LI> ข้อมูลที่นำมาแสดง
</UL> ตัวปิด
เป็นการแสดงผลโดยใช้สัญลักษณ์ในการกำกับรายการต่าง ๆ และเราสามารถกำหนดลักษณะของสัญลักษณ์ได้โดยใช้คำสั่ง Type=N ซึ่ง N=circle=วงกลม,disc=วงกลมทึบ หรือ square=สี่เหลี่ยม โดยอยู่ในคำสั่ง ของ <UL> ถ้าต้องการ ให้สัญลักษณ์ เหมือนกัน ทุกรายการ แต่ ถ้าต้องการ ให้แต่ละรายการ ไม่เหมือนกันให้ใส่ในส่วนของ <LI> เช่น
<UL>
<LI Type=disc>รายการที่ 1
<LI Type=circle>รายการที่ 2
<LI Type=square>รายการที่ 3
</UL>
เว็บเบราเซอร์ จะแสดง ออกมา เป็น
- รายการที่ 1
- รายการที่ 2
- รายการที่ 3
รายการแบบใช้ตัวเลขกำกับ (Numbered lists)
รูปแบบ
<OL> ตัวเปิด
<LI> ข้อมูลที่นำมาแสดง
<LI> ข้อมูลที่นำมาแสดง
</OL> ตัวปิด
เป็นการกำหนดรายการโดยใช้ตัวเลขกำกับเช่น 1 หรือ i และเราสามารถกำหนดค่าเริ่มต้นไว้ที่ <OL> โดยใส่ค่า START=n โดย n= ตัวเลขที่ต้องการเริ่ม และ TYPE=n โดย n= a , A , i , I ซึ่งเป็นชนิดของค่าเริ่มต้น ตามตัวอย่างจะเริ่ม ต้นที่ 3 ชนิดเป็น a เช่น
<OL START=3 TYPE=a>
<LI>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>
เว็บเบราเซอร์ จะแสดง ออกมาเป็น
c. รายการที่ 1
d. รายการที่ 2
e. รายการที่ 3
เรายังสามารถใช้คำสั่ง TYPE=n ในส่วนของ <LI> ได้ แต่ค่าเริ่มต้นต้องเป็นไปตามค่าดังกล่าวข้างต้นให้สังเกตตามตัวอย่าง <OL>
<LI TYPE=1>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>
<OL> <LI TYPE=a>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>
เว็บเบราเซอร์ จะแสดง ออกมา เป็น
1. รายการที่ 1
2. รายการที่ 2
3. รายการที่ 3
a. รายการที่ 1
b. รายการที่ 2
c. รายการที่ 3
รายการแบบกลุ่ม (Preformatted Text)
รูปแบบ <PRE>....</PRE>
การใช้คำสั่งนี้ ข้อความที่อยู่ภายใน คำสั่ง จะมีขนาดเท่ากัน ทุกตัว แสดงข้อมูลที่อยู่ในรูปของตารางหรือรายงานแผนผังอย่างง่าย ๆ
--------------------------------------------------------
Date Time Note
--------------------------------------------------------
20 08.52 -
25 09.50 -
26 10.00 -
28 12.00 -
---------------------------------------------------------
การเชื่อมโยง Link
ประเภทการเชื่อมโยง
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail
การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="home.html">หน้าหลัก</A>
การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF="http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="http://www.signprosoft.com">SignProsoft</A>
*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a href="http://www.signprosoft.com" target="_blank"> SignProsoft </a>
การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://www.msit2005.mut.ac.th:31> Download </a>
การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>
การสร้างตารางและการประยุกต์ใช้
โครงสร้างตาราง
<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE>
คำสั่ง | คุณสมบัติ |
<TABLE>...</TABLE> | เป็นคำสั่งเปิดปิดตาราง |
<TR>...</TR> | ตารางตามแนวนอน เป็นการกำหนดแถวในตาราง |
<TH>...</TH> | หัวข้อ ของ ตาราง ข้อความ ที่อยู่ใน คำสั่ง จะถูก จัดให้เป็น ตัวหนา และกึ่งกลาง โดย อัตโนมัติ |
<TD>...</TD> | เป็นราย ละเอียด ของตาราง เป็นการ กำหนดจำนวน คอร์ลัม ของตาราง |
คุณสมบัติของตาราง
คุณสมบัติของแทก <TABLE>
ALIGN | กำหนด ตำแหน่งตาราง โดย |
BACKGROUND | ใส่ภาพกรฟิก เป็นพื้นหลังตาราง url เป็น ตำแหน่ง ภาพ |
BGCOLOR | กำหนดสีให้ตาราง |
BORDER | เส้นขอบ ตาราง n เป็นค่า ความหนาของ ขอบตาราง |
BORDERCOLOR | กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER |
CELLPADDING | กำหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง |
CELLSPACING | กำหนดขนาดของเส้นตาราง |
WIDTH | กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น % |
HEIGHT | กำหนดความสูงของตารางเป็นตัวเลขและเป็น % |
คุณสมบัติของแทก <TR>
ALIGN | กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย |
BACKGROUND | ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
BGCOLOR | กำหนดสีที่เป็นฉากหลังให้แถว |
BORDERCOLOR | กำหนดสีให้ขอบตาราง |
VALIGN | จัดตำแหน่งข้อมูลในแนวตั้ง โดย |
คุณสมบัติของแทก <TH>
ALIGN | กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย |
BACKGROUND | ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
BGCOLOR | กำหนดสีที่เป็นฉากหลังให้แถว |
BORDERCOLOR | กำหนดสีให้ขอบตาราง |
COLSPAN | ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี |
ROWSPAN | ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี |
VALIGN | จัดตำแหน่งข้อมูลในแนวตั้ง โดย |
คุณสมบัติของแทก <TD>
ALIGN | กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย |
BACKGROUND | ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
BGCOLOR | กำหนดสีที่เป็นฉากหลังให้แถว |
BORDERCOLOR | กำหนดสีให้ขอบตาราง |
COLSPAN | ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี |
ROWSPAN | ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี |
VALIGN | จัดตำแหน่งข้อมูลในแนวตั้ง โดย |
ตารางซ้อนตาราง
มีอยู่ บ่อยครั้ง ที่เรา จำเป็น ที่จะต้อง สร้างตาราง ให้ มีลักษณะ ของตาราง ทับซ้อน กันได้ เพื่อ ผล ทางการ แสดงผล ข้อมูล ข้อมูล ให้แบบ ละเอียด ของข้อมูล ได้มาก ที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด <TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>.....</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ เช่น
A | B | ||
| E |
จากตัวอย่าง สามารถสร้าง โคดของตารางได้ดังนี้
<TABLE BORDER WIDTH=50%>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>
<TABLE BORDER WIDTH=100%>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
<TD>E</TD>
</TR>
</TABLE >
การใส่ไฟล์วีดีโอลงบนเว็บเพจ
แบบ Background Sound
รูปแบบ <BGSOUND SRC="......." LOOP=n>
เป็นการใส่เสียงเพลง ทำเป็น Background ให้กับโฮมเพจ เมื่อผู้เยี่ยมชมเปิดเข้ามา มันจะทำการ โหลดเพลง ให้โดย อัตโนมัติ โดย
• BGSOUND เป็นรูปแบบการใส่เสียงเพลงของ Microsoft Internet Explorer
• SRC ใส่ ตำแหน่ง ที่อยู่ ของไฟล์เสียง เพลงที่ต้องการ
• LOOP จำนวนรอบที่ต้องการให้เล่น ถ้าต้องการให้เล่นไปเรื่อย ๆ ให้ใส่ Infinite
ตัวอย่าง <BGSOUND SRC="sound.mid" LOOP=5>
แบบ EMBED
รูปแบบ <EMBED SRC="......" HIDDEN=TRUE HIGHT=n WIDTH=n CONTROLS=COLSOLE/SMALLCONSOLE AUTOSTART=TRUE LOOP=TRUE/n>
เป็นการใส่เสียงเพลง ทำเป็น background ให้กับโฮมเพจของ Netscape Navigator โดย
• EMBED เป็นรูปแบบการใส่เสียงเพลงของ Netscape Navigator
• SRC ใส่ ตำแหน่ง ที่อยู่ ของไฟล์เสียง เพลงที่ต้องการ
• HIDDEN เป็นการซ้อนปุ่มควบคุมการเล่นเพลง ถ้าไม่ต้องการก็ไม่ต้องใส่เข้าไปเลย เมื่อใส่คำสั่งนี้แล้ว คำสั่งอื่นคือ hight,width,controls ก็ไม่ต้องใส่เข้าไป
• HIGHT เป็นการกำหนดความสูงให้กับแผงควบคุม
• WIDTH เป็นการกำหนดความกว้างให้แผงควบคุม
• CONTROLS กำหนดรูปแบบแผงควบคุม โดย smallconsole เป็นแบบอย่างย่อ ส่วน console เป็นเต็มรูปแบบ
• - AUTOSTART กำหนดการเล่นเพลงโดยอัตโนมัติ (TRUE) ถ้าไม่ต้องการให้ ลบทิ้งไปได้เลย
• LOOP จำนวนรอบที่ต้องการให้เล่น ถ้าต้องการให้เล่นไปเรื่อย ๆ ให้ใส่ TRUE แต่ถ้าต้องการ กำหนดจำนวนรอบก็ใส่เป็นตัวเลขเข้าไป เมื่อไม่ต้องการไม่ให้วนให้ใส่ FALSE (ไม่จำเป็นต้องใส่ก็ได้ เพราะค่าปกติเป็น FALSE อยู่แล้ว)
ตัวอย่าง
<EMBED SRC="sound.mid" HIGHT=60 WIDTH=144 CONTROLS=COLSOLE AUTOSTART=TRUE LOOP=TRUE>
แบบกำหนดตัวเชื่อม
รูปแบบ < A HREF="......">คำอธิบาย</A>
เป็นการใส่เพลงโดยการกำหนดตัวเชื่อม ในช่องว่าง ๆให้ใส่ตำแหน่งไฟล์เสียง ลงไป ส่วนตรง "คำอธิบาย" ให้ใส่ข้อความที่สื่อความหมายให้รู้ว่า ตัวเชื่อมนี้ เป็นไฟล์เพลง เช่น "เพลงแสนสนุก"
ตัวอย่าง < A HREF="sound.mid"> ฟังเพลงกดตรงนี้จ้า</A>
แบบ META
รูปแบบ < META HTTP-EQUIV="Refresh" CONTENT="1;URL=........">
ใช้คำสั่ง meta เพื่อเป็นการโหลดไฟล์ออดิโอและ เล่นเพลงนั้น ๆ โดยอัตโนมัติ ทันทีเมื่อเว็บเพจถูกโหลดขึ้นมา ใช้ได้ทั้ง IE และ NS โดย
• คำสั่ง <META> ใส่อยู่ระหว่าง คำสั่ง <HEAD>......</HEAD>
• HTTP-EQUIV="Refresh" กำหนดการโหลดไฟล์เพลงโดยอัตโนมัติ
• CONTENT="1;URL=...." เป็นการกำหนดเวลาที่จะโหลดเพลงเมื่อเว็บเพจถูกโหลดขึ้นมา โดย URL เป็นชื่อเพลงที่ต้องการให้โหลด เช่น
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="1;URL=sound.mid">
</HEAD>
ใส่ไฟล์วีดิโอให้เว็บเพจ(IE)
รูปแบบ <IMG DYNSRC="....." SRC="......" ALT="......" LOOP=n START=FILEOPEN/MOUSEOVER CONTROLS>
เป็นรูปแบบการใส่ไฟล์วีดิโอของ Internet Explorer โดยมีลักษณะคำสั่งดังนี้
• DYNSRC="......" ให้ใส่ชื่อไฟล์วีดิโอลงไป เช่น video.avi
• SRC="......" ให้ใส่ไฟล์รูปภาพ ไว้ เป็นตัวแทน ไฟล์วีดิโอนั้น ๆ เมื่อบราวเซอร์ ผู้ใช้ไม่สนันสนุน
• ALT="......" ใส่ข้อความใด ๆ ก็ได้ลงไปเพื่อ ให้ผู้ใช้ที่ ไม่สามารถดูวีดิโอ สามารถรู้ข้อมูลได้
• LOOP=n กำหนดจำนวนครั้งที่จะให้วีดิโอเล่น ใส่เป็นตัวเลขหรือ infinite ก็ได้
• START=FILEOPEN/MOUSEOVER โดย fileopen เป็นการกำหนด ให้เริ่มเล่นทันที ที่ไล์วีดีโอโหลดเสร็จ (ปกติแล้ววีดิโอจะถูกเล่น ทันทีที่ดาวน์โหลดเสร็จ ดังนั้น -STRAT=FILEOPEN จึงไม่ต้องใส่ก็ได้) mouseover เป็นการกำหนด ให้เล่นวีดิโอ เมื่อเอาเมาส์ไปวางบนวีดีโอนั้น ๆ
ตัวอย่าง
< IMG DYNSRC="SPORT.AVI" SRC=PICTURE.GIF ALT="ทดสอบการใช้ไฟล์วีดีโอ(IE)" LOOP="2" >
การสร้างฟอร์ม |
แบบฟอร์มถือว่าเป็นหัวใจสำคัญที่จะถูกใช้เมื่อเราต้องการข้อมูลจากผู้ใช้งานเว็บเพจ เวลาที่เราเขียนโปรแกรมติดต่อกับ Server ที่ต้องมีการกรอกข้อมูลจากผู้ใช้งาน เราก็จะต้องใช้ฟอร์ม สำหรับส่งข้อมูลทั้งสิ้น ซึ่งรูปแบบในการรับข้อมูลจากผู้ใช้ก็มีหลากหลาย เหมือนกับฟอร์มในรูปแบบของงานธุรการ ก็มีอยู่หลากหลายเช่นกัน
รูปแบบของฟอร์ม
รูปแบบ < FORM METHOD="..." ACTION="..." ENCTYPE"..."></FORM>
METHOD=GET/POST โดย GET จะส่งได้ไม่เกิน 255 ตัวอักษร ส่วนใหญ่ใช้ส่งค่าตัวแปรและ URL และ POST จะส่งข้อความไปได้ไม่จำกัด ซึ่งนิยมใช้มากกว่า GET
ACTION="mailto:myaddress@mysite.co.th" ซึ่งเป็นรูปแบบของการส่งข้อมูลจากฟอร์มไปยังเมล์บ็อกซ์ของเรา
ENCTYPE= "application/x-www-form-urlencoded" เป็นการกำหนด รูปแบบการเก็บข้อมูลของฟอร์ม เพื่อที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ จะใส่หรือไม่ใส่ก็ได้ แต่ถ้าใส่ จะทำให้โปรแกรม mailto: สามารถใช้โปรแกรมเมล์ บางโปรแกรมอ่านข้อมูลที่ถูกเก็บในรูปแบบนี้ได้ทันที เช่น
<FORM METHOD=”POST” ACTION="mailto:info@np.a-net.net.th" ENCTYPE= "application/x-www-form-urlencoded"> </FORM>
สำหรับการกำหนด ENCTYPE ที่ใช้ในการ upload ไฟล์ นั้นเราจะต้องกำหนดเป็น multipart/form-data ซึ่งเป็นการกำหนดรูปแบบของการเก็บข้อมูลของฟอร์มที่เป็น ไฟล์ ใช้งานได้ดังนี้
<FORM METHOD=”POST” ACTION=”…” ENCTYPE=”multipart/form-data”>
…………………………
</FORM>
ช่องรับข้อมูลประเภทต่างๆ |
ช่องรับข้อมูลมีอยู่ด้วยกันหลายรูปแบบ ซึ่งจะแสดงให้เห็นถึงแต่ละแบบในทีนี้ และ ช่องรับข้อมูลทั้งหมดนี้เมื่อใช้งานจริง จะต้องอยู่ภายในแทก <form>
ช่องรับข้อมูลประเภท Text
ช่องรับข้อมูลประเภท Text จะมีลักษณะเป็นช่องรับข้อมูลขนาดบรรทัดเดียว โดยที่ผู้ใช้สามารถพิมพ์ตัวอักษร เข้าไปได้ไม่จำกัด (หากไม่ได้กำหนด Maxlength ไว้)
รูปแบบ < INPUT TYPE=TEXT NAME="..." SIZE=n MAXLENGTH=n VALUE="...">
• TYPE=TEXT เป็นการกำหนดค่าให้แสดงตัวรับข้อมูลแบบ TEXT
• NAME="..." ชื่อหัวข้อ เพื่อบอกให้รู้ว่า ค่าที่ได้รับกลับมานั้น เกี่ยวกับอะไร
• SIZE=n เป็นจำนวนขนาดของช่องรับข้อความค่าปกติ 20 ตัวอักษร
• MAXLENGTH=n เป็นจำนวนตัวอักษรที่รับได้สูงสุดในช่องรับนั้น ๆ
• VALUE="..." ข้อความที่อยู่ระหว่างเครื่องหมายคำพูดจะ ปรากฎอยู่ในช่อรับข้อมูลให้โดยอัตโนมัติ
ช่องป้อนรหัสผ่าน
รูปแบบ < INPUT TYPE=PASSWORD NAME="..." SIZE=n MAXLENGTH=n VALUE="...">
รูปแบบคล้ายกับกับการ INPUT ด้วย TEXT ต่างกันเพียงแค่ แอตทริบิวต์ Type เปลี่ยนคำว่า TEXT ให้เป็น PASSWORD เท่านั้น ในช่องที่กรอกรหัสหน้าจอ จะแสดงเป็นสัญลักษณ์ "*" เครืองหมายดอกจันแทน เพื่อป้องกันไม่ให้คนอื่นมองเห็น
ปุ่ม Radio Botton
รูปแบบ <INPUT TYPE=RADIO NAME="..." VALUE="..." CHECKED>
ปุ่มเลือกแบบนี้สามารถเลือกได้เพียง ปุ่มเดียวเท่านั้น คำสั่ง CHECKED นั้นมีไว้ เพื่อกำหนด ให้ตัวเลือก ถูกเลือก ไว้ก่อนแล้ว โดยเป็นตัวเลือกที่เราคิดว่าผู้กรอกแบบฟอร์มน่าจะเลือก สามารถกำหนดได้ตำแหน่งเดียว
เช็คบ็อกซ์
รูปแบบ < INPUT TYPE=CHECKBOX NAME="..." VALUE="..." CHECKED>
ปุ่มเลือก แบบนี้ สามารถเลือก หลายปุ่ม คำสั่ง CHECKED สามารถกำหนด ได้หลายตัว ส่วนการตั้งค่าอื่น ๆ เหมือนแบบ Radio Botton ค่าของ name และ value ไม่มีรูปแบบ กำหนดตายตัว ว่าเป็นแบบใด จะกำหนดname ให้เหมือนกันแต่ value ต่างกันหรือ กำหนด name ต่างกัน ส่วน value เหมือนกัน อย่างไรก็ได้ ขอให้เราเข้าใจและประเมินผล ข้อมูลที่ส่งมาได้เท่านั้นเอง
ตัวรับข้อมูลแบบ TEXTAREA
รูปแบบ
< TEXTAREA NAME="..." ROWS=n COLS=n WRAP=OFF/VIRTUAL/SOFT/PHYSICAL/HARD >
.........TEXT
.........TEXT
</TEXTAREA>
เราสามารถกำหนดขนาดของกรอบรับข้อความได้ด้วยตัวเอง
• ROWS=n n หมายถึง จำนวนบรรทัดที่ต้องการ
• COLS=n n หมายถึง จำนวนความกว้างของกรอบรับข้อความ มีหน่วยเป็น 50 ตัวอักษร
• รูปแบบการปัดคำ(Wrap) ปกติไม่ได้ตั้งไว้เราสามารถกำหนดได้ 3 วิธี คือ
1. WRAP=OFF ค่าปกติ ไม่มีการปัดคำขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ จนกว่าผู้กรอกจะกด Enter
2. WRAP=VITUAL หรือ WRAP=SOFT ปัดคำเมื่อสิ้นสุดกรอบข้อความ แต่เป็นการปัดคำแบบหลอก ๆ เฉพาะต่อหน้าผู้กรอกเท่านั้น
3. WRAP=PHYSICAL หรอื WRAP=HARD ปัดคำเมื่อสิ้นสุดกรอบรับข้อความ ซึ่งเป็นการปัดจริง ๆ
การใช้งานเบราเซอร์บางรุ่นไม่สนับสนุน VITUAL และ PHYSICAL ฉะนั้นทางแก้คือให้ใช้ SOFT และ HARD จะดีกว่า
การเลือกรายการ (แบบ Drop down menu)
รูปแบบ
< SELECT NAME="..." >
<OPTION SELECTED>คำอธิบายหัวข้อหรือตัวเลือก
<OPTION >คำอธิบายหัวข้อหรือตัวเลือก
<OPTION >คำอธิบายหัวข้อหรือตัวเลือก
</SELECT>
• SELECT เป็นค่าปกติที่ใช้
• OPTION เป็นตัวเลือกที่เราต้องการให้ปรากฎ
• SELECTED เป็นตัวเลือกที่ถูกกำหนดเลือกไว้ก่อน มีได้เพียงตัวเดียว
ส่วนเมนูแบบ Scrolling นั้น ทำได้โดยการใส่ SIZE=n เข้าไปในส่งนของ <SELECT> ซึ่งค่าของ SIZE=n นั้นจะใส่เท่าไรก็ได้ เช่น ถ้าคุณมีตัวเลือก 5 ตัว แต่ใส่ SIZE=2 คุณก็สามารถเห็นได้แค่ 2 บรรทัด เท่านั้น SIZE จะมีค่ามากน้อยขึ้นอยู่กับ OPTION ก็ได้ แล้วแต่ความสวยงามของฟอร์ม สำหรับเมนูแบบนี้ มักใช้กับหัวข้อที่มีตัวเลือกไม่มากนัก
ปุ่มยกเลิก และ ตกลง
รูปแบบ
< INPUT TYPE=SUBMIT VALUE="..." >
< INPUT TYPE=RESET VALUE="..." >
• Submit มีหน้าที่ไว้ส่งแบบฟอร์มกลับไปยังเจ้าของฟอร์ม
• Reset มีไว้สำหรับเคลียร์ค่าฟอร์มทั้งหมดให้กลับอยู่ในรูปแบบเดิมก่อนมีการกรอก
• Vaule เป็นการกำหนดคำอธิบายปุ่มแทนค่าปกติคือ Submit Query กับ Reset จะมีหรือไม่มีก็ได้
1 ความคิดเห็น:
You can authority admiring replica watches aural your coffer income. Thus you accept to accomplish a bright check, authoritative abiding they accept abiding and accurate function. Second, do bethink alone buy from the reliable sellers, and accomplish abiding the transaction is absolutely safe and secure.
แสดงความคิดเห็น