HTML/C2/Elements-Tags-Attributes-in-HTML/English-timed

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

Elements, Tags, Attributes in HTML using some examples.

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

Ubuntu Linux 16.04 Operating System

00:43 HTML 5
00:45 gedit Text Editor and Firefox web browser
00:50 However you may, use any other editor or browser of your choice.
00:56 The files used in this tutorial are available in the Code Files link on this tutorial page.
01:03 Please download and extract them.
01:06 HTML document contains a set of elements.
01:10 Each element consists of some content between tags.
01:15 Some elements don't require any content.
01:18 These are called as Empty Elements.

We can also have Nested Elements.

01:26 Let us open our file MyFirstPage.html, which we created earlier in gedit Text Editor.
01:34 The same is available in the Code Files link.
01:38 We will now learn how elements are implemented.
01:42 In this code, each line is an element.

Have a look at the title.

01:48 You can see that this element contains start and end tag along with the content.
01:55 See the first line DOCTYPE html
01:59 Notice that this element doesn't have an end tag or any content.

This is called an empty element.

02:08 The whole program is an example of nested elements.
02:13 html tag is an element with a start and an end tag.

Inside this, we have other elements.

02:20 Next we will learn about tags.
02:24 The contents to be structured on the web are defined by tags
02:29 Tags are written in between angular brackets
02:33 Most of the tags will have a start and an end
02:38 Syntax of a tag is: tag name within angular brackets followed by the content and ending with forward slash tag name within angular brackets
02:51 Each end tag contains a “/” (forward slash) before the tag name.
02:56 There are some tags which don’t require an end tag
03:00 HTML tags are not case sensitive
03:04 However, it is advisable to use lower-case
03:09 Switch back to the editor window.
03:12 Notice here - each line of code contains a tag.
03:17 We have used various tags in this program.
03:21 Also notice that all the tags are written in lower-case.
03:27 Here in this line, we have used h1 – heading tag.
03:32 The name of the tag is written between the left and right angular brackets.
03:38 And here, the end tag is the same as the starting tag.

But it has a forward slash before the tag name.

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

Next to the welcome message, type the following code.

03:58 Press Ctrl and S to save this change.
04:03 I have written br – which is the break tag, without writing the end tag.
04:09 This tag provides a line break and it doesn't require an end tag.
04:15 Let us see the output on the browser.
04:18 Switch to the folder where the file is saved.
04:22 Right-click and open with your preferred web browser.
04:27 Observe the change in the content that is displayed.
04:31 Let’s switch back to the editor window.
04:35 In the break tag, I will put a forward slash after the tag name.

This is called as Self-closing tag.

04:43 Save the file.
04:45 Switch back to the web browser and refresh the page.
04:50 There is no change in the output.
04:53 Now we will learn about tag attributes.
04:57 An attribute is additional information pertaining to an element.
05:02 It is written inside the starting tag.
05:06 Each attribute is declared by name – value pair separated by equal to symbol.
05:13 The syntax is: open angular bracket tag name space attribute name equal to attribute value close angular bracket followed by the content and ending with forward slash tag name within angular brackets
05:33 Values containing spaces have to be entered within a single or double quotes.

The syntax is as shown here

05:45 Multiple attributes can be specified with the help of the semicolon separator.

The syntax is as shown here.

05:56 Here are some common attributes.
05:59 title: to display the tooltip
href: link specification
06:06 id: is the unique identifier of an element
06:11 class: to classify the elements in a similar manner, mostly for better presentation
06:18 style: to define a specific style for an element
06:23 Let us switch back to our editor to try some of these.
06:28 We will look at some basic attributes and how they work.
06:32 First we will add a sky-blue background to our webpage.
06:37 To do that, let’s set the background color using style attribute to the body tag.
06:44 So inside the body tag, type, style equal to within double quotes background hyphen color colon skyblue
06:56 The color value can also be declared in RGB or HTML notations.
07:02 The HTML Color notation for sky-blue is #87CEEB
07:11 We will learn more about style and it’s attributes in a later tutorial.
07:17 In our code, we will add one more attribute called title.
07:22 Inside the p – that is paragraph tag, type

title equal to within single quote Mumbai Farmer Market

07:32 Now save the file by pressing Ctrl and S keys.
07:37 Switch to the browser and refresh the page.

Observe the changes.

07:44 The background color of the page is now set to sky-blue.
07:49 Hover the mouse on the text “Buy the products directly from the farmers.”
07:54 Notice the tooltip - it says “Mumbai Farmer Market”.
07:59 This is how the attributes work.

Switch back to the editor window.

08:05 Quotes are important while declaring the value of the attribute.
08:10 Notice here - The values of the attributes style and title, are mentioned within quotes.
08:17 Values that contain more than one word, can be declared within single or double quotes.
08:24 It is mandatory to close the quotes, else the attribute won't be applied.
08:30 Let’s try it out.

Switch back to the editor

08:34 Delete the end quotes of the title attribute.
08:38 Save the file.
08:40 Then switch to the browser and refresh the page.
08:45 Notice that, the line - “Buy the products directly from the farmers” is missing now.
08:51 Switch back to the editor and undo the changes.
08:55 Now, let’s try something else.

What if we put a quote inside the attribute?

09:01 Let’s change the Mumbai Farmer market to Mumbai Farmer's Market.
09:08 Save the file.
09:10 Then switch to the browser and refresh the page.
09:15 Notice the tooltip.
09:17 It says “Mumbai Farmer”, but inside the code we had written “Farmer's”
09:23 Let’s switch back to the code.
09:26 Instead of single quote, use double quote for the title’s value .
09:32 The standard rule is if we are using a particular quote inside the value, then use the other quote to declare the value.
09:41 Now save the file once again.
09:44 Then switch to the browser and refresh the page to see the output .

It worked!

09:52 With this we come to the end of this tutorial.

Let’s summarise.

09:57 In this tutorial, we have learnt about- Elements, Tags: Pair tags and Self Closing Tags
10:06 Declaration of attributes

Single and Double quoted attributes

10:13 As an assignment-

Open the file MyHomePage.html which you created in an earlier assignment.

10:22 Set the background of the page to yellow.
10:26 Write two paragraphs with p tag.
10:30 Create a line break between the two paragraphs.
10:34 Set the title for the first paragraph as “It’s my first paragraph”.
10:40 Open the html page in a web browser and see the output.
10:45 The video at the following link summaries the Spoken Tutorial project.

Please download and watch it.

10:53 The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

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

Thank you for joining

Contributors and Content Editors

PoojaMoolya