งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

HTML PHP MySQL. HTML ส่วนประกอบของ webpage 1. ส่วน Header ประกอบด้วย -ชื่อหน่วยงาน -ตราหรือสัญลักษณ์ของหน่วยงาน -หน้าที่หรือวัตถุประสงค์ของหน่วยงาน 2.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "HTML PHP MySQL. HTML ส่วนประกอบของ webpage 1. ส่วน Header ประกอบด้วย -ชื่อหน่วยงาน -ตราหรือสัญลักษณ์ของหน่วยงาน -หน้าที่หรือวัตถุประสงค์ของหน่วยงาน 2."— ใบสำเนางานนำเสนอ:

1 HTML PHP MySQL

2 HTML

3 ส่วนประกอบของ webpage 1. ส่วน Header ประกอบด้วย -ชื่อหน่วยงาน -ตราหรือสัญลักษณ์ของหน่วยงาน -หน้าที่หรือวัตถุประสงค์ของหน่วยงาน 2. ส่วน Body ประกอบด้วย -เส้นแบ่งข้อความ -รายการของหัวข้อหรือเนื้อหา -ภาพประกอบ -ปุ่มหรือ icon

4 ส่วนประกอบของ webpage(ต่อ) 3. ส่วน footer ประกอบด้วย - address ของผู้สร้าง(webmaster) และหน่วยงาน -วันเวลาที่สร้างและปรับปรุงข้อมูล -คำประกาศลิขสิทธิ์ -ตราหรือสัญลักษณ์ของหน่วยงาน -คำประกาศหรือเจตนารมย์ของหน่วยงาน

5 องค์ประกอบของเอกสาร HTML เอกสาร HTML มีองค์ประกอบที่สำคัญ 2 ส่วน คือ 1.ข้อความที่ให้แสดงบนจอภาพ 2.ข้อความที่เป็นคำสั่ง เรียกว่า HTML tag

6 HTML Tag HTML Tag ประกอบด้วยเครื่องหมาย (Right angle bracket ) เช่น –head tag: –title tag: –body tag: ชื่อ tag ที่เขียนอยู่ในเครื่องหมาย <> นี้จะ เขียนเป็นตัวใหญ่หรือตัวเล็กก็ได้แต่นิยม เขียนตัวใหญ่เพื่อให้เห็นความแตกต่าง

7 ชนิดของ HTML Tag ชนิดของ HTML Tag มี 2 ชนิด 1. tag คู่ (Paired tag) 2. tag เดี่ยว (Single tag)

8 1. Tag คู่ (Paired Tag ) tag คู่(Paired tag) ใส่ tag เปิดไว้ หน้าข้อความ และใส่ tag ปิด(ลักษณะเหมือน tag เปิดแต่มีเครื่องหมาย / นำหน้า) ไว้หลัง ข้อความ ข้อความ เช่น ……… ………

9 tag เดี่ยว (Single tag) เป็น tag ที่มี เฉพาะ Tag เปิดเท่านั้น ไม่มี tag ปิด เช่น ใช้สำหรับขึ้นบรรทัดใหม่ ใช้ตีเส้นตามแนวนอน ใช้แทรกรูปภาพ 2. Tag เดี่ยว (Single Tag)

10 โครงสร้างพื้นฐานของ HTML ชื่อหัวเรื่องที่ต้องการแสดง คำสั่งหรือข้อมูลที่ต้องการแสดง

11 คำสั่งพื้นฐานของ HTML … กำหนดจุดเริ่มต้น และสิ้นสุดเอกสาร HTML … กำหนดส่วนหัวเรื่อง ของเอกสาร HTML ภายในคำสั่งนี้จะมีคำสั่ง … … กำหนดหัวเรื่องของ เอกสารบน title bar ของโปรแกรม Browser และจะปรากฎในคำสั่ง bookmark ของ โปรแกรม Browser ด้วย

12 คำสั่งพื้นฐานของ HTML(ต่อ) … กำหนดบล็อคที่ใช้ บรรจุข้อมูลต่างๆ ของเอกสาร HTML เช่น ข้อความ รูปภาพ ตาราง แบบฟอร์ม รวมทั้ง tag ต่าง ๆ ส่วนนี้เป็นส่วนที่โปรแกรม Browser นำไปแสดงเป็นผลลัพธ์บนจอภาพ

13 ตัวอย่าง This is my first home’s page HELLO WORLD !

14 กฎในการเขียนคำสั่ง HTML Tag ภาษา HTML อยู่ในเครื่อง หมายเท่านั้น ชื่อ Tag จะใช้ตัวอักษรตัวใหญ่หรือเล็กก็ ได้ เช่น หรือ พิมพ์เอกสาร HTML ติดต่อกันทั้ง ข้อความ และคำสั่ง พิมพ์แยกบรรทัด หรือ พิมพ์เว้นช่องว่าง ก็ได้

15 คำสั่งอธิบายโปรแกรม แทรกคำอธิบายโปรแกรม หรือหมายเหตุ ลงในโปรแกรมโดยใช้ เมื่อ massage คือข้อความที่ต้องการให้ เป็นคำอธิบาย ตัวอย่าง

