Hamarinet

Heading tag
Text align and Text color
Text background color
paragraph tag
Preformatted tag
Line breaks tag
Text size
Text Formating
Div tag
Div background color
Div round border
Marquee tag
Table
Table background-color
List
Unordered List Type
Ordered List Type
Select
Input Type
Form

<h3>Enter All Text</h3>
<input placeholder='Text Input' type='text'/>
<h3>Enter Any Number</h3>
<input placeholder='Only Number' type='number'/>
<h3>Enter Email</h3>
<input placeholder='Enter Email' type='email'/>
<h3>Enter Password</h3>
<input placeholder='Enter Password' type='password'/>
<h3>Select a File</h3>
<input type='file'/>
<h3>Select Date</h3>
<input type='date'/>
<h3>Select Time</h3>
<input type='time'/>
<h3>Select color</h3>
<input type='color'/>
<h3>Button</h3>
<input type='button' value='button-1'/>
<input type='button' value='button-2'/>
<h3>Search Box</h3>
<input placeholder='search' type='search'/>
<h3>Check Box</h3>
<input type='checkbox'/>
<label>Apple</label>
<input type='checkbox'/>
<label>Mango</label>
<input type='checkbox'/>
<label>Orange</label>
<h3>Radio Button</h3>
<input id='html' name='fav_language' type='radio' value='HTML'/>
<label>HTML</label>
<input id='css' name='fav_language' type='radio' value='CSS'/>
<label>CSS</label>
<input id='javascript' name='fav_language' type='radio' value='JavaScript'/>
<label>JavaScript</label>

HTML Editor

Close

Type Selector
Class Selector
Id Selector
Text Color
Background Color
Text Align
Text Decoration
Font Wieght
Font Family
Text-Transform
Margin
Padding
Display-inline
Display-block
Opacity Set-1
Opacity Set-2
Opacity Set-3
Border Style
Border Width and Color
Advance Level Border
Border Radius

<style type='text/css'>
  .solid {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: solid;
  }
  </style>
<h3>Solid</h3>
<div class='solid'></div>
<style type='text/css'>
  .dashed {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: dashed;
  }
  </style>
<h3>Dashed</h3>
<div class='dashed'></div>
<style type='text/css'>
  .dotted {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: dotted;
  }
  </style>
<h3>Dotted</h3>
<div class='dotted'></div>
<style type='text/css'>
  .double {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: double;
  }
  </style>
<h3>Double</h3>
<div class='double'></div>
<style type='text/css'>
  .inset {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: inset;
  }
  </style>
<h3>Inset</h3>
<div class='inset'></div>
<style type='text/css'>
  .outset {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: outset;
  }
  </style>
<h3>Outset</h3>
<div class='outset'></div>

<style type='text/css'>
  .solid-2 {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: solid;
  border-width: 10px;
  border-color: blue;
  background-color: yellow;
  }
  </style>
<h3>Solid</h3>
<div class='solid-2'></div>
<style type='text/css'>
  .dashed-2 {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: dashed;
  border-width: 10px;
  border-color: blue;
  background-color: yellow;
  }
  </style>
<h3>Dashed</h3>
<div class='dashed-2'></div>
<style type='text/css'>
  .dotted-2 {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: dotted;
  border-width: 10px;
  border-color: blue;
  background-color: yellow;
  }
  </style>
<h3>Dotted</h3>
<div class='dotted-2'></div>
<style type='text/css'>
  .double-2 {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: double;
  border-width: 10px;
  border-color: blue;
  background-color: yellow;
  }
  </style>
<h3>Double</h3>
<div class='double-2'></div>
<style type='text/css'>
  .inset-2 {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: inset;
  border-width: 10px;
  border-color: blue;
  background-color: yellow;
  }
  </style>
<h3>Inset</h3>
<div class='inset-2'></div>
<style type='text/css'>
  .outset-2 {
  width: 250px;
  height: 200px;
  margin-left:20px ;
  border-style: outset;
  border-width: 10px;
  border-color: blue;
  background-color: yellow;
  }
  </style>
<h3>Outset</h3>
<div class='outset-2'></div>

<style type='text/css'>
  .R1{
  width: 300px;
  height: 100px;
  margin-left:20px ;
  background-color:yellow ;
  border: 5px solid red;
  border-radius: 125px;
  }
  </style>
<h3>Exampl~1</h3>
<div class='R1'></div>
<style type='text/css'>
  .R2{
  width: 200px;
  height: 200px;
  margin-left:20px ;
  background-color:yellow ;
  border: 5px solid red;
  border-radius: 110px;
  }
  </style>
