ภาษามาร์คอัป เอกสารประกอบการสอนรายวิชา ภาษามาร์คอัป ระดับมัธยมศึกษาตอนปลาย.

งานนำเสนอเรื่อง: "ภาษามาร์คอัป เอกสารประกอบการสอนรายวิชา ภาษามาร์คอัป ระดับมัธยมศึกษาตอนปลาย."— ใบสำเนางานนำเสนอ:

1 ภาษามาร์คอัป เอกสารประกอบการสอนรายวิชา ภาษามาร์คอัป ระดับมัธยมศึกษาตอนปลาย

2 การสร้างตาราง (table) ด้วยภาษา HTML

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

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

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

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

7 ตัวอย่าง table Demo ตาราง 2 x 2 พร้อมเส้นกรอบ bird dog cat rat

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

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

10 การจัดตำแหน่งของข้อมูลใน cell การจัดข้อมูลในเซลทำได้ 2 แบบคือ แนวนอน ได้แก่ left,right,center แนวตั้ง ได้แก่ top, button, middle ใน tag เพิ่ม แอตทริบิวต์ align= สำหรับแนวนอน valign= สำหรับแนวตั้ง รูปแบบ …

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

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

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

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

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

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

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

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

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

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

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

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

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

24 Tag Tag เป็นแท็กที่ใส่ระหว่างแท็ก … ใช้สำหรับใส่ชื่อเอกสารหรือรูปภาพไว้ในส่วนของจอภาพที่แบ่งไว้ด้วยแท็ก มีรูปแบบดังนี้ <FRAME SRC = “URL” NAME = “windows_name” MARGINwidth=value1 MARGINheight = value2 SCROLLING=choice NORESIZE FRAMEBORSER=choice2 FRAMESPACING=value2>

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

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

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

28 ตัวอย่างการแบ่งเฟรมให้มีขนาดแน่นอน Using frame demo <FRAME NAME=“frame1” SRC=“web1.html” NORESIZE> <FRAME NAME=“frame2” SRC=“web2.html” NORESIZE > <FRAME NAME=“frame1” SRC=“web3.html” NORESIZE >

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

30 ตัวอย่างการใช้แถบเลื่อนในเฟรม Using frame demo <FRAME NAME=“frame3” SRC=“web3.html” SCROLLING=“NO” >

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

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

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

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

35 การเชื่อมโยงให้สัมพันธ์กันในเฟรม Targeting Frame เป็นการส่งเอกสารไปแสดงในเฟรมอื่น โดยเฟรมเป้าหมายต้องมีการตั้งชื่อสำหรับอ้างอิง ระบุเฟรมเป้าหมายในแท็ก anchor <A HREF = “page1.html” TARGET = “ชื่อเฟรมเป้าหมาย”> กำหนดbase (default) target ให้กับทุก Link ที่ไม่ได้ระบุชื่อ target ด้วยคำสั่ง

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

37 9/20/2016CS BUU การเชื่อมโยงให้สัมพันธ์กันในเฟรม(3) ตัวอย่าง <A HREF = “mypage.html” TARGET= “_parent”>

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

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

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

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

42 DESCRIPTION เป็นส่วนที่ใช้สรุปย่อถึงการอธิบายเว็บเพจ KEYWORD เป็นรายการของคีย์เวิร์ดที่เราคาดว่าผู้ที่เข้ามาเยี่ยมชมจะค้นหาเว็บไซต์ ตัวอย่าง <META NAME=“description” CONTENT=“ How to promote website.”> <META NAME=“Key word” CONTENT=“announcing website, web submittion, Burapha University, Eastern Seaboard”>

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

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

45 การสร้างแบบฟอร์ม (Form) HTML Form เป็นลักษณะของระบบการสอบถามข้อมูลแบบหนึ่งที่ใช้ในระบบเครือข่ายอินเทอร์เน็ต รูปแบบ <FORM METHOD=“methodname” ACTION=“URLsname”> ข้อความและฟิลด์ของฟอร์ม ……

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

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

48 คำสั่ง INPUT เป็นคำสั่งรับข้อมูลในฟอร์มโดยการสร้างปุ่ม หรือตัวเช็ค หรือ ช่องกรอกข้อความ ตาม attribute ของ TYPE รูปแบบ <INPUT TYPE=ชนิดการรับข้อมูล NAME=“ชื่อตัวแปร“ [ตัวเลือกเพิ่มเติม]> TYPE ใช้บอกชนิดของข้อมูลนำเข้าประกอบด้วย TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET ตัวเลือกเพิ่มเติมมีดังนี้ align, CHECKED, rows, cols, SIZE, MAXLENGTH, SRC, VALUE

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

50 คำสั่ง INPUT กับข้อมูลแบบ PASSWORD Password เป็นรูปแบบรับข้อมูลคล้าย Text แต่จะแสดงเป็นเครื่องหมาย “*” ขณะพิมพ์ข้อมูล รูปแบบ <INPUT TYPE=PASSWORD SIZE=8 NAME=“password”> ตัวอย่าง Password : <INPUT TYPE= PASSWORD SIZE = 8 NAME = “mycode”>

