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
| 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:
|
| 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
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-
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 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
|
| Slide 8: Assignment | As an assignment-
|
| 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 |
