web design and development tutorials: May 2020

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

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

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>

</div>

</body>

</html>

This coding of html show you this result:

==>

in Html we type in comments in this form

in these brackets the name of an element.

as like :

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

Subscribe to: Posts (Atom)