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

From Script | Spoken-Tutorial
Jump to: navigation, search

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:
  • 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.

Contributors and Content Editors

Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C3/Doctype-and-Head-Section/English&oldid=47491"