Skip to main content

How to start learning Web-development

Post a Comment

Html tutorial 3 ids , class in html and how we use them

 Basic tags which left -

Semantic tags -

1. article tag -
    article is self contained content we write article related content in this tag like blog , newspaper , etc.

syntax -
<article>
article tag in html
</article>

2. aside tag - 
    some content was aside from its place and they place at the side of website like a small column box .

syntax - 

<aside>
this is aside tag
</aside>

3. Header tag - it is place at top of the website or say as a head of the website and work as menu or navigation bar for web page .

syntax -

<header>
this is header tag 
</header>

4. Footer tag -
this tag was placed at the bottom of the web page and we can take our more detail in the footer and address contact number etc are present at footer 

syntax - 
<footer> this is footer <footer>

what is means of &nbsp in html ?
it is know as non breaking space we use it in line no space and it do not break the line and make space between words or in other word to word separate are stick togather but not break in different lines.

what is id's means ??

we use id in html for give a unique number to tags and find them simple for any modification or say to point that id for styling of it through css and because it was unique number for all tags so once it was used we cannot use it again in any other tags so thats was it is a unique all time .

syntax - 
<p id="id_name">
this is how we take id in html
</p>

css - 
#id_name{
            color: blue;
        }

on server -

this is how we take id in html



what is class attribute in html 
We use one class named in more than one tags and modified them or say style them by class simply if we want to style multiple paragarph tag so we get them by class and style them in CSS ( if we want same style ).

Syntax -

<!-- class in html -->
<p class="class_name">
this is how we take class
</p>

css-
.class_name{
            color: red;
        }

on server -

this is how we take class

Code -

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tags in html</title>
<style>
.class_name{
color: red;
}
#id_name{
color: blue;
}
</style>
</head>

<body>
<!-- semantic tags -->

<!-- article -->
<article>
article tag in html
</article>

<!-- aside tag -->
<aside>
this is aside tag
</aside>

<!-- id -->
<p id="id_name">
this is how we take id in html
</p>

<!-- class in html -->
<p class="class_name">
this is how we take class
</p>
</body>

</html>


ON SERVER -

article tag in html

this is how we take id in html

this is how we take class

Which type of IDE you have to use it -

This code editor is mostly used by  programmer in competitive level and also in collages and this is a best programming ide and it is belongs to Microsoft one of the best company which most of the people belive so for starting  you start with vs-code ide and its UI is very simple to understand but at start have to take a tutorial about it in YOUTUBE  so first  start programming with this .


Comments

Post a Comment

Popular posts from this blog

Why we learn REACT JS in web development

 REACT JS in web development - why we use it ? we learn REACT JS in web development because it help us to write less code and make more efficient  website because it divide code into many component which was which help us to to write less code and make more efficient work in less time you can say it is time saver if you don't want to write code from base or say scratch react js is reliable for us and very efficient for web development . What is Component means ? The meaning of component is you say in simple language is react divide the code of website let say if we want to make a website and we want to use a code repeatly so we have to write the again and again but if you was use component you have to write code at ones and use it by import it again and again you can work very efficiently and fast  What we have to do in react  In react we have to convert html form language into JSX form language and if you think how we can do this so their is many option are availabl...
Post a Comment
Read more

Tutorial 10 text align , decoration etc explaining

 Text in Css - 1.Text color -     here we can set color in text for making them more enhancive or if we want required to change in color of text it work perfectly  syntax - color : red; OUTPUT - text color is change to red 2.Text alignment -     It is used for align the text according to the requirement and their situation we align text at center , right , left etc syntax - text-align:center; 3.Text decoration-     It is to decorate the text let if we want to underline in text then we use text decoration and make it on the line  syntax - text-decoration: underline; OUTPUT - text have an underline decoration 4.Text transformation -  In this we transform letters into uppercase , lowercase and capitalization means if the letter is small then it will convert into uppercase or visa-versa syntax - text-transform:(uppercase , lowercase , capitalize); 5.Text spacing - It decided the space between letter and words both how many gap are between...
Post a Comment
Read more

Code of HTML and CSS how we take color , border , etc

  code of HTML and CSS - 1. How we take change color in css (color and border both property) code - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>color in css</title> <style> .color1{ background-color: green; } .color2{ color: yellow; } .color3{ border: 2px solid red; } </style> </head> <body> <!-- lets take paragarph --> <p class="color1"> In display property if we apply inline-block property on it we can be set their width and height and element was set next to a element in line it not take extra space so in easy word it is work as both block element who's width and height can be changed </p> <p class="color2"> In display property if we apply inline-blo...
Post a Comment
Read more