HTML/C2/My-first-HTML-program/English-timed
From Script | Spoken-Tutorial
Revision as of 16:13, 19 March 2020 by PoojaMoolya (Talk | contribs)
| 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 MHRD, Government of India. |
| 06:39 | This is Praveen from IIT Bombay signing off.
Thank you for joining |
