HTML SEO and Stylesheets tutorial

Posted on

HTML SEO and Stylesheets tutorial

Image source: http://www.lostsaloon.com/wp-content/uploads/seo-inline-css.png

Hi there. Welcome to the next video of the HTML training and I want to start this video by talking about an important point. The HtML documents or web pages that you create have to be written keeping two [types of] users in mind. One is the people who are actually going to read your web page and the second user is the search engines.

It is an important thing to optimize your web pages, so that they are popular with the search engines. So that people can look up your content easily. In order to be more discoverable by the search engines, you have to pay important attention to a few things. One is that you should have an appropriate title.

Whatever is the content of your web page should be summarized in the title. The second thing is you can use something called keywords. Keywords are the important phrases about your content and the third is by the use of the heading tags that the search engines can use to navigate your web page. So we have already seen the title tag, so I already have a basic structure of the HTML document set up over here.

So, within the HEAD section, I can put the title tag and I am going to use the title as Learn HTML and close it off. So I save it and when I refresh the browser window, it gives the appropriate title over here. The other thing that you can do is by the use of a new tag called the meta tag and the meta tag is used to define the keywords about your content. So, meta tag also goes within the HEAD section of the HTML document.

So, how we put it is use the meta tag and the meta tag has some attributes. So, let us say we are using the meta tag to specify what are the keywords of the web page. So, we can use the name attribute name and the value is "keywords' and here, we can specify the keywords within the content attribute. So, let us say, this particular web page is about HTML.

It's about Training and it's about Software. So, I have implemented a couple of measures by using the appropriate title, by using the appropriate keywords. I have made my web page more friendly to the search engines so that the search engines can find my web page easier and show it to the users. The other thing I can do is I can implement the headings, so Learn HTML tags can be one heading and here I can put the content for the HTML tags.

I can put another heading for Learn styling and after that I can put the information related to the styling like this. So, by taking these measures (by putting the appropriate title, by appropriate keywords and by using appropriate headings), we can make our web page easier to Read by the search engines, and we can make it more popular. Now, today what I want to do is to show you few more things for styling your web pages. And this is done by the use of something called as style sheets.

So, in order to show you the style sheets, I need a few paragraphs. So, let me use the p tag and say "This is paragraph1" Close off the p tag, and I need a few more paragraphs, so let me just copy this and paste it a few times and This is paragraph2, 3, 4 and 5. And go to the browser and make the content a little bit bigger. Now, here we have different paragraphs given over here.

Now, in the last video what we saw is that we can use attribute of style in order to give additional information about the presentation of that particular content. So, how we used it was to use a style attribute. So let us say, I just want to style the paragraph1 differently. So, I can put the style attribute and the value is color is red.

And save it and now you can see that the first paragraph is in red color. This is okay if we just have to apply style to a particular element in the web page. But what if we have to apply the same style for consistency to a number of elements? Then, it would be tedious to copy the same style from every element and paste it in the subsequent elements. So, we can use the style sheet for that.

So how we use the style sheet is by using the style tag and the style tag we can put within the HEAD section. When we put the style tag within the HEAD section, that is applicable to the entire web page. So, here we can use the style tag like this and what we can do is use the type attribute. Type = text text/css and then we need to close the style tag and in between, we can specify the style.

So, let us say, we are interested in specifying the same style to all the paragraphs. So, we can say p and here, we can specify within curly braces, what is going to be the color. So let us say, we want the green color for all the paragraphs. So, we put color as green and close off the curly brace.

Now, when we go to the browser and refresh it, we see all the paragraphs have become green, but the first paragraph is still red. Why it is red? Because there is a conflict. In the first paragraph, we have specified a different style. Now keep in mind that the style tag given in the HEAD section is applicable to the entire web page.

So, this is applicable to all the paragraphs. So, if I just remove the style from this paragraph and go to the web page, save it and refresh the web page, all the paragraphs are green because it is taking the style from the style tag given in the HEAD section. But let us say, still we want to apply some different style to a particular paragraph. We can always do that by using the style attribute for that particular element.

So let us say this time, I just want to apply a different style to paragraph2. So for paragraph2, I can specify the attribute style, and I can give something else over here, instead of the color. So, background-color and I can give the background as say, yellow. So this time, what is going to happen is that paragraph2 is going to take the style specified in both the style tag in the HEAD section and also it is going to take the style that is specified within the element and try to merge those.

And of course, if there is a conflict then the inline style (which is a style given within the element) will win. But this time, there is no conflict. The overall style just says that all paragraphs are green and for paragraph2, additionally, the background color is yellow, so let us save it and see how it looks. So, here you can see all the paragraphs are green in color.

No problem. And also for paragraph2, we can specify additional style. The additional style specified for paragraph2 is that the background color is yellow. We can put other things also, so let us say we want all the paragraphs to be aligned differently.

So in the style, we can give the property, text-align and we can give it as center. And save it, refresh the web page. Now, you see all the paragraphs are center-aligned. We can make all the paragraphs as text-align: right, and now they are all right-aligned.

We can do other things also. So let us say, we want all paragraphs to be left-aligned, but we want to give a margin of say, 50 pixels. So, how we can do that is give margin-left (the left hand side margin) and we can say is 50 pixels. And save it, refresh the web page.

So you see all the paragraphs are shifted by 50 pixels from the left hand side edge of the browser window. We can do other things also. So, let us add another element. Just to show you that the styles can be applied for different elements.

So, I can have a span. "This is a span" and close off the span tag. So, let me put a couple of spans here and This is a 1, span2 and span3. And in the same style tag in the HEAD section, we can specify what is the styling for the span.

And here in the span, we can specify say, that we want…Let us see it without any styling at first. So you see the three spans. They are just the default presentation is there. But what we can do is we can give some additional styling here.

So for span, what I want is let us say, I want all the span text to be underlined. So, I can use the text-decoration property and I can give text decoration as underline and close it and close the curly brace also. Save this web page and refresh it. Now, you see all the spans are underlined.

Instead of underline, we can put something else. We can put line-through so this will appear with a strike-through presentation. There will be a line running across the text of the span elements. So, this is how it looks.

Instead of underline, or line through, we can put a line above the span also. So, this is an over line. Let us say, that there is a requirement and what your manager wants to do is ask you to convert all the paragraph text to uppercase. One thing is that you can do it manually but using the style sheet, there is a very easy way to do it.

All you need to do is include another property and that is called text-transform. And you can give different values to it. So let us say, we want to make all our paragraphs as uppercase. So save it.

Now you see all the paragraphs are uppercase. We can make all the paragraphs as lowercase. Also, and also capitalize it. So, now all the paragraphs are lower case.

So, style sheets by using the style tag within the web page, is a very powerful way to style all the same elements. For example, all the divs or all the paragraphs or all the span elements or all the links or all the images consistently. And you can specify the style information once within the style tag in the HEAD section and automatically it gets applied to all those elements within your web page. So, I hope you enjoyed learning html So, that's it for this video.

Thank you very much..

Leave a Reply

Your email address will not be published. Required fields are marked *