HTML5 Archives - https://mitindia.in/tag/html5/ Fri, 06 Jan 2023 08:53:16 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png HTML5 Archives - https://mitindia.in/tag/html5/ 32 32 CSS blocks-and-menus https://mitindia.in/css-blocks-and-menus/ Wed, 22 Jun 2016 10:37:06 +0000 http://www.mitindia.in/?p=140 In this tutorial you’ll able to create a css [cascading style sheet] blocks for your web site. Below are the some of examples you can refer . Creating beautiful hyperlink buttons with CSS blocks. Example 1. <html> <head> <style> #corner1{ border-radius: 15px 50px 30px 5px; background: skyblue; padding: 20px; width: 100px; height: 25px; } #corner2{ […]

The post CSS blocks-and-menus appeared first on .

]]> In this tutorial you’ll able to create a css [cascading style sheet] blocks for your web site.
Below are the some of examples you can refer .
Creating beautiful hyperlink buttons with CSS blocks.
Example 1.

<html>
<head>
<style> 
#corner1{
  border-radius: 15px 50px 30px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner2{
  border-radius: 15px 50px 30px 5px;
   background: green;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}


#corner3{
  border-radius: 15px 50px 30px 5px;
   background: red;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 15px 50px 30px 5px;
   background: cyan;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}
</style>
</head>
<body>
<p id="corner1"> About us </p>
<p id="corner2"> Contact us </p>
<p id="corner3"> Login here </p>
<p id="corner4"> siteMap </p>
</body>
</html>

output of the above code is:

Example 2.

<html>
<head>
<style> 
#corner1{
  border-radius: 20px 20px 0px 0px;
   background: khaki;
   padding: 20px; 
   width: 950px;
   height: 25px; 
background-image: url("ubuntu.png");
}

#corner2{
  border-radius: 15px 15px 15px 15px;
   background: skyblue;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner3{
   border-radius: 15px 15px 15px 15px;
   background: green;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 15px 15px 15px 15px;
   background: magenta;
   padding: 50px; 
   width: 100px;
   height: 25px; 
}

#corner5{
  border-radius: 15px 15px 15px 15px;
   background: red;
   padding: 50px; 
   width: 100px;
   height: 55px; 
font-size:22pt;
color:red;
background-image: url("solid.jpg");
background-color: blue;
}
</style>
</head>
<body>
<p id="corner1"><marquee> Hello world </marquee> </p>
<p id="corner2"> Hello world </p>
<p id="corner3"> Hello world </p>
<p id="corner4"> Hello world </p>

<table border=0 cellpadding=2 cellspacing=2> 
<tr bgcolor=khaki>
<th> Course Name</th> 
<th> Duration </th>
</tr>

<tr>
<td> Web  </td> 
<td> 2 Months </td>
</tr>
<tr>
<td> Android App Development </td> 
<td> 2 Months </td>
</tr>
</table>

<h2 id="corner5"> Welcome to inline CSS </h2>
<img src="d:\web-design.jpg" id="corner5">
<h3 id="corner4"> Welcome </h3>
</body>
</html>

output:

Example 3.

<html>
<head>
<style> 
#corner1{
  border-radius: 35px 15px 50px 5px;
   background: khaki;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner2{
  border-radius: 35px 15px 50px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}


#corner3{
  border-radius: 35px 15px 50px 5px;
   background: green;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner4{
  border-radius: 35px 15px 50px 5px;
   background: skyblue;
   padding: 20px; 
   width: 100px;
   height: 25px; 
}

#corner5{
  border-radius: 15px 15px 15px 15px;
   padding: 50px; 
   width: 100px;
   height: 55px; 
font-size:22pt;
color:red;
background-color: yellow;
}
</style>
</head>
<body>
<p id="corner1">Home </p>
<p id="corner2"> About us </p>
<p id="corner3"> Login here </p>
<p id="corner4"> Contact us </p>

<table border=0 cellpadding=2 cellspacing=2> 
<tr bgcolor=khaki>
<th> Course Name</th> 
<th> Duration </th>
</tr>

