ตัวอย่างการนำ HTML 5 ไปใช้

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

ตัวอย่างการนำ HTML 5 ไปใช้

Post by samsonnaze3 » 25/05/2012 6:05 pm

Image

นี้เป็นตัวอย่างคร่าวๆ ให้เห็นภาพกันนิดๆหน่อยๆ ว่า HTML 5 เป็นยังไง ใช้ยังไง ซึ่งอาจจะเขียนไม่หมด แต่คิดว่าเป็นประโยชน์สำหรับคนที่ยังไม่รู้นะครับ อนาคตคงได้ใช้กันแน่นอน

1. Video
วิธีการเขียน tag เพื่อแสดงวีดีโอนั้นง่ายมาๆครับ
ตัวอย่าง

Code: Select all

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
</video>
โดยหลักๆ tag จะประกอบไปด้วย 2 ส่วนคือ <video> และ <source> ซึ่งชนิดไฟล์ตอนนี้ จะมีแค่ MP4 OGG WebM

และก็มี Method เกี่ยวกับการเล่น Video ดังต่อไปนี้
play()
pause()
load()
canPlayType
Last edited by samsonnaze3 on 26/05/2012 4:37 pm, edited 1 time in total.
Image

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

Re: ตัวอย่างการใช้งาน HTML 5

Post by samsonnaze3 » 25/05/2012 6:09 pm

2. Audio
ตัวอย่าง

Code: Select all

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
</audio>
สำหรับ Audio นี้ก็จะมีหลักๆอยู่ 2 อย่างคือ <audio> และ <source> ส่วนไฟล์ที่สนับสนุน ก็มี MP3 Wav Ogg ครับ
Image

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

Re: ตัวอย่างการใช้งาน HTML 5

Post by samsonnaze3 » 25/05/2012 6:13 pm

3. Canvas เป็นการวาดรูปลงไปครับ
ตัวอย่าง : วาดรูปสี่เหลี่ยมสีแดง

Code: Select all

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>
ซึ่งถ้าจะทำการวาดรูป ก็จะต้องวาดใน tag <canvas>
Image

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

Re: ตัวอย่างการใช้งาน HTML 5

Post by samsonnaze3 » 25/05/2012 6:18 pm

4. ตัวอย่าง Input ที่น่าสนใจ

4.1 Input type email ตรงนี้ถ้าเราใช้ type เป็น email มันจะมีการกรองระหว่างชื่อเมล และ โดเมน ออกจากกันได้
ตัวอย่าง

Code: Select all

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  E-mail: <input type="email" name="usremail" /><br />
  <input type="submit" />
</form>

</body>
</html>
4.2 Input type range ในส่วนตรงนี้จะเป็นตัวสไลด์ เลื่อนซ้ายขวา เพื่อเลือก value ที่เราต้องการ
Image
ตัวอย่าง

Code: Select all

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>

</body>
</html>
Image

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

Re: ตัวอย่างการใช้งาน HTML 5

Post by samsonnaze3 » 26/05/2012 11:26 am

5. Progress element

เป็นตัวบอกสถานะการทำงาน เป็นเหมือนหลอดโหลดข้อมูลว่าเสร็จไปกี่ % แล้ว

ภาพที่ 5.1

ตัวอย่างโค๊ด

Code: Select all

Downloading progress:
<progress value="22" max="100"> </progress>
ภาพที่ 5.2
Attachments
ภาพที่ 5.2<br /><br />Credit : http://html5inth.com
ภาพที่ 5.2

Credit : http://html5inth.com
5.2.png (2.05 KiB) Viewed 4980 times
ภาพที่ 5.1
ภาพที่ 5.1
5.1.png (6.51 KiB) Viewed 4980 times
Last edited by samsonnaze3 on 26/05/2012 12:08 pm, edited 3 times in total.
Image

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

Re: ตัวอย่างการใช้งาน HTML 5

Post by samsonnaze3 » 26/05/2012 11:31 am

6. nav element

เป็นที่ระบุเมนูบาร์ ใช้แทน <div> ได้เลย

ตัวอย่าง

Code: Select all

<nav>
   <h1>Menu</h1>
   <ul>
    <li><a href="001.html">HOME</a></li>
    <li><a href="002.html">CONTENT</a></li>
    <li><a href="003.html">ABOUT US</a></li>
   </ul>
  </nav>
Image

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

Re: ตัวอย่างการนำ HTML 5 ไปใช้

Post by samsonnaze3 » 26/05/2012 12:00 pm

7. Mark element

เอาไว้สำหรับทำ ไฮไลท์ ข้อความ

ภาพ 7.1

ตัวอย่างโค๊ด

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <!--[if lt IE 9]><script 
    src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>[endif]-->
  <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
</head>
<body>
  <h1>716,000,000 search results for 
   the query "<mark>HTML 5</mark>"</h1>
  <section id="search-results">
     <article>
       <h2><a href="http://en.wikipedia.org/wiki/HTML_5">
         <mark>HTML 5</mark> - Wikipedia, the free 
         encyclopedia</a></h2>
       <p><mark>HTML 5</mark> is the next major revision of 
         <mark>HTML</mark> ("hypertext markup language"), the core 
         markup language of the World Wide Web. The WHATWG started 
         work on the ... <a 
         href="http://en.wikipedia.org/wiki/HTML_5">
         Read more</a></p>
     </article>
     <article>
       <h2><a href="http://dev.w3.org/html5/spec/Overview.html">
         <mark>HTML 5</mark></a></h2>
      <p>A vocabulary and associated APIs for <mark>HTML</mark> and 
         XHTML. Editor's Draft 16 August 2009. Latest Published 
         Version: http://w3.org/TR/<mark>html5</mark>/; Latest 
         Editor's ...       <a 
         href="http://dev.w3.org/html5/spec/Overview.html">
         Read more</a></p>
     </article>
  </section>
</body>
</html>
Attachments
ภาพที่ 7.1<br /><br />Credit : http://www.packtpub.com/
ภาพที่ 7.1

Credit : http://www.packtpub.com/
7.1.png (88.95 KiB) Viewed 4979 times
Last edited by samsonnaze3 on 26/05/2012 4:38 pm, edited 2 times in total.
Image

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

Re: ตัวอย่างการนำ HTML 5 ไปใ้ช้

Post by samsonnaze3 » 26/05/2012 12:04 pm

8. Figcaption element

เอาไว้สำหรับเขียนคำอธิบายใน tag

ภาพที่ 8.1

ตัวอย่างโค๊ด

Code: Select all

<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>
    A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a>
  </figcaption>
</figure>
Attachments
ภาพที่ 8.1<br /><br />Credit : http://html5inth.com
ภาพที่ 8.1

Credit : http://html5inth.com
8.1.png (377.23 KiB) Viewed 4979 times
Image

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 31 guests