HTML/C2/Phrase-Tags-in-HTML/English-timed

Time	Narration
00:01	Hello and welcome to the Spoken Tutorial on Phrase Tags in HTML
00:07	In this tutorial we will learn: How to add Comments in HTML and about Phrase Tags
00:16	To practise this tutorial, you should know to use any WYSIWYG or Text Editor and web browser.
00:24	If not, then go through gedit Text Editor and Firefox tutorials on this website.
00:31	To record this tutorial, I’m using Ubuntu Linux 16.04 OS HTML5
00:39	gedit Text Editor and Firefox web browser
00:44	However you may use any other editor or browser of your choice.
00:50	The files used in this tutorial are available in the Code Files link on this tutorial page.
00:57	Please download and extract them.
01:00	It is always a good practice to write comments when we write any code.
01:05	It helps us to understand the written code.
01:08	It enables us to write documentation of a program inside the code itself.
01:14	It helps us to debug the code easily.
01:18	It also helps us to skip a snippet of code without executing it.
01:24	This is the syntax to write a comment in HTML.
01:29	HTML comments are placed in between these tags.
01:34	Any content that is between these tags will be treated as comment.
01:39	And it will be completely ignored or skipped by the browser at the time of execution.
01:45	Let us switch to the editor window and write a few comments.
01:50	I have already created an HTML file named MySamplePage.html.
01:57	And I have saved this file in the my-html folder on my machine.
02:02	The same file is also available in the Code Files link on this tutorial page.
02:07	This is how the output looks like.
02:11	Go to the editor window. Let us make a few changes in this code.
02:17	Next to the body tag type the following.
02:21	This is a single line comment.
02:24	Save the file.
02:26	Switch to the browser and refresh the page.
02:30	Observe that there are no changes.
02:33	This is because, the comment written inside the code did not get executed.
02:38	It is also possible to write multiline comments in our code.
02:42	Let us now learn how to do that.
02:46	Switch to the editor window
02:49	In the code, before the bold tag, type the begin comment tag,
02:55	Less than symbol exclamation hyphen hyphen
02:59	Then, before the body closing tag type the close comment tag, hyphen hyphen greater than symbol
03:07	Note that the multiline comment starts here and ends here.
03:13	Save the file.
03:15	Switch to the browser and refresh the page.
03:19	Look at the output carefully. You will notice that the last two lines have disappeared.
03:25	Recall, this is because the codes written in between the comment tags are not executed.
03:32	Let us come back to the editor window and undo the multiline comment.
03:36	Save the file.
03:39	Next we will look at some phrase tags that are used in HTML.
03:44	In this tutorial we will learn to use the following phrase tags-
03:48	Strong, Emphasized, Marked, Abbreviation,
03:54	Quote, Cite , Pre and Code
04:00	All these tags have a start and an end tag.
04:04	We will look at all these tags one by one.
04:07	Switch to the editor window.
04:09	Create a new HTML file named MyPage.html, with the code as shown here.
04:16	The same file is also available in the Code Files link on this tutorial page.
04:22	Come to the 2nd line inside the body section.
04:26	Here, I have used the abbreviation tag for the word HTML.
04:31	Inside the abbr start tag, I have mentioned HTML abbreviation in the title attribute.
04:39	Next in the paragraph section, I have written the text first paragraph within the mark tag.
04:46	A few lines below, I have used Strong Text inside the strong tag.
04:51	And I have used Emphasised Text inside the em tag.
04:56	Switch to the folder where we have saved the file.
05:00	Right click on mypage.html Open the file in a web browser.
05:06	Observe the output.
05:09	Here in the 1st line we can see that the word HTML is underlined. Hover the mouse on it.
05:16	We can see a tooltip with the abbreviation of HTML.
05:21	Next, the words first paragraph is highlighted.
05:26	Also notice that the words Strong Text is in bold and the words Emphasised text is in italic.
05:35	We have used strong tag and em tag in the code.
05:40	So the output shows the strong tag content in bold and the em tag content in italic.
05:48	The output of strong and bold and emphasize and italic tags are identical.
05:55	Bold and Italic tags are used to format the presentation.
06:00	Whereas Strong and emphasize tags gives more importance to the content.
06:06	These will also be helpful in Search Engine Optimization.
06:11	Switch to the editor window.
06:14	We can quote and cite the content with the help of q and cite tags respectively.
06:21	Here I have quoted a sentence and cited a website link for this section.
06:27	Switch to the browser.
06:29	Note that the quoted sentence is displayed inside the quotes. And the cited content appears in italic.
06:37	To quote a sentence from a different source we have to use blockquote tag.
06:42	Note that we have to scroll through the width of the page, to view the entire sentence.
06:48	To avoid this scroll, I need to provide a break in this sentence.
06:53	Any guesses on which tag to use here? Did you think of Break tag?
06:58	No, We have to use pre tag. This will maintain the space, indentation and line breaks like the way it is written in the code.
07:08	Switch to the editor window.
07:11	Here we can see that I have used the pre tag for this section.
07:16	Let me break the sentence after the word creating.
07:20	Press Enter key on the keyboard to bring the remaining words to the next line.
07:25	Save the file.
07:27	Switch to the browser and refresh the page.
07:31	Observe the change in the output now.
07:35	pre tag helps us to display a program code on a web page.
07:40	It can be any programming language code.
07:43	For this, we have to use the code tag.
07:46	It helps in defining a snippet of code.
07:50	Else the browser will consider this as normal text.
07:54	Switch to the editor window.
07:57	Here inside our HTML code, I have written a simple C program inside the code tag.
08:03	I have written this code block inside the pre tag to maintain the indentations.
08:08	If you know C programming, you will note that there is a bug in the 1st line.
08:14	ampersand l t semi-colon and ampersand g t semi-colon instead of less than and greater than symbol. These are called HTML Entities.
08:26	In HTML some characters are reserved.
08:30	The browser will consider those characters as a part of HTML syntax
08:36	We can use these reserved characters in the content in the form of HTML Entity.
08:42	The name or number of the entities have to be written in between ampersand and semicolon symbols.
08:50	Here are some common HTML entities which we use regularly.
08:55	This brings us to the end of this tutorial. Let us summarize.
09:00	In this tutorial, we have learnt how to add Comments in HTML.
09:05	We also learnt about the following phrase tags used in HTML.
09:10	Comments, Strong text , Emphasized text , Marked text
09:16	Abbreviation, Quote, Cite , Pre tag, Code tag, Entities
09:24	As an assignment- Open the file MyHomePage.html which you created earlier.
09:30	Write a C program within this file as shown below.
09:36	The video at the following link summarizes the Spoken Tutorial project. Please download and watch it.
09:44	The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
09:53	Please post your timed queries in this forum.
09:57	Spoken Tutorial Project is funded by MHRD, Government of India.
10:02	This is Praveen from IIT Bombay signing off. Thank you for joining.

Contributors and Content Editors

PoojaMoolya