HTML/C3/Doctype-and-Head-Section/English-timed

From Script | Spoken-Tutorial
Jump to: navigation, search
Time Narration
00:01 Hello and welcome to the spoken tutorial on DOCTYPE and Head section in HTML.
00:09 In this tutorial, we will learn about:

DOCTYPE and

00:14 The tags inside the Head section in HTML
00:20 To practice this tutorial, you should have basic knowledge of HTML.
00:26 If not, then go through the corresponding tutorials on this website.
00:32 To record this tutorial, I’m using

Ubuntu Linux 16.04 OS

HTML5

00:42 gedit Text Editor and Firefox web browser
00:48 However, you may use any other editor or browser of your choice.
00:55 The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

01:05 Every HTML document must begin with the DOCTYPE declaration.
01:11 DOCTYPE tells the browser about the type of the document we are using.
01:17 This is the syntax
01:21 For HTML5 we have to type DOCTYPE html
01:27 The word DOCTYPE has to be written in capital letters.
01:32 Let us have a look at this.
01:35 I have already opened the html file Mypage.html in a text editor.
01:42 Notice the 1st line of this document.
01:45 We have declared the DOCTYPE as html.
01:49 Now open this file in a web browser.
01:53 I have opened this in a Firefox web browser.
01:58 The browser displays the formatted content inside the body tag.
02:03 But not the information about the page.

Let us check that.

02:09 Go to the Tools menu in the top.

Then select Page Info.

02:15 A Page Info dialog box opens with the information about the page.
02:21 In the General tab, notice in the Type field, it says text/html.
02:29 Note: This Page Info option is available only in Firefox web browser.
02:36 This is not available in Google Chrome web browser.
02:40 Close the Page Info dialog box.
02:44 Next let us learn about the tags inside the Head section.
02:49 Inside the Head section we can use the following tags:
02:54 Title, Style, Meta
03:00 Link, Script, Base
03:05 We will learn them one by one.
03:08 Switch to the text editor.

I will modify the code for this part of the demonstration.

03:16 I have updated the Head section with a few tags.
03:20 Pause the video and update your code as shown here.
03:25 Now, let us go through them one by one.
03:30 We can set the title for a page with the help of title tag.
03:35 Using the Style tag we can set the styles for the elements.
03:40 We can link other files like css, javascript, html in our file using the link tag.
03:49 With this, we can incorporate the linked file properties into our current file.
03:56 But we cannot create a clickable link using this tag like an anchor tag.
04:02 Using the script tag, we can write some scripts like javascript, to perform some action.
04:09 Here I have written a simple script.

It gives an alert with this message when the page opens.

04:17 It is not mandatory to write the script tag inside the Head section.
04:22 We can also write it elsewhere in the body section.
04:27 Using the Meta tag, we can provide metadata like Author, Description and Keywords for the page.
04:36 This will be helpful when we search this page using a search engine.
04:42 Here I have provided the Author information and the Keywords for this page.
04:49 We can define the base URL for the page using the base tag.

We will learn this in detail, in a little while.

04:58 Let us save the code now.
05:01 Switch to the browser and refresh the page.
05:05 On doing so, we get a pop-up with the message - “Welcome to Spoken Tutorial”.
05:11 This means that the script tag has executed successfully.
05:16 Click on the OK button to close this pop-up.
05:21 In the browser’s tab, notice the text “Farmer’s market”.
05:26 We have mentioned this inside the title tag.
05:30 Also notice that our page has an Aquamarine background color.
05:36 But note that in the code of Mypage.html, I haven’t set any colour for the background.
05:44 So, how did the background of the page get set to Aquamarine?
05:49 This is because I have linked mystyle.css file using the link tag in Mypage.html file.
05:58 Let’s open the file mystyle.css in a text editor.
06:04 Here in mystyle.css file, I have set the background colour to Aquamarine.
06:11 And I have also set the text align as left for the body tag.
06:17 Therefore these style properties get incorporated in the HTML file.
06:24 That is why the background of the page is set to Aquamarine .

And the text get aligned to the left.

06:32 Notice that some lines appear in red color in the browser window.
06:38 This is because, inside the style tag we have set the text color for the paragraph tag to red.
06:46 We have also given some metadata information in the code.

Here in the output, there is no trace of that.

06:55 As I mentioned earlier, this information is useful when we search a page in a search engine.
07:03 In the Firefox browser window, let us once again go to the Tools menu at the top.

And select the option Page Info.

07:13 The Page Info dialog box opens.
07:17 In the General tab, notice the meta information.
07:21 Here, we can see the meta information of Author and Keywords which we gave in the code.
07:29 Let’s close the Page Info dialog box.
07:33 Next let us see what a base tag does.
07:37 A website may have multiple sub-pages like-

Home, About us, Contact

07:45 The address for these will appear as shown.
07:49 In this case, the base URL mysite.com will be common.
07:55 We can use the base tag to define the base URL for the site or its content.
08:02 This is the syntax
08:06 And here is an example
08:10 With this we come to the end of this tutorial.

Let us summarise.

08:16 In this tutorial, we have learnt about:

DOCTYPE, Title, Style

08:22 Meta, Link, Script and Base tags in HTML.
08:30 As an assignment-

Open the file MyHomePage.html which you created earlier.

08:38 Create an alert with the message, “Welcome to My page”.
08:43 Add the author information and keywords to your page.
08:48 The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it.

08:57 The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

09:06 Please post your timed queries in this forum.
09:10 Spoken Tutorial Project is funded by MHRD, Government of India.
09:16 This is Praveen from IIT Bombay signing off.

Thank you for joining.

Contributors and Content Editors

PoojaMoolya