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

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

เอกสารประกอบคำบรรยายวิชา 887371 Web Programming คณะวิทยาการสารสนเทศ มหาวิทยาลัยบูรพา การสร้างเอกสารเว็บเพจ ด้วยภาษา HTML.

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


งานนำเสนอเรื่อง: "เอกสารประกอบคำบรรยายวิชา 887371 Web Programming คณะวิทยาการสารสนเทศ มหาวิทยาลัยบูรพา การสร้างเอกสารเว็บเพจ ด้วยภาษา HTML."— ใบสำเนางานนำเสนอ:

1 เอกสารประกอบคำบรรยายวิชา Web Programming คณะวิทยาการสารสนเทศ มหาวิทยาลัยบูรพา การสร้างเอกสารเว็บเพจ ด้วยภาษา HTML

2 การสร้างเอกสารเว็บเพจ การสร้างเอกสารเว็บเพจด้วยภาษา HTML รูปแบบคำสั่งภาษา HTML

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

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

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 มี 2 ชนิด tag คู่(Paired tag) tag เดี่ยว (Single tag)

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

9 tag เดี่ยว (Single tag) เป็น tag ที่มี เฉพาะ Tag เปิดเท่านั้น ไม่มี tag ปิด เช่น ใช้สำหรับขึ้นบรรทัดใหม่ ใช้ตีเส้นตามแนวนอน ใช้แทรกรูปภาพ 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 คำสั่งขึ้นย่อหน้าใหม่ (2) ใช้ 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 Physical Character style กำหนดรูปแบบบังคับให้กับข้อความ คุณลักษณะของตัวอักษรแบบที่ต้องการ แสดงบนจอภาพ เรียกว่า Fixed type style รูปแบบคำสั่ง ตัวเข้ม(Bold)... ตัวเอน (Italic) … ตัวขีดเส้นใต้(Underline) … ตัวกระพริบ... ตัวอักษรกว้างเท่ากันทุกตัว(Typewriter text) …. ตัวขีดทับข้อความ... หรือ...

29 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 การกำหนดขนาดของตัวอักษร (2) การกำหนดขนาดตัวอักษรแบบมาตรฐานทั้ง เอกสาร ซึ่งสามารถเพิ่มหรือลดขนาดได้ ภายหลังโดยใช้ มีรูปแบบดังนี้ ข้อความ ตัวอย่าง 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 การกำหนดสีให้กับตัวอักษรเฉพาะ ข้อความ กำหนดใน tag มีรูปแบบดังนี้ กำหนดสี จากเปอร์เซ็นต์การผสมสี กำหนดสี จากสีมาตราฐาน ตัวอย่าง This is Red color next is blue This is Green Color

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

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

44 การแสดงผลแบบรายการ (LIST) รูปแบบ First Item in List Second Item in List Third Item in List

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

46 การแสดงผลรายการแบบลำดับ ตัวเลข(orderer Lists) TYPE เป็นการกำหนดว่าจะแสดงรายการ โดยใช้ตัวเลข ตัวอักษร หรือตัวอักษร โรมันเป็นต้น

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

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

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

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

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

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

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

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

55 การจัดการรูปภาพ ด้วยภาษา HTML

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

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

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

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

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

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

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

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

64 การแสดงกรอบรูปภาพและระยะห่าง การแสดงกรอบรูปภาพใช้แอตทริบิวต์ BORDER = n โดยปกติ n=0 ค่า n ยิ่งมาก กรอบยิ่งหนา การเว้นระยะห่างของภาพกับข้อความใช้ แอตทริบิวต์ VSPACE =n สำหรับระยะยะห่างด้านบน ล่าง HSPACE =n สำหรับระยะยะห่างด้านซ้าย ขวา ตัวอย่าง

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

66 การสร้างภาพเคลื่อนไหว โปรแกรม GIF Construction Set หรือ GIFCON ของบริบัท Alchemy Mindworks Inc. เป็นโปรแกรมที่ใช้สร้างภาพเคลื่อนไหวใน Web ใช้เปลี่ยนภาพแบบ GIF เป็นภาพเคลื่อนไหว ถ้าใช้ MS Internet Explorer ตั้งแต่เวอร์ชั่น 2 สามารถใช้ภาพที่มีส่วนขยายเป็น.AVI ได้ เลย หรือจะใช้โปรแกรม GIFCON แปลงภาพ ก่อนก็ได้

67 การสร้างจุดเชื่อมโยง (Link) ด้วยภาษา HTML

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

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

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

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

72 การเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร ใช้หลักของ path ดังนี้ ข้อมูลที่อยู่ใน directory ก่อนหน้า 1 ชั้น เขียน ได้เป็น../index.html ข้อมูลที่อยู่ใน directory ก่อนหน้า 2 ชั้นเขียน ได้เป็น../../index.html ข้อมูลที่อยู่ใน directory อื่นก่อนหน้านั้น 1 ชั้น เขียนได้เป็น../ชื่อdirectory/index.html ข้อมูลที่อยู่ใน directory ถัดไป 1 ชั้น เขียนได้เป็น /directory1/index.html

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

