Welcome back to the fourth lesson of our HTML5 Courses.In this lesson we will discuss about the HTMl5 Shim and Figure.
Html5 Tutorial – Lesson 4
1.8:The HTML5 Shim
Image may be NSFW.
Clik here to view.
Today we’re going to take a look at what we call the html5 Shim.There are swords of used interchangeably.So I’m going to give you a quick rundown on why we need to use it and then we’ll cover just a little bit of the history.So in modern browsers everything’s fine you don’t need to worry about anything.Here we have an article that contains a blog posting we can solve that give the background color of red come back going to work swimmingly.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
No problem there whats so ever.However if you view this page in Internet Explorer 8 or below what you’re going to find it strangly that read is not showing up at all.It’s not weird,it’s because in Explorer does not recognize these new tag. So not only this is not recognize them but it will not style them at all.So this seems like it was going to be a big hurdle because of course you can’t suddenly ignore all of the Internet Explorer 8 users.This is the big problem with XHTML two or even 1.1.And we don’t wanna go down that load again.So it was discovered a long time ago maybe 2008 is in this is the comments that really changed everything.By the way if you wants hcss rules to apply to unknown elements in IE you just have to do a document type create element.This somehow lets the CSS in to know that elements with that name exist.
Image may be NSFW.
Clik here to view.
Before the secured nobody knew that you can do that it was pretty interesting And then John Ressiq wrote about it and he called it the html5 which he admits that was in the correct term it actually should have been shim but that’s how it goes.
Image may be NSFW.
Clik here to view.
So the way it workes is if we create documents.create element in this case article that process alone somehow trigger in IE into recognizing it.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
So try it out to find Internet Explorer 8 Internet Explorer 7 load up a virtualbox.If you need to be intested out without this line Internet Explorer will not recognize article tag and will not allow you to style it.So you not have the background of red.
When you add document,create element in your javascript that seemingly does the trick.And I can tell you why I’m sure there’s a reason behind it but for me it’s good enough know that process alone who did the trick for you.Then you would want to do is all the tags that you’re creating or you could play some all within an array and then run a quick for a while statement through them to create the elements.But because this is pendom so commonly Remy Sharp who is a very popular and well known web developer,he wrote introducing html5 if you’re feeling you’re with that book along with Bruce Lawson.He created the script called HTML% enabiling script and it’s available on Google Code.So,open the surf it’s just a handful of things.At first it’s simply wood filter and critters elements and just went to it you don’t have to worry about that.But then it was also found that there were some issues wear when you would print and Internet Explorer you have that same problem again.
So I took a solution that somebody created an integrated into the html5 shim as well.so now is when you’re creating html5 applications which is going to be every single website or application from now on you’ll simply want a place that at the top like so.I want you to know that we are spacifing that this will only be included for Internet Explorer 8 or below.The reason why we are doing that is Firefox and Chrome and Safari and Opera they are not gonna benefit from this script at all.So for those browser you don’t want to add that additional http requests.We only wanted for IE 8.So you will one update if you have a little template you use for new websites want to make sure that this is in there alternatively if you use something like modernize our integrates this.So you do not need to include both.
1.9:Figures
Here we’re going to be taking a look at the new html5 feature tag.So if we take a look at the definition on (W3.org) we can see the figure element represents a unit of content optionally with a caption that is self contained that is typically reference as a single unit from the main flow of the document.
Image may be NSFW.
Clik here to view.
Okay definition so fine that’s a really hard to decide and I wouldn’t blame you if you read that instill really have no clue,So here’s the basic idea the figure is most commonly used to connect images with captions.That’s how people seem to be using at the most.However that does not mean that it is limited images you can also be used for wraping.
So the idea is that the feature will represent content that is essential to what is contained in.So you’ll find that this is somewhat similar to aside tag.Aside tag means its contents that not necessarly important but it’s related to what you’re referring to.So in addition to the sidebar the common use for a side that could be used within an article may be a div,you know section because it’s not essential but its still content that’s related to whatever your main content is maybe a blog article.However a feature tag refers to content that is essential to the blog posting such as an image however it’s position isn’t absolutely important.May be it can be shifted at the site,maybe can be replaced somewhere else and that’s why it’s used most commonly 4 images.Also in addition it’s a great way to connect a captions to an image.So let’s take a look at how we can use it.Here I have a blank template and I am going to add an image here we’re just going to bring in the envato logo,alternate text and now let’s take a look at how this appears in the browser.
Image may be NSFW.
Clik here to view.
Here we are very simple image nothing special there but now we want to apply a caption to it.So normally what you might do is maybe you have headings 6 or maybe you just do a paragraph below and you could provide caption for this image.And It looks like this image probably has a huge white background and that’s why it’s pussing the text down.But that’s okay this still illustrates the point that for plain excessive.There’s nothing connecting this paragraph to the image..You could be something related to something else on the page.So why don’t we wrap this all with in the new figure tag like so rather than use a paragraph tag we’re going to use the new fig caption.
This is where we provide the caption for the figure.So now it’s so great about this is actually meaning here now have a figure we have her image or whatever it is code snippet it could be a lot of things.And now we have a way to attach a caption specifically to that image.Now I want you to know there’s nothing that specifies that you can only have one image.So let’s say you had a handful of images maybe.So I could have multiple images here and the caption could be various members of the motto community.So there is this that limits to a single image or single code snippets.
So really what you’ll find is it’s a nice convenience.It gives us a hook so that we can style this which is always nice.But more importantly it describes your content much more.So remember that you’re going to use a figure when the continent is essential to what is related to.However may be its position within the document is important.But if you wanna simplified for now you can just think of the figure as a nice way to attach a caption to some other element usually in an image.
That’s all four this lesson..
The post Html5 Tutorial – Lesson 4 appeared first on DevsTrend.