Home Explore หน่วยที่2HTML (ต่อ)

หน่วยที่2HTML (ต่อ)

Published by วิรยา สีขาว, 2019-05-26 23:37:39

Description: หน่วยที่2HTML (ต่อ)

Read the Text Version

Pages:

หนว ยท่ี 1 ภาษา HTML ครูวิรยา สีขาว

การใสเ พลงประกอบในเวบ็ เพจ ภาษา HTML5

<BODY > <BGSOUND SRC=\"beliveme.mp3\" LOOP=\"Infinite\"> </BODY>

BGSOUND เปนแท็กคาํ สง่ั เพือ่ บอกใหเ บราสเซอรรวู า จะตอง ดาวนโ หลดเพลงมาบรรเลงประกอบหนา เว็บเพจ SRC=\"ชอ่ื เพลง\" เปนการกําหนดแหลง ท่ีเกบ็ และชอื่ เพลงที่ ตอ งการใหเบราสเ ซอรด าวนโหลดมาบรรเลง LOOP=\"infinite\" เปน การกําหนดใหเบราสเซอรเลน เพลงไป เรื่อยๆ ถาไมตอ งการใหลบขอ ความนอี้ อกไป

การทาํ ล้ิงคเพ่อื ใชสงอีเมล (Mailto:)

<BODY> แบบท่ี 1 ลง้ิ คข อ ความธรรมดา<p> <A HREF=\"Mailto:[email protected]\">สง อเี มลถ งึ อ.วิรยา สขี าว</A> แบบที่ 2 ใชร ปู ภาพเปนลงิ้ ค เพื่อเพิม่ ความ นาสนใจ<p> <A HREF=\" [email protected]\"><IMG SRC=\"mail2.gif\" BORDER=\"0\"></A> </BODY>

อธิบายคาํ สงั่ Mailto:ทอี่ ยอู ีเมล@ ปลายทาง เปนการสรางลงิ้ ค เพือ่ สงอีเมล โดยใชโปรแกรมอีเมลในเคร่อื งของ ผูสงเชน Outlook Express

การแทรกไฟล Multimedia  การใสไ ฟลม ลั ตมิ เี ดยี เชน ไฟลเสยี ง เพลง, Video, Flash เราสามารถใสไ ฟลเ พลง, ไฟล video หรือไฟล flash ลงไปในหนา เวบ็ เพจได ดว ยคาํ ส่งั <embed> <embed> เปน คาํ สั่งแสดงการทาํ งานของโปรแกรม plug-in โดย นําไปผนวกกับเอกสาร HTML และอาจใส tag <noembed> ควบคู ไปดว ย เผ่อื เว็บเบราเซอรรนุ เกา ท่ยี ังไม support tag <embed> นี้.  โครงสรา งของคาํ ส่ังการแทรกไฟล Multimedia <embed src=\"url ไฟล\" width=\"number\" height=\"number\" > <noembed><img src=\"url ไฟลรูปภาพที่ใหแสดงเมือ่ ใช embed ไมไ ด\" ></noembed> </embed>

คาํ ส่งั เสรมิ สําหรบั <embed> - src=\"url\" url ของไฟลท่ีจะใหเ ลน ไดแ ก ไฟลเสียง (เชน .mid, .wav, .mp3) ไฟล vedio (เชน .avi, wmv, mov, mpeg) และไฟล Flash movie ( .swf) - width=\"no\" กําหนดขนาดความกวางของตวั player - height=\"no\" กําหนดขนาดความสงู ของตวั player - align=\"top | middle | bottom | left | right\" จัดวางตาํ แหนง ใหก ับวตั ถุ ที่อยูขางๆ ตวั player - name=\"ชือ่ \" ช่ืออา งอิงของวัตถุ - autostart=\"true | false\" เมื่อโหลดเว็บเพจแลว ใหเลนอัตโนมัติหรอื ไม - loop=\"true | false | number\" กาํ หนดเปน true เม่ือตอ งการใหเ ลนซาํ้ ไปเร่อื ยๆ หรือกําหนดเปนตัวเลข จํานวนรอบทต่ี อ งการใหเ ลนซํ้า - playcount=\"no\" จาํ นวนรอบท่ใี หเลน (ใชไดเ ฉพาะ IE) - hidden=\"true | false\" ใหซอน หรือแสดงตวั player - volume=\"0 ถึง 100\" กําหนด volume ของเสียง (ใชไดเ ฉพาะ Netscape)

