HTML/C2/Formatting-Tags-in-HTML/English

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

Title of the script:Formatting Tags

Author: Praveen S

Domain Reviewer: M. Deivamani

Novice Reviewer: Madhulika G

Keywords: HTML, Formatting Tags, Text Formatting in HTML, Paragraph Tag, Heading Tag, Web Designing, Web Site, Spoken Tutorial, Video Tutorial


Visual Cue Narration
Slide 1: Title Hello and welcome to this Spoken Tutorial on Formatting Tags in HTML.
Slide 2: Learning Objectives In this tutorial we will learn about:
  • Formatting text and
  • Creating hyperlinks

in HTML using some examples.

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 6: Formatting Tags HTML allows us to do basic formatting of the content.

Formatting tags are exactly like the ones that are there in any word processor application.

Slide 6: Formatting Tags Some of the formatting tags are:
  • Headings (h1, h2, h3, h4, h5, h6)
  • Paragraph
  • Bold, Italic, Underline
  • Large and Small
Slide 6: Formatting Tags
  • Insert and Delete
  • Superscript and Subscript
  • Line Break
  • Horizontal Ruler and
  • Anchor

We will learn them one by one.

Slide 7: HTML Headings In any document, we use headings for various purposes in various sizes.

HTML allows us to create headings with six different sizes.

Heading tag will start from h1 for large headings and end with h6 for smaller ones.

A line space will be added automatically before and after the headings.

Open MyFirstPage.html in gedit Let us open our file MyFirstPage.html, which we created earlier.

The same is available in the Code Files link.

Point to

<h1> Welcome to Farmer's Market </h1>

In our code, we have already used <h1> heading tag.
<h2> Welcome to Farmer's Market </h2>

<h3> Welcome to Farmer's Market </h3>

<h4> Welcome to Farmer's Market </h4>

<h5> Welcome to Farmer's Market </h5>

<h6> Welcome to Farmer's Market </h6>

Let me add a few more lines of code to this program.

Type the following lines with proper indentation, below the h1 heading tag.

Point to each line Here I have used all the six heading tags one after another.
Press Ctrl + S Press Ctrl + S keys to save this change.
Now let’s see the output on the browser.
Open MyFirstPage.html in Firefox Go to the folder where the file is saved.

Right-click and open with your preferred web browser.

Point to the different lines one-by-one Observe the differences in the size of the heading “Welcome to Farmer's Market”.
Using appropriate heading as per your need, you can create headings of different sizes.
Switch to gedit

Press Ctrl + Z

Switch back to the editor.

And undo the changes by pressing Ctrl + Z keys .

Add

<b>Tomato:</b> <i>is an edible <u>fruit</u></i>

Next we will see how to format the text to make it bold, italic and so on.


And add the following lines of code next to the paragraph in your file, as shown here.

Point to the new formatted code.

<b>Tomato:</b> <i>is an edible <u>fruit</u></i>

This line of code will demonstrate the use of bold, italic and underline.

Here I have used the tag <b> for bold.

So any text written in between these <b> tags will appear bold in the output.

Point to

<i>is an edible <u>fruit</u></i>

Likewise, the text within the <i> tag will be italic and <u> tag will be underlined.

Please look at the way I have written them here.

Point to.

<i>is an edible <u>fruit</u></i>

I have used the underline tag inside the italic tag.

This way of writing code is called as Nested elements.

While using a tag inside another tag,

always remember to close the tags in the reverse order.

Highlight again Here I have opened the italic tag first and then opened the underline tag.
Highlight again While closing, I have closed the underline tag first and then the italic tag.
Follow the same procedure while using nested elements in your future codes.
Press Ctrl + S Save the file.
Switch to firefox and refresh the page. Let’s switch to the browser and refresh the page to see the output.

Observe the change in the content that is displayed.

Switch to the editor Let’s come back to the editor.
Point to the br tag in the code To create a line break, we have to use the break tag.

Here we already have a break tag in our code.

Delete br tag >> Press Ctrl+S So, let me delete this break tag and save the file.
Switch to firefox and refresh the page. Let’s switch to the browser and refresh the page.
Point to the line space between the first two lines. Notice here, the line space between the first two lines is now reduced.

The existing line space is the one that is created by the heading tag.

Switch to the editor >> Ctrl+Z Switch back to the editor and undo the changes.

Save the file.

Switch to firefox and refresh the page. Now come back to the browser and refresh the page.

Notice the line space.

Slide 8: Break tag Note that the break tag
  • can be written as follows <br/> or <br>
  • It is a self-closing tag which doesn’t require an end tag.
Switch to the editor Let’s come back to the editor now.
Add:

<br/>

<i> Price: <del>Rs.20/Kg</del> Rs.15/Kg

