Hello Friends! Welcome to Technosaavy !
In this lesson we are going to take a look at how to format our text content using HTML tags. Now I have got my working files open to the chapter two folder and just to get started I want to take a look at the try-out-text file, I will open it in the browser and in this case it's a big block of text up here at the top.
But, we'll be fixing that very soon, now I want to open that in our text application and here it's our code and we are ready to go.
<!DOCTYPE html>
<html>
<head>
<title>try out text</title>
</head>
<body>
this is a heading
this is a sub heading
this is the next heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus.
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor.
</body>
</html>
All my try out files are intended to be simple and have just the code we need to work with. You can see that we have some of the basic codes setup for the document....... Title, head and the body.
We can also see why our text is lumped up there at the top and that's because we don't have any HTML tag for formatting our content in the body. So, let’s see if we can fix that. I'll start by adding a paragraph tag right at the beginning of the paragraph section in the body and will do that at the beginning of rest of the sections as well. I'll just select the whole tag and then I’ll copy it and will just go to the beginning of the next section and paste in a new start tag, and again for the next section. Now as we saw in the earlier lesson the white space really doesn't matter here, so we can put the tag where ever we want. I tend to put it at the beginning of the short lines and I’ll put it above a larger block of text so, I’ll place it above the next few paragraphs then add in the closing paragraph tags that's </p> and again will copy that tag and paste it on the end of the other paragraphs, and off course we want to see our changes so, let's save our file and then we will go back over to our browser and just refresh the page.
Now we can see the separate blocks of text separated as they were intended. Now off course we are going to do a lot more than just separate blocks of text. As we can see from sample place holder here, these top three are actually intended to be headings and right now they just look like normal text paragraphs. So, let’s go back into our HTML document and let’s change that. Now the paragraph tags are acting as what we would refer to as block, they are blocking out the text and separating it from other text and we have got a number of other block tags we can use as well, some specifically for headings. I'm going to change the first one on our top heading and I’m going to change that <p> tag to an <h1> tag that's the top level heading and if we are going to have an h1 tag at the beginning of the block of text we better have a closed h1 tag at the end. Now as you might guess since there is an h1 tag we have got an h2 tag, h3 tag and they go over up to h6. So let’s set those on our two other subheadings here, I’ll make this an h2 tag and off course close h2 tag and will go for an h3 tag here at the next level heading. Let’s save our changes. And we will go back over and refresh our page.
And here we can see exactly what a heading is going to do, the heading tag takes the text in the blocks like it did with the paragraph tags but it also bolds the text and modifies the size. It also helps the reader to figure out basically what each type of content is.
Now our heading tags and our paragraph tags are doing something a little bit more than just formatting the text and breaking it up. They are actually formatting our content for lots of different types of media. For instance one major consideration while working on HTML sites is making sure that your site would be accessible to people with disabilities like visual disability, as they can't see a browser they will use a screen reader program to read the content to them. And that screen reader can actually also use the tags that we used to format the text, itself. The screen reader would know that an h1 tag is a big heading tag whereas an h2 tag is a subheading tag and the paragraph should be treated as content. So it's actually very important to use HTML tags properly to format our content not just so it looks good on the page but also so that servers and other applications will know what our content is, we they get to our page. One very important application that we usually care about is search engine. Search engines are going to look through the contents of our page and they are going to rank our page and set it up for searching based on what they have found. A great way to make sure that your document is going to work good in a search engine is to build it properly and to format it properly.
That's all for the day! In the next video we will take a look at the inline tags..........
Till then good bye and have a great day ahead!!!
Posts
0 comments:
Post a Comment