https://script.spoken-tutorial.org/index.php?action=history&feed=atom&title=HTML%2FC2%2FMy-first-HTML-program%2FEnglish
HTML/C2/My-first-HTML-program/English - Revision history
2026-04-11T20:44:07Z
Revision history for this page on the wiki
MediaWiki 1.23.17
https://script.spoken-tutorial.org/index.php?title=HTML/C2/My-first-HTML-program/English&diff=43043&oldid=prev
Nancyvarkey at 03:11, 19 April 2018
2018-04-19T03:11:44Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 03:11, 19 April 2018</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 185:</td>
<td colspan="2" class="diff-lineno">Line 185:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| The webpage opens.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| The webpage opens.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>But instead of our '''HTML''' code, we see only the text which we mentioned <del class="diffchange diffchange-inline">inside </del>the '''body section.'''</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>But instead of our '''HTML''' code, we see only the text which we mentioned <ins class="diffchange diffchange-inline">in </ins>the '''body section.'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''“Welcome to Farmer’s market.”'''</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''“Welcome to Farmer’s market.”'''</div></td></tr>
</table>
Nancyvarkey
https://script.spoken-tutorial.org/index.php?title=HTML/C2/My-first-HTML-program/English&diff=43031&oldid=prev
Pravin1389 at 07:05, 17 April 2018
2018-04-17T07:05:20Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 07:05, 17 April 2018</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 16:</td>
<td colspan="2" class="diff-lineno">Line 16:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| Slide 1: Title</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| Slide 1: Title</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>|| <del class="diffchange diffchange-inline">Welcome </del>to the Spoken Tutorial on “My first '''HTML''' program”.</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>|| <ins class="diffchange diffchange-inline">Hello and welcome </ins>to the Spoken Tutorial on “My first '''HTML''' program”.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 29:</td>
<td colspan="2" class="diff-lineno">Line 29:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| Slide 3: Prerequisite  </div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| Slide 3: Prerequisite  </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 67:</td>
<td colspan="2" class="diff-lineno">Line 68:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| <'''!DOCTYPE html'''></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| <'''!DOCTYPE html'''></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| '''DOCTYPE html'''</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| '''DOCTYPE html'''</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Each '''HTML''' document begins with '''DOCTYPE,''' before the actual '''HTML''' code starts.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Each '''HTML''' document begins with '''DOCTYPE,''' before the actual '''HTML''' code starts.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 84:</td>
<td colspan="2" class="diff-lineno">Line 86:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''</head>'''</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''</head>'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| After the '''html tag, '''we have the '''head section.'''</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| After the '''html tag, '''we have the '''head section.'''</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>The '''head section''' contains the '''header information''' of the page like-  </div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>The '''head section''' contains the '''header information''' of the page like-  </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* Title,</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>* Title,</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 120:</td>
<td colspan="2" class="diff-lineno">Line 123:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| Select Desktop</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| Select Desktop</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| Now choose the desired location to save your file.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|| Now choose the desired location to save your file.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>I will select '''Desktop''' on my machine.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>I will select '''Desktop''' on my machine.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 127:</td>
<td colspan="2" class="diff-lineno">Line 131:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>This folder will help me to organize my '''html''' files in a single location on my machine.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>This folder will help me to organize my '''html''' files in a single location on my machine.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Click on '''Create''' Button.</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>|-</div></td></tr>
</table>
Pravin1389
https://script.spoken-tutorial.org/index.php?title=HTML/C2/My-first-HTML-program/English&diff=43029&oldid=prev
Pravin1389 at 06:08, 17 April 2018
2018-04-17T06:08:19Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 06:08, 17 April 2018</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 2:</td>
<td colspan="2" class="diff-lineno">Line 2:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''Author:''' Praveen S</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''Author:''' Praveen S</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''Domain Reviewer: '''M.Deivamani</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''Domain Reviewer: '''M.Deivamani</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''Novice Reviewer:''' Madhulika G</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''Novice Reviewer:''' Madhulika G</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''Keywords: '''HTML, Introduction to HTML, Web Designing, Website, Spoken Tutorial, Video Tutorial</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>'''Keywords: '''HTML, Introduction to HTML, Web Designing, Website, Spoken Tutorial, Video Tutorial</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Pravin1389
https://script.spoken-tutorial.org/index.php?title=HTML/C2/My-first-HTML-program/English&diff=43028&oldid=prev
Pravin1389 at 06:07, 17 April 2018
2018-04-17T06:07:59Z
<p></p>
<a href="https://script.spoken-tutorial.org/index.php?title=HTML/C2/My-first-HTML-program/English&diff=43028&oldid=43025">Show changes</a>
Pravin1389
https://script.spoken-tutorial.org/index.php?title=HTML/C2/My-first-HTML-program/English&diff=43025&oldid=prev
Pravin1389: Created page with "'''Title of the script: '''My first '''HTML''' program '''Author:''' Praveen S '''Domain Reviewer: '''M.Deivamani '''Novice Reviewer:''' Madhulika G '''Keywords: '''HTML,..."
2018-04-17T05:33:40Z
<p>Created page with "'''Title of the script: '''My first '''HTML''' program '''Author:''' Praveen S '''Domain Reviewer: '''M.Deivamani '''Novice Reviewer:''' Madhulika G '''Keywords: '''HTML,..."</p>
<p><b>New page</b></p><div>'''Title of the script: '''My first '''HTML''' program<br />
<br />
'''Author:''' Praveen S<br />
<br />
'''Domain Reviewer: '''M.Deivamani<br />
<br />
'''Novice Reviewer:''' Madhulika G<br />
<br />
'''Keywords: '''HTML, Introduction to HTML, Web Designing, Website, Spoken Tutorial, Video Tutorial<br />
<br />
<br />
<br />
{| style="border-spacing:0;width:16.986cm;"<br />
|-<br />
| align=center 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'''<br />
| align=center 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'''<br />
|-<br />
| 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<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;">Welcome to the Spoken Tutorial on </span>“My first<span style="color:#000000;"> </span><span style="color:#000000;">'''HTML'''</span> program”.<br />
|-<br />
| 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><br />
<br />
<div style="color:#000000;">Learning Objectives</div><br />
| 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:</div><br />
<br />
<br />
* <div style="margin-left:1.27cm;margin-right:0cm;"><span style="color:#000000;">Structure of an </span><span style="color:#000000;">'''HTML'''</span><span style="color:#000000;"> document </span></div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Write a s<span style="color:#000000;">ample </span><span style="color:#000000;">'''HTML'''</span><span style="color:#000000;"> </span>p<span style="color:#000000;">rogram</span></div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Save and run the '''HTML '''program</div><br />
<br />
<br />
|-<br />
| 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: Prerequisite <br />
<br />
<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;" | To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.<br />
<br />
<br />
If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.<br />
|-<br />
| style="border:0.5pt solid #000001;padding:0.106cm;" | Slide 4: <br />
<br />
System Requirements<br />
<br />
<br />
<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding:0.106cm;" | To record this tutorial, I’m using * <div style="margin-left:1.27cm;margin-right:0cm;">'''Ubuntu Linux 16.04 OS'''</div><br />
* <div style="margin-left:1.235cm;margin-right:0cm;">'''HTML 5'''</div><br />
* <div style="margin-left:1.235cm;margin-right:0cm;">'''gedit Text Editor '''and</div><br />
* <div style="margin-left:1.235cm;margin-right:0cm;">'''Firefox web browser'''</div><br />
<br />
<br />
<br />
<br />
<br />
However you may, use any other '''editor''' or '''browser''' of your choice.<br />
|-<br />
| 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<br />
| 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.<br />
<br />
<br />
Please download and extract them.<br />
|-<br />
| 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<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;">Now we will see how to create and run simple </span><span style="color:#000000;">'''HTML'''</span><span style="color:#000000;"> </span>p<span style="color:#000000;">rograms.</span><br />
<br />
<br />
<span style="color:#000000;">First open your text editor</span>.<span style="color:#000000;"> </span><br />
<br />
<br />
<span style="color:#000000;">I have already opened my </span>'''g<span style="color:#000000;">edit </span>T<span style="color:#000000;">ext </span>E<span style="color:#000000;">ditor.'''</span><br />
|-<br />
| 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:#0000ff;" | Note for video creator: Show the code already typed in for each line<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let us start to write our '''HTML''' code.<br />
<br />
<br />
For this demo, I have already written a code and will be explaining the same.<br />
<br />
<br />
<span style="background-color:#ffffff;">The same file is available in the </span><span style="background-color:#ffffff;">'''Code Files'''</span><span style="background-color:#ffffff;"> link, as mentioned earlier.</span><br />
|-<br />
| 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;" | <'''!DOCTYPE html'''><br />
| 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;">'''DOCTYPE html'''</div><br />
<br />
<br />
Each '''HTML''' document begins with '''DOCTYPE,''' before the actual '''HTML''' code starts.<br />
<br />
<br />
Here in the '''DOCTYPE tag, '''I have mentioned the '''type '''of the document as '''HTML'''. <br />
<br />
<br />
Make sure that, you have written the '''keyword DOCTYPE''' in capital letters.<br />
|-<br />
| 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;" | <'''html'''> … <'''/html'''><br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Next comes the '''html section''', which has our actual content.<br />
<br />
<br />
The '''HTML''' code has to be written between these two '''tags'''.<br />
|-<br />
| 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;" | '''<head> '''<br />
<br />
'''<title> Farmer's market </title>'''<br />
<br />
'''</head>'''<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | After the '''html tag, '''we have the '''head section.'''<br />
<br />
<br />
The '''head section''' contains the '''header information''' of the page like- * <div style="margin-left:1.27cm;margin-right:0cm;">Title, </div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Description, </div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Keywords and more.</div><br />
<br />
<br />
<br />
<br />
<br />
I have mentioned the '''title '''of this page as “'''Farmer's market'''” with the help of '''Title tag'''.<br />
|-<br />
| 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;" | <body><br />
<br />
<br />
<h1> Welcome to Farmer's Market </h1><br />
<br />
<br />
</body><br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | After the '''head''' section, comes the '''body section.'''<br />
<br />
<br />
The '''body section''' is the one which has the content to be displayed on the webpage. <br />
<br />
<br />
For this demo, I have written a welcome message, with the help of '''h1''' '''heading''' '''tag'''.<br />
|-<br />
| 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 indentation<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | While writing your '''HTML''' code, please use proper indentation.<br />
<br />
<br />
This will make the code neat and more readable.<br />
|-<br />
| 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;" | Our code is ready. So let’s save this file now.<br />
|-<br />
| 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'''<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | I’ll press '''Ctrl + S '''keys on my keyboard.<br />
<br />
<br />
The '''Save''' '''As''' dialog box opens.<br />
|-<br />
| 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;" | Select Desktop<br />
| 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;">Now choose the desired location to save your file.</div><br />
<br />
<br />
<span style="color:#000000;">I will select </span>'''D<span style="color:#000000;">esktop'''</span> on my machine.<br />
|-<br />
| 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;" | Create Folder →my-html<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Here I will create a folder with the help of “'''Create Folder'''” button and name it as '''my hyphen html'''.<br />
<br />
<br />
This folder will help me to organize my '''html''' files in a single location on my machine.<br />
|-<br />
| 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;" | Filename → MyFirstPage.html<br />
<br />
<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;" | I will save the name of the file as '''MyFirstPage.html'''<br />
<br />
<br />
Please note that the '''HTML''' files has to be saved with either '''.html''' or '''.htm''' extension.<br />
|-<br />
| 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;" | Click on '''Save'''<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Lastly, click on the '''Save''' button. <br />
<br />
<br />
Our file is saved now.<br />
|-<br />
| 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 Desktop → my-html folder >> double-click to open<br />
| 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 confirm this. <br />
<br />
<br />
Open the '''Desktop'''.<br />
<br />
<br />
Here is the folder '''my hyphen html''' which I had created. <br />
<br />
<br />
Double-click on it to see what it contains.<br />
|-<br />
| 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 html file<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | And here is<span style="color:#000000;"> our </span><span style="color:#000000;">'''html'''</span><span style="color:#000000;"> file.</span><br />
|-<br />
| 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;" | We have successfully created our '''HTML''' file and saved it.<br />
|-<br />
| 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;" | Now let’s see how to run it.<br />
|-<br />
| 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;" | Right-click >> select '''Open With'''<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Right-click on the file and select '''Open With '''option.<br />
|-<br />
| 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;" | Select '''Open With Firefox'''<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Then choose any web browser that is available. <br />
<br />
<br />
I will choose '''Firefox'''.<br />
<br />
<br />
This will open our '''HTML''' file in the '''Firefox''' web browser.<br />
|-<br />
| 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 the text <br />
<br />
Welcome to Farmer's Market<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | The<span style="color:#000000;"> webpage opens.</span><br />
<br />
<br />
But<span style="color:#000000;"> instead of our </span><span style="color:#000000;">'''HTML'''</span><span style="color:#000000;"> code, we see only the text which we mentioned inside the </span><span style="color:#000000;">'''body section.'''</span><br />
<br />
<br />
'''“Welcome to Farmer’s market.”'''<br />
|-<br />
| 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;" | Red box highlight on the '''Title''' of the browser<br />
| 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 browser’s title - it says '''Farmer's market'''.<br />
<br />
<br />
This is the text we had mentioned in the '''head section'''.<br />
|-<br />
| 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;" | On the webpage<br />
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | The browser interprets the '''tags''' we used and displays only the content.<br />
|-<br />
| 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;" | <div style="color:#000000;">This brings us to the end of this tutorial. </div><br />
<br />
<br />
<div style="color:#000000;">Let us summarize.</div><br />
|-<br />
| 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>6<span style="color:#000000;">: Summary </span><br />
| 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</div><br />
<br />
<br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Structure of an '''HTML''' document </div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Write a sample '''HTML''' program and</div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Save and run the program</div><br />
<br />
<br />
|-<br />
| 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 8: Assignment<br />
| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | As an assignment-* <div style="margin-left:1.27cm;margin-right:0cm;">Create '''MyHomePage.html''' using any '''text editor'''</div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Set the title as '''My Assignment'''</div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">It has to display “'''Welcome to my first html page'''”</div><br />
* <div style="margin-left:1.27cm;margin-right:0cm;">Open the '''HTML''' page in a web browser and see the output.</div><br />
<br />
<br />
|-<br />
| 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><br />
<br />
<div style="color:#000000;">About Spoken Tutorial project</div><br />
| 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.<br />
<br />
<br />
Please download and watch it.<br />
|-<br />
| 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>10<span style="color:#000000;">:</span><br />
<br />
<div style="color:#000000;">About Workshop</div><br />
| 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. <br />
<br />
<br />
And gives certificates on passing online tests.<br />
<br />
<br />
For more details, please write to us.<br />
|-<br />
| 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>1<span style="color:#000000;">:</span><br />
<br />
<div style="color:#000000;">Forum questions</div><br />
| 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;">Do you have questions in THIS Spoken Tutorial?</div><br />
<br />
<span style="color:#000000;">Please visit this site</span>.<br />
<br />
<div style="color:#000000;">Choose the minute and second where you have the question</div><br />
<br />
<div style="color:#000000;">Explain your question briefly</div><br />
<br />
<div style="color:#000000;">Someone from our team will answer them</div><br />
|-<br />
| 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>2<span style="color:#000000;">:</span><br />
<br />
<div style="color:#000000;">Forum for specific questions:</div><br />
<br />
<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;" | <div style="color:#000000;">The Spoken Tutorial forum is for specific questions on this tutorial.</div><br />
<br />
<div style="color:#000000;">Please do not post unrelated and general questions on them.</div><br />
<br />
<div style="color:#000000;">This will help reduce the clutter.</div><br />
<br />
<div style="color:#000000;">With less clutter, we can use these discussion as instructional material.</div><br />
|-<br />
| 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>3<span style="color:#000000;">:</span><br />
<br />
<div style="color:#000000;">Acknowledgement</div><br />
| 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.<br />
<br />
<br />
More information on this mission is available at<br />
<br />
this link.<br />
|-<br />
| 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 14: Thanks<br />
| 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.<br />
<br />
Thank you for joining<br />
|-<br />
|}</div>
Pravin1389