Basic Learner for Programming

..
Copy the code in a notepad or other text editor
Save the notepad with filename.html extention and choose all files in save as type option
Right Click on the file and Open with browser to execute the output

Example of a complete website

<html>

<head>

<title>Basic Learner for Programming</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://website.gyaann.com/bootstrap.min.css">

<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>

<script src="https://website.gyaann.com/bootstrap.min.js"></script>

<style>

body

{

margin:0px;

background-image:url("https://website.gyaann.com/d1.jpg");

background-size:100% 100%;

}

div

{

position:fixed;

background-color:#333333;

height:40px;

}

ul

{

padding:0px;

}

li

{

list-style:none;

line-height:40px;

background-color:#333333;

color:#ffffff;

font-family:myfont;

}

li:hover

{

list-style:none;

line-height:40px;

background-color:#999999;

color:#333333;

}

a

{

text-decoration:none;

}

a:hover

{

text-decoration:none;

}

.img

{

height:40px;

padding:0px;

box-shadow:1px 1px 1px #ffffff;

}

input

{

padding:20px;

margin-top:24%;

width:30%;

height:40px;

border:none;

border-radius:0px 6px 6px 0px;

box-shadow:1px 1px 1px #333333;

}

label

{

margin-top:24%;

width:100px;

line-height:40px;

border-radius:6px 0px 0px 6px;

background-color:#333333;

font-family:myfont;

color:#ffffff;

}

@media screen and (max-width:480px)

{

ul

{

display:none;

}

div:hover ul

{

display:block;

}

div:hover .img

{

display:none;

}

input

{

margin-top:60%;

width:60%;

}

label

{

margin-top:60%;

}

}

</style>

</head>

<body>

<div class="col-lg-12">

<ul class="col-lg-8">

<b><a href="#"><center><li class="col-lg-2">Home</li></center></a></b>

<b><a href="#"><center><li class="col-lg-2">About Us</li></center></a></b>

<b><a href="#"><center><li class="col-lg-2">Gallery</li></center></a></b>

<b><a href="#"><center><li class="col-lg-2">Services</li></center></a></b>

<b><a href="#"><center><li class="col-lg-2">Other Details</li></center></a></b>

<b><a href="#"><center><li class="col-lg-2">Contact Us</li></center></a></b>

</ul>

<img class="img col-lg-offset-1 col-lg-1" src="https://website.gyaann.com/d2.jpg" alt="img">

<img class="img col-lg-2" src="https://website.gyaann.com/d3.gif" alt="img">

</div>

<center><label>Search</label><input type="text" placeholder="Search Panel"></center>

</body>

</html>

Show
Close