<sup>(Today's offer)</sup> <i>

I will add a few more lines to this code.

Please do so in your file, too.

Notice here - I have used the strikethrough and superscript tags.

Press Ctrl + S Let’s save the code.
Switch to the browser Then switch to the browser and refresh the page.
Point to Rs.20/kg Notice the change - the word Rs.20 per kg has been struck through.
Point to Today’s offer And the word “Today’s offer” appears as a superscript.
Switch to the editor. Switch back to the editor once again.
Point to del tag The content written within the <del> tag will be struck through.
Point to sup tag And the content written within the <sup> tag will appear as superscript.
Overwrite sup in to sub For subscript, we should use the <sub> tag.

Please try this option on your own.

Type <hr> In the next line, I will type the <hr> tag.

This tag will create a horizontal line.

Press Ctrl + S >> Switch to browser. Save the code and switch to the browser.
Refresh Refresh the webpage.
Point to the line Notice the horizontal line.
Switch to editor Come back to the editor.
Type the code:

<p>Tomatoes contain <small>folic acid,</small>

and <big>vitamins</big> A, C,

<del>D</del><ins> and E.</ins></p>

Let me add some more lines of code here, after the '''<hr> tag'''.

Observe that I have used the small and big tags here, along with ins tag.

Press Ctrl + S >> Switch to browser. Save the code and switch to the browser.
Refresh webpage Refresh the webpage.
Point to the line in the webpage Notice that the words “folic acid” appears smaller in size.

And the word “Vitamins” appear bigger in size, compared to the normal font size.

Come back to editor and show the code here

Highlight small and big tags.

Let’s come back to our code file.

This effect is achieved by using the small and big tags.

The small tag make the content smaller and the big tag makes it larger.

Point to deleted and inserted text. Let’s go back to our webpage.

Also notice that, the words “and E” are underlined.

Show the code here But recall that in our code, we have used insert tag.

The browser will print the underline and insert in the same style.

The insert tag is used to mention that the inserted content should be underlined.

Slide 9: Anchor Tag Now let’s learn about anchor tag.

In our webpage we could have many links that navigate us to either-

  • a section in the same page
  • or a different page
  • or an external website.
Slide 9: Anchor Tag
  • This action can be created with the help of <a> tag
  • This tag is also called as hyperlink tag.
Switch to editor

<a href=""> Click Here </a>

Let’s switch to the editor and type the following code after the second paragraph tag.
Press Ctrl + S Then save the file.
Switch to browser >> Refresh Switch to the browser and refresh the page.
Point to “Click here” Here we can see the new text “Click Here” is displayed.
Hover the mouse The text appears to be hyperlinked.

And when we hover the mouse, the cursor changes into a hand icon.

Click on Click Here But when we click on it, nothing happens.

Let’s find out why that is so.

Slide 10: Anchor Tag
  • Anchor tag should always be declared along with its attribute - href.
  • href stands for hyperlink reference
  • The value of href holds the target link.
Slide 10: Anchor Tag This is the syntax
Slide 10: Anchor Tag
  • The content within the Anchor tag is clickable.
  • By clicking on this text, we will be redirected to the targeted link.
  • The content can be a text or an image.
Switch to editor Let’s switch to the editor to modify the code.
Type:

<br/>

<a href="MyHomePage.html"> Local File Link </a>

<br/>

In the next line after Click here, type the following code.
Press Ctrl + S Now save the code.
Switch to browser >> Refresh Then switch to the browser and refresh the webpage.
Point to the Links We can see two links here.

Click here and Local File Link

Click on Click here In the first case “Click here”, I haven’t given any link and have just kept it as blank.

If the href value is empty, it will keep us on the same page.

Click on Local File Link

Show both the code and output

In the next one, I have given the name of the HTML file which we have used for assignment.

Clicking on this link will take us to the mentioned page.

Slide 11: Redirecting Link While redirecting to a local link,
  • make sure that the specified HTML file is available in the same folder.
  • Or specify the filename along with the path
  • Else you will get “File or Page not found” error.
Slide 12a: Anchor Tag - Target
  • Target is another important attribute for the anchor tag.
  • It specifies where the target has to be redirected.
Slide 12b: Anchor Tag - Target The values are:
  • _blank: Opens in a new tab
  • _parent: Opens in the parent frame
  • _self: Opens in the same frame
  • _top: Opens in the full body of the window.
Switch to editor Let us switch back to the editor to try out one of the attributes.
Point to

<br/>

<a href="http://spoken-tutorial.org" ''target=”_blank”''>

External Link </a>

Highlight space before target

Let’s add this line of code here.

In this line of code, I have given an external website link and set the target to a blank page.

This means the specified website will open in a new tab.

The spaces are only for readability of the code.

Press Ctrl + S Save the page and switch to the browser.
Switch to browser >> Refresh Refresh the page to update the change.

Click on the External Link.

The specified link opens in a new tab.

This is how we use formatting tags in HTML.
With this, we come to the end of this tutorial.

Let us summarise.

Slide 13: Summary In this tutorial, we have learnt about
  • Formatting tags in HTML like:
    • Headings, Paragraph
    • Bold, Italic, Underline
    • Large, Small, Insert, Delete
    • Break, horizontal ruler
    • Superscript and Subscript
Slide 13: Summary We have also learnt about
  • Creating
    • Internal page link
    • Local file link
    • External site link
  • Using anchor tag
Slide 14: Assignment

Apple (Organic)

M.R.P: Rs.100/Kg

Offer Price: Rs.90/Kg

Cash on delivery available

As an assignment-
  • Open the file MyHomePage.html which you created earlier.
  • Format the content as shown here.
  • Also create an external link, which redirects to http://fossee.in'
Slide 15:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide 16: About Workshop The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide 17: Forum questions Please post your timed queries in this forum.
Slide 18: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

Slide 19: Thanks This is Praveen from IIT Bombay signing off.

Thank you for joining

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C2/Formatting-Tags-in-HTML/English&oldid=43155"