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

From Script | Spoken-Tutorial
Jump to: navigation, search
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