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

Title of the script: Phrase Tags in HTML

Author: Praveen S

Domain Reviewer: M.Deivamani

Novice Reviewer: Madhulika G

Keywords: HTML, Phrase tags, Comments, Multi Line Comment, Strong, Emphasized, marked, Abbreviation, Quote, Address, Cite, Pre, Code, HTML Entities, Spoken Tutorial, Video Tutorial.

Visual Cue	Narration
Slide 1: Title	Hello and welcome to the Spoken Tutorial on Phrase Tags in HTML
Slide 2: Learning Objectives	In this tutorial we will learn: How to add Comments in HTML and about Phrase Tags
Slide 3: Prerequisite	To practise this tutorial, you should know to use any WYSIWYG or Text Editor and web browser. If not, then go through gedit Text Editor and Firefox tutorials on this website.
Slide 4: System Requirements	To record this tutorial, I’m using Ubuntu Linux 16.04 OS HTML5 gedit Text Editor and Firefox web browser However you may use any other editor or browser of your choice.
Slide 5: Code Files	The files used in this tutorial are available in the Code Files link on this tutorial page. Please download and extract them.
Slide 5: Comments	It is always a good practice to write comments when we write any code. It helps us to understand the written code. It enables us to write documentation of a program inside the code itself. It helps us to debug the code easily. It also helps us to skip a snippet of code without executing it.
Slide 5: Comments Highlight Highlight with a red box	This is the syntax to write a comment in HTML. HTML comments are placed in between these tags. Any content that is between these tags will be treated as comment. And it will be completely ignored or skipped by the browser at the time of execution.
Go to gedit window	Let us switch to the editor window and write a few comments.
Open MySamplePage.html in Gedit	I have already created an HTML file named MySamplePage.html. And I have saved this file in the my-html folder on my machine. The same file is also available in the Code Files link on this tutorial page.
Show the output in Firefox	This is how the output looks like.
Go to gedit window	Go to the editor window. Let us make a few changes in this code.
Type:	Next to the body tag type the following. This is a single line comment.
Press Ctrl + S keys	Save the file.
Switch to Firefox >> refresh	Switch to the browser and refresh the page.
Highlight the comments written inside the code	Observe that there are no changes. This is because, the comment written inside the code did not get executed.
Go to gedit window	It is also possible to write multiline comments in our code. Let us now learn how to do that.
	Switch to the editor window
Type	In the code, before the bold tag, type the begin comment tag, Less than symbol exclamation hyphen hyphen Then, before the body closing tag type the close comment tag, hyphen hyphen greater than symbol
Highlight	Note that the multiline comment starts here and ends here.
Press Ctrl + S keys	Save the file.
Switch to Firefox >> refresh	Switch to the browser and refresh the page.
Point to the output	Look at the output carefully. You will notice that the last two lines have disappeared.
	Recall, this is because the codes written in between the comment tags are not executed.
Go to gedit	Let us come back to the editor window and undo the multiline comment.
Press Ctrl + S keys	Save the file.
	Next we will look at some phrase tags that are used in HTML.
