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

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

การสร้างเฟรม (Frame) ด้วยภาษา HTML. Computer and Internet (310101)2 คำสั่งกำหนดเฟรม ใช้ Tag … กำหนดให้ Browser แสดงผลแบบเฟรม กำหนดขนาดของเฟรม ใช้ attributes.

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


งานนำเสนอเรื่อง: "การสร้างเฟรม (Frame) ด้วยภาษา HTML. Computer and Internet (310101)2 คำสั่งกำหนดเฟรม ใช้ Tag … กำหนดให้ Browser แสดงผลแบบเฟรม กำหนดขนาดของเฟรม ใช้ attributes."— ใบสำเนางานนำเสนอ:

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

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

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

4 Computer and Internet (310101)4 ตัวอย่าง This is frame Demo

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

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

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

8 Computer and Internet (310101)8 Attribute ของ Attribute ของ SRC= “url” บอกถึงไฟล์รูปภาพ หรือไฟล์ HTMLที่ต้องการแสดง ในเฟรม NAME = “windows_name” ตั้งชื่อให้กับเฟรม เพื่อนำไฟล์ รูปภาพหรือไฟล์เอกสารอื่นๆ มาแสดง MARGINWIDTH กำหนดช่องว่างทางซ้ายและขวาระหว่างข้อมูล และเฟรม MARGINHEIGHT กำหนดช่องว่างด้านบนและล่างระหว่างข้อมูล และเฟรม SCROLLING =“YES/NO/AUTO” ใช้กำหนดให้เฟรมมี Scrollbar หรือไม่มี (auto browser เป็นตัวกำหนด) FRAMEBORDER กำหนดให้ browser สร้างกรอบให้กับเฟรม  FRAMEBORDER = 0 ซ่อนเส้นกรอบเฟรม  ปกติค่า default ของกรอบเฟรมเป็น 5 FRAMESPACING กำหนดระยะห่างระหว่างเฟรม NORESIZE กำหนดไม่ให้ผู้ใช้เปลี่ยนแปลงขนาดเฟรมในขณะที่ใช้ งาน

9 Computer and Internet (310101)9 ตัวอย่างการแบ่งเฟรม Using frame demo

10 Computer and Internet (310101)10 ตัวอย่างการแบ่งเฟรมให้มีขนาด แน่นอน Using frame demo

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

12 Computer and Internet (310101)12 ตัวอย่างการใช้แถบเลื่อนในเฟรม Using frame demo

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

14 Computer and Internet (310101)14 ตัวอย่างการสร้างเฟรมซ้อน 1 Using nested frame demo

15 Computer and Internet (310101)15 ตัวอย่างการสร้างเฟรมซ้อน 2 Using nested frame demo

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

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

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

19 Computer and Internet (310101)19 ตัวอย่าง Using nested frame demo

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

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

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

23 Computer and Internet (310101)23 HELPING SEARCH ENGINES FIND YOUR WEBSITE (2) DESCRIPTION เป็นส่วนที่ใช้สรุปย่อถึงการอธิบายเว็บเพจ KEYWORD เป็นรายการของคีย์เวิร์ดที่เราคาดว่าผู้ที่เข้ามาเยี่ยมชม จะค้นหาเว็บไซต์ ตัวอย่าง

24 Computer and Internet (310101)24 HELPING SEARCH ENGINES FIND YOUR WEBSITE (3) ใน Infoseek จะใช้ชื่อ title ของเว็บเพจเป็นการค้นหาอันดับแรก ใน yahoo จะใช้ title ของเว็บเพจพร้อมทั้ง description ในการ ค้นหา ใน Excite จะค้นหาจากแท็ก Comment และเนื้อหาของเว็บเพจ สรุป ต้องจัดทำคีย์เวิร์ดไว้ในแท็ก TITLE, META และ COMMENT

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

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

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

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

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

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

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

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

32 Computer and Internet (310101)32 ตัวอย่างการใช้ PASSWORD Enter text: Enter password : แสดงผลดังนี้ Enter text: Enter password : uraiwan ********

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

34 Computer and Internet (310101)34 ตัวอย่างการใช้ radio button Please choose one of the following : Male Female

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

36 Computer and Internet (310101)36 ตัวอย่างการใช้ checkbox Mango Orange Banana Durian

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

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

39 Computer and Internet (310101)39 การใช้ปุ่ม submit และ reset แสดงผลดังนี้ Cancel FormSent Form

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