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

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 heading tags.
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 Welcome to Farmer's Market	In our code, we have already used heading tag.
Welcome to Farmer's Market Welcome to Farmer's Market Welcome to Farmer's Market Welcome to Farmer's Market Welcome to Farmer's Market	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 tags 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 Tomato: is an edible fruit	Next we will see how to format the text to make it bold, italic and so on. Please pause the tutorial here. And add the following lines of code next to the paragraph in your file, as shown here.
Point to the new formatted code. Tomato: is an edible fruit	This line of code will demonstrate the use of bold, italic and underline. Here I have used the tag for bold. So any text written in between these <b> tags will appear bold in the output.
Point to. is an edible fruit	Likewise, the text within the tag will be italic and tag will be underlined. Please look at the way I have written them here.
Point to. <i>is an edible <u>fruit	Here I have used the underline tag inside the italic tag. This way of writing code is called as Nested elements.
(text overlay with a highlight box while editing 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 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 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.
Switch to firefox and refresh the page.	Now come back to the browser and refresh the page. Notice the line space now.
Slide 8: Break tag	Note that the break tag can be written as follows or 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: Price: Rs.20/Kg Rs.15/Kg (Today's offer) <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 tag will be struck through.
Point to sup tag	And the content written within the tag will appear as superscript.
Overwrite sup in to sub	For subscript, we should use the tag. Please try this option on your own.
Type	Now, in the next line, I will type the 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: Tomatoes contain folic acid, and vitamins A, C, <del>D</del> and E.	Let me add some more lines of code here, after the 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: <a href=”target link”> Some Content </a>
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 <a href="MyHomePage.html"> Local File Link </a> </br/>	And 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 page.
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 in 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 <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 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