Hey Steemit !

Welcome to the HTML Language Course , this tutorial by @aymenz we mentioned in previous lessons the elements of HTML part 1 and 2 ' Heading , Paragraph, Image, links and comments ' today we will talk about the Attributes of those elements and the elements of Head , like I mentioned we have many version in HTML language but we will learn the last version just follow me and follow my courses , if you have any questions just put them in comment and I will reply ..

Suggested lessons to watch :

 Course #01 in HTML language Introduction Become Web Designer

Course #02 in HTML language Elements Part 1 Become Web Designer

 Course #03 in HTML language Elements Part 2 Become Web Designer

and today we are in the fourth lesson , let's start !

-------------------------------------------------------------------------------------------------------------------

1-The Attributes :

 Attributes provide additional information about HTML elements Some elements in the language contain attributes example : 

< a href='https://steemit.com'>Steemit</a> the 'href' is an Attribute it's the resource or the place where the client will go so it called attributes , we have many type of attributes and there are element can have attributes and some elements can't take attributes  usually  the attributes be in this format name = ' ..... ' and it will take the value like link or anything depend the attribute , example of attributes :

• src in image like : < img src=' steemit.png ' />
• class is an attribute like : < div class='nameClass' >here the contain</div>
• id also is an attribute : <span id='nameId'>here the span</span>

I mean that we have many type in our elements we can use all them depend the element like the image can take the name, class , id , alt , src .. Like the ' input ' can take name, id , class , placeholder, type ..etc .

We have the attribute ' title ' like : < p title='this is normal paragraph ' >Here the paragraph</p> when we move the mouse on this paragraph will appear title , look at the picture : 

Just when you move the mouse on the paragraph will appear the title look at the result :

- We have also an important attribute is the ' lang ' we can declare it in the HTML tag like it < html lang='en' >  declaring a language is important for accessibility applications (screen readers) and search engines, the first two letters mean the language we have ' fr , ar , en ' and the second mean the dialect like : < html lang='en-US' > is the English from US  .

The width and Height Attributes : we can use the width and height in the picture for example but when we use the CSS language it's easy to modify the size attributes from Css .

Note : 

Attributes are always specified in the start tag.

-------------------------------------------------------------------------------------------------------------------

2-The Elements Of Head:

We will talk about the elements of the page header, the correct way to write all the elements and tags, and to make your site world-class , we have in the head some elements like the options of the page it means the parametres Things that control the page let's start ..

The Meta Tag : 

The meta have many type I will mention the important type because we have many type of meta we will use some of it not all just to know this tag you will be able to search and find the types and depth ..

• < meta charset='utf-8' /> : This tag specifies the page encoding. There are several universal language encodings which supports all languages properly and without grammatical or water problems .
• < meta name='description' content='  ' /> : The name of meta is description so you will describe your website in the content for example you have created Medical site so you can describe your site in the content you can put for example : Medicine, diagnosis ..etc anything you want to describe the services of your website or your page , if someone searched about word and this word in the content of your description your website will appear in google , look !

This is the description 'Steemit is a social media .........' if we look at the source code of Steemit we can find this description in the meta :    as you have seen this is the meta description and content ..

The other Tags : ( Title , Style ) : 

• < title>The title of you website </title> : We have in the head the title of your website that's normal you write the title and it will appear on the tab like : Steemit , Facebook , Twitter ..etc , and will appear in google or any page of research.          
• < style> </style> : This tag Special for the Css codes we will talk about this tag in the course of Css but today just we want to know that we have this tag in the head example : < style> h1{ color:red } </style> this is example I gave the red color to the heading h1 in the tag style , I sad it's not our course today just for know this tag .

The Links :

< link > : Expressing an external source that I want to link to the page , For example, most uses the Css folder like : < link rel='stylesheet'  href='style.css' /> : rel = relationship is the relation between the html document and the other document we have many type but the most of website use ' stylesheet ' today just know that you have this tag in Css course we will explain all this , and the ' href ' is the hypertext reference we have the css file called style , if we have the file of css ' style.css ' in folder Css for example we must put css/style.css like I have explained in the image lesson .

Some programmers add the < script src='plugin.js'></script> the file of javaScript in the head but it's wrong for me the best way to add it is in the end befor the </body> .

This is picture about what we have done  :

And this is some types of meta : 

 The HTML <head> element has nothing to do with HTML headings.The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.The <head> element is placed between the <html> tag and the <body> tag 

--------------------------------------------------------------------------------------------------------------------

Today we have explained the most important lesson in language and difficult lessons I hope you have enjoyed and understood this lesson very well, if you find a point you did not understand only, make a response and a question and I will answer .

If you like my course just upvote and follow me .

Thank you for your reading !