การแทรกไฟลเ สยี ง  ตวั อยา งการใชค าํ ส่งั เลน ไฟลเสยี ง <embed src=“music01.mp3\" width=\"100%\" height=\"60\"> <noembed><img src=\"nosupport.gif\" ></noembed> </embed>

คาํ สั่งเลนเสยี งและวดี โี อดว ยภาษา HTML5

การใสเ สยี งในภาษา HTML5  <audio controls=\"controls\"> <source src=“testsound.ogg\" type=\"audio/ogg\"> <source src=“testsound.mp3\" type=\"audio/mpeg\"> Browser ของคณุ ไมสนับสนนุ การเลน ไฟลเ สยี งดว ย HTML5 </audio>

การใสไ ฟลวีดโี อดว ย HTML5  <video width=“1000\" height=“800\" controls=\"controls\"> <source src=“testmovie.mp4\" type=\"video/mp4\"> <source src=“testmovie.ogg\" type=\"video/ogg\"> Browser ของคณุ ไมส นับสนนุ การเลนไฟลว ดี โี อดว ย HTML5 </video>

การเลน วดี โี อแบบอัตโนมตั ิ  <!DOCTYPE html><html><body>  <video width=\"320\" height=\"240\" autoplay>  <source src=\"movie.mp4\" type=\"video/mp4\">  <source src=\"movie.ogg\" type=\"video/ogg\">  Your browser does not support the video tag.  </video>  <p><b>Note:</b> The autoplay attribute does not work on some mobile devices.</p>  </body></html>

การสรางปมุ โตต อบกบั การเลนวีดีโอ <!DOCTYPE html> <html> <body> <div style=\"text-align:center\"> <button onclick=\"playPause()\">Play/Pause</button> <button onclick=\"makeBig()\">Big</button> <button onclick=\"makeSmall()\">Small</button> <button onclick=\"makeNormal()\">Normal</button> <br><br> <video id=\"video1\" width=\"420\"> <source src=\"mov_bbb.mp4\" type=\"video/mp4\"> <source src=\"mov_bbb.ogg\" type=\"video/ogg\"> Your browser does not support HTML5 video. </video></div> <script>

