Friends

This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Rabu, 19 Oktober 2011

How to Import (Restore) All Tasks in Bulk Using Task Scheduler in Windows?

Recently we posted a tutorial about importing and exporting tasks using Task Scheduler in Windows: How to Import / Export (Backup / Restore) Tasks Using Task Scheduler in Windows?
But there is one limitation in importing and exporting tasks using Task Scheduler. You can import/export only a single task at a time. Task Scheduler doesn't allow import/export of tasks in bulk.
So if you have lots of scheduled tasks say 20 in Task Scheduler, you'll need to perform the same step again and again for all 20 tasks.
Wouldn't it be great if you can import and export all tasks in a single step?
Actually you can import (restore) all tasks in bulk using "schtasks" command but there is no way to export all tasks in bulk.
In this tutorial, we'll tell you how to use "schtasks" command to restore all tasks in bulk:
1. First take backup of all tasks using the above mentioned tutorial.
2. Now create a new text file using Notepad and paste following code in it:
@echo off
echo Importing All Tasks
echo.
schtasks.exe /create /TN "Task 1 Name" /XML "Full_Path_of_Backup_XML_File"
schtasks.exe /create /TN "Task 2 Name" /XML "Full_Path_of_Backup_XML_File"
schtasks.exe /create /TN "Task 3 Name" /XML "Full_Path_of_Backup_XML_File"
echo.
echo Importing Done
echo.
pause
3. Replace "Task 1 Name", "Task 2 Name", etc entries with the name of your actual tasks. e.g. "Mother Birthday".
4. Replace "Full_Path_of_Backup_XML_File" with the location where you saved the backup tasks. e.g. "D:\Tasks Backup\Mother Birthday.xml".
5. Save the file with any name but the extension must be .BAT. e.g. you can save the file as "Restore Tasks.Bat". Make sure to use double quotes "" otherwise Notepad will save the file as a text file.
6. That's it. Once you create the file, run it and it'll start restoring all the tasks in Task Scheduler

Desain Background Twitter

mendesain_background_twitter 

Tahun ini Twitter sepertinya akan jadi ‘mainan’ baru bagi kita. Selain fungsinya untuk membangun jaringan pertemanan, Twitter juga sudah menjadi sumber berita dan informasi terbaru. Jadi, sebagai desainer grafis kita mempunyai satu media baru lagi yang bisa kita pakai untuk mem-branding diri kita di dunia maya.


Saya yakin sebagian besar kita mempunyai akun Twitter, tapi berapa banyak yang masih menggunakan desain background standar dari Twitter? Kita harus bisa menampilkan citra kita sebagai desainer walaupun di dunia maya. Dalam kasus Twitter ini, tentu background menjadi salah satu cara yang efektif (selain tweets yang kita update)
Mari kita analisa sedikit tentang background Twitter ini. Bidang putih di tengah (area konten berukuran lebar 764 Pixel) akan selalu tetap di tengah dan berwarna putih berapapun besar resolusi monitor yang kita pakai. Dan karena sekarang sudah banyak yang memakai monitor widescreen, maka akan ada ruang kosong (sebesar 250 – 300 Pixel) di samping kiri dan kanan.
ukuran_twitter

Cara Kerja Background

Kalau kita menggunakan desain sendiri, Twitter akan otomatis meletakkan desain kita mulai dari pojok kiri atas. Sehingga akan ada sisa space yang tidak bisa tertutup dengan desain kita. Solusinya, kita menyamakan warna background desain kita dengan warna background Twitter yang bisa kita atur sendiri di menu “Settings” pada website Twitter.
ukuran_twitter2
Solusi yang kedua adalah menggunakan background yang bisa di ulang (Repeated Pattern). Dengan ini di jamin akan aman di resolusi monitor apapun. Namun kelemahannya adalah kita agak sulit untuk menempatkan info tambahan pada pattern, karena akan terlihat aneh jika “alamat web” kita terlihat berulang-ulang.
ukuran_twitter3

Ukuran Ideal Background Twitter

Monitor dengan resolusi 1024 x 768 Pixel sudah menjadi standar (semua orang pasti memakainya). Tapi mulai banyak juga yang menggunakan resolusi di atas itu, saya sendiri menggunakan widescreen 1360 x 768 Pixel.
Karena begitu variatif nya ukuran monitor saat ini, maka lebih baik kita mendesain dengan ukuran yang agak besar, yaitu dengan dokumen lebar 1600 Pixel dan tinggi 1024 Pixel. dengan begini background Twitter kita akan nyaman di lihat sampai resolusi 1600 widescreen, bila masih ada sisa space yang tidak bisa tertutup, kita bisa menggunakan trik menyamakan warna background (di buat fade out di bagian tertentu).
ukuran_twitter4

Contoh Desain Background Twitter

Berikut beberapa conton desain background Twitter yang dapat menginspirasi kamu untuk mendesain background kamu sendiri. Selamat menikmati :)
Chrisspooner
twitter_back1
WebDesignerDepot
twitter_back2
Oridusartic
twitter_back3
Frenden
twitter_back4
Hallisar
twitter_back5
Elite Styles
twitter_back6
Rogie King
twitter_back7
Zam Design
twitter_back9
iCreativeLabs
twitter_back10

