Hi Friends, Welcome to Technosaavy !
In the last post we discussed the block tags. So, let’s go for inline tags now.
As we have already seen how a few block tags work, let's try out another type of tags and this is called an inline tag. An inline tag is in line with the text and it doesn't creates a separate block of text, it just modifies a small portion. So let me just take a word in the middle of the sentence and I’ll just add a strong tag and off-course I’m going to add a close strong tag at the end and as we have already been familiar with this tag, it will make the text bold.
<!DOCTYPE html>
<html>
<head>
<title>try out text</title>
</head>
<body>
<h1>this is a heading</h1>
<h2>this is a sub heading</h2>
<h3>this is the next heading</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur</strong> 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.
</p>
<p>
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.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor.
</p>
</body>
</html>
So, let's save our changes and go over and refresh the browser.
Now you can see that the word is indeed bolded and we haven't made a different block of text, we simply modified that piece of text inside the original paragraph block. Off-course another example of the inline tag that we saw earlier is the em tag. So, let's use that down in the second paragraph and again as you saw before I’ll add an em tag at the beginning of the word and the close em tag at the end of it.
<!DOCTYPE html>
<html>
<head>
<title>try out text</title>
</head>
<body>
<h1>this is a heading</h1>
<h2>this is a sub heading</h2>
<h3>this is the next heading</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur</strong> 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.
</p>
<p>
Donec sed neque quis ligula <em>ornare</em> iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor.
</p>
</body>
</html>
Now we'll save our changes. And I expect when I refresh my page I’ll see some italicized text down here at the bottom.
Now as we are talking about the tags in context, let's try out a couple of other new tags. I'll go back to my chapter 2 working files folder and let's open the try-out-special-formats.html file in the browser to have a look at it and off-course in the notepad as we need to edit it.
<!DOCTYPE html>
<html>
<head>
<title>try out special formats</title>
</head>
<body>
<h1>indenting</h1>
<p>
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.
</p>
<p>
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. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
<h1>addressess</h1>
<p>Contact us here:</p>
<p>
123 Anystreet
Anytown, CA 99999
</p>
<h1>something written by robots</h1>
<p>
{alert(msg);return false;}}
else{document.captureEvt(Event.MOUSEUP);document
if (q.pagefile==2||q.pagefile==5)
(document.getElementID&&*!document.x)){
</p>
</body>
</html>
We can see that this file already contains the basic required html tags and some heading and paragraph tags that we are going to work with and all these are creating a formatting for us.
One thing we can do instead of using the heading or paragraph tags is using some of the specialty formatting tags. Let's try one out, there is one called blockquote; now I’ll replace the p tag of the middle paragraph with the blockquote and off-course the close tag with the closing blockquote.
<!DOCTYPE html>
<html>
<head>
<title>try out special formats</title>
</head>
<body>
<h1>indenting</h1>
<p>
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.
</p>
<blockquote>
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. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</blockquote>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
<h1>addressess</h1>
<p>Contact us here:</p>
<p>
123 Anystreet
Anytown, CA 99999
</p>
<h1>something written by robots</h1>
<p>
{alert(msg);return false;}}
else{document.captureEvt(Event.MOUSEUP);document
if (q.pagefile==2||q.pagefile==5)
(document.getElementID&&*!document.x)){
</p>
</body>
</html>
Let's save our changes and we'll go up and refresh our page and you can see that the center paragraph is indented slightly from the other two, if I resize the page, you can see that the indenting is still there.
So this is a typical blockquote text that's being called out different from the paragraphs around it. Interestingly enough you can stack up block texts so, let's go back to our document and I’m going to add the second blockquote tag by copying the first tag and pasting it after itself and off-course I need to make sure I have two close tags at the end as well so, I’ll copy that one and paste it at the end.
<!DOCTYPE html>
<html>
<head>
<title>try out special formats</title>
</head>
<body>
<h1>indenting</h1>
<p>
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.
</p>
<blockquote><blockquote>
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. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</blockquote></blockquote>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
<h1>addressess</h1>
<p>Contact us here:</p>
<p>
123 Anystreet
Anytown, CA 99999
</p>
<h1>something written by robots</h1>
<p>
{alert(msg);return false;}}
else{document.captureEvt(Event.MOUSEUP);document
if (q.pagefile==2||q.pagefile==5)
(document.getElementID&&*!document.x)){
</p>
</body>
</html>
Let's save our changes and we'll go back and take a look at our page.
Now you can see that it’s simply indented a little bit further. Now blockquote is very old tag and you may not find people using it as often as they did before but, we have a couple of other tags that can be really handy and they are contextual tags just like the emphasis and strong tags we saw before, and that's handling of addresses and code. So, let's go try these two now; for addresses we have a very specific tag. You can see that right now, I’m just using the paragraph tag so let's change that to address tag. I’ll need a close address tag at the end.
<!DOCTYPE html>
<html>
<head>
<title>try out special formats</title>
</head>
<body>
<h1>indenting</h1>
<p>
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.
</p>
<blockquote><blockquote>
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. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</blockquote></blockquote>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
<h1>addressess</h1>
<p>Contact us here:</p>
<address>
123 Anystreet
Anytown, CA 99999
</address>
<h1>something written by robots</h1>
<p>
{alert(msg);return false;}}
else{document.captureEvt(Event.MOUSEUP);document
if (q.pagefile==2||q.pagefile==5)
(document.getElementID&&*!document.x)){
</p>
</body>
</html>
Let's save our changes and see how that affects the text. Once I refresh the page you can easily see that it's just italicized but very importantly that very particular piece of content has been called out as an address.
So, any programs or applications that are scanning my page will actually know were the address is on the page. Now you can see that the context is much more important than how it looks on the page right now, we will do much to this text in our css chapter.
Now we have we have got a heading for "something written by robots". Very often in the page content you may need to call out a block of text that need special formatting to make it much easier to read, specifically if you got something like code. I'm currently displaying this code using the same font and style that we do for the other text styles and a normal text uses a variable width font meaning that the large letters are wider than the smaller ones. But, the code is often easier to read if you format it using a monospace font so, I’ll just go down to the code portion down here, I’ll change the p tag to a code tag and off course the close code tag.
<!DOCTYPE html>
<html>
<head>
<title>try out special formats</title>
</head>
<body>
<h1>indenting</h1>
<p>
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.
</p>
<blockquote><blockquote>
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. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</blockquote>
</blockquote>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
<h1>addressess</h1>
<p>Contact us here:</p>
<address>
123 Anystreet
Anytown, CA 99999
</address>
<h1>something written by robots</h1>
<code>
{alert(msg);return false;}}
else{document.captureEvt(Event.MOUSEUP);document
if (q.pagefile==2||q.pagefile==5)
(document.getElementID&&*!document.x)){
</code>
</body>
</html>
Let's save our changes and refresh the page.
Now you can see, that block of text is formatted using a monospace font and that makes it much easier to read this code’s individual element and syntax.
That’s all for the day in the next post we’ll discuss the line break and the special characters.
Have a Great Day Ahead !
Posts
