HTML/C2/Elements-Tags-Attributes-in-HTML/English

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

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 Hello and welcome to the Spoken Tutorial on Elements, Tags and Attributes in HTML.
Slide 2: Learning Objectives In this tutorial we will learn about:
  • Elements
  • Tags
  • Attributes

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.

If not, then go through gedit Text Editor and Firefox tutorials on this website.

Slide 4: System Requirements To record this tutorial, I’m using
  • Ubuntu Linux 16.04 OS
  • HTML 5
  • gedit Text Editor and
  • Firefox web browser

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.

Please download and extract them.

Slide 6a: HTML Elements
  • HTML document contains a set of elements.
  • Each element consists of some content between tags.
Slide 6b: HTML Elements
  • Some elements don't require any content.

These are called as Empty Elements.

  • We can also have Nested Elements.
Open MyFirstPage.html in gedit Let us open our file MyFirstPage.html, which we created earlier in gedit Text Editor.

The same is available in the Code Files link.

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.

Have a look at the title.

You can see that this element contains start and end tag along with the content.

<!DOCTYPE html> See the first line DOCTYPE html

Notice that this element doesn't have an end tag or any content.

This is called an empty element.

Highlight the complete code The whole program is an example of nested elements.

html tag is an element with a start and an end tag.

Inside this, we have other elements.

Next we will learn about tags.
Slide 7: HTML Tags
  • The contents to be structured on the web are defined by tags
  • Tags are written in between angular brackets
  • Most of the tags will have a start and an end
  • Syntax of a tag is:

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.
  • There are some tags which don't require an end tag.
  • HTML tags are not case sensitive.
  • However, it is advisable touse lower-case.
Open gedit Switch back to the editor window.
Point to a few tags in the code Notice here - each line of code contains a tag.

We have used various tags in this program.

Also notice that all the tags are written in lower-case.

Highlight

Welcome to Farmer's Market

 		Here in this line, we have used h1 – heading tag.

The name of the tag is written between the left and right angular brackets.

And here, the end tag is the same as the starting tag.

But it has a forward slash before the tag name.

Type


Buy the products directly from the farmers.

Let me add a few more lines of code to this program.

Next to the welcome message, type the following code.

Press Ctrl+S Press Ctrl and S to save this change.

I have written br – which is the break tag, without writing the end tag.

This tag provides a line break and it doesn't require an end tag.

Let us see the output on the browser.
Open MyFirstPage.html in Firefox Switch to the folder where the file is saved.

Right-click and open with your preferred web browser.

Observe the change in the content that is displayed.

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.

This is called as Self-closing tag.

Press Ctrl+S Save the file.
Switch to Firefox and refresh Switch back to the web browser and refresh the page.

There is no change in the output.

Now we will learn about tag attributes.
Slide 8: Attributes
  • An attribute is additional information pertaining to an element.
  • It is written inside the starting tag.
  • Each attribute is declared by name – value pair separated by equal to symbol.
  • The syntax is:

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 a single or double quotes.
  • The syntax is as shown here
Slide 8b: Attributes
  • Multiple attributes can be specified with the help of the semicolon separator.
  • The syntax is as shown here.
Slide 9: Common Attributes Here are some common attributes.
  • title: to display the tooltip
  • href: link specification
  • id: is the unique identifier of an element
  • class: to classify the elements in a similar manner, mostly for better presentation
  • style: to define a specific style for an element
Switch to gedit Let us switch back to our editor to try some of these.

We will look at some basic attributes and how they work.

Type: style="background-color:skyblue" First we will add a sky-blue background to our webpage.

To do that, let’s set the background color using style attribute to the body tag.

So inside the body tag, type, style equal to within double quotes background hyphen color colon skyblue

(text overlay while editing - HTML Color Notation) The color value can also be declared in RGB or HTML notations.

The HTML Color notation for sky-blue is #87CEEB.

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.

Inside the p – that is paragraph tag, type

title equal to within single quote Mumbai Farmer Market

Press Ctrl+S Now save the file by pressing Ctrl and S keys.
Switch to Firefox and refresh Switch to the browser and refresh the page.

Observe the changes.

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.”

Notice the tooltip - it says “Mumbai Farmer Market”.

Switch to gedit This is how the attributes work.

Switch back to the editor window.

Quotes are important while declaring the value of the attribute.
Point to style and title Notice here - The values of the attributes style and title, are mentioned within quotes.
Slide 10: Quotes Values that contain more than one word, can be declared within single or double quotes.

It is mandatory to close the quotes, else the attribute won't be applied.

Delete end quotes of title Let’s try it out.

Switch back to the editor

Delete the end quotes of the title attribute.

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.

What if we put a quote inside the attribute?

Change as per narration Let’s change the Mumbai Farmer market to Mumbai Farmer's Market.
Press Ctrl+S Save the file.
Switch to Firefox and refresh Then switch to the browser 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 quote for the title’s value .
The standard rule is-
  • if we are using a particular quote inside the value,
  • then use the other quote to declare the value.
Press Ctrl+S Now save the file once again.
Switch to Firefox and refresh Then switch to the browser and refresh the page to see the output now.

It worked!

With this we come to the end of this tutorial.

Let’s summarise.

Slide 11: Summary In this tutorial, we have learnt about-
  • Elements
  • Tags – Pair tags and Self Closing Tags
  • Declaration of attributes
  • Single and Double quoted attributes
Slide 12: Assignment As an assignment-
  • Open the file MyHomePage.html which you created in an earlier assignment.
  • Set the background of the page to yellow.
  • Write two paragraphs with p tag.
  • Create a line break between the two paragraphs.
  • Set the title for the first paragraph as “It’s my first paragraph”.
  • Open the html page in a web browser and see the output.
Slide 13: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide 14: About Workshop The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

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.

More information on this mission is available at this link.

Slide 17: Thanks This is Praveen from IIT Bombay signing off.

Thank you for joining

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C2/Elements-Tags-Attributes-in-HTML/English&oldid=43044"