1 / 40

อินเทอร์เน็ต

อินเทอร์เน็ต.

lila-le
Download Presentation

อินเทอร์เน็ต

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. อินเทอร์เน็ต อินเทอร์เน็ต ( Internet ) หมายถึงระบบเครือข่ายคอมพิวเตอร์ที่เชื่อมโยงกันทั่วโลกจนเป็นเครือข่ายคอมพิวเตอร์ขนดใหญ่ ซึ่งคำว่าอินเทอร์เน็ตมาจากคำว่า “ Inter Connection Network”โดยเครื่องคอมพิวเตอร์ทุกเครื่องที่เชื่อมต่อเข้ากับระบบเครือข่ายอินเทอร์เน็ตนั้นสามารถติดต่อสื่อสารถึงกันได้ โดยใช้มาตรฐานในการรับส่งข้อมูลหรือที่เรียกว่า Protocol

  2. ความสำคัญของอินเทอร์เน็ตความสำคัญของอินเทอร์เน็ต ปัจจุบันระบบอินเทอร์เน็ตนั้นมีความสำคัญต่อชีวิตประจำวันมากมายหลายด้าน ไม่ว่าจะเป็นด้านการศึกษา ด้านธุรกิจ ด้านการแพทย์และอื่นๆ สามารถอธิบายได้พอสังเขป เช่นทางการแพทย์ ทางวิศวกรรมศาสตร์ ทางดาราศาสตร์ และอื่นๆ ที่น่าสนใจนักศึกษาคิดว่าระบบเทอร์เน็ตเปรียบเสมือนอะไร

  3. ระบบชื่อโดเมน ระบบชื่อโดเมน ( Domain Name System ) หมายถึงระบบของชื่อที่ใช้เรียกแทนการเรียกหมายเลขอินเทอร์เน็ตหรือหมายเลขไอพี ( IP Address ) เนื่องจากหมายเลขไอพีมีความยุ่งยาก จึงได้มีการพัฒนาเอาระบบชื่อที่เป็นตัวอักษรมาใช้แทนหมายเลขไอพี เพื่อให้การใช้งานระบบเครือข่ายอินเทอร์เน็ตเป็นไปได้อย่างสะดวกยิ่งขึ้น เช่นเว็บไซต์ของสถาบันเทคโนโลยีราชมงคล มีหมายเลขไอพีคือ 202.44.130.164 ชึ่งยากต่อการจดจำ แต่จะใช้ชื่อโดเมนเรียกแทนเป็น www.rit.ac.thเพื่อให้ง่ายต่อการจดจำ

  4. ภาษาเอชทีเอ็มแอล ภาษาเอชทีเอ็มแอล( Hyper Text Markup Language: HTML )เป็นภาษาคอมพิวเตอร์ภาษาหนึ่ง เพื่อใช้นำเสนอเอกสารเผยแพร่ในระบบเครือข่ายอินเทอร์เน็ตที่เป็นลักษณะเหมือนใยแมงมุมที่เชื่อมต่อกันทั่วโลก www โครงสร้างการเขียนภาษานั้นจะอาศัยตัวกำกับเรียกว่า แท็ก ( Tag ) หรือป้ายระบุการแสดงผล เป็นตัวควบคุมการแสดงผลของข้อความรูปภาพ หรือวัตถุอื่นที่แสดงผลผ่านทางโปรแกรมเบราว์เซอร์ ( Browser )

  5. ป้ายระบุการแสดงผล • ป้ายระบุการแสดงผลหรือ แท็ก เป็นลักษณะเฉาะของภาษาเอชทีเอ็มแอล ใช้สำหรับการระบุรูปแบบของาคำสั่งหรือการลงรหัสคำสั่งของภาษาเอชทีเอ็มแอล ซึ่งจะอยู่ระหว่างเครื่องหมายน้อยกว่า ( < ) และเครื่องหมายมากกว่า ( > ) โดยที่ป้ายระบุการแสดงผลหรือ แท็ก ของภาษาเอชทีเอ็มแอลนี้ สามารถแบ่งได้ 2 ลักษณะคือ • ป้ายระบุการแสดงผลเดี่ยวหรือแท็กเดี่ยว เป็นป้ายระบุการแสดงผลที่ไม่ต้องมีการปิดรหัส เช่น <p> ,<hr>เป็นต้น • ป้ายระบุการแสดงผลเปิด/ปิดหรือแท็กเปิด/ปิด เป็นป้ายระบุการแสดงที่ประกอบด้วยป้ายระบุการแสดงผลเปิดหรือแท็กเปิด และป้ายระบุการแสดงผลปิดหรือแท็กปิด โดยป้ายระบุการแสดงผลปิดจะมีเครื่องหมาย สแลช ( slash , / ) เช่น <h1>…</h1> , <b>…</b>

  6. โปรแกรมสร้างเอกสารเว็บโปรแกรมสร้างเอกสารเว็บ ภาษาเอชทีเอ็มแอล ซึ่งมีลักษณะเหมือนกับการเขียนโปรแกรมภาษาคอมพิวเตอร์ทั่วไป ซึ่งอาจสร้างโดยใช้โปรแกรมสำหรับจัดการเกี่ยวกับแฟ้มข้อความตัวอักษร ( Text Editor ) เช่นโปรแกรม Notepad ในปัจจุบันมีโปรแกรมสำหรับใช้เป็นเครื่องมือในการช่วยพัฒนาเว็บเพจ มากมาย ทั้งแบบช่วยลงรหัสภาษาเอชทีเอ็มแอล และแบบสร้างเว็บเพจ แบบอัตโนมัติ

  7. ลักษณะโครงสร้างของเว็บเพจลักษณะโครงสร้างของเว็บเพจ • แสดงโครงสร้างของเว็บเพจแบบสำดับชั่น • แสดงโครงสร้างของเว็บเพจแบบเชิงเส้น • แสดงโครงสร้างของเว็บเพจแบบผสม • แสดงโครงสร้างของเว็บเพจเพื่อนำเสนอความรู้เกี่ยวกับคอมพิวเตอร์

  8. การจัดเตรียมภาพที่เกี่ยวข้องกับเนื้อหาเว็บการจัดเตรียมภาพที่เกี่ยวข้องกับเนื้อหาเว็บ • แฟ้มข้อมูลรูปภาพที่นำมาใช้ในการทำเว็บนั้น ปัจจุบันนิยมใช้อยู่ 2 รูป • ไฟล์ฟอร์แมต JPEG • ไฟล์ฟอร์แมต GIF

  9. การกำหนดโฟลเดอร์สำหรับเก็บข้อมูลการกำหนดโฟลเดอร์สำหรับเก็บข้อมูล คลิกขวา เลือกNew > เลือก Folder > แล้วตั้งชื่อ Folder ว่า HTML

  10. โครงสร้างของเอกสารเอชทีเอ็มแอลโครงสร้างของเอกสารเอชทีเอ็มแอล โครงสร้างของเอกสารเอชทีเอ็มแอลนั้นจะประกอบด้วย 2 ส่วนคือ ส่วนหัวของเอกสาร (Head Section) และ ส่วนเนื้อหาของเอกสาร (Body Section)

  11. โครงสร้าง HTML <HTML> <HEAD> <TITLE>ชื่อเรื่องของเอกสาร</TITLE> </HEAD> <BODY> เอกสาร HTML เอกสารแรก </BODY> </HTML>

  12. การกำหนดสีของพื้นหลังการกำหนดสีของพื้นหลัง <HTML> <HEAD> <TITLE>การกำหนดสีของพื้นหลังเอกสาร</TITLE> </HEAD> <BODYBGCOLOR = Red > เอกสาร HTML เอกสารแรก </BODY> </HTML>

  13. การกำหนดสีของพื้นหลังการกำหนดสีของพื้นหลัง <HTML> <HEAD> <TITLE>การกำหนดสีของพื้นหลังเอกสาร</TITLE> </HEAD> <BODYBGCOLOR = #00FFFF > เอกสาร HTML เอกสารแรก </BODY> </HTML>

  14. การกำหนดสีของพื้นหลังการกำหนดสีของพื้นหลัง <HTML> <HEAD> <TITLE>การกำหนดสีของตัวอักษร</TITLE> </HEAD> <BODYTEXT = Blue> เอกสาร HTML เอกสารแรก </BODY> </HTML>

  15. การกำหนดสีของพื้นหลังการกำหนดสีของพื้นหลัง <HTML> <HEAD> <TITLE>การกำหนดสีของตัวอักษร</TITLE> </HEAD> <BODYTEXT = #FF00FF> เอกสาร HTML เอกสารแรก </BODY> </HTML>

  16. การกำหนดสีของพื้นหลังและตัวอักษรการกำหนดสีของพื้นหลังและตัวอักษร <HTML> <HEAD> <TITLE>การกำหนดสีของพื้นหลังและตัวอักษร</TITLE> </HEAD> <BODYBGCOLOR=Yellow TEXT = #FF00FF> เอกสาร HTML เอกสารแรก </BODY> </HTML>

  17. ขนาดของตัวอักษร <HTML> <HEAD> <TITLE>ขนาดของตัวอักษร</TITLE> </HEAD> <BODY> <H1>ข้อความหัวเรื่องระดับ H1</H1> <H2>ข้อความหัวเรื่องระดับ H2</H2> <H3>ข้อความหัวเรื่องระดับ H3</H3> <H4>ข้อความหัวเรื่องระดับ H4</H4> <H5>ข้อความหัวเรื่องระดับ H5</H5> <H6>ข้อความหัวเรื่องระดับ H6</H6> </BODY> </HTML>

  18. จัดตัวอักษร <HTML> <HEAD> <TITLE>จัดตัวอักษร</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <H2 ALIGN=Center>ข้อความH2 จัดกึ่งกลาง</H2> <H3 ALIGN=right> ข้อความH3 จัดขวา</H3> <H4 ALIGN=left> ข้อความH4 จัดซ้าย</H4> </BODY> </HTML>

  19. การขึ้นบรรทัดใหม่ การแสดงผลด้วยโปรแกรมเว็บเบราว์เซอร์นั้น การขึ้นบรรทัดใหม่ด้วยการกดปุ่ม Enter ที่แป้นพิมพ์เพื่อขึ้นบรนรทัดใหม่ ในเอกสารเว็บทีเป็นภาษาเอชที่เอ็มแอลใช้ <BR> <HTML> <HEAD> <TITLE>จัดตัวอักษร</TITLE> </HEAD> <BODY> ก่อนการใช้คำสั่ง BR บรรทัดที่1 บรรทัดที่2 บรรทัดที่3 <BR> การใช้คำสั่ง BR <BR> บรรทัดที่1<BR> บรรทัดที่2<BR> บรรทัดที่3<BR> </BODY> </HTML>

  20. การย่อหน้าใหม่ การใช้คำสั่งนี้คือเมื่อต้องกานขึ้นบรรทัดใหม่เหมือนกับคำสั่ง <BR>แต่จะทการเว้นบรรทัดใหม่เพิ่มขึ้นให้อีกหนึ่งบรรทัด โดยคำสั่ง <P>นั้นสามารถใช้ได้ทั้งแบบที่เป็นป้ายระบุเดี่ยวและป้ายระบุเปิด/ปิดก็ได้ โดยหากต้องการกำหนดลักษณพิเศษเพิ่มเตืมจะต้องใช้ในลักษณะของป้ายระบุป้ายเปิด/ปิดเท่านั้น ตัวอย่างคือ <P “align= type”>….</P> โดย align type นั้นสามารถใช้ได้ทั้ง center , left หรือ right

  21. <HTML> <HEAD> <TITLE>แสดงคำสั่งการจัดย่อหน้า</TITLE> </HEAD> <BODY> <p> การใช้คำสั่ง P คือเมื่อต้องการขึ้นบรรทัดใหม่เหมือนกับคำสั่งBR แต่จะทำการเว้นบรรทัดใหม่เพิ่มขึ้นให้อี่หนึ่งบรรทัด </P> <P align = center> การใช้คำสั่ง P คือเมื่อต้องการขึ้นบรรทัดใหม่เหมือนกับคำสั่งBR แต่จะทำการเว้นบรรทัดใหม่เพื่มขึ้นให้อีกหนึ่งบรรทัด </P> <P align = right> การใช้คำสั่งนี้ P เมื่อต้องการขึ้นบรรทัดใหม่เหมือนกับคำสั่งBR แต่จะทำการเว้นบรรทัดใหม่อี่หนึ่งบรรทัด </P> </BODY> </HTML>

  22. เส้นคั่น การใช้งานคำสั่งนี้เมื่อต้องการแบ่งข้อความบนจอภาพ โดยใช้เส้นคั่นทางแนวนอนนของจอภาพซึ่งสามารถหนดตำแหน่ง สี ขนาดของความหนา ความยาว หรือกำหนดแบบเส้นทึบได้ โดยมีรูปแบบการใช้งานคำสั่งดังนี้

  23. คำสั่งเส้นคัน <HTML> <HEAD> <TITLE>คำสั่งเส้นคั่นHTML</TITLE> </HEAD> <BODY> <HR> <HR width=200> <HR width=100 align=center> <HR width=100 align=right size=10> <HR noshade> <HR width=200 align=center noshade size=15> <HR color=blue size=10> <HR color=red size=10 width = 300 noshade> </BODY> </HTML>

  24. การจัดรูปแบบตัวอักษร ( ตัวหนา ) <HTML> <HEAD> <TITLE>การกำหนดตัวอักษรตัวหนา</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <B> ตัวอักษรตัวหนา </B> </BODY> </HTML>

  25. การจัดรูปแบบตัวอักษร (ขีดเส้นใต้) <HTML> <HEAD> <TITLE>การกำหนดตัวอักษรตัวขีดเส้นใต้</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <U> ตัวอักษรตัวขีดเส้นใต้ </U> </BODY> </HTML>

  26. การจัดรูปแบบตัวอักษร (เอียง) <HTML> <HEAD> <TITLE>การกำหนดตัวอักษรตัวเอียง</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <I> ตัวอักษรตัวเอียง</I> </BODY> </HTML>

  27. การจัดรูปแบบตัวอักษร (ตัวห้อย) <HTML> <HEAD> <TITLE>การกำหนดตัวอักษรตัวห้อย</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <SUB> ตัวอักษรตัวห้อย</ SUB > </BODY> </HTML>

  28. การจัดรูปแบบตัวอักษร (ตัวยก) <HTML> <HEAD> <TITLE>การกำหนดตัวอักษรตัวยก</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <SUP> ตัวอักษรตัวยก</ SUP> </BODY> </HTML>

  29. การจัดรูปแบบตัวอักษร (ตัวเคลื่อนที่) งานที่ 8 <HTML> <HEAD> <TITLE>กำหนดตัวอักษรตัวเคลื่อนที่ขวามาซ้าย</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <MARQUEE> ตัวอักษรตัวเคลื่อนที่ขวามาซ้าย</MARQUEE> </BODY> </HTML>

  30. การจัดรูปแบบตัวอักษร (ตัวเคลื่อนที่) งานที่9 <HTML> <HEAD> <TITLE>กำหนดตัวอักษรตัวเคลื่อนซ้ายไปขวา</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <marquee direction="right">ตัวเคลื่อนซ้ายไปขาว</marquee> </BODY> </HTML>

  31. การจัดรูปแบบตัวอักษร (ตัวเคลื่อนที่) งานที่ 10 <HTML> <HEAD> <TITLE>กำหนดตัวอักษรตัวเคลื่อนตัวล่างขึ้นบน</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <marquee direction="up">ตัวล่างขึ้นบน</marquee> </BODY> </HTML>

  32. การจัดรูปแบบตัวอักษร (ตัวเคลื่อนที่) งานที่ 11 <HTML> <HEAD> <TITLE>กำหนดตัวอักษรตัวเคลื่อนบนลงล่าง</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ <marquee direction="down">ตัวบนลงล่าง</marquee> </BODY> </HTML>

  33. การจัดรูปแบบตัวอักษร (ตัวเคลื่อนที่) งานที่ 12 <HTML> <HEAD> <TITLE>การกำหนดตัวอักษรตัวเคลื่อนที่เด่งไปเด่งมา</TITLE> </HEAD> <BODY > ตัวอักษรปรกติ<Br> <marquee behavior="alternate">เด้งไปเด้งมาtext</marquee> </BODY> </HTML>

  34. การกำหนดฟอนต์ของตัวอักษรการกำหนดฟอนต์ของตัวอักษร <HTML> <HEAD> <TITLE>font face</TITLE> </HEAD> <BODY > ตัวอักษรปรกติ<BR> <Font Face =“MS Sans Serif”> ตัวอักษร Ms sans Serif </Font><BR> <Font Face =“Times New Roman”> ตัวอักษร Times New Roman </Font><BR> </BODY> </HTML>

  35. กำหนดสีของตัวอักษร <HTML> <HEAD> <TITLE>กำหนดสีของตัวอักษร</TITLE> </HEAD> <BODY > ตัวอักษรปรกติ<BR> <FONT color=“red”>สึแดง</FONT><BR> <FONT color=“green”>สึเขียว</FONT><BR> <FONT color=“blue”>สีน้ำเงิน</FONT><BR> <FONT color=“#9935a5”>รหัสสี</FONT><BR> <FONT color=“#005599”>รหัสสี</FONT><BR> </BODY> </HTML>

More Related