16 การจัดข้อความในเอกสาร HTML คำสั่งขึ้นบรรทัดใหม่ คำสั่งให้ขึ้นย่อหน้าใหม่ คำสั่งกำหนดบล็อคข้อความ คำสั่งจัดรูปแบบข้อความ คำสั่งจัดรูปแบบข้อความให้อยู่ตรงกลาง คำสั่งควบคุมให้แสดงข้อความ แบบต่อเนื่อง

17 คำสั่งขึ้นบรรทัดใหม่ (Line Break) ใช้คำสั่งของ HTML คือ tag เดี่ยว ซึ่งมีรูปแบบดังนี้ ข้อความ ตัวอย่าง Department of Computer Science Faculty of Science Burpaha University

18 คำสั่ง ขึ้นย่อหน้าใหม่ (Paragraph Break) ใช้คำสั่งของ HTML คือ Tag คู่ คล้ายกับการขึ้นบรรทัดใหม่ แต่จะเว้น บรรทัดให้ 1 บรรทัด มีรูปแบบคือ ข้อความ ตัวอย่าง Seree Chinodom Department of Computer Science Faculty of Science Burapha University, Chonburi

19 คำสั่งขึ้นย่อหน้าใหม่ (ต่อ) ใช้ Tag คู่ จะมี tag เสริมที่ใช้ประกอบเพื่อ ใช้ในการจัดข้อความ เราเรียก tag เสริมว่า attribute มีรูปแบบดังนี้ ค่าแทน Position ได้แก่ - LEFT จัดข้อความชิดซ้ายของจอภาพ - RIGHT จัดข้อความชิดขวาของจอภาพ - CENTER จัดข้อความกลางจอภาพ เช่น Burapha University

20 คำสั่งกำหนดบล็อคข้อความ ใช้ tag คู่ เน้นข้อความ เพื่อ แยกจากเนื้อหาที่มาก่อน มีรูปแบบดังนี้ ข้อความ ตัวอย่าง This is the blockquote demo Department of Computer science, Faculty of Science, Burapha University. Bangsaen, Chonburi Thailand

21 คำสั่งจัดรูปแบบข้อความให้ตรง ตามเอกสารเดิม(Preformatted) ใช้ tag คู่ โดยข้อความใด ๆ ที่จัด วางภายใน tag นี้ จะถูกโปรแกรม Browser แสดงผลตามที่ได้จัดไว้ ข้อความ ตัวอย่าง B U R A P H A U N I V E R S I T Y

22 คำสั่งจัดข้อความให้อยู่ตรงกลาง บรรทัด(Center) ใช้ tag คู่ มีรูปแบบดังนี้ ข้อความ ตัวอย่าง This is text with CENTER tag

23 การตีเส้นตรงแนวนอนในเอกสาร HTML การตีเส้นตรงแนวนอน (Horizontal line) ใช้ tag เดี่ยว มีรูปแบบ ดังนี้ ตัวอย่าง The following is horizontal line The rest of this is just more text

24 การกำหนดลักษณะของเส้นตรง แนวนอน ใช้ tag เดี่ยว กำหนด ความหนา ความ ยาว ตำแหน่งและแสดงผลเส้นทึบของเส้นได้ดังนี้


SIZE = n ความหนาของเส้น ขนาดปกติ 2 pixel WIDTH = m กำหนดความยาวของเส้น ถ้าไม่ระบุจะยาว เต็มจอภาพ อาจระบุเป็น % ก็ได้ ALIGN = LEFT|RIGHT|CENTER กำหนดตำแหน่ง เส้นตรงแนวนอน หากเส้นยาวไม่เต็มจอภาพ กำหนดได้ เป็น LEFT, RIGHT, CENTER NOSHADE กำหนดเส้นตรงแนวนอน แบบทึบไม่มีเงา

25 ตัวอย่างการกำหนดเส้นตรง แนวนอน



26 การกำหนดหัวเรื่อง(Heading) กำหนดหัวเรื่องให้มีขนาดแตกต่างกันได้ 6 ระดับโดยใช้ Tag คู่ ถึง มี รูปแบบคือ ข้อความ ตัวอย่าง Burapha University

27 การกำหนดรูปแบบตัวอักษร ใช้ tag ที่กำหนดคุณลักษณะของ ตัวอักษรกำกับข้อความที่ต้องการ แบ่ง ตามการใช้งานมี 2 ประเภท คือ 1. Physical Character Styles 2. Logical Character Style

28 1. Physical Character style กำหนดรูปแบบบังคับให้กับข้อความ คุณลักษณะของตัวอักษรแบบที่ต้องการ แสดงบนจอภาพ เรียกว่า Fixed type style รูปแบบคำสั่ง ตัวเข้ม(Bold)... ตัวเอน (Italic) … ตัวขีดเส้นใต้(Underline) … ตัวกระพริบ... ตัวอักษรกว้างเท่ากันทุกตัว(Typewriter text) …. ตัวขีดทับข้อความ... หรือ...