51 ตัวอย่างการใช้ PASSWORD Enter text:<INPUT TYPE=TEXT NAME=“NAME” SIZE=25> Enter password : <INPUT TYPE=PASSWORD NAME=“PASSWORD” SIZE=8 MAXLENGTH=8> แสดงผลดังนี้ Enter text: Enter password : ******** Se ree

52 คำสั่ง INPUT กับข้อมูลแบบ RADIO RADIO button มีลักษณะ เป็นปุ่มกลม เป็นรูปแบบการรับข้อมูลที่กำหนดให้ผู้ใช้เลือกตัวเลือกเพียงอย่างเดียว เมื่อเลือกจะเป็นจุดดำ ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย รูปแบบ <INPUT TYPE= Radio NAME =“rName” VALUE= “rValue> ข้อความ

53 ตัวอย่างการใช้ radio button Please choose one of the following : <INPUT TYPE = RADIO NAME = “sex” VALUE=“Male”> Male <INPUT TYPE = RADIO NAME = “sex” VALUE=“Female”> Female

54 คำสั่ง INPUT กับแบบข้อมูลชนิด CHECKBOX เป็นรูปแบบการเลือกที่ผู้ใช้เลือกตัวเลือกได้มากกว่า 1 รายการ VALUE เป็น attribute ที่กำหนดค่าให้แต่ละตัวเลือกที่ผู้ใช้เลือก ชื่อตัวแปรที่ใช้เก็บค่าจะต้องแตกต่างกัน ตัวเลือก CHECKED เป็นการกำหนดให้รายการนั้นเป็นค่าปริยาย รูปแบบ <INPUT TYPE= CHECKBOX NAME =“cName” VALUE= “cValue”>

55 ตัวอย่างการใช้ checkbox <INPUT TYPE=CHECKBOX NAME = “FRUIT1” VALUE = “MANGO”> Mango <INPUT TYPE=CHECKBOX NAME = “FRUIT2” VALUE = “ORANGE”> Orange <INPUT TYPE=CHECKBOX NAME = “FRUIT3” VALUE = “BANANA”> Banana <INPUT TYPE=CHECKBOX NAME = “FRUIT4” VALUE = “DURAIN”> Durian

56 การสร้างปุ่มส่งข้อมูลในแบบฟอร์ม Submit เป็นปุ่มใช้สำหรับส่งข้อมูลที่กรอกหรือเลือกในแบบฟอร์มไปยัง Server รูปแบบ <INPUT TYPE = “SUBMIT” Name = “message”>  เมื่อ message คือข้อความที่ปรากฏบนปุ่มเลือก

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

58 การใช้ปุ่ม submit และ reset <INPUT TYPE = SUBMIT VALUE =“Sent Form”> <INPUT TYPE = RESET VALUE =“Cancel Form”> แสดงผลดังนี้ Send Form Cancel Form

59 TEXTAREA เป็นการรับข้อความหลายบรรทัด (Multiline text input)บนแบบฟอร์มในบริเวณที่กำหนดไว้ รูปแบบ <TEXTAREA NAME = “ชื่อตัวแปร“ rows = จำนวนบรรทัด cols = จำนวนคอลัมน์> ข้อความ ตัวแปรแทนชื่อพื้นที่ที่เรากำหนด

60 ตัวอย่าง Please enter any comments here This is comments

61 การสร้าง SELECT BOX SELECT แสดงตัวเลือกทั้งหมดให้ผู้ใช้เลือกโดยอาจแสดงในรูปของ Drop-down list หรือแสดงตัวเลือกตามปกติ รูปแบบ ข้อความ …………..

62 ตัวอย่าง Tennis Basketball Football Volleyball

63 การใช้ MULTIPLE ใน SELECTION BOX สามารถใช้MULTIPLE เพื่อแสดงผลลัพธ์ตัวเลือกทั้งหมด โดยไม่ต้องคลิกที่ลูกศรเลื่อนแสดง Tennis Basketball Football Volleyball

64 การใช้ SIZE กำหนดจำนวนตัวเลือก SIZE ใช้แสดงจำนวนตัวเลือกที่ต้องการให้เห็นใน drop-down lists Tennis Basketball Football Volleyball

65 การส่งข้อมูลในแบบฟอร์มด้วย Mailto เราสามารถส่งข้อมูลจากแบบฟอร์มที่เราสร้างขึ้น โดยใช้ไปรษณีย์อีเลก ทรอนิกส์ได้ โดยใช้คำสั่ง mailto ใน ACTIONของแบบฟอร์ม เมื่อผู้ใช้กดปุ่ม SUBMIT ข้อมูลที่กรอกในแบบฟอร์มจะถูกส่งเป็น ไปรษณีย์อีเลกทรอนิกส์ไปยังผู้รับตามที่อยู่ที่กำหนดทันที รูปแบบ <FORM METHOD=“POST” ACTION=“mailto:user@hostname”> :