Html5, Tutorial, Web

Html5 Tutorial – Lesson 1

html5-tutorials

HTML is the language of the World Wide Web. If you want to put any amount of content on the Internet, HTML is the first thing you want to learn.We have decided to start a new course of HTML5 for the beginners who want to learn HTML5 easily.

HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web.In this course in step by step fashion we are going to dig into this new technology,including the various new HTML5 tag,feature detection and working with the couple of new JavaScript API.

So today is our first lesson and in this lesson we will show you the fundamental and basic of HTML5.So let’s start..

Html5 Tutorial – Lesson 1                                               Html5 Tutorial – Lesson 6

Html5 Tutorial – Lesson 2                                               Html5 Tutorial – Lesson 7

Html5 Tutorial – Lesson 3                                               Html5 Tutorial – Lesson 8  

Html5 Tutorial – Lesson 4                                               Html5 Tutorial – Lesson 9

Html5 Tutorial – Lesson 5                                               Html5 Tutorial – Lesson 10

Html5 Tutorial – Lesson 11                                             Html5 Tutorial – Lesson 12

 

Html5 Tutorial – Lesson 1 

1:Basic

1.1:The Doctype

Late take a look at the easiest change you can make to begin using HTML5 and thats the doctype.So we have here a standard template we have a lot that we can remove here.But for  this lesson I want to take a look at the doctype.In a few like me there are a little bit confusing thing tahat there are so many deference once.We have Doctype HTML public //W3C//DTD XHCTML……. 

html5-tutorials-1

So the first think I can tell you is none of us memorize it,don’t feel bad if you copy and paste it or you have a template that you used all of this instead.And the truth is this doctype really only source of either standard mode or corx mode.When we are surfing our title (text/html) the only purpose of the doctype is to trigger standard mode.So all browser will look at this and find the presence of the doctype and correctly switched to standard mode what is the shortest doctype we can create that will still complete that task.so just use only <!DOCTYPE html>

Now a lot of people incorrectly thing that its great for HTML5 but it will not work in some browser like IE6 or IE7 but it works in IE6 you don’t believe me go ahead and check.you are not gonna have any issue what  so ever if you serving the content(

content=”text/html…”) and you will be.The great thing about this if the browser does not support HTML5 we can still use HTML5<!DOCTYPE html> what we do just switched to standard mode.

 

1.2:Want to remove

html5-tutorials-2

Now we have created a doctype lets see what else we can fix in this template.We go to the top of the bottom.First we come to the html tag and you can see we are specifying the xhtml attribute but this is not necessary we are not working with xhtml here.So we can remove that entirely.If you want we can specify <html lang=”en”>and that’s sometimes a good practice so you can take this in your template.

Next we come to our head section.Our title looks good.But then we come to this (<meta http…)and this is another thing probably we didnt memorise it.We simply paste it in.While we are surfing our title (<meta http..)we can get rid of the entire thing.Next when we are spacing our content type the browser does not need (http-equiv=”…”)so we can remove this.once again there is no need to content=charset=…we make it<meta charset=”utf-8″You can do a little bit more if you want.The XHTMl recommended the sub close tag but it is not really necessary.So you can remove it and that will not going to change anything at all.

And secondly this one comes down to a preference and its either or not use cottation around the attribute.Its not necessary except a few situation where there may be a space or some other symbol. so in this case if you want you can get rid of the cottation entirely.And this is gonna work fine.Now the only thing is while you remove the cottation it feels good just get rid of some code which is not necessary.However it is helpful to the editor that you want to see that provide proper syntax highlighting.So if you use the cottation we can easily see what the attribution valu is.And thats why currently i still preferred to do it even though it is not required but for the syntax highlighting.Now moving on to the (style type=”text/css”).

In this situation when you are using the style tag ask yourself have you  ever use the style tag when the type was something different.So it sure that the type would be css.So we can remove (type=text/css) and that gonna work properly.And we have the exact same thing in our script tag.at last you need a specific type maybe you are working with a template like JeQurey template so you can remove it.And now now we have a much cleaner HTML5 template.We have a doctype,we have the html.Not only we are typing less character but it much easier on the eyes.So in the next lesson we are gonna take this to the extreme and I will show you the shortest possible html page you can create.

   html5-tutorials-3

1.3:The simplest HTML Document possible
html5-tutorials-4

There you should no something technically all tag are not required bt when you have a list item you have to close it.If you don’t close it you gonna do something wrong and its going to break.But the truth is all browser are smarter than you and its know their Specific declaration that says if it comes to a new list item,its need to close the one before.So if you want it, its perfectly ok just close the previous item.But again for some people it feels better to close it.So you need to decide yourself what you think about it.

Technically you don’t required closing tag for html and body.So just go ahead and remove this.I am not suggesting you to do this for all your project.But if you working on a demo or something which not required you can get a way of it nothing is going to happen.Lets remove the script because we don’t need it and now we will write a ul tag and get rid of the child tag.Now the head tag doesn’t need to be closed as well.If you want to be specific about it the browser need to knew the title and the meta element along in the head.So we can remove the head tag as well.Same thing with  html tag,its emplaied .So we can get rid of this.And now we don’t need the opening body tag.

   So we can get rid of nd running.We have a doctype.We specific the title,we specific the meta charset.So I am gonna save this view this on browser and lets see what displays.
html5-tutorials-5

Now we have a simple page.If I view the source code it looks like exactly what I typed but what gonna i view to generated source.I am using chrome and I am gonna go to inspect element and we are gonna look at the code browser generated for us and substituted everything for us.Lets see we have a doctype.we don’t need html tag but it added it in there.We have the body,we have the head section and again it knew to wrap the title and meta tag within that head section even though we did not include it.Then we have the the opening body and the closing body.And once again we did not add any of this.But the browser know what to do.And this gonna work in all modern browser.
html5-tutorials-6

you will find that for an example google base this very thing they keep it as simple as possible so that the page load as quickly as it can because its not necessary for very simple pages.

For most real project are built just like we built in the last lesson.But I like to use this when i am simply running to a quick demo I wanna try something else either than typing a full template I just use this and running this as quickly as possible.So more than anything its important for you to understand that you re not smarter than a browser.So if you believe the browser is not enough smarter to handle a missing list item,you are wrong.It knows more than you do.And this gonna be same thing technically  you could leave up a closing paragraph tag.Almost people don’t.But you could do that if you want.You could do the same thing to the definition list.So the key is to make sure that you understand  enough about whats going on behind the scene to make the most appropriate decision.But for the most project  i am gonna recommend the template that we creted the last lesson.

 

That’s all for our our first lesson.In the next lesson we will discuss about the header,footer,navigation,section and article.

You Might Also Like