29 2. Logical Character Style ผลจากการอ่านจากโปรแกรม Browser ที่ต่าง ชนิดกันอาจจะแสดงผลไม่เหมือนกัน … กำหนดรูปแบบ ตัวอักษรให้กับข้อมูลเกี่ยวกับ ที่อยู่ หมายเลข โทรศัพท์ และ address … ตัวอักษรเอียงที่เน้นข้อความที่ เป็นคำพูด คำสนทนา(Citeation) … ตัวอักษรเอียงที่เน้นข้อความที่เป็น คำพูด วลี (Emphasize) …. ตัวอักษรแบบคอมพิวเตอร์ (Computer Code)

30 Logical Character Style(ต่อ) … ตัวอักษรหนา …. ตัวอักษรที่เน้นข้อความและค่า ตัวเลข …. ตัวอักษรแบบตัวห้อย …. ตัวอักษรแบบตัวยกขึ้น …. ตัวอักษรใหญ่ …. ตัวอักษรแบบตัวเล็ก

31 การจัดวางตำแหน่งข้อความ กำหนดตำแหน่งข้อความให้ชิดซ้าย ขวา หรืออยู่กึ่งกลางจอภาพ ให้กำหนด attribute ดังนี้ ALIGN=LEFT | RIGHT | CENTER ตัวอย่าง Dept. of Computer Science Dept. of Computer Science Dept. of Computer Science

32 การกำหนดขนาดของตัวอักษร (Size) จะไม่กำหนดขนาดตัวอักษรเป็นพอยต์ แต่จะกำหนดเป็นความสูง มี 7 ขนาด โดยใช้ตัวเลข 1-7 มีรูปแบบดังนี้ ข้อความ เมื่อ n เป็นเลขจำนวนเต็มบวก คือขนาดเล็กที่สุด 7 คือขนาดใหญ่ที่สุด

33 การกำหนดขนาดของตัวอักษร (ต่อ) การกำหนดขนาดตัวอักษรแบบมาตรฐานทั้ง เอกสาร ซึ่งสามารถเพิ่มหรือลดขนาดได้ ภายหลังโดยใช้ มีรูปแบบดังนี้ ข้อความ ตัวอย่าง Burapha University Bangsaen Chonburi>

34 การกำหนดแบบตัวอักษร หากต้องการให้โปรแกรม Browserแสดง แบบตัวอักษรหลายแบบใน Web page เดียวกันจะต้องใช้ tag สำหรับกำหนด Font ซึ่งมีรูปแบบดังนี้ ตัวอย่าง มหาวิทยาลัยบูรพา Burapha University

35 การกำหนดสีให้ตัวอักษร(Color) การกำหนดสีให้ตัวอักษรมี 2 กรณี 1. การกำหนดสีให้ตัวอักษรเฉพาะ ข้อความ 2. การกำหนดสีให้ตัวอักษรทั้งเอกสาร

36 ความหมายของตัวเลขและการ ผสมสี ตัวเลขแทนสีที่ใช้เป็นเลขฐานสิบหก (0-9 และ A-F) จำนวน 3 ชุด แต่ละชุดมีค่า 00-FF - ชุดที่ 1 แทนสีแดง (RED) - ชุดที่ 2 แทนสีเขียว (GREEN) - ชุดที่ 3 แทนสีน้ำเงิน (BLUE) RGB (Red GreenBlue) เป้นแม่สีทาง วิทยาศาสตร์ และสามารถนำมาใช้ในระบบ คอมพิวเตอร์ด้วย

37 ตารางตัวอย่างรหัสสี สี รหัสสี ขาว#FFFFFF น้ำเงิน#0000FF ดำ # ฟ้า #4D4DFF เทา #7F7F7F ชมพู #CC3299 แดง #FF0000 เขียว #00FF00 เหลือง #FFFF00

38 1. การกำหนดสีให้กับตัวอักษร เฉพาะข้อความ กำหนดใน tag มีรูปแบบดังนี้ กำหนดสี จากเปอร์เซ็นต์การผสมสี กำหนดสี จากสีมาตราฐาน ตัวอย่าง This is Red color next is blue This is Green Color

39 2. การกำหนดสีให้กับตัวอักษรทั้ง เอกสาร กำหนดใน tag ซี่งมีรูปแบบ ดังนี้ กำหนดสีจาก เปอร์เซ็นต์การผสมสี กำหนดสีจากชื่อสี มาตราฐาน ตัวอย่าง This is testing Text Color All text in this page is red color by body text = Red Text

40 การใช้ตัวอักษรพิเศษ (Special Character) พิมพ์ข้อความระหว่าง tag และ ได้ทั้งตัวอักษรและตัวเลข รวมทั้ง สัญลักษณ์ต่าง ๆ ยกเว้นเครื่องหมาย “ และ & ใช้คำสั่งพิเศษ สำหรับแทนสัญลักษณ์เหล่านี้ ใช้รหัสควบคุมซึ่งระบุได้ 2 วิธี ดังนี้ 1. ระบุชื่อสัญลักษณ์ที่ต้องการ (Name Entities) 2. ระบุโดยใช้ ASCII Code

