Quick Tips #2: CodePen - a Online Code editor

Hello , guys !!! 

CodePen is a online Code editor where you can code and check the output instantly ...
here the link 🔗https://codepen.io/

or you can follow me because i am uploading all the html codes of this blog in the CodePen 
here's the link 🔗https://codepen.io/arwazkhan189

________________________________________________________________

#4 HTML Attributes

HTML attributes are special words used inside the opening tag to control the element's behaviour ...

Important points:

• Attributes are always specified in the start tag .. i.e. <a href='https://wdforbeginner.blogspot.com/' >.....</a> here href is a attribute.
• Attributes usually comes in name/value pairs like: name="value" 
• Attributes provide more information about elements ....

Examples 

• href attribute - specifies the URL of the page.                                        eg.<a href='https://wdforbeginner.blogspot.com/'>Web Development for Beginner</a>                                                    here <a> is anchor tag.If some one's click on the text he/she go to the link..
• src attribute- specifies the path of a file .                                            eg. <img src="image.jpg"/>                                                          here <img > is a image tag. it loads the image 
• width and height attributes -  eg. <img src='image.jpg' width='200' height='100'>    (specifies width and height in pixels )
• alt attributes - alt attributes is always use with <img> tag that specifies alternate text for an image , if the images not shown due to some error..    eg. <img src='image.jpg' alt='image of a boy'/>  
• style attribute - style attributes is used to add styles to an element ,such as color , background color,font ,size , and more ...                                    eg. <p style="background-color:grey;font-size:10px;">Hello world!</p> 

Like tags ,we can't remember all the attributes at once but we will go through all the possible attributes in this blog ...

here's the list of attributes in HTML ,go through the below link

🔗  https://en.wikipedia.org/wiki/List_of_system_quality_attributes

Next we will learn about HTML Headings....So if you have any doubt comment below..

and share this blog ,follow and subscribe for more updates.....

Quick Tips #1:Setup Your Environment

Don't know How to start ?🤔💭 ,Don't worry i am here to solve your problem and i am Batman 🦇 (just kidding 😁i am Arwaz Khan)...

Follow the below steps to setup your environment:

Step 1: Download a browser

boo! , this step is not for you (yes you!) .. Chrome is always available for you...   (Other browser also available like Safari, Firefox .....)

Step 2: Download a Code editor

You can download any code editor like Visual Studio , VS Code , Sublime text editor , Atom , Notepad++ and many more Code editor available in internet.But, i prefer VS Code editor because it is a free source-code editor  and supported by many OS like windows , mac , Linux ...Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git  ... 

  Download link  VS Code👇👇👇 (Download Community version) 
🔗https://az764295.vo.msecnd.net/stable/a5d1cc28bb5da32ec67e86cc50f84c67cc690321/VSCodeUserSetup-x64-1.46.0.exe
   
                    or download latest version from below link
                                 🔗https://code.visualstudio.com/download

Step 3: Install VS Code 

After downloading , run the setup and just click next , next ... and click ☑  (checkbox) open with code or after installation you can use below method..

Step 4: Setup Environment 

Create a folder and right Click on window and click on open VS Code ..

Now Create a new file and save with .html extension (eg. file.html  <filename>.html)

Step 5: Installing Required Extension

                                           Click on this icon

                                                        or 
      
                    press Ctrl+Shift+X  for  installing extension.
Install following extension:

• HTML CSS Support
• HTML Snippets
• Live Server 
• IntelliSense for CSS class names in HTML
• ESLint

Ok, i Setup my Environment.. Go and Setup Your Environment..

Please Comment below if you have any doubt regarding this .... 

#3 HTML ELEMENTS

Bonjour !😁 (Hello in French Language ....)

Let's learn more about HTML elements..

Nested HTML Elements

HTML allow us to keep one HTML element inside another HTML element.

 Ex.

<!DOCTYPE html>

<html>
<body>

<h1>First Heading</h1>
<p>first paragraph.</p>
</body>
</html>

Important Points:- 

• HTML is not case sensitive i.e. <A> is same as <a>  ,but it is good practice to use lowercase . 
• Never forget to put End tag (eg. <a>.....</a>) unexpected result and errors occurs if you forget the end tag....(Like little-bit IOC 🧪 exception is also here 😀  i.e. Empty HTML Elements)
•  Empty HTML Elements , Tags with starting tag but not with end tag. Eg.  <br> , <input> , <img> , <meta>, <link> , <area>,<col>,<hr> and more...... (Google it !!😅 i don't remember all the tags..)  
• Go through the link for more tags https://en.wikipedia.org/wiki/Category:HTML_tags   you can't remember all the tags at once or you  need not to remember all the tags .... just practice more and more and we will go through all the necessary tags..
• Remember a HTML file starts with <!Doctype html><html> and ends with </html>  .. and the content to be display should be written inside body tag..i.e.  <body>...........</body>.

Next we will going to learn Attributes ....... addio 😁 (bye in italian )

*IOC -Inorganic Chemistry