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

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