HTML/C2/Formatting-Tags-in-HTML/English-timed
From Script | Spoken-Tutorial
| 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 |
| 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 |
