Posts

Showing posts with the label html

Creating form with html/How-to

Image
After watching the video ....make sure you watch the video and above to learn more...down below are the source codes <!DOCTYPE html> <html> <head>   <title> form with html </title> </head> <body>   <form>     <label> Firstname: </label>     <input type= "text" name= "fn" required placeholder= "Your firstname..." />     <br/> <br/>     <label> Lastname: </label>     <input type= "text" name= "ln" required placeholder= "your last name.." />     <br/> <br/>    <label> Gender: </label>     <input type= "radio" name= "gen" /> male   <input type= "radio" name= "gen" /> female   <br/> <br/>    <label> Select Country </label>    <select>    ...

How to add/insert image in webpage html tutorials for beginners | adjust...

Image

Auto-image slider with your smart phone(HTML and javaScript)

Image
Creating an auto image slider, you need the knowledge of HTML and javaScript...... But if no knowledge about, you which to create like this....infact you can just copy and the codes down below . Here we go......into the journey. Html :  Using HTML you have place some image with HTML and class them for javaScript to execute. <body> <div class= "mySlides" >   <img src= "Url or name of the image" width= "100%" height= "400px" /> </div> <div class= "mySlides" > <img src= "Url or name of the image  " width= "100%" height= "400px" /> </div> <div class= "mySlides" > <img src= "Url or next of the image" width= "100%" height= "400px" /> </div> Now it's time to add javascript. <script> var slideIndex = 0; showSlides(); function showSlides() {   var i;   var slides = document.getElementsB...

How to make menu slide nav with html, CSS and JavaScript

Image
https://youtu.be/gfex0Rjm5Y4 Creating slide menu bar is quite easy...... follow or copy and paste the code on your editor Body: <body>    <div id= "mySidenav" class= "sidenav" >    <ul>      <li> <a href= "JavaScript:void(0)" onclick= "closeNav()" id= "closebttn" > &times </a> </li>      <li> <a href= "#" > Home </a> </li>      <li> <a href= "#" > Service </a> </li>      <li> <a href= "#" > Contact </a> </li>      <li> <a href= "#" > Terms </a> </li> </ul> </div>    <span onclick= "openNav()" > &#9776 </span> </body> Css: <style> * {   margin:0;   padding:0; }     .sidenav {       height:100%;  ...