Tutorial Basic HTML 5

Year 2011 is the year of HTML5 , Internet Explorer 9 release after several months ago , then all of the major browsers ( IE , Firefox , Safari , Chrome and Opera ) already support HTML5 and CSS3 . Yes , although not all functions supported HTML5 & CSS3 spenuhnya , but this year is the birth of HTML5 . So wait no more , you still use XHTML ? or maybe even HTML4 ? start learning HTML5 , there are a lot of very interesting new tag2 . Here I will teach the tags recently and most widely used in melayout a website .

Before you continue reading this article , I suggest you understand the basics of HTML and CSS basics first. Because here I will only explain the new tags in HTML5 , then I assume you already know the old tags .

Okay , before we will be creating a website with HTML5 layout / wireframe is roughly like this :

Well with a Wireframe like about that later we will use the following tags :

Wireframe Website Structure

Okay there are a lot of new tags , well, let's start it , prepare your text editor and we make declarations <head> HTML5 along with it:

Structure HTML5 Website Wireframe

<head>

<head>

<body>

The web content here

< / body>

< / html >

Sip , it is more simple , if the first times we need to declare the XHTML transitional or strict , now quite < ! DOCTYPE html > . Well for me it would tell the new tags , then each subsequent code you enter in <body> , existing web content writing here .

The first tag we are <header> , as the name tag is placed on the early part of the website . In the past we used <div id="header"> now we replace it with <header> . But it should not merely dipaling <header> over the web , we could have some <header> , for example in the article ( we will discuss later section of this article) .

Well , in this <header> we can fill all kinds , such as logos , navigation , headings , and others. Even filled <div> is not a problem .

Weittss <hgroup> , what else is ? Okay so easily if we have one or more than one heading sequential <h1> - <h6> then we can group them with <hgroup> . Usually used when we have a title and no subtitles, or for the title of the web then we have a slogan . But if only one yes headingnya not have to be given <hgroup> . Okay than just dizzy ya see, for example :

<h1> This is my first HTML5 Website < / h1 >

<h2> And also the last because I am confused < / h2 >

< / hgroup >

Okay , when I see an example to understand it , sip later we are still going to bring something to the <header> .

<nav>

Well , the name is already noticeable that this function is to display the navigation on your website . Yes, if we use <ul> <li> first to make the navigation menu , well now we use ... ummm .. yes same <li> <ul> wear as well, but we wrap with <nav> . Now we just see the example code :

<ul>

<li> <a href="#"> About < / a> < / li >

<li> <a href="#"> Contact < / a> < / li >

< / ul>

Sip , the same right? To remember that <nav> used to view the first - ngelink main page of the website or any part of the page itself . If for paging , Social Networking or mailing lists that other uses do not need to be given <nav> <ul> .

As the name implies <article> used to wrap text in the main text of the article or our web page . We may have many tags <article> , eg just a comment , now every comment we wrap <article> use or forums and so forth . If we have a list or a list <article> , eg blog , then we need to wrap it with <section> if there is another element that is not <article> and explain about the <article> . Confused ? Jump kecontoh :

<h1> Latest Articles < / h1 >

<article> Text Content Article 1 < / article>

<article> Text Content Article 2 < / article>

<article> Text Content Articles 3 < / article>

< / section>

So because some of the groups there <article> <h1> then we still need to wrap it with <section> .

<section> should not be given the style , should not be a layout container . Keep using <div> if you want melayout .

Well , <time> berijutnya is , as the name implies , is used to indicate the time , usually used to indicate the time publish articles, comments , forums , and so forth . <time> have a datetime attribute that contains the time can be in the format yyyy- mm - dd or hours such as 19:00 . It is used so that search engines can recognize the time in standard format even though we did not write it in a standard format . example :

<p> Written by Dhimas on Monday datetime="2011-11-23"> <time Pahing , 23 November 2011 < / time > < / p >

Easy right ? okay we 'll go to the next tag

Oh yes , rumors say that <time> be disposed of HTML5 would not know what changed , but I think the tag <time> pretty good and do not need to be replaced

<figure> used as a wrapper for <img> . But not always all of our <img> wrap with <figure> , only the main pictures only or pictures that we want to label . Now we give the label with <figcaption> . Okay just look at the example code :

<figcaption> This is a photo I took of the artist in times < / figcaption >

< / figure >

Roughly the code as it is , we live menstylenya with CSS alone according to our wishes . Oh yes, we can put the tag <a> , strong , <em> in <figcaption>

<aside>

Well this is my own tag ya still confused usage, for example the use of each website <aside> different . Okay , judging from history <aside> it initially but later changed his name <sidebar> be <aside> . Well <aside> a tag that contains content associated with the main content in a web page , means it can be concluded that the okay <aside> used as a sidebar on the website . Well the problem every sidebar wordpress example , in which there are definite contents again , if the usual wordpress widgets . Well kept his code like? There are three possibilities , the first one :

<aside>

First this Widget

< / aside >

<aside>

Both this Widget

< / aside >

<aside>

Third this Widget

< / aside >

Or the second :

<div>

First this Widget

< / div >

<div>

Both this Widget

< / div >

<div>

Third this Widget

< / div >

< / aside >

Or the third :

<aside>

First this Widget

< / aside >

<aside>

Both this Widget

< / aside >

<aside>

Third this Widget

< / aside >

So which one is correct? <aside> therein <div> <aside> or therein , or <div> therein <aside> ? There is no definitive documentation which is true , but I tend to use the third , because the levels <div> broader or higher level than <aside> . But it's up to you , because of all the websites that are already using HTML5 using all three methods.

The latter is <footer> , as the name implies <footer> placed at the bottom of the website , but we do not just use the end of the course website . Just as <header> where we use the last part <footer> <article> . So basically the same as <header> <footer> , only <footer> end while <header> beginning . The following simple example uses the footer at the end of the website :

More tags

Sip , easy right ? Eits do not like it , it was all examples of tags that we use , there are many more other tags are more magical as <canvas> , <audio> , <video> , <summary> , <progress> , < datalist > there are many more , forget what I wrote .

But the main and important - yes it was important that I sebutin . For others it sometime if I could create a separate article , good luck , if there is one please discuss in the comments below .

In order for the road HTML5 in IE8 , IE7 and IE6

There are forgetfulness yesterday , how that road HTML5 in IE8 , IE7 and IE6 ? given that only Internet Explorer 9 who support HTML5 . You can use Javascript to do so , there are 2 that I think is good is Modernizr and HTML5 Shiv . I will tell the HTML5 Shiv because the script faster and easier . But if you want the old IE browsers support CSS3 then use modernizr . Okay header just plug in code like this :

< ! - [ if lt IE 9 ] >

< ! [ endif ] - >

2 comments

Post a Comment

Translate Language

Visitors

Like Box And Followers

Categories

Popular Posts

Followers