19
หหหหหหหหหหหหห หหหหหห 1 หหหหหหหหหหหหหหห หหหหหหหหหหหหห HTML

หน่วยการเรียนรู้ที่ 1

  • Upload
    isabnan

  • View
    52

  • Download
    0

Embed Size (px)

Citation preview

Page 1: หน่วยการเรียนรู้ที่  1

หน่�วยการเรยน่ร��ที่� 1อิ�น่เที่อิร�เน่�ตและโครงสร�าง

ภาษา HTML

Page 2: หน่วยการเรียนรู้ที่  1

ประว�ต�และความเป!น่มาขอิงอิ�น่เที่อิร�เน่�ตอิ�น่เที่อิร�เน่�ต ค#อิ เคร#อิข�ายคอิมพิ�วเตอิร�ที่�

เป!น่เคร#อิข�ายขน่าดใหญ่� และกว�างที่��วโลก ซึ่)�งมที่�*งเคร#อิข�ายขน่าดใหญ่� และขน่าดย�อิยจำ,าน่วน่มากเชื่#�อิมต�อิก�น่ เป!น่จำ,าน่วน่หลายร�อิยล�าน่เคร#�อิง ซึ่)�งใชื่�การต�ดต�อิส#�อิสารข�อิม�ลถึ)งก�น่ แต�ละหน่�วยงาน่จำะร�บผิ�ดชื่อิบเน่�ตเว�ร�คขอิงตน่เอิง ข�อิม�ลที่�ใชื่�ใน่การต�ดต�อิส#�อิสารไม�ว�าจำะเป!น่ใน่ร�ปแบบขอิงร�ปภาพิ ข�อิความ และเสยง โดยผิ�าน่ระบบเคร#อิข�ายคอิมพิ�วเตอิร�ที่�มผิ��ใชื่�งาน่กระจำ�ายอิย��ที่��วโลกกาให�บร�การต�างๆ บน่เคร#อิข�ายอิ�น่เที่อิร�เน่�ต

Page 3: หน่วยการเรียนรู้ที่  1

อิ�น่เที่อิร�เน่�ต (Internet) ซึ่)�งเป!น่แหล�งที่�ใชื่�ใน่การเก�บข�อิม�ลจำ,าน่วน่มาก หร#อิอิาจำเรยกได�ว�าเป!น่ห�อิงสม3ดขน่าดใหญ่�ที่��วโลก ข�อิม�ลมหลายร�ปแบบต�างๆ ไม�ว�าจำะเป!น่ข�อิม�ล ร�ปภาพิ เสยง และอิ#�น่ๆที่�เราสามารถึค�น่คว�าและร�บส�งข�อิม�ลไปมาระหว�างก�น่ได� ด�งน่�*น่อิาจำกล�าวได�ว�าอิ�น่เที่อิร�เน่�ตมประโยชื่น่�หลายด�าน่และย��งใน่ป4จำจำ3บ�น่ อิ�น่เที่อิร�เน่�ตย��งมความส,าค�ญ่ที่3กวงการและอิาชื่พิก�ว�าได�ใน่ย3คส�งคมข�อิม�ลและข�าวสารเป!น่อิย�างมากอิ�น่เที่อิร�เน่�ตจำะที่,าหน่�าที่�เหม#อิน่ห�อิงสม3ดอิ�เล�กเที่อิน่�กส�ขน่าดใหญ่�ซึ่)�งใน่อิ�น่เที่อิร�เน่�ตจำะมข�อิม�ลต�างๆ มากมายโดยอิ�น่เที่อิร�เน่�ตจำะจำ�ดเป!น่บร�การใน่ร�ปแบบต�างๆ ด�งน่*

Page 4: หน่วยการเรียนรู้ที่  1