Kesimpulan

Jadi manakah yang lebih baik? menggunakan Pattern atau background berukuran ideal/besar seperti di atas?
Semuanya tergantung kebutuhan kamu, jika perlu menampilkan info tertentu, solusi terbaik adalah dengan menggunakan background ukuran ideal. Tapi bila kamu tidak perlu menampilkan info apapun, kamu bisa menggunakan Pattern untuk hasil yang terbaik di segala resolusi monitor.
Yang pasti tidak ada batasan, gunakan kreativitas kamu setinggi mungkin! :) Tunggu tutorial mendesain background Twitter pada posting selanjutnya.

Sabtu, 08 Oktober 2011

How To Group Navigational Links In Your Web Pages Using HTML5

Why should you group links? Simple because it adds structure and semantics to your web pages. Plus semantic navigation helps your users with disabilities navigate thru your web pages with ease.
In-order to indicate part of a web page for navigation you will need to use the new HTML5 <nav> element. The <nav> element represents a section of a web page that links to other web pages or to parts within the web page itself; that contains, a section of navigation links.
You should take note that not all groups of links should be wrapped in a <nav> element, only sections of the web page that consists of major navigation blocks are suitable for the <nav> element. For example the main navigation, table of contents, beadcrumb navigation and pagination in my opinion would be suitable candidates for the <nav> element.
The <nav> element also requires an end tag, for example </nav>. You are allowed to have more then one <nav> element on a web page.
Another thing to remember is that the <nav> element cannot appear as a descendant of the <address> element, in-other words you cannot place a <nav> element inside the <address> element.
The <nav> element can contain the flow and phrasing element's, like for instance the <a>, <h1> and <h6> element's.
The <nav> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?".
Here is how to code the <nav> element for HTML5.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <nav>
  <ul>
   <li><a href="home.php">Home</a></li>
   <li><a href="categories.php">Categories</a></li>
   <li><a href="articles.php">Articles</a></li>
   <li><a href="members.php">Members</a></li> 
   <li><a href="about.php">About Us</a></li>   
  </ul>
 </nav>

</body>
</html>
And here is how to code the <nav> element for XHTML5.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <nav>
  <ul>
   <li><a href="home.php">Home</a></li>
   <li><a href="categories.php">Categories</a></li>
   <li><a href="articles.php">Articles</a></li>
   <li><a href="members.php">Members</a></li> 
   <li><a href="about.php">About Us</a></li>   
  </ul>
 </nav>

</body>
</html>

How To Identify A Specific Date And Time In Your Web Pages Using HTML5

If you want to clearly encode dates and times for machines, like computers for example, while still displaying the dates and times in a human-readable way, well then HTML5 has you covered by introducing to us the <time> element, which is an inline element.
The <time> element acts as a container for a date and or time. The <time> element can represent either a specific time on a 24-hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time zone. The <time> element's contents can be anything you like as long as you declare the datetime attribute, which I will explain later on in this tutorial. Otherwise the <time> element's contents must be in the date and or time datatype format "YYYY-MM-DDThh:mm:ssTZD" or at the very least in the time format "hh:mm" or in the date format "YYYY-MM-DD" to be valid, which I will explain along with the datetime attribute later on in this tutorial.
The <time> element is supposed to be used to encode modern dates and or times in a machine-readable way so that, for example, robots or scripts could detect the date and or time of an event, birthday, anniversary or any other occasion and offer to add it to your calendar.
The <time> element should not be used to mark up dates and times for which there is no exact date and or time to be established, for example "the day of the big bang" or "the beginning of the Predynastic Period".
The <time> element requires an end tag, for example </time>.
The <time> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?". The <time> element can also use the attributes datetime and pubdate, which I will explain after I show you how to code in the <time> element.
The <time> element cannot and must not appear as a descendant of the <time> element, in-other words you cannot place a <time> element inside another <time> element. The <time> element however can contain the phrasing element's, like for instance the <a>, <span> and <img> element's.
You should remember to separate your four digit year, two digit month and two digit day with dashes (-) for your <time> element's contents, for example "1999-02-11". Also you should separate your two digit hour, two digit minute and two digit second with colons (:) for your <time> element's contents as well, for instance "12:04:08". And on a side note if you wish to state the milliseconds for the time all you have to do is include a dot (.) following the seconds value, for example "12:04:08.001".
Here is how to code the <time> element for HTML5.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <p>I get out of school at <time>16:20</time> in the evening.</p> 
 <p>I graduated school on <time>2004-06-24</time>, which was also my birthday.</p> 

</body>
</html>
And here is how to code the <time> element for XHTML5.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <p>I get out of school at <time>16:20</time> in the evening.</p> 
 <p>I graduated school on <time>2004-06-24</time>, which was also my birthday.</p> 