การสรางปมุ โตต อบกับการเลน วีดีโอ (ตอ ) var myVideo = function makeSmall() { document.getElementById( myVideo.width = \"video1\"); 320; function playPause() { } if (myVideo.paused) function makeNormal() { myVideo.play(); else myVideo.pause(); myVideo.width = 420; } } function makeBig() { </script></body> </html> myVideo.width = 560; }

HTML Plug-ins เปนคาํ ส่งั ท่ีใชสาํ หรบั แทรกไฟลต างๆ swf , pdf , Flash Player ตา งๆ ในหนาเว็บเพจ มดี ว ยกนั สอง คําส่ังคอื แทก็ <object> และ<embed>

การใชแทก็ <object>  <!DOCTYPE html>  <html><body>  <object width=\"400\" height=\"50\" data=\"bookmark.swf\"></object>  <object width=“800\" height=\"500\" data=“.pdf\"></object>  </body></html>

การใชแท็ก <object>  การแทรกหนา เว็บเพจในหนาเวบ็ เพจ  <object width=\"100%\" height=\"500px\" data=“index.html\"></object>  การใสร ูปภาพ  <object data=“images/02.jpg\"></object>

การใชแท็ก <embed >  <!DOCTYPE html>  <html><body>  <embed width=\"400\" height=\"50\" src=\"bookmark.swf\">  </body></html>

การใชแทก็ <embed >  <embed width=\"100%\" height=\"500px\" src=\"index.html\">  <embed src=\"images/images02.jpg\">  <embed width=\"100%\" height=\"500px\" src=\"Document1.pdf\">

Semantics เทคโนโลยีกลมุ Semantics คอื ตวั syntax ของภาษา HTML5 ท่ีแนน อนวาเปล่ยี นไปจาก HTML4 ซึ่งมแี ท็ก ใหมๆ และคณุ สมบัติ (atrribute) ใหมๆ เพม่ิ ข้นึ

HTML Layout Elements

Tag ใน HTML5  section - บง บอกเซคชนั ของเนอื้ หา  article - กําหนดขอบเขตของตัวเนอื้ บทความ  aside - กําหนดขอบเขตของเนื้อหาเสรมิ (ลอ มกรอบ)  header - กาํ หนดขอบเขตของสวนเรมิ่ ตน หรอื สวนหวั ของเวบ็ ไซต (อยา สบั สนกับ <head>)  footer - กาํ หนดขอบเขตของสว นทา ยของเวบ็ ไซต พวกขอ ความกาํ หนด สทิ ธิต์ า งๆ  nav - บอกวามนั เปนสว นนาํ ทางของเว็บไซต  figure - บอกวาเปน ภาพหรือวิดโี อประกอบเนือ้ หา (ขางในสามารถซอน แท็ก img หรอื video พรอ มคําอธิบายไดอกี ช้นั )

article - กําหนดขอบเขตของตัวเน้ือบทความ <article> <h1>ภาษา HTML5</h1> <p>HTML5 ก็คือภาษาที่ถูกพัฒนาขน้ึ เพือ่ ใชเปน ภาษามารก อพั <BR>สําหรบั การเขียน Website รนุ ลา สุดท่ีไดถ กู พัฒนาขน้ึ มา<BR>โดย WHATWG </p> </article>

Tag <section>  ความหมายและการใชง าน  คือ การแบง กลมุ เนอื้ หาออกเปนสว นๆ เชน การแบง บทความออกเปน chapter หรอื แบง เนอ้ื หาทั้งหมดออกเปนประเดน็ ยอ ยๆ อยางการแบง ขา วออกเปน กลมุ ของขา วในพระราชสาํ นกั กลมุ ของขา วกฬี า กลมุ ของขา ว บันเทงิ เปน ตน โดยท่ัวไปเรามกั จะใช Section ภายใน Article และ เนอ้ื หาภายใน section จะตอ งเก่ยี วขอ งกันท้งั หมด ทีส่ าํ คญั คอื section ไมไ ดใ ชสาํ หรับแบงเว็บเพจออกเปน สว นๆ ไมไ ดใชสาํ หรบั ทํา Layout ถา อยากทํา Layout ใหใ ช div แทน

<section> <h2>ภาษา HTML5</h2> <p>HTML5 ก็คือภาษาที่ถกู พัฒนาข้นึ เพอ่ื ใชเ ปน ภาษามารก อัพ <BR>สาํ หรบั การเขียน Website รนุ ลา สดุ ที่ไดถ ูกพฒั นาข้ึนมาโดย<BR> WHATWG </p> </section>

Tag <aside>  ความหมายและการใชงาน  <aside> สวนของเน้ือหาท่ีเกยี่ วของกบั เนอ้ื หาหลกั ท่ีอยโู ดยรอบ โดยมี จดุ ประสงคเ พือ่ ใหแยกออกจากเนอื้ หาหลัก  และใชเ ปนกรอบคําอธิบายเพม่ิ เติมทเี่ กีย่ วของกับเน้ือหาหลกั และนอกจากนี้ <aside> ยงั สามารถใชเปน สว นของ แถบดานขา ง (Sidebar) ไดอ ีก ดวย

<aside> <h2>ภาษา HTML5<BR> HTML5 กค็ ือภาษาทีถ่ กู พัฒนาขน้ึ เพอื่ ใชเปน ภาษา มารกอัพ <BR>สาํ หรับการเขยี น Website รุนลาสดุ ท่ไี ดถ กู พฒั นาขึ้นมาโดย<BR> WHATWG </h2> </aside>

Tag <nav>  ความหมายและการใชง าน  tag nav คือ การนําทางหรอื ล้งิ คนาํ ทาง nav ไมจาํ เปนตอ ง ใสอนั ตอ อนั สามารถใสค รอบคลุมทเี ดยี วหลายๆอนั ไดเลย

 <nav>  <a href=”/html/”>HTML</a> |  <a href=”/css/”>CSS</a> |  <a href=”/js/”>JavaScript</a> |  <a href=”/jquery/”>jQuery</a>  </nav>

Tag <header>  ความหมายและการใชง าน เปน element ท่ใี ชค รอบเนอ้ื หาท่เี ปนตน ขว้ั ของเอกสาร โดยวิธกี ารใชจะ ข้นึ ดว ย <header> …… </header>

<html><body> <header> <h1>Heading A</h1> <p>เนือ้ หาสวนน้ีเปน ของ Heading A</p> <h2>Heading B</h2> <p>เน้ือหาสวนนเ้ี ปน ของ Heading B</p> <h2>Heading C</h2> <p>เนอ้ื หาสว นนเ้ี ปน ของ Heading C</p> </header></body></html>

Tag <footer>  ความหมายและการใชง าน แทก็ footer เปน แทก็ ที่ใชสาํ หรบั ใสอะไรกไ็ ดทอ่ี ยูด านลา งๆ อยา งเชน creadit ผูแตงเว็บไซต หรอื หนา site map รวบรวมลงิ้ กของเวบ็ ไซต เราเอง

<footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: [email protected] </p> </footer>

HTML Iframes  <!DOCTYPE html>  <html><body>  <h2>HTML Iframes</h2>  <p>You can use the height and width attributes to specify the size of the iframe:</p>  <iframe src=\"demo_iframe.htm\" height=\"200\" width=\"300\"></iframe>  </body></html>

HTML Iframes  <!DOCTYPE html><html><body>  <h2>HTML Iframes</h2>  <p>You can also use the CSS height and width properties to specify the size of the iframe:</p>  <iframe src=\"demo_iframe.htm\" style=\"height:200px;width:300px\"></iframe>  </body></html>

HTML Iframes  <!DOCTYPE html>  <html><body>  <h2>Custom Iframe Border</h2>  <p>With CSS, you can also change the size, style and color of the iframe's border:</p>  <iframe src=\"demo_iframe.htm\" style=\"border:2px solid red;\"></iframe>  </body>  </html>

Iframe - Target for a Link  <!DOCTYPE html><html><body>  <h2>Iframe - Target for a Link</h2>  <iframe height=\"300px\" width=\"100%\" src=\"demo_iframe.htm\" name=\"iframe_a\"></iframe>  <p><a href=\"https://www.w3schools.com\" target=\"iframe_a\">W3Schools.com</a></p>  <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>  </body></html>

My First JavaScript  <!DOCTYPE html>  <html><body>  <h1>My First JavaScript</h1>  <button type=\"button\"  onclick=\"document.getElementById('demo').innerHT ML = Date()\">  Click me to display Date and Time.</button>  <p id=\"demo\"></p>  </body></html>

 <!DOCTYPE html><html><body>  <h1>My First JavaScript</h1>  <p id=\"demo\">JavaScript can change the style of an HTML element.</p>  <script>  function myFunction() {  document.getElementById(\"demo\").style.fontSize = \"25px\";  document.getElementById(\"demo\").style.color = \"red\";  document.getElementById(\"demo\").style.backgroundColor = \"yellow\"; }  </script>  <button type=\"button\" onclick=\"myFunction()\">Click Me!</button></body></html>

JavaScript can change HTML attributes  <!DOCTYPE html>  document.getElementById('myImage'  <html><body> ).src = pic;  <script>  function light(sw) { }  var pic;  if (sw == 0) {  </script>  pic = \"pic_bulboff.gif\"  } else {  <img id=\"myImage\"  pic = \"pic_bulbon.gif\" src=\"pic_bulboff.gif\" width=\"100\" } height=\"180\">   <p>  <button type=\"button\" onclick=\"light(1)\">Light On</button>  <button type=\"button\" onclick=\"light(0)\">Light Off</button></p></body></html>

Pages:

วิรยา สีขาว

หน่วยที่2HTML (ต่อ)

Like this book? You can publish your book online for free in a few minutes!

Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

หน่วยที่2HTML (ต่อ)

Description: หน่วยที่2HTML (ต่อ)

Read the Text Version

วิรยา สีขาว

TOP SEARCH

RELATED PUBLICATIONS