41 1. ระบุชื่อสัญลักษณ์ที่ต้องการ ชื่อสัญลักษณ์ที่ระบุจะขึ้นต้นด้วย เครื่องหมาย & (Ampersand) แล้วตาม ด้วยชื่อย่อของสัญลักษณ์ " แสดงเครื่องหมาย quotation mark (“) < แสดงเครื่องหมาย Less than (<) > แสดงเครื่องหมาย greater than (>) & แสดงเครื่องหมาย ampersand (&) แสดงการเว้นวรรค 1 ตัวอักษร ® แสดงเครื่องหมายพิเศษเครื่องหมาย ลงทะเบียน

42 2. ระบุโดยใช้รหัส ASCII เริ่มต้นด้วยเครื่องหมาย & แล้วตามด้วย เครื่องหมาย # และค่าของตัวเลขรหัส ASCII ตัวอย่าง Symbol of Copyright is :© Symbol of Registration is :®

43 การแสดงผลแบบรายการ (List) ด้วยภาษา HTML รูปแบบ First Item in List Second Item in List Third Item in List

44 การแสดงผลรายการแบบลำดับ ตัวเลข(order Lists) ใช้แสดงรายการที่เรียงลำดับ หรือจัดลำดับ ความสำคัญของหัวข้อ ใช้ตัวเลข หรือ ตัวอักษรเรียง ในการเรียงก็ได้ มีรูปแบบดังนี้ Item number one Item number two Item number tree

45 ตัวอย่าง Oranges Peaches Grapes ได้ผลลัพธ์คือ a. Oranges b. Peaches c. Grapes

46 ตัวอย่าง Oranges Peaches Grapes ได้ผลลัพธ์คือ I. Oranges II. Peaches III. Grapes

47 ตัวอย่าง Oranges Peaches Grapes Apples ได้ผลลัพธ์คือ 3. Oranges 4. Peaches 7. Grapes 8. Apples

48 การแสดงผลรายการแบบไม่มี ลำดับ(Unordered List) ใช้แสดงรายการหัวข้อย่อยโดยไม่มีหน่วยนับ นำหน้า แต่จะเป็น bullet กำหนดรูปแบบได้ โดยระบุหลังคำสั่ง TYPE ต่อจาก เป็น disc(วงกลมทึบ), circle, square รูปแบบ First Item Second Item Third Item

49 ตัวอย่าง These are name of CS Staff Seree Chinodom Tawatchai Iempairoj Jira Jaturanon Surangkana Thumlikhit Others

50 Directory Lists เป็นการแสดงผลข้อมูลเหมือนกับ, แต่จะถูกจำกัดด้วยตัวอักษรไม่ เกิน 24 ตัว มีรูปแบบดังนี้ message massage message

51 Menu Lists แสดงรายการต่างๆแบบไม่มีตัวเลข แต่มีหัวข้อ เป็นสัญลักษณ์ (Bullet) แต่การแสดงผลข้อมูล จะกะทัดรัดกว่าการใช้ tag มีรูปแบบดังนี้ message massage message

52 NESTED LISTS few New England states: Vermont New Hampshire One Midwestern state: Michigan

53 การจัดการรูปภาพ ด้วยภาษา HTML รูปภาพที่สามารถนำมาใช้ในเอกสาร HTML มี 2 ชนิด คือ 1. รูปภาพชนิด Graphic Interchange Format (GIF) 2. รูปภาพชนิด Joint Photographic Experts Group (JPEG หรือ JPG)

54 GIF Format GIF (Graphic Interchange From) พัฒนาโดย CompuServe นิยมใช้กับภาพถ่าย ภาพการ์ตูน ความละเอียดได้สูง x 64000จุด เก็บรายละเอียดได้ไม่เกิน 8 บิต แสดงสีได้ 256 สี ใช้แสดงภาพเคลื่อนไหว

55 JPEG Format JPEG (JPG) -Joint Protographic Expert Group เป็นไฟล์ที่ผ่านการบีบอัดข้อมูลมาก่อน ในอัตรา 10:1 ขนาดของการบีบอัด มี 3 ระดับ HIGH, MIDDLE, LOW ภาพที่นำมาใช้เป็นภาพนิ่งหรือภาพถ่ายเท่านั้น แสดงสีได้ 16.7 ล้านสี มีความชัดเจนสูง

56 การแทรกภาพลงในเอกสาร ใช้ tag เดี่ยว ได้แก่ “ข้อความ” ภาพควรเป็นชนิด GIF หรือ JPEG เพิ่มแอตทริบิวต์ ALT= “ข้อความ“ ต่อจาก SRC = “ไฟล์รูปภาพ“ ผู้ใช้บราวเซอร์แบบ text mode รูปภาพที่กำหนด ไว้จะแทนด้วย [IMAGE] เมื่อกำหนด ALT = “ข้อความ“

57 การใส่ข้อความแสดงผลแแบบ Text ตัวอย่าง “Rock

58 การวางตำแหน่งรูปภาพ HTML กำหนดการวางรูปภาพเพื่อแสดง ผลได้ 2 แบบคือ 1) แบบแนวนอน ประกอบด้วย Left, Right 2) แบบแนวตั้ง มี 3 ระดับ เสมอบน ใช้ top และ texttop กึ่งกลางใช้ middle และ abdmiddle เสมอล่างใช้ baseline, bottom, absbottom เขียนภายใต้แอททริบิวต์ ALIGN เช่น