</body>
</html>
Now let me explain the <time> element's datetime and pubdate attributes, which I will list below:
datetime
The datetime attribute identifies the date and or time being specified. If the datetime attribute is being used the <time> element may be empty.
If the <time> element does not have a datetime attribute present then the date and or time is taken from the <time> element's contents. The <time> element's contents must conform to the date and or time datatype format "YYYY-MM-DDThh:mm:ssTZD", which I will explain in more detail later on in this tutorial.
The value of the datetime attribute follows the following format "YYYY-MM-DDThh:mm:ssTZD". In-order for your dates to be machine-readable they must at the very least be in the format of "YYYY-MM-DD" and for your times to be machine-readable they must be in the very least in the time format "hh:mm". Let me explain the code in more detail starting with the year component "YYYY", which is used for the year, for instance 2012 stands for the year 2012.
The month component "MM" is for the month, for example 01 stands for January and 12 stands for December.
Now the day component "DD" stands for the day of the month, for instance 04 stands for the 4th day.
The "T" character is a required separator to separate the date and time syntax and must always be in uppercase.
The hour component "hh" represents the hour, for example 13 stands for 1:00 p.m. The hour component can range between 00 and 24. Now 00 stands for 12:00 a.m. for the start of the calendar day and the number 24 is only used to represent midnight at the end of a calendar day.
The minutes component "mm" is for the minutes, for example 28 stands for 28 minutes and 08 stands for 8 minutes. The minutes component can range between 00 and 59.
The seconds component "ss" is for what else the seconds, for example 08 represents 8 seconds. The seconds component can range between 00 and 59.
You may also state the fractional seconds as well also known as milliseconds by including a dot (.) following the seconds value. So instead of our format looking like "YYYY-MM-DDThh:mm:ssTZD" it will look like "YYYY-MM-DDThh:mm:ss.fffTZD". The fractional seconds component "fff" is for fractions of a second, for example 001 represents one millisecond.
And finally the Time Zone Designator component "TZD", which is used when you are giving a time and date together, you need to show the time zone by either including the uppercase letter "Z" for Coordinated Universal Time (UTC). The letter "Z" denotes Zulu, also known as Greenwich Mean Time, which is the same as +00:00, in other words zero, or you can use an offset from UTC in hours and minutes, prefixed with a plus "+hh:mm" or minus "-hh:mm". The time zones from the UTC offset can range from -12:00 to +14:00.
As I said before earlier you should remember to separate your four digit year, two digit month and two digit day with dashes (-), for example "2001-04-29". And you should separate your two digit hour, two digit minute and two digit second with colons (:), for instance "18:08:08". And if you wish to state the milliseconds for the time all you have to do is include a dot (.) following the seconds value, for example "18:08:08.008".
Now let me show you how to code in the <time> element's datetime attribute in multiple formats for HTML5 below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <p>My birthday is on <time datetime="2008-02-15">15 February 2008</time>.</p> 
 <p>Adam turned one on the <time datetime="2010-12-24">24<sup>th</sup> of December last year</time>.</p> 
 <p><time datetime="2003-08-23">Jen's 21st birthday</time> was at Las Vegas.</p> 
 <p>At <time datetime="2000-01-13T20:00Z">8PM on my birthday</time> I was jumped.</p> 
 <p>Next year at <time datetime="2001-01-13T20:00+00:00">8PM on my birthday</time> I'm going to be ready for the beating.</p> 
 <p>Tomorrow at <time datetime="20:00">8 PM</time> I will go to the party.</p> 
 <p>My sister was born on <time datetime="1934-03-14T12:00:00.001-04:00"></time>.</p> 

</body>
</html>
All of the above values for the datetime attributes are valid.
Now let me show you how to code in the <time> element's datetime attribute in multiple formats for XHTML below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <p>My birthday is on <time datetime="2008-02-15">15 February 2008</time>.</p> 
 <p>Adam turned one on the <time datetime="2010-12-24">24<sup>th</sup> of December last year</time>.</p> 
 <p><time datetime="2003-08-23">Jen's 21st birthday</time> was at Las Vegas.</p> 
 <p>At <time datetime="2000-01-13T20:00Z">8PM on my birthday</time> I was jumped.</p> 
 <p>Next year at <time datetime="2001-01-13T20:00+00:00">8PM on my birthday</time> I'm going to be ready for the beating.</p> 
 <p>Tomorrow at <time datetime="20:00">8 PM</time> I will go to the party.</p> 
 <p>My sister was born on <time datetime="1934-03-14T12:00:00.001-04:00"></time>.</p> 

</body>
</html>
All of the above values for the datetime attributes are valid as well.
pubdate
If the pubdate attribute is specified it indicates that the date and or time provided by the <time> element is the publication date and or time of the parent element, for example the <article> element or the whole <body> element's contents. In-other words if the <time> element is located inside an <article> element, the timestamp from the <time> element is the publication date of the <article> element's contents. If the <time> element is not located in an <article> element, then the timestamp from the <time> element is the publication date of the entire web page document.
The pubdate attribute is a boolean attribute, which means that the pubdate attribute needs no value for HTML5 web pages, all you have to do is include the word pubdate in the desired <time> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the pubdate attribute will need to have a value of pubdate, for instance pubdate="pubdate" in-order for the attribute to validate in XHTML.
It's important to remember that for each <article> element there can be no more than one <time> element with the pubdate attribute inside an <article> element. Also for each web page document there must be no more than one <time> element with the pubdate attribute that is not located in an <article> element.
Here is how to code the pubdate attribute for HTML5.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <article>
  <header><h1>Article Title</h1></header>
  <footer>Published on <time datetime="2010-09-02" pubdate>September 2nd 2010</time>.</footer> 
  <p>Some article content.</p>
 </article>

