HTML/C2/My-first-HTML-program/English

From Script | Spoken-Tutorial
Revision as of 11:03, 17 April 2018 by Pravin1389 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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

Note for video creator: Show the code already typed in for each line 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.

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

Contributors and Content Editors

Nancyvarkey, Pravin1389

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