View source for HTML/C2/My-first-HTML-program/English

'''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

{| border=1
|-
|| '''Visual Cue'''
|| '''Narration'''

|-
|| Slide 1: Title
|| 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>
<h1> Welcome to Farmer's Market </h1>
</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.

|-
|| 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 inside 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

|-
|}