</body>
</html>
And here is how to code the pubdate attribute for XHTML.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <article>
  <header><h1>Article Title</h1></header>
  <footer>Published on <time datetime="2010-09-02" pubdate="pubdate">September 2nd 2010</time>.</footer> 
  <p>Some article content.</p>
 </article>

</body>
</html>

How To Provide A Drop Down List For Your Users And Allow Them The Option To Enter Their Own Text With HTML5

In HTML5 you can create a set list of selectable options for the <input> field, which will act like an auto-complete function or if your users do not want to select a suggestion from the list they can enter there own value into the <input> field. In-order to do all this with just HTML5 you will need to use the new <datalist> element for HTML5 and the <input> and <option> element's as well, you will also need to include the new list attribute for HTML5 and the id and value attributes, I will show you how to put all this together after I have finished explaining the element's and attributes.
First the <datalist> element is an inline element that creates a drop down menu of suggestions via the <option> elements, which are contained in the <datalist> element. The <datalist> element will also need the id attribute with a unique value.
The <datalist> element requires an end tag, for example </datalist>.
The <datalist> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?".
If a browser doesn’t support the <datalist> element, then the associated <input> element will degrade to the <input> element type that is currently present in the <input> element, else if the current <input> element type is not supported by the browser or if there is no <input> element type present in the <input> element the <input> element will degrade to the <input> element type text.
The <datalist> element is used only with the <input> element types that accept text, excluding the password <input> element type. The valid <input> element types that you can use include the text, email, search, url, and number types.
Now the <option> element must be placed in-between the <datalist> start tag and the </datalist> end tag. Each <option> element can hold a predefined suggestion value or an empty value as well, you may even disable the <option> element using the disabled attribute for the <option> element. You will also need to include the value attribute for the <option> element, which will assign a value to the <option> element to be sent to the server. The <datalist> element can contain zero or more <option> element's intermixed with phrasing element's, like for instance the <a>, <span> and <img> element's.
Next we will have to link the <datalist> element to the <input> element via the <input> element's new list attribute for HTML5. The list attribute will indicate that the <input> control has a list of predefined suggestion values for the user to choose from, which are displayed by the <datalist> element. The list attributes value should be the same as the id attributes value that is associated with the <datalist> element.
As of this writing only Opera 10.0 and up supports the new <datalist> and list attribute for HTML5.
Now let me show you how to code the new <datalist> element and the new list attribute for HTML5 along with the other attributes and element's to create our HTML5 web page.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <form>
  <label for="job_title">Job title:</label>
  <input type="text" name="job_title" id="job_title" list="jobs">
  <datalist id="jobs">
   <option value="Web Monkey">Web Monkey</option>
   <option value="Graphic Designer">Graphic Designer</option>
   <option value="Mechanic">Mechanic</option>
  </datalist>
 </form>

</body>
</html>
And here is how to code the new <datalist> element and the new list attribute for HTML5 along with the other attributes and element's to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <form>
  <label for="job_title">Job title:</label>
  <input type="text" name="job_title" id="job_title" list="jobs" />
  <datalist id="jobs">
   <option value="Web Monkey">Web Monkey</option>
   <option value="Graphic Designer">Graphic Designer</option>
   <option value="Mechanic">Mechanic</option>
  </datalist>
 </form>

</body>
</html>

How To Allow Your Users To Enter An Email Address To Your Web Pages Forms Using HTML5

Now before there was HTML5 a simple <input> type text field would do the trick in-order to allow your users to enter an email address, but HTML5 gave us a new way to allow your users to enter an email address and have it checked to see if it's a valid email address all by using the new email value for the <input> element's type attribute.
The new email value for the type attribute creates the <input type="email" /> control also called the email address control, which is used for entering one email address that the browser can check to see if it's a valid email address. You may also enter multiple email addresses using the multiple attribute, which I will show you how to do later on in this tutorial.
Now let me explain what a valid email address is. A valid email address begins with the "local-part" followed by the "@" (at sign) followed by the "domain", for example, local-part@domain or in other words, joe-blow@example.com is the syntax of a valid email address.
The "local-part" of an email address can be up to 64 characters long and the domain name itself may have a maximum of 253 characters. But there is one problem with this however, the maximum length of a forward or reverse path length of 256 characters restricts the entire email address to be no more than 254 characters long.
The local-part of the email address may include any of the ASCII characters below:
  • Uppercase and lowercase English letters (a–z, A–Z)
  • Digits that range from 0 to 9
  • The characters ! $ # % & * + = - / ? ^ _ ` { | } ~
  • And the character . (dot, period, full stop) given that it is not the first or last character of the local-part, also the dot, period or full stop should not appear two or more times consecutively for example, (Joe..Blow@example.com).
