codeschool.com
how to make a search bar in html

           Home   About   Contact                           
   
 
     Responsive Search Bar
   Navigation bar with a search box and a submit button inside of it your welcome.
   Resize the browser window to see the responsive effect.
 
          first add the following code
   <code><!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> * {box-sizing: border-box;}  body {   margin: 0;   font-family: Arial, Helvetica, sans-serif; }  .topnav {   overflow: hidden;   background-color: #e9e9e9; }  .topnav a {   float: left;   display: block;   color: black;   text-align: center;   padding: 14px 16px;   text-decoration: none;   font-size: 17px; }  .topnav a:hover {   background-color: #ddd;   color: black; }  .topnav a.active {   background-color: #2196F3;   color: white; }  .topnav .search-container {   float: right; }  .topnav input[type=text] {   padding: 6px;   margin-top: 8px;   font-size: 17px;   border: none; }  .topnav .search-container button {   float: right;   padding: 6px 10px;   margin-top: 8px;   margin-right: 16px;   background: #ddd;   font-size: 17px;   border: none;   cursor: pointer; }  .topnav .search-container button:hover {   background: #ccc; }  @media screen and (max-width: 600px) {   .topnav .search-container {     float: none;   }   .topnav a, .topnav input[type=text], .topnav .search-container button {     float: none;     display: block;     text-align: left;     width: 100%;     margin: 0;     padding: 14px;   }   .topnav input[type=text] {     border: 1px solid #ccc;     } } </style> </head> <body>  <div class="topnav">   <a class="active" href="#home">Home</a>   <a href="#about">About</a>   <a href="#contact">Contact</a>   <div class="search-container">     <form action="/action_page.php">       <input type="text" placeholder="Search.." name="search">       <button type="submit"><i class="fa fa-search"></i></button>     </form>   </div> </div>  <div style="padding-left:16px">   <h2>Responsive Search Bar</h2>   <p>Navigation bar with a search box and a submit button inside of it your welcome.</p>   <p>Resize the browser window to see the responsive effect. </div>   more videos from us
                              how to insert an image in html
      
HTML Image example
           first add the following code
  HTML Image example
  <img src="https://kidshelpline.com.au/sites/default/files/thumbnail-T-AAR.png" alt="respect" width="500" height="333">  </body> </html>   Tryit Editor v3.6
test the code now in this purple button
   how to make a side menu on your website
            ×   About   Services   Clients   Contact 
  Animated Sidenav Example
 Click on the open below to open the side navigation menu.
 ☰ open                           try the following code
   <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {   font-family: "Lato", sans-serif; }  .sidenav {   height: 100%;   width: 0;   position: fixed;   z-index: 1;   top: 0;   left: 0;   background-color: #111;   overflow-x: hidden;   transition: 0.5s;   padding-top: 60px; }  .sidenav a {   padding: 8px 8px 8px 32px;   text-decoration: none;   font-size: 25px;   color: #818181;   display: block;   transition: 0.3s; }  .sidenav a:hover {   color: #f1f1f1; }  .sidenav .closebtn {   position: absolute;   top: 0;   right: 25px;   font-size: 36px;   margin-left: 50px; }  @media screen and (max-height: 450px) {   .sidenav {padding-top: 15px;}   .sidenav a {font-size: 18px;} } </style> </head> <body>  <div id="mySidenav" class="sidenav">   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>   <a href="#">About</a>   <a href="#">Services</a>   <a href="#">Clients</a>   <a href="#">Contact</a> </div>  <h2>Animated Sidenav Example</h2> <p>Click on the open below to open the side navigation menu.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>  <script> function openNav() {   document.getElementById("mySidenav").style.width = "250px"; }  function closeNav() {   document.getElementById("mySidenav").style.width = "0"; } </script>     </body> </html>     how to make a table in html
         HTML Table
          Company      Contact      Country    
        Alfreds Futterkiste      Maria Anders      Germany    
        Centro comercial Moctezuma      Francisco Chang      Mexico    
        Ernst Handel      Roland Mendel      Austria    
        Island Trading      Helen Bennett      UK    
        Laughing Bacchus Winecellars      Yoshi Tannamuri      Canada    
        Magazzini Alimentari Riuniti      Giovanni Rovelli      Italy    
 
       <!DOCTYPE html> <html> <head> <style> table {   font-family: arial, sans-serif;   border-collapse: collapse;   width: 100%; }  td, th {   border: 1px solid #dddddd;   text-align: left;   padding: 8px; }  tr:nth-child(even) {   background-color: #dddddd; } </style> </head> <body>  <h2>HTML Table</h2>  <table>   <tr>     <th>Company</th>     <th>Contact</th>     <th>Country</th>   </tr>   <tr>     <td>Alfreds Futterkiste</td>     <td>Maria Anders</td>     <td>Germany</td>   </tr>   <tr>     <td>Centro comercial Moctezuma</td>     <td>Francisco Chang</td>     <td>Mexico</td>   </tr>   <tr>     <td>Ernst Handel</td>     <td>Roland Mendel</td>     <td>Austria</td>   </tr>   <tr>     <td>Island Trading</td>     <td>jaysonxpro</td>     <td>UK</td>   </tr>   <tr>     <td>Laughing Bacchus Winecellars</td>     <td>Yoshi Tannamuri</td>     <td>Canada</td>   </tr>   <tr>     <td>Magazzini Alimentari Riuniti</td>     <td>Giovanni Rovelli</td>     <td>Italy</td>   </tr> </table>  </body> </html>
GitHub Explorer
