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

From Script | Spoken-Tutorial
Jump to: navigation, search
Time Narration
00:01 Hello and welcome to this Spoken Tutorial on Formatting Tags in HTML.
00:07 In this tutorial we will learn about:

Formatting text and Creating hyperlinks in HTML using some examples.

00:18 To practise this tutorial, you should know to use any WYSIWYG or Text Editor and Web Browser.
00:26 If not, then go through gedit Text Editor and Firefox tutorials on this website.
00:34 To record this tutorial, I’m using

Ubuntu Linux 16.04 Operating System

00:41 HTML5

gedit Text Editor and Firefox web browser

00:48 However you may use any other editor or browser of your choice.
00:54 The files used in this tutorial are available in the Code Files link on this tutorial page.
01:01 Please download and extract them.
01:05 HTML allows us to do basic formatting of the content.
01:10 Formatting tags are exactly like the ones that are there in any word processor application.
01:17 Some of the formatting tags are:

Headings

01:22 Paragraph
01:24 Bold, Italic, Underline
01:27 Large and Small
01:30 Insert and Delete
01:33 Superscript and Subscript
01:36 Line Break
01:38 Horizontal Ruler and

Anchor

01:42 We will learn them one by one.
01:45 In any document, we use headings for various purposes in various sizes.
01:51 HTML allows us to create headings with six different sizes.
01:56 Heading tag will start from h1 for large headings and end with h6 for smaller ones.
02:04 A line space will be added automatically before and after the headings.
02:10 Let us open our file MyFirstPage.html, which we created earlier.

The same is available in the Code Files link.

02:21 In our code, we have already used h1 heading tag.
02:26 Let me add a few more lines of code to this program.
02:30 Type the following lines with proper indentation, below the h1 heading tag.
02:37 Here I have used all the six heading tags one after another.
02:42 Press Ctrl + S keys to save this change.
02:47 Now let’s see the output on the browser.
02:50 Go to the folder where the file is saved.
02:54 Right-click and open with your preferred web browser.
02:59 Observe the differences in the size of the heading “Welcome to Farmer's Market”.
03:05 Using appropriate heading as per your need, you can create headings of different sizes.
03:12 Switch back to the editor.

And undo the changes by pressing Ctrl + Z keys .

03:20 Next we will see how to format the text to make it bold, italic and so on.
03:27 Add the following lines of code next to the paragraph in your file, as shown here.
03:34 This line of code will demonstrate the use of bold, italic and underline.
03:39 Here I have used the tag for bold.
03:43 So any text written in between these <b> tags will appear bold in the output.
03:50 Likewise, the text within the tag will be italic and tag will be underlined.
03:59 Please look at the way I have written them here.
04:02 I have used the underline tag inside the italic tag.

This way of writing code is called as Nested elements.

04:12 While using a tag inside another tag, always remember to close the tags in the reverse order.
04:19 Here I have opened the italic tag first and then opened the underline tag.
04:25 While closing, I have closed the underline tag first and then the italic tag.
04:31 Follow the same procedure while using nested elements in your future codes.
04:37 Save the file.
04:39 Let’s switch to the browser and refresh the page to see the output.
04:44 Observe the change in the content that is displayed.
04:49 Let’s come back to the editor.
04:52 To create a line break, we have to use the break tag.

Here we already have a break tag in our code.

05:00 So, let me delete this break tag and save the file.
05:05 Let’s switch to the browser and refresh the page.
05:10 Notice here, the line space between the first two lines is now reduced.
05:15 The existing line space is the one that is created by the heading tag.
05:20 Switch back to the editor and undo the changes.
05:25 Save the file.
05:27 Now come back to the browser and refresh the page.

Notice the line space.

05:34 Note that the break tag can be written as follows
05:40 It is a self-closing tag which doesn’t require an end tag.
05:45 Let’s come back to the editor now.
05:49 I will add a few more lines to this code.

Please do so in your file, too.

