![ทบทวนคำศัพท์เกี่ยวกับ Internet ,[object Object],- IP Address - Domain Name - World Wide Web( WWW ) - WebPages](https://image.slidesharecdn.com/html-110514224754-phpapp02/85/html-1-320.jpg)
Recommandé
Contenu connexe
Tendances
Similaire à HTML
Similaire à HTML (20)
HTML
- 2. ทบทวนคำศัพท์เกี่ยวกับ Internet - Web Browser - Web Server - Website - Homepage - URL( Uniform Resource Locator )
- 3. ความรู้เบื้องต้นในการทำเว็บเพจ การทำเว็บเพจสามารถที่จะสร้างได้ 2 แบบใหญ่ ๆ คือ การเขียนเว็บเพจด้วยวิธีนี้ ผู้เขียนจะต้องเรียนรู้การเขียนภาษา HTML เอง ซึ่งสามารถเขียนได้บน Text Editor ทั่ว ๆ ไป เช่น Notepad, WordPad Microsoft Word แต่เวลา Save ไฟล์จะต้องเป็นนามสกุล . htm หรือ . html การ เขียน เว็บเพจด้วยวิธีนี้เหมาะสำหรับผู้เขียนเว็บเพจมือใหม่ เพราะว่า ในตัวโปรแกรมจะมีตัวช่วยในการทำเว็บเพจให้สามารถทำได้ง่ายขึ้น เช่น FrontPage , Dream Weaver, Netscape Composer (1) การเขียนเว็บเพจด้วย HTML (2) การเขียนเว็บเพจโดยใช้เครื่องมือช่วย (Tools)
- 4. HTML (Hypertext Markup Language) เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์เพื่อตอบสนองในการแสดงผลบนจอภาพในระบบอินเตอร์เน็ต ในลักษณะของเว็บเพจซึ่งสามารถแสดงผลได้ทั้งข้อความรวมทั้งรูปทรงกราฟฟิก , ภาพนิ่ง , ภาพเคลื่อนไหว , เสียงหรือแม้กระทั่งการเชื่อมโยงไปยังเว็บไซต์อื่นๆในระบบอินเตอร์เน็ต
- 5. โปรแกรมที่ใช้ในการเขียนโฮมเพจด้วย HTML เป็นส่วนที่ ใช้สำหรับกำหนดข้อความและรูปแบบคำสั่งต่างๆในมาตรฐานของ HTML ซึ่งอาจะใช้ Notepad หรือ WordPad ก็ได้ แต่เวลา save file จะต้องเป็นนามสกุล .html หรือ . htm เป็นส่วนที่ใช้เรียกเอกสาร HTML ออกมาแสดงผลบนจอภาพในระบบอินเตอร์เน็ต เปรียบเสมือนการการคอมไพล์และการรันโปรแกรมในทางคอมพิวเตอร์ สำหรับ Web Browser ที่นิยมใช้กันอยู่ คือ Internet Explorer และ Netscape Navigator 1.Text Editor 2.Web Browser
- 6. โครงสร้างของภาษา HTML สำหรับส่วนที่เป็นคำสั่งจะนำมาใช้เพื่อเปลี่ยนแปลงรูปร่างและแบบของตัวอักษรหรือเอกสารใดๆจะถูกเรียกว่า แท็ก (Tag) และแท็กเหล่านี้จะเขียนอยู่เครื่องหมาย < > ในรูปแบบ < คำสั่ง > เช่น <HTML>,<B>,<U>,… เป็นต้น ซึ่งแต่ละแท็กจะทำหน้าที่แตกต่างกันไป มีองค์ประกอบหลักอยู่ 2 ส่วน คือ 1. ส่วนของข้อความที่จะพิมพ์ออกทางหน้าจอ 2. ส่วนที่เป็นคำสั่ง หรือ แท็ก (Tag)
- 7. โดยเราจะแบ่งกลุ่มของแท็กออกเป็น 2 กลุ่ม คือ รูปแบบคำสั่งที่แยกออกเป็น 2 ส่วน โดยจะมีทั้งส่วนเริ่มต้นและส่วนจบของคำสั่ง โดยที่ส่วนจบของคำสั่งจะมีเครื่องหมาย Slash(/) กำกับไว้หน้าแท็กนั้นๆ < ชื่อคำสั่ง > ข้อความเอกสาร </ ชื่อคำสั่ง > เช่น <HTML>…………….</HTML> 1. แท็กเดี่ยว คือ รูปแบบคำสั่งที่มีเพียงคำสั่งเดียว ก็สามารถใช้งานได้เลยและสิ้นสุดความหมายด้วยตัวมันเอง เช่น < BR >,< P > เป็นต้น 2. แท็กคู่
- 8. การกำหนดโครงสร้างพื้นฐานของ HTML <HTML> </HTML> <HEAD> <TITLE> ชื่อหัวเรื่อง </TITLE> </HEAD> <BODY> ส่วนของข้อมูลที่ต้องการแสดงผล ....................... </BODY>
- 11. คำสั่งในการจัดรูปแบบเอกสาร <Hn> : กำหนดหัวเรื่อง (Heading ) <Br> : ขึ้นบรรทัดใหม่ (Line Break) <P> : จัดวางตำแหน่งข้อความ (Paragraph Break) <Hr> : ตีเส้นแนวนอนในเอกสาร (Horizontal Line) <Pre> : จัดรูปแบบเอกสารตามที่กำหนด (Preformatted) <Center> : จัดวางข้อความกึ่งกลางบรรทัด <Multicol>: จัดพิมพ์ข้อความในแนวคอลัมน์
- 12. <Hn> : กำหนดข้อความหัวเรื่อง (Heading Text) รูปแบบ <H n > ข้อความหัวข้อเรื่อง </H n > เมื่อกำหนดให้ < Hn > ... </Hn > : เป็นคำสั่งที่ใช้กำหนดข้อความหัวข้อเรื่อง n : เป็นตัวเลขที่กำหนดขนาดของหัวข้อเรื่อง โดย n อยู่ในช่วง 1 ถึง 6 ตัวอย่าง
- 13. <BR>: ขึ้นบรรทัดใหม่ (Line Break) รูปแบบ ข้อความ ………… <Br> <Center>: จัดวางข้อความกึ่งกลางบรรทัด รูปแบบ < Center > ข้อความ … < Center > ตัวอย่าง
- 14. <P>: จัดวางตำแหน่งข้อความ รูปแบบ < P Align = ตำแหน่ง > ข้อความ </P> ตำแหน่ง เป็นการกำหนดตำแหน่งการจัดวาง Left จัดวางข้อความชิดซ้ายบรรทัด Center จัดวางข้อความกึ่งกลางบรรทัด Right จัดวางข้อความชิดขวาบรรทัด ตัวอย่าง
- 15. <Pre>: จัดรูปแบบเอกสารตามที่กำหนด รูปแบบ <pre> ข้อความ เอกสารตามที่จัดรูปแบบไว้ … </pre> ตัวอย่าง
- 16. <Hr>: ตีเส้นในแนวนอน รูปแบบ <hr size = ความหนาของเส้น width = ความยาวของเส้น align = ตำแหน่งการจัดวาง color = สีของเส้น noshade > ตัวอย่าง
- 17. <Multicol>: จัดพิมพ์ในแนวคอลัมน์ รูปแบบ ( เฉพาะใน Netscape) < multicol > ข้อความ … < / multicol > คำสั่งเสริม cols : เป็นการกำหนดจำนวนคอลัมน์ เช่น cols = 3 gutter : เป็นการกำหนดช่องว่างระหว่างคอลัมน์เป็น Pixel หรือ % width : เป็นการกำหนดความกว้างของคอลัมน์เป็น Pixel หรือ % ตัวอย่าง
- 20. คำสั่งที่ใช้ในการจัดรูปแบบตัวอักษร <Font Face> : กำหนดแบบตัวอักษร (Font Type) <Font Size> : กำหนดขนาดตัวอักษร (Font Size) <Basefont size>: กำหนดขนาดพื้นฐานของตัวอักษร <Font Color>: กำหนดสีของตัวอักษร (Font Color) <B> : กำหนดอักษรตัวหนา (Bold) <I> : กำหนดอักษรตัวเอียง (Italic) <U> : กำหนดอักษรตัวขีดเส้นใต้ (Under Line)
- 21. คำสั่งที่ใช้ในการจัดรูปแบบตัวอักษร <Strong> : กำหนดอักษรตัวหนาเข้ม <Big> : กำหนดอักษรตัวใหญ่กว่าข้อความภายนอก <Small> : กำหนดอักษรตัวเล็กกว่าข้อความภายนอก <Blink> : กำหนดอักษรกระพริบ ( เฉพาะ Netscape) <Marquee>: กำหนดอักษรวิ่ง ( เฉพาะ Internet Explorer) <Body BGColor> : กำหนดสีพื้นของเอกสาร <Body Text> : กำหนดสีของตัวอักษรทั้งเอกสาร
- 22. <Font Face>: กำหนดแบบตัวอักษร รูปแบบ <font face = “ ชื่อฟอนต์ ” > ข้อความ </font > <Font Face = “ ชื่อฟอนต์ 1”, “ ชื่อฟอนต์ 2,…” > ข้อความ </Font > แต่ถ้าต้องการระบุมากกว่า 1 ฟอนต์ ตัวอย่าง
- 23. <Font Size> : กำหนดขนาดตัวอักษร รูปแบบ <Font Size = ขนาด > ข้อความ </Font> ขนาดตัวอักษร ตั้งแต่ 1 ถึง 7 <font size=5> Siam Computer </font> ตัวอย่าง
- 24. <BaseFont Size> กำหนดขนาดพื้นฐานของตัวอักษร รูปแบบการกำหนดขนาดพื้นฐานของตัวอักษร < BaseFont Size = ขนาด > ข้อความ ... รูปแบบการเพิ่มขนาดตัวอักษร รูปแบบการลดขนาดตัวอักษร <Font Size = + ตัวเลข > ข้อความ </Font> <Font Size = - ตัวเลข > ข้อความ </Font>
- 25. <Font Color>: กำหนดสีของตัวอักษร สามารถกำหนดสีได้ 2 รูปแบบ คือ <Font Color = ชื่อสีมาตรฐาน > ข้อความ ... </Font> หรือ <Font Color = #RRGGBB > ข้อความ ... </Font> โดยค่าสีจะเป็นเลขฐาน 16 ตั้งแต่ 00- FF ตัวอย่าง
- 26. การกำหนดลักษณะแบบของตัวอักษร ลักษณะของแบบอักษร ตัวอย่าง <b> ข้อความ </b> <i> ข้อความ </i> <u> ข้อความ </u> <s> ข้อความ </s> <strong> ข้อความ </strong> <big> ข้อความ </big> <small> ข้อความ </small> <blink> ข้อความ </blink>
- 27. < Marquee > : กำหนดอักษรวิ่ง รูปแบบ ( เฉพาะ Internet Explorer) < Marquee > ข้อความ </ Marquee> Behavior = “Slide”, “Scroll”, “Alternate” : กำหนดรูปแบบการวิ่ง Direction =“Left”, “Right” : กำหนด ทิศทางการวิ่ง Bgcolor = “ ชื่อสี ” : กำหนดสีพื้นหลังอักษรวิ่ง Width = กำหนดความกว้างของกรอบที่ใช้แสดงข้อความ เป็น % ของจอภาพ Loop = จำนวนรอบในการแสดงข้อความซ้ำ Scrolldelay = กำหนดระยะเวลาในการทำงานในแต่ละครั้ง ( หน่วยเป็น millisecond) ตัวอย่าง
- 28. กำหนดสีพื้นจอภาพทั้งเอกสาร รูปแบบ < Body Bgcolor = ชื่อสีมาตรฐาน หรือ #RRGGBB > ข้อความ … </ Body > เช่น <body bgcolor=“#ff00ff”>
- 29. กำหนดสีให้ตัวอักษรทั้งเอกสาร < Body Text = ชื่อสีมาตรฐาน หรือ #RRGGBB > ข้อความ … </ Body > รูปแบบ เช่น <body text=“#0000ff”>
- 32. <UL>:Unorder List รูปแบบ <UL Type = ชนิดของเครื่องหมาย > ข้อความส่วนหัว <LI> ข้อความรายการที่ 1 <LI> ข้อความรายการที่ 2 … </UL> ชนิดของเครื่องหมายมี 3 แบบ คือ Disk : Square : Circle : ตัวอย่าง
- 33. <OL> : Order List รูปแบบ <OL Type= ชนิดตัวเลข Start = ค่าเริ่มต้น > ข้อความส่วนหัว <LI> ข้อความรายการที่ 1 <LI> ข้อความรายการที่ 2 …………………… </ OL > ชนิดของตัวเลขมี 5 แบบ คือ A, a, I, i, 1
- 34. <DIR>:Directory List รูปแบบ <DIR> ข้อความส่วนหัว … <LI> ข้อความรายการ … <LI> ข้อความรายการ … … </DIR> นิยมกำหนดชนิดของเครื่องหมายใน List มี 3 แบบเหมือนเดิม
- 35. <DL>:Definition List <DL> ข้อความหัวข้อเรื่อง <DT> ข้อความหัวข้อ <DD> ข้อความอธิบายรายละเอียด … <DT> ข้อความหัวข้อ <DD> ข้อความอธิบายรายละเอียด … … </DL> รูปแบบ ตัวอย่างงาน
- 36. การสร้างตาราง (Table) <Tr> ... </Tr> เป็นการกำหนดแถวของตาราง 1 แถว <Table>…</Table> เป็นคำสั่งในการสร้างตาราง <Caption> ... </Caption> เป็นการกำหนดข้อความกำกับตาราง
- 37. การสร้างตาราง (Table) <Th>… ................. </Th> เป็นการกำหนดส่วนหัวหรือหัวเรื่องให้ตารางแถวแรก <Td> ................. …</Td> เป็นการกำหนดส่วนของข้อมูลในแต่ละแถว
- 38. โครงสร้างของ Table <Table> </Table> <Caption> .... คำอธิบายตาราง .... </Caption> <Tr> <Td> ข้อความ </Td> <Td> ข้อความ </Td> </Tr> <Tr> <Td> ข้อความ </Td> <Td> ข้อความ </Td> </Tr> <Tr> <Th> ข้อความ </Th> <Th> ข้อความ </Th> </Tr>
- 39. Table Row Column
- 40. Option ในการกำหนดตาราง Height : ใช้กำหนดความสูงของทั้งตาราง สามารถกำหนดได้เป็นตัวเลขและเปอร์เซ็นต์ Width : ใช้กำหนดความกว้างของทั้งตาราง สามารถกำหนดได้เป็นตัวเลขและเปอร์เซ็นต์ Cellspacing : เป็นการ กำหนดช่องว่างระหว่างตารางแต่ละช่องโดยกำหนดเป็นตัวเลข ( แนวนอน ) Cellpadding : เป็นการ กำหนดช่องว่างระหว่างบรรทัดของตารางแต่ละช่องโดยกำหนดเป็นตัวเลข ( แนวตั้ง )
- 41. Option ในการกำหนดตาราง Align : ใช้กำหนดการจัดวางตำแหน่งตาราง สามารถกำหนด การจัดวางได้ 2 ตำแหน่ง คือ Left กำหนดจัดวางตารางชิดซ้ายบรรทัด Right กำหนดจัดวางตารางชิดขวาบรรทัด Center กำหนดจัดวางตารางตรงกลาง Border : ใช้กำหนดให้มีการแสดงเส้นกรอบตารางและกำหนดความหนาของเส้นกรอบตาราง ระบุเป็น Pixel BorderColor : ใช้กำหนดสีให้กับเส้นกรอบตาราง ตัวอย่าง
- 42. Option ในการทำงานกับแถวของตาราง Align : ใช้กำหนดการจัดวางตำแหน่งข้อมูลทุกช่องของเซลล์ที่อยู่ในแถวนั้น กำหนดได้ 3 ตำแหน่ง คือ Left : กำหนดจัดวางข้อมูลชิดซ้ายช่องเซลล์ Center : กำหนดจัดวางข้อมูลอยู่กึ่งกลางช่องเซลล์ Left : กำหนดจัดวางข้อมูลชิดขวาช่องเซลล์ Bgcolor : เป็นการกำหนดสีพื้นภายในช่องเซลล์ของ ตารางที่อยู่ในแถวนั้น
- 43. การรวมแถวและคอลัมน์ในเซลล์ตาราง Rowspan : เป็นการกำหนดให้ช่องเซลล์นั้นมีความสูงเป็นจำนวนกี่เท่าของความสูงของแถวเดิม Colspan : เป็นการกำหนดให้ช่องเซลล์นั้นมีความกว้างเป็นจำนวนกี่เท่าของความกว้างของคอลัมน์เดิม Height : ใช้กำหนดความสูงของเซลล์ ( ตัวเลข , Pixel ) Width : ใช้กำหนดความกว้างของเซลล์ ( ตัวเลข , Pixel ) Bgcolor : เป็นการกำหนดสีพื้นภายในช่องเซลล์ของตา รางที่อยู่ในแถวนั้น
- 45. การใส่รูปภาพลงในเว็บเพจ 1. Bitmap(BMP) เป็นไฟล์รูปภาพในรูปแบบของ Windows เอง ไม่มีการบีบข้อมูล จึงทำให้ไฟล์มีขนาดใหญ่ ชนิดของรูปภาพที่สามารถนำมาตกแต่ง WebPages 3. Joint Photographic Experts Group(JPEG or JPG) เป็นไฟล์รูปภาพที่ถูกบีบขนาดเช่นกัน แต่คุณภาพจะด้อยลงตามตามขนาดที่บีบ เพียงแต่ไม่จำกัดจำนวนสี 2. Graphics Interchange Format(GIF) เป็นไฟล์รูปภาพที่มีการบีบขนาดข้อมูล สามารถบีบขนาดข้อมูลให้เล็กกว่าแบบ BMP ถึง 10 เท่าโดยที่คุณภาพไม่ลดลง แต่กำหนดสีได้เพียง 256 สีเท่านั้น มีอยู่ 2 ชนิด - เป็นไฟล์ GIF ทั่วไป - เป็นไฟล์ภาพเคลื่อนไหว หรือ GIF Animation
- 46. การใส่รูปภาพในเอกสาร รูปแบบ <Img Src = “ ชื่อไฟล์รูปภาพ . ชนิด ” alt=“ ข้อความกำกับภาพ ” > ชื่อไฟล์รูปภาพ . ชนิด : สำหรับชนิดจะเป็น GIF และ JPEG หรือ JPG โดยที่ไฟล์รูปภาพดังกล่าวจะต้องอยู่ในโฟลเดอร์เดียวกันกับ เอกสาร HTML แต่ถ้าอยู่คนละแหล่ง ให้กำหนดไดร์ฟและ โฟลเดอร์ของรูปภาพด้วย
- 47. การจัดวางตำแหน่งและขนาดของรูปภาพ Align : ช่วยในการกำหนดตำแหน่งให้กับรูปภาพ ได้แก่ Top จัดวางรูปภาพให้อยู่ในระดับบนของข้อความ Middle จัดวางรูปภาพให้อยู่ในระดับกลางของข้อความ Bottom จัดวางรูปภาพให้อยู่ในระดับล่างของข้อความ Left จัดวางรูปภาพให้อยู่ทางซ้ายของข้อความ Right จัดวางรูปภาพให้อยู่ทางขวาของข้อความ
- 48. รูปแบบของ Align Top Middle Bottom Left Right
- 49. การจัดวางตำแหน่งและขนาดของรูปภาพ Width ใช้กำหนดความกว้างของรูปภาพ มีหน่วยเป็น Pixels Height ใช้กำหนดความสูงของรูปภาพ มีหน่วยเป็น Pixels Border ใช้กำหนดกรอบให้กับรูปภาพ มีหน่วยเป็น Pixels Hspace ใช้กำหนดช่องว่างแนวนอนซ้ายกับขวาระหว่างรูปภาพกับข้อความ Vspace ใช้กำหนดช่องว่างแนวตั้งบนกับล่างระหว่างรูปภาพกับข้อความ
- 50. ตัวอย่าง ตัวอย่าง Height Width VSpace HSpace
- 51. การนำรูปภาพมาทำเป็นพื้นฉากหลัง รูปแบบ <Body Background = “ ชื่อไฟล์รูปภาพ . ชนิด ” > เช่น <Body Background = “ Cloud . Gif ”> ตัวอย่างงาน
- 53. ตัวอย่าง
- 54. การเชื่อมโยงเว็บเพจ ส่วนประกอบของการเชื่อมโยง 1. จุดเชื่อมโยง ( Link ) เป็นส่วนของเอกสารที่จะใช้เป็นจุดเชื่อมโยงไปยังส่วนอื่นๆ ซึ่งส่วนของเอกสารที่จะใช้เป็นจุดเชื่อมโยงนี้ อาจจะเป็นข้อความหรือรูปภาพก็ได้ 2. เป้าหมาย ( Target ) เป็นส่วนที่เรากำหนดให้มีการเชื่อมโยงไปถึง เมื่อมีการคลิกที่จุดเชื่อมโยงนั้น ซึ่งเป้าหมายนี้อาจอยู่ในเว็บเพจเดียวกัน , คนละเว็บเพจ หรือเว็บไซค์ต่างๆในอินเตอร์เน็ตก็ได้ จุดเชื่อมโยง คือ จุดเชื่อมโยงไปยังเนื้อความอื่นๆ เป้าหมาย คือ จุดหมายที่ต้องการเชื่อมโยงไปถึง
- 55. การสร้างจุดเชื่อมโยง สามารถกำหนดจุดเชื่อมโยงได้ 2 รูปแบบ 1. การสร้างจุดเชื่อมโยงให้กับข้อความ ( Text Link ) เป็น การกำหนดให้ข้อความใดๆ ในเอกสารเป็นจุดเชื่อมโยง 2 . การสร้างจุดเชื่อมโยงให้กับรูปภาพ (Graphic Link ) เป็นการกำหนดให้รูปภาพใดๆ ที่ต้องการให้เป็นจุดเชื่อมโยง
- 56. การสร้างจุดเชื่อมโยงให้กับข้อความ รูปแบบ <A HREF = Target > ข้อความจุดเชื่อมโยง </A> A HREF : Hypertext Reference เป็นการบอกให้รู้ว่าข้อ ความนี้มีการเชื่อมโยงไปยังตำแหน่งเป้าหมายที่กำหนด Target : เป้าหมายที่เราต้องการเชื่อมโยงไปถึง โดย
- 57. การสร้างจุดเชื่อมโยงให้กับรูปภาพ รูปแบบ <A HREF = Target><IMG SRC =“ ชื่อไฟล์ . ชนิด ” ></A> A HREF : Hypertext Reference เป็นการบอกให้รู้ว่าข้อ ความนี้มีการเชื่อมโยงไปยังตำแหน่งเป้าหมายที่กำหนด Target : เป้าหมายที่เราต้องการเชื่อมโยงไปถึง โดย
- 58. ลักษณะการเชื่อมโยงไปยังตำแหน่งต่างๆ สามารถกำหนดลักษณะการเชื่อมโยงได้ 3 แบบ คือ 1. การเชื่อมโยงภายในเว็บเพจเดียวกัน 2. การเชื่อมโยงไปยังเว็บเพจอื่น 3. การเชื่อมโยงไปยังเว็บไซต์บนอินเตอร์เน็ต
- 59. การเชื่อมโยงภายในเว็บเพจเดียวกัน การกำหนดจุดเชื่อมโยง การกำหนดเป้าหมาย <A Href = # ชื่อเป้าหมาย > ข้อความที่เป็นจุดเชื่อมโยง </A> <A Name = ชื่อเป้าหมาย > ข้อความที่ต้องการแสดง </A> ตัวอย่าง
- 60. ตัวอย่าง <body> <a name=top> <br ><a href= #top> กลับด้านบนเอกสาร </a> </body> ตัวอย่างงาน เอกสารอื่นๆ ทั่วไป
- 62. การเชื่อมโยงภายไปยังเว็บเพจอื่น <A Href = ชื่อไฟล์ . html> ข้อความจุดเชื่อมโยง </A> การเชื่อมโยงแบบระบุจุดเป้าหมาย <A Href = ชื่อไฟล์ . html # ชื่อเป้าหมาย > ข้อความจุดเชื่อมโยง </A> ตัวอย่าง
- 63. ตัวอย่าง Page ที่ 1 Page ที่ 2 ตำแหน่งเป้าหมาย กำหนดจุดเชื่อมโยงระบุเป้าหมาย
- 64. การเชื่อมโยงไปยังเว็บไซต์ <A Href = URL> ข้อความจุดเชื่อมโยง </A> URL : Uniform Resource Location เป็นรูปแบบมาตรฐาน ในการอ้างอิงตำแหน่ง Website และ Web page บนอินเตอร์เน็ต เช่น <a href=http://www.siamcom.co.th>Siam Computer</a>
- 67. การสร้างจุดเชื่อมโยงให้กับรูปภาพ <a href=target><img src=“ ชื่อไฟล์ . ชนิด ” ></a> เช่น <a href=“Test.html”> <img src=“siam.gif”> </a>
- 71. ตัวอย่าง 100,75 100,150 0,75 100,0 200,75 150 200 0,0 200,150
- 72. ตัวอย่าง การไฟฟ้านครหลวง SiamCom yahoo hunsa sanook 150 200
- 73. เฟรม ( FRAME) <Frameset> …</Frameset> เป็นคำสั่งที่ใช้กำหนดจำนวนกรอบและขนาดส่วนของหน้าต่างที่กำหนดไว้ <Frame> เป็นคำสั่งที่ใช้กำหนดว่าจะให้เฟรมนั้นแสดงข้อมูลอะไร หมายเหตุ : การใช้เฟรมมีข้อกำหนดว่าไม่ต้องใช้คำสั่ง < Body>…</Body> แต่ให้ใช้คำสั่ง <Frameset>...</Frameset> แล้วตามด้วยคำสั่ง <Frame>
- 74. โครงสร้างของเฟรม <HTML> </HTML> <HEAD> <TITLE> ชื่อหัวเรื่อง </TITLE> </HEAD> <FRAMESET คำสั่งเสริม = “ ค่าตัวเลข 1, ค่าตัวเลข 2 ,…”> <FRAME คำสั่งเสริม > <FRAME คำสั่งเสริม > : : </FRAMESET>
- 75. <Frameset> <FRAMESET คำสั่งเสริม = “ ค่าตัวเลข 1, ค่าตัวเลข 2 ,…”> Rows : ใช้แบ่งส่วนของหน้าต่างตามแนวแถว ขนาดของหน้าต่างขึ้นอยู่กับค่าตัวเลข Cols : ใช้แบ่งส่วนของหน้าต่างตามแนวคอลัมน์ ขนาดของหน้าต่างขึ้นอยู่กับค่าตัวเลข คำสั่งเสริม ค่าตัวเลข : จะเป็นตัวเลขบอกขนาด อาจระบุเป็นจุด Pixel หรือ หรือเปอร์เซ็นต์ของขนาดทั้งหมดก็ได้ เช่น Rows = “25%,30%,* ” หรือ Rows = “25%, 3 * ”
- 77. <Frame คำสั่งเสริม > SRC = URL : เป็นการอ้างอิงถึงชื่อไฟล์เว็บเพจ หรือรูปภาพ หรือตำแหน่งเว็บไซต์ในอินเตอร์เน็ต Name = ชื่อของเฟรม : เป็นการตั้งชื่อให้กับส่วนของหน้าต่างเฟรม เพื่อใช้ในการอ้างอิง เวลาเราเอาข้อมูลเข้ามาไว้ในเฟรม Scrolling = ค่าตัวเลือก ประกอบด้วย Yes : กำหนดให้ใช้แถบเลื่อน (Scroll bar) ได้ No : กำหนดไม่ให้มีการแสดงแถบเลื่อน (Scroll bar) Auto : กำหนดให้ใช้แถบเลื่อน (Scroll bar) ได้ตามค่าปกติ
- 78. ตัวอย่าง เอกสาร 1 (frame1.html) เอกสาร 2 (frame2.html) ตัวอย่าง เอกสารที่สร้างเฟรม (Main.html) 20% 80%
- 79. ตัวอย่างงาน 20% 60% 20% 20% 60% 20%
- 80. <Frameset คำสั่งเสริม > Frameborder = ตัวเลือก ประกอบด้วย Yes หรือ 1 กำหนดให้เฟรมมีกรอบ เป็นค่าปกติ No หรือ 0 กำหนดให้เฟรมไม่มีกรอบ Border = ตัวเลข เป็นการกำหนดความหนาให้กับกรอบ เฟรม Bordercolor = ชื่อสี
- 81. ตัวอย่างงาน ตัวอย่าง 30% 70% 20% 80%
- 83. ตัวอย่างงาน 80% 20% 70% 30%
- 85. การเชื่อมโยงข้อมูลบนเฟรม รูปแบบการตั้งชื่อให้กับเฟรม <FRAME SRC = URL NAME = ชื่อเฟรม > รูปแบบการเชื่อมโยงบนเฟรม <A HREF = URL TARGET = ชื่อเฟรม > ข้อความ </A>
- 86. รายละเอียดของคำสั่ง SRC = URL เป็นการอ้างอิงถึงชื่อไฟล์ . html , รูปภาพ หรือ ตำแหน่งเว็บไซต์บนอินเตอร์เน็ต สำหรับการแสดง HREF = URL เป็นการอ้างอิงถึงชื่อไฟล์ . html , รูปภาพ หรือ ตำแหน่งเว็บไซต์บนอินเตอร์เน็ต สำหรับเชื่อมโยง NAME = ชื่อเฟรม เป็นการตั้งชื่อให้กับส่วนหน้าต่าง เฟรม เพื่อใช้ในการอ้างอิงข้อมูลรูปภาพหรือที่ต้องการเชื่อมโยงมาไว้ในเฟรม
- 87. รายละเอียดของคำสั่ง Target = _Blank เป็นการวางเอกสารบนหน้าต่างที่บราวเซอร์เปิดขึ้นใหม่ Target = _Parent เป็นการวางเอกสารบนหน้าต่างที่บราวเซอร์ที่ถูกรีเซ็ตใหม่ Target = _Self เป็นการวางเอกสารบนหน้าต่างที่เชื่อมโยงข้อมูลขณะนั้น Target = _Top เป็นการวางเอกสารบนหน้าต่างบนสุดของเฟรม
- 88. การสร้างแบบฟอร์มในเว็บเพจ คำสั่งหลักในการสร้างแบบฟอร์ม <FORM>…..</FORM> เป็นการกำหนดให้โปรแกรมบราวเซอร์ทำการสร้างแบบฟอร์ม <INPUT> เป็นการกำหนดรูปแบบข้อมูลที่จะนำเข้าหรืกรอกลงแบบฟอร์ม <SELECT>…..</SELECT> เป็นการสร้าง Drop-Down Menu แสดงตัวเลือกที่ ต้องการทั้งหมดออกมา <TEXTAREA>…..</ TEXTAREA> เป็นการสร้าง Scrolling Text Box กำหนดพื้นที่สำหรับการพิมพ์ข้อมูลจำนวนมาก
- 89. <FORM> เป็นคำสั่งหลักในการสร้างแบบฟอร์มโดยแบบฟอร์มที่ได้มานั้นโปรแกรมบราวเซอร์จะทำการติดต่อรับแล้วส่งข้อมูลกับโปรแกรม CGI ที่เว็บเซิร์ฟเวอร์เพื่อทำการประมวลผลข้อมูล <Form Method = วิธีการส่งข้อมูล Action = ตำแหน่ง CGI > Method เป็นวิธีการการรับและส่งข้อมูลของแบบฟอร์มไปยังเซิร์ฟเวอร์ มี 2 วิธี Get ข้อมูลที่ได้รับจากบราวเซอร์จะถูกส่งผ่านการทำงานจากเซิร์ฟเวอร์ หลังจากนั้นจึงส่งข้อมูลให้โปรแกรม CGI ทำงาน Post ข้อมูลที่ได้รับจากบราวเซอร์จะถูกส่งโดยตรงไปยังโปรแกรม CGI โดยไม่ผ่านการทำงานจากเซิร์ฟเวอร์ Action ใช้ระบุตำแหน่งที่เก็บโปรแกรม CGI บน เซิร์ฟเวอร์เพื่อให้โปรแกรม บราวเซอร์ส่งข้อมูลต่อไปให้ทำการประมวลผล
- 90. < INPUT > เป็นคำสั่งที่ใช้กำหนดรูปแบบของชนิดข้อมูลที่จะนำเข้าในแบบฟอร์ม ซึ่งมีอยู่ 6 ชนิด 1. Text เป็นรูปแบบข้อมูลในลักษณะข้อความ (Text) 2. Password เป็นรูปแบบข้อมูลคล้าย Text แต่จะแสดงเป็น * 3. Radio เป็นรูปแบบข้อมูลในลักษณะของทางเลือก โดยจะแสดง เป็นรูปวงกลมโปร่ง ไว้ให้ผู้ใช้เลือก 4. Checkbox เป็นรูปแบบข้อมูลในลักษณะของทางเลือก โดยจะ แสดงเป็นรูปสี่เหลี่ยมโปร่งไว้ให้ผู้ใช้เลือก 5. Submit เป็นลักษณะการรับข้อมูลทั้งหมดในแบบฟอร์มทั้งหมดเพื่อ ส่งต่อไปยังเซิร์ฟเวอร์ 6. Reset เป็นการลบข้อมูลทั้งหมดในแบบฟอร์ม
- 91. การกำหนดรูปแบบข้อมูล TEXT < Input Type = Text Size = ความยาวของช่องรับข้อมูล Name = ชื่อของข้อมูล Maxlength = ความยาวสูงสุด > Type = Text เป็นการกำหนดรูปแบบของข้อมูลในลักษณะข้อความ Size เป็นการกำหนดขนาดความยาวของช่องว่างที่จะใช้รับข้อความ Name เป็นการกำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูลในแต่ละรายการ เพื่อส่งให้ โปรแกรม CGI ในเซิร์ฟเวอร์ Maxlength เป็นการกำหนดความยาวสูงสุดของข้อมูลที่สามารถรับเข้ามาได้
- 92. การกำหนดรูปแบบข้อมูล PASSWORD < Input Type = Password Size = ความยาวของช่องรับข้อมูล Name = ชื่อของข้อมูล Maxlength = ความยาวสูงสุด > Type = Password เป็นการกำหนดรูปแบบของข้อมูลในลักษณะข้อความแต่ บนจอจะแสดงเป็นเครื่องหมาย * แทนตัวที่พิมพ์ลงไป Size เป็นการกำหนดขนาดความยาวของช่องว่างที่จะใช้รับข้อความ Name เป็นการกำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูลในแต่ละรายการ เพื่อส่งให้ โปรแกรม CGI ในเซิร์ฟเวอร์ Maxlength เป็นการกำหนดความยาวสูงสุดของข้อมูลที่สามารถรับเข้ามาได้
- 93. การกำหนดรูปแบบข้อมูล RADIO < Input Type = Radio Name = ชื่อของข้อมูล Value = “ ข้อความ ” Checked > Type = Radio เป็นการกำหนดรูปแบบของข้อมูลในลักษณะทางเลือก โดยจะ แสดงเป็นรูปวงกลมโปร่ง ไว้ให้ผู้ใช้เลือก Name เป็นการกำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูลในแต่ละรายการ เพื่อส่งให้ โปรแกรม CGI ในเซิร์ฟเวอร์ Value เป็นการกำหนดข้อความล่วงหน้าให้กับข้อมูล Checked เป็นการกำหนดให้โปรแกรมบราวเซอร์ใช้ค่าในรายการเป็นค่าที่ถูก เลือกขณะนั้น
- 94. การกำหนดรูปแบบข้อมูล CHECKBOX < Input Type = Checkbox Name = ชื่อของข้อมูล Value = “ ข้อความ ” Checked > Type = Checkbox เป็นการกำหนดรูปแบบของข้อมูลในลักษณะทางเลือก โดยจะ แสดงเป็นรูปสี่เหลี่ยมโปร่ง ไว้ให้ผู้ใช้เลือก Name เป็นการกำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูลในแต่ละรายการ เพื่อส่งให้ โปรแกรม CGI ในเซิร์ฟเวอร์ Value เป็นการกำหนดข้อความล่วงหน้าให้กับข้อมูล Checked เป็นการกำหนดให้โปรแกรมบราวเซอร์ใช้ค่าในรายการเป็นค่าที่ถูก เลือกขณะนั้น
- 95. การกำหนดรูปแบบข้อมูลแบบ SUBMIT <Input Type = Submit Value = “ ข้อความ ” > Type = Submit : เป็นการกำหนดรูปแบบการรับข้อมูลทั้งหมดในแบบฟอร์มให้โปรแกรมบราวเซอร์เพื่อส่งต่อไปยังเซิร์ฟเวอร์โดยบราวเซอร์จะสร้างปุ่มตัวเลือกให้ Value : เป็นการกำหนดให้โปรแกรมบราวเซอร์สร้างปุ่มแสดง ข้อความตามที่เรากำหนด
- 96. การกำหนดรูปแบบข้อมูลแบบ RESET <Input Type = Reset Value = “ ข้อความ ” > Type = Reset : เป็นการกำหนดรูปแบบการลบข้อมูลทั้ง หมดในแบบฟอร์ม โดยบราวเซอร์จะสร้างปุ่มตัวเลือกให้ Value : เป็นการกำหนดให้โปรแกรมบราวเซอร์สร้างปุ่มแสดง ข้อความตามที่เรากำหนด
- 97. <SELECT> <Select Name = ชื่อของข้อมูล Size = จำนวนบรรทัด > <Option> ข้อความตัวเลือกที่ 1 <Option> ข้อความตัวเลือกที่ 2 <Option> ข้อความตัวเลือกที่ ... ... </Select> เป็นการสร้างรูปแบบของข้อมูลนำเข้าที่มีรายการตัวเลือกหลาย รายการ โดยมีลักษณะเป็น Drop Down Menu แสดงตัวเลือกที่ ต้องการทั้งหมดออกมา
- 98. โดยที่ Select : เป็นคำสั่งการแสดงตัวเลือกหลายรายการ หรือ Drop Down Menu Name : เป็นการกำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูลในแต่ละรายการ เพื่อส่งให้โปรแกรม CGI ในเซิร์ฟเวอร์ Size : เป็นการกำหนดจำนวนบรรทัดที่ต้องการแสดงใน Drop Down Menu Option : เป็นการกำหนดรายการตัวเลือกให้แก่ผู้ใช้ โดยการกำหนดข้อความตัวเลือกรายการต่างๆที่ต้องการ
- 99. <TEXTAREA> <Textarea Name = ชื่อของข้อมูล Rows = จำนวนบรรทัด Cols = ความกว้าง > ข้อความที่ต้องการให้ปรากฏในกรอบพื้นที่ </Textarea> เป็นการสร้างรูปแบบของข้อมูลนำเข้าในลักษณะของ Scrolling Text Box โดยการกำหนดพื้นที่สำหรับการพิมพ์ ข้อมูลจำนวนมากเพื่อเป็นคำอธิบายหรือข้อแนะนำ
- 100. โดยที่ Textarea : เป็นคำสั่งการกำหนดพื้นที่สำหรับการการพิมพ์ข้อมูล จำนวนมาก Name : เป็นการกำหนดชื่อของข้อมูล ที่ใช้เก็บข้อมูลในแต่ละ รายการ เพื่อส่งให้โปรแกรม CGI ในเซิร์ฟเวอร์ Rows : เป็นการกำหนดจำนวนบรรทัดของกรอบพื้นที่ที่จะ ป้อนข้อมูล Cols : เป็นการกำหนดขนาดความกว้างจำนวนคอลัมน์ของ กรอบพื้นที่ที่จะป้อนข้อมูล ข้อความที่ต้องการให้ปรากฏในกรอบพื้นที่ : ข้อความดังกล่าวนี้จะพิมพ์หรือไม่ก็ได้
- 102. การทำ Effect ขณะเปลี่ยน Page แทรกในแท็ก head <meta http-equiv=“ page-exit ” content=“RevealTrans(duration= เวลา , transition = รูปแบบ )”> เวลา : เป็นวินาที รูปแบบ : เป็นตัวเลข 0-23 (23 เป็นแบบ Random) เมื่อออกจาก Page
Notes de l'éditeur
- Size = เป็นการกำหนดความหนาให้กับเส้น ปกติอยู่ที่ 2 pixel Width = เป็นการกำหนดความยาวให้กับเส้น อาจจะระบุเป็น % ก็ได้ ปกติไม่ระบุก็จะเต็มจอ Align = เป็นการกำหนดตำแหน่งการจัดวางของเส้น Left จัดวางตำแหน่งเส้นนชิดซ้ายบรรทัด Center จัดวางตำแหน่งเส้นกึ่งลางบรรทัด Right จัดวางตำแหน่งเส้น ชิดขวาบรรทัด Noshade เป็นการกำหนดแสดงเส้นทึบไม่มีการแรเงาของเส้น