ประว�ต�ขอิงอิ�น่เที่อิร�เน่�ต         อิ�น่เที่อิร�เน่�ตก,าเน่�ดข)*น่คร�*งแรกใน่ประเที่ศสหร�ฐอิเมร�กา เม#�อิ พิ.ศ. 2512 โดยอิงค�กรที่างที่หาร ขอิงสหร�ฐอิเมร�กา ชื่#�อิว�า ย�.เอิส.ดเฟน่ซึ่� ดพิาร�ที่ เมน่ที่� ( U.S. Defence Department ) เป!น่ผิ��ค�ดค�น่ระบบข)*น่มา มว�ตถึ3ประสงค� ค#อิ เพิ#�อิให�มระบบเคร#อิข�ายที่�ไม�มว�น่ตายแม�จำะมสงคราม ระบบการส#�อิสารถึ�กที่,าลาย หร#อิต�ดขาด แต�ระบบเคร#อิข�ายแบบน่*ย�งที่,างาน่ได�ซึ่)�งระบบด�งกล�าวจำะใชื่�ว�ธีการส�งข�อิม�ลใน่ร�ปขอิงคล#�น่ไมโครเวฟ ฝ่;ายว�จำ�ยขอิงอิงค�กรจำ)งได�จำ�ดต�*งระบบเน่�ตเวร�<กข)*น่มา เรยกว�า Arpanet ย�อิมาจำากค,าว�า Advance Research Project Agency net ซึ่)�งประสบความส,าเร�จำและได�ร�บความน่�ยมใน่หม��ขอิงหน่�วยงาน่ที่หาร อิงค�กร ร�ฐบาล และสถึาบ�น่การศ)กษาต�างๆ เป!น่อิย�างมาก

Page 5: หน่วยการเรียนรู้ที่  1

การเชื่#�อิมต�อิใน่ภาพิแรกแบบเด�ม ถึ�าระบบเคร#อิข�ายถึ�กต�ดขาด ระบบก�จำะเสยหายและที่,าให�การเชื่#�อิมต�อิขาดอิอิกจำากก�น่ แต�ใน่เคร#อิข�ายแบบใหม� แม�ว�าระบบเคร#อิข�ายหน่)�งถึ�กต�ดขาด เคร#อิข�ายก�ย�งด,าเน่�น่ไปได�ไม�เสยหาย เพิราะโดยต�วระบบก�หาชื่�อิงที่างอิ#�น่เชื่#�อิมโยงก�น่จำน่ได�ใน่ระยะแรก เม#�อิ Arpanet ประสบความส,าเร�จำ ก�มอิงค�กรมหาว�ที่ยาล�ยต�างๆ ให�ความสน่ใจำเข�ามาร�วมใน่โครงข�ายมากข)*น่ โดยเน่�น่การร�บส�งจำดหมายอิ�เล�กที่รอิน่�กส� ( Electronic Mail ) ระหว�างก�น่เป!น่หล�ก ต�อิมาก�ได�ขยายการบร�การไปถึ)งการส�งแฟ=มข�อิม�ลข�าวสารและส�งข�าวสารความร��ที่��วไป แต�ไม�ได�ใชื่�ใน่เชื่�งพิาณิ�ชื่ย� เน่�น่การให�บร�การด�าน่ว�ชื่าการเป!น่หล�ก

Page 6: หน่วยการเรียนรู้ที่  1

ป? พิ.ศ. 2523 คน่ที่��วไปเร��มสน่ใจำอิ�น่เที่อิร�เน่�ตมากข)*น่ มการน่,าอิ�น่เที่อิร�เน่�ตมาใชื่�ใน่เชื่�งพิาณิ�ชื่ย� มการที่างธี3รก�จำบน่อิ�น่เที่อิร�เน่�ต บร�ษ�ที่ ห�างร�าน่ต�างๆ ก�เข�าร�วมเคร#อิข�ายอิ�น่เที่อิร�เน่�ตมากข)*น่

Page 7: หน่วยการเรียนรู้ที่  1