The domain name part of an email address has to follow the strict guidelines that must match the requirements for a hostname, that consist of letters, digits, hyphens and dots.
If you specify the value attribute for the <input> element, the value attributes value must have a value that is a single valid email address. Else, if the multiple attribute is set the value attributes value must have a value that is a valid email address list. I will explain later on what an email address list is when I explain the multiple attribute later on in this tutorial.
As with all <input> types, the user may submit the form with the <input> type email field empty unless the required attribute is present.
Now let me show you how to code in the new email value for the <input> element's type attribute to create our HTML5 web page, in-order to allow our users to enter an email address to our forms and have it checked if it's a valid email address by a user agent like a browser for instance.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <form>
  <input type="email">
 </form>

</body>
</html>
And here is how to code the new email value for the <input> element's type attribute for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <form>
  <input type="email" />
 </form>

</body>
</html>
Now let me explain and show you how to use the multiple attribute for the <input> element.
multiple
The multiple attribute for the <input> element is new to HTML5 and indicates that the user is allowed to enter more than one value at a time.
The multiple attribute is a boolean attribute, which means that the multiple attribute needs no value for HTML5 web pages, all you have to do is include the word multiple in the desired <input> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the multiple attribute will need to have a value of multiple, for instance multiple="multiple" in-order for the attribute to validate in XHTML.
Now when the multiple attribute is placed with the new email value for the <input> element's type attribute, which creates the <input type="email" /> control it indicates that the value of the <input type="email" /> field can be a list of comma-separated valid email addresses for instance, (joe-blow@example.com, some.one@example.com, another-email.address@example.com). So in other words the multiple attribute basically allows the user to enter one or more valid email addresses.
If you specify the value attribute for the <input> element and the multiple attribute is specified the value attributes value must have a value that is a valid email address list that is comma-separated.
Here is how to code the <input> element's multiple attribute for HTML5.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <form>
  <input type="email" multiple>
 </form>

</body>
</html>
And here is how to code <input> element's multiple attribute for XHTML.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <form>
  <input type="email" multiple="multiple" />
 </form>

</body>
</html>

How To Add A Playable Audio File To A Web Page Using HTML5

Now in-order to add playable audio to your web pages using HTML5, you will need to use the new <audio> element for HTML5.
The <audio> element which is considered a media element, embeds a sound file or audio stream in the web page without requiring a plugin. A plugin is something like a little piece of software that adds a specific feature or service to a larger piece of software when added, usually related to your web browser, for instance some popular plugins are Adobe Flash Player, RealPlayer and QuickTime. When content is placed between the <audio> element's start tag and end tag, user agents, for example a browser, that support the <audio> element should not show the <audio> element's content to the user. The <audio> element's content is intended for older Web browsers that do not support the <audio> element, so that legacy audio plugins can be tried, or the <audio> element's contents displayed to the users that still use old browsers that don't support the <audio> element, informing them on how to access the audio data, like music for example.
The <audio> element requires both a start tag and an end tag.
When the controls attribute is used with the <audio> element, the <audio> element can not be placed inside an <a> element or <button> element.
The <audio> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?". The <audio> element can also use the attributes autoplay, preload, controls, loop and src, I will explain about these attributes in detail later on, after I show you how to code in the <audio> element. But for now I will briefly explain the src and controls attributes since we will be using them in our first example. The src attribute will specify the location of the media file to be played. And the controls attribute will specify that the playback controls should be displayed.
If the <audio> element does not have an src attribute, the contents of the <audio> element must follow a specific ordered structure which starts with one or more <source> element's, then zero or more <track> element's, then followed by flow content or phrasing content. I will explain what flow content and phrasing content is and when you should use each one of them later on this tutorial.
So basically, if you do not place an src attribute in the <audio> element, your <audio> element's content structure should follow the following order below.
  1. One or more <source> element's.
  2. Then zero or more <track> element's.
  3. Followed by flow content or phrasing content.
Now if the <audio> element includes an src attribute it's important to remember that the contents of the <audio> element must follow a specific ordered structure which starts with zero or more <track> element's, followed by flow content or phrasing content. I will explain when you should use flow content or phrasing content later on in this tutorial.
So in-other words, if you include an src attribute in the <audio> element, your <audio> element's content structure should follow the following order below.
  1. Zero or more <track> element's.
  2. Followed by flow content or phrasing content.