59 การใส่ภาพลงใน WEB กึ่งกลางจอภาพ แอตทริบิวต์ ALIGN ไม่สามารถกำหนดภาพไว้ กลางจอภาพได้ ต้องใช้คำสั่ง... การกำหนดขนาดของภาพจะกำหนดด้วยแอตทริ บิวต์ WIDTH=ความกว้าง HEIGHT=ความสูง เขียนไว้หน้าหรือต่อท้าย SRC Ex.

60 การปรับขนาดภาพ การปรับขนาดของภาพให้ใหญ่หรือเล็กตาม สัดส่วน ให้กำหนดแอททริบิวต์ ความกว้างของ รูปภาพเป็นจำนวนเปอร์เซ็นต์ของภาพอย่าง เดียว เช่น WIDTH=50% หรือ WIDTH=150%

61 การใส่ภาพลงใน WEB การใส่ภาพที่มีขนาดเท่ากันซ้อนกัน โดย ภาพแรกจะเกิดชั่วขณะแล้วภาพที่สองจะ ปรากฏ ใช้แอตทริบิวต์ LOWSRC=“รูปภาพ“ ตัวอย่าง

62 การสร้างจุดเชื่อมโยง (Link) ด้วยภาษา HTML กำหนดให้เชื่อมโยงในเอกสารเดียวกันหรือ หรือต่างเอกสาร หรือ ต่างที่อยู่ ได้ การเชื่อมโยงเอกสารใน HTML แบ่งได้ 2 ประเภท คือ 1. การเชื่อมโยงกับข้อความ (Text Link) 2. การเชื่อมโยงกับรูปภาพ (Graphic Link)

63 1. การเชื่อมโยงกับข้อความ (Text Link) ใช้ เขียน tag Anchor และ แอตทริบิวต์ HREF (Hypetext REFerence) รูปแบบ ข้อความ หากต้องการให้ข้อความที่เชื่อมโยงไม่มีการขีด เส้นใต้ ให้ใช้ attribute style ร่วมกับ tag Anchor ดังนี้ ข้อความ

64 การเชื่อมโยงข้อมูลภายในแฟ้ม เอกสารเดียวกัน มีขั้นตอนดังนี้ 1. การสร้างเป้าหมายเพื่อใช้เป็นจุด เชื่อมโยง ด้วยคำสั่งดังนี้ โดย tag ไม่ต้องมี tag ปิด 2. เชื่อมโยงด้วย tag Anchor โดยใช้ เครื่องหมาย # นำหน้าชื่อเป้าหมาย ข้อความ

65 การเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร 1.ข้อความที่จะเชื่อมโยงอยู่ต่างแฟ้มแต่อยู่ ในโฮสต์เดียวกัน ข้อความ 2. อยู่ต่าง URL ข้อความ ตัวอย่าง Yahoo Site

66 การกำหนดสีให้กับข้อความที่มีการ เชื่อมโยง มีตัวเลือก ที่ใช้งานดังนี้ LINK เป็นสีของตัวอักษรก่อนมีการเชื่อมโยง ALINK เป็นสีของตัวอักษรขณะถูกเลือก VLINK เป็นสีของตัวอักษรหลังจากการเชื่อมโยง ข้อมูลเรียบร้อยแล้ว โดยตัวเลือกทั้ง 3 จะต้องกำหนด รูปแบบสีของตัวอักษร รูปแบบ

67 ตัวอย่าง *** ค่า default คือ LINK=สีน้ำเงิน ALINK=สีแดง VLINK= สีม่วง

68 2. การใช้ภาพเป็นจุดเชื่อมโยง ให้เพิ่มคำสั่ง เข้าไปใน tag Anchor รูปแบบ

69 Image Links Image Links ตัวอย่าง

70 การใช้ mailto เป็นโปรโตคอลที่ใช้สำหรับการสื่อสารข้อมูล แบบจดหมายอีเล็กทรอนิกส์ รูปแบบ ตัวอย่าง Address your comment or suggestions at

71 การกำหนดลวดลายให้กับ Background สามารถกำหนดลวดลาย (Pattern) ให้กับ Background ได้โดยใช้รูปภาพได้ แต่รูปภาพ นั้นไม่ควรมีลวดลายมากเกินไป กำหนดโดยแอตทริบิวต์ BACKGCROUND = “ชื่อแฟ้มรูปภาพ” ลงในส่วนของ tag BODY รูปแบบ

72 การสร้างตาราง (Table) ด้วยภาษา HTML Table ประกอบด้วยแถว (row) และคอลัมน์ (col) จุดตัดของเรียกว่า cell ซึ่งใช้บรรจุ ข้อมูล คำสั่งที่ใช้สร้างตาราง... สำหรับใช้เริ่มต้นการสร้าง และจบการสร้างตาราง โดยจะไม่มี เส้นแบ่ง cell … สำหรับใช้ เริ่มต้นการสร้างและจบการสร้างตาราง โดยจะมี เส้น แบ่ง Cell แสดงให้เห็น... ใช้กำหนดแถวของตาราง (Table Row)

