98 7.4 การแทรกข้อความและรูปภาพลงในตาราง 1. คลิกเซลล์ที่ต้องการจะแทรกข้อความ แล้วพิมพ์ข้อความลงไปเหมือนโปรแกรม Microsoft Excel 2. คลิกเซลล์ที่ต้องการจะแทรกรูปภาพ 3. คลิกที่เมนู Insert 4. เลือก Image หรือ กดปุ่ม Ctrl + Alt + I จะปรากฏหน้าต่าง Select Image Source
99 5. คลิกที่ช่อง Look in เพื่อเลือกโฟลเดอร์ที่เก็บรูปภาพ 6. คลิกเลือกรูปภาพ ซึ่งจะแสดงภาพตัวอย่างด้านขวามือ 7. คลิกปุ่ม OK 8. รูปภาพจะแทรกในเซลล์นั้นทันที สามารถปรับแต่งได้ตามต้องการ 8. การเชื่อมโยงข้อมูลในเว็บ 8.1 การเชื่อมโยงภายในหน้าเว็บเพจ ในกรณีที่เว็บเพจมีเนื้อหาและมีขนาดยาวมาก ทำให้ต้องใช้เมาส์เลื่อนแถบ Scroll bar เราสามารถ สร้างการเชื่อมโยงภายในเว็บเพจ เพื่อให้สะดวกในการดูเนื้อหา กำหนดจุดเป้าหมาย ที่ต้องการจะเชื่อมโยง 1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการ 2. คลิกที่เมนู Insert แล้วเลือก Named Anchor หรือ กดปุ่ม Ctrl + Alt + A 3. หรือ แถบ Insert ให้เลือก Common แล้วคลิก Named Anchor
100 4. จะปรากฏหน้าต่าง Named Anchor ให้ตั้งชื่อจุดเชื่อมโยง แล้วคลิกที่ปุ่ม OK 5. จะปรากฏสัญลักษณ์การเชื่อมโยง ดังรูป การสร้างจุดเชื่อมโยงไปยังเป้าหมาย การกำหนดตำแหน่งการสร้างจุดเชื่อมโยง อาจใช้ข้อความหรือรูปภาพเป็นจุดเชื่อมโยงก็ได้ 1. เลือกข้อความหรือรูปภาพที่จะสร้างเป็นจุดเชื่อมโยง 2. คลิกที่ปุ่ม HTML 3. ช่อง Link ให้พิมพ์เครื่องหมาย # แล้วตามด้วยชื่อจุดเป้าหมาย (ตามหัวข้อ กำหนด จุดเป้าหมาย ที่ต้องการจะเชื่อมโยง) 4. ทดสอบการแสดงผลจากเว็บเบราว์เซอร์ โดยกดปุ่ม F12 8.2 การเชื่อมโยงภายในเว็บไซต์ การจัดทเว็บไซต์ ซึ่งประกอบไปด้วยหลาย ๆ เว็บเพจ แต่ละเว็บเพจสามารถเชื่อมโยงกันได้ มีวิธีการ ดังนี้
101 1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยง 2. ที่ Properties Inspector ในช่อง Link ให้คลิกที่ปุ่ม Browse เพื่อเลือกไฟล์ที่จะทำการ เชื่อมโยง 3. จะปรากฏหน้าต่าง Select File ให้เลือกโฟลเดอร์ที่เก็บไฟล์เว็บเพจ 4. เลือกไฟล์เว็บเพจที่ต้องการจะเชื่อมโยง 5. คลิกที่ปุ่ม OK 6. ช่อง Link จะปรากฏไฟล์เว็บเพจที่เลือก 7. ช่อง Target เป็นการกาหนดวิธีเปิดหน้าเว็บที่เชื่อมโยง ดังนี้ _blank ให้เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างเบราว์เซอร์ใหม่ new ให้เปิดหน้าเว็บที่ เชื่อมโยงในหน้าต่างเบราว์เซอร์ใหม่อีกหน้าต่าง
102 _parent ให้เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างเบราว์เซอร์เดิม _self ให้เปิดหน้าเว็บที่เชื่อมโยงในเฟรมเดิม _top ให้เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างเบราว์เซอร์เดิม โดยจัดให้เต็มเฟรม 8. ทดสอบการเชื่อมโยง โดยกดปุ่ม F12 เพื่อดูการแสดงผลจากเว็บเบราว์เซอร์ แล้วคลิกจุด เชื่อมโยง 8.3 การเชื่อมโยงภายนอกเว็บไซต์ การเชื่อมโยงไปยังเว็บไซต์อื่น ๆ ที่อยู่ภายนอก เพื่อต้องการให้ผู้ชมเว็บไซต์ของเราสามารถศึกษา ข้อมูลเพิ่มเติมได้ มีวิธีการดังนี้ 1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยง 2. ที่ Properties Inspector ในช่อง Link ให้พิมพ์ชื่อ URL ของเว็บไซต์ที่เราต้องการเชื่อมโยง โดยพิมพ์คาว่า http:// แล้วตามด้วยชื่อของเว็บไซต์ เช่น http://www.dkd.ac.th 8.4 การเชื่อมโยงไปยังอีเมล การเชื่อมโยงไปยังอีเมล เป็นช่องทางในการสื่อสารสาหรับให้ผู้ต้องการจะติดต่อผ่านอีเมลได้อย่าง สะดวก รวดเร็วขึ้น มีวิธีการดังนี้
103 1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยง 2. ที่ Properties Inspector ในช่อง Link ให้พิมพ์ชื่อ URL ของเว็บไซต์ที่เราต้องการเชื่อมโยง โดยพิมพ์คำว่า mailto: แล้วตามด้วยชื่อของเว็บไซต์ เช่น mailto:[email protected] 8.5 การเชื่อมโยงเพื่อดาวน์โหลด การเชื่อมโยงเพื่อดาวน์โหลดมีจุดประสงค์ เพื่อต้องการเชื่อมโยงไปยังแฟ้มข้อมูล เช่น ไฟล์รูปภาพ ไฟล์เอกสาร หรือไฟล์อื่น ๆ มีวิธีการดังนี้ 1. เลือกข้อความหรือรูปภาพที่ต้องการใช้เป็นจุดเชื่อมโยง 2. ที่ Properties Inspector ในช่อง Link ให้คลิกที่ปุ่ม Browse เพื่อเลือกไฟล์ที่จะทาการ เชื่อมโยงเพื่อดาวน์โหลด
104 3. จะปรากฏหน้าต่าง Select File ให้เลือกโฟลเดอร์ที่เก็บไฟล์ 4. เลือกไฟล์ที่ต้องการ 5. คลิกที่ปุ่ม OK ---------------------------------------------------- อ้างอิงจาก : https://sites.google.com/site/nur1910200065246/hna-raek
105 หน่วยที่7 การตกแต่งเว็บเพจ เนื้อหาสาระ โปรแกรมแฝดเป็นสื่อที่ช่วยในการสร้างสื่อมันติมีเดียเคลื่อนไหวแอนิเมชั่นกราฟฟิคที่มีความคมชัดเด้อ จากเฟซกราฟฟิคแบบเวกเตอร์สามารถเล่นเสียแล้ววิดีโอและ stories โอสามารถสร้างงานให้โต้ตอบกับผู้ใช้มี ฟังชั่นสำหรับการเขียนโปรแกรมและสามารถทำงานในลักษณะCGIโดยเชื่อมต่อกับการเขียนโปรแกรมภาษา อื่นๆ 7.1 การใช้ไฟล์Flash 1. เปิดไฟล์ใหม่ขึ้นมา และทำการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว 2. ไปที่ Common และเลือกเครื่องมือดังรูป หรือไปที่ Insert > Media > Flash
106 3. เมื่อคลิกที่ flash แล้วจะมีหน้าต่างดังรูป เลือกไฟล์ Flash ที่ต้องการจะแทรก จากนั้นคลิก OK 4. เมื่อเราคลิกที่ไฟล์ Flash ที่แทรกไปจะพบว่า Property inspector เปลี่ยนไปดังรูป มีรายละเอียดดังนี้ 1. ช่องแรกสุดทางซ้ายมือ สำหรับใส่ชื่ออ้างอิงให้กับไฟล์ที่เราแทรกลงไป 2. W (Width) กำหนดความกว้างที่ใช้แสดงผลของ flash 3. H (Height) กำหนดความสูงที่ใช้แสดงผลของ flash 4. File ช่องนี้จะแสดงค่าตำแหน่งที่เราบันทึกไฟล์ flash เอาไว้ไม่ต้องแก้ไขอะไรทั้งสิ้น 5. Src (Source) ให้เราระบุตำแหน่งที่เราเก็บไฟล์ต้นฉบับที่สามารถแก้ไขได้ .fla เอาไว้ 6. Edit ใช้สำหรับแก้ไขไฟล์ flash (.swf) โดยจะเรียกโปรแกรม Adobe Flash ขึ้นมา โดยจะ อ้างอิงจากช่อง Src (Source) ที่เราได้บอกตำแหน่งไฟล์ .swf ไว้ 7. Reset Size เราสามารถเปลี่ยนแปลงขนาดของไฟล์ Flash ได้โดยคลิกที่มุมของไฟล์ แล้วลาก จะขยาย หรือย่อก็ได้ ถ้าต้องการให้ขยายในอัตตราส่วนเท่าเดิมก็ให้กด Shift ค้างไว้ เมื่อเราต้องการให้ขนาด กลับมาเหมือนเดิมก็ให้คลิกที่ปุ่มนี้ 8. Class กำหนด Style Sheet ให้กับไฟล์นี้
107 9. Loop เมื่อเลือกช่องนี้ไฟล์ Flash จะเล่นซ้ำไปซ้ำมา ถ้าเราไม่ได้เลือกจะแสดงเพียงครั้งเดียว แล้วหยุดไป 10. Autoplay ถ้าเลือกช่องนี้ Flash จะแสดงผลเองอัตโนมัติเมื่อโหลดไฟล์เรียบร้อย ถ้าไม่เลือก การแสดงผลจะขึ้นอยู่กับ behavior (เช่น onMouseOver , onMouseDown) ที่เราได้กำหนดไว้ให้กับไฟล์ นั้น 11. V Space (Vertical Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจใน ตำแหน่งบนและล่าง 12. H Space (Horizontal Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจ ในตำแหน่งซ้ายและขวา 13. Quality ตัวเลือกนี้จะทำให้เราสามารถจัดการกับ anti-aliasing คือการกำหนดคุณภาพของ flash โดยถ้าเราเปิด anti-aliasing จะทำให้ flash แสดงผลได้ดี ภาพสวยขึ้น แต่ความเร็วของการเล่นไฟล์ flash จะช้าลง สมมุติว่าเราใส่รูปคนวิ่งลงไป เมื่อเปิด anti-aliasing จะทำให้รูปสวยขึ้น แต่คนจะวิ่งได้ช้าลง โดยจะมีตัวเลือกดังนี้ Low ปิดการใช้ anti-aliasing เราจะเลือกตัวเลือกนี้เมื่อ ความเร็วของการเล่นไฟล์ สำคัญกว่า ความสวยงาม High เปิดการใช้ anti-aliasing เราจะเลือกตัวเลือกนี้เมื่อ ความเร็วของการเล่นไฟล์ สำคัญ น้อยกว่าความสวยงาม Auto High คำสั่งนี้จะเปิด anti-aliasing ก่อน เมื่อความเร็วของการเล่นไฟล์ช้าลงมาก ก็จะ ทำการปิด anti-aliasing ให้ความสำคัญความสวยงามมากว่าความเร็ว Auto Low คำสั่งนี้จะเริ่มต้นด้วยการปิด anti-aliasing ก่อน จะเปิดก็ต่อเมื่อเครื่อง CPU ของ เครื่องผู้ใช้งานสามารถประมวลผลได้โดยไม่ทำให้ความเร็วของการเล่นไฟล์ลดลง ก็จะเปิด anti-aliasing ให้ ความสำคัญความเร็วมากว่าความสวยงาม 14. Scale เราจะใช้คำสั่งนี้เมื่อได้เปลี่ยนขนาดของ flash จากขนาดเดิมโดยไม่มีมาตราส่วน คำสั่ง นี้จะเป็นการกำหนดการแสดงผลของ flash ในขนาดที่เรากำหนด Default (Show All) แสดงผลตามมาตราส่วนปรกติ และจะแสดงผลทั้งหมดของไฟล์ เช่น ถ้าเราเปลี่ยนขนาดที่ผิดมาตราส่วนไป ตัวเลือกนี้จะปรับให้แสดงผลในมาตราส่วนที่สามารถแสดงได้เท่านั้น No Border แสดงผลให้โดยใช้มาตราส่วนปรกติ แต่จะไม่แสดงผลส่วนที่เกินออกไป เช่นถ้า เราปรับมาตราส่วนผิดไป ตัวเลือกนี้จะปรับมาตราส่วนตามนั้น แต่ส่วนที่เกินออกไปขนาดที่เรากำหนด จะไม่ แสดงผล Exact Fit จะปรับการแสดงผลให้เท่ากับขนาดที่เรากำหนด 15. Align จัดตำแหน่งของไฟล์ 16. Bg กำหนดพื้นหลังให้ไฟล์
108 17. Play button กำหนดให้แสดงผลไฟล์ flash ใน Dreamweaver ถ้าเรากด play จะทำให้ เห็นไฟล์ flash แสดงผลใน Dreamweaver แต่ถ้าเราต้องการแก้ไขต้องกด stop ก่อน 18. Parameters กำหนดค่าตัวแปรให้กับ flash จะพูดถึงในบทอื่น 7.2 การแทรกวิดีโอให้กับเว็บเพจ แทรกไฟล์ Flash video (Flv) ลงในเว็บเพจDreamweaver ไฟล์ flv เปิดด้วยโปรแกรม Flash player โชคดีที่ Browser ส่วนใหญ่จะมี flash player ติดมาด้วย เราสามารถแปลงจากไฟล์นามสกุลอื่นให้เป็น flv ได้โดยใช้โปรแกรม เช่น โปรแกรม Flash ก็สามารถ แปลงได้ หรือในปัจจุบันนี้มีโปรแกรมมากมายที่ทำมาเพื่อรองรับส่วนนี้ การแทรกไฟล์ Flash video ในเว็บเพจ 1. เปิดไฟล์ใหม่ขึ้นมา และทำการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว คลิก ตำแหน่งที่ต้องการจะแทรก 2. ไปที่ Insert > Media > Flash video จะมีหน้าต่างดังรูป มีรายละเอียดดังนี้ 1. Video type ให้เลือกเป็น progressive จะแสดงผลเมื่อโหลดไฟล์เสร็จเท่านั้น ส่วนแบบ Streaming นั้นเป็นแบบที่สามารถโหลดไฟล์ไปพร้อมกับเล่นไฟล์ได้ แต่จะต้องติดต่อกับผู้ดูแล server ว่าได้ เปิดบริการส่วน Streaming server ไว้หรือไม่ 2. URL กำหนดตำแหน่งที่เก็บไฟล์ของเราโดยคลิกที่ Browse เพื่อกำหนดไฟล์ที่ต้องการแทรก
109 3. Skin เลือกรูปแบบของส่วนควบคุมการแสดงผลไฟล์วิดีโอ 4. height, width กำหนดความสูงให้กับไฟล์ flash ของเรา ตามปรกติถ้าเราไม่ใส่ Dreamweaver จะรู้ขนาดของไฟล์อยู่แล้ว 5. Auto play เล่นไฟล์อัตโนมัติเมื่อโหลดเสร็จ 6. Auto rewind เล่นซ้ำอัตโนมัติ 7. Prompt ถ้าเราเลือกช่องนี้ เมื่อผู้ใช้ไม่มี Flash player จะปรากฏข้อความในช่อง message 7.3 การใส่เสียงให้กับเว็บเพจ แทรกไฟล์วิดีโอ และเสียงลงในเว็บเพจ Dreamweaver ในบทนี้จะเป็นการแทรกไฟล์วิดีโอ และเสียง ซึ่งเราได้กล่าวถึงชนิดของไฟล์ในบทที่แล้วไว้แล้ว (ยกเว้น ส่วนของ flash จะไม่รวมในนี้) แทรกไฟล์วิดีโอ และเสียง 1. เปิดไฟล์ใหม่ขึ้นมา และทำการ save ให้เรียบร้อย หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว คลิก ตำแหน่งที่ต้องการจะแทรก 2. ไปที่ Insert > Media > Plugin จะมีหน้าต่างดังรูป ให้เลือกไฟล์ที่ต้องการแทรก 3. คลิกโอเคจะมีหน้าต่างดังภาพ เราสามารถเปลี่ยนแปลงขนาดที่แสดงในเว็บเพจได้ การแทรกไฟล์วิดีโอ หรือเสียง ในเว็บเพจนั้นถ้าไม่ใช่ไฟล์ flash(flv) โปรแกรม Dreamweaver จะไม่ รู้ขนาดที่ใช้ในการแสดง ทำให้เราจะต้องกำหนดขนาดที่เราต้องการให้แสดงเอง
110 4. เมื่อเราเลือกไฟล์วิดีโอที่แทรก ส่วน Property inspector จะเป็นแบบนี้ มีรายละเอียดดังนี้ 1. ช่องแรกสุดทางซ้ายมือ สำหรับใส่ชื่ออ้างอิงให้กับไฟล์ที่เราแทรกลงไป 2. W (Width) and H (Height) กำหนดความกว้าง และสูงของ ไฟล์ที่จะให้แสดงผล 3. Class กำหนด Style Sheet ให้กับไฟล์นี้ 4. Src (Source) ตำแหน่งที่เก็บไฟล์ 5. Align จัดตำแหน่งของไฟล์ 6. Play button ใช้ทดลองเปิดไฟล์ 7. Plg URL ใช้กำหนดเว็บไซต์สำหรับโหลดโปรแกรมสำหรับเปิดไฟล์ที่เราแทรก จะปรากฏเมื่อ เครื่องผู้ใช้ไม่สามารถเปิดไฟล์ของเราได้ 8. V Space (Vertical Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจใน ตำแหน่งบนและล่าง 9. H Space (Horizontal Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจ ในตำแหน่งซ้ายและขวา 10. Border กำหนดขอบให้กับไฟล์ 11. Parameters กำหนดค่าตัวแปรอื่น จะพูดถึงในบทอื่น การแสดงผลไฟล์วิดีโอและเสียงที่เราแทรกลงไปนี้ จะแสดงผลก็ต่อเมื่อโหลดข้อมูลเสร็จเรียบร้อยแล้ว เท่านั้น จะไม่มีการโหลดไฟล์พร้อมกับการเล่นไฟล์ อย่างในเว็บ youtube ถ้าต้องการให้โหลดไปด้วยเล่น เป็นได้ต้องใช้งานในตัวเลือก Streaming ซึ่งจะต้องติดต่อกับ ผู้ดูแล server ว่าได้เปิด Streaming server ไว้ หรือไม่ 7.4 การแทรกปุ่มแบบ Rollover Image Rollover Image เป็นการสร้างเอฟเฟ็คต์ให้กับรูปภาพคือลักษณะของการสลับรูปภาพเมื่อนำเมาส์ไป ชี้ที่รูปภาพนั้นๆ จะเปลี่ยนจากรูปหนึ่งเป็นอีกรูปหนึ่งทันทีโดยไม่ต้องใช้โค้ด Java Script อีกทั้งยังสามารถใช้ Rollover เป็นจุดเชื่อมโยงได้อีกด้วย แต่ก่อนที่จะแทรกรูปภาพแบบ Rollover Image นั้น จะต้องมีการเตรียม รูปภาพไว้ 2 รูปและมีขนาดที่เท่ากันเพื่อความสวยงามในขณะเปลี่ยนรูปภาพ สำหรับการแทรกรูปภาพแบบ Rollover Image มีวิธีการดังนี้ 1. คลิกเมาส์เลือกตำแหน่งที่ต้องการวางรูปภาพ 2. คลิกเลือกเครื่องมือ Rollover Image ซึ่งอยู่บน Insert bar อยู่ในกลุ่ม Common จะปรากฏ หน้าต่าง Insert Rollover Image ขึ้นมา
111 3. ให้ทำการกำหนดตัวเลือกตามที่ต้องการ - Image name เป็นการตั้งชื่อให้กับรูปภาพ (ถ้าไม่ตั้งชื่อโปรแกรมจะมีให้แล้ว) - Original image กำหนดภาพแรกเป็นภาพแรกเมื่อแสดงผล โดยการกดปุ่ม Browse.. - Rollover image กำหนดภาพที่สองซึ่งเป็นภาพที่แสดงผลเมื่อนำเมาส์ไปชี้บริเวณรูปภาพ โดย การกดปุ่ม Browse.. - Preload rollover image เป็นการกำหนดให้รูปภาพที่สองโหลดไว้ล่วงหน้า (ควรจะต้องเลือกไว้) - Alternate text เป็นการใส่ข้อความอธิบายรูปภาพที่แทรกมา - When clicked, Go to URL เป็นการกำหนดจุดเชื่อมโยงให้กับรูปภาพ(ในกรณีที่ต้องการให้ รูปภาพเป็นจุดเชื่อมโยง) ทำโดบคลิกปุ่ม Browse.. เลือกเว็บเพจที่ต้องการหรือทำการพิมพ์ URL ที่ต้องการ 4. เมื่อกำหนดตัวเลือกที่ต้องการเรียบร้อยแล้ว กดปุ่ม OK จะได้ผลลัพธ์ดังรูป ผลลัพธ์จากการแสดงบนโปรแกรมเว็บบราวเซอร์ เมื่อนำเมาส์ไปชี้ที่รูปภาพ ตัวอย่างแสดงผลการใช้ Rollover Image (ให้นำเมาส์ไปชี้บริเวณรูปภาพ
112 หน่วยที่ 8 ความพื้นฐานเกี่ยวกับการใช้ Adobe Flash CS6 Flash คือ อะไร โปรแกรม Flash เป็นโปรแกรมที่ทำงานในด้านมัลติมีเดียในด้านแอนนิเมชั่นต่างๆ ทั้งเว็บแอนนิเมชั่น การ์ตูนแอนนิเมชั่น งานแบนเนอร์ภาพเคลื่อนไหวหรืองานมัลติมีเดียแบบอินเตอร์แอคทีฟที่โต้ตอบกับผู้ใช้งาน งาน Flash นั้นแบ่งเป็น 2 ประเภทใหญ่ คือ งาน Online และงาน Offline ซึ่งมีงานประเภทต่างๆ ดังต่อไปนี้ งาน Flash แบบ Online 1. Web Banner งานป้ายโฆษณาบนเว็บไซต์พัฒนามาจาก Gif Animation ที่โหลดช้าและคุณภาพต่ำ ในสมัยก่อนมาเป็น Animation ของ Flash ที่เคลื่อนไหวต่อเนื่องมีขนาดเล็กและยังมี Graphic ที่สวยงาม 2. Web Animation ส่วนประกอบของเว็บไซต์ที่เคยใช้เป็นภาพนิ่ง สามารถสื่อสาร และดึงดูดความ สนใจได้มากขึ้นด้วยFlash 3. Web Introduction ถ้า 1 ภาพแทนคำพูด 1000 คำ ภาพเคลื่อนไหวยอมพูดได้มากขึ้นอีก หลายเท่าตัว การใช้ภาพเคลื่อนไหวอธิบายบุคลิก ตัวตนของเว็บไซต์เป็นอีกอย่างที่ Flash ทำได้ดีและได้รับ ความนิยมอย่างสูง 4. Flash Website ถ้าไม่ใช้เว็บไซต์จะไม่เพียงแค่ตกแต่งประดับประดาด้วย Flash เท่านั้น มัน สามารถใช้ทำเว็บไซต์ทั้งกระบวนการได้ด้วย ไม่จำกัดแค่เพียง Animation และเนื้อหาอย่างเดียว หากยังการ เชื่อมโยงกับฐานข้อมูล และการสร้าง Application ที่มีรูปแบบเฉพาะตัวอีกด้วย
113 งาน Flash แบบ Offline 1. Product Introduction งานเปิดตัวสินค้า งาน Event งานคอนเสิร์ต งานแต่งงาน ที่จะต้องมีการ นำเสนอความน่าสนใจของสินค้า หรือกิจกรรมต่างๆ การทำ Animation อธิบายวิธีการใช้ หรือแนะนำกิจกรรม ลูกค้าด้วยโปรแกรม Flash ก็เป็นทางเลือกใหม่ที่กำลังมาแรง ด้วยวิธีการที่สะดวก และประหยัดค่าใช้จ่ายกว่า งานด้าน VDO 2. Presentation, CD Interactive เมื่องาน Flash สามารถตอบโต้กับผู้ใช้งานได้ การสร้างงานแบบ Presentation ก็ไม่เป็นปัญหาสำหรับ flash อีกทั้งยังมีประโยชน์ในเรื่องความยืดหยุ่นของการเขียนโปรแกรม จึงเปิดโอกาสให้สร้างงาน Interactive แบบจินตนาการกว้างไกล โดยไม่ยึดติดอยู่ในโครงร่างตายตัวเหมือนกับ PowerPoint อีกต่อไป 3. Application ในขั้นสูง การเขียนโปรแกรมช่วยให้สามารถสร้าง Application เฉพาะทางขึ้นเอง เอาไว้ใช้ส่วนตัว หรือใช้กันเองในบริษัท งาน Flash ทั้ง Online และ Offline 1. Full Animation, Cartoon, E-Card, Music Video ไม่ว่าจะเป็นการสร้าง Cartoon บนเว็บไซต์ หรือการท า Music Video รวมถึง Animation ที่ส่งไปตามอีเมล์ ในลักษณะ Electronic-Cards งานประเภท เหล่านี้จะใช้โปรแกรม Flash เป็นตัวเลือกแรกๆ ด้วยเหตุที่กล่าวข้างต้น 2. Games การพัฒนาในส่วนของการเขียนโปรแกรมในช่วงหลังๆ ทำให้ Flash สามารถสร้างเกมที่มี ประสิทธิภาพมากขึ้นเรื่อยๆ ถึงแม้ว่าอาจจะยังไม่ใช้เกมที่ขายได้อย่างจริงจัง แต่มันสามารถได้ซึ่ง flash ท าให้ การสร้างเกมไม่ใช่เรื่องยากจนเกินไป Flash ใช้ทำอะไรได้บ้าง โปรแกรม Flash เป็นโปรแกรมยอดนิยมสำหรับการสร้างผลงานได้หลายประเภท ไม่ว่าจะเป็นการ์ตูน แอนิเมชัน, เกม, สื่อโฆษณาบนเว็บไซต์ หรืออินเตอร์เฟสแผ่นซีดีที่มีการตอบโต้กับผู้ใช้ โดยในหัวข้อนี้เราจะมา ทำความรู้จักกับความสามารถของโปรแกรม Flash ไว้เป็นแนวทางเพื่อนำไปพัฒนาชิ้นงานต่อไป ความสามารถในการสร้างชิ้นงาน Interactive ชิ้นงาน Interactive คือ ชิ้นงานที่มีการตอบสนองกับผู้ใช้ เช่น ผู้ใช้สามารถคลิกเลือกเมนูต่างๆ ได้ ซึ่ง ส่วนใหญ่งานประเภท Interactive ที่สร้างด้วยโปรแกรม Flash นั้นจะนำไปใช้เป็นสื่อการสอน (ELearning)หรือหน้าจอควบคุมการทำงานของแผ่น CD เป็นต้น
114 ความสามารถในการสร้างชิ้นงาน Animation การสร้าง Animation หรือภาพการ์ตูนเคลื่อนไหวนั้น ถือเป็นหัวใจหลักของการทำงานในโปรแกรม Flash เนื่องจากมีเครื่องอำนวยความสะดวกมากมาย จึงท าให้โปรแกรม Flash สร้างผลงาน Animation ได้ ง่ายกว่าโปรแกรมอื่น ซึ่งเราสามารถพบเห็นงานแอนิเมชันได้ทั่วไป ไม่ว่าจะเป็นสื่อโฆษณา (Banner) บน เว็บไซต์ หรือการ์ตูนแอนิเมชันต่างๆ ยกตัวอย่าง http://www.youtube.com/watch?v=MapADnxvXqY ความสามารถในการสร้างเว็บไซต์ (Website) งานประเภทเว็บไซต์ ก็เป็นการสร้างชิ้นงานอีกรูปแบบหนึ่งที่ใช้โปรแกรม Flash สร้างผลงานได้ เนื่องจากโปรแกรม Flash สามารถสร้างเว็บไซต์ได้สวยงาม และสร้างลูกเล่นต่างๆ ได้ง่ายกว่าการใช้โปรแกรม อื่น แต่มีข้อเสียคือ เว็บไซต์ที่สร้างด้วยโปรแกรม Flash แก้ไขข้อมูลได้ยาก และขนาดของไฟล์เว็บไซต์จะมี ขนาดค่อนข้างใหญ่ ดังนั้น หากต้องการสร้างเว็บไซต์ควรพิจารณาถึงรูปแบบของเว็บไซต์ก่อนว่าเหมาระสมที่ จะสร้างด้วยโปรแกรม Flash หรือไม่ ความสามารถในการสร้างเกม (Game) ปัจจุบันได้มีเกมที่สร้างจากโปรแกรม Flash ออกมาอย่างแพร่หลายตามเว็บไซต์ต่างๆ เนื่องจาก โปรแกรม Flash มีเครื่องมือช่วยสร้างองค์ประกอบต่างๆ ของเกมให้สวยงาม, มีเครื่องมือสำหรับใส่คำสั่ง ควบคุมการเล่นเกม อีกทั้งไฟล์เกมที่สร้างออกมามีขนาดเล็ก ทำให้อัพโหลดขึ้นสู่เว็บไซต์ได้อย่างรวดเร็ว
115 หน่วยที่ 9 การอัปโหลดไฟล์ขึ้นเชิร์ฟเวอร์ 1. ความหมายของการอัพโหลดกับดาวน์โหลด 1.1 ความหมายของ FTP การโอนถ่ายข้อมูลหรือเอฟทีพี (File Transfer Protocol - FTP) เป็นบริการหนึ่งของ อินเทอร์เน็ต หมายถึง การดึงไฟล์จากคอมพิวเตอร์ในเครือข่ายอินเทอร์เน็ตมายังเครื่องคอมพิวเตอร์ของเรา โดยที่เรา สามารถคัดลอก ถ่ายโอนข้อมูล รูปภาพ เสียง วิดีโอและโปรแกรมต่าง ๆ จากอินเทอร์เน็ตได้ FTP นี้เป็นวิธีการหลักในการส่งไฟล์ผ่านอินเทอร์เน็ตซึ่งมีคำที่เกี่ยวข้องอยู่ 2 ลักษณะคือ การดาวน์โหลด (Download) หมายถึง การดึงข้อมูลจากคอมพิวเตอร์อีกเครื่องหนึ่งซึ่งเป็นต้นทาง มาเก็บไว้ยังเครื่องของเรา โดยผ่านเครือข่ายคอมพิวเตอร์ การอัพโหลด (Upload) หมายถึง การนำข้อมูลจากเครื่องคอมพิวเตอร์ที่ใช้อยู่ไปเก็บไว้ยังเครื่อง คอมพิวเตอร์อีกเครื่องที่ปลายทาง โดยผ่านเครือข่ายคอมพิวเตอร์เรียกได้ว่าตรงกันข้ามกับดาวน์โหลด ประเภทของโปรแกรมที่ให้บริการในอินเทอร์เน็ต โดยทั่วไปโปรแกรมหรือไฟล์ที่เก็บอยู่ในโฮสต์ (เครื่องให้บริการ) มีหลายประเภทหากแบ่งตามลักษณะ ของการถ่ายโอนข้อมูล จะแบ่งเป็น 3 ประเภทคือ 1. ฟรีแวร์ (Freeware) หมายถึงโปรแกรมที่มีผู้สร้างขึ้นเพื่อแจกจ่ายให้แก่สาธารณชนใช้ โดยไม่ต้อง เสียค่าใช้จ่าย ผู้ใช้อินเทอร์เน็ตสามารถดาวน์โหลดโปรแกรมฟรีแวร์ไปใช้เองและถ่ายโอนให้ผู้อื่นต่อไปได้ โดยมี ข้อแม้ว่าจะต้องไม่นำไปขายหรือหารายได้จากโปรแกรมนั้น เช่น โปรแกรม Linux เป็นต้น 2. แชร์แวร์ (Shareware) หมายถึง โปรแกรมที่มีผู้สร้างขึ้นเพื่อตั้งใจจะจำหน่าย แต่ยอมให้ผู้สนใจ นำไปทดลองใช้ก่อนโดยไม่ต้องจ่ายค่าลิขสิทธิ์แต่ถ้าหากพอใจและต้องการใช้งานอย่างจริงจัง จะต้องจ่ายเงิน ซื้อโปรแกรมดังกล่าวจึงจะได้โปรแกรมฉบับสมบูรณ์ 3. คอมเมอร์เชียลแวร์ (Commercial ware) หมายถึง โปรแกรมที่สร้างขึ้นมาเพื่อจำหน่วย ไม่มี การแจกฟรี ผู้ใช้อาจจะได้ดูตัวอย่างบ้างแต่ไม่สามารถนำไปใช้งานได้ ถ้าหากต้องการจะต้องซื้อจึงจะดาวน์ โหลดโปรแกรมมาใช้งานได้ โปรแกรมอัพโหลดไฟล์ยอดนิยมและฟรี การอัพโหลด (Upload) หมายถึง การโอนย้ายไฟล์ข้อมูลจากคอมพิวเตอร์เครื่องหนึ่ง (ต้นทาง) ไปยัง คอมพิวเตอร์อีกเครื่องหนึ่ง (ปลายทาง) โดยผ่านระบบอินเทอร์เน็ต และการนำไฟล์ข้อมูลจากคอมพิวเตอร์ เครื่องอื่น (ปลายทาง) มาบันทึกไว้ในคอมพิวเตอร์เครื่องของเรา (ต้นทาง) เรียกว่า การดาวน์โหลด (Download)
116 การอัพโหลดไฟล์ (Upload File) คือ การนำไฟล์ข้อมูลจากเครื่องของผู้ใช้ (User) ไปเก็บไว้ในเครื่องที่ ให้บริการ (Server) ผ่านระบบอินเทอร์เน็ต จะมี FTP (File Transfer Protocol) เป็นมาตรฐานที่กำหนดใช้ เพื่อการถ่ายโอนข้อมูลหรือการ Upload/Download ข้อมูลบนอินเทอร์เน็ต โดยจะใช้โปรแกรมที่เรียกว่า FTP Client มาช่วยในการ Upload/Download ข้อมูลไปเก็บไว้ที่ Server เช่น 1. โปรแกรม FileZilla FTP สนับสนุนการส่งไฟล์ (Upload) หรือดาวน์โหลด (Download) ไฟล์จากเครื่องลูกข่าย (Client) สู่ เครื่องแม่ข่าย (Server) รองรับรูปแบบการเชื่อมต่อข้อมูลที่เป็นมาตรฐานของการรับส่งไฟล์ เช่น โปรโตคอล FTP โปรโตคอล FTPS (FTP over SSL/TLS) โปรโตคอล SFTP (SSH File Transfer Protocol) สามารถ ส่งออกข้อมูลเพื่อนำไปใส่ในโปรแกรม FileZilla ที่ติดตั้งอยู่บนเครื่องอื่นๆ ได้มีระบบเชื่อมต่ออัตโนมัติ ในกรณี ที่การเชื่อมต่ออินเทอร์เน็ตหลุด ใช้งานแบบ Free Version สามารถใช้งานได้ในระบบปฏิบัติการ Window และ Mac OS 2. โปรแกรม Core FTP LE เป็นโปรแกรมที่เอาไว้รับส่งข้อมูลระหว่างเครื่องลูกข่าย (Client) กับเครื่องแม่ข่าย (Server) เหมาะ สำหรับเว็บมาสเตอร์ที่ต้องการส่งไฟล์ (Upload) และดาวน์โหลดไฟล์ (Download) ระหว่างเครื่อง คอมพิวเตอร์ตัวเองกับ Web Server รองรับมาตรฐานการรับส่งข้อมูลที่หลากหลายรูปแบบ เช่น โปรโตคอล แบบ SSL/TLS SSH/SFTP IDN ModeZ หรือแม้แต่ fxp ใช้งานแบบ Free Version สามารถใช้งานได้ใน ระบบปฏิบัติการ Window
117 3. โปรแกรม Cyberduck เป็นโปรแกรมที่เอาไว้ในการช่วยในการรับส่งและอัพโหลด (Upload) ข้อมูลแบบ FTP รองรับการ เชื่อมต่อกับ FTP (File Transfer Protocol), SFTP (SSH Secure File Transfer), WebDAV (Web-based Distributed Authoring and Versioning), Amazon S3, Google Cloud Storage และ Rackspace Cloud Files รองรับการใช้งานกับบริการเก็บข้อมูลบนคลาวด์ออนไลน์ ( Cloud Storage) เช่น Dropbox สามารถอัพโหลดและดาวน์หลายไฟล์พร้อมกันได้ในครั้งเดียว ใช้งานแบบ Free Version สามารถใช้งานได้ใน ระบบปฏิบัติการ Window และ Mac OS โปรแกรมดาวน์โหลดข้อมูลที่น่าสนใจ โปรแกรมที่ใช้ในการดาวน์โหลดข้อมูลมีมากมายหลายโปรแกรม และน่าสนใจสนดังนี้ 1. โปรแกรม GetRigth เป็นโปรแกรมเอฟทีพีที่ได้รับความนิยมมาก มีคุณสมบัติที่เด่น เช่นดาวน์โหลดไฟล์ขนาดใหญ่ได้อย่าง รวดเร็ว กรณีที่สายโทรศัพท์หลุดในระหว่างดาวน์โหลด โปรแกรมจะช่วยต่อโทรศัพท์อัตโนมัติ เมื่อดาวน์โหลด โปรแกรมเสร็จจะวางหูโทรศัพท์ให้ นอกจากนั้นช่วยปิดโทรศัพท์ให้เมื่อดาวน์โหลดเสร็จ และตั้งเวลาในการ ดาวน์โหลดไฟล์อัตโนมัติให้อีกด้วย 2. โปรแกรม Teleport Pro เป็นโปรแกรมดาวน์โหลดที่นิยมใช้อีกโปรแกรมหนึ่ง เหมาะสำหรับดาวน์โหลดไฟล์ขนาดใหญ่ มีข้อมูล และรูปภาพปริมาณจำนวนมาก ทั้งนี้สามารถดาวน์โหลดเว็บไซต์ทั้งเว็บไวต์แล้วนำมาเปิดดูได้ภายหลัง โดย ข้อมูลหรือเว็บไซต์ที่ดาวน์โหลดมาใช้งานนั้นจะสามารถนำมาให้บริการในลักษณะของ อินเทอร์เน็ตออฟไลน์ (Off-line) ที่เสมือนกับการใช้งานอินเทอร์เน็ตตามปกติ โปรแกรม Teleport Pro นี้เป็นโปรแกรมประเภทแชร์แวร์หรือทดลองให้ใช้ ถ้าสนใจใช้เต็มรูปแบบ ต้องเสียค่าลงทะเบียนใช้เพื่อให้สามารถทำงานได้อย่างมีประสิทธิภาพ ทั้งนี้สามารถดาวน์โหลดโปรแกรม ดังกล่าวมาทดลองใช้ที่ www.download.com
118 3. โปรแกรม Go!Zilla โปรแกรมที่มีความสามารถโดดเด่นหลายประการ เช่น ดาวน์โหลดได้เร็ว ป้องกันสายหลุด ดาวน์โหลด ได้หลายๆ ไฟล์พร้อมกัน และที่สำคัญโปรแกรมนี้ใช้งานได้ฟรี ไม่ต้องเสียค่าใช้จ่าย ทั้งนี้ สามารถดาวน์โหลด โปรแกรมนี้ได้ที่ www.gozilla.com 4. โปรแกรม WS-FTP เป็นโปรแกรมอัพโหลดและดาวน์โหลดที่ได้รับความนิยมสูงซึ่งมีการพัฒนาปรับปรุงมาอย่างต่อเนื่อง ถือเป็นโปรแกรมที่สนับสนุนการดาวน์โหลดไฟล์พร้อมๆ กันและน่าใช้อีกโปรแกรม 5. โปรแกรม CuteFTP เป็นโปรแกรมที่ได้รับความนิยมอีกโปรแกรมหนึ่งที่สนับสนุนการดาวน์โหลดและอัพโหลด สามารถ ดาวน์โหลดโปรแกรมมาใช้ได้จากเว็บไซต์ www.cuteftp.com มีคุณสมบัติที่น่าสนใจ เช่น 1. สามารถดาวน์โหลดไฟล์ได้ต่อเนื่อง 2. สามารถหยุดขณะดาวน์โหลดได้โดยไม่เสียการเชื่อมต่อกับเซิร์ฟเวอร์ 3. จัดลำดับการถ่ายโอนข้อมูลตามลำดับที่เลือกไว้ 4. สร้างเว็บมิเรอร์ (Web Mirror) ของเว็บไซต์ทั้งหมด 5. สามารถกำหนดการอัฟโหลดไฟล์ด้วยตัวอักษรพิมพ์เล็ก พิมพ์ใหญ่หรือคงรูปแบบเดิม วิธีการดาวน์โหลดข้อมูลจากเว็บไซต์ ในที่นี้จะขอกล่าวถึงการดึงข้อมูลมายังเครื่องที่เราใช้อยู่ ที่เรียกว่า การดาวน์โหลดข้อมูล (Download) โดยเป็นการดาวน์โหลดข้อมูลผ่านเว็บไซต์ต่าง ๆ ที่ให้บริการไฟล์ โปรแกรมฟรีหรือทดลองใช้ โดยมีขั้นตอนการ ปฏิบัติ ดังนี้ 1. เข้าไปยังเว็บไซต์ที่ให้บริการดาวน์โหลด ในที่นี้เลือก www.download.com พิมพ์ URL ที่ช่อง Address 2. เลือกหาโปรแกรมที่ต้องการดาวน์โหลด โดยการพิมพ์ชื่อโปรแกรมลงในช่องค้นหาชื่อโปรแกรม เช่น ต้องการโปรแกรม Winamp เสร็จแล้ว คลิกปุ่ม Search 3. คลิกเลือกโปรแกรมที่ต้องการ คือ โปรแกรม Winamp 4. เว็บไซต์จะบอกรายละเอียดของโปรแกรมที่ต้องการจะดาวน์โหลด เช่น ประเภท รุ่น วันที่ ขนาด ไฟล์ คุณภาพของโปรแกรม เป็นต้น 5. คลิกเลือกปุ่ม Download 6. จะปรากฎหน้าต่าง Save as ให้เลือกโฟลเดอร์ที่ต้องการเก็บโปรแกรม 7. คลิกปุ่ม Save 8. โปรแกรมจะทำการดาวน์โหลด โดยมีหน้าต่างแสดงการโอนย้ายไฟล์ให้มองเห็น และเมื่อดาวน์ โหลดเสร็จ ก็ติดตั้งโปรแกรมนั้นตามขั้นตอนการติดตั้งของโปรแกรมต่อไป
119 2. การสมัครขอพื้นที่เว็บไซต์ (Web site) ของ www.thcity.com www.thcity.com เป็นเว็บไซต์ (Web site) ของไทยอีกเว็บหนึ่งที่ให้บริการพื้นที่เว็บฟรี (Free Web site) การสมุครสมาชิกทำได้ไม่ยุ่งยากซับซ้อนโดย 2.1 เข้าหน้าเว็บเพจของ www.thcity.com หรือ www.phitsanulok.ob.tc 2.2 เลือก สมัครฟรีโฮมเพจ จะปรากฏหน้าเว็บแสดงรายละเอียดข้อตกลงของการใช้งาน ส่วนล่างให้ การกรอกรายละเอียดเกี่ยวกับตัวนักเรียนและชื่อเว็บไซต์เพื่อลงทะเบียน ให้นักเรียนกรอกรายละเอียดให้ครบ ทุกช่องและปฏิบัติตามคำแนะนำ
120 2.3 หากผู้ให้บริการได้ตรวจสอบยอมรับและอนุญาตให้ใช้พื้นที่เว็บไซต์ (Web site) จะปรากฏ หน้าเว็บเพจ (web page) แสดงรายละเอียดของเว็บไซต์ (Web site) ที่ได้รับอนุญาต ให้นักเรียนจดบันทึก เพื่อเก็บรักษาข้อมูลไว้ เป็นความลับเฉพาะบุคคล 2.4 หากมีการจัดทำเว็บเพจ (Web page) ของนักเรียนเรียบร้อย และพร้อมที่จะอัพโหลด (Up load) แล้ว ให้นักเรียนกลับไปที่โฮมเพจ (Home page) ของ www.thcity.com ใหม่ เพื่อเข้าใช้งานระบบ โดยใช้ชื่อสมาชิก Username และรหัสผ่าน Password ที่ได้สมัครไว้ พิมพ์ใส่ในช่องของ Username และ Password แล้วคลิกปุ่ม เข้าสู่ระบบ จะปรากฏหน้าเว็บแสดงรายละเอียด ให้เลือก Filemanager เพื่อการ จัดการแฟ้มข้อมูลของเว็บไซต์ (Web site) 2.5 จะปรากฏหน้าเว็บแสดงรายละเอียดเพื่อการจัดการเว็บไซต์ที่ได้รับพื้นที่ใช้งาน โดยจะมีพื้นที่ที่ ถูกจัดแบ่งออกเป็น 3 ส่วน คือ 2.5.1 ส่วนการจัดการข้อมูลส่วนบุคคล เพื่อการแก้ไขจัดการข้อมูลส่วนบุคคล 2.5.2 ส่วนของการอัพโหลดข้อมูล เพื่ออัพโหลด (Upload)ข้อมูลเพื่อการอัพเดท (Update) 2.5.3 ส่วนของไพล์ข้อมูล เพื่อการจัดการตรวจสอบหรือลบ (Delete) ไฟล์หรือแฟ้มข้อมูล (File) ที่อยู่บน เครื่องบริการของ www.thcity.com
121 หากยังไม่เคยมีการอัพโหลด (Upload) แฟ้มข้อมูล (File) และต้องการอัพโหลด (Upload) แฟ้มข้อมูล (File) ให้คลิกปุ่ม เปิดใช้งาน FTP ก่อน แต่ถ้าหากเคยอัพโหลด (Upload) แฟ้มข้อมูล (File) แล้วต้องการอัพ โหลด (Upload) แฟ้มข้อมูล (File)ชื่อเดิมที่ได้ปรับปรุงใหม่ให้เป็นปัจจุบัน (Update) ให้เลือกรายการ ไฟล์ข้อมูล วิธีการที่ง่ายที่สุด คือการลบแฟ้มข้อมูลหรือไฟล์ (File) เดิมบนเครื่องบริการออกก่อน แล้วจึงอัพ โหลด (Upload) แฟ้มข้อมูลจากเครื่องของนักเรียนขึ้นไปใหม่ การอัพโหลด (Upload) จะดำเนินการได้ครั้งละ 5 ไฟล์หรือแฟ้มข้อมูล ให้ดำเนินการทีละแฟ้มข้อมูล โดยคลิกเมาส์ (Mouse) ที่ปุ่ม Browse แล้วเลือกรายการไฟล์หรือแฟ้มข้อมูล (File) ที่ต้องการอัพโหลด (Upload) เมื่อเลือกแฟ้มข้อมูลครบ 5 แฟ้มข้อมูล (File) แล้ว ให้คลิกปุ่ม อัพโหลดไฟล์ ระบบจะจัดการอัพโหลด (Upload) แฟ้มข้อมูล (File) ที่เลือกไปยังพื้นที่เว็บไซต์ (Web site) ของนักเรียนที่ขอใช้บริการไว้ โดยจะ
122 ปรากฏรายชื่อแฟ้มข้อมูล (File) ที่ได้อัพโหลด (Upload) เรียบร้อยแล้วในส่วนที่ 3 ของหน้าเว็บ คือส่วนของ ไฟล์ข้อมูล ให้ดำเนินการอัพโหลด (Upload) แฟ้มข้อมูล (File) ของเว็บไซต์ (Web site) ที่นักเรียนได้สร้างไว้ให้ ครบหมดทุกแฟ้มข้อมูล (File) ที่มีและจำเป็นต้องใช้ 2.5.6 ทดลองเข้าเว็บไซต์ของนักเรียนได้จาก URL ในส่วนแรกของหน้าเว็บเพจ (Web page) Filemanager
123 3. การอัพโหลดเว็บไซต์ สำหรับองค์กรขนาดเล็ก ถ้าจะดำเนินการจัดหา Server เป็นของตนเอง อาจจะไม่คุ้ม เพราะต้อง เสียค่าใช้จ่าย ทั้งด้าน อุปกรณ์ฮาร์ดแวร์ และด้านบุคลากรที่จะดูแล Server ดังนั้น องค์กรขนาดเล็ก ส่วนใหญ่ จึงมักจะไปใช้บริการเว็บโฮสติ้ง ซึ่งเป็นบริการให้เช่าพื้นที่บน Server สำหรับเว็บไซต์ โดยผู้ให้เช่า รับผิดชอบ ในด้านการดูแล Server พร้อมทั้งจัดบริการต่าง ๆ ให้ สำหรับ web master ซึ่งเป็นผู้ดูแลเว็บไซต์ สามารถเข้า ใช้บริการอย่างเต็มที่ ด้วยความมั่นใจว่า ระบบสามารถทำงานได้ ไม่มีอุปสรรค ผู้ใช้เว็บสามารถเข้าถึงได้ โดยสะดวก และสามารถใช้บริการได้ตลอด 24 ชั่วโมง เว็บโฮสติ้ง (Web Hosting) เว็บโฮสติ้ง (Web Hosting) คือ หน่วยงานที่ให้บริการ พื้นที่บน Server สำหรับเว็บไซต์ต่างๆ เว็บโฮสติ้ง มีทั้งการ ใ ห ้ บ ร ิ ก า ร ฟ ร ี แ ล ะ เ ว ็ บ โ ฮ ส ต ิ ้ ง ท ี ่ ค ิ ด ค ่ า บ ร ิ ก า ร เว็บโฮสติ้งที่ให้บริการฟรี โดยปกติ ไม่มีของฟรี ผลตอบแทนที่เว็บโฮสติ้งที่คาดหวังว่าจะได้รับ มีหลายรูปแบบ เช่น การมีโฆษณาฝากไว้ที่หน้าเว็บทุกเว็บที่เขาให้บริการ หรือ แม้แต่การตั้งชื่อ ที่ใช้ชื่อของเว็บที่ให้บริการฟรีนำหน้า ทำให้เป็น ที่รู้จัก หรือเป็นการแนะนำตัวในตอนแรก เป็นต้น ร้ายกว่านั้น บางแห่งนำอีเมล์ของผู้สมัครไปขาย บางแห่งหลอกให้ผู้สมัครเข้าไปใช้ ต่อมาก็เสนอบริการเพิ่มเติมซึ่งต้องเสีย เงิน อย่างไรก็ตาม รายได้ของเว็บฟรี ส่วนมากมาจากการโฆษณา หรือการคลิกแผ่นป้ายโฆษณา ( banner) เว็บไซต์ที่ให้บริการฟรี บางแห่ง เมื่อมีสมาชิกมากขึ้น ก็ปิดบริการ หรือ เปิดให้สามารถสมัครสมาชิกเฉพาะบาง เวลาเท่านั้น ส่วนใหญ่ไม่มีฐานข้อมูลให้ ทำให้ไม่สามารถเก็บข้อมูลต่าง ๆ ได้ และนอกจากนี้ ส่วนใหญ่ มักจะ ไม่อนุญาตให้ ส่งไฟล์ขึ้นบน Server ด้วยวิธีการ FTP แต่ให้ใช้หน้าจอที่สร้างขึ้น โดยให้เหตุผลด้านความ ปลอดภัย เว็บที่ให้บริการฟรีส่วนใหญ่ไม่ค่อยมั่นคง โดยเฉพาะอย่างยิ่งถ้าเปิดให้บริการอย่างไม่มีข้อจำกัด และ ให้สามารถใช้ web script เช่น PHP หรือ CGI มักจะถูกโจมตีจากภายนอกได้ง่าย โดยการส่ง spam หรือถูก hack ได้ บางแห่งมีนโยบายเคร่งครัดในการพิจารณารายละเอียดต่าง ๆ ก่อนที่จะรับ หรือไม่รับ ซึ่งอาจต้องใช้ เวลา
124 หลักการเลือกพิจารณาเลือก Web Hosting 1. Web Hosting ตั้งอยู่ในประเทศหรือต่างประเทศ ให้ดูว่ากลุ่มเป้าหมายที่จะเข้ามาที่เว็บคือใคร หากเป็นลูกค้าในประเทศ ก็ควรเลือก Web Hosting ที่ตั้งอยู่ในประเทศ เพราะเวลาผู้ชมเข้ามาดูข้อมูลในเว็บไซต์ ก็จะสามารถเข้าถึงข้อมูลได้เร็วกว่า ไม่ต้องวิ่งไปหา ข้อมูลที่ต่างประเทศ แต่หากผู้เข้าชมอยู่ต่างประเทศ ก็ควรเลือก Web Hosting ที่ตั้งอยู่ต่างประเทศ เพื่อการ เข้าถึงได้รวดเร็วกว่าที่จะต้องเข้ามาดูข้อมูลที่เก็บไว้ที่ Web Hosting ในเมืองไทย
125 2. ขนาดพื้นที่ในการจัดเก็บข้อมูล ต้องพอเพียงกับข้อมูลของ Web Site ที่จัดทำ ปกติพื้นที่ขนาด 5 MB ก็เพียงพอต่อการนำเว็บไซต์ทั่วไป ที่มีภาพและข้อมูล ยกเว้นแต่หากจะมีข้อมูล เป็นจำนวนมากๆ เช่น ข้อมูลรูปภาพหรือไฟล์เอกสารต่างๆ ที่จะเปิดให้ดาวน์โหลดได้หลายรายการ และแต่ละ ไฟล์มีขนาดใหญ่ ท่านอาจจะต้องพื้นที่เพิ่ม และบางแห่งจะนำ พื้นที่ ๆ เก็บ E-Mail มานำไปคิดรวมกับพื้นที่ ๆ เก็บไฟล์ข้อมูลของเว็บไซต์ ซึ่งอาจจะทำให้พื้นที่ของเว็บไซต์ไม่เพียงพอต่อการใช้งานได้ เพราะจะต้องใช้ร่วมกับ E-Mail ซึ่งต้องเช็คกับทางผู้ให้บริการ ก่อนตัดสินใจใช้ E-Mail Box แยกออกจากพื้นที่เก็บไฟล์ข้อมูลเว็บหรือไม่ ซึ่งส่วนใหญ่หากรวมกัน อาจจะต้องการพื้นที่ Web Hosting อย่างน้อย 15 MB เป็นอย่างต่ำ 3. การใช้เว็บโปรแกรมมิ่ง ถ้าหากเว็บไซต์มีการใช้เว็บโปรแกรมมิ่งในการทำเช่น เว็บบอร์ด, โปรแกรมส่งเมล์หาสมาชิก (Mailing List), หรือ โปรแกรมการเก็บฐานข้อมูล (Database) ควรจะเช็คกับทางผู้ให้บริการ Web Hosting ว่า Server เป็น OS อะไร ถ้าหากเป็น Windows ก็สามารถใช้กับ ภาษาในการเขียนโปรแกรมได้แก่ ASP, PHP, Perl ได้ แต่หากเป็น Linux ก็จะสามารถใช้ได้แค่ PHP, Perl เท่านั้น
126 หรืออาจจะต้องการใช้ระบบรักษาความปลอดภัย ก็อาจจะต้องใช้บริการ ระบบรักษาความปลอดภัย ของข้อมูลแบบ SSL (Secure Socket Layer) ซึ่งจะเหมาะกับเว็บไซต์ทีทำ E-Commerce 4. ทดสอบคุณภาพการบริการทางอีเมล์ อาจจะลองเมล์ไปสอบถามคำถามต่าง ๆ กับทาง Support แล้วลองดูระยะเวลาการตอบกลับอีเมล์ ปัญหา ว่าใช้เวลามากน้อยแค่ไหน ถ้าการตอบแต่ละครั้งใช้เวลานาน (ไม่ควรเกิน 1 วัน) แบบนี้ก็ไม่น่าที่จะ เลือกใช้บริการ ลองส่งเมล์ไปสอบถามซัก 4-5 ครั้ง หรือมากกว่านี้ก็ได้ เพื่อดูความรวดเร็วในการแก้ปัญหา และ ความใส่ใจในการบริการ ของผู้ให้บริการ
127 5. ราคาไม่ใช่ตัวบอกถึงคุณภาพการบริการเสมอไป Web Hosting ที่มีราคาแพง ไม่จำเป็นว่าจะมีประสิทธิภาพ และบริการที่ดีเสมอไป ในการแข่งขันที่ รุนแรงของธุรกิจ Web Hosting ไม่จำเป็นต้องจ่ายแพงเพื่อซื้อบริการที่ดีกว่า 6. ช่องทางการติดต่อกับผู้ให้บริการ ควรจะมีหลาย ๆ ช่องทางในการที่จะติดต่อกับผู้ให้บริการได้ เผื่อในกรณีที่เกิดปัญหาจะได้ติดต่อได้ อย่างรวดเร็ว ทั้งเบอร์โทรศัพท์พื้นฐาน, โทรศัพท์มือถือ และทางอีเมล์ ผู้ให้บริการ Web Hosting บางราย
128 แม้ว่าจะมีการให้บริการที่ดี แต่ถ้าสามารถติดต่อได้แค่ทางอีเมล์แล้ว ก็ต้องรอรับการ บริการจากทางอีเมล์ เท่านั้น 7. ด้านอุปกรณ์เซิฟเวอร์ (Server) อุปกรณ์ที่นำมาให้บริการต้องมีคุณภาพ และมีประสิทธิภาพการทำงานสูงเพื่อให้เข้าใช้งานเว็บไซต์ได้ อย่างรวดเร็ว ควรหลีกเลี่ยงผู้ให้บริการที่นำ PC มาให้บริการ เพราะมีประสิทธิภาพต่ำและอาจเกิดปัญหาได้ โดยง่าย 8. ด้านเน็ตเวิร์ค เซิฟเวอร์จะต้องตั้งอยู่ใน Data Center ที่มีความพร้อมทั้งด้านระบบไฟฟ้า ระบบระบายความร้อน พร้อมการรักษาปลอดภัยที่เข้มงวด รวมไปถึงระบบเครือข่ายความเร็วสูง เพื่อให้เว็บไซต์สามารถเข้าถึงได้จาก ทั่วโลกตลอดเวลาด้วยความรวดเร็ว
129 9. ระบบจัดการ Web Hosting หรือ Control panel ควรเลือกระบบจัดการ Web Hosting ที่มีความง่ายและยืดหยุ่นพอ สำหรับการควบคุมและดูแล เว็บไซต์ตลอดจนอีเมล์ โดยทั่วไป Web hosting ควรมีบริการ Control Panel ซึ่งสามารถเปลี่ยนแปลงหรือมี Feature ในการใช้ Email, DNS, FTP, Site statistics, CGI เป็นต้น 10. ระบบ Backup ข้อมูล Web Hosting ที่ดีควรมีระบบสำรองข้อมูล (Backup) เพื่อป้องกันความผิดพลาดที่อาจเกิดขึ้นจน ข้อมูลของ Web Site สูญหาย
130 โปรแกรม FileZilla วิธีการใช้งาน และ การติดตั้ง FileZilla ในการอัพโหลดไฟล์ขึ้นบนเว็บไซต์ 1. ดาวน์โหลดโปรแกรม Filezilla 1.1 ไปยังเว็บไซต์ https://filezilla-project.org/download.php ดังรูป
131 1.2 คลิกเลือก Download FileZilla Client จะปรากกฎหน้าต่าง ดังรูป 1.3 คลิกเลือก Show addtional downloadoptions เพื่อหลีกเลี่ยงโปรแกรมอื่นที่ติดเพิ่มเติมมา 1.4 จะปรากฎหน้าต่าง ดังรูป ให้คลิกเลือกไฟล์ติดตั้งสำหรับ Windows
132 1.5 คลิกปุ่ม Save File เพื่อบันทึกไฟล์ติดตั้งในโฟลเดอร์ที่ต้องการจะปรากฎหน้าต่างให้บันทึก โปรแกรมลงในเครื่องคอมพิวเตอร์ดังรูป
133 2. ทำการดับเบิ้ลคลิกที่ไฟล์ที่ดาวน์โหลดมา (ซึ่งขณะจัดทำเอกสารใบความรู้นี้เป็นเวอร์ชั่น 3.7.3) ดังรูป 3. จะปรากฎหน้าต่างดังภาพด้านล่างนี้ให้กดปุ่ม “I Agree” 4. จากนั้นให้เลือกที่ Anyone who uses this computer (all user) คลิกที่ปุ่ม “Next”
134 5. เลือกทุกรายการ ตามภาพ จากนั้นให้คลิกที่ปุ่ม “Next” 6. เลือกตำแหน่งที่ต้องการติดตั้ง หรือจะไม่ต้องเลือกก็ได้ โปรแกรมเลือกมาให้อยู่แล้ว หลังจากนั้น ให้คลิกที่ ปุ่ม “Next”
135 7. จากนั้นให้คลิกที่ปุ่ม “Install” รอจนการติดตั้งเสร็จสมบูรณ์! 8. รอสักครู่โปรแกรมกำลังติดตั้ง
136 9. เมื่อการติดตั้งเสร็จเรียบร้อยจะได้ดังภาพด้านล่างนี้จากนั้น ให้คลิกที่ปุ่ม “Finish”! การติดตั้งเป็นอัน เสร็จเรียบร้อย 10. เมื่อเข้าสู่โปรแกรมครั้งแรกจะปรากฎหน้าต่างยินดีต้อนรับ และแสดงรายละเอียดของโปรแกรม ดังภาพ ให้คลิกปุ่ม "ตกลง" เพื่อเข้าสู่โปรแกรม
137 11. หน้าตาโปรแกรม FilZilla ที่ติดตั้งเสร็จแล้ว
138 วิธีการใช้งาน FileZilla! 1. คลิก เปิดโปรแกรม FileZilla ขึ้นมา 2. จากนั้นใส่ รายละเอียดต่อไปนี้ 2.1 โฮสต์คือ ชื่อเว็บไซต์หรือหมายเลขเครื่องที่ให้บริการฝากเว็บไซต์ 2.2 ชื่อผู้ใช้คือ ชื่อผู้ใช้งานของ FTP ปกติจะเป็น Username -รหัสผ่าน คือ 2.3 รหัสผ่านของ FTP ที่ได้สมัีครไว้กับ web hosting 2.4 พอร์ต คือ พอร์ตของ FTP คือ 21 หรือหากไม่ทราบ ก็ให้เว้นว่างไว้ 3. ตำแหน่งไฟล์ต้นฉบับจะปรากฎอยู่ทางด้านซ้ายมือ 4. ตำแหน่งที่จะใช้ในการอัพโหลดไฟล์ของเว็บไซต์ ซึ่งเป็นเครื่อง Server จะปรากฎอยู่ทางขวา
139 5 จากนั้น เลือกไฟล์เว็บไซต์ที่ต้องการอัพโหลดทางด้านซ้าย โดยสามารถลากไฟล์เข้าไปใส่ในโฟล์เดอร์ ทางขวาที่กำหนดให้ ในโปรแกรมได้ทันที ซึ่งส่วนใหญ่แล้วหากฝากไว้กับ Server ที่ให้บริการ จะมีโฟลเดอร์ สำหรับใส่ข้อมูลทำเว็บไซต์ ชื่อ htdocs ดังรูปข้างต้น
140 หน่วยที่ 10 กรณีศึกษาการสร้างเว็บเพจ 1. การสร้างหน้าเว็บด้วยภาษา HTML HTML (HyperText Markup Language) เป็นภาษาพื้นฐานที่ใช้ในการพัฒนาหน้าเว็บไซต์ ถูกคิดค้น มาให้เป็นภาษาที่ใช้และปรับแต่งโค้ดได้ง่าย แต่ละหน้าเว็บที่คุณเห็นในอินเทอร์เน็ตก็มาจากโค้ดนี้กันทั้งนั้น แหละ (ColdFusion, XML, XSLT) HTML นั้นไม่ยากเกินจะเรียน แต่ถ้าจะให้แอดวานซ์ถึงขั้นใช้ได้ครบถ้วน กระบวนความ ก็ต้องใช้เวลากันสักหน่อย อย่างถ้าอยากจะใส่สีหรือแต่งหน้าเว็บให้ตื่นตาตื่นใจมากยิ่งขึ้น ก็ต้อง หัดใช้ CSS ขั้นพื้นฐาน แต่นั่นคือหลังจากคุณคุ้นเคยกับหน้าเว็บแบบ HTML เรียบร้อยแล้วนะ ส่วน 1 จัดทำไฟล์ Text 1. เปิดโปรแกรมจัดทำไฟล์ text อันไหนก็ได้ขึ้นมา. NotePad ก็ได้ เพราะดาวน์โหลดมาใช้ได้ฟรี คุณเขียน ภาษา HTML ได้ด้วยแทบจะทุกโปรแกรมจัดทำและแก้ไขไฟล์ text แต่โปรแกรมไหนยิ่งแอดวานซ์ ปรับ ฟอร์แมตอัตโนมัติ ก็ยิ่งไม่สะดวกต่อการเขียนหน้าเว็บ HTML เราไม่แนะนำให้ใช้ TextEdit เพราะโปรแกรมนี้ชอบเซฟไฟล์เป็นฟอร์แมตที่เบราว์เซอร์ไม่ค่อยจะ ตรวจจับได้ว่าเป็นภาษา HTML หรือจะใช้ online HTML editor ก็ได้ แต่พวกโปรแกรมที่เน้นแก้ไขภาษา HTML โดยเฉพาะมักจะยากไปสักหน่อยสำหรับมือใหม่
141 2. เซฟไฟล์เป็น web page. เลือก File → Save As ในเมนูด้านบนสุด แล้วเปลี่ยนฟอร์แมตของไฟล์ไปเป็น "Web Page," ".html" หรือ ".htm" จากนั้นเซฟไว้ในที่ที่คุณหาเจอได้ง่ายๆ - จริงๆ แล้ว 3 ฟอร์แมตนี้ก็ใช้แทนกันได้หมดแหละ 3. เปิดไฟล์ในเบราว์เซอร์. พอดับเบิลคลิกแล้ว ไฟล์ก็จะเปิดขึ้นมาอัตโนมัติเป็นหน้าเว็บว่างๆ ในเบราว์เซอร์ หรือจะเปิดเบราว์เซอร์ขึ้นมาก่อนก็ได้ ไม่ว่าจะเป็น Firefox หรือ Internet Explorer ก็ตาม แล้วคลิก File → Open File เพื่อเลือกไฟล์ text นั้น - หน้าเว็บนี้ยังไม่ออนไลน์นะ ดูได้แค่ในคอมของคุณเท่านั้นแหละ
142 4. รีเฟรชหน้าเว็บดูว่าที่แก้ไขอะไรไปใช้ได้หรือยัง. พิมพ์ข้อความนี้ในเอกสารโล่งๆ ของคุณ: <strong>Hello</strong> จากนั้นเซฟเลย แล้วรีเฟรชหน้าเว็บโล่งๆ ในเบราว์เซอร์ดูอีกที ควรจะมีคำว่า "Hello" โผล่ขึ้นมาด้านบนของหน้า เป็นตัวหนาด้วยนะ ระหว่างขั้นตอนต่างๆ ข้างล่าง ถ้าตอนไหนเกิดอยาก ทดสอบ HTML ใหม่ของคุณขึ้นมา ก็ให้เซฟเอกสาร .html แล้วรีเฟรชหน้าเบราว์เซอร์ว่าภาษา HTML ที่ใช้ไป นั้นได้ผลออกมาเป็นยังไง - ถ้าเห็นคำว่า "<strong>" กับ "</strong>'' โผล่ขึ้นมาในเบราว์เซอร์ด้วย แปลว่าไฟล์ไม่ถูกอ่านเป็น HTML ได้ถูกต้อง ให้ลองเปลี่ยนไปใช้โปรแกรม text ตัวอื่น หรือลองเปลี่ยนเบราว์เซอร์ดู 5. ต้องเข้าใจ tag ต่างๆ ซะก่อน. คำสั่ง HTML นั้นจะอยู่ในรูปของ "tag" ที่คอยบอกเบราว์เซอร์ว่าต้องแปล แล้วแสดงหน้าเว็บออกมายังไง ทุก tag จะอยู่ในวงเล็บเหลี่ยม <แบบนี้> ซึ่งจะไม่แสดงในหน้าเว็บ แบบที่คุณ ได้ลองใช้ไปแล้วในตัวอย่างด้านบน: - <strong> ถือเป็น "tag เริ่มต้น" หรือ "tag เปิด" อะไรที่ตามหลัง tag นี้จะกลายเป็น "strong text" ทั้งหมด (พูดง่ายๆ คือกลายเป็นตัวหนาในหน้าเว็บ)
143 - </strong> ถือเป็น "tag จบ" หรือ "tag ปิด" ดูได้จากสัญลักษณ์ / ที่จะบอกว่า strong text นั้นจบ แค่ตรงไหน tag ส่วนใหญ่ (ไม่ใช่ทั้งหมด) ต้องมี tag ปิด ถึงจะใช้งานได้ ห้ามลืมเชียวล่ะ 6. มาเริ่มเขียนของจริงกัน. ลบทุกข้อความในไฟล์ text HTML ของคุณทิ้งก่อน แล้วเริ่มพิมพ์ใหม่ให้เป๊ะทุก ตัวอักษรตามนี้ (ไม่ต้องใส่จุด bullet points ไปด้วยนะ) โค้ด HTML นี้จะบอกเบราว์เซอร์ว่าคุณจะใช้ HTML ชนิดไหน และบอกว่า HTML ของคุณจะอยู่ระหว่าง tag <html> กับ </html> - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - <html> - </html>
144 7. ใส่ head กับ body tag. เอกสาร HTML ของคุณจะแบ่งออกเป็น 2 ส่วนด้วยกัน ส่วน "head" นั้นสำหรับ ข้อมูลพิเศษ อย่างชื่อของหน้าเว็บนั้น ในขณะที่ส่วน "body" จะเป็นเนื้อหาหลักของหน้าเว็บ ให้ใส่ลงไปทั้งคู่ อย่าลืม end tag เด็ดขาด ข้อความที่คุณต้องเพิ่มเข้าไปในขั้นตอนนี้เราทำไว้เป็นตัวหนาให้เห็นกันเลยชัดๆ: - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - <html> - <head> - </head> - <body> - </body> - </html> 8. ตั้งชื่อหน้าเว็บ. tag ส่วนใหญ่ในส่วนของ head นั้น ถ้าคุณเป็นมือใหม่ยังไม่ต้องรู้ไว้ก็ได้ แต่ title tag นี่สิที่ ง่ายหน่อย จะเป็นตัวกำหนดชื่อที่แสดงในหน้าต่างเบราว์เซอร์หรือแถบเบราว์เซอร์นั้น ให้ใส่ start แล้วก็ end tag ของ title ลงใน head tag แล้วตั้งชื่อ title ไว้ตรงกลางตามต้องการ - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - <html> - <head> - <title>หน้าเว็บ HTML แรกของฉัน</title> - </head> - <body> - </body> - </html>
145 ส่วน 2 ฟอร์แมต Text 1. พิมพ์เนื้อหาในส่วนของ body. ตรงนี้เราจะบอกคุณแค่ข้อความที่คุณต้องใส่ใน body tag เท่านั้น ข้อความอื่นก็เหมือนเดิมแหละ แต่เพื่อไม่ให้เสียเวลา เราจะไม่มานั่งทวนกันทุกครั้งที่ขึ้นขั้นตอนใหม่ ให้พิมพ์ อะไรที่จะใส่ลงไประหว่าง tag <body> กับ </body> แล้วจะกลายเป็นเนื้อหาแรกในหน้าเว็บของคุณ เช่น - <body> - ฉันกำลังเรียนรู้วิธีการสร้างหน้าเว็บด้วยภาษา HTML จากบทความของ wikiHow - </body>
146 2. ใส่ headers ลงในเอกสาร. คุณจัดระเบียบหน้าเว็บได้ง่ายๆ ด้วย header tag ซึ่งจะเป็นตัวบอก เบราว์เซอร์ให้แสดงข้อความที่อยู่ระหว่างกลางเป็นตัวอักษรที่ใหญ่กว่า เป็นตัวที่เครื่องมือต่างๆ และ bots ของ search engine ใช้ค้นหาว่าหน้าเว็บของคุณนั้นเกี่ยวกับเรื่องอะไร และมีการจัดการอย่างไร <h1> </h1> จะ เป็น header ที่ใหญ่ที่สุด แต่ถ้าจะเอาเล็กกว่านี้ก็ปรับได้ โดยขนาดเล็กที่สุดคือ <h6> </h6>. ลองเอาไปใช้ใน หน้าเว็บของคุณดูได้เลย - <body> - <h1>ยินดีต้อนรับสู่หน้าเว็บของฉัน</h1> - ฉันกำลังเรียนรู้วิธีการสร้างหน้าเว็บด้วยภาษา HTML จากบทความของ wikiHow - <h3>เป้าหมายของฉันในวันนี้:</h3> - <h5>เป้าหมายที่ทำสำเร็จ:</h5> - เรียนรู้วิธีใช้ headers - <h5>เป้าหมายที่ทำไม่สำเร็จ:</h5> - เรียนรู้วิธีใช้ tag ฟอร์แมตข้อความ - </body> 3. เรียนรู้วิธีใช้ tag ฟอร์แมตข้อความ. ตอนนี้คุณรู้จัก "strong" tag แล้ว แต่ยังมีอีกหลายวิธีที่ใช้ฟอร์แมต ข้อความของคุณได้ ให้ลองใช้ tag ข้างล่างนี่ดู หรือใช้ร่วมกันหลายๆ tag ในชุดข้อความเดียวกัน แต่ที่สำคัญ ที่สุดคือห้ามลืมปิดท้ายด้วย end tag เด็ดขาด! - <strong>ข้อความสำคัญ จะขึ้นเป็นตัวหนาในเบราว์เซอร์</strong> - <em>เน้นข้อความเป็นตัวเอียงในเบราว์เซอร์</em> - <small>ข้อความขนาดเล็กกว่าปกติ แต่จะปรับขนาดอัตโนมัติถ้าใช้เป็น heading</small> - <del>ข้อความที่ไม่ใช้แล้ว ข้อความจะถูกขีดฆ่าไว้</del> - <ins>ข้อความที่เพิ่มเข้ามาทีหลัง ข้อความจะถูกขีดเส้นใต้ไว้</ins>
147 4. จัดวางข้อความในหน้าเว็บ. คุณอาจสังเกตเห็นว่า ถึงกด "enter" แล้ว ข้อความก็ยังไม่ยอมลงมาที่อีก บรรทัดนึง tag ข้างล่างนี่เอาไว้แบ่งย่อหน้าและขึ้นบรรทัดใหม่ได้ หรือจะจัดวางข้อความแบบอื่นก็ได้ - <p> ย่อมาจาก "paragraph" หรือย่อหน้านั่นเอง ข้อความไหนที่อยู่ระหว่าง tag นี้ จะอยู่ในย่อหน้า เดียวกัน แยกจากข้อความด้านบนและด้านล่าง </p> - <br> จะเป็นการขึ้นบรรทัดใหม่ ห้าม ใส่ end tag ไปด้วยเด็ดขาด เพราะจะไม่ส่งผลต่อเนื้อหาอื่นๆ เอาไว้ใช้เวลาจะใส่กลอนหรือที่อยู่เป็นต้น อย่าใช้แบ่งย่อหน้า - <pre>ถ้าอยากกำหนดการแสดงข้อความแบบเฉพาะเจาะจง tag นี้จะกำหนดข้อความด้านในเป็น ฟอนต์แบบ fixed-width (ความกว้างของแต่ละตัวอักษรจะเท่ากัน) ให้คุณสามารถแบ่งวรรคหรือขึ้นบรรทัด ใหม่ได้เหมือนเวลาคุณพิมพ์ข้อความตามปกติที่ไม่ได้ใช้ tag</pre> - <blockquote>ใช้แสดงข้อความที่ยกมาอ้างอิงจากแหล่งอื่น</blockquote> จะแนบแหล่งที่มา ด้วยก็ได้โดยใช้ <cite>cite tag</cite>