Now let me explain when you should and should not use flow content or phrasing content below.
When the <audio> element is placed inside another element that is allowed to contain flow elements, then the contents of the <audio> element may also contain flow elements.
And when the <audio> element is placed inside another element that restricts other elements that are placed in it to only being phrasing elements, then the contents of the <audio> element is also restricted to containing only phrasing elements.
It's important to remember that not all the browsers support the same audio file formats, for example Firefox 4 and Opera 11 browsers don't support the .mp3 format, but they both support the .ogg and .wav formats. In case you are wondering what is an audio file format, it's basically a medium for storing digital audio data like sound and music on a computer system.
Here is how to code the <audio> element with the src and controls attributes for HTML5 in the example below in-order to add a playable audio file to your web pages.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
And here is how to code the new <audio> element with the src and controls attributes for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
Now let me explain the <audio> element's autoplay, preload, controls, loop and src attributes, which I will list and explain below.
autoplay
The autoplay attribute will play the media file automatically as soon as it is ready. The autoplay attribute instructs the user agent, for example a browser, to automatically begin playback of the sound file or audio stream as soon as it can without stopping.
The autoplay attribute is a boolean attribute, which means that the autoplay attribute needs no value for HTML5 web pages, all you have to do is include the word autoplay in the desired <audio> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the autoplay attribute will need to have a value of autoplay, for instance autoplay="autoplay" in-order for the attribute to validate in XHTML.
Here is how to code the autoplay attribute for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls autoplay> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
And here is how to code the autoplay attribute for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls" autoplay="autoplay"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
preload
Before I discuss the preload attribute you should know that the preload attribute used to be the autobuffer attribute but was changed to the preload attribute in the W3.org specifications. The autobuffer attribute is a boolean attribute, just in case you were wondering.
The preload attribute specifies whether or not the audio should be loaded when the page loads. The preload attribute is an enumerated attribute, which means that it has a set list of values also known as keywords that you can choose from, which include none, metadata and auto. I will explain about these values below.
The first value is the none value. The value none informs the user agent, for example the browser, that either the web pages creator, in other words the author does not expect the user to need the media resource, or that the server wants to minimize unnecessary traffic. A simpler way to put it is that the none value suggests to the browser that it shouldn't preload the sound file or audio stream until the user activates the controls, for instance by pressing the play button.
Now the metadata value informs the user agent, for example the browser, that the user is not expected to need the sound file or audio stream, but that fetching its metadata, for example its duration, track list, dimensions and so on, is the priority. So basically, the metadata value suggests to the browser that it should just prefetch the media files metadata, for example, the dimensions, track list, duration, and so on, but that it should not download anything further until the user activates the controls, for instance by pressing the play button.
The third value auto informs the user agent, for example the browser, that it should download the entire sound file or audio stream when the web page loads. It's important to remember that the browser may ignore the auto value, because of the users browsers settings or because it detected that the user has a very slow internet connection.
You may also leave the preload attributes value empty, for instance in HTML5 web pages if you just state the name preload or preload="" it will act like the auto value. In XHTML5 web pages you will have to state an empty preload attributes value in the following way, for example, preload="" in-order for your web pages to validate. Leaving the preload attributes value empty is considered a valid keyword which means your web pages will still validate.
Another important thing you should remember is that if the autoplay attribute is stated it can override the preload attribute, this happens because if the media file plays, it naturally has to buffer first, regardless of the preload attributes value. However, including both the preload attribute and autoplay attribute, will not result in an error.
Here is how to code the preload attribute using the metadata value for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls preload="metadata"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
And here is how to code the preload attribute using the metadata value for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls" preload="metadata"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
controls
The controls attribute indicates that the user agent, for instance a browser, should display its own set of playback controls for the sound file or audio stream also known as a media file. The playback controls can include the play, pause, seeking, and volume controls, which are better known as the play, pause, seek and volume buttons.
The controls attribute is a boolean attribute, which means that the controls attribute needs no value for HTML5 web pages, all you have to do is include the word controls in the desired <audio> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the controls attribute will need to have a value of controls, for instance controls="controls" in-order for the attribute to validate in XHTML.
Here is how to code the controls attribute for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
And here is how to code the controls attribute for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
loop
The loop attribute indicates that the media file, for example a music clip, should start playing again automatically once it reaches the end.
The loop attribute is a boolean attribute, which means that the loop attribute needs no value for HTML5 web pages, all you have to do is include the word loop in the desired <audio> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the loop attribute will need to have a value of loop, for instance loop="loop" in-order for the attribute to validate in XHTML.
Here is how to code the loop attribute for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls loop> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
And here is how to code the loop attribute for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls" loop="loop"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
src
Now the src attribute specifies the location of the media file to be played, for example a music clip.
The src attributes value can be an absolute URL value, for instance src="http://www.example.com/music.ogg" or it can be a relative URL value, for example src="/music.ogg", both types of URL's can optionally have leading and/or trailing space characters, which basically means that your src attributes URL value can have white space before and or after the URL value, for example src=" http://www.example.com/music.ogg ".
It's important to remember that you can also indicate a media file, for example a music clip, by using the <source> element as well. I will explain about the <source> element in a future tutorial.
Here is how to code the src attribute for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="http://www.example.com/music.mp3" controls> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>
And here is how to code the src attribute for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="http://www.example.com/music.mp3" controls="controls"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

How To Add A Playable Video Or Movie To A Web Page Using HTML5

