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 <quote> Cite Pre ''' * '''Code <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 '''<''' and '''&gt''' || If you know '''C programming''', you will note that there is a bug in the 1st line. I have written '''<''' and '''>''' 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