Difference between revisions of "HTML/C2/My-first-HTML-program/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script: '''My first '''HTML''' program '''Author:''' Praveen S '''Domain Reviewer: '''M.Deivamani '''Novice Reviewer:''' Madhulika G '''Keywords: '''HTML,...")
 
 
(3 intermediate revisions by one other user not shown)
Line 9: Line 9:
 
'''Keywords: '''HTML, Introduction to HTML, Web Designing, Website, Spoken Tutorial, Video Tutorial
 
'''Keywords: '''HTML, Introduction to HTML, Web Designing, Website, Spoken Tutorial, Video Tutorial
  
 +
{| border=1
 +
|-
 +
|| '''Visual Cue'''
 +
|| '''Narration'''
  
 +
|-
 +
|| Slide 1: Title
 +
|| Hello and welcome to the Spoken Tutorial on “My first '''HTML''' program”.
  
−
{| style="border-spacing:0;width:16.986cm;"
 
 
|-
 
|-
−
| 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'''
+
|| Slide 2:
−
| 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'''
+
Learning Objectives
−
|-
+
|| In this tutorial we will learn:
−
| 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
+
* Structure of an '''HTML''' document  
−
| 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”.
+
* Write a sample '''HTML''' program
−
|-
+
* Save and run the '''HTML '''program
−
| 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>
+
−
 
+
−
<div style="color:#000000;">Learning Objectives</div>
+
−
| 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>
+
−
 
+
−
 
+
−
* <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>
+
−
* <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>
+
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Save and run the '''HTML '''program</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 3: Prerequisite  
+
|| Slide 3: Prerequisite  
 +
|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.
  
 +
If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.
  
−
 
−
| 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:0.5pt solid #000001;padding:0.106cm;" | Slide 4:  
+
|| Slide 4:  
−
 
+
 
System Requirements
 
System Requirements
 +
| To record this tutorial, I’m using
 +
* '''Ubuntu Linux 16.04 OS'''
 +
* '''HTML 5'''
 +
* '''gedit Text Editor '''and
 +
* '''Firefox web browser'''
  
 +
However you may, use any other '''editor''' or '''browser''' of your choice.
  
−
 
−
| 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>
 
−
* <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;color:#000000;" | Open Gedit
+
|| 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;" | <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>
+
||Now we will see how to create and run simple '''HTML''' programs.
  
 +
First open your text editor.
  
−
<span style="color:#000000;">First open your text editor</span>.<span style="color:#000000;"> </span>
+
I have already opened my '''gedit Text Editor.'''
  
−
 
−
<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>
 
 
|-
 
|-
−
| 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
+
||  
−
| 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.
+
|| Let us start to write our '''HTML''' code.
−
 
+
  
 
For this demo, I have already written a code and will be explaining the same.
 
For this demo, I have already written a code and will be explaining the same.
  
 +
The same file is available in the '''Code Files''' link, as mentioned earlier.
  
−
<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>
 
 
|-
 
|-
−
| 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'''>
+
|| <'''!DOCTYPE html'''>
−
| 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>
+
|| '''DOCTYPE html'''
−
 
+
  
 
Each '''HTML''' document begins with '''DOCTYPE,''' before the actual '''HTML''' code starts.
 
Each '''HTML''' document begins with '''DOCTYPE,''' before the actual '''HTML''' code starts.
−
 
  
 
Here in the '''DOCTYPE tag, '''I have mentioned the '''type '''of the document as '''HTML'''.  
 
Here in the '''DOCTYPE tag, '''I have mentioned the '''type '''of the document as '''HTML'''.  
−
 
  
 
Make sure that, you have written the '''keyword DOCTYPE''' in capital letters.
 
Make sure that, you have written the '''keyword DOCTYPE''' in capital letters.
 +
 
|-
 
|-
−
| 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'''>
+
|| <'''html'''> … <'''/html'''>
−
| 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.
+
|| Next comes the '''html section''', which has our actual content.
−
 
+
  
 
The '''HTML''' code has to be written between these two '''tags'''.
 
The '''HTML''' code has to be written between these two '''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;" | '''<head> '''
+
|| '''<head> '''
−
 
+
 
'''<title> Farmer's market </title>'''
 
'''<title> Farmer's market </title>'''
−
 
 
'''</head>'''
 
'''</head>'''
−
| 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.'''
+
|| After the '''html tag, '''we have the '''head section.'''
  
 +
The '''head section''' contains the '''header information''' of the page like-
 +
* Title,
 +
* Description,
 +
* Keywords and more.
  
−
The '''head section''' contains the '''header information''' of the page like- * <div style="margin-left:1.27cm;margin-right:0cm;">Title, </div>
+
I have mentioned the '''title '''of this page as “'''Farmer's market'''” with the help of '''Title tag'''.
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Description, </div>
+
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Keywords and more.</div>
+
  
−
 
−
 
−
 
−
 
−
I have mentioned the '''title '''of this page as “'''Farmer's market'''” with the help of '''Title 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;" | <body>
+
|| <body>
−
 
+
−
 
+
 
<h1> Welcome to Farmer's Market </h1>
 
<h1> Welcome to Farmer's Market </h1>
−
 
−
 
 
</body>
 
</body>
−
| 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.'''
+
|| After the '''head''' section, comes the '''body section.'''
−
 
+
  
 
The '''body section''' is the one which has the content to be displayed on the webpage.  
 
The '''body section''' is the one which has the content to be displayed on the webpage.  
−
 
  
 
For this demo, I have written a welcome message, with the help of '''h1''' '''heading''' '''tag'''.
 
For this demo, I have written a welcome message, with the help of '''h1''' '''heading''' '''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;" | Point to the indentation
+
|| Point to the indentation
−
| 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.
+
|| While writing your '''HTML''' code, please use proper indentation.
−
 
+
  
 
This will make the code neat and more readable.
 
This will make the code neat and more readable.
 +
 
|-
 
|-
−
| 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;" | Our code is ready. So let’s save this file now.
+
|| Our code is ready. So let’s save this file 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;" | 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;" | I’ll press '''Ctrl + S '''keys on my keyboard.
+
|| I’ll press '''Ctrl + S '''keys on my keyboard.
−
 
+
  
 
The '''Save''' '''As''' dialog box opens.
 
The '''Save''' '''As''' dialog box opens.
 +
 
|-
 
|-
−
| 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
+
|| Select Desktop
−
| 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>
+
|| Now choose the desired location to save your file.
  
 +
I will select '''Desktop''' on my machine.
  
−
<span style="color:#000000;">I will select </span>'''D<span style="color:#000000;">esktop'''</span> on my machine.
 
 
|-
 
|-
−
| 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
+
|| Create Folder →my-html
−
| 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'''.
+
|| Here I will create a folder with the help of “'''Create Folder'''” button and name it as '''my hyphen html'''.
−
 
+
  
 
This folder will help me to organize my '''html''' files in a single location on my machine.
 
This folder will help me to organize my '''html''' files in a single location on my machine.
−
|-
 
−
| 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
 
  
 +
Click on '''Create''' Button.
  
 +
|-
 +
|| Filename → MyFirstPage.html
 +
|| I will save the name of the file as '''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;" | I will save the name of the file as '''MyFirstPage.html'''
+
Please note that the '''HTML''' files has to be saved with either '''.html''' or '''.htm''' extension.
  
−
 
−
Please note that the '''HTML''' files has to be saved with either '''.html''' or '''.htm''' extension.
 
 
|-
 
|-
−
| 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'''
+
|| Click on '''Save'''
−
| 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.  
+
|| Lastly, click on the '''Save''' button.  
  
 +
Our file is saved now.
  
−
Our file is saved 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;" | Open Desktop → my-html folder >> double-click to open
+
|| Open Desktop → my-html folder >> double-click to open
−
| 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.  
+
|| Let’s confirm this.  
−
 
+
  
 
Open the '''Desktop'''.
 
Open the '''Desktop'''.
−
 
  
 
Here is the folder '''my hyphen html''' which I had created.  
 
Here is the folder '''my hyphen html''' which I had created.  
  
 +
Double-click on it to see what it contains.
  
−
Double-click on it to see what it contains.
 
 
|-
 
|-
−
| 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
+
|| Point to html file
−
| 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>
+
|| And here is our '''html''' 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;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;" | We have successfully created our '''HTML''' file and saved it.
+
|| We have successfully created our '''HTML''' file and saved 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;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 see how to run it.
+
|| Now let’s see how to run 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;" | Right-click >> select '''Open With'''
+
|| Right-click >> select '''Open With'''
−
| 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.
+
|| Right-click on the file and select '''Open With '''option.
 +
 
 
|-
 
|-
−
| 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'''
+
|| Select '''Open With Firefox'''
−
| 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.  
+
|| Then choose any web browser that is available.  
−
 
+
  
 
I will choose '''Firefox'''.
 
I will choose '''Firefox'''.
−
 
  
 
This will open our '''HTML''' file in the '''Firefox''' web browser.
 
This will open our '''HTML''' file in the '''Firefox''' web 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;" | Highlight the text
 
  
 +
|-
 +
|| Highlight the text
 
Welcome to Farmer's Market
 
Welcome to Farmer's Market
−
| 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>
+
|| The webpage opens.
−
 
+
−
 
+
−
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>
+
  
 +
But instead of our '''HTML''' code, we see only the text which we mentioned in the '''body section.'''
  
 
'''“Welcome to Farmer’s market.”'''
 
'''“Welcome to 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;" | Red box highlight on the '''Title''' of the browser
+
|| Red box highlight on the '''Title''' of the browser
−
| 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'''.
+
|| Notice the browser’s title - it says '''Farmer's market'''.
  
 +
This is the text we had mentioned in the '''head section'''.
  
−
This is the text we had mentioned in the '''head section'''.
 
 
|-
 
|-
−
| 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
+
|| On the webpage
−
| 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.
+
|| The browser interprets the '''tags''' we used and displays only the content.
 +
 
 
|-
 
|-
−
| 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;" | <div style="color:#000000;">This brings us to the end of this tutorial. </div>
+
|| This brings us to the end of this tutorial.
  
 +
Let us summarize.
  
−
<div style="color:#000000;">Let us summarize.</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>6<span style="color:#000000;">: Summary </span>
+
||Slide 6: 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</div>
+
|| In this tutorial, we have learnt
−
 
+
* Structure of an '''HTML''' document
−
 
+
* Write a sample '''HTML''' program and
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Structure of an '''HTML''' document </div>
+
* Save and run the program
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Write a sample '''HTML''' program and</div>
+
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Save and run the program</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 8: Assignment
+
|| Slide 8: Assignment
−
| 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>
+
|| As an assignment-
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Set the title as '''My Assignment'''</div>
+
* Create '''MyHomePage.html''' using any '''text editor'''
−
* <div style="margin-left:1.27cm;margin-right:0cm;">It has to display “'''Welcome to my first html page'''”</div>
+
* Set the title as '''My Assignment'''
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Open the '''HTML''' page in a web browser and see the output.</div>
+
* It has to display “'''Welcome to my first html page'''”
−
 
+
* Open the '''HTML''' page in a web browser and see 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;" | <span style="color:#000000;">Slide </span>9<span style="color:#000000;">:</span>
+
||Slide 9: 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 </span>10<span style="color:#000000;">:</span>
+
||Slide 10: About Workshop
−
 
+
|| The Spoken Tutorial Project team conducts workshops using spoken tutorials.  
−
<div style="color:#000000;">About Workshop</div>
+
−
| style="border-top:0.5pt solid #000001;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The&nbsp;Spoken Tutorial Project&nbsp;team </span>conducts workshops using spoken tutorials.  
+
−
 
+
  
 
And gives certificates on passing online tests.
 
And gives certificates on passing online tests.
  
 +
For more details, please write to us.
  
−
For more details, please write to us.
 
 
|-
 
|-
−
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="color:#000000;">Slide 1</span>1<span style="color:#000000;">:</span>
+
||Slide 11: Forum questions
 +
|| Do you have questions in THIS Spoken Tutorial?
  
−
<div style="color:#000000;">Forum questions</div>
+
Please visit this site.
−
| 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>
+
  
−
<span style="color:#000000;">Please visit this site</span>.
+
Choose the minute and second where you have the question
  
−
<div style="color:#000000;">Choose the minute and second where you have the question</div>
+
Explain your question briefly
  
−
<div style="color:#000000;">Explain your question briefly</div>
+
Someone from our team will answer them
  
−
<div style="color:#000000;">Someone from our team will answer them</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 1</span>2<span style="color:#000000;">:</span>
+
||Slide 12: Forum for specific questions:
 +
|| The Spoken Tutorial forum is for specific questions on this tutorial.
  
−
<div style="color:#000000;">Forum for specific questions:</div>
+
Please do not post unrelated and general questions on them.
  
 +
This will help reduce the clutter.
  
 +
With less clutter, we can use these discussion as instructional material.
  
−
| 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>
 
−
 
−
<div style="color:#000000;">Please do not post unrelated and general questions on them.</div>
 
−
 
−
<div style="color:#000000;">This will help reduce the clutter.</div>
 
−
 
−
<div style="color:#000000;">With less clutter, we can use these discussion as instructional material.</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 1</span>3<span style="color:#000000;">:</span>
+
||Slide 13: Acknowledgement
 +
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
  
−
<div style="color:#000000;">Acknowledgement</div>
+
More information on this mission is available at this link.
−
| 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
 
−
 
−
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 14: Thanks
+
|| Slide 14: 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
 +
 
|-
 
|-
 
|}
 
|}