Slide 6: Phrase Tags	In this tutorial we will learn to use the following phrase tags- Strong Emphasized Marked Abbreviation Quote Cite Pre Code All these tags have a start and an end tag. We will look at all these tags one by one.
Go to gedit	Switch to the editor window.
Show MyPage.html in gedit	Create a new HTML file named MyPage.html, with the code as shown here. The same file is also available in the Code Files link on this tutorial page.
Point to the line “Welcome to my…”	Come to the 2nd line inside the body section. Here, I have used the abbreviation tag for the word HTML. Inside the abbr start tag, I have mentioned HTML abbreviation in the title attribute.
Point to “This is my first paragraph”	Next in the paragraph section, I have written the text first paragraph within the mark tag.
Point to strong tag	A few lines below, I have used Strong Text inside the strong tag.
Point to em tag	And I have used Emphasised Text inside the em tag.
Switch to my-html folder	Switch to the folder where we have saved the file.
Open with Firefox	Switch to the browser and refresh the page. Open the file in a web browser. Observe the output.
Point to the word HTML in the 1st line.	Here in the 1st line we can see that the word HTML is underlined. Hover the mouse on it. We can see a tooltip with the abbreviation of HTML.
Point to the word First Paragraph	Next, the words first paragraph is highlighted.
Point to Strong and Emphasised text.	Also notice that the words Strong Text is in bold and the words Emphasised text is in italic. We have used strong tag and em tag in the code. So the output shows the strong tag content in bold and the em tag content in italic.
Slide 7: Strong vs Bold, emphasize vs italic	The output of strong and bold and emphasize and italic tags are identical. <Bold and Italic tags are used to format the presentation. <Whereas Strong and emphasize tags gives more importance to the content. <These will also be helpful in Search Engine Optimization.
Go to gedit	Switch to the editor window.
Point to 1st Pre tag section	We can quote and cite the content with the help of q and cite tags respectively. Here I have quoted a sentence and cited a website link for this section.
Switch to Firefox >> refresh	Switch to the browser.
Point to “is the standard markup” and HTML 5.1 2nd Edition	Note that the quoted sentence is displayed inside the quotes. And the cited content appears in italic.
Highlight the code	To quote a sentence from a different source we have to use blockquote tag.
Point to the line about HTML TEXT on screen “To avoid the scroll, we should provide a break”	Note that we have to scroll through the width of the page, to view the entire sentence. To avoid this scroll, I need to provide a break in this sentence.
	Any guesses on which tag to use here? Did you think of Break tag?
TEXT on screen “Use pre tag”	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.
Go to gedit	Switch to the editor window.
Point to the pre tag in the code	Here we can see that I have used the pre tag for this section.
Point to the word creating Press Enter	Let me break the sentence after the word creating. Press Enter key on the keyboard to bring the remaining words to the next line.
Press Ctrl + S keys	Save the file.
Switch to Firefox >> refresh	Switch to the browser and refresh the page.
	Observe the change in the output now.
Highlight the C program on the output	pre tag helps us to display a program code on a web page. It can be any programming language code. For this, we have to use the code tag. It helps in defining a snippet of code. Else the browser will consider this as normal text.
Go to gedit	Switch to the editor window.
Highlight the C program on gedit Highlight pre tag	Here inside our HTML code, I have written a simple C program inside the code tag. I have written this code block inside the pre tag to maintain the indentations.
Highlight & lt ; and & gt ;	If you know C programming, you will note that there is a bug in the 1st line. ampersand l t semi-colon and ampersand g t semi-colon instead of less than and greater than symbol. These are called HTML Entities.
Slide 8: HTML Entities	In HTML some characters are reserved. The browser will consider those characters as a part of HTML syntax We can use these reserved characters in the content in the form of HTML Entity. The name or number of the entities have to be written in between ampersand and semicolon symbols.
Slide 9: Common HTML Entities Blank space ( ) Less than < (<) Greater than > (>) ampersand & (&)	Here are some common HTML entities which we use regularly.
	This brings us to the end of this tutorial. Let us summarize.
Slide 10: Summary	In this tutorial, we have learnt how to add Comments in HTML. We also learnt about the following phrase tags used in HTML. Comments Strong text Emphasized text Marked text
Slide 10: Summary	Abbreviation Quote Cite Pre tag Code tag Entities
Slide 11: Assignment #include<stdio.h> int main() { printf("My C program inside HTML \n"); return 0; }	As an assignment- Open the file MyHomePage.html which you created earlier. Write a C program within this file as shown below.
Slide 12: About Spoken Tutorial project	The video at the following link summarizes the Spoken Tutorial project. Please download and watch it.
Slide 13: About Workshop	The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
Slide 14: Forum questions	Please post your timed queries in this forum.
Slide 15: Acknowledgement	Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India. More information on this mission is available at this link.
Slide 16: Thanks	This is Praveen from IIT Bombay signing off. Thank you for joining.

Contributors and Content Editors

Nancyvarkey, Pravin1389