• การให�บร�การเว�ลด�ไวด�เว�บ (World Wide Web : WWW) เป!น่การให�บร�การต�างๆ บน่อิ�น่เที่อิร�เน่�ต ที่�มร�ปแบบการให�บร�การที่�หลากหลายไม�ว�าจำะเป!น่ การค�น่หาและแสดงข�อิม�ลแบบม�ลต�มเดย บน่อิ�น่เที่อิร�เน่�ตที่3กประเภที่ ซึ่)�งข�อิม�ลและสารสน่เที่ศที่�ได�ร�บจำากการใชื่�บร�การอิาจำจำ�ดอิย��ใน่ร�ปแบบขอิงข�อิความ ร�ปภาพิ หร#อิ เสยงก�ได� และใน่ร�ปแบบอิ#�น่ๆอิกมากมาย ซึ่)�งการบร�การเว�ลด�ไวด�เว�บ (WWW) น่*จำะเป!น่การเชื่#�อิมโยงเว�บเพิจำแต�ละหน่�าเข�าหาก�น่ได� หร#อิเป!น่การเย�ยมชื่มโดยการเป@ดเว�บเพิจำหน่)�ง ไปย�งอิกเว�บเพิจำอิ#�น่ โดยมการที่,างาน่แบบไคลเอิน่ที่�/เซึ่�ร�ฟเวอิร� ซึ่)�งผิ��ใชื่�บร�การสามารถึค�น่หาข�อิม�ล หร#อิใชื่�บร�การใน่ร�ปแบบต�างๆ จำากเคร#�อิงที่�ให�บร�การซึ่)�งเรยกว�าเว�บเซึ่�ร�ฟเวอิร� โดยอิาศ�ยโปรแกรม ที่�ใชื่�ด�ข�อิม�ล เว�บบราวเซึ่อิร� (Web Browser) ซึ่)�งผิลที่�ได�จำะมการแสดงเป!น่ไฮเปอิร�เที่�กซึ่� ใน่ป4จำจำ3บ�น่ได�มการพิ�ฒน่าเว�บเพิจำด�วยโปรแกรมเขยน่เว�บเพิจำใน่ร�ปแบบต�างๆ แต�ผิลล�พิธี�และว�ตถึ3ประสงค�ส�วน่ใหญ่�ม�กเป!น่การผิน่วกร�ปภาพิ เสยง ภาพิเคล#�อิน่ไหว และสามารถึเชื่#�อิมโยงไปย�งเอิกสารหร#อิข�อิม�ลอิ#�น่ๆ ได�โดยตรง

Page 8: หน่วยการเรียนรู้ที่  1

• จำดหมายอิ�เล�กที่รอิน่�กส� (Electronic Mail) การต�ดต�อิส#�อิสารโดยใชื่�อิเมลสามารถึที่,าได�โดยสะดวก และประหย�ดเวลา หล�กการที่,างาน่ขอิงอิเมลก�คล�ายก�บการส�งจำดหมายธีรรมดา น่�*น่ค#อิ จำะต�อิงมที่�อิย��ที่�ระบ3ชื่�ดเจำน่ ก�ค#อิ อิเมลแอิดเดรส (E-mail address)

• บร�การโอิน่ย�ายไฟล� (File Transfer Protocol) เป!น่บร�การที่�เก�ยวข�อิงก�บการโอิน่ย�ายไฟล�ผิ�าน่ระบบอิ�น่เที่อิร�เน่�ต การโอิน่ย�ายไฟล�

Page 9: หน่วยการเรียนรู้ที่  1

• การดาวน่�โหลดไฟล� (Download File ) การดาวน่�โหลดไฟล� ค#อิ การร�บข�อิม�ลเข�ามาย�งเคร#�อิงคอิมพิ�วเตอิร�ขอิงผิ��ใชื่� ใน่ป4จำจำ3บ�น่มหลายเว�บไซึ่ต�ที่�จำ�ดให�มการดาวน่�โหลดโปรแกรมได�ฟรเชื่�น่ www.download.com

• การอิ�พิโหลดไฟล� (Upload File) การอิ�พิโหลดไฟล�ค#อิการน่,าไฟล�ข�อิม�ลจำากเคร#�อิงขอิงผิ��ใชื่�ไปเก�บไว�ใน่เคร#�อิงที่�ให�บร�การ (Server) ผิ�าน่ระบบอิ�น่เที่อิร�เน่�ต เชื่�น่ กรณิที่�ที่,าการสร�างเว�บไซึ่ต� จำะมการอิ�พิโหลดไฟล�ไปเก�บไว�ใน่เคร#�อิงบร�การเว�บไซึ่ต� (Web server) ที่�เราขอิใชื่�บร�การพิ#*น่ที่� (web server) โปรแกรมที่�ชื่�วยใน่การอิ�พิโหลดไฟล�เชื่�น่ FTP Commander