73 คำสั่งสร้างตาราง(ต่อ)... กำหนดส่วนของข้อมูลลง cell (Table Data) โดยข้อมูลจะอยู่ระหว่าง คำสั่ง และ... ใช้เหมือน tag... แต่ ตัวอักษรที่ได้จะเป็นตัวเข้ม มักใช้เป็นหัวตาราง(Table Heading) ใช้เขียนข้อความอธิบายตาราง โดยเขียนให้ อยู่ด้านบนหรือด้านล่างของตารางก็ได้ ถ้าไม่กำหนดจะเป็นการกำหนดให้คำอธิบายอยู่ด้านบนของ ตาราง

74 tag tag ข้อความ ……..

75 การตีกรอบตาราง คำสั่ง... เป็นการ สร้างตารางที่ไม่มีเส้น การกำหนดเส้นในตารางใช้ แอตทริบิวต์ BORDER กำหนดลงในคำสั่ง ดังนี้ …….

76 ตัวอย่าง Table Demo ตาราง 2 x 2 พร้อมเส้นกรอบ เสรี ธวัชชัย วิชัย ถมกนก

77 การปรับขนาดความกว้างของตาราง เพิ่ม แอตทริบิวต์ WIDTH = x% ลงใน คำสั่งเปิด ของ tag โดยที่ x แทนความกว้างของแถวของตารางที่จะ แสดงบนจอภาพ

78 การปรับขนาดความสุงของตาราง เพิ่ม แอตทริบิวต์ HEIGHT = x% ลงใน คำสั่งเปิด ของ tag โดยที่ x แทนความสูงของแถวของตารางที่จะ แสดงบนจอภาพ

79 การจัดตำแหน่งของข้อมูลใน cell การจัดข้อมูลในเซลทำได้ 2 แบบคือ แนวนอน ได้แก่ LEFT,RIGHT,CENTER แนวตั้ง ได้แก่ TOP, BUTTON, MIDDLE ใน tag เพิ่ม แอตทริบิวต์ ALIGN= สำหรับแนวนอน VALIGN= สำหรับแนวตั้ง รูปแบบ …

80 ROWSPAN แอตทริบิวต์ ROWSPAN ใช้กำหนด ความสูงเป็นจำนวนเท่าของแถวปกติ ใช้ กับ tag ตัวอย่าง Item1 Item2 Item3 Item4 Item5

81 COLSPAN แอตทริบิวต์ COLSPAN ใช้ปรับขนาดของ ความกว้างคอลัมน์ในตารางให้มีขนาดเป็น จำนวนเท่าของของขนาดความกว้างปกติ ใน tag ตัวอย่าง Item1 Item2 Item3 Item4 Item5

82 CELLPADDING แอตทริบิวต์ CELLPADDING ใช้กำหนด พื้นที่การแสดงข้อมูล ภายในตาราง ปกติจะกำหนดค่า cellpadding เป็น 0 ซึ่งพื้นที่ในการแสดงข้อมูลในตาราง เท่ากับจำนวนตัวอักษรที่แสดงเท่านั้น ถ้ากำหนดให้มีค่ามากจะมีพื้นที่เป็นที่ว่าง มากขึ้น

83 CELLSPACING แอตทริบิวต์ CELLSPACING ใช้กำหนด ขนาดเส้นตาราง ปกติจะกำหนดค่า cellspacing เป็น 0 ถ้ากำหนดให้มีค่ามากจะมีขนาดเส้น ตารางมากขึ้น

84 การใส่ภาพลงในตาราง ให้บรรจุคำสั่งอ่านภาพ คือ ลงในคำสั่งของตาราง กรณีที่ต้องการปรับขนาดของรูปภาพให้ มีขนาดเหมาะสมกับตาราง ให้ใช้คำสั่ง WIDTH=x% และ HEIGHT=y% ลง ในคำสั่ง

85 การสร้างเฟรม (Frame) ด้วยภาษา HTML ใช้ Tag … กำหนดให้ Browser แสดงผลแบบเฟรม กำหนดขนาดของเฟรม ใช้ attributes 2 ตัวคือ ROWS และ COLS ROWS เป็น attribute แบ่งเฟรมตามแนวนอนตามค่า ที่ กำหนด ROWS = “lists” COLS เป็น attribute แบ่งเฟรมตามแนวตั้งตามค่า ที่ กำหนด COLS = “lists” Lists เป็นชุดค่าตัวเลขที่ใช้กำหนดขนาดให้กับเฟรมตาม แนวนอนหรือแนวตั้ง ถ้ามีหลายค่าจะคั่นด้วยเครื่องหมาย จุลภาค

86 การแบ่งจอภาพ เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนมี ข้อมูลและการทำงานที่เป็นอิสระจากกัน การสร้างเฟรม มีคำสั่งที่ใช้ร่วมกันอยู่ 3 คำสั่ง ดังนี้ … กำหนดการแสดงผลแบบเฟรม กำหนดการแสดงเฟรมแต่ละเฟรม … เป็นแท็กที่ จะแสดงก็ต่อเมื่อ โปรแกรม Browser ไม่ สนับสนุนการแสดงผลแบบเฟรม