Latest revision as of 08:41, 19 April 2018

Title of the script: My first HTML program

Author: Praveen S

Domain Reviewer: M.Deivamani

Novice Reviewer: Madhulika G

Keywords: HTML, Introduction to HTML, Web Designing, Website, Spoken Tutorial, Video Tutorial

Visual Cue Narration
Slide 1: Title Hello and welcome to the Spoken Tutorial on “My first HTML program”.
Slide 2:

Learning Objectives

In this tutorial we will learn:
  • Structure of an HTML document
  • Write a sample HTML program
  • Save and run the HTML program
Slide 3: Prerequisite To practise this tutorial, you should know to use any WYSIWYG or Text Editor and a Web Browser.

If not, then go through gedit Text Editor and Firefox tutorials on this website.

Slide 4:

System Requirements

To record this tutorial, I’m using
  • Ubuntu Linux 16.04 OS
  • HTML 5
  • gedit Text Editor and
  • Firefox web browser

However you may, use any other editor or browser of your choice.

Slide 5: Code Files The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

Open Gedit Now we will see how to create and run simple HTML programs.

First open your text editor.

I have already opened my gedit Text Editor.

Let us start to write our HTML code.

For this demo, I have already written a code and will be explaining the same.

The same file is available in the Code Files link, as mentioned earlier.

