Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

Online HTML Editor

html 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.w3-bar-item ,.w3-button,.w3-bar-block{
    background-color:black;
    color:white;
}
body{background-color:black;}
.w3-teal,.main{
    background-color:black;
    color:red;
}
</style>
</head>
<body>
    <div class="w3-sidebar w3-bar-block w3-card w3-animate-left" style="display:none" id="mySidebar">
  <button class="w3-bar-item w3-button w3-large"
  onclick="w3_close()">Close &times;</button>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<div id="main">
<div class="w3-teal">
  <button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="w3_open()">&#9776;</button> <center><h1>My Page</h1></center>
  
</div>



<script>
function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidebar").style.width = "25%";
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}
</script>


</body>
</html>

preserve tags

html 

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

latika'spage

html 

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <pre>An example of this technique appears in the
      movie "12 Angry Men."</pre>
   </body>
	
</html>

bleh

html 

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
   background-color:yellow;
}
</style>
</head>
<body>
<div>Hello, World!</div>
<div id="div2">Hello, CSS3!</div>
</body>
</html>

Online HTML Editor

html 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title></title>
		
		
		<style>	@media only screen and (max-width: 300px){ 
				body {
					width:218px !important;
					margin:auto !important;
				}
				.table {width:195px !important;margin:auto !important;}
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto !important;display: block !important;}		
				span.title{font-size:20px !important;line-height: 23px !important}
				span.subtitle{font-size: 14px !important;line-height: 18px !important;padding-top:10px !important;display:block !important;}		
				td.box p{font-size: 12px !important;font-weight: bold !important;}
				.table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr { 
					display: block !important; 
				}
				.table-recap{width: 200px!important;}
				.table-recap tr td, .conf_body td{text-align:center !important;}	
				.address{display: block !important;margin-bottom: 10px !important;}
				.space_address{display: none !important;}	
			}
	@media only screen and (min-width: 301px) and (max-width: 500px) { 
				body {width:308px!important;margin:auto!important;}
				.table {width:285px!important;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}	
				.table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr { 
					display: block !important; 
				}
				.table-recap{width: 295px !important;}
				.table-recap tr td, .conf_body td{text-align:center !important;}
				
			}
	@media only screen and (min-width: 501px) and (max-width: 768px) {
				body {width:478px!important;margin:auto!important;}
				.table {width:450px!important;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}			
			}
	@media only screen and (max-device-width: 480px) { 
				body {width:308px!important;margin:auto!important;}
				.table {width:285px;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}
				
				.table-recap{width: 295px!important;}
				.table-recap tr td, .conf_body td{text-align:center!important;}	
				.address{display: block !important;margin-bottom: 10px !important;}
				.space_address{display: none !important;}	
			}
</style>

	</head>
	<body style="-webkit-text-size-adjust:none;background-color:#fff;width:650px;font-family:Open-sans, sans-serif;color:#555454;font-size:13px;line-height:18px;margin:auto">
<table class="table table-mail" style="width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);">
<tbody>
<tr>
<td class="space" style="width: 20px; padding: 7px 0;"><span face="Open-sans, sans-serif" style="font-family: Open-sans, sans-serif;"><span style="font-size: 13px;"> </span></span></td>
<td align="center" style="padding: 7px 0;">
<table class="table" bgcolor="#ffffff" style="width: 100%;">
<tbody>
<tr>
<td align="center" class="logo" style="border-bottom: 4px solid #333333; padding: 7px 0;"><a title="{shop_name}" href="{shop_url}" style="color: #337ff1;"><span color="#555454" face="Open-sans, sans-serif" style="color: #555454; font-family: Open-sans, sans-serif;"> <img src="{shop_logo}" alt="{shop_name}" /> </span></a></td>
</tr>
<tr>
<td class="box" style="border: 1px solid #D6D4D4; background-color: #f8f8f8; padding: 7px 0;">
<table class="table" style="width: 100%;">
<tbody>
<tr>
<td width="10" style="padding: 7px 0;"><span face="Open-sans, sans-serif" style="font-family: Open-sans, sans-serif;"><span style="font-size: 13px;"> </span></span></td>
<td style="padding: 7px 0;">
<h2 data-html-only="1" style="border-bottom: 1px solid #d6d4d4; margin: 3px 0px 7px; text-transform: uppercase; font-weight: 500; font-size: 18px; padding-bottom: 10px; text-align: center;"><strong><span face="Open-sans, sans-serif" style="font-family: Open-sans, sans-serif;"><span style="font-size: 13px; text-transform: none;">ЗАМОВЛЕННЯ №{id_order} - ВІДПРАВЛЕНО</span></span></strong></h2>
<p>Привіт ще раз.<br />Ми відправили твоє замовлення №{id_order} 🚚🌬</p>
<p>Найближчим часом Нова Пошта повідомить про те, як можна отримати відправлення.<br />Для замовлень, що були відправлені у відділення Нової Пошти приходить повідомлення SMS або Viber з номером декларації.<br />По замовленях, що були відпрвалені адресною доставкою зазвичай зв'язується кур'єр. </p>
<span size="2" face="Open-sans, sans-serif" color="#555454" style="color: #555454; font-family: Open-sans, sans-serif; font-size: small;"><span size="2" face="Open-sans, sans-serif" color="#555454" style="color: #555454; font-family: Open-sans, sans-serif; font-size: small;"></span></span>
<p>Також статус відправлення можна відслідковувати у додатку Нової Пошти.</p>
<p>Дякуємо за покупку.<br />Твоя команда <strong>DECATHLON❤UA</strong></p>
</td>
<td width="10" style="padding: 7px 0;"><span face="Open-sans, sans-serif" style="font-family: Open-sans, sans-serif;"><span style="font-size: 13px;"> </span></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="footer" style="border-top: 4px solid #333333; padding: 7px 0px; text-align: center;"><span color="#777777" face="Open-sans, sans-serif" size="2"><strong>Підтримка користувачів:</strong><br /><a href="tel:0800218484" target="_blank">0-800-21-84-84</a>   •   </span><a href="mailto:[email protected]" target="_blank">[email protected]</a><span>  •  </span><a href="https://www.decathlon.ua/uk/contact-us" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.decathlon.ua/uk/contact-us&source=gmail&ust=1553843724463000&usg=AFQjCNGTWbqUevHU6rDE7QDA4RaZtdf_mA">Центр обробки звернень</a></td>
</tr>
</tbody>
</table>
</td>
<td class="space" style="width: 20px; padding: 7px 0;"><span face="Open-sans, sans-serif" style="font-family: Open-sans, sans-serif;"><span style="font-size: 13px;"> </span></span></td>
</tr>
</tbody>
</table>
</body>
</html>

