 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 8.
In our previous lesson, we studied text formatting elements. In that lesson, we have displayed shades of gray using equal rgb values.
Today, we will study three things. One, we will see how to write comments in HTML, second how to display text in quotation marks in web pages, and third how to display abbreviations in web pages.
HTML comment, Adding comments to HTML
HTML comments provide information about code written in an HTML script. We get clarity in script due to such comments and it goes easier to understand the code.In HTML there is comment tag used to display comments. This tag is written as follows:
Opening tag is written as <!-- and closing tag is written as -->. Note that there is exclamation mark in opening tag, where as in the closing tag it is not used.
Whatever is written after <!-- is a comment and it is not displayed in the web page.
Let us write a comment.
<!-- This statement shows how to display text color -->
Let us write comments in our script. Open a new Notepad file and copy all code from Lesson-06 in this file.
Just above heading tag write -
<!-- This statement shows how to display text color -->
and just above first <p> write
<!-- This statement shows how to display background color -->
In Lesson-06 we have written code to display shades of gray. Delete all those lines. Keep </body> and <html>. Therefore, our code should look as follows.
 |
| Figure 8-1. HTML comment tag |
Click on the above figure for PDF file of source code. Save this file as "Lesson-08" and again save this as "Lesson-08.html". Double click on HTML document and see the output.
You will see that the output is same as output of Lesson-06. We have simply inserted comments in this script. They do not change anything in the output.
HTML quotation marks for text - HTML q tag
Now let us see how to give quotation marks. Let us write sentenceHe said, "Let us go to picnic today."
in our web page.
After second </p> give a statement
<p>
He said, <q>Let us go to picnic today</q>
</p>
Tag <q> is used to display quotation marks.
 |
| Lesson 8-2 Displaying text in quotation marks - <q> |
Again save our script as "Lesson-08". Save it again as "Lesson-08.html". Go to windows explorer and double click on HTML document. We can see quotations in output.
 |
| Figure 8-3. Text in quotation marks - <q> tag |
HTML abbreviations - HTML abbr tag
Now we will see how to display abbreviations in web pages. In HTML abbr tag is used to write abbreviations. It is written as shown below:
<abbr title= "Hypertext markup language">HTML</abbr> scripts display web pages.
In this code full form is Hypertext markup language. This is written in the opening tag and is written in quotation marks. After opening tag, we have written "HTML". This is displayed in the web page and after this tag is closed. Therefore, in the web page abbreviation "HTML is displayed and then the rest of sentence after the closing tag. That means following sentence is displayed in the web page.
HTML scripts display web pages.
Write this in our script after last paragraph.
<br />
<p>
<abbr title= "Hypertext markup language">HTML</abbr> files display web pages.
</p>
Our code will be as shown in the following figure.
 |
| Figure 8-4. HTML abbr tag |
Click on figure 8-4 for PDF file of source code. Again save this file as "Lesson-08". Save the same file as "Lesson-08.html". Double click on the HTML document and see the output.
 |
| Figure 8-5. HTML abbreviation |
Our abbreviation is displayed. Note that a dotted line is displayed under abbreviation. Bring mouse on it, it's full form will be displayed.
Important Points:
1. Symbol used for writing a comment in HTML is "!--". Anything that we write after "!--" in that line is comment.2. Comments are very useful in providing information about code written in HTML.
3. A text can be displayed in quotation marks in a web page. <q> tag is used for this.
4. HTML q tag is used to display abbreviations in web pages. In web pages are always underlined with dotted lines. On bringing cursor on an abbreviation, its full form is displayed.
Lesson-07 Lesson-09
