Duration: 20 minutes
Technology Used: HTML5 and Visual Studio 2010
Keyword: HTML5, Visual Studio 2010, meta, header, Link, hgroup, nav, mark, article, figure, img, figcaption, footer, aside, detail, summary, style, syntax, semantics.Transcript:
Welcome back everyone. This Ayad Boudiab. I am a senior .net application developer. If you are following us from the previous video, you know that we are discussing HTML5. We introduced the new mark-up in the previous, and we talked about the difference between the syntax and semantics and the semantics. We understand how syntax of a specific tag would look like. But, the semantic meaning of that specific tag is what HTML5 is more interested in. Instead of defining DIVs, and giving them specific id's I declare actually what every element is about. If I have a header, I declare it a header. H group, that groups all the H 1's, 2's, 3's, all the way to 6 together, it's defined as H group. Article, that's defined as article. For the figure with a figure caption. I have the footer, I have the nav for the navigation. And, then I have a side for something that will stand on the side.
Again, one thing that you have to be careful about is, let's go ahead and view then the browser. You see that there's nothing fancy about what we've done. Right? By defining something to be an H group, or something to be a nav all what you see is simply HTML that you have seen before. Nothing has changed. Right? There's nothing new yet as far as those are concerned. Well there's a couple of things, but nothing really dramatic or outstanding that we have defined. The only thing that's outstanding that we care about is the way those elements have been defined, and their semantic meaning for the language. Now, one thing that I also added in the previous video, in the top of the page, I added a link to the CSS style. This is the style page over here. And that's what we need to be concentrating on in this video. Is defining the styles for this page, so we can have a nicer page that we can work with.
Now, if you flip over to the CSS page you will see that the body tab is empty. So, I can start defining things in here. For example, I want the width of this body to be only 75% of the page. I save and try to view then the browser. Then I start noticing a few things that have been changed. It's not filling up the whole page anymore, it's taking up 75% of the page. Now, the other things that we can do, is let's say for example I want a style the headers and the footers differently. I can go into the CSS and I say for the header and for the footer, and I see them separated by comma, for the header and the footer I want things like these. For the color I want it to be something like that. For the background color, and you see that intlisense[sp] is helping me here, for the background color I can also select from the available background colors, but, I can also choose a different value. So, this is the background color that I'm interest in. I can also define the padding for the header and footer to be a certain value. For example, I want the panning to be 10 pixels. I can also define the border radius, and it's not right now in intelisense, that's why you see it underlined. But, it should be understood by the browser. I want the border radius to be 10 pixels, also.
This is how I want to define how I want the headers and the footers to be. When I try to take this and try to preview it in the browser, I'll end up with something like this. A rounded corner, different color for the text and the background and this is also applied to the footer. I have started making things look different. One thing that I need to bring to your attention, you notice in here I start typing all this Visual studio. I have in here the actual HTML and the CSS. The last thing, visual studio is helping me with intelisense, it's telling me about the actual properties and I can set their values. Again, I can take all this HTML and the CSS, go type them in notepad, save them, view the same thing, no difference. I don't have to use visual studio. Visual studio helps me with the elements that I just described.
What's even more interesting is that I can right click within this, and I can build the style myself. Now, I have a dialogue box that shows up and I can use the dialogue box to define things. And, you notice that the ones' that I already defined are bolded I have in here background, right, I defined the background color for the box, I made that 10 pixels. And, you notice in here would make more sense. That's what I mean when I say padding. padding inside for this specific box this is the border outside and this is the margin from the other outer element. And, this is the left top bottom right of course. As you change those values you will see the values that you changed on here, and you see the impact over here. This is what's nice about visually changing those elements in the dialogue. There are a few things that we can also go over here and implement. For example, I can do something like this, for the navigation I define nav and down ordered list within nav I want to have the listed style to be none. The list style I want it to be none. And, when I, of course, view the browser, and I try to explain that down here you don't see the bullets by this list anymore, and, you don't see the bullets in this list. The display style is none.
Also, I can do things like this. For the nav, unordered list, and the list items within the unordered list I want the display to be inline. If this display is in line I should see something like that. There not on top anymore, there one beside the other. You notice the changes that we're heading towards as far as those links are concerned. Now, I'm adding those CSS to the page directly, so you don't have to see me type them directly, but, I'm going over the one at a time. For example, in this case, for the header, navigation of the header, unordered list, the list item within that, the link within the list item. I want the background color to be black. The padding 5 pixels, the margin 5 pixels, and, again you tell me what's padding and margins? You see them here right this is the padding and this is the margin outside. I want those to be 5 pixels. I want it to be bold for the font. The color is actually white for the text. The border rate is to be 5 pixels.
That's again, where, in the header, navigation, and ordered list. This item A. This within this, within this, within this, within this, within that. I take this and try to preview it in the browser, now I have them like buttons. I have the background color to be black. I have the text to be white and so on. I turned them from an unordered list into buttons. These are what the styles are doing to this page that I just defined with the new elements, like the article, the header, the footer, the side, and so on. We defined those for the header. Let's define more and see what they look like. I'm gonna go over them one at a time. For the header, navigation of the header, unordered list, and the list items within the unordered list. When I hover over the A link I want that color to be active border. When I hover over the actual A link, within the actual list item. When I hover over the A link within the list item, within the unordered list, within the nav, I want the color to be at the border. For the footer, for the A link within the footer, I want that to be bold. For the footer, the nav within the footer, the unordered list within the nav I want the text align to descendent. Footer, nav, unordered list. Footer, nav, unordered list. For this I want the text align to the center. For the footer, nav, unordered list, list item A, I want the text decoration to be none. So, they won't be underlined. The color to be black and the margin 7 pixels. I go to the footer for the nav, unordered list within the nav, [LI] list item within the unordered list, and the link within the list item, I want that to be decoration none, color black, and margin 7 pixels.
For the footer, with the nav, unordered list, list item again, but, for the A visited when the user clicks on this link, I want that color to change into olive, to show that you already visited this specific link. Let's go ahead and save and let's preview our changes in the browser. We see this, when I hover over them, you see how the color is changing. A hover, that's A hover. When I go back down to the footer since I clicked on [inaudible 00:11:41] I have that link changed to olive. Text decoration is none so you don't see them underlined.
So, that's how I want the footer to look. Also, earlier I decided that I want the text to be centered. You notice that the text is centered within the footer. So far so good. Let's continue with the rest of the information, and look at a side and article. Define those. Let's start with the side first, and then, look at article. Well you know what let me format article first and get that out of the way before I go to the side. For the article, I want the border top right radius, to be 25 pixels. The border, the top, right radius, on the top right the radius on the top right to be 25 pixels. And the bordered bottom left radius to be 25 pixels. Here's the box on the top right I want 25 pixels on the bottom left I want 25 pixels as far as the radius is concerded to make it round.
Panning 20 pixels. Margin from the top is -20 and margin from the right is 75. Let's say here is the 00 corner over here. I go x this way I go down positively y down that way. So,the panning from the margin from the top is -20 and the margins panning from the right is 75 pixels. The background color to be this color. Let's go ahead and save. Let's try to preview that in the browser of the changes that we've done to the article tag. You notice it didn't show up properly down here at the bottom left, but, notice what happen to the top right. See that corner, that's the 25 pixels that we just defined, and, here is the rest of the article. You also notice that for the figure Mr. Bool, look at the thick caption, Mr. Bool is great learning experience. This is the thick caption that was displayed down here. You see that? [inaudible 00:14:07] is a great learning experience. This is the thick caption displaying right underneath the figure. Here is the figure that I just defined, and, here is the caption underneath it.
Now, one thing that I also need to show you. What is this one? Recent video Mr. Bull audio course HTML. What is that? This is the site. It isn't showing up underneath. I thought it should show up on the site. Well, HTML doesn't tell you that if we define a site I'm gonna display it on the right hand side. No, that's what you intend to do, and using CSS you will be able to do whatever you want with it. Now, the details underneath, is interesting. Because, the details will actually display a summary, it says 'want to learn more' will sum information underneath. Let's see how by not changing anything, notice with the details I did not define any CSS for that detail. So, nothing changed in there but simply displaying the details and summary underneath, I'll end up with something like that. Scroll down to the bottom. It says "want to learn more." You see the arrow over here, you click on it, and you have some more text underneath it says "[inaudible 000:15:32] site covers various subjects you are interested in." This is the details section with a summary you will be able to display things like a show and hide type of thing. You could define that with a div, and then with some Java script you will be able to show and hide. But, HTML5 already gives you that out of the box. Which is interesting because right now I can have a summary and a detail section displayed underneath.
The other that I'd like to talk about is the side and how it's CSS would look like. Let's define the side. The side has an absolute position right is 75% from the right. Width is gonna take 115 pixels. It has a panning of 4 pixels. Background color of this, and bordered from the left is 2 pixels solid black. The border form the bottom is 2 pixels of solid black. So, left bottom, left bottom are two pixels solid black. Bordered from the top right radius is 25 pixels, and the bottom left radius is also 25 pixels. Make the font size to be small and from the top is about 43%. Let's see if this will display properly. I could mess with these values to make sure it looks nice. But at least let's see if this will actually do the job. So, here's the aside section. As you recall the side section was down here on the bottom, but, using CSS I was able to change it and display it on the side like I intended to. You notice the rounded corners on the top right and the bottom left. You notice the thick borders on the left and the bottom. You notice the small font being displayed and here is a link for it.
So, for example, you can display an article over here and then some interesting information about the article that shows up on the side section of the article. Again, you might see this one over here is like a couple pixels off you can change that to make it even nicer, bring it down a little bit. But, that's pretty much, it can do the job. By looking a this you will see there is a lot that you can define with HTML5 ,and again, all of this we controlled it with CSS. There's a lot of elements being defined, maybe some of them work out of the box like the summary section in here. But pretty much everything else when you define it, it doesn't mean that if there's an article that you will have some type of article formatting. No, it's just a section defined as article. The semantic meaning of it is article and then you will be using CSS to make it look the way you want it to look. So, what we did in here then is in the previous video we covered the elements, we defined them within the page. In the next one we defined the CSS that actually makes up how the page looks. I hope this discussion is clear about the new mark up with HTML5 and how we can work with it. And, again one interesting that you need to do is always make sure that it works with different browsers. We only tested that in Chrome. You need to test that in IE, Firefox, and Opera like we've been doing before. Please let us know Mr. Bool website if you have any questions. Thank you very much for listening I am Ayad Boudiab. You have a good day.