projct

html 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background:#4CAF50;
  color: white;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px #4CAF50;
}

/* Set a style for the submit button */
.btn {
  background-color:  #4CAF50;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}
</style>
</head>
<body>

<form action="/action_page.php" style="max-width:500px;margin:auto">
  <h2>Register Form</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  
  <div class="input-container">
      <i class="fa fa-mobile" ></i>
      <input class="input-field" type="text" placeholder="Contact" name="tel" /><br />
  </div>
  
  <div class="input-group">
      <span class="input-group-label">
        <i class="fa fa-address-book"></i>
      </span>
      <input class="input-group-field" type="text" placeholder="Full name">
    </div>


  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
  </div>
  
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="psw">
  </div>

  <button type="submit" class="btn">Register</button>
</form>

</body>
</html>

Abcd

html 

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

codeclass

html 

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
   background-color:yellow;
}
</style>
</head>
<body>
<div>Hello, World!</div>
<div id="div2">Hello, CSS3!</div>
</body>
</html>

Online HTML Editor

html 

<!DOCTYPE html>
<html>
<head>
<title>ethans website</title>
<style>
body {
  background-color: red;
  text-align: center;
  color: white;
  font-family: Arial
}
</style>
</head>
<body>

<h1>EHOUSE FX</h1>
<h2>MY LINKS</h2>
<a href="https://www.youtube.com/channel/UCGdFy-KuxZMI8tpOqsp44ww">YOUTUBE</a>
<aside><a href="https://www.instagram.com/ethanhouseworth/">PERSONAL INSTAGRAM</a></aside>
<a href="https://discord.gg/YxdH555">DISCORD</a>
<aside>
<a href="https://twitter.com/ethanhouse99">PERSONALTWITTER</a>
</aside>
</body>
</html>

Online HTML Editor

html 

<!DOCTYPE html>
<html>
    <head>
        <style>
            #A {
              width:50px;
            }
        </style>
    </head>
    <meta charset="UTF-8"/>
    <body>
    <p align="center"><b>Home expensives</b></p>
<table border="1">
<tr>
    <td></td>
    <th align="center">credit card</th>
    <th align="center">Phone</th>
    <th align="center">water</th>
    <th align="center">Nicor</th>
    <th align="center">Comed</th>
    <th align="center">Mortgage</th>
    <th align="center">kumon</th>
    <th align="center">Internet</th>
    <th align="center">Guitar class</th>
    <th align="center">Clarinet</th>
    
<tr>
    <th align="center">Jan</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
   
   
<tr>
    <th align="center">Feb</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    
<tr>
    <th align="center">Mar</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>

</tr>
<tr>
    <th align="center">April</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>

</tr>
<tr>
    <th align="center">May</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
</tr>
<tr>
    <th align="center">June</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
   
</tr>
<tr>
    <th align="center">July</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>

</tr>
<tr>
    <th align="center">Aug</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    
</tr>
<tr>
    <th align="center">Sept</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>

</tr>
<tr>
    <th align="center">Oct</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>

</tr>
<tr>  
    <th align="center">Nov</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
 
</tr>
<tr>
    <th align="center">Dec</th>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>
    <td><input type="text" name="text" id="A"></td>

</tr>

Previous 1 ... 4 5 6 7 8 9 10 ... 732 Next
Advertisements
Loading...
img img img img img img

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.