<!DOCTYPE html> DOCTYPE html

Each HTML document begins with DOCTYPE, before the actual HTML code starts.

Here in the DOCTYPE tag, I have mentioned the type of the document as HTML.

Make sure that, you have written the keyword DOCTYPE in capital letters.

<html> … </html> Next comes the html section, which has our actual content.

The HTML code has to be written between these two tags.

<head>

<title> Farmer's market </title> </head>

After the html tag, we have the head section.

The head section contains the header information of the page like-

  • Title,
  • Description,
  • Keywords and more.

I have mentioned the title of this page as “Farmer's market” with the help of Title tag.

<body>

Welcome to Farmer's Market

</body>

After the head section, comes the body section.

The body section is the one which has the content to be displayed on the webpage.

For this demo, I have written a welcome message, with the help of h1 heading tag.

Point to the indentation While writing your HTML code, please use proper indentation.

This will make the code neat and more readable.

Our code is ready. So let’s save this file now.
Press Ctrl + S I’ll press Ctrl + S keys on my keyboard.

The Save As dialog box opens.

Select Desktop Now choose the desired location to save your file.

I will select Desktop on my machine.

Create Folder →my-html Here I will create a folder with the help of “Create Folder” button and name it as my hyphen html.

This folder will help me to organize my html files in a single location on my machine.

