Monday, May 11, 2020

css class

css class or html class:

Class in html and css is a selector. We can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to there rules. I can put an example here for more details.


<!DOCTYPE html>
<html>
<head>
<title>Html Class</title>
<style type="">
.red{
text-align: center;
color: green;

}
.center{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="red">My class</h1>
<p class="red">This is my paragraph tag</p>
<h1 class="center">another heading</h1>
<p class="center">this is another paragraph</p>
</body>
</html>

                                                                           ⇊⇊

css class

here i use some classes for attributes we can give many names of classes in our projects we can use many classes and id's in our web projects

at No comments:

Tuesday, May 5, 2020

Html Table Tag

Html Table Tag:


 In this we will learn how to create a Result Sheet in Html with the help of  <table></table> Tags.
I put an example here:

 <!DOCTYPE html>

 <html>

 <head>

 <title>Html Table</title>

 <style>
th{
border: 1px solid;
text-align: center;
}
td{
border: 1px solid;
text-align:center;
}

 </style>
</head>
<body>
<table style="border: 1px solid;">
<tr>
<th>Id</th>
<th>Name</th>
<th>Class</th>
<th>Ob.Marks</th>
<th>G.Marks</th>
<th>Percantage</th>
<th>Grade</th>
</tr>
<tr>
<td>1</td>
<td>Asad</td>
<td>9th</td>
<td>450</td>
<td>600</td>
<td>75</td>
<td>A</td>


</tr>
<tr>
<td>2</td>
<td>Ashfaq</td>
<td>9th</td>
<td>525</td>
<td>600</td>
<td>87.5</td>
<td>A++</td>
</tr>
<tr>
<td>3</td>
<td>Ishaq</td>
<td>9th</td>
<td>400</td>
<td>600</td>
<td>66.66</td>
<td>B</td>
</tr>
<tr>
<td>4</td>
<td>Bakhtawar</td>
<td>9th</td>
<td>489</td>
<td>600</td>
<td>81.5</td>
<td>A++</td>
</tr>
<tr>
<td>5</td>
<td>Ajmal</td>
<td>9th</td>
<td>508</td>
<td>600</td>
<td>84.6</td>
<td>A++</td>
</tr>
</table>
</body>
</html>

The result of this html table coding will be prefer on browser as shown below:
↧↧


you can see that how to create a table with this coding to create a table we take <table> tags opening and </table> tags closing <tr> represent table raws this apply for any new row for heading and data every data put in <td> which take a new <tr> table raw in your knowledge at the time of coding that tag open that close after the function completition of that tag.

for more information you can visit my youtube channel i put here my Html table's tutorial here:

for more learn Html Tutorials in Urdu/Hindi you can visit my channel Playlist with this link:
https://www.youtube.com/playlist?list=PLZMCGnmlcuPkvW6u7H15phvrO4r0YG79q



at No comments:

Monday, May 4, 2020

Html Comment tag

Html Comment tag:

Html comments mostly useful in mega projects in every language comments are most important tag becuase when we make a project can't be complete in one day or soon for this purpose we use comments

<!DOC-TYPE html>

 <html>

 <head>

 <title>Html Comments</title>

 <style type="">

 #wrapper{

 background-color: silver;

 height: 900px;

 margin-top: 15px;

 width: 1100px;
}

 #header{

 background-color: green;

 height: 30px;

 width: 1100px;

 margin-top: 10px;
}
</style>

 </head>

 <body>

 <div id="wrapper">

 <div id="header">

</div><!--end of header-->

 </div><!--end of wrapper-->

 </body>

 </html>

 This coding of html show you this result:

==>


in Html we type in comments in this form <!--end of anything-->
in these brackets the name of an element.

as like : <!--end of wrapper-->
<!--end of header-->
<!--end of body-->

And in last you can watch this complete tutorial video.↡


                                       
at No comments:

Thursday, April 30, 2020

html div margin vs padding

html div margin vs padding

Margin:

