Difference between revisions of "HTML/C3/Doctype-and-Head-Section/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) (Created page with " {| border="1" |- || Time || Narration |- || 00:01 || Hello and welcome to the spoken tutorial on '''DOCTYPE''' and '''Head section''' in '''HTML'''. |- || 00:09 || In this...") |
(No difference)
|
Latest revision as of 15:42, 23 March 2020
| 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. |
