|
|
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 Spoken Tutorial Project 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 |
| |- | | |- |
| |} | | |} |