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>GYAN Tutorial Example</title>

<meta charset="utf-8">

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

<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>

#sec1

{

height:100%;

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

background-size: 100% 100%;

}

#sec2

{

background-color:#cccccc;

height:60%;

}

#sec3

{

background-color:#ccffcc;

}

#sec4

{

background-color:#ccffff;

}

#sec5

{

background-color:black;

}

#sec6

{

background-color:#99ffcc;

}

#sec7

{

background-color:#9999ff;

}

#sec8

{

height:100%;

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

background-size: 100% 100%;

}

#div1

{

margin-top:16%;

}

#div2

{

margin-top:100px;

margin-bottom:100px;

padding-top:0px;

padding-left:0px;

padding-right:0px;

padding-bottom:20px;

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

background-color:#ccccff;

border-radius:20px;

}

#holder

{

height:100%;

background-color:#cccccc;

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

margin-bottom:60px;

margin-top:60px;

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

background-size: 100% 100%;

opacity:.6;

}

#div3

{

margin-top:100px;

margin-bottom:100px;

}

.div4

{

padding:10px;

}

h1, h2, h3

{

color:black;

border-radius:20px;

width:40%;

font-family:myfont;

line-height:40px;

background-color:#ffffff;

}

h4

{

text-align:justify;

margin-top:20px;

font-size:24px;

line-height:40px;

}

h5

{

margin-bottom:2px;

background-color:#0033ff;

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

color:#ffffff;

font-family:myfont;

font-size:16px;

line-height:32px;

}

h6

{

padding:0px;

margin:0px;

background-color:#ffffff;

line-height:32px;

font-size:24px;

font-family:myfont;

color:#0033ff;

border-radius:20px 20px 0px 0px;

}

.heading

{

font-size:64px;

font-family:myfont;

line-height:80px;

text-shadow:1px 1px 2px #ffffff;

color:#0033ff;

background-color:#9999ff;

}

.heading2

{

font-size:64px;

font-family:myfont;

line-height:80px;

text-shadow:1px 1px 2px black;

color:black;

background-color:#99ffcc;

}

p

{

padding:10%;

text-align:justify;

color:black;

font-family:myfont;

font-size:32px;

line-height:40px;

}

label

{

color:#0033ff;

}

input

{

border:none;

box-shadow:1px 1px 2px black;

background-color:#ffffff;

color:#0033ff;

}

.img

{

margin-top:20px;

margin-bottom:20px;

padding:4px;

background-color:#cccccc;

box-shadow:1px 1px 2px black;

}

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

{

body

{

background-color:#333333;

}

h1, h2, h3

{

width:80%;

font-size:16px;

}

h4, h5, p

{

font-size:16px;

line-height:24px;

}

h6

{

font-size:24px;

line-height:40px;

}

.heading, .heading2

{

font-size:36px;

line-height:60px;

}

.img

{

width:100%;

}

label, input

{

width:44%;

}

#div2, #div3

{

margin:20px;

}

}

</style>

</head>

<body>

<section id="sec1" class="col-sm-12">

<div id="div1">

<center><h3>This is the first content</h3></center>

<center><h2>This is the second content</h2></center>

<center><h1>This is the third content</h1></center>

<center><h2>This is the fourth content</h2></center>

<center><h3>This is the fifth content</h3></center>

</div>

</section>

<section id="sec2" class="col-sm-12">

<p>This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content.</p>

</section>

<section id="sec3" class="col-sm-12">

<h4 class="col-sm-8">This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content.</h4>

<img class="img col-sm-4" src="https://website.gyaann.com/e4.jpg" alt="img">

</section>

<section id="sec4" class="col-sm-12">

<img class="img col-sm-4" src="https://website.gyaann.com/e5.jpg" alt="img">

<h4 class="col-sm-8">This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content. This is your content.</h4>

</section>

<section id="sec5" class="col-sm-12">

<div id="holder" class="col-sm-offset-1 col-sm-10">

</div>

<div class="col-sm-1"></div>

</section>

<section id="sec6" class="col-sm-12">

<center><h1 class="heading2">Picture Gallery</h1></center>

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

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

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

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

</div>

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

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

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

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

</div>

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

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

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

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

</div>

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

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

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

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

</div>

</section>

<section id="sec7" class="col-sm-12">

<center><h1 class="heading"><b>Registration</b></h1></center>

<div id="div2" class="col-sm-offset-2 col-sm-3">

<center><h6><b>Form Panel</b></h6></center>

<div class="div4 col-sm-12">

<label class="col-sm-6">Name</label>

<input class="col-sm-6" type="text">

</div>

<div class="div4 col-sm-12">

<label class="col-sm-6">Number</label>

<input class="col-sm-6" type="number">

</div>

<div class="div4 col-sm-12">

<label class="col-sm-6">Email ID</label>

<input class="col-sm-6" type="text">

</div>

<div class="div4 col-sm-12">

<label class="col-sm-6">Address</label>

<input class="col-sm-6" type="text">

</div>

<div class="div4 col-sm-12">

<label class="col-sm-6">City</label>

<input class="col-sm-6" type="text">

</div>

<div class="div4 col-sm-12">

<label class="col-sm-6">State</label>

<input class="col-sm-6" type="text">

</div>

<div class="div4 col-sm-12">

<input class="col-sm-offset-8 col-sm-4" type="submit" value="Submit">

</div>

</div>

<div id="div3" class="col-sm-offset-3 col-sm-2">

<center><h5>Menu List</h5></center>

<center><h5>Menu List</h5></center>

<center><h5>Menu List</h5></center>

<center><h5>Menu List</h5></center>

<center><h5>Menu List</h5></center>

<center><h5>Menu List</h5></center>

</div>

<div class="col-sm-2"></div>

</section>

<section id="sec8" class="col-sm-12"></section>

</body>

</html>

Show
Close