87 สามารถสร้างเฟรมซ้อนภายใน ได้ หรืออาจจะมี แท็ก หรือ อยู่ภายในได้ ในเอกสาร HTML ที่มีการใช้แท็ก แล้วจะไม่มี แท็ก ตัวอย่าง This is frame Demo Tag Tag

88 การกำหนดขนาดของเฟรม การกำหนดค่าของ lists มีวิธีกำหนด 3 แบบคือ 1. กำหนดค่าด้วย pixel ต้องดูความละเอียดของจอภาพที่ใช้ (640 x 480 หรือ 1024 x 768 ) 2. กำหนดค่าด้วยหน่วยเปอร์เซ็นต์

89 การกำหนดขนาดของเฟรม(ต่อ) 3. กำหนดโดยใช้ความสัมพันธ์ของแต่ละ เฟรม ใช้เครื่องหมาย * เป็นตัวกำหนด แบ่งเป็น 2 ส่วนตามแนวนอน ส่วนบนสูง 40% ของเนื้อที่ทั้งหมด และส่วนล่างใข้เนื้อที่ ๆเหลือ ทั้งหมด แบ่ง จอภาพเป็น 3 ส่วน ส่วนซ้ายกว้าง 60 pixel ส่วนกลางกว้าง 80 pixel และส่วนขวาใช้เนื้อ ที่ที่เหลือทั้งหมด

90 Tag Tag เป็นแท็กที่ใส่ระหว่างแท็ก … ใช้สำหรับใส่ ชื่อเอกสารหรือรูปภาพไว้ในส่วนของจอภาพที่ แบ่งไว้ด้วยแท็ก มีรูปแบบดังนี้

91 Attribute ของ Attribute ของ SRC= “url” บอกถึงไฟล์รูปภาพ หรือไฟล์ HTML ที่ต้องการแสดงในเฟรม NAME = “windows_name” ตั้งชื่อให้กับเฟรม เพื่อนำไฟล์รูปภาพหรือไฟล์เอกสารอื่นๆ มาแสดง MARGINWIDTH กำหนดช่องว่างทางซ้ายและ ขวาระหว่างข้อมูลและเฟรม MARGINHEIGHT กำหนดช่องว่างด้านบนและล่าง ระหว่างข้อมูลและเฟรม

92 Attribute ของ (ต่อ) SCROLLING =“YES/NO/AUTO” ใช้กำหนดให้ เฟรมมี Scrollbar หรือไม่มี yes มี scrollbar No ไม่มี scrollbar auto browser เป็นตัวกำหนด FRAMEBORDER กำหนดให้ browser สร้างกรอบ ให้กับเฟรม FRAMEBORDER = 0 ซ่อนเส้นกรอบเฟรม ปกติค่า default ของกรอบเฟรมเป็น 5 FRAMESPACING กำหนดระยะห่างระหว่างเฟรม NORESIZE กำหนดไม่ให้ผู้ใช้เปลี่ยนแปลงขนาด เฟรมในขณะที่ใช้งาน

93 ตัวอย่างการแบ่งเฟรม Using frame demo

94 ตัวอย่างการแบ่งเฟรมให้มีขนาด แน่นอน Using frame demo

95 การกำหนดแถบเลื่อนในเฟรม โดยปกติเฟรมที่มีพื้นที่ไม่เพียงพอสำหรับ แสดงเนื้อหา จะมีแถบเลื่อนเพื่อให้ผู้ใช้เลื่อนดู ข้อมูลในส่วนที่เหลือได้ ถ้ไม่ต้องการให้แสดงแถบเลื่อนจะต้องกำหนด แอตทริบิวต์ SCROLLING=“NO” ใน

96 ตัวอย่างการใช้แถบเลื่อนในเฟรม Using frame demo

97 การสร้างเฟรมซ้อน แต่ละคอลัมน์สามารถแบ่งเป็นแถวและแต่ละ แถวสามารถแบ่งเป็นคอลัมน์ได้เช่นกัน ตัวอย่าง แบ่งจอภาพเป็น 2 เฟรมตามแนวดิ่งขนาด 40% และ60% โดย เฟรมแรกแบ่งตามแนวนอนเป็น 2 เฟรม โดยเฟรม แรกสูง 30% และส่วนที่เหลือสูง 70%......

98 ตัวอย่างการสร้างเฟรมซ้อน 1 Using nested frame demo

99 ตัวอย่างการสร้างเฟรมซ้อน 2 Using nested frame demo

100 tag … tag … ใช้กำหนดส่วนของเอกสารที่จะให้แสดง โดย browser ที่ไม่สามารถแสดงเฟรม ได้ มีรูปแบบดังนี้ … ถ้ามีการใช้เฟรมควรใส่ส่วน ไว้เสมอเพื่อให้ผู้ใช้ที่ใช้ browser ที่ไม่สามารถแสดงเฟรมได้ ใช้ได้ตามปกติเหมือนไม่มีเฟรม

101 การสร้างฟอร์ม (Form) ด้วยภาษา HTML HTML Form เป็นลักษณะของระบบการสอบถาม ข้อมูลแบบหนึ่งที่ใช้ในระบบเครือข่ายอินเทอร์เน็ต รูปแบบ

ข้อความและฟิลด์ของฟอร์ม ……