Page 10: หน่วยการเรียนรู้ที่  1

• บร�การสน่ที่น่าบน่อิ�น่เที่อิร�เน่�ต (Instant Message) สน่ที่น่าบน่อิ�น่เที่อิร�เน่�ตค#อิ การ ส�งข�อิความถึ)งก�น่โดยที่�น่ที่ที่�น่ใด น่อิกจำากน่*ย�งสามารถึส�งส�ญ่ล�กษณิ�ต�างๆ อิาที่� ร�ปภาพิ ไฟล�ข�อิม�ลได�ด�วย การสน่ที่น่าบน่อิ�น่เที่อิร�เน่�ตเป!น่โปรแกรมที่�ก,าล�งได�ร�บความน่�ยมใน่ป4จำจำ3บ�น่ โปรแกรมประเภที่น่* เชื่�น่ โปรแกรม ICQ (I seek you) MSN Messenger, Yahoo Messenger เป!น่ต�น่

Page 11: หน่วยการเรียนรู้ที่  1

โครงสร�างค,าส��งขอิง HTMLการใชื่�งาน่ 

    ใน่บที่ที่�แล�วเราได�ลอิงเขยน่ HTML ก�น่ด�บ�างแล�ว ใน่บที่น่*เราจำะลงรายละเอิยดค,าส��งขอิง HTML โดยการใชื่�งาน่หล�กจำะมด�งน่* 

Page 12: หน่วยการเรียนรู้ที่  1

1. ค,าส��ง หร#อิ TagTag เป!น่ล�กษณิะเฉพิาะขอิงภาษา HTML ใชื่�

ใน่การระบ3ร�ปแบบค,าส��ง หร#อิการลงรห�สค,าส��ง HTML ภายใน่เคร#�อิงหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่� Tag HTML แบ�งได� 2 ล�กษณิะ ค#อิ 

     Tag เด�ยว     เป!น่ Tag ที่�ไม�ต�อิงมการป@ดรห�ส เชื่�น่ <HR>, <BR> เป!น่ต�น่     Tag เป@ด/ป@ด     ร�ปแบบขอิง tag น่*จำะเป!น่แบบ <tag> .... </tag> โดยที่�             <tag> เราเรยกว�า tag เป@ด            </tag> เราเรยกว�า tag ป@ด

Page 13: หน่วยการเรียนรู้ที่  1

2. Attributes            Attributes เป!น่ต�วบอิกรายละเอิยดขอิง tag น่�*น่เชื่�น่ <span align = 'left'> ... </span> เป!น่การบอิกว�าให�อิ�กษรที่�อิย��ใน่ tag น่*ชื่�ดซึ่�าย

3. not case sensitive             หมายถึ)ง ค3ณิจำะพิ�มพิ� <BR> หร#อิ <br> ก�ได� ผิลล�พิธี�อิอิกมาไม�ต�างก�น่

Page 14: หน่วยการเรียนรู้ที่  1

โครงสร�างขอิงหล�กขอิง HTML 

โครงสร�างหล�กขอิง HTML ก�จำะเร��มด�วย <html> และจำบด�วย </html> เสมอิ ซึ่)�งชื่3ดค,าส��งที่�ใชื่�จำะแยกเป!น่ 2 ส�วน่ค#อิ 

        1. head ค,าส��งที่�อิย��ใน่ส�วน่น่*จำะใชื่�บรรยายรายละเอิยดเก�ยวก�บ web page ซึ่)�งจำะไม�แสดงผิลที่� web page โดยตรง

        2. body ค,าส��งที่�อิย��ใน่ส�วน่น่*จำะใชื่�ใน่การจำ�ดร�ปแบบต�วอิ�กษร จำ�ดหน่�า ใส�ร�ปภาพิ ซึ่)�งต�วอิ�กษรใน่ส�วน่น่*จำะแสดงที่� web brower โดยตรง

Page 15: หน่วยการเรียนรู้ที่  1

ค,าส��งใน่ห�วข�อิขอิง head (Head Section)Head Section เป!น่ส�วน่ที่�ใชื่�อิธี�บาย