Now in-order to add playable videos or movies to your web pages using HTML5. You will need to use the new <video> element for HTML5.
The new <video> element for HTML5 is considered a media element, that embeds a video file in a web page without requiring a plugin. You may also place content between the <video> element's start tag and end tag, which is intended for older Web browsers that do not support the <video> element, so that legacy video plugins can be tried, or the <video> element's contents displayed to the users that still use the old browsers that don't support the <video> element, informing them on how to access the video data, like a movie clip for example. Now user agents, like a browser for instance, that support the <video> element will not display the contents placed between the <video> element's start tag and end tag.
The <video> element requires both a start tag and an end tag.
When the controls attribute is used with the <video> element, the <video> element can not be placed inside an <a> element or <button> element.
The <video> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?". The <video> element can also use the attributes autoplay, preload, controls, loop, poster, height, width, audio and src. I will explain about these attributes in detail later on, after I show you how to code in the <video> element. But for now I will briefly explain the src and controls attributes, since we will be using them in our first example. The src attribute will specify the location of the media file to be played. And the controls attribute will specify that the playback controls should be displayed.
You should take note that your video or movie file will still display without the controls attribute, also most browsers will allow you to right mouse click the video or movie file in-order to view the controls menu for the video or movie file with or without the controls attribute present in the <video> element.
If the <video> element does not have an src attribute, the contents of the <video> element must follow a specific ordered structure, which starts with one or more <source> element's, then zero or more <track> element's, then followed by flow content or phrasing content. I will explain what flow content and phrasing content is and when you should use each one of them later on this tutorial.
So basically, if you do not place an src attribute in the <video> element, your <video> element's content structure should follow the following order below.
  1. One or more <source> element's.
  2. Then zero or more <track> element's.
  3. Followed by flow content or phrasing content.
Now if the <video> element includes an src attribute, it's important to remember that the contents of the <video> element must follow a specific ordered structure which starts with zero or more <track> element's, followed by flow content or phrasing content. I will explain when you should use flow content or phrasing content later on in this tutorial.
So in-other words, if you include an src attribute in the <video> element, your <video> element's content structure should follow the following order below.
  1. Zero or more <track> element's.
  2. Followed by flow content or phrasing content.