<h3>Exampl~2</h3>
<div class='R2'></div>
<style type='text/css'>
  .R3{
  width: 200px;
  height: 200px;
  margin-left:20px ;
  background-color:purple ;
  border: 5px solid blue;
  border-radius: 0px 125px 125px 125px;
  }
  </style>
<h3>Exampl~3</h3>
<div class='R3'></div>
<style type='text/css'>
  .R4{
  width: 200px;
  height: 200px;
  margin-left:20px ;
  background-color:purple ;
  border: 5px solid blue;
  border-radius: 0px 125px 0px 125px;
  }
  </style>
<h3>Exampl~4</h3>
<div class='R4'></div>
<style type='text/css'>
  .R5{
  width: 300px;
  height: 150px;
  margin-left:20px ;
  background-color:purple ;
  border: 5px solid blue;
  border-radius: 20px 0px 20px 0px;
  }
  </style>
<h3>Exampl~5</h3>
<div class='R5'></div>

HTML Editor

Close

Variable and Data-type_1
Variable and Data-type_2
Variable and Data-type_3
Variable and Data-type_4
Variable and Data-type_5
Arithmetic Operators
Increment and Decrement
Assignment Operators
Diagrams
If Else_(Example-1)
If Else_(Example-2)
If Else (Example-3)
Switch_(Example-1)
Switch_(Example-2)
Arrey
Object
For Loop
While Loop
Do While Loop
Simple Function
Use if else in Function
Use Switch in Function
Use Loop in Function

<style type='text/css'>
    .hd2{
    flex:1;
    margin-top:;
    padding:10px;
    color:black;
    height:60px;
    width:100%;
    border:;
    border-radius:;
    font-size: ;
    text-align:center;
    }
    #tb {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 300px;
    font-size: 20px;
    }
    
    .th {
    background-color: black;
    color: white;
    height: 50px;
    }
    .td {
    background-color: green;
    color: white;
    height: 50px;
    }
    
    </style>
<div class='hd2'>
<h2>Primitive data types</h2>
</div>
<table id='tb'>
<tr>
<th class='th'>Number</th><td class='td'><b>Example</b><br/> var num = 50; <br/> var float = 5.0;</td>
</tr>
<tr>
<th class='th'>String</th><td class='td'><b>Example</b><br/> var str = "Hello, world"</td>
</tr>
<tr>
<th class='th'>Boolian</th><td class='td'><b>Example</b><br/> var isTrue = true; <br/> var isFalse = false;</td>
</tr>
</table>
<div class='hd2'>
<h2>variable declaration types</h2>
</div>
<table id='tb'>
<tr>
<th class='th'>var</th><td class='td'><b>Example</b><br/> var num = 50;</td>
</tr>
<tr>
<th class='th'>let</th><td class='td'><b>Example</b><br/> let str = "Hello, world"</td>
</tr>
<tr>
<th class='th'>const</th><td class='td'><b>Example</b><br/> const float = 5.0 </td>
</tr>
</table>
<style type='text/css'>
    #tb1 {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 750px;
    font-size: 20px;
    }
    #tb1 tr:nth-child(even){background-color: orange;}
    
    #tb2 {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 750px;
    font-size: 20px;
    }
    #tb2 tr:nth-child(even){background-color: orange;}
    
    #tb3 {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 400px;
    font-size: 20px;
    }
    #tb3 tr:nth-child(even){background-color: orange;}
    
    #tb4 {
    width: 100%;
    border: 3px solid;
    text-align: center;
    height: 800px;
    font-size: 20px;
    }
    #tb4 tr:nth-child(even){background-color: orange;}
    
    th {
    background-color: black;
    color: white;
    height: 50px;
    }
    
    .a {
    font-size: 30px;
    }
    </style>
