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>
300Ribu Dapat Website
1 komentar:
Thanks for sharing <3
candy games free
car parking games
Posting Komentar