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

From Script | Spoken-Tutorial
Jump to: navigation, search
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

Contributors and Content Editors

PoojaMoolya