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

From Script | Spoken-Tutorial
Jump to: navigation, search

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