เก�ยวก�บข�อิม�ลเฉพิาะขอิงหน่�าเว�บน่�*น่ๆ เชื่�น่ ชื่#�อิเร#�อิงขอิงหน่�าเว�บ (Title), ชื่#�อิผิ��จำ�ดที่,าเว�บ (Author), คย�เว�ร�ดส,าหร�บการค�น่หา (Keyword) โดยม Tag ส,าค�ญ่ ค#อิ

ค,าส��งใน่ห�วข�อิขอิง Title (Title Bar)ข�อิความที่�ใชื่�เป!น่ TITLE ไม�ควรพิ�มพิ�เก�น่

64 ต�วอิ�กษร, ไม�ต�อิงใส�ล�กษณิะพิ�เศษ เชื่�น่ ต�วหน่า, เอิยง หร#อิส โดยข�อิความใน่ส�วน่น่*จำะแสดงผิลใน่ title bar ขอิง web browser 

Page 16: หน่วยการเรียนรู้ที่  1

META    Tag META จำะไม�ปรากฏผิลบน่เบราเซึ่อิร� แต�จำะเป!น่ส�วน่ส,าค�ญ่ ใน่การจำ�ดอิ�น่ด�บบ�ญ่ชื่เว�บ ส,าหร�บผิ��ให�บร�การส#บค�น่เว�บ (Search Engine เชื่�น่ google , yahoo) 

Page 17: หน่วยการเรียนรู้ที่  1

charset=TIS-620 ใชื่�บอิกว�าใชื่�ชื่3ดต�วอิ�กษรแบบใดใน่การแสดงผิล ภาษาไที่ยเราใชื่� charset=TIS-620 หร#อิอิาจำเป!น่ charset=windows-874 ก�ได� ตอิน่น่*แน่ะน่,าให�ใชื่�เป!น่ charset=utf-8 

keyword ด�งภาพิด�าน่บน่จำะเห�น่ว�าเราสามารถึใชื่� keywords มากกว�า 1 ค,าได�โดยใชื่�เคร#�อิงหมาย (,) ใน่การค��น่ระหว�างค,า 

การพิ�มพิ�ชื่3ดค,าส��ง HTML สามารถึพิ�มพิ�ได�ที่�*งต�วพิ�มพิ�เล�ก ต�วพิ�มพิ�ใหญ่� หร#อิผิสม การย�อิหน่�า เว�น่บรรที่�ด หร#อิชื่�อิงว�าง สามารถึกระที่,าได�อิ�สระ โปรแกรมเบราเซึ่อิร�จำะไม�สน่ใจำเก�ยวก�บระยะเว�น่บรรที่�ดหร#อิย�อิหน่�า หร#อิชื่�อิงว�าง 

Page 18: หน่วยการเรียนรู้ที่  1

2. ค,าส��งใน่ส�วน่ขอิง (Body Section)

        Body Section เป!น่ส�วน่เน่#*อิหาหล�กขอิงหน่�าเว�บ ซึ่)�งการแสดงผิลจำะต�อิงใชื่� Tag จำ,าน่วน่มาก ข)*น่อิย��ก�บล�กษณิะขอิงข�อิม�ล เชื่�น่ ข�อิความ, ร�ปภาพิ, เสยง, วด�โอิ หร#อิไฟล�ต�างๆ 

        ส�วน่เน่#*อิหาเอิกสารเว�บ เป!น่ส�วน่การที่,างาน่หล�กขอิงหน่�าเว�บ ประกอิบด�วย Tag มากมายตามล�กษณิะขอิงข�อิม�ล ที่�ต�อิงการน่,าเสน่อิ การป=อิน่ค,าส��งใน่ส�วน่น่* ไม�มข�อิจำ,าก�ดสามารถึป=อิน่ต�ดก�น่ หร#อิ 1 บรรที่�ดต�อิ 1 ค,าส��งก�ได� แต�ม�กจำะย)ดร�ปแบบที่�อิ�าน่ง�าย ค#อิ การที่,าย�อิหน่�าใน่ชื่3ดค,าส��งที่�เก�ยวข�อิงก�น่ ที่�*งน่*ให�ป=อิน่ค,าส��งที่�*งหมดภายใต� Tag <BODY> </BODY>

Page 19: หน่วยการเรียนรู้ที่  1