Html div margin and padding is most important topic in websites when we create a web  project then margin and padding is mostly use in html stylesheet. Margin help us to make a distance from browser to our web page we use margin for four sides of browser and web page. When we need one side or two sides margin then we can use as margin-top, margin-left, margin-bottom and margin-left and define in pixels use in CSS stylesheet px;

Padding:

Html Padding is use for internal distance. Suppose i write some thing in my div / division then i want to distance between div and paragraph or other typing tags i will use Padding. Padding is work in div in it is this is similar as Margin but margin effects on web browser and padding effects on content. I give an example with my codes.


<!DOCTYPE html>
<html>
<head>
<title>Html div tag</title>
<style type="text/css">
#div1{
background-color: green;
height: 400px;
width: 600px;
margin-top: 20px;
margin-left: 15px;
padding-top: 5px;
padding-left: 15px;
}
</style>
</head>
<body>
<div id="div1">
<p>this is my paragraph tag</p>
</div>
</body>
</html>

                                                                                ⇊⇊

html div margin vs padding


In this coding i use a div id div1 and in div a take a paragraph tag when i style this div margin and padding margin work with web browser and my div's green area get away from browser and when use padding that effects on my <p> Paragraph tag </p> and paragraph space from div when i apply margin-top and margin-left.

This is an example of difference between margin and padding  for more details you can watch my video below.



at No comments:

Tuesday, April 28, 2020

html div tag element

html div tag element

html div tag element is most useful tag in websites when we create a web page or website there are some tags that must use in website in these div tag is one tag that useful in web pages in web programming div is a division tag that separates one part of website from another part.

 Html div tag element start with <div> tag and end with </div> tag.
About this i give an example from my short document.


<!DOCTYPE html>
<html>
<head>
<title>Html div tag</title>
<style type="text/css">
#div1{
background-color: green;
height: 100px;
width: 200px;
}
#div2{
background-color:blue;
height: 100px;
width: 200px;
}
#div3{
background-color:red;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>

when we put these codes the browser will give the result like this Image:↴

                                                                               ⇊⇊
   
               
html div element has two catogeries "id" and "class" we use in this coding "id" id is specification of an element.

 For more detail you can watch my video on youtube  I clear html div tag element in this video.





at No comments:

Sunday, April 26, 2020

Html line break tag

Html line break tag


Html line break tag is use for space in between two lines that called <br> tag. if i write a paragraph and want space in lines i can use <br> tag such as i break the line and i will go in another line for example i type an small project for teach you.


<!DOCTYPE html>
<html>
<head>
<title>Html break tag</title>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type<br>and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially <br>unchanged. It was popularised in the 1960s with the release of Letraset 









sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</body>
</html>


                                                                  ⇊⇊
Html line break tag

Here you can see where i apply <br> tag there a line space but where i press enter key there no space because html not count enter how many time press it's work with own coding. 

for more example i publish a video on my Youtube Channel you can watch video and subscribe my Youtube Channel





In this video we are talking about line break tag <br> that is unclose html element that break in lines.
at No comments:

HTML Anchor Tag || Link Tag

HTML Anchor Tag || Link Tag


Html Anchor tag mostly use in websites. This link use in web page to connect another web page or a link of any marketing or download app link in these all purposes html anchor tag.
How can we write our html anchor tag? I give you a simple example of HTML Anchor Tag

in html file we can put anchor tag such as:

<a href="https://www.google.com">Google</a>

these a tags called anchor tag href means hyper reference that use for reference of another page or link of any website or app. Hyper reference =" " in this double quotes we type the link of our page or web address of website.<a href=""> must be type in these breases after this the name of your page or website or application  and close the anchor tag with </a> this tag


About this watch my video






In this video we are talking about Anchor tag in detail if you did not  understand about any topic of web designing or web development you can comment here or on my youtube channel link in above description.
at No comments:
Subscribe to: Posts (Atom)

css class

css class or html class: Class in html and css is a selector. We can define style rules based on the class attribute of the elements. Al...