74 ตัวอย่าง

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

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

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

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

79 การสร้างตาราง (Table) ด้วยภาษา HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

93 การสร้างเฟรม (Frame) ด้วยภาษา HTML

94 คำสั่งกำหนดเฟรม ใช้ Tag … กำหนดให้ Browser แสดงผลแบบเฟรม กำหนดขนาดของเฟรม ใช้ attributes 2 ตัว คือ ROWS และ COLS ROWS เป็น attribute แบ่งเฟรมตามแนวนอน ตามค่า ที่กำหนด ROWS = “lists” COLS เป็น attribute แบ่งเฟรมตามแนวตั้งตาม ค่า ที่กำหนด COLS = “lists”

95 คำสั่งกำหนดเฟรม Lists เป็นชุดค่าตัวเลขที่ใช้กำหนดขนาด ให้กับเฟรมตามแนวนอนหรือแนวตั้ง ถ้ามี หลายค่าจะคั่นด้วยเครื่องหมายจุลภาค

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

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

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

99 การกำหนดขนาดของเฟรม(2) 2. กำหนดค่าด้วยหน่วยเปอร์เซ็นต์

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

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

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

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

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

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

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

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

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

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

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

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

112 การเชื่อมโยงให้สัมพันธ์กันในเฟรม Targeting Frame เป็นการส่งเอกสารไป แสดงในเฟรมอื่น โดยเฟรมเป้าหมายต้องมี การตั้งชื่อสำหรับอ้างอิง ระบุเฟรมเป้าหมายในแท็ก anchor กำหนดbase (default) target ให้กับทุก Link ที่ไม่ได้ระบุชื่อ target ด้วยคำสั่ง

113 การเชื่อมโยงให้สัมพันธ์กันในเฟรม(2) ถ้าไม่มีชื่อเฟรมในวินโดว์ที่เปิดอยู่ browser จะ เปิดวินโดว์ใหม่ให้โดยถือว่าเป็นวินโดว์ลูก ชื่อเฉพาะแสดงความสัมพันธ์ระหว่างเอกสาร ระหว่างเอกสารปัจจุบันกับเอกสารอื่น _blank โหลด link นี้ไปที่หน้าจอที่บราวเซอร์เปิดเป็น หน้าต่างใหม่ _self โหลด link นี้ทับเฟรมที่กำลังถูกใช้งานอยู่ _parent โหลด link นี้ทับพื้นที่ของทุกเฟรมที่ถูก กำหนดภายใต้แท็ก เดียวกันกับเฟรม ที่ กำลังถูกใช้งานอยู่ _top ใหลด link นี้ไปยังพื้นที่ทั้งหมดของหน้าจอ บราวเซอร์ปัจจุบัน

114 7/22/2014CS BUU การเชื่อมโยงให้สัมพันธ์กันในเฟรม(3) ตัวอย่าง

115 Using nested frame demo ตัวอย่าง

116 Table of Content เวบไซต์ที่สนใจ Click mouse เพื่อไปยังเวบ ไซต์ที่ต้องการ Yahoo Search Science BUU Computer Science ตัวอย่าง แฟ้ม toc.html

117 first file Content หน้าจอแรกนะจ๊ะ ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยบูรพา ตัวอย่าง แฟ้ม first.html

118 HELPING SEARCH ENGINES FIND YOUR WEBSITE สามารกำหนดแท็ก เพื่อใช้จัดทำ index เอาไว้สำหรับให้ Search Engine ต่างๆเช่น Infoseek, AltaVista ค้นหาข้อมูลจาก index ได้ แท็กที่ใช้สร้างคือ Meta Tag มีรูปแบบดังนี้ ต้องเขียนแท็ก ไว้ภายในแท็ก … เสมอ

119 DESCRIPTION เป็นส่วนที่ใช้สรุปย่อถึงการอธิบาย เว็บเพจ KEYWORD เป็นรายการของคีย์เวิร์ดที่เราคาดว่าผู้ ที่เข้ามาเยี่ยมชมจะค้นหาเว็บไซต์ ตัวอย่าง

120 ใน Infoseek จะใช้ชื่อ title ของเว็บเพจ เป็นการค้นหาอันดับแรก ใน yahoo จะใช้ title ของเว็บเพจพร้อม ทั้ง description ในการค้นหา ใน Excite จะค้นหาจากแท็ก Comment และเนื้อาของเว็บเพจ สรุป ต้องจัดทำคีย์เวิร์ดไว้ในแท็ก TITLE, META และ COMMENT

121 การสร้างฟอร์ม (Form) ด้วยภาษา HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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