05:56 Notice here - I have used the strikethrough and superscript tags.
06:02 Let’s save the code.
06:04 Then switch to the browser and refresh the page.
06:08 Notice the change - the word Rs.20 per kg has been struck through.
06:14 And the word “Today’s offer” appears as a superscript.
06:20 Switch back to the editor once again.
06:22 The content written within the tag will be struck through.
06:27 And the content written within the tag will appear as superscript.
06:33 For subscript, we should use the tag.

Please try this option on your own.

06:41 In the next line, I will type the
tag.
06:45 This tag will create a horizontal line.
06:47 Save the code and switch to the browser.
06:51 Refresh the webpage.
06:53 Notice the horizontal line.
06:56 Come back to the editor.
06:59 Let me add some more lines of code here, after the hr tag.
07:06 Observe that I have used the small and big tags here, along with ins tag.
07:13 Save the code and switch to the browser.
07:17 Refresh the webpage.
07:20 Notice that the words “folic acid” appears smaller in size.
07:26 And the word “Vitamins” appear bigger in size, compared to the normal font size.
07:32 Let’s come back to our code file.
07:35 This effect is achieved by using the small and big tags.
07:41 The small tag make the content smaller and the big tag makes it larger.
07:49 Let’s go back to our webpage.

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

07:57 But recall that in our code, we have used insert tag.
08:02 The browser will print the underline and insert in the same style.
08:07 The insert tag is used to mention that the inserted content should be underlined.
08:14 Now let’s learn about anchor tag.
08:19 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.

08:30 This action can be created with the help of anchor tag
08:34 This tag is also called as hyperlink tag.
08:39 Let’s switch to the editor and type the following code after the second paragraph tag.
08:46 Then save the file.
08:49 Switch to the browser and refresh the page.
08:53 Here we can see the new text “Click Here” is displayed.
08:58 The text appears to be hyperlinked.

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

09:07 But when we click on it, nothing happens.
09:11 Let’s find out why that is so.
09:14 Anchor tag should always be declared along with its attribute - href.
09:21 href stands for hyperlink reference
09:24 The value of href holds the target link.
09:28 This is the syntax
09:31 The content within the Anchor tag is clickable.
09:35 By clicking on this text, we will be redirected to the targeted link.
09:40 The content can be a text or an image.
09:44 Let’s switch to the editor to modify the code.
09:48 In the next line after Click here, type the following code.
09:54 Now save the code.

Then switch to the browser and refresh the webpage.

10:01 We can see two links here.

Click here and Local File Link

10:07 In the first case “Click here”, I haven’t given any link and have just kept it as blank.
10:14 If the href value is empty, it will keep us on the same page.
10:20 In the next one, I have given the name of the HTML file which we have used for assignment.
10:27 Clicking on this link will take us to the mentioned page.
10:31 While redirecting to a local link, make sure that the specified HTML file is available in the same folder.
10:39 Or specify the filename along with the path

Else you will get “File or Page not found” error.

10:48 Target is another important attribute for the anchor tag.
10:53 It specifies where the target has to be redirected.
10:58 The values are:

_blank: Opens in a new tab

11:04 _parent: Opens in the parent frame
11:08 _self: Opens in the same frame
11:12 _top: Opens in the full body of the window.
11:17 Let us switch back to the editor to try out one of the attributes.
11:22 Let’s add this line of code here.
11:26 In this line of code, I have given an external website link and set the target to a blank page.
11:33 This means the specified website will open in a new tab.
11:38 The spaces are only for readability of the code.
11:43 Save the page and switch to the browser.
11:47 Refresh the page to update the change.
11:51 Click on the External Link.

The specified link opens in a new tab.

11:58 This is how we use formatting tags in HTML.
12:02 With this, we come to the end of this tutorial. Let us summarise.
12:08 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

12:28 We have also learnt about

Creating Internal page link', Local file link, External site link

Using anchor tag

12:37 As an assignment-

Open the file MyHomePage.html which you created earlier.

12:44 Format the content as shown here.
12:49 Also create an external link, which redirects to http://fossee.in'
12:57 The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

13:05 The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

13:15 Please post your timed queries in this forum.
13:20 Spoken Tutorial Project is funded by MHRD, Government of India.
13:26 This is Praveen from IIT Bombay signing off.

Thank you for joining

Contributors and Content Editors

PoojaMoolya