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>

<style>

body

{

margin:0px;

}

#img

{

margin:4px;

width:98.6%;

height:100px;

border:1px solid #666666;

}

ul

{

padding:0px;

margin-top:0px;

margin-left:5%;

position:fixed;

width:15%;

height:100%;

border:1px solid #666666;

background-color:#cacdcd;

}

li

{

height:4.8%;

margin-bottom:2.6px;

list-style:none;

background-color:#666666;

color:white;

font-size:16px;

line-height:32px;

}

#li-main

{

height:6.2%;

margin-bottom:2px;

list-style:none;

background-color:black;

color:white;

font-size:16px;

line-height:32px;

}

#main-div

{

margin-left:20.4%;

height:1804px;

width:74.6%;

border:1px solid #666666;

}

#mid

{

float:left;

margin-left:4px;

margin-right:0px;

margin-bottom:4px;

margin-top:4px;

width:70.4%;

height:1588px;

border:1px solid #666666;

background-color:#dcdcdc;

}

#side

{

float:right;

margin-left:0px;

margin-right:4px;

margin-bottom:4px;

margin-top:4px;

width:28%;

height:1588px;

border:1px solid #666666;

background-color:#dcdcdc;

}

#but-img

{

margin-bottom:4px;

margin-left:4px;

margin-right:4px;

width:99%;

height:200px;

border:1px solid #666666;

}

#holder

{

padding-left:6px;

}

#divd

{

margin-top:1340px;

margin-left:4px;

width:96%;

height:240px;

border:1px solid #666666;

border-radius:20px;

background-color:#ffcccc;

}

h1

{

background-color:#666666;

color:white;

width:30%;

border-radius:20px;

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

font-size:16px;

line-height:32px;

}

h2

{

width:30%;

margin-top:2px;

margin-bottom:2px;

margin-left:2px;

margin-right:2px;

float:left;

font-size:32px;

border:1px solid #666666;

background-color:#999999;

}

h3

{

margin:0px;

background-color:#333333;

color:#ffffff;

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

font-size:16px;

line-height:32px;

}

p

{

margin:0px;

padding:20px;

color:#666666;

text-align:justify;

}

#login

{

float:left;

margin-left:22px;

font-size:24px;

line-height:50px;

width:40%;

}

#singup

{

float:right;

margin-right:22px;

font-size:24px;

line-height:50px;

width:40%;

}

label

{

float:left;

margin-left:10px;

margin-top:10px;

width:40%;

}

input

{

float:right;

margin-right:10px;

margin-top:10px;

width:50%;

}

#butn

{

margin-left:40%;

margin-top:20px;

margin-bottom:40px;

width:100px;

}

table

{

margin-top:16px;

margin-left:10px;

width:320px;

}

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

{

ul

{

position:relative;

margin-left:20%;

margin-bottom:0px;

width:60%;

}

#main-div

{

margin-left:20%;

width:60%;

border:none;

}

#mid, #side, #img, #but-img

{

margin:0px;

width:100%;

border:none;

}

h1

{

width:40%;

margin:4px;

}

p

{

padding:4px;

line-height:16px;

font-size:16px;

}

}

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

{

ul

{

margin:0px;

width:100%;

}

#main-div

{

margin:0px;

width:100%;

}

h1

{

width:60%;

}

p

{

font-size:14px;

}

}

</style>

</head>

<body>

<ul>

<li id="li-main"><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

<li><center>Main Heading</center></li>

</ul>

<div id="main-div">

<div id="mid">

<img id="img" src="https://website.gyaann.com/f1.jpg" alt="img">

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

<center><h1>This is heading</h1></center>

<p>This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents. This is the contents.</p>

</div>

<div id="side">

<label id="login">Login</label>

<label id="singup">Sing Up</label>

<label>Username</label>

<input type="text">

<label>Password</label>

<input type="password">

<input id="butn" type="submit">

<div id="holder">

<center><h2>A</h2></center>

<center><h2>A</h2></center>

<center><h2>A</h2></center>

<center><h2>B</h2></center>

<center><h2>B</h2></center>

<center><h2>B</h2></center>

<center><h2>C</h2></center>

<center><h2>C</h2></center>

<center><h2>C</h2></center>

<center><h2>D</h2></center>

<center><h2>D</h2></center>

<center><h2>D</h2></center>

<center><h2>E</h2></center>

<center><h2>E</h2></center>

<center><h2>E</h2></center>

<center><h2>F</h2></center>

<center><h2>F</h2></center>

<center><h2>F</h2></center>

<center><h2>G</h2></center>

<center><h2>G</h2></center>

<center><h2>G</h2></center>

<center><h2>H</h2></center>

<center><h2>H</h2></center>

<center><h2>H</h2></center>

<center><h2>I</h2></center>

<center><h2>I</h2></center>

<center><h2>I</h2></center>

<center><h2>J</h2></center>

<center><h2>J</h2></center>

<center><h2>J</h2></center>

<center><h2>K</h2></center>

<center><h2>K</h2></center>

<center><h2>K</h2></center>

<center><h2>L</h2></center>

<center><h2>L</h2></center>

<center><h2>L</h2></center>

<center><h2>M</h2></center>

<center><h2>M</h2></center>

<center><h2>M</h2></center>

<center><h2>N</h2></center>

<center><h2>N</h2></center>

<center><h2>N</h2></center>

<center><h2>O</h2></center>

<center><h2>O</h2></center>

<center><h2>O</h2></center>

<center><h2>P</h2></center>

<center><h2>P</h2></center>

<center><h2>P</h2></center>

<center><h2>Q</h2></center>

<center><h2>Q</h2></center>

<center><h2>Q</h2></center>

<center><h2>R</h2></center>

<center><h2>R</h2></center>

<center><h2>R</h2></center>

<center><h2>S</h2></center>

<center><h2>S</h2></center>

<center><h2>S</h2></center>

<center><h2>T</h2></center>

<center><h2>T</h2></center>

<center><h2>T</h2></center>

<center><h2>U</h2></center>

<center><h2>U</h2></center>

<center><h2>U</h2></center>

<center><h2>V</h2></center>

<center><h2>V</h2></center>

<center><h2>V</h2></center>

<center><h2>W</h2></center>

<center><h2>W</h2></center>

<center><h2>W</h2></center>

<center><h2>X</h2></center>

<center><h2>X</h2></center>

<center><h2>X</h2></center>

<center><h2>Y</h2></center>

<center><h2>Y</h2></center>

<center><h2>Y</h2></center>

<center><h2>Z</h2></center>

<center><h2>Z</h2></center>

<center><h2>Z</h2></center>

</div>

<div id="divd">

<center><h3>Heading</h3></center>

<table>

<tr><td>Table Row 1</td><td></td><td>Table Row 2</td></tr>

<tr><td>Table Row 1</td><td></td><td>Table Row 2</td></tr>

<tr><td>Table Row 1</td><td></td><td>Table Row 2</td></tr>

<tr><td>Table Row 1</td><td></td><td>Table Row 2</td></tr>

<tr><td>Table Row 1</td><td></td><td>Table Row 2</td></tr>

<tr><td>Table Row 1</td><td></td><td>Table Row 2</td></tr>

<tr><td>Table Row 1</td><td></td><td>Table Row 2</td></tr>

<tr><td>Table Row 1</td><td></td><td>Table Row 2</td></tr>

</table>

</div>

</div>

<img id="but-img" src="https://website.gyaann.com/f2.jpg" alt="img">

</div>

</body>

</html>

Show
Close