<tr>
<td> Web  </td> 
<td> 2 Months </td>
</tr>
<tr>
<td> Android App Development </td> 
<td> 2 Months </td>
</tr>
</table>

<h2 id="corner5"> Welcome to inline CSS </h2>
</body>
</html>

Output:

Example 4.

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #ff0000;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}   

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border: 1px solid #0000ff;
}

div.desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
</style>
</head>
<body>
<h1> CSS Blocks </h1>
<div class="img">
 <a target="f3" href="wp2.html"><img src="ubuntu.png" width="110" height="90"></a>
 <div class="desc">Ubuntu, a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp3.html"><img src="solid.jpg" alt="Solid" width="110" height="90"></a>
 <div class="desc">Solid, a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp4.html"><img src="java-logo.jpg" alt="java" width="110" height="90"></a>
 <div class="desc">Java,  a description of the image here</div>
</div>

<div class="img">
 <a target="f3" href="wp5.html"><img src="web-design.jpg" alt="web" width="110" height="90"></a>
 <div class="desc">web, a description of the image here</div>
</div>

</body>
</html>

output:

Example 5. Table with CSS properties.

<html>
<head>
<style>
table, td, th {
    border: 5px solid blue;
color:black;
}

th {
    background-color: blue;
    color: white;
}
</style>
</head>

<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>Ramu</td>
    <td>Gopi</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>Suman</td>
    <td>Rastogi</td>
    <td>Indore</td>
  </tr>
  <tr>
    <td>Kevin</td>
    <td>Saman</td>
    <td>Delhi</td>
  </tr>
</table>
</body>
</html>

output:

Example 6 (create shivling using css blocks!)
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:blue;font-family: tahoma; font-size:18pt; background-image:linear-gradient(to bottom, orange,skyblue,white); width:250px; height:30px; border-radius:0px 30px 0px 30px; text-shadow:black 2px 2px;}

#br{background-color:black; width:50px; height:150px; border-radius:30px; padding: 10px; color: white;}
#vs{background-color:black; width:250px; height:30px; border-radius:30px;}
#sh{background-color:black; width:250px; height:30px; border-radius:30px; }

body{background-image:linear-gradient(to bottom, skyblue, white); background-repeat: no-repeat;}

</style>
</head>
<body>
<center>
<h1>Om Namaha Shivay </h1>
<p id="br">=== </p>
<p id="vs"> </p>
<p id="sh"> </p>
</body>
</html>

and the Output is as following!

 

Share

The post CSS blocks-and-menus appeared first on .

]]> HTML5 Validation https://mitindia.in/html5-validation/ https://mitindia.in/html5-validation/#comments Wed, 22 Jun 2016 10:33:44 +0000 http://www.mitindia.in/?p=137 Following example states the use of HTML5 control form validation. <!DOCTYPE html> <html> <body> <h1> HTML5 Form Validation </h1> <hr> <form name=f1> Enter name: <input type="text" pattern="[a-zA-Z]+" title="Your name without space" required /> </br> Email id: <input type="email" required /> </br> WebAddress: <input type="url" required/> starts with http:// </br> Phone number: <input type="tel" pattern="^\d{2}-\d{10}" required/> […]

The post HTML5 Validation appeared first on .

]]> Following example states the use of HTML5 control form validation.

<!DOCTYPE html>
<html>
<body>
<h1> HTML5 Form Validation </h1>
<hr>
<form name=f1>
Enter name: <input type="text" pattern="[a-zA-Z]+" title="Your name without space" required /> </br>
Email id: <input type="email" required /> </br>
WebAddress: <input type="url" required/> starts with http:// </br>
Phone number: <input type="tel"  pattern="^\d{2}-\d{10}" required/> [e.g:91-9876543210]  </br>

Enter date: <input type="date"> </br>
Enter Age: <input type="number" size="6" name="age" min="18" max="99" value="21"></br>

<input type="submit" />
</form>
</body>
</html>

Output of the above page is:

Thank you for reading!

Share

The post HTML5 Validation appeared first on .

]]> https://mitindia.in/html5-validation/feed/ 1