102 การสร้างแบบฟอร์ม(ต่อ) ฟอร์ม (Form) ใช้ในการรับข้อมูลจากผู้ใช้ และทำงานร่วมกับโปรแกรมย่อยๆ หรือ Script ที่เรียกว่า Common Gateway Interface(CGI) CGI เป็นโปรแกรมตัวกลางที่ทำหน้าที่ เชื่อมโยงข้อมูลระหว่างเครื่องคอมพิวเตอร์ ของผู้ใช้กับเครื่อง Server โดย Server รวบรวมข้อมูลที่ผู้ใช้ป้อนมา เพื่อประมวลผล เมื่อเสร็จแล้วส่งผลลัพธ์กลับไปยังผู้ใช้

103 การสร้างแบบฟอร์ม(ต่อ) ตัวเลือกที่ใช้ร่วมกับแท็ก Form METHOD = ”GET” หรือ ”POST” ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธีใด GET เป็นการนำข้อมูลทั้งหมดในฟอร์มไปต่อท้ายสุด แล้วประมวลผลครั้งเดียว POST จะนำข้อมูลส่งไปที่ server แยกกันไปเป็นแต่ ละ transaction ACTION = “URLsname” ใช้ระบุURL ของ CGI script ที่เรียกมาใช้งาน

104 คำสั่ง INPUT เป็นคำสั่งรับข้อมูลในฟอร์มโดยการสร้างปุ่ม หรือ ตัวเช็ค หรือ ช่องกรอกข้อความ ตาม attribute ของ TYPE รูปแบบ TYPE ใช้บอกชนิดของข้อมูลนำเข้าประกอบด้วย TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET ตัวเลือกเพิ่มเติมมีดังนี้ ALIGN, CHECKED, ROWS, COLS, SIZE, MAXLENGTH, SRC, VALUE

105 คำสั่ง INPUT กับแบบข้อมูลชนิด TEXT เป็นแบบข้อมูลที่ผู้ใช้ป้อนข้อความลงในช่องรับ ข้อมูลในแบบฟอร์มเพียงบรรทัดเดียว มีตัวเลือกที่ใช้ร่วมกับคำสั่งคือ SIZE กำหนดขนาดของช่องรับข้อมูล NAME กำหนดชื่อข้อมูล (ตัวแปร) ที่ใช้เก็บข้อมูล VALUE บอกค่าที่กำหนดไว้แล้ว ถ้าไม่ป้อนค่าเข้ามาจะ ถือว่าเป็น default ตัวอย่าง ชื่อ:

106 คำสั่ง INPUT กับข้อมูลแบบ PASSWORD Password เป็นรูปแบบรับข้อมูลคล้าย Text แต่จะ แสดงเป็นเครื่องหมาย “*” ขณะพิมพ์ข้อมูล รูปแบบ ตัวอย่าง Password :

107 ตัวอย่างการใช้ PASSWORD Enter text: Enter password : แสดงผลดังนี้ Enter text: Enter password : **** **** Seree

108 คำสั่ง INPUT กับข้อมูลแบบ RADIO RADIO BUTTON มีลักษณะ เป็นปุ่มกลม เป็นรูปแบบการรับข้อมูลที่กำหนดให้ผู้ใช้เลือก ตัวเลือกเพียงอย่างเดียว เมื่อเลือกจะเป็นจุดดำ ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้น เป็นค่าปริยาย รูปแบบ ข้อความ

109 ตัวอย่างการใช้ radio button Please choose one of the following : Male Female

110 คำสั่ง INPUT กับแบบข้อมูลชนิด CHECKBOX เป็นรูปแบบการเลือกที่ผู้ใช้เลือกตัวเลือกได้ มากกว่า 1 รายการ VALUE เป็น attribute ที่กำหนดค่าให้แต่ละ ตัวเลือกที่ผู้ใช้เลือก ชื่อตัวแปรที่ใช้เก็บค่าจะต้องแตกต่างกัน ตัวเลือก CHECKED เป็นการกำหนดให้ รายการนั้นเป็นค่าปริยาย รูปแบบ

111 ตัวอย่างการใช้ checkbox Mango Orange Banana Durian

112 การสร้างปุ่มส่งข้อมูลในแบบฟอร์ม Submit เป็นปุ่มใช้สำหรับส่งข้อมูลที่กรอกหรือ เลือกในแบบฟอร์มไปยัง Server รูปแบบ  เมื่อ message คือข้อความที่ปรากฏบนปุ่มเลือก

113 การสร้างปุ่มยกเลิกข้อมูลในแบบฟอร์ม Reset เป็นปุ่มที่ใช้กดสำหรับยกเลิกข้อมูลที่ ป้อนเข้าไปทั้งหมดในแบบฟอร์ม เพื่อให้กับไป ใช้ค่าเริ่มต้นใหม่ รูปแบบ  เมื่อ message คือข้อความที่ปรากฏบนปุ่ม RESET

114 การใช้ปุ่ม submit และ reset แสดงผลดังนี้ Send FormCancel Form

115 TEXTAREA เป็นการรับข้อความหลายบรรทัด (Multiline text input)บนแบบฟอร์มในบริเวณที่กำหนดไว้ รูปแบบ