Difference between revisions of "HTML/C2/Elements-Tags-Attributes-in-HTML/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script: '''Elements and Attributes '''Author:''' Praveen S '''Domain Reviewer: '''M.Deivamani '''Novice Reviewer:''' Madhulika G '''Keywords: '''HTML, HTML...")
 
Line 11: Line 11:
  
  
{| style="border-spacing:0;width:17.198cm;"
+
{| border=1
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | Visual Cue
+
|| Visual Cue
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | Narration
+
|| Narration
 +
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | Slide 1: Title
+
|| Slide 1: Title
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Welcome to the Spoken Tutorial on </span><span style="color:#000000;">'''Elements, Tags'''</span><span style="color:#000000;"> and </span><span style="color:#000000;">'''Attributes'''</span><span style="color:#000000;"> in </span><span style="color:#000000;">'''HTML.'''</span>
+
|| Welcome to the Spoken Tutorial on '''Elements, Tags''' and '''Attributes''' in '''HTML.'''
 +
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;">Slide 2: </div>
+
||Slide 2: Learning Objectives
 +
||In this tutorial we will learn about:
 +
* '''Elements'''
 +
* '''Tags'''
 +
* '''Attributes'''
  
<div style="color:#000000;">Learning Objectives</div>
+
in '''HTML '''using some examples.
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;">In this tutorial we will learn about:</div>
+
  
 
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Elements'''</div>
 
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Tags'''</div>
 
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Attributes'''</div>
 
 
 
 
<div style="color:#000000;"></div>
 
 
<span style="color:#000000;">in </span><span style="color:#000000;">'''HTML '''</span><span style="color:#000000;">using some examples.</span>
 
 
|-
 
|-
| style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 3:
+
|| Slide 3: Prerequisite
 +
|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.
  
Prerequisite
+
If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.
  
 
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.
 
 
 
If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.
 
 
|-
 
|-
| style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 4:
+
|| Slide 4: System Requirements
 +
|| To record this tutorial, I’m using
 +
* '''Ubuntu Linux 16.04 OS'''
 +
* '''HTML 5'''
 +
* '''gedit Text Editor '''and
 +
* '''Firefox web browser'''
  
System Requirements
+
However you may, use any other '''editor''' or '''browser''' of your choice.
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | To record this tutorial, I’m using * <div style="margin-left:1.27cm;margin-right:0cm;">'''Ubuntu Linux 16.04 OS'''</div>
+
* <div style="margin-left:1.235cm;margin-right:0cm;">'''HTML 5'''</div>
+
* <div style="margin-left:1.235cm;margin-right:0cm;">'''gedit Text Editor '''and</div>
+
* <div style="margin-left:1.235cm;margin-right:0cm;">'''Firefox web browser'''</div>
+
  
 
 
 
 
However you may, use any other '''editor''' or '''browser''' of your choice.
 
 
|-
 
|-
| style="border-top:0.5pt solid #000001;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | Slide 5: Code Files
+
|| Slide 5: Code Files
| style="border-top:0.5pt solid #000001;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.
+
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.
  
 +
Please download and extract them.
  
Please download and extract them.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide </span>6a<span style="color:#000000;">:</span> HTML Elements
+
|| Slide 6a: HTML Elements
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | * <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">'''HTML'''</span><span style="color:#000000;"> document</span> <span style="color:#000000;">contains a set of </span>'''e<span style="color:#000000;">lements.'''</span></div>
+
||  
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">Each </span>'''e<span style="color:#000000;">lement'''</span><span style="color:#000000;"> consists </span>of some <span style="color:#000000;">content between </span><span style="color:#000000;">'''tags.'''</span></div>
+
* '''HTML''' document contains a set of '''elements.'''
 
+
*Each '''element''' consists of some content between '''tags.'''
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 6b: HTML Elements
+
|| Slide 6b: HTML Elements
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | * <div style="margin-left:1.27cm;margin-right:0cm;">Some '''elements''' don't require any<span style="color:#ff0000;"> </span>content. These are called as '''Empty''' '''Elements.'''</div>
+
||  
* <div style="margin-left:1.27cm;margin-right:0cm;">We can also have '''Nested''' '''Elements.''' </div>
+
* Some '''elements''' don't require any content.  
 +
These are called as '''Empty''' '''Elements.'''
  
 +
* We can also have '''Nested''' '''Elements.'''
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Open </span><span style="color:#000000;">'''MyFirstPage.html '''</span><span style="color:#000000;">in</span><span style="color:#000000;">''' </span>gedit'''
+
|| Open '''MyFirstPage.html '''in''' gedit'''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Let us open our file </span><span style="color:#000000;">'''MyFirstPage.html, '''</span><span style="color:#000000;">which we created</span> <span style="color:#000000;">earlier.</span>
+
|| Let us open our file '''MyFirstPage.html, '''which we created earlier.
  
 +
The same is available in the '''Code Files''' link.
  
<span style="background-color:#ffffff;">The same is available in the </span><span style="background-color:#ffffff;">'''Code Files'''</span><span style="background-color:#ffffff;"> link.</span>
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to gedit with '''MyFirstPage.html'''
+
|| Switch to gedit with '''MyFirstPage.html'''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | We will now learn how '''elements '''are implemented.
+
|| We will now learn how '''elements '''are implemented.
 
+
  
 
I have already opened my '''html '''file in '''gedit text editor''' and here is the code.
 
I have already opened my '''html '''file in '''gedit text editor''' and here is the code.
 +
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;"></div>
+
|| <title> Farmer's market </title>
 +
|| In this code, each line is an '''element.'''
  
<div style="color:#000000;"></div>
+
Have a look at the '''title'''.
  
<div style="color:#000000;"><title> Farmer's market </title></div>
+
You can see that this '''element''' contains '''start''' and '''end''' '''tags''' along with the content.
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">In this code, each line is an </span><span style="color:#000000;">'''element.'''</span>
+
  
 +
|-
 +
|| <!DOCTYPE html>
 +
|| See the first line '''<!DOCTYPE html>'''
  
<span style="color:#000000;">Have a look </span>at <span style="color:#000000;">the </span><span style="color:#000000;">'''title'''</span><span style="color:#000000;">.</span>
+
Notice that this '''element''' doesn't have an '''end tag''' or any content.
  
 +
This is called an '''empty element. '''
  
<span style="color:#000000;">You can see that this </span><span style="color:#000000;">'''element'''</span><span style="color:#000000;"> contains </span><span style="color:#000000;">'''start'''</span><span style="color:#000000;"> and </span><span style="color:#000000;">'''end'''</span><span style="color:#000000;"> </span><span style="color:#000000;">'''tags'''</span><span style="color:#000000;"> along with the content.</span>
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | <!DOCTYPE html>
+
|| Highlight the complete code
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">See the first line </span><span style="color:#000000;">'''<!</span>DOCTYPE<span style="color:#000000;"> html>'''</span>
+
|| The whole program is an example of '''nested elements'''.
  
 +
'''html tag''' is an '''element''' with a '''start''' and an '''end'''.
  
<span style="color:#000000;">Notice that this </span><span style="color:#000000;">'''element'''</span><span style="color:#000000;"> doesn't have an </span><span style="color:#000000;">'''end tag'''</span><span style="color:#000000;"> </span>or <span style="color:#000000;">any content.</span>
+
Inside this, we have other '''elements'''.
  
 +
|-
 +
||
 +
|| Next we will learn about '''tags.'''
  
<span style="color:#000000;">This is called </span>an<span style="color:#000000;"> </span><span style="color:#000000;">'''empty element. '''</span>
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | Highlight the complete code
+
|| Slide 7: HTML Tags
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">The whole program is an example </span>of<span style="color:#000000;"> </span><span style="color:#000000;">'''nested elements'''</span><span style="color:#000000;">.</span>
+
||
 +
* The contents to be structured on the web are defined by '''tags'''.
 +
* '''Tags''' are written in between '''angular brackets.'''
 +
* Most of the '''tags''' will have a '''start''' and an '''end.'''
 +
* Syntax of a '''tag '''is:''' <tag-name> content </tag-name>'''
  
 +
'''tag name within angular brackets followed by the content and ending with forward slash '''
  
'''html<span style="color:#000000;"> tag'''</span><span style="color:#000000;"> is an </span><span style="color:#000000;">'''element'''</span><span style="color:#000000;"> with a </span><span style="color:#000000;">'''start'''</span><span style="color:#000000;"> and an </span><span style="color:#000000;">'''end'''</span><span style="color:#000000;">.</span>
+
'''tag name within angular brackets'''
  
 +
|-
 +
|| Slide 7: HTML Tags
 +
||
 +
* Each '''end tag''' contains a “/” (forward slash) before the '''tag''' name.
 +
* There are some '''tags''' which don't require an '''end tag.'''
 +
* '''HTML tags''' are''' '''not ''' case sensitive'''.
 +
* However, it is advisable touse '''lower-case'''.
  
<span style="color:#000000;">Inside </span>this<span style="color:#000000;">, we have other </span><span style="color:#000000;">'''elements'''</span><span style="color:#000000;">.</span>
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" |  
+
|| Open gedit
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Next we will learn about '''tags.'''
+
|| Switch back to the '''editor '''window.
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide </span>7<span style="color:#000000;">:</span> HTML <span style="color:#000000;">Tags</span>
+
 
+
 
+
 
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | * <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">The contents to be structured on the web </span>are<span style="color:#000000;"> defined by </span>'''tags'''<span style="color:#000000;">.</span></div>
+
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">'''Tags'''</span><span style="color:#000000;"> are written in between </span><span style="color:#000000;">'''ang</span>ular<span style="color:#000000;"> brackets.'''</span></div>
+
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">Most of the </span>'''tags'''<span style="color:#000000;"> will have a </span><span style="color:#000000;">'''start'''</span><span style="color:#000000;"> and an </span><span style="color:#000000;">'''end.'''</span></div>
+
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">Syntax of a </span><span style="color:#000000;">'''tag '''</span><span style="color:#000000;">is:</span><span style="color:#000000;">''' <tag-name> content </tag-name>'''</span></div>
+
 
+
 
+
 
+
 
+
  
'''tag name within angular brackets followed by the content and ending with forward slash tag name within angular brackets'''
 
 
|-
 
|-
| style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 7:<span style="color:#ff0000;"> </span>HTML Tags
+
||  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | * <div style="margin-left:1.27cm;margin-right:0cm;">Each '''end tag''' contains a “/” (forward slash) before the '''tag''' name.</div>
+
|| As mentioned earlier, an '''HTML''' program consists of '''tags'''.
* <div style="margin-left:1.27cm;margin-right:0cm;">There are some '''tags''' which don't require an '''end tag.'''</div>
+
* <div style="margin-left:1.27cm;margin-right:0cm;">'''HTML tags''' are''' '''not<span style="color:#ff0000;">''' </span>case sensitive'''.</div>
+
* <div style="margin-left:1.27cm;margin-right:0cm;">However, it is advisable to<span style="color:#ff0000;"> </span>use '''lower-case'''.</div>
+
 
+
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Open gedit
+
|| Point to a few tags in the code
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch back to the '''editor '''window.
+
|| Notice here - each line of code contains a '''tag'''.  
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" |
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | As mentioned earlier, an '''HTML''' program consists of '''tags'''.
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Point to a few tags in the code
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Notice here - each line of code contains a '''tag'''.  
+
 
+
  
 
We have used various '''tags''' in this program.
 
We have used various '''tags''' in this program.
  
 +
Also notice that all the '''tags '''are written in lower-case.
  
Also notice that all the '''tags '''are written in lower-case.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Highlight <span style="color:#000000;">'''<h1> Welcome to Farmer's Market </h1> '''</span>
+
|| Highlight '''<h1> Welcome to Farmer's Market </h1> '''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Here in this line, we have used </span><span style="color:#000000;">'''h1 – heading tag.'''</span>
+
|| Here in this line, we have used '''h1 – heading tag.'''
  
 +
The name of the '''tag''' is written between the left and right '''angular brackets'''.
  
<span style="color:#000000;">The name of the </span><span style="color:#000000;">'''tag'''</span><span style="color:#000000;"> is written between the left and right </span><span style="color:#000000;">'''angular brackets'''</span><span style="color:#000000;">.</span>
+
And here, the '''end tag''' is the same as the '''starting tag'''.
  
 +
But it has a '''forward slash''' before the '''tag '''name.
  
<span style="color:#000000;">And here, the </span><span style="color:#000000;">'''end tag'''</span><span style="color:#000000;"> is the same as the </span><span style="color:#000000;">'''starting tag'''</span><span style="color:#000000;">.</span>
 
 
 
<span style="color:#000000;">But it has a </span><span style="color:#000000;">'''forward slash'''</span><span style="color:#000000;"> before the </span><span style="color:#000000;">'''tag '''</span><span style="color:#000000;">name.</span>
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" |  
+
|| Type
 
+
Type
+
  
 
'''<br>'''
 
'''<br>'''
  
 
'''<p> Buy the products directly from the farmers. </p>'''
 
'''<p> Buy the products directly from the farmers. </p>'''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;">Let me add a few more lines of code to this program.</div>
+
||Let me add a few more lines of code to this program.
  
 +
Next to the welcome message, type the following code.
  
Next to the welcome message, t<span style="color:#000000;">ype the following code</span>.<span style="color:#000000;"> </span>
+
|-
 +
|| Press Ctrl+S
 +
|| Press '''Ctrl + S''' to save this change.
  
 +
|-
 +
|| <br>
 +
|| I have written '''br '''–''' '''which is the '''break tag,''' without writing the '''end tag'''.
  
 +
This '''tag''' provides a '''line break''' and it doesn't require an '''end tag'''.
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press Ctrl+S
+
||  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press '''Ctrl + S''' to save this change.
+
|| Let’s see the output on the browser.
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | <br>
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">I have written </span><span style="color:#000000;">'''br '''</span><span style="color:#000000;">–</span><span style="color:#000000;">''' '''</span><span style="color:#000000;">which is the </span><span style="color:#000000;">'''break tag,'''</span><span style="color:#000000;"> without wri</span>ting <span style="color:#000000;">the </span><span style="color:#000000;">'''end tag'''</span><span style="color:#000000;">.</span>
+
  
 
This '''tag'''<span style="color:#000000;"> provides a </span><span style="color:#000000;">'''line break'''</span> and it <span style="color:#000000;">doesn't require an </span><span style="color:#000000;">'''end tag'''</span><span style="color:#000000;">.</span>
 
|-
 
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" |
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let’s see the output on the browser.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Open </span><span style="color:#000000;">'''MyFirstPage.html '''</span><span style="color:#000000;">in </span><span style="color:#000000;">'''Firefox'''</span>
+
|| Open '''MyFirstPage.html '''in '''Firefox'''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Switch to the folder where </span>the <span style="color:#000000;">file</span> is saved.
+
|| Switch to the folder where the file is saved.
  
 +
Right-click and open with your preferred '''web browser.'''
  
<span style="color:#000000;">Right</span>-c<span style="color:#000000;">lick and </span>open with your preferred '''web browser.'''
+
Observe the change in the content that is displayed.
  
 
Observe<span style="color:#000000;"> the change in the content that is displayed.</span>
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to gedit
+
|| Switch to gedit
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let’s switch back to the '''editor '''window.
+
|| Let’s switch back to the '''editor '''window.
 +
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | <br />
+
|| <br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">In the </span><span style="color:#000000;">'''break tag'''</span><span style="color:#000000;">, I will put a </span><span style="color:#000000;">'''forward slash'''</span><span style="color:#000000;"> after the </span><span style="color:#000000;">'''tag'''</span><span style="color:#000000;"> name.</span>
+
|| In the '''break tag''', I will put a '''forward slash''' after the '''tag''' name.
  
 +
This is called as '''Self-closing tag'''.
  
<span style="color:#000000;">This is called as </span><span style="color:#000000;">'''Self-</span>c<span style="color:#000000;">losing tag'''</span><span style="color:#000000;">.</span>
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press Ctrl+S
+
|| Press Ctrl+S
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Save the file once again.
+
|| Save the file once again.
 +
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to Firefox and refresh
+
|| Switch to Firefox and refresh
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch back to the '''web browser''' and refresh the page.
+
|| Switch back to the '''web browser''' and refresh the page.
 
+
  
 
There is no change in the output.
 
There is no change in the output.
 +
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" |  
+
||  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Now we will learn about '''tag attributes'''.
+
|| Now we will learn about '''tag attributes'''.
 +
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide </span>8<span style="color:#000000;">:</span> <span style="color:#000000;">Attributes</span>
+
|| Slide 8: Attributes
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | * <div style="margin-left:1.27cm;margin-right:0cm;">An '''a<span style="color:#000000;">ttribute'''</span><span style="color:#000000;"> </span>is <span style="color:#000000;">additional information </span>pertaining to <span style="color:#000000;">an </span>'''e<span style="color:#000000;">lement.'''</span></div>
+
||  
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">It is written inside the </span><span style="color:#000000;">'''starting tag.'''</span></div>
+
* An '''attribute''' is additional information pertaining to an '''element.'''
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">Each </span><span style="color:#000000;">'''attribute'''</span><span style="color:#000000;"> is declared by </span><span style="color:#000000;">'''name – value'''</span><span style="color:#000000;"> pair separated by </span><span style="color:#000000;">'''<nowiki>=</nowiki>'''</span><span style="color:#000000;"> symbol.</span></div>
+
* It is written inside the '''starting tag.'''
* <div style="margin-left:1.27cm;margin-right:0cm;">The syntax is:''' <tag-name attr-name=attr-value> … </tag-name>'''</div>
+
* Each '''attribute''' is declared by '''name – value''' pair separated by '''= ''' symbol.
 +
* The syntax is:''' <tag-name attr-name=attr-value> … </tag-name>'''
  
 +
'''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'''
  
 +
|-
 +
|| Slide 8a: Attributes
 +
||
 +
* Values containing '''spaces''' have to be entered within '''single '''or '''double quotes.'''
 +
* The syntax is as shown here:''' <tag-name attr-name=''attr value''> … </tag-name>'''
  
 +
|-
 +
|| Slide 8b: Attributes
 +
||
 +
* Multiple '''attributes''' can be specified with the help of the '''semicolon separator.'''
 +
* The syntax is as shown here.
  
'''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'''
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 8a: Attributes
+
|| Slide 9: Common Attributes
 +
|| Here are some common '''attributes.'''
  
 +
* '''title''': to display the tooltip
 +
* '''href''': '''link''' specification
 +
* '''id''': is the unique identifier for an '''element'''
 +
* '''class''': to classify the '''elements''' in a similar manner, mostly for better presentation
 +
* '''style''': to define a specific style for an '''element'''
  
 +
|-
 +
|| Switch to gedit
 +
|| Let’s switch back to our editor to try some of these.
  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | * <div style="margin-left:1.27cm;margin-right:0cm;">Values containing '''spaces''' have to be entered within '''single '''or '''double quotes.'''</div>
+
We will look at some basic '''attributes''' and how they work.
* <div style="margin-left:1.27cm;margin-right:0cm;">The syntax is as shown here:''' <tag-name attr-name=''attr value''> … </tag-name>'''</div>
+
 
+
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 8b: Attributes
+
|| Type: style="background-color:skyblue"
 +
|| First we will add a sky-blue '''background''' to our webpage.
  
 +
To do that, let’s set the '''background color''' using '''style attribute''' to the '''body tag'''.
  
 +
So inside the '''body tag,''' type, '''style="background-color:skyblue"'''
  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | * <div style="margin-left:1.27cm;margin-right:0cm;">Multiple '''attributes''' can be specified with the help of the '''semicolon separator.'''</div>
+
|-
* <div style="margin-left:1.27cm;margin-right:0cm;">The syntax is as shown here.</div>
+
|| (text overlay while editing - HTML Color Notation)
 +
|| The color value can also be declared in '''RGB''' or '''HTML notations'''.  
  
 +
The '''HTML''' Color notation for sky-blue is '''<nowiki>#87CEEB.</nowiki>'''
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide </span>9<span style="color:#000000;">:</span>
+
||
 +
|| We will learn more about '''style''' and it’s '''attributes''' in a later tutorial.
  
 +
|-
 +
|| Type: title='Mumbai Farmer Market'
 +
|| In our code, we will add one more '''attribute''' called '''title'''.
  
<div style="color:#000000;">Common Attributes</div>
+
Inside the '''p '''– that is '''paragraph tag,''' type
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Here are some common </span><span style="color:#000000;">'''attributes.'''</span>
+
  
 +
'''title='Mumbai Farmer Market''''
  
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">'''title'''</span><span style="color:#000000;">: </span>to <span style="color:#000000;">display t</span>he tooltip </div>
+
|-
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">'''href'''</span><span style="color:#000000;">: </span><span style="color:#000000;">'''link'''</span><span style="color:#000000;"> specification</span></div>
+
|| Press Ctrl+S
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">'''id'''</span><span style="color:#000000;">: is the unique identifier for an </span><span style="color:#000000;">'''element'''</span></div>
+
|| Now save the file by pressing '''Ctrl + S '''keys.
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">'''class'''</span><span style="color:#000000;">: to classify the </span><span style="color:#000000;">'''elements'''</span><span style="color:#000000;"> in a similar manner, mostly for better </span>presentation </div>
+
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">'''style'''</span><span style="color:#000000;">: to define a specific style for </span>an<span style="color:#000000;"> </span><span style="color:#000000;">'''element'''</span></div>
+
 
+
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to gedit
+
|| Switch to Firefox and refresh
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let’s switch back to our editor to try some of these.
+
|| Then switch to the browser and refresh the page.
  
 +
Observe the changes.
  
We will look at some basic '''attributes''' and how they work.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;"></div>
+
|| Point to the background
 +
|| The '''background''' color of the page is now set to sky-blue.
  
<div style="color:#000000;"></div>
+
|-
 +
|| Hover the mouse Point
 +
|| Hover the mouse on the text “'''Buy the products directly from the farmers'''.”
  
<div style="color:#000000;"></div>
+
Notice the '''tooltip''' - it says '''“Mumbai Farmer Market”.'''
  
<span style="color:#000000;">Type: </span>style="background-color:skyblue"
+
|-
 +
|| Switch to gedit
 +
|| This is how the '''attributes''' work.
  
 +
Switch back to the '''editor '''window.
  
 +
|-
 +
||
 +
|| '''Quotes''' are important while declaring the value of the '''attributes'''.
  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | First we will add a sky-blue '''background''' to our webpage.
+
|-
 +
|| Point to '''style''' and '''title'''
 +
|| Notice here - The values of the '''attributes style''' and '''title,''' are mentioned within '''quotes'''.
  
 +
|-
 +
|| Slide 10: Quotes
 +
|| Values that contain more than one word, can be declared within '''single''' or '''double quotes.'''
  
<span style="color:#000000;">To do that, let</span>’<span style="color:#000000;">s set the </span><span style="color:#000000;">'''background color'''</span><span style="color:#000000;"> using </span>'''s<span style="color:#000000;">tyle attribute'''</span><span style="color:#000000;"> to the </span><span style="color:#000000;">'''body tag'''</span><span style="color:#000000;">.</span>
+
It is mandatory to close the '''quotes,''' else the '''attribute '''won't be applied.
 
+
  
<span style="color:#000000;">So inside the </span><span style="color:#000000;">'''body tag,'''</span><span style="color:#000000;"> type, </span>'''style="background-color:skyblue"'''
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#ff00ff;" | (text overlay while editing - HTML Color Notation)
+
|| Delete end quotes of '''title'''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | The color value can also be declared in '''RGB''' or '''HTML notations'''.  
+
|| Let’s try it out.
  
 +
Delete the '''end quotes''' of the '''title attribute'''.
  
The '''HTML''' Color notation for sky-blue is '''<nowiki>#87CEEB.</nowiki>'''
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#ff00ff;" |  
+
|| Press Ctrl+S
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | We will learn more about '''style''' and it’s '''attributes''' in a later tutorial.
+
|| Save the file.
 +
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;"></div>
+
|| Switch to Firefox and refresh
 +
|| Then switch to the browser and refresh the page.
  
<span style="color:#000000;">Type: </span>title='Mumbai Farmer Market'
+
|-
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | In our code, w<span style="color:#000000;">e </span>w<span style="color:#000000;">ill add one more </span><span style="color:#000000;">'''attribute'''</span><span style="color:#000000;"> called </span><span style="color:#000000;">'''title'''</span><span style="color:#000000;">.</span>
+
|| Point to the area
 +
|| Notice that the line - '''Buy the products directly from the farmers”''' is missing now.
  
 +
|-
 +
|| Switch to gedit >>Press Ctrl + Z
 +
|| Switch back to the '''editor '''and undo the changes.
  
<span style="color:#000000;">Inside the </span><span style="color:#000000;">'''p '''</span><span style="color:#000000;">– that is </span><span style="color:#000000;">'''paragraph tag,'''</span><span style="color:#000000;"> type </span>
 
 
<span style="color:#000000;">'''title='</span>Mumbai Farmer Market<span style="color:#000000;">''''</span>
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press Ctrl+S
+
||  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Now save the file by pressing '''Ctrl + S '''keys.
+
|| Now, let’s try something else.
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to Firefox and refresh
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Then switch to the browser and refresh the page.
+
  
 +
What if we put a '''quote''' inside the '''attribute'''?
  
Observe the changes.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Point to the background
+
|| Change as per narration
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | The '''background''' color of the page is now set to sky-blue.
+
|| Let’s change '''Mumbai Farmer market''' to '''Mumbai''' '''Farmer's Market.'''
 +
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Hover the mouse Point
+
|| Press Ctrl+S
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Hover the mouse on the text “'''Buy the products directly from the farmers'''.
+
|| Save the file.
  
 +
|-
 +
|| Switch to Firefox and refresh
 +
|| Then switch to '''Firefox''' and refresh the page.
  
Notice the '''tooltip''' - it says '''“Mumbai Farmer Market”.'''
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" |
+
||
 +
|| Notice the '''tooltip'''.
  
 +
|-
 +
|| Compare with the editor window
 +
to show the difference in the words
 +
|| It says “'''Mumbai''' '''Farmer”''', but inside the code we had written “'''Farmer's”'''
  
 
Switch to gedit
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">This is how the </span><span style="color:#000000;">'''attributes'''</span><span style="color:#000000;"> work.</span>
 
 
 
<span style="color:#000000;">Switch back to </span>the '''editor '''window.
 
|-
 
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" |
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | '''Quotes''' are important while declaring the value of the '''attributes'''.
 
|-
 
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Point to '''style''' and '''title'''
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Notice here - The values of the '''attributes style''' and '''title,''' are mentioned within '''quotes'''.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 10:
+
|| Switch to gedit
 +
|| Let’s switch back to the code.
  
 
Quotes
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Values that contain more than one word, can be declared within '''single''' or '''double quotes.'''
 
 
 
It is mandatory to close the '''quotes,''' else the '''attribute '''won't be applied.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" |
+
|| Change to double quotes
 +
|| Instead of '''single quote''', use '''double quotes '''for the '''title’s''' value .
  
 
 
Delete end quotes of '''title'''
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let’s try it out.
 
 
 
Delete the '''end quotes''' of the '''title attribute'''.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press Ctrl+S
+
||  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Save the file.
+
|| The standard rule is-
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to Firefox and refresh
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Then switch to the browser and refresh the page.
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Point to the area
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Notice that the line - “'''Buy the products directly from the farmers”''' is missing now.
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to gedit >>Press Ctrl + Z
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch back to the '''editor '''and undo the changes.
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" |
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Now, let’s try something else.
+
  
 +
If we are using a particular '''quote '''inside the value, then use the other '''quote '''to declare the value.
  
What if we put a '''quote''' inside the '''attribute'''?
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Change as per narration
+
|| Press Ctrl+S
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let’s change '''Mumbai Farmer market''' to '''Mumbai''' '''Farmer's Market.'''
+
|| Now save the file once again.
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press Ctrl+S
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Save the file.
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to Firefox and refresh
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Then switch to '''Firefox''' and refresh the page.
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" |
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Notice the '''tooltip'''.
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Compare with the editor window to show the difference in the words
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | It says “'''Mumbai''' '''Farmer”''', but inside the code we had written “'''Farmer's”'''
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to gedit
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let’s switch back to the code.
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Change to double quotes
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Instead of '''single quote''', use '''double quotes '''for the '''title’s''' value .
+
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" |
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | The standard rule is-
+
  
 
If we are using a particular '''quote '''inside the value, then use the other '''quote '''to declare the value.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press Ctrl+S
+
|| Switch to Firefox and refresh
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Now save the file once again.
+
|| Then switch to '''Firefox''' and refresh the page to see the output now.
|-
+
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Switch to Firefox and refresh
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Then switch to '''Firefox''' and refresh the page to see the output now.
+
  
 +
It worked!
  
It worked!
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" |  
+
||  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | With this we come to the end of this tutorial.
+
|| With this we come to the end of this tutorial.
 
+
  
 
Let’s summarise.
 
Let’s summarise.
 +
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide </span>11<span style="color:#000000;">: Summary </span>
+
|| Slide 11: Summary  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;">In this tutorial, we have learnt about-</div>
+
||In this tutorial, we have learnt about-
 
+
* '''Elements'''
 
+
* '''Tags''' – '''Pair tags''' and '''Self Closing Tags'''
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Elements'''</div>
+
* Declaration of '''attributes'''
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Tags''' – '''Pair tags''' and '''Self Closing Tags'''</div>
+
* '''Single''' and '''Double quoted attributes'''
* <div style="margin-left:1.27cm;margin-right:0cm;">Declaration of '''attributes'''</div>
+
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Single''' and '''Double quoted attributes'''</div>
+
 
+
  
 
|-
 
|-
| style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 12: Assignment
+
|| Slide 12: Assignment
| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | As an assignment-  
+
|| As an assignment-  
 
+
* Open the file '''MyHomePage.html''' which you created in an earlier assignment.
 
+
* Set the background of the page to yellow.
* <div style="margin-left:1.27cm;margin-right:0cm;">Open the file '''MyHomePage.html''' which you created in an earlier assignment.</div>
+
* Write two paragraphs with '''p tag.'''
* <div style="margin-left:1.27cm;margin-right:0cm;">Set the background of the page to yellow.</div>
+
* Create a '''line break''' between the two paragraphs.
* <div style="margin-left:1.27cm;margin-right:0cm;">Write two paragraphs with '''p tag.'''</div>
+
* Set the '''title''' for the first paragraph as '''“It’s my first paragraph”.'''
* <div style="margin-left:1.27cm;margin-right:0cm;">Create a '''line break''' between the two paragraphs.</div>
+
* Open the '''html''' page in a '''web browser '''and see the output.
* <div style="margin-left:1.27cm;margin-right:0cm;">Set the '''title''' for the first paragraph as '''“It’s my first paragraph”.'''</div>
+
* <div style="margin-left:1.27cm;margin-right:0cm;">Open the '''html''' page in a '''web browser '''and see the output.</div>
+
 
+
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide </span>13<span style="color:#000000;">:</span>
+
|| Slide 13: About Spoken Tutorial project
 +
|| The video at the following link summarises the Spoken Tutorial project.
  
<div style="color:#000000;">About Spoken Tutorial project</div>
+
Please download and watch it.
| style="border-top:0.5pt solid #000001;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | The video at the following link summarises the Spoken Tutorial project.
+
  
 
Please download and watch it.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide 1</span>4<span style="color:#000000;">:</span>
+
|| Slide 14: About Workshop
 
+
|| The Spoken Tutorial Project team conducts workshops using spoken tutorials.  
<div style="color:#000000;">About Workshop</div>
+
| style="border-top:0.5pt solid #000001;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The&nbsp;Spoken Tutorial Project&nbsp;team </span>conducts workshops using spoken tutorials.  
+
 
+
  
 
And gives certificates on passing online tests.
 
And gives certificates on passing online tests.
  
 +
For more details, please write to us.
  
For more details, please write to us.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide 1</span>5<span style="color:#000000;">:</span>
+
|| Slide 15: Forum questions
 +
|| Please post your timed queries in this forum.
  
<div style="color:#000000;">Forum questions</div>
 
| style="border-top:0.5pt solid #000001;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | Please post your timed queries in this forum.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide 1</span>6<span style="color:#000000;">:</span>
+
|| Slide 16: Acknowledgement
 
+
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
<div style="color:#000000;">Acknowledgement</div>
+
| style="border-top:0.5pt solid #000001;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
+
 
+
  
More information on this mission is available at
+
More information on this mission is available at this link.
  
this link.
 
 
|-
 
|-
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide 17: Thanks
+
|| Slide 17: Thanks
| style="border-top:0.5pt solid #000001;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | This is Praveen from IIT Bombay signing off.
+
|| This is Praveen from IIT Bombay signing off.
  
 
Thank you for joining
 
Thank you for joining
 
|-
 
|-
 
|}
 
|}

Revision as of 12:14, 17 April 2018

Title of the script: Elements and Attributes

Author: Praveen S

Domain Reviewer: M.Deivamani

Novice Reviewer: Madhulika G

Keywords: HTML, HTML Elements, HTML Tags, Tag Attributes, Web Designing, Web Site, Spoken Tutorial, Video Tutorial


Visual Cue Narration
Slide 1: Title Welcome to the Spoken Tutorial on Elements, Tags and Attributes in HTML.
Slide 2: Learning Objectives In this tutorial we will learn about:
  • Elements
  • Tags
  • Attributes

in HTML using some examples.

Slide 3: Prerequisite To practise this tutorial, you should know to use any WYSIWYG or Text Editor and a 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
  • HTML 5
  • 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 6a: HTML Elements
  • HTML document contains a set of elements.
  • Each element consists of some content between tags.
Slide 6b: HTML Elements
  • Some elements don't require any content.

These are called as Empty Elements.

  • We can also have Nested Elements.
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.

Switch to gedit with MyFirstPage.html We will now learn how elements are implemented.

I have already opened my html file in gedit text editor and here is the code.

<title> Farmer's market </title> In this code, each line is an element.

Have a look at the title.

You can see that this element contains start and end tags along with the content.

<!DOCTYPE html> See the first line <!DOCTYPE html>

Notice that this element doesn't have an end tag or any content.

This is called an empty element.

Highlight the complete code The whole program is an example of nested elements.

html tag is an element with a start and an end.

Inside this, we have other elements.

Next we will learn about tags.
Slide 7: HTML Tags
  • The contents to be structured on the web are defined by tags.
  • Tags are written in between angular brackets.
  • Most of the tags will have a start and an end.
  • Syntax of a tag is: <tag-name> content </tag-name>

tag name within angular brackets followed by the content and ending with forward slash

tag name within angular brackets

Slide 7: HTML Tags
  • Each end tag contains a “/” (forward slash) before the tag name.
  • There are some tags which don't require an end tag.
  • HTML tags are not case sensitive.
  • However, it is advisable touse lower-case.
Open gedit Switch back to the editor window.
As mentioned earlier, an HTML program consists of tags.
Point to a few tags in the code Notice here - each line of code contains a tag.

We have used various tags in this program.

Also notice that all the tags are written in lower-case.

Highlight

Welcome to Farmer's Market

Here in this line, we have used h1 – heading tag.

The name of the tag is written between the left and right angular brackets.

And here, the end tag is the same as the starting tag.

But it has a forward slash before the tag name.

Type


Buy the products directly from the farmers.

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

Next to the welcome message, type the following code.

Press Ctrl+S Press Ctrl + S to save this change.

I have written br which is the break tag, without writing the end tag.

This tag provides a line break and it doesn't require an end tag.

Let’s see the output on the browser.
Open MyFirstPage.html in Firefox Switch to the folder where the file is saved.

Right-click and open with your preferred web browser.

Observe the change in the content that is displayed.

Switch to gedit Let’s switch back to the editor window.

In the break tag, I will put a forward slash after the tag name.

This is called as Self-closing tag.

Press Ctrl+S Save the file once again.
Switch to Firefox and refresh Switch back to the web browser and refresh the page.

There is no change in the output.

Now we will learn about tag attributes.
Slide 8: Attributes
  • An attribute is additional information pertaining to an element.
  • It is written inside the starting tag.
  • Each attribute is declared by name – value pair separated by = symbol.
  • The syntax is: <tag-name attr-name=attr-value> … </tag-name>

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

Slide 8a: Attributes
  • Values containing spaces have to be entered within single or double quotes.
  • The syntax is as shown here: <tag-name attr-name=attr value> … </tag-name>
Slide 8b: Attributes
  • Multiple attributes can be specified with the help of the semicolon separator.
  • The syntax is as shown here.
Slide 9: Common Attributes Here are some common attributes.
  • title: to display the tooltip
  • href: link specification
  • id: is the unique identifier for an element
  • class: to classify the elements in a similar manner, mostly for better presentation
  • style: to define a specific style for an element
Switch to gedit Let’s switch back to our editor to try some of these.

We will look at some basic attributes and how they work.

Type: style="background-color:skyblue" First we will add a sky-blue background to our webpage.

To do that, let’s set the background color using style attribute to the body tag.

So inside the body tag, type, style="background-color:skyblue"

(text overlay while editing - HTML Color Notation) The color value can also be declared in RGB or HTML notations.

The HTML Color notation for sky-blue is #87CEEB.

We will learn more about style and it’s attributes in a later tutorial.
Type: title='Mumbai Farmer Market' In our code, we will add one more attribute called title.

Inside the p – that is paragraph tag, type

title='Mumbai Farmer Market'

Press Ctrl+S Now save the file by pressing Ctrl + S keys.
Switch to Firefox and refresh Then switch to the browser and refresh the page.

Observe the changes.

Point to the background The background color of the page is now set to sky-blue.
Hover the mouse Point Hover the mouse on the text “Buy the products directly from the farmers.”

Notice the tooltip - it says “Mumbai Farmer Market”.

Switch to gedit This is how the attributes work.

Switch back to the editor window.

Quotes are important while declaring the value of the attributes.
Point to style and title Notice here - The values of the attributes style and title, are mentioned within quotes.
Slide 10: Quotes Values that contain more than one word, can be declared within single or double quotes.

It is mandatory to close the quotes, else the attribute won't be applied.

Delete end quotes of title Let’s try it out.

Delete the end quotes of the title attribute.

Press Ctrl+S Save the file.
Switch to Firefox and refresh Then switch to the browser and refresh the page.
Point to the area Notice that the line - “Buy the products directly from the farmers” is missing now.
Switch to gedit >>Press Ctrl + Z Switch back to the editor and undo the changes.
Now, let’s try something else.

What if we put a quote inside the attribute?

Change as per narration Let’s change Mumbai Farmer market to Mumbai Farmer's Market.
Press Ctrl+S Save the file.
Switch to Firefox and refresh Then switch to Firefox and refresh the page.
Notice the tooltip.
Compare with the editor window

to show the difference in the words

It says “Mumbai Farmer”, but inside the code we had written “Farmer's”
Switch to gedit Let’s switch back to the code.
Change to double quotes Instead of single quote, use double quotes for the title’s value .
The standard rule is-

If we are using a particular quote inside the value, then use the other quote to declare the value.

Press Ctrl+S Now save the file once again.
Switch to Firefox and refresh Then switch to Firefox and refresh the page to see the output now.

It worked!

With this we come to the end of this tutorial.

Let’s summarise.

Slide 11: Summary In this tutorial, we have learnt about-
  • Elements
  • TagsPair tags and Self Closing Tags
  • Declaration of attributes
  • Single and Double quoted attributes
Slide 12: Assignment As an assignment-
  • Open the file MyHomePage.html which you created in an earlier assignment.
  • Set the background of the page to yellow.
  • Write two paragraphs with p tag.
  • Create a line break between the two paragraphs.
  • Set the title for the first paragraph as “It’s my first paragraph”.
  • Open the html page in a web browser and see the output.
Slide 13: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide 14: About Workshop The Spoken Tutorial Project team conducts workshops using spoken tutorials.

And gives certificates on passing online tests.

For more details, please write to us.

Slide 15: Forum questions Please post your timed queries in this forum.
Slide 16: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

Slide 17: Thanks This is Praveen from IIT Bombay signing off.

Thank you for joining

Contributors and Content Editors

Nancyvarkey, Pravin1389