Embed Size (px)
Citation preview
Key words
Webpage - หนาเอกสารตาง ๆทใชเผยแพรขอมล ขาวสาร ของบคคล องคกร หรอ หนวยงานตาง ๆ
Website - กลมของเวบเพจหลาย ๆ หนา โดยม โฮมเพจเปนเวบเพจหนา แรก ทมความสวยงาม เพอดงดดความสนใจของผเขาชมเวบไซต และเวบไซต
หมายถง แหลงขาวสาร ขอมลของบคคล องคกร หรอ หนวยงานตางๆ บนระบบอนเทอรเนต
Homepage - เวบเพจหนาแรกของเวบไซต จะมความสวยงามเปนพเศษ เพอดงดดความสนใจ ของผเขาชมเวบไซต และมจดเชอมโยงไปยงเวบเพจ
หนาตาง ๆ
Server and client - การตดตอสอสารบนระบบเครอขายอนเทอรเนตทม เครองคอมพวเตอรเชอมตอเขาดวยกนทวโลกนน จะมการตดตอสอสาร 2
แบบ คอ แบบสงขอมลและรบขอมล โดยเครองคอมพวเตอรททำาหนาทในการ สงขอมล เรยกวา เครองใหบรการ (Server) หรอบางทอาจเรยกวา "เครอง
แมขาย" สวนเครองคอมพวเตอรทรบขอมลหรอ เรยกขอขอมลจากเครองแมขายไปใชงานจะเรยกวา เครองรบบรการ (Client) หรอบางทอาจเรยกวา"เครองลกขาย"
- World Wide Web (WWW) เปนบรการรปแบบหนงในระบบอนเทอรเนต ทเราทกคนคนเคยและใชบรการนกนอยทกวนในการใชงานระบบ
อนเทอรเนตทเราเรยกสนวา "เวบ" นนเอง โดยการสรางเอกสารใน อนเทอรเนต จะมลกษณะทพเศษกวาเอกสารทวไป ตรงทสามารถใสจดเชอม
โยง (Links) ไปยงเอกสารอน ๆ ไดมากมาย โดยเอกสาร หลายมตทกลาวน จะถกเรยกวา Hypertext หรอเอกสาร html นนเอง เอกสารเหลานจะถก
แสดงดวยโปรแกรมเฉพาะทเรยกวา เวบเบราวเซอร (Web Broswer) โดยขอความในเอกสารนนสามารถเชอมโยงไปเปดเอกสารอนขนมาไดอก การท
เอกสารสามารถเชอมโยงกนไดทำาใหเกดการเชอมโยงระหวางเอกสาร ในอนเทอรเนตทมอยทวโลก โยงกนไปมาจนดราวกบเปนใยแมงมม จงทำาให
ระบบน ถกเรยกวา เครอขายใยแมงมมทวโลก (World Wide Web) หรอWWW หรอทนยมเรยกนยอ ๆ วา เวบ (Web)
Domain Name - การตดตอกนบนเครอขาย internet นน จะใช IP address ในการทำางาน แตเปนตวเลขทจำายาก จงมการใช โดเมนเนม
เปนการทำาตวอกษรมาใชแทน IP address เพอใหสะดวกในการจดจำาชอ เชน ดแทค ม IP 203.107.128.132 โดเมนเนมคอ www.dtac.co.th
เวบเพจทำางานไดอยางไร
จากทเราศกษาประเภทของเวบเพจ เวบไซตตางๆแลวนน สงสำาคญทตอง ทำาความเขาใจดวยคอการทำางานและการแสดงผลของเวบเพจ เพอสามารถ
วางแผนในการออกแบบเวบเพจไดสามารถแบงขนตอนการทำางานไดดงน
ขนตอนท 1 ผใชพมพชอหรอทอยเวบเพจบน โปรแกรมบราวเซอร เพอเรยกช อดไฟลเวบเพจนนจาก server
ขนตอนท 2 server จะทำาการคนหาไฟลเวบเพจทถกรองขอ ขนตอนท 3 web server สงขอมลไปยงเครองผใชและแสดงผลหนาเวบเพจ
ทผใชรองขอผานทางเวบบราวเซอร
file ของเวบเพจ จะเปนไฟลภาษา HTML ซงเปน code ททำาให web browser สามารถแสดงขอมลทเปนรป ขอความ เสยง และวดโอ และ
สามารถตกแตงหนาตาเวบเพจไดตวอยาง HTML Code
<html><head><title> my first web page</title></head><body><h1> Welcome to My First Web Page </h1><h2> Welcome to My First Web Page</h2><h3> Welcome to My First Web Page </h3><h4> Welcome to My First Web Page </h4><h5> Welcome to My First Web Page </h5><h6> Welcome to My First Web Page </h6><p> tag ทกตวเปดแลวตองปดแทกดวยทกครง <b> กรณทใช tag
หลายชน ตองทำาการปดจากขางในกอนเสมอ</b> แลวจงไลปด tag อนๆตามลำาดบ</p>
</body></html>
HTML (Hyper Text Markup Language)HTML คอ ภาษาทใชในการเขยนเวบเพจ ยอมาจากคำาวา Hypertext Markup Language โดย Hypertext หมายถง ขอความทเชอมตอกน
ผานลง (Hyperlink) Markup หมายถง วธในการเขยนขอความlanguage หมายถงภาษา ดงนน HTML จงหมายถง ภาษาทใชในการเขยน
ขอความ ลงบนเอกสารทตางกเชอมถงกนใน cyberspace ผานHyperlink นนเอง
HTML เรมขนเมอ ป 1990 เพอตอบสนองความตองการในการสอสารแลกเปลยนขอมลกนของนกวทยาศาสตรระหวางสถาบนและ
มหาวทยาลยตางๆทวโลก โดย Tim Berners-Lee นกพฒนาของCERN ไดพฒนาภาษาทมรากฐานมาจาก SGML ซงเปนภาษาทซบซอน
และยากตอการเรยนร จนมาเปนภาษาทใชไดงายและสะดวกในการแลกเปลยนเอกสารทางวทยาศาสตรผานการเชอมโยงกนดวยลงในหนา
เอกสาร เมอ World Wide Web เปนทแแพรหลาย HTML จงถกนำา มาใชจนเกดการแพรหลายออกไปยงทวโลก จากความงายดายในการใช
งาน
HTML ในปจจบนพฒนามาจนถง HTML 4.01 และ HTML 5
นอกจากนยงมการพฒนาไปเปน XHTML ซง คอ Extended HTML ซงม ความสามารถและมาตรฐานทรดกมกวาอกดวย โดยอยภายใตการควบคมของ
W3C (World Wide Web Consortium)
HTML Element
สวนประกอบทสาคญของภาษา HTML
ไดแก Tag และ AttributeTag คอ คำาสงทใชในภาษา HTML อยในเครองหมาย < และ > ใชสำาหรบ
จดรปแบบขอความ ภาพหรอ วตถอนๆ ซง tag ในภาษา HTML สวนมาก จะม tag เปด และ tag ปด เชน <h1>…</h1> ใชเนนหวขอ
เรอง<p>…</p> ใชจดพารากราฟ<b>…</b> ใชกำาหนดใหตวอกษรเปนตวหนา
แตบาง tag กไมม tag ปด เชน <hr> ใชสรางเสนคน <br> ใชสำาหรบการขนบรรทดใหม
Attribute เปนสวนขยายใน tag ใชสำาหรบจดรปแบบเพมเตม เชน ขนาด ส ระยะหาง เปนตน คาของ attribute จะอยในเครองหมาย "…" เชน <p
align="center">ขอความในพารากราฟนจดวางอยกงกลางหนาจอ</p><hr width="200" color="red" noshade> ใชสรางเสนคนยาว200 pixel สแดงทบ
ในการเขยน tag, attribute และคาของ attribute จะใช เปนตวอกษรพมพเลกหรอพมพใหญกได แตเพอใหเปนไปตามมาตรฐานของ (X)HTML
รนใหม ขอใหใชเปนตวอกษรพมพเลกทงหมด และสำาหรบ tag ทไมม tag ปด ใหใส เปน " / >" เชน <hr />, <br />
ตวอยางท 1 เอกสาร HTML ทมนามสกลเปน .htm หรอ .html ภายในจะประกอบดวย
HTML Element ตางๆ เอกสาร HTML 1 ไฟล กคอ หนาเวบเพจ 1 หนานนเอง1. homepage.html2. page1.html3. page2.html
1. homepage.html<html><head> <title>Homepage Title</title></head><body> <h1>Topic</h1> <p>Content ..... Please click the below links</p> <a href="page1.html" title="link to page1">page1</a><br /> <a href="page2.html" title="link to page2">page2</a></body></html>Output
2. page1.html<html><head> <title>Page1 Title</title></head><body> <h2>Topic in page1</h2> <p>Content in page1</p> <a href="homepage.html" title="homepage">Return to homepage</a></body></html>
OutputTopic in page1
Content in page1Return to homepage
3. page2.html<html><head> <title>Page2 Title</title></head><body> <h2>Topic in page2</h2> <p>Content in page2</p> <a href="homepage.html" title="homepage">Return to homepage</a></body></html>OutputTopic in page2
Content in page2Return to homepage
การกาหนด Link และตาแหนง Anchor1. การเชอมโยงไปจดตางๆ ในหนาเวบเพจปจจบน
ในหนาเวบเพจทขอมลยาวมาก เราอาจทำาหวขอกำาหนดไวใหเลอกอานไดงายๆ เมอผชมเลอก หวขอแลว เรากเลอน scrollbar ไปยงตำาแหนงเนอหาของหวขอนนๆ ใหคะ
กำาหนดจดเชอมโยงในเนอหา<a name=" ชอ anchor">...</a>
กำาหนดลงคเชอมโยง ไปตำาแหนง anchor <a href="#anchor name" title="คำาอธบายลงค">ลงค</a>
tag <a> การแสดงผล
<a name="top">ลองคลกท ลงคดานลางดคะ และคาวา
Top</a><br /><a href="#html1" title=" ไปยงเนอหา HTML คออะไร?">HTML คออะไร?</a><br /><a href="#html2" title=" ไปยงเนอหา การสรางเวบเพจทาอยางไร?">การสรางเวบเพจทาอยางไร?</a><br> <br> <br>
<a name="html1">HTML คออะไร?</a><br />HTML(Hyper Text Markup Language) เปน
ภาษาประเภท Markup Language ทใชในการสรางเวบเพจ
เปนภาษาทงายตอการเรยนร (ไมใชภาษา ประเภท Programming
ลองคลกทลงคดานลางดคะ และคำาวาTopHTML คออะไร ? การสรางเวบเพจทำาอยางไร ?
HTML คออะไร?HTML(Hyper Text Markup Language) เปน
ภาษาประเภท Markup Language ทใชในการสรางเวบเพจ
เปนภาษาทงายตอการเรยนร (ไมใชภาษา ประเภท Programming
Language)ปจจบนมการพฒนาและ กำาหนดมาตรฐานโดยองคกร World
Wide Web Consortium (W3C)
การสรางเวบเพจทำาอยางไร? การสรางเวบเพจ โดยใชภาษา HTML
สามารถทำาโดยใชโปรแกรม Text Editor ตางๆ เชน Notepad,
Language)ปจจบนมการพฒนา และกาหนดมาตรฐานโดยองคกร
World Wide Web Consortium (W3C)<br> <br> <br>
<a name="html2">การสรางเวบเพจทาอยางไร?</a><br />
การสรางเวบเพจ โดยใชภาษา HTML สามารถทาโดยใชโปรแกรม Text
Editor ตางๆ เชน Notepad, EditPlus หรอจะอาศยโปรแกรมท
เปนเครองมอชวยสรางเวบเพจ เชนMicrosoft FrontPage, Dream Weaver ซงอานวย
ความสะดวกในการสรางหนา HTML ในลกษณะ WYSIWYG (What
You See Is What You Get) <br> <br> <br>
<a href="#top" title="กลบไปดานบน">Top</a><br />
EditPlus หรอจะอาศยโปรแกรมทเปน เครองมอชวยสรางเวบเพจ เชน
Microsoft FrontPage, Dream Weaver ซงอำานวยความ
สะดวกในการสรางหนา HTML ใน ลกษณะ WYSIWYG (What
You See Is What You Get)
Top
2. การเชอมโยงไปยงหนาเวบเพจอนๆ หรอเวบไซต อนๆ
<a href="url" target="window name" title="คำาอธบายลงค">
คาทใชใน target "_blank" เปดหนาเวบเพจในหนาตาง Browser ใหม"_self" เปดหนาเวบเพจในหนาตาง Browser เดม และ Frame เดม"_parent" เปดหนาเวบเพจในหนาตาง Browser เดม"_top" เปดหนาเวบเพจในหนาตาง Browser เดมแบบเตมหนา และยกเลกframe ทงหมด
หรอ จะใสเปนชอหนาตางทเรากำาหนดกไดคะ
อาจจะยงไมเขาใจวธการใชงาน target เพราะยงไมไดศกษาเรอง Frame ไมเปนไร นะคะ ปกตทใชบอยๆ มแค _blank เทานนเอง
tag <a> การแสดงผล
<a href="html_chapter08.html" title="บทท8">chapter8 หนาตางเดม</a>
<a href="html_chapter08.html" title="บทท8" target="_blank">chapter8 หนาตางใหม</a>
<a href="http://www.google.com" title="Google" target="_blank">google.com</a>
ลองคลกดคะchapter8 หนาตางเดม chapter8 หนาตางใหม
google.com
การเขยน url อางลงคไปเวบเพจ หรอไฟล ตางๆ ของเวบไซตเดยวกน ทาอยางไร
สมมตไฟลทใช มการจดเกบอยใน folder ตางๆ ดงน
folder webtutorial index.html
folder html_tutorial html_chapter1.html html_chapter2.html folder images img1.jpg img2.jpg folder images_sub img_sub.jpg
folder css_tutorial
css_chapter1.html css_chapter2.html folder images pic1.jpg pic2.jpg folder css style.css
ตอนนเราทำางานอยทไฟล html_chapter2.html
1. ตองการทำาลงคไป html_chapter1.html ทอยใน folder html_tutorial ( อยใน folder เดยวกน) เขยนไดดงน<a href="html_chapter1.html">Chapter1</a>
2. ตองการทำาลงคไป img1.jpg และ img2 ทอยใน folder html_tutorial >images เขยนไดดงน<a href="images/img1.jpg"> รปภาพท 1</jpg> <a href="images/img2.jpg"> รปภาพท 2</jpg>
3. ตองการทำาลงคไป img_sub ทอยใน folder html_tutorial>images>images_sub เขยนไดดงน<a href="images/images_sub/img_sub.jpg">รปภาพ</jpg>
4. ตองการทำาลงคไป css_chapter1.html ทอยใน folder cssl_tutorial เขยนไดดงน<a href="../css_tutorial/css_chapter1.html">CSS Chpater1</a>
5. ตองการทำาลงคไป pic1.jpg และ pic2.jpg ทอยใน folder cssl_tutorial>images เขยนไดดงน<a href="../css_tutorial/images/pic1.jpg"> รปภาพทCSS 1</a><a href="../css_tutorial/images/pic2.jpg"> รปภาพทCSS 2</a>
6. ตองการทำาลงคไป index.html ทอยใน folder webtutorial เขยนไดดงน
<a href="../index.html">index</a>
การเชอมโยงไปยง email
tag <a> การแสดงผล<a href="mailto:[email protected]">contact webmaster</a>
ลองคลกดคะcontact webmaster
การกาหนดสใหลงค
กำาหนดสใหลงคใน tag <body> โดยใช attribute link(สของลงคทยงไมเคยคลก), alink(สของลงคขณะคลก) และ vlink(สของลงคทเคยคลกแลว)
Example <html><head><title>การกำาหนดสใหลงค</title></head>
<body link="red" alink="blue" vlink="orange">
Link ทยงไมคลกใหเปนสแดง , ขณะคลกเปนสนำาเงน, เมอคลกแลวเปนสสม<br>
<a href="http://www.google.com" target="_blank">google.com</a><a href="http://www.pantip.com" target="_blank">pantip.com</a>
</body></html>
การแสดงรปภาพ
มรปแบบการใชงานดงน
<img src="ไฟลรปภาพ" alt="คำาอธบายรปภาพ" width="number" height="number">
หรอ เพอใหเปนไปตามมาตรฐานของ (X)HTML รนใหม จะเขยนแบบน<img src="ไฟลรปภาพ" alt="คำาอธบายรปภาพ" width="number" height="number" /> attribute ของรปภาพ ไดแก- src="ไฟลรปภาพ" - alt="คำาอธบายรปภาพ" - width="number" ความกวางของรป- height="number" ความสงของรป
คาของ attribute width และ height เปนตวเลข หนวยเปน px หรอ % ของหนาจอหรอcontainner ทบรรจรปภาพอย- align = "top" | "middle" | "bottom" จดวางตำาแหนงรปภาพกบขอความ- border="number" ขนาดกรอบของรป- vspace="number" ระยะหางระหวางรปกบขอความ ในแนวตง- hspace="number" ระยะหางระหวางรปกบขอความ ในแนวนอน
Example แสดงรปภาพ และคำาอธบาย<img src="../images/flower.jpg" alt="ภาพดอกไมทวลป" />
