HTML/C2/Elements-Tags-Attributes-in-HTML/English
Title of the script: Elements and Attributes
Author: Praveen S
Domain Reviewer: M.Deivamani
Novice Reviewer: Madhulika G
Keywords: HTML, HTML Elements, HTML Tags, Tag Attributes, Web Designing, Web Site, Spoken Tutorial, Video Tutorial
Visual Cue | Narration |
Slide 1: Title | Welcome to the Spoken Tutorial on Elements, Tags and Attributes in HTML. |
Slide 2:
Learning Objectives
|
In this tutorial we will learn about:
in HTML using some examples. |
Slide 3:
Prerequisite
|
To practise this tutorial, you should know to use any WYSIWYG or Text Editor and a Web Browser.
|
Slide 4:
System Requirements |
To record this tutorial, I’m using * Ubuntu Linux 16.04 OS
However you may, use any other editor or browser of your choice. |
Slide 5: Code Files | The files used in this tutorial are available in the Code Files link on this tutorial page.
|
Slide 6a: HTML Elements | * HTML document contains a set of elements.
|
Slide 6b: HTML Elements | * Some elements don't require any content. These are called as Empty Elements.
|
Open MyFirstPage.html in gedit | Let us open our file MyFirstPage.html, which we created earlier.
|
Switch to gedit with MyFirstPage.html | We will now learn how elements are implemented.
|
<title> Farmer's market </title>
|
In this code, each line is an element.
|
<!DOCTYPE html> | See the first line <!DOCTYPE html>
|
Highlight the complete code | The whole program is an example of nested elements.
|
Next we will learn about tags. | |
Slide 7: HTML Tags
|
* The contents to be structured on the web are defined by tags.
tag name within angular brackets followed by the content and ending with forward slash tag name within angular brackets |
Slide 7: HTML Tags | * Each end tag contains a “/” (forward slash) before the tag name.
|
Open gedit | Switch back to the editor window. |
As mentioned earlier, an HTML program consists of tags. | |
Point to a few tags in the code | Notice here - each line of code contains a tag.
|
Highlight Welcome to Farmer's Market |
Here in this line, we have used h1 – heading tag.
|
Type
Buy the products directly from the farmers. |
Let me add a few more lines of code to this program.
|
Press Ctrl+S | Press Ctrl + S to save this change. |
|
I have written br – which is the break tag, without writing the end tag.
|
Let’s see the output on the browser. | |
Open MyFirstPage.html in Firefox | Switch to the folder where the file is saved.
|
Switch to gedit | Let’s switch back to the editor window. |
|
In the break tag, I will put a forward slash after the tag name.
|
Press Ctrl+S | Save the file once again. |
Switch to Firefox and refresh | Switch back to the web browser and refresh the page.
|
Now we will learn about tag attributes. | |
Slide 8: Attributes | * An attribute is additional information pertaining to an element.
open angular bracket tag name space attribute name equal to attribute value close angular bracket followed by the content and ending with forward slash tag name within angular brackets |
Slide 8a: Attributes
|
* Values containing spaces have to be entered within single or double quotes.
|
Slide 8b: Attributes
|
* Multiple attributes can be specified with the help of the semicolon separator.
|
Slide 9:
Common Attributes
|
Here are some common attributes.
|
Switch to gedit | Let’s switch back to our editor to try some of these.
|
Type: style="background-color:skyblue"
|
First we will add a sky-blue background to our webpage.
|
(text overlay while editing - HTML Color Notation) | The color value can also be declared in RGB or HTML notations.
|
We will learn more about style and it’s attributes in a later tutorial. | |
Type: title='Mumbai Farmer Market' |
In our code, we will add one more attribute called title.
title='Mumbai Farmer Market' |
Press Ctrl+S | Now save the file by pressing Ctrl + S keys. |
Switch to Firefox and refresh | Then switch to the browser and refresh the page.
|
Point to the background | The background color of the page is now set to sky-blue. |
Hover the mouse Point | Hover the mouse on the text “Buy the products directly from the farmers.”
|
Switch to gedit |
This is how the attributes work.
|
Quotes are important while declaring the value of the attributes. | |
Point to style and title | Notice here - The values of the attributes style and title, are mentioned within quotes. |
Slide 10:
|
Values that contain more than one word, can be declared within single or double quotes.
|
Delete end quotes of title |
Let’s try it out.
|
Press Ctrl+S | Save the file. |
Switch to Firefox and refresh | Then switch to the browser and refresh the page. |
Point to the area | Notice that the line - “Buy the products directly from the farmers” is missing now. |
Switch to gedit >>Press Ctrl + Z | Switch back to the editor and undo the changes. |
Now, let’s try something else.
| |
Change as per narration | Let’s change Mumbai Farmer market to Mumbai Farmer's Market. |
Press Ctrl+S | Save the file. |
Switch to Firefox and refresh | Then switch to Firefox and refresh the page. |
Notice the tooltip. | |
Compare with the editor window to show the difference in the words | It says “Mumbai Farmer”, but inside the code we had written “Farmer's” |
Switch to gedit | Let’s switch back to the code. |
Change to double quotes | Instead of single quote, use double quotes for the title’s value . |
The standard rule is-
| |
Press Ctrl+S | Now save the file once again. |
Switch to Firefox and refresh | Then switch to Firefox and refresh the page to see the output now.
|
With this we come to the end of this tutorial.
| |
Slide 11: Summary | In this tutorial, we have learnt about-
|
Slide 12: Assignment | As an assignment-
|
Slide 13:
About Spoken Tutorial project
|
The video at the following link summarises the Spoken Tutorial project.
|
Slide 14:
About Workshop
|
The Spoken Tutorial Project team conducts workshops using spoken tutorials.
|
Slide 15:
Forum questions
|
Please post your timed queries in this forum. |
Slide 16:
Acknowledgement
|
Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
this link. |
Slide 17: Thanks | This is Praveen from IIT Bombay signing off.
Thank you for joining |