Title of the script: DOCTYPE and Header
Author: Praveen S
Domain Reviewer: M.Deivamani
Novice Reviewer: Madhulika G
Keywords: HTML, DOCTYPE, Title, Style, CSS, Java Script, Meta data, File Linking, Script, Base tag, Spoken Tutorial, Video Tutorial
|Slide: Introduction||Hello and welcome to the spoken tutorial on DOCTYPE and Head section in HTML.|
|Slide: Learning Objectives|| In this tutorial, we will learn about:
|Slide: System Requirements|| To record this tutorial, I’m using
However, you may use any other editor or browser of your choice.
|Slide: Code Files||
|Slide: DOCTYPE Syntax||
|Gedit: Mypage.html|| Let us have a look at this.
I have already opened the html file Mypage.html in a text editor.
|Highlight <!DOCTYPE html>|| Notice the 1st line of this document.
We have declared the DOCTYPE as html.
Now open this file in a web browser.
|Open Mypage.html in a browser|| I have opened this in a Firefox web browser.
The browser displays the formatted content inside the body tag.
But not the information about the page.
Let us check that.
|Firefox menu -> Tools|| Go to the Tools menu in the top.
Then select Page Info.
| Point to page Info dialog box
Point to File type
| A Page Info dialog box opens with the information about the page.
In the General tab, notice in the Type field, it says text/html.
Note: This Page Info option is available only in Firefox web browser.
This is not available in Google Chrome web browser.
|Close Page Info box.||Close the Page Info dialog box.|
|Only Narration||Next let us learn about the tags inside the Head section.|
|Slide: Head Section tags|| Inside the Head section we can use the following tags:
We will learn them one by one.
|gedit-> Mypage.html|| Switch to the text editor.
I will modify the code for this part of the demonstration.
| Add the following code inside the head section
alert("Welcome to Spoken Tutorial");
| I have updated the Head section with a few tags.
|Highlight title tag||We can set the title for a page with the help of title tag.|
|Highlight style tag||Using the Style tag we can set the styles for the elements.|
With this, we can incorporate the linked file properties into our current file.
But we cannot create a clickable link using this tag like an anchor tag.
| Highlight script tag
Highlight "Welcome to Spoken Tutorial"
Here I have written a simple script.
It gives an alert with this message when the page opens.
|Slide: Note: Script tag||
|Highlight meta tag|| Using the Meta tag, we can provide metadata like Author, Description and Keywords for the page.
This will be helpful when we search this page using a search engine.
Here I have provided the Author information and the Keywords for this page.
|Highlight base tag|| We can define the base URL for the page using the base tag.
We will learn this in detail, in a little while.
|Press Ctrl + S to save||Let us save the code now.|
|Firefox||Switch to the browser and refresh the page.|
|Point to the pop up window|| On doing so, we get a pop-up with the message - “Welcome to Spoken Tutorial”.
This means that the script tag has executed successfully.
Click on the OK button to close this pop-up.
|Point to the tab title|| In the browser’s tab, notice the text “Farmer’s market”.
We have mentioned this inside the title tag.
|Highlight the background color|| Also notice that our page has an Aquamarine background color.
But note that in the code of Mypage.html, I haven’t set any colour for the background.
So, how did the background of the page get set to Aquamarine?
|Point to the link tag in the code||This is because I have linked mystyle.css file using the link tag in Mypage.html file.|
|Open mystyle.css||Let’s open the file mystyle.css in a text editor.|
|Highlight the body tag in mystyle.css|| Here in mystyle.css file, I have set the background colour to Aquamarine.
And I have also set the text align as left for the body tag.
|Point to the link tag in Mypage.html||Therefore these style properties get incorporated in the HTML file.|
|Show browser|| That is why the background of the page is set to Aquamarine colour.
And the text get aligned to the left.
|Point to the red lines in the browser||Notice that some lines appear in red color in the browser window.|
|Highlight the style tag in Mypage.html||This is because, inside the style tag we have set the text color for the paragraph tag to red.|
|Point to meta tag in Mypage.html|| We have also given some metadata information in the code.
Here in the output, there is no trace of that.
As I mentioned earlier, this information is useful when we search a page in a search engine.
|Browser|| In the Firefox browser window, let us once again go to the Tools menu at the top.
And select the option Page Info.
|Point to Meta section in the Page Info dialog box|| The Page Info dialog box opens.
In the General tab, notice the meta information.
Here, we can see the meta information of Author and Keywords which we gave in the code.
|Close Page Info box.||Let’s close the Page Info dialog box.|
|Only narration||Next let us see what a base tag does.|
|Slide: base tag|| A website may have multiple sub-pages like-
|Slide: base tag|| The address for these will appear as shown.
In this case, the base URL mysite.com will be common.
|Slide: base tag||
|Only Narration|| With this we come to the end of this tutorial.
Let us summarise.
|Slide: Summary|| In this tutorial, we have learnt about:
|Slide: Assignment|| As an assignment-
|Slide 12: About Spoken Tutorial project|| The video at the following link summarizes the Spoken Tutorial project.
Please download and watch it.
|Slide 13: About Workshop|| The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us.
|Slide 14: Forum questions||Please post your timed queries in this forum.|
|Slide 15: Acknowledgement|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
More information on this mission is available at this link.
|Slide 16: Thanks|| This is Praveen from IIT Bombay signing off.
Thank you for joining.