PoojaMoolya at 10:43, 19 March 2020

2020-03-19T10:43:05Z

PoojaMoolya: Created page with "{| border=1 |- || '''Time''' || '''Narration''' |- || 00:01 || Hello and welcome to the Spoken Tutorial on “My first '''HTML''' program”. |- || 00:07 || In this tutorial..."

2020-03-19T06:50:30Z

Created page with "{| border=1 |- || '''Time''' || '''Narration''' |- || 00:01 || Hello and welcome to the Spoken Tutorial on “My first '''HTML''' program”. |- || 00:07 || In this tutorial..."

New page

{| border=1
|-
|| '''Time'''
|| '''Narration'''

|-
|| 00:01
|| Hello and welcome to the Spoken Tutorial on “My first '''HTML''' program”.

|-
|| 00:07
|| In this tutorial we will learn:

Structure of an '''HTML''' document

|-
|| 00:13
|| Write a sample '''HTML''' program

|-
||00:16
|| Save and run the '''HTML '''program

|-
||00:20
|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.

|-
||00:29
|| If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.

|-
|| 00:37
||To record this tutorial, I’m using

'''Ubuntu Linux 16.04 Operating System'''

|-
||00:44
|| '''HTML 5'''

|-
||00:46
|| '''gedit Text Editor '''and '''Firefox web browser'''

|-
||00:51
|| However you may, use any other '''editor''' or '''browser''' of your choice.

|-
|| 00:57
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.

|-
||01:04
|| Please download and extract them.

|-
|| 01:07
||Now we will see how to create and run simple '''HTML''' programs.

|-
||01:13
|| First open your text editor.

|-
|| 01:16
|| I have already opened my '''gedit Text Editor.'''

|-
|| 01:20
|| Let us start to write our '''HTML''' code.

|-
||01:24
|| For this demo, I have already written a code and will be explaining the same.

|-
||01:30
|| The same file is available in the '''Code Files''' link, as mentioned earlier.

|-
|| 01:36
|| '''DOCTYPE html'''

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

|-
||01:45
|| Here in the '''DOCTYPE tag, '''I have mentioned the '''type '''of the document as '''HTML'''.

|-
||01:52
|| Make sure that, you have written the '''keyword DOCTYPE''' in capital letters.

|-
|| 01:58
|| Next comes the '''html section''', which has our actual content.

|-
||02:03
|| The '''HTML''' code has to be written between these two '''tags'''.

|-
|| 02:08
|| After the '''html tag, '''we have the '''head section.'''

|-
||02:12
|| The '''head section''' contains the '''header information''' of the page like-

Title, Description, Keywords and more.

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

|-
|| 02:28
|| After the '''head''' section, comes the '''body section.'''

|-
||02:32
|| The '''body section''' is the one which has the content to be displayed on the webpage.

|-
||02:38
|| For this demo, I have written a welcome message, with the help of '''h1''' '''heading''' '''tag'''.

|-
|| 02:44
|| While writing your '''HTML''' code, please use proper indentation.

This will make the code neat and more readable.

|-
|| 02:53
|| Our code is ready. So let’s save this file now.

|-
||02:57
|| I’ll press '''Ctrl + S '''keys on my keyboard.

The '''Save''' '''As''' dialog box opens.

|-
|| 03:05
|| Now choose the desired location to save your file.

|-
||03:09
|| I will select '''Desktop''' on my machine.

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

|-
||03:22
|| This folder will help me to organize my '''html''' files in a single location on my machine.

Click on '''Create''' Button.

|-
|| 03:32
|| I will save the name of the file as '''MyFirstPage.html'''

|-
||03:38
|| Please note that the '''HTML''' files has to be saved with either '''.html''' or '''.htm''' extension.

|-
|| 03:47
|| Lastly, click on the '''Save''' button.

Our file is saved now.

|-
|| 03:52
|| Let’s confirm this.

Open the '''Desktop'''.

|-
||03:56
|| Here is the folder '''my hyphen html''' which I had created.

|-
||04:01
|| Double-click on it to see what it contains.

|-
|| 04:05
|| And here is our '''html''' file.

|-
|| 04:08
|| We have successfully created our '''HTML''' file and saved it.

|-
|| 04:13
|| Now let’s see how to run it.

|-
|| 04:16
|| Right-click on the file and select '''Open With '''option.

|-
|| 04:20
|| Then choose any web browser that is available.

I will choose '''Firefox'''.

|-
||04:27
|| This will open our '''HTML''' file in the '''Firefox''' web browser.

|-
|| 04:32
|| The webpage opens.

|-
||04:35
|| But instead of our '''HTML''' code, we see only the text which we mentioned in the '''body section.'''

'''“Welcome to Farmer’s market.”'''

|-
|| 04:45
|| Notice the browser’s title - it says '''Farmer's market'''.

|-
||04:50
|| This is the text we had mentioned in the '''head section'''.

|-
|| 04:54
|| The browser interprets the '''tags''' we used and displays only the content.

|-
|| 05:00
|| This brings us to the end of this tutorial.

Let us summarize.

|-
|| 05:05
|| In this tutorial, we have learnt

Structure of an '''HTML''' document

|-
||05:11
|| Write a sample '''HTML''' program and

Save and run the program

|-
|| 05:17
|| As an assignment-

Create '''MyHomePage.html''' using any '''text editor'''

|-
||05:24
|| Set the title as '''My Assignment'''

|-
||05:27
|| It has to display “'''Welcome to my first html page'''”

|-
||05:32
|| Open the '''HTML''' page in a web browser and see the output.

|-
||05:37
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

|-
||05:45
|| The Spoken Tutorial Project team conducts workshops using spoken tutorials.

And gives certificates on passing online tests.

|-
||05:54
|| For more details, please write to us.

|-
||05:58
|| Do you have questions in THIS Spoken Tutorial?

Please visit this site.

|-
||06:03
|| Choose the minute and second where you have the question

Explain your question briefly

|-
||06:10
|| Someone from our team will answer them

|-
||06:14
|| The Spoken Tutorial forum is for specific questions on this tutorial.

|-
||06:19
|| Please do not post unrelated and general questions on them.

This will help reduce the clutter.

|-
||06:27
|| With less clutter, we can use these discussion as instructional material.

|-
||06:33
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

|-
|| 06:39
|| This is Praveen from IIT Bombay signing off.

Thank you for joining

|-
|}

@@ Line 322: / Line 322: @@
 |-
 ||06:33
-|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
+|| Spoken Tutorial Project is funded by MHRD, Government of India.
 |-

HTML/C2/My-first-HTML-program/English-timed - Revision history

PoojaMoolya at 10:43, 19 March 2020

PoojaMoolya: Created page with "{| border=1 |- || '''Time''' || '''Narration''' |- || 00:01 || Hello and welcome to the Spoken Tutorial on “My first '''HTML''' program”. |- || 00:07 || In this tutorial..."