Click on Create Button.

Filename → MyFirstPage.html I will save the name of the file as MyFirstPage.html

Please note that the HTML files has to be saved with either .html or .htm extension.

Click on Save Lastly, click on the Save button.

Our file is saved now.

Open Desktop → my-html folder >> double-click to open Let’s confirm this.

Open the Desktop.

Here is the folder my hyphen html which I had created.

Double-click on it to see what it contains.

Point to html file And here is our html file.
We have successfully created our HTML file and saved it.
Now let’s see how to run it.
Right-click >> select Open With Right-click on the file and select Open With option.
Select Open With Firefox Then choose any web browser that is available.

I will choose Firefox.

This will open our HTML file in the Firefox web browser.

Highlight the text

Welcome to Farmer's Market

The webpage opens.

But instead of our HTML code, we see only the text which we mentioned in the body section.

“Welcome to Farmer’s market.”

Red box highlight on the Title of the browser Notice the browser’s title - it says Farmer's market.

This is the text we had mentioned in the head section.

On the webpage The browser interprets the tags we used and displays only the content.
This brings us to the end of this tutorial.

Let us summarize.

Slide 6: Summary In this tutorial, we have learnt
  • Structure of an HTML document
  • Write a sample HTML program and
  • Save and run the program
Slide 8: Assignment As an assignment-
  • Create MyHomePage.html using any text editor
  • Set the title as My Assignment
  • It has to display “Welcome to my first html page”
  • Open the HTML page in a web browser and see the output.
Slide 9: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

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

And gives certificates on passing online tests.

For more details, please write to us.

Slide 11: Forum questions Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

Someone from our team will answer them

Slide 12: Forum for specific questions: The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussion as instructional material.

Slide 13: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

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

Thank you for joining

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C2/My-first-HTML-program/English&oldid=43043"