Now let me explain when you should and should not use flow content or phrasing content below.
When the <video> element is placed inside another element that is allowed to contain flow elements, then the contents of the <video> element may also contain flow elements.
And when the <video> element is placed inside another element that restricts other elements that are placed in it to only being phrasing elements, then the contents of the <video> element is also restricted to containing only phrasing elements.
It's important to remember that not all the browsers support the same video file formats, for example the browser Firefox 3.5 and up and the browser Opera 10.5 and up don't support the .avi format, but they both support the .ogg format. In case you are wondering what is a video file format, it's basically a medium for storing digital video data like videos or movies on a computer system.
Here is how to code the <video> element with the src and controls attributes for HTML5 in the example below in-order to add a playable video file to your web page.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the new <video> element with the src and controls attributes for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
Now let me explain the <video> element's autoplay, preload, controls, loop, poster, height, width, audio and src attributes, which I will list and explain below.
autoplay
The autoplay attribute will play the media file automatically as soon as it is ready. So basically, the autoplay attribute instructs the user agent, for example a browser, to automatically begin playback of the video or movie as soon as it can without stopping.
The autoplay attribute is a boolean attribute, which means that the autoplay attribute needs no value for HTML5 web pages, all you have to do is include the word autoplay in the desired <video> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the autoplay attribute will need to have a value of autoplay, for instance autoplay="autoplay" in-order for the attribute to validate in XHTML.
Here is how to code the autoplay attribute for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls autoplay> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the autoplay attribute for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls" autoplay="autoplay"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
preload
Before I discuss the preload attribute, you should know that the preload attribute used to be the autobuffer attribute but was changed to the preload attribute in the W3.org specifications. The autobuffer attribute is a boolean attribute, just in case you were wondering.
The preload attribute specifies whether or not the video or movie file should be loaded when the page loads. The preload attribute is an enumerated attribute, which means that it has a set list of values also known as keywords that you can choose from, which include none, metadata and auto. I will explain about these values below.
The first value is the none value. The value none informs the user agent, for example a browser, that either the web pages creator, in other words the author, does not expect the user to need the media resource, or that the server wants to minimize unnecessary traffic. A simpler way to put this, is that the none value suggests to the browser that it shouldn't preload the video or movie file until the user activates the controls, for instance, by pressing the play button.
The second value which is the metadata value, informs the user agent, for example a browser, that the user is not expected to need the video or movie file, but that fetching its metadata, for example its duration, first frame, track list, dimensions and so on, is the priority. So basically, the metadata value suggests to the browser that it should just prefetch the media files metadata, for example, the dimensions, track list, duration, first frame and so on, but that it should not download anything further until the user activates the controls, for instance, by pressing the play button.
Now the third value which is the auto value, informs the user agent, for example a browser, that it should download the entire video or movie when the web page loads. It's important to remember that the browser may ignore the auto value, because of the users browsers settings or because it detected that the user has a very slow internet connection.
You may also leave the preload attributes value empty, for instance for an HTML5 web page you will just have to state the name preload or preload="" which will act like the auto value. But for an XHTML5 web page you will have to state an empty preload attributes value in the following way, for example, preload="" in-order for your web page to validate. Leaving the preload attributes value empty is considered a valid keyword, which means your web page will still validate.
Another important thing that you should remember, is that if the autoplay attribute is stated it can override the preload attribute, this happens because if the media file plays, it naturally has to buffer first, regardless of the preload attributes value. However, including both the preload attribute and the autoplay attribute, will not result in an error.
Here is how to code the preload attribute using the metadata value for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls preload="metadata"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the preload attribute using the metadata value for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls" preload="metadata"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
controls
The controls attribute indicates that the user agent, for instance a browser, should display its own set of playback controls for the video or movie file also known as a media file. The playback controls can include the play, pause, seeking, full-screen and volume controls, which are better known as the play, pause, seek, full-screen and volume buttons.
The controls attribute is a boolean attribute, which means that the controls attribute needs no value for HTML5 web pages, all you have to do is include the word controls in the desired <video> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the controls attribute will need to have a value of controls, for instance controls="controls" in-order for the attribute to validate in XHTML.
It's important to remember that when you use the controls attribute with the <video> element, the <video> element can not be placed inside an <a> element or <button> element.
Here is how to code the controls attribute for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the controls attribute for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
loop
The loop attribute indicates that the media file, for example a movie clip, should start playing again automatically once it reaches the end.
The loop attribute is a boolean attribute, which means that the loop attribute needs no value for HTML5 web pages, all you have to do is include the word loop in the desired <video> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the loop attribute will need to have a value of loop, for instance loop="loop" in-order for the attribute to validate in XHTML.
Here is how to code the loop attribute for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls loop> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the loop attribute for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls" loop="loop"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
poster
The poster attribute specifies the location of a graphic file or image file that the user agent, for instance a browser, will use to display as a placeholder while the video or movie is downloading, or before the video or movie begins to play, or until the user tells the video or movie to play.
The poster attributes value can be any absolute or relative URL value. An absolute URL value is basically all the information that a server requires to find the file, for instance poster="http://www.example.com/movie.ogg" is considered an absolute URL value. And a relative URL value is essentially a URL that points to a link on a server in a local manner, while basically leaving out the domain name from the URL, for example poster="/movie.ogg" is considered a relative URL value. Both types of URL's can optionally have leading and/or trailing space characters, which essentially means that your poster attributes URL value can have white space before and or after the URL value, for example poster=" http://www.example.com/movie.ogg ".
If you don't include the poster attribute, the browser will display the first frame of the video or movie.
Here is how to code the poster attribute for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls poster="image.jpg"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the poster attribute for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls" poster="image.jpg"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
height
The height attribute specifies the height of the video player in pixels.
The height attributes value can be any non-negative integer also known as a number or digit, between 0 and 9. For example, 1 or 215 or 0 are all valid values, but a value of -13 is not a valid value.
It's considered good practice to specify both the height and width attributes together because the space indicated by the attributes values are reserved for the video or movie file when the web page is loaded.
If you decide to only include the height attribute but not the width attribute, the user agent, for example a browser, will adjust the size of the unspecified dimension to preserve the video or movie's aspect ratio. The aspect ratio is basically the width-to-height ratio of the video or movie file.
Here is how to code the height attribute for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls height="800"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the height attribute for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls" height="800"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
width
The width attribute states the width of the video player in pixels.
The width attributes value can be any non-negative integer also known as a number or digit, between 0 and 9. For example, 1 or 215 or 0 are all valid values, but a value of -13 is not a valid value.
It's considered good practice to specify both the width and height attributes together because the space indicated by the attributes values are reserved for the video or movie file when the web page is loaded.
If you decide to only include the width attribute but not the height attribute, the user agent, for example a browser, will adjust the size of the unspecified dimension to preserve the video or movie's aspect ratio. The aspect ratio is basically the width-to-height ratio of the video or movie file.
Here is how to code the width attribute for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls width="624"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the width attribute for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls" width="624"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
audio
The audio attribute indicates the default state of the the audio channel of the video or movie file, which may possibly override the users preferences.
The audio attribute currently only has one value to choose from which is the muted value. The muted value instructs the user agent, for example a browser, to override the user's preferences, if any, and always default the video or movie to muted. So basically, the muted value states that the audio for the video or movie should be muted by default.
Now let me show you how to code the audio attribute with the value muted for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls audio="muted"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the audio attribute with the value muted for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="movie.ogg" controls="controls" audio="muted"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
src
The src attribute specifies the location of the video or movie file, for instance a video clip.
The src attributes value can be any absolute or relative URL value. An absolute URL value is basically all the information that a server requires to find the file, for instance src="http://www.example.com/movie.ogg" is considered an absolute URL value. And a relative URL value is essentially a URL that points to a link on a server in a local manner, while basically leaving out the domain name from the URL, for example src="/movie.ogg" is considered a relative URL value. Both types of URL's can optionally have leading and/or trailing space characters, which essentially means that your src attributes URL value can have white space before and or after the URL value, for example src=" http://www.example.com/movie.ogg ".
It's important to remember that you can also indicate a video or movie file, for example a movie clip, by using the <source> element as well. I will explain about the <source> element in a future tutorial.
Now let me show you how to code the src attribute for the <video> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="http://www.example.com/movie.ogg" controls> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>
And here is how to code the src attribute for the <video> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <video src="http://www.example.com/movie.ogg" controls="controls"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

300Ribu Dapat Website
### ###