<div class='hd2'>
<h2>Arithmetic Operators</h2>
</div>
<table id='tb1'>
<tr>
<th>Operator</th><th>Description</th><th>Example</th>
</tr>
<tr>
<td class='a'>+</td><td>Addition</td><td>3 + 3</td>
</tr>
<tr>
<td></td><td>Result</td><td>6</td>
</tr>
<tr>
<td class='a'>-</td><td>Subtraction</td><td>6 - 3</td>
</tr>
<tr>
<td></td><td>Result</td><td>3</td>
</tr>
<tr>
<td class='a'>*</td><td>Multiplication</td><td>3 * 3</td>
</tr>
<tr>
<td></td>
<td>Result</td><td>9</td>
</tr>
<tr>
<td class='a'>/</td><td>Division</td><td>20 / 5</td>
</tr>
<tr>
<td></td><td>Result</td><td>4</td>
</tr>
<tr>
<td class='a'>%</td><td>Modulus</td><td>10 % 3</td>
</tr>
<tr>
<td></td><td>Result</td><td>1</td>
</tr>
<tr>
<td class='a'>++</td><td>Increment</td><td>d = 5</td>
</tr>
<tr>
<td>Result</td><td>d ++</td><td>6</td>
</tr>
<tr>
<td class='a'><b>- -</b></td><td>Decrement</td><td>d = 5</td>
</tr>
<tr>
<td>Result</td><td>d - -</td><td>4</td>
</tr>
</table>
<div class='hd2'>
<h2>Assignment Operators</h2>
</div>
<table id='tb2'>
<tr>
<th>Operator</th><th>Description</th><th>Example</th>
</tr>
<tr>
<td class='a'>=</td><td>Assignment</td><td>10</td>
</tr>
<tr>
<td></td><td>Result</td><td>10</td>
</tr>
<tr>
<td class='a'>+=</td><td>Addition Assignment</td><td>10 += 5</td>
</tr>
<tr>
<td></td><td>Result</td><td>15</td>
</tr>
<tr>
<td class='a'>-=</td><td>Subtraction Assignment</td><td>10 -= 5</td>
</tr>
<tr>
<td></td><td>Result</td><td>5</td>
</tr>
<tr>
<td class='a'>*=</td><td>Multiplication Assignment</td><td>10 *= 5</td>
</tr>
<tr>
<td></td><td>Result</td><td>50</td>
</tr>
<tr>
<td class='a'>/=</td><td>Division Assignment</td><td>10 /= 5</td>
</tr>
<tr>
<td></td><td>Result</td><td>2</td>
</tr>
<tr>
<td class='a'>%=</td><td>Modulus Assignment</td><td>10 %= 5</td>
</tr>
<tr>
<td></td><td>Result</td><td>0</td>
</tr>
</table>
<div class='hd2'>
<h2>Assignment example</h2>
</div>
<table id='tb3'>
<tr>
<th>Example-1</th><th>Example-2</th>
</tr>
<tr>
<td>x = y</td><td>x = y</td>
</tr>
<tr>
<td>x += y</td><td>x = x + y</td>
</tr>
<tr>
<td>x -= y</td><td>x = x - y</td>
</tr>
<tr>
<td>x *= y</td><td>x = x * y</td>
</tr>
<tr>
<td>x /= y</td><td>x = x / y</td>
</tr>
<tr>
<td>x %= y</td><td>x = x % y</td>
</tr>
</table>
<div class='hd2'>
<h2>Comparison Operators</h2>
</div>
<table id='tb4'>
<tr>
<th>Operator</th><th>Description</th><th>Example</th>
</tr>
<tr>
<td class='a'>==</td><td>equal value</td><td>5 == "5"</td>
</tr>
<tr>
<td></td><td>Result</td><td>true</td>
</tr>
<tr>
<td class='a'>!=</td><td>not equal value</td><td>5 != "5"</td>
</tr>
<tr>
<td></td><td>Result</td><td>false</td>
</tr>
<tr>
<td class='a'>===</td><td>equal value and equal type</td><td>5 === "5"</td>
</tr>
<tr>
<td></td><td>Result</td><td>false</td>
</tr>
<tr>
<td class='a'>!==</td><td>not equal value and not equal type</td><td>5 !== "5"</td>
</tr>
<tr>
<td></td><td>Result</td><td>true</td>
</tr>
<tr>
<td class='a'>></td><td>greater than</td>
<td>10 > 5</td>
</tr>
<tr>
<td></td><td>Result</td><td>true</td>
</tr>
<tr>
<td class='a'><</td><td>less than</td><td>5 < 10 </td>
</tr>
<tr>
<td></td><td>Result</td><td>true</td>
</tr>
<tr>
<td class='a'>>=</td><td>greater than or equal </td><td>10 >= 10</td>
</tr>
<tr>
<td></td><td>Result</td><td>true</td>
</tr>
<tr>
<td class='a'><=</td><td>less than or equal </td><td>5 <= 10</td>
</tr>
<tr>
<td></td><td>Result</td><td>true</td>
</tr>
</table>

HTML Editor

Close

Design html tags, and View code

Font Size:

Font Color:

Background:

Border Size:

Border Color:

Border Radius:

width
height
background-color
text-color
text-align center
font-size
margin-top
margin-left
padding-top
padding-left
display flex
text-decoration underline
text-decoration overline
text-decoration line-through
text-decoration none
border
border-color
border-radius

Start practice

Box

.Box {

}

Heading-1
Heading-2
Paragraph Tag
Preformatted Tag
Unordered List
Ordered List
Options Tag
Check Box
Radio Box

HTML Editor

Close

Click html tags, and View code

HTML Editor

Close

RGB Color Changer

R

G

B