Difference between revisions of "HTML/C3/Doctype-and-Head-Section/English"
Pravin1389 (Talk | contribs) (Created page with ".") |
Pravin1389 (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | . | + | '''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 | ||
+ | |||
+ | |||
+ | {| border="1" | ||
+ | |- | ||
+ | || Visual Cue | ||
+ | || Narration | ||
+ | |- | ||
+ | || 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: | ||
+ | |||
+ | * '''DOCTYPE '''and | ||
+ | * The '''tags''' inside the '''Head section '''in '''HTML''' | ||
+ | |||
+ | |- | ||
+ | || Slide: Prerequisite | ||
+ | || | ||
+ | * To practice this tutorial, you should have basic knowledge of '''HTML'''. | ||
+ | * If not, then go through the corresponding''' '''tutorials on this website. | ||
+ | |||
+ | |- | ||
+ | || Slide: System Requirements | ||
+ | || To record this tutorial, I’m using | ||
+ | |||
+ | * '''Ubuntu Linux 16.04 OS''' | ||
+ | * '''HTML5''' | ||
+ | * '''gedit Text Editor '''and | ||
+ | * '''Firefox web browser''' | ||
+ | |||
+ | However, you may use any other '''editor''' or '''browser''' of your choice. | ||
+ | |- | ||
+ | || Slide: Code Files | ||
+ | || | ||
+ | |||
+ | * The files used in this tutorial are available in the '''Code Files''' link on this tutorial page. | ||
+ | * Please download and extract them. | ||
+ | |||
+ | |- | ||
+ | || Slide: DOCTYPE | ||
+ | || | ||
+ | |||
+ | * Every '''HTML''' document must begin with the '''DOCTYPE''' declaration. | ||
+ | * '''DOCTYPE''' tells the browser about the '''type''' of the document we are using. | ||
+ | |||
+ | |- | ||
+ | || Slide: DOCTYPE Syntax | ||
+ | || | ||
+ | |||
+ | * This is the syntax | ||
+ | * For '''HTML5''' we have to type '''DOCTYPE html''' | ||
+ | * The word '''DOCTYPE''' has to be written in capital letters. | ||
+ | |||
+ | |- | ||
+ | || 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''': | ||
+ | |||
+ | * '''Title''' | ||
+ | * '''Style''' | ||
+ | * '''Meta''' | ||
+ | * '''Link''' | ||
+ | * '''Script''' | ||
+ | * '''Base''' | ||
+ | |||
+ | 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 | ||
+ | |||
+ | |||
+ | <style> | ||
+ | |||
+ | p { | ||
+ | |||
+ | color:red; | ||
+ | |||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | <link rel="stylesheet" href="mystyle.css"> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | alert("Welcome to Spoken Tutorial"); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <meta name="Author" content="Praveen S"> | ||
+ | |||
+ | |||
+ | <meta name="Keywords" content="HTML, Spoken Tutorial, Video Tutorial"> | ||
+ | |||
+ | |||
+ | <base href="farmers-market.in" target="_blank"> | ||
+ | || I have updated the '''Head section''' with a few '''tags'''. | ||
+ | |||
+ | |||
+ | Pause the video and update your code as shown here. | ||
+ | |||
+ | |||
+ | Now, let us go through them one by one. | ||
+ | |- | ||
+ | || 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'''. | ||
+ | |- | ||
+ | || Highlight link tag | ||
+ | || We can link other files like '''css, javascript, html''' in our file using the '''link tag'''. | ||
+ | |||
+ | 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" | ||
+ | || Using the '''script tag''', we can write some '''scripts''' like '''javascript,''' to perform some action. | ||
+ | |||
+ | Here I have written a simple '''script'''. | ||
+ | |||
+ | It gives an '''alert''' with this message when the page opens. | ||
+ | |- | ||
+ | || Slide: Note: Script tag | ||
+ | || | ||
+ | * It is not mandatory to write the '''script tag''' inside the''' Head section'''. | ||
+ | * We can also write it elsewhere in the '''body section'''. | ||
+ | |||
+ | |- | ||
+ | || 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- | ||
+ | |||
+ | * '''Home''' | ||
+ | * '''About us''' | ||
+ | * '''Contact''' | ||
+ | |- | ||
+ | || 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 | ||
+ | || | ||
+ | |||
+ | * We can use the '''base tag''' to define the '''base URL '''for the '''site '''or its content. | ||
+ | * This is the syntax | ||
+ | * And here is an example | ||
+ | |||
+ | |- | ||
+ | || Only Narration | ||
+ | || With this we come to the end of this tutorial. | ||
+ | |||
+ | Let us summarise. | ||
+ | |- | ||
+ | || Slide: Summary | ||
+ | || In this tutorial, we have learnt about: | ||
+ | |||
+ | * '''DOCTYPE''' | ||
+ | * '''Title''' | ||
+ | * '''Style''' | ||
+ | * '''Meta''' | ||
+ | * '''Link''' | ||
+ | * '''Script '''and | ||
+ | * '''Base tags''' in '''HTML.''' | ||
+ | |||
+ | |- | ||
+ | || Slide: Assignment | ||
+ | || As an assignment- | ||
+ | |||
+ | * Open the file '''MyHomePage.html''' which you created earlier. | ||
+ | * Create an '''alert''' with the message, “'''Welcome to My page'''”. | ||
+ | * Add the '''author''' information and '''keywords''' to your page. | ||
+ | |||
+ | |- | ||
+ | || 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. | ||
+ | |- | ||
+ | |} |
Latest revision as of 16:27, 16 May 2019
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
Visual Cue | Narration |
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: Prerequisite |
|
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 |
|
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
p { color:red; } </style>
alert("Welcome to Spoken Tutorial"); </script>
|
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. |
Highlight link tag | We can link other files like css, javascript, html in our file using the link tag.
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" |
Using the script tag, we can write some scripts like javascript, to perform some action.
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. |